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,50 +330,55 @@
         </Col>
       {/if}
     </Row>
-    <hr/>
-    <Row>
-      <Col>
-        {#if $jobMetrics.error}
+    <hr class="mb-2"/>
+
+    {#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>
-        {:else if $jobMetrics.fetching}
+        </Col>
+      </Row>
+    {:else if $jobMetrics.fetching}
+      <Row class="mt-2">
+        <Col>
           <Spinner secondary />
-        {:else if $initq?.data && $jobMetrics?.data?.jobMetrics}
-          <PlotTable
-            let:item
-            let:width
-            renderFor="job"
-            items={orderAndMap(
-              groupByScope($jobMetrics.data.jobMetrics),
-              selectedMetrics,
-            )}
-            itemsPerRow={ccconfig.plot_view_plotsPerRow}
+        </Col>
+      </Row>
+    {:else if $initq?.data && $jobMetrics?.data?.jobMetrics}
+      <PlotGrid
+        let:item
+        let:width
+        renderFor="job"
+        items={orderAndMap(
+          groupByScope($jobMetrics.data.jobMetrics),
+          selectedMetrics,
+        )}
+        itemsPerRow={ccconfig.plot_view_plotsPerRow}
+      >
+        {#if item.data}
+          <Metric
+            bind:this={plots[item.metric]}
+            on:more-loaded={({ detail }) => statsTable.moreLoaded(detail)}
+            job={$initq.data.job}
+            metricName={item.metric}
+            metricUnit={$initq.data.globalMetrics.find((gm) => gm.name == item.metric)?.unit}
+            nativeScope={$initq.data.globalMetrics.find((gm) => gm.name == item.metric)?.scope}
+            rawData={item.data.map((x) => x.metric)}
+            scopes={item.data.map((x) => x.scope)}
+            {width}
+            isShared={$initq.data.job.exclusive != 1}
+          />
+        {:else}
+          <Card body color="warning" class="mt-2"
+            >No dataset returned for <code>{item.metric}</code></Card
           >
-            {#if item.data}
-              <Metric
-                bind:this={plots[item.metric]}
-                on:more-loaded={({ detail }) => statsTable.moreLoaded(detail)}
-                job={$initq.data.job}
-                metricName={item.metric}
-                metricUnit={$initq.data.globalMetrics.find((gm) => gm.name == item.metric)?.unit}
-                nativeScope={$initq.data.globalMetrics.find((gm) => gm.name == item.metric)?.scope}
-                rawData={item.data.map((x) => x.metric)}
-                scopes={item.data.map((x) => x.scope)}
-                {width}
-                isShared={$initq.data.job.exclusive != 1}
-              />
-            {:else}
-              <Card body color="warning"
-                >No dataset returned for <code>{item.metric}</code></Card
-              >
-            {/if}
-          </PlotTable>
         {/if}
-      </Col>
-    </Row>
+      </PlotGrid>
+    {/if}
   </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,31 +651,27 @@
   </Row>
   <hr class="my-2" />
   {#if metricsInHistograms}
-    <Row cols={1}>
-      <Col>
-        {#key $mainQuery.data.stats[0].histMetrics}
-          <PlotTable
-            let:item
-            let:width
-            renderFor="user"
-            items={$mainQuery.data.stats[0].histMetrics}
-            itemsPerRow={2}
-          >
-            <Histogram
-              data={convert2uplot(item.data)}
-              usesBins={true}
-              {width}
-              height={250}
-              title="Distribution of '{item.metric}' averages"
-              xlabel={`${item.metric} bin maximum ${item?.unit ? `[${item.unit}]` : ``}`}
-              xunit={item.unit}
-              ylabel="Number of Jobs"
-              yunit="Jobs"
-            />
-          </PlotTable>
-        {/key}
-      </Col>
-    </Row>
+    {#key $mainQuery.data.stats[0].histMetrics}
+      <PlotGrid
+        let:item
+        let:width
+        renderFor="user"
+        items={$mainQuery.data.stats[0].histMetrics}
+        itemsPerRow={2}
+      >
+        <Histogram
+          data={convert2uplot(item.data)}
+          usesBins={true}
+          {width}
+          height={250}
+          title="Distribution of '{item.metric}' averages"
+          xlabel={`${item.metric} bin maximum ${item?.unit ? `[${item.unit}]` : ``}`}
+          xunit={item.unit}
+          ylabel="Number of Jobs"
+          yunit="Jobs"
+        />
+      </PlotGrid>
+    {/key}
   {/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,73 +160,77 @@
   {/if}
 </Row>
 <br />
-<Row>
-  <Col>
-    {#if $nodesQuery.error}
+{#if $nodesQuery.error}
+  <Row>
+    <Col>
       <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}
-      <PlotTable
-        let:item
-        let:width
-        renderFor="systems"
-        itemsPerRow={ccconfig.plot_view_plotsPerRow}
-        items={$nodesQuery.data.nodeMetrics
-          .filter(
-            (h) =>
-              h.host.includes(hostnameFilter) &&
-              h.metrics.some(
-                (m) => m.name == selectedMetric && m.scope == "node",
-              ),
-          )
-          .map((h) => ({
-            host: h.host,
-            subCluster: h.subCluster,
-            data: h.metrics.find(
-              (m) => m.name == selectedMetric && m.scope == "node",
-            ),
-            disabled: checkMetricDisabled(
-              selectedMetric,
-              cluster,
-              h.subCluster,
-            ),
-          }))
-          .sort((a, b) => a.host.localeCompare(b.host))}
+    </Col>
+  </Row>
+{:else}
+  <PlotGrid
+    let:item
+    let:width
+    renderFor="systems"
+    itemsPerRow={ccconfig.plot_view_plotsPerRow}
+    items={$nodesQuery.data.nodeMetrics
+      .filter(
+        (h) =>
+          h.host.includes(hostnameFilter) &&
+          h.metrics.some(
+            (m) => m.name == selectedMetric && m.scope == "node",
+          ),
+      )
+      .map((h) => ({
+        host: h.host,
+        subCluster: h.subCluster,
+        data: h.metrics.find(
+          (m) => m.name == selectedMetric && m.scope == "node",
+        ),
+        disabled: checkMetricDisabled(
+          selectedMetric,
+          cluster,
+          h.subCluster,
+        ),
+      }))
+      .sort((a, b) => a.host.localeCompare(b.host))}
+  >
+    <h4 style="width: 100%; text-align: center;">
+      <a
+        style="display: block;padding-top: 15px;"
+        href="/monitoring/node/{cluster}/{item.host}"
+        >{item.host} ({item.subCluster})</a
+      >
+    </h4>
+    {#if item.disabled === false && item.data}
+      <MetricPlot
+        {width}
+        height={plotHeight}
+        timestep={item.data.metric.timestep}
+        series={item.data.metric.series}
+        metric={item.data.name}
+        cluster={clusters.find((c) => c.name == cluster)}
+        subCluster={item.subCluster}
+        forNode={true}
+      />
+    {:else if item.disabled === true && item.data}
+      <Card style="margin-left: 2rem;margin-right: 2rem;" body color="info"
+        >Metric disabled for subcluster <code
+          >{selectedMetric}:{item.subCluster}</code
+        ></Card
+      >
+    {:else}
+      <Card
+        style="margin-left: 2rem;margin-right: 2rem;"
+        body
+        color="warning"
+        >No dataset returned for <code>{selectedMetric}</code></Card
       >
-        <h4 style="width: 100%; text-align: center;">
-          <a
-            style="display: block;padding-top: 15px;"
-            href="/monitoring/node/{cluster}/{item.host}"
-            >{item.host} ({item.subCluster})</a
-          >
-        </h4>
-        {#if item.disabled === false && item.data}
-          <MetricPlot
-            {width}
-            height={plotHeight}
-            timestep={item.data.metric.timestep}
-            series={item.data.metric.series}
-            metric={item.data.name}
-            cluster={clusters.find((c) => c.name == cluster)}
-            subCluster={item.subCluster}
-            forNode={true}
-          />
-        {:else if item.disabled === true && item.data}
-          <Card style="margin-left: 2rem;margin-right: 2rem;" body color="info"
-            >Metric disabled for subcluster <code
-              >{selectedMetric}:{item.subCluster}</code
-            ></Card
-          >
-        {:else}
-          <Card
-            style="margin-left: 2rem;margin-right: 2rem;"
-            body
-            color="warning"
-            >No dataset returned for <code>{selectedMetric}</code></Card
-          >
-        {/if}
-      </PlotTable>
     {/if}
-  </Col>
-</Row>
+  </PlotGrid>
+{/if}

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,72 +210,77 @@
         </tbody>
       </Table>
     </Col>
-    <div class="col-4 text-center" bind:clientWidth={w1}>
-      {#key $stats.data.jobsStatistics[0].histDuration}
-        <Histogram
-          data={convert2uplot($stats.data.jobsStatistics[0].histDuration)}
-          width={w1 - 25}
-          height={histogramHeight}
-          title="Duration Distribution"
-          xlabel="Current Runtimes"
-          xunit="Hours"
-          ylabel="Number of Jobs"
-          yunit="Jobs"
-        />
-      {/key}
-    </div>
-    <div class="col-4 text-center" bind:clientWidth={w2}>
-      {#key $stats.data.jobsStatistics[0].histNumNodes}
-        <Histogram
-          data={convert2uplot($stats.data.jobsStatistics[0].histNumNodes)}
-          width={w2 - 25}
-          height={histogramHeight}
-          title="Number of Nodes Distribution"
-          xlabel="Allocated Nodes"
-          xunit="Nodes"
-          ylabel="Number of Jobs"
-          yunit="Jobs"
-        />
-      {/key}
-    </div>
+    <Col class="text-center">
+      <div bind:clientWidth={w1}>
+        {#key $stats.data.jobsStatistics[0].histDuration}
+          <Histogram
+            data={convert2uplot($stats.data.jobsStatistics[0].histDuration)}
+            width={w1 - 25}
+            height={histogramHeight}
+            title="Duration Distribution"
+            xlabel="Current Runtimes"
+            xunit="Hours"
+            ylabel="Number of Jobs"
+            yunit="Jobs"
+          />
+        {/key}
+      </div>
+    </Col>
+    <Col class="text-center">
+      <div bind:clientWidth={w2}>
+        {#key $stats.data.jobsStatistics[0].histNumNodes}
+          <Histogram
+            data={convert2uplot($stats.data.jobsStatistics[0].histNumNodes)}
+            width={w2 - 25}
+            height={histogramHeight}
+            title="Number of Nodes Distribution"
+            xlabel="Allocated Nodes"
+            xunit="Nodes"
+            ylabel="Number of Jobs"
+            yunit="Jobs"
+          />
+        {/key}
+      </div>
+    </Col>
   {/if}
 </Row>
+
 {#if metricsInHistograms}
-  <Row>
-    {#if $stats.error}
+  {#if $stats.error}
+    <Row>
       <Col>
         <Card body color="danger">{$stats.error.message}</Card>
       </Col>
-    {:else if !$stats.data}
+    </Row>
+  {:else if !$stats.data}
+    <Row>
       <Col>
         <Spinner secondary />
       </Col>
-    {:else}
-      <Col>
-        {#key $stats.data.jobsStatistics[0].histMetrics}
-          <PlotTable
-            let:item
-            let:width
-            renderFor="user"
-            items={$stats.data.jobsStatistics[0].histMetrics}
-            itemsPerRow={3}
-          >
-            <Histogram
-              data={convert2uplot(item.data)}
-              usesBins={true}
-              {width}
-              height={250}
-              title="Distribution of '{item.metric} ({item.stat})' footprints"
-              xlabel={`${item.metric} bin maximum ${item?.unit ? `[${item.unit}]` : ``}`}
-              xunit={item.unit}
-              ylabel="Number of Jobs"
-              yunit="Jobs"
-            />
-          </PlotTable>
-        {/key}
-      </Col>
-    {/if}
-  </Row>
+    </Row>
+  {:else}
+    {#key $stats.data.jobsStatistics[0].histMetrics}
+      <PlotGrid
+        let:item
+        let:width
+        renderFor="user"
+        items={$stats.data.jobsStatistics[0].histMetrics}
+        itemsPerRow={3}
+      >
+        <Histogram
+          data={convert2uplot(item.data)}
+          usesBins={true}
+          {width}
+          height={250}
+          title="Distribution of '{item.metric} ({item.stat})' footprints"
+          xlabel={`${item.metric} bin maximum ${item?.unit ? `[${item.unit}]` : ``}`}
+          xunit={item.unit}
+          ylabel="Number of Jobs"
+          yunit="Jobs"
+        />
+      </PlotGrid>
+    {/key}
+  {/if}
 {/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 maxY = Y.reduce((maxY, y) => Math.max(maxY, y), minY);
+        let maxX = X ? X.reduce((maxX, x) => Math.max(maxX, x), minX) : 1.0;
+        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,24 +68,26 @@
 
         // 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;
-        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))
-                continue;
+        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))
+                    continue;
 
-            const s = S ? S[i] * size : size;
-            const px = getCanvasX(x);
-            const py = getCanvasY(y);
+                const s = S ? S[i] * size : size;
+                const px = getCanvasX(x);
+                const py = getCanvasY(y);
 
-            ctx.beginPath();
-            ctx.arc(px, py, s, 0, Math.PI * 2, false);
-            ctx.fill();
+                ctx.beginPath();
+                ctx.arc(px, py, s, 0, Math.PI * 2, false);
+                ctx.fill();
+            }
         }
 
         // Axes

web/frontend/src/generic/utils.js

@@ -397,16 +397,18 @@ function getMetricConfigDeep(metric, cluster, subCluster) {
 export function convert2uplot(canvasData) {
     // Prep: Uplot Data Structure
     let uplotData = [[],[]] // [X, Y1, Y2, ...]
-    // Iterate
-    canvasData.forEach( cd => {
-        if (Object.keys(cd).length == 4) { // MetricHisto Datafromat
-            uplotData[0].push(cd?.max ? cd.max : 0)
-            uplotData[1].push(cd.count)
-        } else { // Default
-            uplotData[0].push(cd.value)
-            uplotData[1].push(cd.count)
-        }
-    })
+    // Iterate if exists
+    if (canvasData) {
+        canvasData.forEach( cd => {
+            if (Object.keys(cd).length == 4) { // MetricHisto Datafromat
+                uplotData[0].push(cd?.max ? cd.max : 0)
+                uplotData[1].push(cd.count)
+            } else { // Default
+                uplotData[0].push(cd.value)
+                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>