Fix polar and roofline sizes in jobView

- add option for adaptable roofline sizing

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
-                <Roofline
+                renderTime={true}
-                    width={roofWidth - 10}
+                cluster={clusters
-                    height={(roofWidth / 2) - 5}
+                    .find((c) => c.name == $initq.data.job.cluster)
-                    renderTime={true}
+                    .subClusters.find(
-                    cluster={clusters
+                        (sc) => sc.name == $initq.data.job.subCluster
-                        .find((c) => c.name == $initq.data.job.cluster)
+                    )}
-                        .subClusters.find(
+                data={
-                            (sc) => sc.name == $initq.data.job.subCluster
+                    transformDataForRoofline (
-                        )}
+                        $jobMetrics.data.jobMetrics.find((m) => m.name == "flops_any" && m.scope == "node").metric,
-                    data={
+                        $jobMetrics.data.jobMetrics.find((m) => m.name == "mem_bw" && m.scope == "node").metric
-                        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>
         </Col>
     {:else}
         <Col />

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}

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>

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 width = 600
-    export let height = 300
+    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}