From cf9391ddc006bc1719d66bac4ecf18e98d440ccb Mon Sep 17 00:00:00 2001
From: Pieter Verschaffelt <pieter.verschaffelt@ugent.be>
Date: Fri, 22 Sep 2023 14:55:20 +0200
Subject: [PATCH] Some minor changes

---
 .../visualizations/HierarchicalOutline.vue    |  2 +-
 src/components/visualizations/Sunburst.vue    | 23 +++++++++++++------
 src/components/visualizations/TreeMap.vue     |  2 --
 src/interface/Assay.ts                        |  2 +-
 4 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/src/components/visualizations/HierarchicalOutline.vue b/src/components/visualizations/HierarchicalOutline.vue
index 1bab4224..1bcb7f07 100644
--- a/src/components/visualizations/HierarchicalOutline.vue
+++ b/src/components/visualizations/HierarchicalOutline.vue
@@ -13,7 +13,7 @@
 
         <v-col
             id="searchtree"
-            class="treeView multi pt-0"
+            class="treeView multi pt-2"
             cols="6"
         />
 
diff --git a/src/components/visualizations/Sunburst.vue b/src/components/visualizations/Sunburst.vue
index 90a62fa8..337213be 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<void>((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 30cdaed9..33d28f04 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 5c7b020f..975f881c 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
-};
+}