From f8f900151af502b73ad5454f12160a9fc13936cc Mon Sep 17 00:00:00 2001
From: Christoph Kluge <christoph.kluge@fau.de>
Date: Mon, 20 Nov 2023 18:08:33 +0100
Subject: [PATCH] Fix width, spacing, render

---
 web/frontend/src/JobFootprintBars.svelte |  5 ++---
 web/frontend/src/joblist/JobList.svelte  | 17 ++++++++++++-----
 web/frontend/src/joblist/Row.svelte      | 14 +++++++++-----
 3 files changed, 23 insertions(+), 13 deletions(-)

diff --git a/web/frontend/src/JobFootprintBars.svelte b/web/frontend/src/JobFootprintBars.svelte
index d5ba081..36818ef 100644
--- a/web/frontend/src/JobFootprintBars.svelte
+++ b/web/frontend/src/JobFootprintBars.svelte
@@ -18,8 +18,7 @@
     export let job
     export let jobMetrics
     export let view = 'job'
-
-    // export let size = 200
+    export let width = 200
 
     const footprintMetrics = ['cpu_load', 'flops_any', 'mem_used', 'mem_bw'] // 'acc_utilization' / missing: energy , move to central config before deployment
 
@@ -154,7 +153,7 @@
 
 </script>
 
-<Card class="h-auto mt-1">
+<Card class="h-auto mt-1" style="min-width: {width}px;">
     {#if view === 'job'}
     <CardHeader>
         <CardTitle class="mb-0 d-flex justify-content-center">
diff --git a/web/frontend/src/joblist/JobList.svelte b/web/frontend/src/joblist/JobList.svelte
index e6acaf8..698b9ca 100644
--- a/web/frontend/src/joblist/JobList.svelte
+++ b/web/frontend/src/joblist/JobList.svelte
@@ -28,7 +28,7 @@
     export let sorting = { field: "startTime", order: "DESC" };
     export let matchedJobs = 0;
     export let metrics = ccconfig.plot_list_selectedMetrics;
-    export let showFootprint;
+    export let showFootprint = false;
 
     let itemsPerPage = ccconfig.plot_list_jobsPerPage;
     let page = 1;
@@ -135,12 +135,19 @@
         })
     };
 
+    let plotWidth = null;
     let tableWidth = null;
     let jobInfoColumnWidth = 250;
 
-    $: plotWidth = Math.floor(
-        (tableWidth - jobInfoColumnWidth) / metrics.length - 10
-    );
+    $: if (showFootprint) {
+        plotWidth = Math.floor(
+            (tableWidth - jobInfoColumnWidth) / (metrics.length + 1) - 10
+        )
+    } else { 
+        plotWidth = Math.floor(
+            (tableWidth - jobInfoColumnWidth) / metrics.length - 10
+        )
+    }
 
     let headerPaddingTop = 0;
     stickyHeader(
@@ -165,7 +172,7 @@
                         <th
                             class="position-sticky top-0"
                             scope="col"
-                            style="width: {jobInfoColumnWidth}px; padding-top: {headerPaddingTop}px"
+                            style="width: {plotWidth}px; padding-top: {headerPaddingTop}px"
                         >
                             Job Footprint
                         </th>
diff --git a/web/frontend/src/joblist/Row.svelte b/web/frontend/src/joblist/Row.svelte
index bae86d8..61d8cb6 100644
--- a/web/frontend/src/joblist/Row.svelte
+++ b/web/frontend/src/joblist/Row.svelte
@@ -35,8 +35,8 @@
     const metricConfig = getContext("metrics"); // Get all MetricConfs which include subCluster-specific settings for this job
     const client = getContextClient();
     const query = gql`
-        query ($id: ID!, $metrics: [String!]!, $scopes: [MetricScope!]!) {
-            jobMetrics(id: $id, metrics: $metrics, scopes: $scopes) {
+        query ($id: ID!, $queryMetrics: [String!]!, $scopes: [MetricScope!]!) {
+            jobMetrics(id: $id, metrics: $queryMetrics, scopes: $scopes) {
                 name
                 scope
                 metric {
@@ -68,18 +68,21 @@
     $: metricsQuery = queryStore({
         client: client,
         query: query,
-        variables: { id, metrics, scopes }
+        variables: { id, queryMetrics, scopes }
     });
 
+    let queryMetrics = null
     $: if (showFootprint) {
-        metrics = ['cpu_load', 'flops_any', 'mem_used', 'mem_bw', ...metrics].filter(distinct)
+        queryMetrics = ['cpu_load', 'flops_any', 'mem_used', 'mem_bw', ...metrics].filter(distinct)
+    } else {
+        queryMetrics = [...metrics]
     }
 
     export function refresh() {
         metricsQuery = queryStore({
             client: client,
             query: query,
-            variables: { id, metrics, scopes },
+            variables: { id, queryMetrics, scopes },
             // requestPolicy: 'network-only' // use default cache-first for refresh
         });
     }
@@ -144,6 +147,7 @@
                 <JobFootprintBars
                     job={job}
                     jobMetrics={$metricsQuery.data.jobMetrics}
+                    width={plotWidth}
                     view="list"
                 />
             </td>