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}
-      >
+        gridContent={histoGridContent}
-        <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"
-        />
-      </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}
-      >
+        gridContent={metricsGridContent}
-        <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}
-        />
-      </PlotGrid>
     </Col>
   </Row>
 {/if}

web/frontend/src/Job.root.svelte

@@ -334,14 +334,8 @@
         </Col>
       </Row>
     {:else if $initq?.data && $jobMetrics?.data?.jobMetrics}
-      <PlotGrid
+      <!-- Note: Ignore 'Expected If ...' Error in IDE -->
-        let:item
+      {#snippet gridContent(item)}
-        items={orderAndMap(
-          groupByScope($jobMetrics.data.jobMetrics),
-          selectedMetrics,
-        )}
-        itemsPerRow={ccconfig.plot_view_plotsPerRow}
-      >
         {#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
+      {#snippet gridContent(item)}
-        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))}
-      >
         <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,22 +676,24 @@
   <!-- Selectable Stats as Histograms : Average Values of Running Jobs -->
 
   {#if selectedHistograms}
+    {#snippet gridContent(item)}
+      <Histogram
+        data={convert2uplot(item.data)}
+        usesBins={true}
+        title="Distribution of '{item.metric}' averages"
+        xlabel={`${item.metric} bin maximum ${item?.unit ? `[${item.unit}]` : ``}`}
+        xunit={item.unit}
+        ylabel="Number of Jobs"
+        yunit="Jobs"
+      />
+    {/snippet}
+    
     {#key $mainQuery.data.stats[0].histMetrics}
       <PlotGrid
-        let:item
         items={$mainQuery.data.stats[0].histMetrics}
         itemsPerRow={2}
-      >
+        {gridContent}
-        <Histogram
+      />
-          data={convert2uplot(item.data)}
-          usesBins={true}
-          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/User.root.svelte

@@ -335,22 +335,24 @@
     </Row>
   {:else}
     <hr class="my-2"/>
+    {#snippet gridContent(item)}
+      <Histogram
+        data={convert2uplot(item.data)}
+        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"
+        usesBins
+      />
+    {/snippet}
+
     {#key $stats.data.jobsStatistics[0].histMetrics}
       <PlotGrid
-        let:item
         items={$stats.data.jobsStatistics[0].histMetrics}
         itemsPerRow={3}
-      >
+        {gridContent}
-        <Histogram
+      />
-          data={convert2uplot(item.data)}
-          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"
-          usesBins
-        />
-      </PlotGrid>
     {/key}
   {/if}
 {:else}

web/frontend/src/generic/PlotGrid.svelte

@@ -12,26 +12,19 @@
         Col,
     } from "@sveltestrap/sveltestrap";
 
-    export let itemsPerRow
+    /* Svelte 5 Props */
-    export let items
+    let {
-
+      items,
-    /* Migtation Notes 
+      itemsPerRow,
-    * Requirements
+      gridContent
-    * - Parent Components must be already Migrated
+    } = $props();
-    * - 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
-    */
 </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">
+<div class="cc-plot" bind:clientWidth={width}>
-    <canvas bind:this={canvasElement} width="{width}" height="{height}"></canvas>
+    <canvas bind:this={canvasElement}  {width} {height}></canvas>
 </div>