simplify plotGrid, add cancel to metricSelect, improve metricPlot render logic

web/frontend/src/generic/PlotGrid.svelte

@@ -4,7 +4,6 @@
     Properties:
     - `itemsPerRow Number`: Elements to render per row
     - `items [Any]`: List of plot components to render
-    - `renderFor String`:   If 'job', filter disabled metrics
  -->
 
  <script>
@@ -15,43 +14,13 @@
 
     export let itemsPerRow
     export let items
-    export let renderFor
-
-    let rows = [];
-    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">
-        {#if !isPlaceholder(item)}
-          <slot item={item}/>
-        {/if}
-      </Col>
-    {/each}
-  </Row>
-{/each}
+<Row cols={{ xs: 1, sm: 2, md: 3, lg: itemsPerRow}}>
+  {#each items as item}
+    <Col class="px-1">
+      <slot {item}/>
+    </Col>
+  {/each}
+</Row>
 

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

@@ -11,7 +11,7 @@
     - `series [GraphQL.Series]`: The metric data object
     - `useStatsSeries Bool?`: If this plot uses the statistics Min/Max/Median representation; automatically set to according bool [Default: null]
     - `statisticsSeries [GraphQL.StatisticsSeries]?`: Min/Max/Median representation of metric data [Default: null]
-    - `cluster GraphQL.Cluster`: Cluster Object of the parent job
+    - `cluster String`: Cluster name of the parent job / data
     - `subCluster String`: Name of the subCluster of the parent job
     - `isShared Bool?`: If this job used shared resources; will adapt threshold indicators accordingly [Default: false]
     - `forNode Bool?`: If this plot is used for node data display; will ren[data, err := metricdata.LoadNodeData(cluster, metrics, nodes, scopes, from, to, ctx)](https://github.com/ClusterCockpit/cc-backend/blob/9fe7cdca9215220a19930779a60c8afc910276a3/internal/graph/schema.resolvers.go#L391-L392)der x-axis as negative time with $now as maximum [Default: false]
@@ -117,13 +117,13 @@
 
   export let metric;
   export let scope = "node";
-  export let width = null;
+  export let width = 0;
   export let height = 300;
   export let timestep;
   export let series;
   export let useStatsSeries = null;
   export let statisticsSeries = null;
-  export let cluster;
+  export let cluster = "";
   export let subCluster;
   export let isShared = false;
   export let forNode = false;
@@ -522,17 +522,9 @@
   }
 
   onMount(() => {
-    // Setup Wrapper
-    if (series[0].data.length > 0) {
-      if (forNode) {
-        plotWrapper.style.paddingTop = "0.5rem"
-        plotWrapper.style.paddingBottom = "0.5rem"
-      }
-      plotWrapper.style.backgroundColor = backgroundColor();
-      plotWrapper.style.borderRadius = "5px";
+    if (plotWrapper) {
+      render(width, height);
     }
-    // Init Plot
-    render(width, height);
   });
 
   onDestroy(() => {
@@ -540,22 +532,20 @@
     if (uplot) uplot.destroy();
   });
 
-  // This updates it on all size changes
-  // Condition for reactive triggering (eg scope change)
-  $: if (series[0].data.length > 0) {
+  // This updates plot on all size changes if wrapper (== data) exists
+  $: if (plotWrapper) {
     onSizeChange(width, height);
   }
 
 </script>
 
-<!-- Define Wrapper and NoData Card within $width -->
-<div bind:clientWidth={width}>
-  {#if series[0].data.length > 0}
-    <div bind:this={plotWrapper}/>
-  {:else}
-    <Card class="mx-4" body color="warning"
-      >Cannot render plot: No series data returned for <code>{metric}</code></Card
-    >
-  {/if}
-</div>
-
+<!-- Define $width Wrapper and NoData Card -->
+{#if series[0].data.length > 0}
+  <div bind:this={plotWrapper} bind:clientWidth={width}
+        style="background-color: {backgroundColor()};" class={forNode ? 'py-2 rounded' : 'rounded'}
+  />
+{:else}
+  <Card body color="warning" class="mx-4"
+    >Cannot render plot: No series data returned for <code>{metric}</code></Card
+  >
+{/if}

web/frontend/src/generic/select/MetricSelection.svelte

@@ -178,6 +178,7 @@
   </ModalBody>
   <ModalFooter>
     <Button color="primary" on:click={closeAndApply}>Close & Apply</Button>
+    <Button color="secondary" on:click={() => (isOpen = !isOpen)}>Cancel</Button>
   </ModalFooter>
 </Modal>