Rerender on resize

galaxyproject · Nov 5, 2024 · 9916da2 · 9916da2
1 parent 39a7ed2
commit 9916da2
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 1 deletion.
diff --git a/client/src/components/WorkflowInvocationState/VegaWrapper.vue b/client/src/components/WorkflowInvocationState/VegaWrapper.vue
@@ -3,6 +3,7 @@
 </template>
 
 <script setup lang="ts">
+import { useResizeObserver } from "@vueuse/core";
 import embed, { type VisualizationSpec } from "vega-embed";
 import { onBeforeUnmount, onMounted, ref, watch } from "vue";
 
@@ -28,6 +29,9 @@ async function embedChart() {
 onMounted(embedChart);
 
 watch(props, embedChart, { immediate: true, deep: true });
+useResizeObserver(chartContainer, () => {
+    embedChart();
+});
 
 // Cleanup the chart when the component is unmounted
 onBeforeUnmount(() => {

diff --git a/client/src/components/WorkflowInvocationState/WorkflowInvocationMetrics.vue b/client/src/components/WorkflowInvocationState/WorkflowInvocationMetrics.vue
@@ -150,7 +150,7 @@ function itemToSpec(item: boxplotData) {
 }
 
 const specs = computed(() => {
-    const items = [wallclock.value, coresAllocated.value, memoryAllocated.value].filter((item) => item.values?.length);
+    const items = [wallclock.value, coresAllocated.value, memoryAllocated.value, peakMemory.value].filter((item) => item.values?.length);
     const specs = Object.fromEntries(items.map((item) => [item.y_title, itemToSpec(item)]));
     return specs;
 });