From 405455668a3cde06fc87481ce538334bfaa4b85b Mon Sep 17 00:00:00 2001
From: Pieter Verschaffelt <pieter.verschaffelt@ugent.be>
Date: Fri, 25 Aug 2023 14:14:12 +0200
Subject: [PATCH] Fix ImageDownloadModal and TreeMap

---
 src/components/modals/DownloadImageModal.vue |  6 +++---
 src/components/visualizations/TreeMap.vue    | 14 +++++++++++++-
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/components/modals/DownloadImageModal.vue b/src/components/modals/DownloadImageModal.vue
index 5998d72..e40dd41 100644
--- a/src/components/modals/DownloadImageModal.vue
+++ b/src/components/modals/DownloadImageModal.vue
@@ -33,7 +33,7 @@
             </div>
 
             <div class="ma-4">
-                <div class="d-flex justify-start align-center">
+                <div class="d-flex justify-start align-center mb-2">
                     <span
                         class="mr-2"
                         style="position: relative; top: 3px;"
@@ -44,7 +44,7 @@
                         v-model="formatValue"
                         :items="formatValues"
                         item-text="label"
-                        dense
+                        density="compact"
                         hide-details
                     />
                 </div>
@@ -59,7 +59,7 @@
                         v-model="scalingValue"
                         :items="enlargementValues"
                         item-title="label"
-                        dense
+                        density="compact"
                         hide-details
                         :disabled="isSvg()"
                     />
diff --git a/src/components/visualizations/TreeMap.vue b/src/components/visualizations/TreeMap.vue
index c2672cd..30cdaed 100644
--- a/src/components/visualizations/TreeMap.vue
+++ b/src/components/visualizations/TreeMap.vue
@@ -126,8 +126,18 @@ const initializeVisualisation = () => {
         visualization.value.innerHTML = "";
     }
 
+    let width: number = props.width ? props.width : (visualization.value?.clientWidth || 0);
+    if (!props.width) {
+        let currentEl = visualization.value;
+        while (currentEl && currentEl.clientWidth === 0) {
+            // Wait until the visualization has a width
+            currentEl = currentEl.parentElement;
+        }
+        width = currentEl?.clientWidth || 0;
+    }
+
     const settings = {
-        width: props.width ? props.width : visualization.value?.clientWidth,
+        width: width,
         height: props.height - 20,
         rerootCallback: d => {
             if(visualizationComputed.value) {
@@ -137,6 +147,8 @@ const initializeVisualisation = () => {
         getTooltipText: d => tooltipContent(d)
     } as TreemapSettings;
 
+    console.log(JSON.stringify(settings));
+
     const treemap = new UnipeptTreemap(
         visualization.value as HTMLElement,
         props.data.getRoot(),