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 @@
-
+
@@ -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(),