replace plotTable with new bootstrap plotGrid component

- helps with narrow window sizes - plotTable kept for now
2024-12-25 21:09:05 +01:00 · 2024-10-02 17:48:46 +02:00 · 2024-10-02 17:48:46 +02:00 · 7243dbe763
commit 7243dbe763
parent 0ff5c4bedd
12 changed files with 305 additions and 224 deletions
--- a/web/frontend/src/Analysis.root.svelte
+++ b/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}
--- a/web/frontend/src/Job.root.svelte
+++ b/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/>
-    <Row>
-      <Col>
+    <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>
+        </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>

--- a/web/frontend/src/Node.root.svelte
+++ b/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>
--- a/web/frontend/src/Status.root.svelte
+++ b/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}

--- a/web/frontend/src/Systems.root.svelte
+++ b/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}
-      <PlotTable
+    </Col>
+  </Row>
+{:else}
+  <PlotGrid
    let:item
    let:width
    renderFor="systems"
@ -226,7 +232,5 @@
        >No dataset returned for <code>{selectedMetric}</code></Card
      >
    {/if}
-      </PlotTable>
-    {/if}
-  </Col>
-</Row>
+  </PlotGrid>
+{/if}
--- a/web/frontend/src/User.root.svelte
+++ b/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>
--- a/web/frontend/src/analysis.entrypoint.js
+++ b/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]
--- a/web/frontend/src/generic/PlotGrid.svelte
+++ b/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}
+
--- a/web/frontend/src/generic/plots/MetricPlot.svelte
+++ b/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
--- a/web/frontend/src/generic/plots/Scatter.svelte
+++ b/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,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'
--- a/web/frontend/src/generic/utils.js
+++ b/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
 }

--- a/web/frontend/src/job/Metric.svelte
+++ b/web/frontend/src/job/Metric.svelte
@ -171,7 +171,7 @@
  );
 </script>

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