fix disabled-false-positives, add info if no metrics selected

web/frontend/src/generic/JobList.svelte

@@ -32,7 +32,7 @@
   let {
     matchedListJobs = $bindable(0),
     selectedJobs = $bindable([]),
-    metrics = getContext("cc-config").metricConfig_jobListMetrics,
+    metrics = [],
     sorting = { field: "startTime", type: "col", order: "DESC" },
     showFootprint = false,
     filterBuffer = [],
@@ -109,7 +109,7 @@
   let paging = $derived({ itemsPerPage, page });
   const plotWidth = $derived.by(() => {
     return Math.floor(
-      (tableWidth - jobInfoColumnWidth) / (metrics.length + (showFootprint ? 1 : 0)) - 10,
+      (tableWidth - jobInfoColumnWidth) / (metrics.length + (showFootprint ? 2 : 1)) - 10,
     );
   });
   let jobsStore = $derived(queryStore({

web/frontend/src/generic/helper/JobFootprint.svelte

@@ -133,7 +133,7 @@
   }
 </script>
 
-<Card class="mt-1 overflow-auto" style="width: {width}; height: {height}">
+<Card class="mx-2 overflow-auto" style="width: {width}; height: {height}">
   {#if displayTitle}
     <CardHeader>
       <CardTitle class="mb-0 d-flex justify-content-center">

web/frontend/src/generic/joblist/JobListRow.svelte

@@ -79,6 +79,7 @@
 
   /* Derived */
   const jobId = $derived(job?.id);
+  const refinedData = $derived($metricsQuery?.data?.jobMetrics ? sortAndSelectScope($metricsQuery.data.jobMetrics) : []);
   const scopes = $derived.by(() => {
     if (job.numNodes == 1) {
       if (job.numAcc >= 1) return ["core", "accelerator"];
@@ -202,10 +203,15 @@
         />
       </td>
     {/if}
-    {#each sortAndSelectScope($metricsQuery.data.jobMetrics) as metric, i (metric?.name || i)}
+    {#each refinedData as metric, i (metric?.name || i)}
       <td>
-        <!-- Subluster Metricconfig remove keyword for jobtables (joblist main, user joblist, project joblist) to be used here as toplevel case-->
+        {#key metric}
-        {#if metric.disabled == false && metric.data}
+          {#if metric?.data}
+            {#if metric?.disabled}
+              <Card body class="mx-2" color="info">
+                Metric <b>{metric.data.name}</b>: Disabled for subcluster <code>{job.subCluster}</code>
+              </Card>
+            {:else}
               <MetricPlot
                 onZoom={(detail) => handleZoom(detail, metric.data.name)}
                 height={plotHeight}
@@ -222,12 +228,7 @@
                 zoomState={zoomStates[metric.data.name] || null}
                 thresholdState={thresholdStates[metric.data.name] || null}
               />
-        {:else if metric.disabled == true && metric.data}
+            {/if}
-          <Card body color="info"
-            >Metric disabled for subcluster <code
-              >{metric.data.name}:{job.subCluster}</code
-            ></Card
-          >
           {:else}
             <Card body class="mx-2" color="warning">
               <p>No dataset(s) returned for <b>{metrics[i]}</b></p>
@@ -236,6 +237,11 @@
               <p class="mb-1">Identical messages in <i>job {job.jobId} row</i>: Host not found.</p>
             </Card>
           {/if}
+        {/key}
+      </td>
+    {:else}
+      <td>
+        <Card body class="mx-2">No metrics selected for display.</Card>
       </td>
     {/each}
   {/if}

web/frontend/src/systems/nodelist/NodeListRow.svelte

@@ -69,9 +69,9 @@
     })
   );
 
-  let extendedLegendData = $derived($nodeJobsData?.data ? buildExtendedLegend() : null);
+  const extendedLegendData = $derived($nodeJobsData?.data ? buildExtendedLegend() : null);
-  let refinedData = $derived(nodeData?.metrics ? sortAndSelectScope(nodeData.metrics) : null);
+  const refinedData = $derived(nodeData?.metrics ? sortAndSelectScope(nodeData.metrics) : []);
-  let dataHealth = $derived(refinedData.filter((rd) => rd.disabled === false).map((enabled) => (enabled?.data?.metric?.series?.length > 0)));
+  const dataHealth = $derived(refinedData.filter((rd) => rd.disabled === false).map((enabled) => (enabled?.data?.metric?.series?.length > 0)));
 
   /* Functions */
   const selectScope = (nodeMetrics) =>