replace plotTable with new bootstrap plotGrid component

- helps with narrow window sizes
- plotTable kept for now

web/frontend/src/Analysis.root.svelte

@@ -28,7 +28,7 @@
   } from "./generic/utils.js";
   import PlotSelection from "./analysis/PlotSelection.svelte";
   import Filters from "./generic/Filters.svelte";
-  import PlotTable from "./generic/PlotTable.svelte";
+  import PlotGrid from "./generic/PlotGrid.svelte";
   import Histogram from "./generic/plots/Histogram.svelte";
   import Pie, { colors } from "./generic/plots/Pie.svelte";
   import ScatterPlot from "./generic/plots/Scatter.svelte";
@@ -70,6 +70,8 @@
     ...new Set([...metricsInHistograms, ...metricsInScatterplots.flat()]),
   ];
 
+  $: console.log(">>> CLUSTER", cluster)
+
   const sortOptions = [
     { key: "totalWalltime", label: "Walltime" },
     { key: "totalNodeHours", label: "Node Hours" },
@@ -523,7 +525,7 @@
   </Row>
   <Row>
     <Col>
-      <PlotTable
+      <PlotGrid
         let:item
         let:width
         renderFor="analysis"
@@ -551,7 +553,7 @@
           ylabel="Normalized Hours"
           yunit="Hours"
         />
-      </PlotTable>
+      </PlotGrid>
     </Col>
   </Row>
   <br />
@@ -569,7 +571,7 @@
   </Row>
   <Row>
     <Col>
-      <PlotTable
+      <PlotGrid
         let:item
         let:width
         renderFor="analysis"
@@ -595,7 +597,7 @@
           Y={item.f2}
           S={$footprintsQuery.data.footprints.timeWeights.nodeHours}
         />
-      </PlotTable>
+      </PlotGrid>
     </Col>
   </Row>
 {/if}

web/frontend/src/Job.root.svelte

@@ -38,7 +38,7 @@
   import JobSummary from "./job/JobSummary.svelte";
   import EnergySummary from "./job/EnergySummary.svelte";
   import ConcurrentJobs from "./generic/helper/ConcurrentJobs.svelte";
-  import PlotTable from "./generic/PlotTable.svelte";
+  import PlotGrid from "./generic/PlotGrid.svelte";
   import Roofline from "./generic/plots/Roofline.svelte";
   import JobInfo from "./generic/joblist/JobInfo.svelte";
   import MetricSelection from "./generic/select/MetricSelection.svelte";
@@ -330,19 +330,26 @@
         </Col>
       {/if}
     </Row>
-    <hr/>
+    <hr class="mb-2"/>
-    <Row>
+
-      <Col>
     {#if $jobMetrics.error}
+      <Row class="mt-2">
+        <Col>
           {#if $initq.data.job.monitoringStatus == 0 || $initq.data.job.monitoringStatus == 2}
             <Card body color="warning">Not monitored or archiving failed</Card>
             <br />
           {/if}
           <Card body color="danger">{$jobMetrics.error.message}</Card>
+        </Col>
+      </Row>
     {:else if $jobMetrics.fetching}
+      <Row class="mt-2">
+        <Col>
           <Spinner secondary />
+        </Col>
+      </Row>
     {:else if $initq?.data && $jobMetrics?.data?.jobMetrics}
-          <PlotTable
+      <PlotGrid
         let:item
         let:width
         renderFor="job"
@@ -366,14 +373,12 @@
             isShared={$initq.data.job.exclusive != 1}
           />
         {:else}
-              <Card body color="warning"
+          <Card body color="warning" class="mt-2"
             >No dataset returned for <code>{item.metric}</code></Card
           >
         {/if}
-          </PlotTable>
+      </PlotGrid>
     {/if}
-      </Col>
-    </Row>
   </CardBody>
 </Card>
 

web/frontend/src/Node.root.svelte

@@ -29,7 +29,7 @@
     init,
     checkMetricDisabled,
   } from "./generic/utils.js";
-  import PlotTable from "./generic/PlotTable.svelte";
+  import PlotGrid from "./generic/PlotGrid.svelte";
   import MetricPlot from "./generic/plots/MetricPlot.svelte";
   import TimeSelection from "./generic/select/TimeSelection.svelte";
   import Refresher from "./generic/helper/Refresher.svelte";
@@ -187,7 +187,7 @@
     {:else if $nodeMetricsData.fetching || $initq.fetching}
       <Spinner />
     {:else}
-      <PlotTable
+      <PlotGrid
         let:item
         let:width
         renderFor="node"
@@ -233,7 +233,7 @@
             >No dataset returned for <code>{item.name}</code></Card
           >
         {/if}
-      </PlotTable>
+      </PlotGrid>
     {/if}
   </Col>
 </Row>

web/frontend/src/Status.root.svelte

@@ -32,7 +32,7 @@
     transformPerNodeDataForRoofline,
   } from "./generic/utils.js";
   import { scaleNumbers } from "./generic/units.js";
-  import PlotTable from "./generic/PlotTable.svelte";
+  import PlotGrid from "./generic/PlotGrid.svelte";
   import Roofline from "./generic/plots/Roofline.svelte";
   import Pie, { colors } from "./generic/plots/Pie.svelte";
   import Histogram from "./generic/plots/Histogram.svelte";
@@ -651,10 +651,8 @@
   </Row>
   <hr class="my-2" />
   {#if metricsInHistograms}
-    <Row cols={1}>
-      <Col>
     {#key $mainQuery.data.stats[0].histMetrics}
-          <PlotTable
+      <PlotGrid
         let:item
         let:width
         renderFor="user"
@@ -672,10 +670,8 @@
           ylabel="Number of Jobs"
           yunit="Jobs"
         />
-          </PlotTable>
+      </PlotGrid>
     {/key}
-      </Col>
-    </Row>
   {/if}
 {/if}
 

web/frontend/src/Systems.root.svelte

@@ -28,7 +28,7 @@
     init,
     checkMetricDisabled,
   } from "./generic/utils.js";
-  import PlotTable from "./generic/PlotTable.svelte";
+  import PlotGrid from "./generic/PlotGrid.svelte";
   import MetricPlot from "./generic/plots/MetricPlot.svelte";
   import TimeSelection from "./generic/select/TimeSelection.svelte";
   import Refresher from "./generic/helper/Refresher.svelte";
@@ -160,14 +160,20 @@
   {/if}
 </Row>
 <br />
-<Row>
+{#if $nodesQuery.error}
+  <Row>
     <Col>
-    {#if $nodesQuery.error}
       <Card body color="danger">{$nodesQuery.error.message}</Card>
-    {:else if $nodesQuery.fetching || $initq.fetching}
+    </Col>
+  </Row>
+{:else if $nodesQuery.fetching || $initq.fetching}
+  <Row>
+    <Col>
       <Spinner />
-    {:else}
+    </Col>
-      <PlotTable
+  </Row>
+{:else}
+  <PlotGrid
     let:item
     let:width
     renderFor="systems"
@@ -226,7 +232,5 @@
         >No dataset returned for <code>{selectedMetric}</code></Card
       >
     {/if}
-      </PlotTable>
+  </PlotGrid>
-    {/if}
+{/if}
-  </Col>
-</Row>

web/frontend/src/User.root.svelte

@@ -30,7 +30,7 @@
   } from "./generic/utils.js";
   import JobList from "./generic/JobList.svelte";
   import Filters from "./generic/Filters.svelte";
-  import PlotTable from "./generic/PlotTable.svelte";
+  import PlotGrid from "./generic/PlotGrid.svelte";
   import Histogram from "./generic/plots/Histogram.svelte";
   import MetricSelection from "./generic/select/MetricSelection.svelte";
   import HistogramSelection from "./generic/select/HistogramSelection.svelte";
@@ -162,7 +162,7 @@
   </Col>
 </Row>
 <br />
-<Row>
+<Row cols={{ xs: 1, md: 3}}>
   {#if $stats.error}
     <Col>
       <Card body color="danger">{$stats.error.message}</Card>
@@ -172,7 +172,7 @@
       <Spinner secondary />
     </Col>
   {:else}
-    <Col xs="4">
+    <Col>
       <Table>
         <tbody>
           <tr>
@@ -210,7 +210,8 @@
         </tbody>
       </Table>
     </Col>
-    <div class="col-4 text-center" bind:clientWidth={w1}>
+    <Col class="text-center">
+      <div bind:clientWidth={w1}>
         {#key $stats.data.jobsStatistics[0].histDuration}
           <Histogram
             data={convert2uplot($stats.data.jobsStatistics[0].histDuration)}
@@ -224,7 +225,9 @@
           />
         {/key}
       </div>
-    <div class="col-4 text-center" bind:clientWidth={w2}>
+    </Col>
+    <Col class="text-center">
+      <div bind:clientWidth={w2}>
         {#key $stats.data.jobsStatistics[0].histNumNodes}
           <Histogram
             data={convert2uplot($stats.data.jobsStatistics[0].histNumNodes)}
@@ -238,22 +241,26 @@
           />
         {/key}
       </div>
+    </Col>
   {/if}
 </Row>
+
 {#if metricsInHistograms}
-  <Row>
   {#if $stats.error}
+    <Row>
       <Col>
         <Card body color="danger">{$stats.error.message}</Card>
       </Col>
+    </Row>
   {:else if !$stats.data}
+    <Row>
       <Col>
         <Spinner secondary />
       </Col>
+    </Row>
   {:else}
-      <Col>
     {#key $stats.data.jobsStatistics[0].histMetrics}
-          <PlotTable
+      <PlotGrid
         let:item
         let:width
         renderFor="user"
@@ -271,11 +278,9 @@
           ylabel="Number of Jobs"
           yunit="Jobs"
         />
-          </PlotTable>
+      </PlotGrid>
     {/key}
-      </Col>
   {/if}
-  </Row>
 {/if}
 <br />
 <Row>

web/frontend/src/analysis.entrypoint.js

@@ -6,7 +6,8 @@ filterPresets.cluster = cluster
 new Analysis({
     target: document.getElementById('svelte-app'),
     props: {
-        filterPresets: filterPresets
+        filterPresets: filterPresets,
+        cluster: cluster
     },
     context: new Map([
             ['cc-config', clusterCockpitConfig]

web/frontend/src/generic/PlotGrid.svelte

@@ -0,0 +1,60 @@
+<!-- 
+    @component Organized display of plots as bootstrap (sveltestrap) grid
+
+    Properties:
+    - `itemsPerRow Number`: Elements to render per row
+    - `items [Any]`: List of plot components to render
+    - `renderFor String`:   If 'job', filter disabled metrics
+ -->
+
+ <script>
+    import {
+        Row,
+        Col,
+    } from "@sveltestrap/sveltestrap";
+
+    export let itemsPerRow
+    export let items
+    export let renderFor
+
+    let rows = []
+    let colWidth;
+    const isPlaceholder = x => x._is_placeholder === true
+
+    function tile(items, itemsPerRow) {
+        const rows = []
+        for (let ri = 0; ri < items.length; ri += itemsPerRow) {
+            const row = []
+            for (let ci = 0; ci < itemsPerRow; ci += 1) {
+                if (ri + ci < items.length)
+                    row.push(items[ri + ci])
+                else
+                    row.push({ _is_placeholder: true, ri, ci })
+            }
+            rows.push(row)
+        }
+        return rows
+    }
+
+    $: if (renderFor === 'job') {
+        rows = tile(items.filter(item => item.disabled === false), itemsPerRow)
+    } else {
+        rows = tile(items, itemsPerRow)
+    }
+
+</script>
+
+{#each rows as row}
+  <Row cols={{ xs: 1, sm: 1, md: 2, lg: itemsPerRow}}>
+    {#each row as item (item)}
+      <Col class="px-1">
+        <div bind:clientWidth={colWidth}>
+          {#if !isPlaceholder(item)}
+            <slot item={item} width={colWidth}/>
+          {/if}
+        </div>
+      </Col>
+    {/each}
+  </Row>
+{/each}
+

web/frontend/src/generic/plots/MetricPlot.svelte

@@ -549,6 +549,10 @@
 
   onMount(() => {
     if (series[0].data.length > 0) {
+      if (forNode) {
+        plotWrapper.style.paddingTop = "0.5rem"
+        plotWrapper.style.paddingBottom = "0.5rem"
+      }
       plotWrapper.style.backgroundColor = backgroundColor();
       render();
     }
@@ -562,7 +566,7 @@
 </script>
 
 {#if series[0].data.length > 0}
-  <div bind:this={plotWrapper} class="cc-plot"></div>
+  <div bind:this={plotWrapper} class="cc-plot"/>
 {:else}
   <Card class="mx-4" body color="warning"
     >Cannot render plot: No series data returned for <code>{metric}</code></Card

web/frontend/src/generic/plots/Scatter.svelte

@@ -46,8 +46,8 @@
             return;
 
         const [minX, minY] = [0., 0.];
-        let maxX = X.reduce((maxX, x) => Math.max(maxX, x), minX);
+        let maxX = X ? X.reduce((maxX, x) => Math.max(maxX, x), minX) : 1.0;
-        let maxY = Y.reduce((maxY, y) => Math.max(maxY, y), minY);
+        let maxY = Y ? Y.reduce((maxY, y) => Math.max(maxY, y), minY) : 1.0;
         const w = width - paddingLeft - paddingRight;
         const h = height - paddingTop - paddingBottom;
 
@@ -68,12 +68,13 @@
 
         // Draw Data
         let size = 3
-        if (S) {
+        if (S && X && Y) {
             let max = S.reduce((max, s, i) => (X[i] == null || Y[i] == null || Number.isNaN(X[i]) || Number.isNaN(Y[i])) ? max : Math.max(max, s), 0)
             size = (w / 15) / max
         }
 
         ctx.fillStyle = color;
+        if (X?.length > 0) {
             for (let i = 0; i < X.length; i++) {
                 let x = X[i], y = Y[i];
                 if (x == null || y == null || Number.isNaN(x) || Number.isNaN(y))
@@ -87,6 +88,7 @@
                 ctx.arc(px, py, s, 0, Math.PI * 2, false);
                 ctx.fill();
             }
+        }
 
         // Axes
         ctx.fillStyle = '#000000'

web/frontend/src/generic/utils.js

@@ -397,7 +397,8 @@ function getMetricConfigDeep(metric, cluster, subCluster) {
 export function convert2uplot(canvasData) {
     // Prep: Uplot Data Structure
     let uplotData = [[],[]] // [X, Y1, Y2, ...]
-    // Iterate
+    // Iterate if exists
+    if (canvasData) {
         canvasData.forEach( cd => {
             if (Object.keys(cd).length == 4) { // MetricHisto Datafromat
                 uplotData[0].push(cd?.max ? cd.max : 0)
@@ -407,6 +408,7 @@ export function convert2uplot(canvasData) {
                 uplotData[1].push(cd.count)
             }
         })
+    }
     return uplotData
 }
 

web/frontend/src/job/Metric.svelte

@@ -171,7 +171,7 @@
   );
 </script>
 
-<InputGroup>
+<InputGroup class="mt-2">
   <InputGroupText style="min-width: 150px;">
     {metricName} ({unit})
   </InputGroupText>