diff --git a/src/components/visualizations/HierarchicalOutline.vue b/src/components/visualizations/HierarchicalOutline.vue
index 1bab422..1bcb7f0 100644
--- a/src/components/visualizations/HierarchicalOutline.vue
+++ b/src/components/visualizations/HierarchicalOutline.vue
@@ -13,7 +13,7 @@
diff --git a/src/components/visualizations/Sunburst.vue b/src/components/visualizations/Sunburst.vue
index 90a62fa..337213b 100644
--- a/src/components/visualizations/Sunburst.vue
+++ b/src/components/visualizations/Sunburst.vue
@@ -45,6 +45,10 @@ import { Sunburst as UnipeptSunburst, SunburstSettings } from 'unipept-visualiza
import { onMounted, ref, watch } from 'vue';
import { tooltipContent } from './VisualizationHelper';
+// The amount of milliseconds that the SunBurst should wait with animating movement before or after a filter was
+// changed.
+const rerootTimeout = 0;
+
export interface Props {
data: NcbiTree
@@ -101,10 +105,12 @@ watch(() => props.doReset, () => {
});
watch(() => props.filterId, () => {
- if(visualizationComputed.value) {
- // @ts-ignore (reroot is not exported in the interface of the visualization)
- visualizationComputed.value.reroot(props.filterId, false);
- }
+ new Promise((resolve) => setTimeout(resolve, rerootTimeout)).then(() => {
+ if (visualizationComputed.value) {
+ // @ts-ignore (reroot is not exported in the interface of the visualization)
+ visualizationComputed.value.reroot(props.filterId, false);
+ }
+ });
});
watch(() => props.isFixedColors, () => {
@@ -123,9 +129,12 @@ const initializeVisualisation = () => {
height: props.height,
useFixedColors: props.isFixedColors,
rerootCallback: d => {
- if(visualizationComputed.value) {
- emits("update-selected-taxon-id", d.id);
- }
+ // Wait 500ms to start the animation to avoid stutter in the interface.
+ new Promise(resolve => setTimeout(resolve, rerootTimeout)).then(() => {
+ if (visualizationComputed.value) {
+ emits("update-selected-taxon-id", d.id);
+ }
+ });
},
getTooltipText: d => tooltipContent(d)
} as SunburstSettings;
diff --git a/src/components/visualizations/TreeMap.vue b/src/components/visualizations/TreeMap.vue
index 30cdaed..33d28f0 100644
--- a/src/components/visualizations/TreeMap.vue
+++ b/src/components/visualizations/TreeMap.vue
@@ -147,8 +147,6 @@ const initializeVisualisation = () => {
getTooltipText: d => tooltipContent(d)
} as TreemapSettings;
- console.log(JSON.stringify(settings));
-
const treemap = new UnipeptTreemap(
visualization.value as HTMLElement,
props.data.getRoot(),
diff --git a/src/interface/Assay.ts b/src/interface/Assay.ts
index 5c7b020..975f881 100644
--- a/src/interface/Assay.ts
+++ b/src/interface/Assay.ts
@@ -4,4 +4,4 @@ export default interface Assay {
peptides: string[]
amountOfPeptides: number
createdAt: Date
-};
+}