From 8e1c5a485faa93bd48c207cd011103cb3e000320 Mon Sep 17 00:00:00 2001
From: Christoph Kluge <christoph.kluge@fau.de>
Date: Fri, 6 Sep 2024 12:00:33 +0200
Subject: [PATCH] Improve grid scaling

---
 web/frontend/src/Job.root.svelte              | 50 +++++++++----------
 .../src/generic/helper/ConcurrentJobs.svelte  | 20 ++++----
 .../src/generic/plots/Roofline.svelte         |  2 -
 3 files changed, 34 insertions(+), 38 deletions(-)

diff --git a/web/frontend/src/Job.root.svelte b/web/frontend/src/Job.root.svelte
index 8ea259a..2afa5a8 100644
--- a/web/frontend/src/Job.root.svelte
+++ b/web/frontend/src/Job.root.svelte
@@ -59,7 +59,8 @@
 
   let plots = {},
     jobTags,
-    statsTable
+    statsTable,
+    roofWidth
 
   let missingMetrics = [],
     missingHosts = [],
@@ -231,9 +232,9 @@
     }));
 </script>
 
-<Row cols={4} class="mb-2">
+<Row class="mb-0 mb-xxl-2">
   <!-- Column 1: Job Info, Concurrent Jobs, Admin Message if found-->
-  <Col xs={3}>
+  <Col xs={12} md={6} xl={3} class="mb-3 mb-xxl-0">
     {#if $initq.error}
       <Card body color="danger">{$initq.error.message}</Card>
     {:else if $initq.data}
@@ -272,7 +273,7 @@
 
   <!-- If enabled:  Column 2: Job Footprint, Polar Representation, Heuristic Summary -->
    {#if showFootprint}
-    <Col xs={3}>
+    <Col xs={12} md={6} xl={4} xxl={3} class="mb-3 mb-xxl-0">
       {#if $initq.error}
         <Card body color="danger">{$initq.error.message}</Card>
       {:else if $initq?.data && $jobMetrics?.data}
@@ -281,15 +282,10 @@
         <Spinner secondary />
       {/if}
     </Col>
-  {:else}
-    <Col xs={3}/>
   {/if}
 
-  <!-- Column 3: Spacer -->
-  <Col xs={2}/>
-
-  <!-- Column 4: Job Roofline -->
-  <Col xs={4}>
+  <!-- Column 3: Job Roofline; If footprint Enabled: full width, else half width -->
+  <Col xs={12} md={showFootprint ? 12 : 6} xl={5} xxl={6}>
     {#if $initq.error || $jobMetrics.error}
       <Card body color="danger">
         <p>Initq Error: {$initq.error?.message}</p>
@@ -297,20 +293,24 @@
       </Card>
     {:else if $initq?.data && $jobMetrics?.data}
       <Card style="height: 400px;">
-        <Roofline
-          renderTime={true}
-          subCluster={$initq.data.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 bind:clientWidth={roofWidth}>
+          <Roofline
+            allowSizeChange={true}
+            width={roofWidth}
+            renderTime={true}
+            subCluster={$initq.data.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>
       </Card>
     {:else}
         <Spinner secondary />
diff --git a/web/frontend/src/generic/helper/ConcurrentJobs.svelte b/web/frontend/src/generic/helper/ConcurrentJobs.svelte
index c0de0b6..85bac83 100644
--- a/web/frontend/src/generic/helper/ConcurrentJobs.svelte
+++ b/web/frontend/src/generic/helper/ConcurrentJobs.svelte
@@ -4,7 +4,7 @@
     Properties:
     - `cJobs JobLinkResultList`: List of concurrent Jobs
     - `showLinks Bool?`: Show list as clickable links [Default: false]
-    - `displayTitle Bool?`: If to display cardHeader with title [Default: true]
+    - `renderCard Bool?`: If to render component as content only or with card wrapping [Default: true]
     - `width String?`: Width of the card [Default: 'auto']
     - `height String?`: Height of the card [Default: '310px']
  -->
@@ -64,17 +64,15 @@
   </Card>
 {:else}
   <p>
-    Jobs running on the same node with overlapping runtimes using shared resources.
+    {cJobs.items.length} Jobs running on the same node with overlapping runtimes using shared resources. 
+    ( <a
+      href="/monitoring/jobs/?{cJobs.listQuery}"
+      target="_blank">See All</a
+    > )
   </p>
   <hr/>
   {#if showLinks}
     <ul>
-      <li>
-        <a
-          href="/monitoring/jobs/?{cJobs.listQuery}"
-          target="_blank">See All</a
-        >
-      </li>
       {#each cJobs.items as cJob}
         <li>
           <a href="/monitoring/job/{cJob.id}" target="_blank"
@@ -96,8 +94,8 @@
 
 <style>
   ul {
-    columns: 2;
-    -webkit-columns: 2;
-    -moz-columns: 2;
+    columns: 3;
+    -webkit-columns: 3;
+    -moz-columns: 3;
   }
 </style>
diff --git a/web/frontend/src/generic/plots/Roofline.svelte b/web/frontend/src/generic/plots/Roofline.svelte
index 47617c1..c9a0bbe 100644
--- a/web/frontend/src/generic/plots/Roofline.svelte
+++ b/web/frontend/src/generic/plots/Roofline.svelte
@@ -41,8 +41,6 @@
 
   const lineWidth = clusterCockpitConfig.plot_general_lineWidth;
 
-  
-
   // Helpers
   function getGradientR(x) {
     if (x < 0.5) return 0;