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 -}; +}