From 9916da218c3eb2c33308269676ec8e69bd6c6232 Mon Sep 17 00:00:00 2001
From: mvdbeek <m.vandenbeek@gmail.com>
Date: Mon, 4 Nov 2024 18:32:33 +0100
Subject: [PATCH] Rerender on resize

---
 client/src/components/WorkflowInvocationState/VegaWrapper.vue | 4 ++++
 .../WorkflowInvocationState/WorkflowInvocationMetrics.vue     | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/client/src/components/WorkflowInvocationState/VegaWrapper.vue b/client/src/components/WorkflowInvocationState/VegaWrapper.vue
index 586fa124cf0e..e5f4a8f49ba8 100644
--- 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
index 4da3248864f1..0ce5561c3795 100644
--- 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;
 });