From 827a85412e3dc2a9698adadc92492c334f739347 Mon Sep 17 00:00:00 2001
From: Christoph Kluge <christoph.kluge@fau.de>
Date: Tue, 5 Sep 2023 14:55:36 +0200
Subject: [PATCH] Fix polar and roofline sizes in jobView

- add option for adaptable roofline sizing
---
 web/frontend/src/Job.root.svelte       | 33 +++++++++++---------------
 web/frontend/src/Status.root.svelte    |  1 +
 web/frontend/src/plots/Polar.svelte    |  3 ++-
 web/frontend/src/plots/Roofline.svelte | 10 ++++----
 4 files changed, 22 insertions(+), 25 deletions(-)

diff --git a/web/frontend/src/Job.root.svelte b/web/frontend/src/Job.root.svelte
index b0db95e..e2bba63 100644
--- a/web/frontend/src/Job.root.svelte
+++ b/web/frontend/src/Job.root.svelte
@@ -131,7 +131,6 @@
         lazyFetchMoreMetrics();
 
     let plots = {},
-        roofWidth,
         jobTags,
         statsTable;
     $: document.title = $initq.fetching
@@ -253,24 +252,20 @@
             />
         </Col>
         <Col>
-            <div bind:clientWidth={roofWidth}>
-                <Roofline
-                    width={roofWidth - 10}
-                    height={(roofWidth / 2) - 5}
-                    renderTime={true}
-                    cluster={clusters
-                        .find((c) => c.name == $initq.data.job.cluster)
-                        .subClusters.find(
-                            (sc) => sc.name == $initq.data.job.subCluster
-                        )}
-                    data={
-                        transformDataForRoofline (
-                            $jobMetrics.data.jobMetrics.find((m) => m.name == "flops_any" && m.scope == "node").metric,
-                            $jobMetrics.data.jobMetrics.find((m) => m.name == "mem_bw" && m.scope == "node").metric
-                        )
-                    }
-                />
-            </div>
+            <Roofline
+                renderTime={true}
+                cluster={clusters
+                    .find((c) => c.name == $initq.data.job.cluster)
+                    .subClusters.find(
+                        (sc) => sc.name == $initq.data.job.subCluster
+                    )}
+                data={
+                    transformDataForRoofline (
+                        $jobMetrics.data.jobMetrics.find((m) => m.name == "flops_any" && m.scope == "node").metric,
+                        $jobMetrics.data.jobMetrics.find((m) => m.name == "mem_bw" && m.scope == "node").metric
+                    )
+                }
+            />
         </Col>
     {:else}
         <Col />
diff --git a/web/frontend/src/Status.root.svelte b/web/frontend/src/Status.root.svelte
index 73060c6..fffbfde 100644
--- a/web/frontend/src/Status.root.svelte
+++ b/web/frontend/src/Status.root.svelte
@@ -427,6 +427,7 @@
                 <div bind:clientWidth={plotWidths[i]}>
                     {#key $mainQuery.data.nodeMetrics}
                         <Roofline
+                            allowSizeChange={true}
                             width={plotWidths[i] - 10}
                             height={300}
                             cluster={subCluster}
diff --git a/web/frontend/src/plots/Polar.svelte b/web/frontend/src/plots/Polar.svelte
index b5c488f..3aeb74d 100644
--- a/web/frontend/src/plots/Polar.svelte
+++ b/web/frontend/src/plots/Polar.svelte
@@ -25,6 +25,7 @@
     export let metrics
     export let cluster
     export let jobMetrics
+    export let height = 350
 
     const metricConfig = getContext('metrics')
 
@@ -94,7 +95,7 @@
 </script>
 
 <div class="chart-container">
-    <Radar {data} {options}/>
+    <Radar {data} {options} {height}/>
 </div>
 
 <style>
diff --git a/web/frontend/src/plots/Roofline.svelte b/web/frontend/src/plots/Roofline.svelte
index 446513e..f394293 100644
--- a/web/frontend/src/plots/Roofline.svelte
+++ b/web/frontend/src/plots/Roofline.svelte
@@ -6,10 +6,10 @@
 
     export let data = null
     export let renderTime = false
-    export let maxY = null // Optional
+    export let allowSizeChange = false
     export let cluster = null
-    export let width = 500
-    export let height = 300
+    export let width = 600
+    export let height = 350
 
     let plotWrapper = null
     let uplot = null
@@ -135,7 +135,7 @@
                         log: 10, // log exp
                     },
                     y: {
-                        range: [1.0, nearestThousand(cluster.flopRateSimd.value || maxY)],
+                        range: [1.0, cluster?.flopRateSimd?.value ? nearestThousand(cluster.flopRateSimd.value) : 10000],
                         distr: 3, // Render as log
                         log: 10, // log exp
                     },
@@ -238,7 +238,7 @@
             render(data)
         }, 200)
     }
-    $: sizeChanged(width, height)
+    $: if (allowSizeChange) sizeChanged(width, height)
 </script>
 
 {#if data != null}