Migrate plotgrid, adapt parent components with new snippets

web/frontend/src/Analysis.root.svelte

@@ -562,8 +562,19 @@
   </Row>
   <Row>
     <Col>
+      {#snippet histoGridContent(item)}
+        <Histogram
+          data={convert2uplot(item.bins)}
+          usesBins={true}
+          title="Average Distribution of '{item.metric}'"
+          xlabel={`${item.metric} bin maximum [${metricUnits[item.metric]}]`}
+          xunit={`${metricUnits[item.metric]}`}
+          ylabel="Normalized Hours"
+          yunit="Hours"
+        />
+      {/snippet}
+
       <PlotGrid
-        let:item
         items={metricsInHistograms.map((metric) => ({
           metric,
           ...binsFromFootprint(
@@ -576,17 +587,8 @@
           ),
         }))}
         itemsPerRow={ccconfig.plot_view_plotsPerRow}
-      >
-        <Histogram
-          data={convert2uplot(item.bins)}
-          usesBins={true}
-          title="Average Distribution of '{item.metric}'"
-          xlabel={`${item.metric} bin maximum [${metricUnits[item.metric]}]`}
-          xunit={`${metricUnits[item.metric]}`}
-          ylabel="Normalized Hours"
-          yunit="Hours"
+        gridContent={histoGridContent}
       />
-      </PlotGrid>
     </Col>
   </Row>
   <br />
@@ -604,9 +606,19 @@
   </Row>
   <Row>
     <Col>
+      {#snippet metricsGridContent(item)}
+        <ScatterPlot
+          height={250}
+          color={"rgba(0, 102, 204, 0.33)"}
+          xLabel={`${item.m1} [${metricUnits[item.m1]}]`}
+          yLabel={`${item.m2} [${metricUnits[item.m2]}]`}
+          X={item.f1}
+          Y={item.f2}
+          S={$footprintsQuery.data.footprints.timeWeights.nodeHours}
+        />
+      {/snippet}
+
       <PlotGrid
-        let:item
-        let:width
         items={metricsInScatterplots.map(([m1, m2]) => ({
           m1,
           f1: $footprintsQuery.data.footprints.metrics.find(
@@ -618,18 +630,8 @@
           ).data,
         }))}
         itemsPerRow={ccconfig.plot_view_plotsPerRow}
-      >
-        <ScatterPlot
-          {width}
-          height={250}
-          color={"rgba(0, 102, 204, 0.33)"}
-          xLabel={`${item.m1} [${metricUnits[item.m1]}]`}
-          yLabel={`${item.m2} [${metricUnits[item.m2]}]`}
-          X={item.f1}
-          Y={item.f2}
-          S={$footprintsQuery.data.footprints.timeWeights.nodeHours}
+        gridContent={metricsGridContent}
       />
-      </PlotGrid>
     </Col>
   </Row>
 {/if}

web/frontend/src/Job.root.svelte

@@ -334,14 +334,8 @@
         </Col>
       </Row>
     {:else if $initq?.data && $jobMetrics?.data?.jobMetrics}
-      <PlotGrid
-        let:item
-        items={orderAndMap(
-          groupByScope($jobMetrics.data.jobMetrics),
-          selectedMetrics,
-        )}
-        itemsPerRow={ccconfig.plot_view_plotsPerRow}
-      >
+      <!-- Note: Ignore 'Expected If ...' Error in IDE -->
+      {#snippet gridContent(item)}
         {#if item.data}
           <Metric
             bind:this={plots[item.metric]}
@@ -373,7 +367,16 @@
             </CardBody>
           </Card>
         {/if}
-      </PlotGrid>
+      {/snippet}
+
+      <PlotGrid
+        items={orderAndMap(
+          groupByScope($jobMetrics.data.jobMetrics),
+          selectedMetrics,
+        )}
+        itemsPerRow={ccconfig.plot_view_plotsPerRow}
+        {gridContent}
+      />
     {/if}
   </CardBody>
 </Card>

web/frontend/src/Node.root.svelte

@@ -204,20 +204,7 @@
     {:else if $nodeMetricsData.fetching || $initq.fetching}
       <Spinner />
     {:else}
-      <PlotGrid
-        let:item
-        itemsPerRow={ccconfig.plot_view_plotsPerRow}
-        items={$nodeMetricsData.data.nodeMetrics[0].metrics
-          .map((m) => ({
-            ...m,
-            disabled: checkMetricDisabled(
-              m.name,
-              cluster,
-              $nodeMetricsData.data.nodeMetrics[0].subCluster,
-            ),
-          }))
-          .sort((a, b) => a.name.localeCompare(b.name))}
-      >
+      {#snippet gridContent(item)}
         <h4 style="text-align: center; padding-top:15px;">
           {item.name}
           {systemUnits[item.name] ? "(" + systemUnits[item.name] + ")" : ""}
@@ -246,7 +233,22 @@
             >No dataset returned for <code>{item.name}</code></Card
           >
         {/if}
-      </PlotGrid>
+      {/snippet}
+
+      <PlotGrid
+        items={$nodeMetricsData.data.nodeMetrics[0].metrics
+          .map((m) => ({
+            ...m,
+            disabled: checkMetricDisabled(
+              m.name,
+              cluster,
+              $nodeMetricsData.data.nodeMetrics[0].subCluster,
+            ),
+          }))
+          .sort((a, b) => a.name.localeCompare(b.name))}
+        itemsPerRow={ccconfig.plot_view_plotsPerRow}
+        {gridContent}
+      />
     {/if}
   </Col>
 </Row>

web/frontend/src/Status.root.svelte

@@ -676,12 +676,7 @@
   <!-- Selectable Stats as Histograms : Average Values of Running Jobs -->
 
   {#if selectedHistograms}
-    {#key $mainQuery.data.stats[0].histMetrics}
-      <PlotGrid
-        let:item
-        items={$mainQuery.data.stats[0].histMetrics}
-        itemsPerRow={2}
-      >
+    {#snippet gridContent(item)}
       <Histogram
         data={convert2uplot(item.data)}
         usesBins={true}
@@ -691,7 +686,14 @@
         ylabel="Number of Jobs"
         yunit="Jobs"
       />
-      </PlotGrid>
+    {/snippet}
+    
+    {#key $mainQuery.data.stats[0].histMetrics}
+      <PlotGrid
+        items={$mainQuery.data.stats[0].histMetrics}
+        itemsPerRow={2}
+        {gridContent}
+      />
     {/key}
   {/if}
 {/if}

web/frontend/src/User.root.svelte

@@ -335,12 +335,7 @@
     </Row>
   {:else}
     <hr class="my-2"/>
-    {#key $stats.data.jobsStatistics[0].histMetrics}
-      <PlotGrid
-        let:item
-        items={$stats.data.jobsStatistics[0].histMetrics}
-        itemsPerRow={3}
-      >
+    {#snippet gridContent(item)}
       <Histogram
         data={convert2uplot(item.data)}
         title="Distribution of '{item.metric} ({item.stat})' footprints"
@@ -350,7 +345,14 @@
         yunit="Jobs"
         usesBins
       />
-      </PlotGrid>
+    {/snippet}
+
+    {#key $stats.data.jobsStatistics[0].histMetrics}
+      <PlotGrid
+        items={$stats.data.jobsStatistics[0].histMetrics}
+        itemsPerRow={3}
+        {gridContent}
+      />
     {/key}
   {/if}
 {:else}

web/frontend/src/generic/PlotGrid.svelte

@@ -12,26 +12,19 @@
         Col,
     } from "@sveltestrap/sveltestrap";
 
-    export let itemsPerRow
-    export let items
-
-    /* Migtation Notes 
-    * Requirements
-    * - Parent Components must be already Migrated
-    * - TODO: Job.root.svelte, Node.root.svelte
-    * - DONE: Analysis, Status, User
-    * 
-    * How-To
-    * - Define "Plot-Slotcode" as SV5 Snippet with argument "item" in parent (!)
-    * - Pass new snippet as argument/prop to here
-    * - @render snippet in items-loop with argument == item
-    */
+    /* Svelte 5 Props */
+    let {
+      items,
+      itemsPerRow,
+      gridContent
+    } = $props();
 </script>
 
 <Row cols={{ xs: 1, sm: 2, md: 3, lg: itemsPerRow}}>
   {#each items as item}
     <Col class="px-1">
-      <slot {item}/>
+      <!-- Note: Ignore '@' Error in IDE -->
+      {@render gridContent(item)}
     </Col>
   {/each}
 </Row>

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

@@ -182,6 +182,6 @@
 
 </script>
 
-<div class="cc-plot">
-    <canvas bind:this={canvasElement} width="{width}" height="{height}"></canvas>
+<div class="cc-plot" bind:clientWidth={width}>
+    <canvas bind:this={canvasElement}  {width} {height}></canvas>
 </div>