rework clientwidth binds and size defaults for histograms

web/frontend/src/Analysis.root.svelte

@@ -55,7 +55,7 @@
   let filterComponent; // see why here: https://stackoverflow.com/questions/58287729/how-can-i-export-a-function-from-a-svelte-component-that-changes-a-value-in-the
   let jobFilters = [];
   let rooflineMaxY;
-  let colWidth1, colWidth2, colWidth3, colWidth4;
+  let colWidth1, colWidth2;
   let numBins = 50;
   let maxY = -1;
 
@@ -465,36 +465,30 @@
       {/if}
     </Col>
     <Col>
-      <div bind:clientWidth={colWidth3}>
-        {#key $statsQuery.data.stats[0].histDuration}
-          <Histogram
-            width={colWidth3}
-            height={300}
-            data={convert2uplot($statsQuery.data.stats[0].histDuration)}
-            title="Duration Distribution"
-            xlabel="Current Runtimes"
-            xunit="Hours"
-            ylabel="Number of Jobs"
-            yunit="Jobs"
-          />
-        {/key}
-      </div>
+      {#key $statsQuery.data.stats[0].histDuration}
+        <Histogram
+          height={300}
+          data={convert2uplot($statsQuery.data.stats[0].histDuration)}
+          title="Duration Distribution"
+          xlabel="Current Runtimes"
+          xunit="Hours"
+          ylabel="Number of Jobs"
+          yunit="Jobs"
+        />
+      {/key}
     </Col>
     <Col>
-      <div bind:clientWidth={colWidth4}>
-        {#key $statsQuery.data.stats[0].histNumCores}
-          <Histogram
-            width={colWidth4}
-            height={300}
-            data={convert2uplot($statsQuery.data.stats[0].histNumCores)}
-            title="Number of Cores Distribution"
-            xlabel="Allocated Cores"
-            xunit="Cores"
-            ylabel="Number of Jobs"
-            yunit="Jobs"
-          />
-        {/key}
-      </div>
+      {#key $statsQuery.data.stats[0].histNumCores}
+        <Histogram
+          height={300}
+          data={convert2uplot($statsQuery.data.stats[0].histNumCores)}
+          title="Number of Cores Distribution"
+          xlabel="Allocated Cores"
+          xunit="Cores"
+          ylabel="Number of Jobs"
+          yunit="Jobs"
+        />
+      {/key}
     </Col>
   </Row>
 {/if}
@@ -525,7 +519,6 @@
     <Col>
       <PlotGrid
         let:item
-        let:width
         renderFor="analysis"
         items={metricsInHistograms.map((metric) => ({
           metric,
@@ -542,8 +535,6 @@
       >
         <Histogram
           data={convert2uplot(item.bins)}
-          {width}
-          height={250}
           usesBins={true}
           title="Average Distribution of '{item.metric}'"
           xlabel={`${item.metric} bin maximum [${metricUnits[item.metric]}]`}

web/frontend/src/Status.root.svelte

@@ -44,9 +44,8 @@
 
   export let cluster;
 
-  let plotWidths = [],
-    colWidth1,
-    colWidth2;
+  let plotWidths = [];
+  let colWidth;
   let from = new Date(Date.now() - 5 * 60 * 1000),
     to = new Date(Date.now());
   const topOptions = [
@@ -468,7 +467,7 @@
 
   <Row cols={{ lg: 4, md: 2, sm: 1 }}>
     <Col class="p-2">
-      <div bind:clientWidth={colWidth1}>
+      <div bind:clientWidth={colWidth}>
         <h4 class="text-center">
           Top Users on {cluster.charAt(0).toUpperCase() + cluster.slice(1)}
         </h4>
@@ -479,7 +478,7 @@
             <Card body color="danger">{$topUserQuery.error.message}</Card>
           {:else}
             <Pie
-              size={colWidth1}
+              size={colWidth}
               sliceLabel={topUserSelection.label}
               quantities={$topUserQuery.data.topUser.map(
                 (tu) => tu[topUserSelection.key],
@@ -539,7 +538,7 @@
           <Card body color="danger">{$topProjectQuery.error.message}</Card>
         {:else}
           <Pie
-            size={colWidth1}
+            size={colWidth}
             sliceLabel={topProjectSelection.label}
             quantities={$topProjectQuery.data.topProjects.map(
               (tp) => tp[topProjectSelection.key],
@@ -591,25 +590,21 @@
   <hr class="my-2" />
   <Row cols={{ lg: 2, md: 1 }}>
     <Col class="p-2">
-      <div bind:clientWidth={colWidth2}>
-        {#key $mainQuery.data.stats}
-          <Histogram
-            data={convert2uplot($mainQuery.data.stats[0].histDuration)}
-            width={colWidth2 - 25}
-            title="Duration Distribution"
-            xlabel="Current Runtimes"
-            xunit="Hours"
-            ylabel="Number of Jobs"
-            yunit="Jobs"
-          />
-        {/key}
-      </div>
+      {#key $mainQuery.data.stats}
+        <Histogram
+          data={convert2uplot($mainQuery.data.stats[0].histDuration)}
+          title="Duration Distribution"
+          xlabel="Current Runtimes"
+          xunit="Hours"
+          ylabel="Number of Jobs"
+          yunit="Jobs"
+        />
+      {/key}
     </Col>
     <Col class="p-2">
       {#key $mainQuery.data.stats}
         <Histogram
           data={convert2uplot($mainQuery.data.stats[0].histNumNodes)}
-          width={colWidth2 - 25}
           title="Number of Nodes Distribution"
           xlabel="Allocated Nodes"
           xunit="Nodes"
@@ -621,25 +616,21 @@
   </Row>
   <Row cols={{ lg: 2, md: 1 }}>
     <Col class="p-2">
-      <div bind:clientWidth={colWidth2}>
-        {#key $mainQuery.data.stats}
-          <Histogram
-            data={convert2uplot($mainQuery.data.stats[0].histNumCores)}
-            width={colWidth2 - 25}
-            title="Number of Cores Distribution"
-            xlabel="Allocated Cores"
-            xunit="Cores"
-            ylabel="Number of Jobs"
-            yunit="Jobs"
-          />
-        {/key}
-      </div>
+      {#key $mainQuery.data.stats}
+        <Histogram
+          data={convert2uplot($mainQuery.data.stats[0].histNumCores)}
+          title="Number of Cores Distribution"
+          xlabel="Allocated Cores"
+          xunit="Cores"
+          ylabel="Number of Jobs"
+          yunit="Jobs"
+        />
+      {/key}
     </Col>
     <Col class="p-2">
       {#key $mainQuery.data.stats}
         <Histogram
           data={convert2uplot($mainQuery.data.stats[0].histNumAccs)}
-          width={colWidth2 - 25}
           title="Number of Accelerators Distribution"
           xlabel="Allocated Accs"
           xunit="Accs"
@@ -654,7 +645,6 @@
     {#key $mainQuery.data.stats[0].histMetrics}
       <PlotGrid
         let:item
-        let:width
         renderFor="user"
         items={$mainQuery.data.stats[0].histMetrics}
         itemsPerRow={2}
@@ -662,8 +652,6 @@
         <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}

web/frontend/src/User.root.svelte

@@ -54,10 +54,7 @@
     isSortingOpen = false;
   let metrics = ccconfig.plot_list_selectedMetrics,
     isMetricsSelectionOpen = false;
-  let w1,
-    w2,
-    histogramHeight = 250,
-    isHistogramSelectionOpen = false;
+  let isHistogramSelectionOpen = false;
   let selectedCluster = filterPresets?.cluster ? filterPresets.cluster : null;
   let showFootprint = filterPresets.cluster
     ? !!ccconfig[`plot_list_showFootprint:${filterPresets.cluster}`]
@@ -214,36 +211,28 @@
       </Table>
     </Col>
     <Col class="px-1">
-      <div bind:clientWidth={w1}>
-        {#key $stats.data.jobsStatistics[0].histDuration}
-          <Histogram
-            data={convert2uplot($stats.data.jobsStatistics[0].histDuration)}
-            width={w1}
-            height={histogramHeight}
-            title="Duration Distribution"
-            xlabel="Current Runtimes"
-            xunit="Hours"
-            ylabel="Number of Jobs"
-            yunit="Jobs"
-          />
-        {/key}
-      </div>
+      {#key $stats.data.jobsStatistics[0].histDuration}
+        <Histogram
+          data={convert2uplot($stats.data.jobsStatistics[0].histDuration)}
+          title="Duration Distribution"
+          xlabel="Current Runtimes"
+          xunit="Hours"
+          ylabel="Number of Jobs"
+          yunit="Jobs"
+        />
+      {/key}
     </Col>
     <Col class="px-1">
-      <div bind:clientWidth={w2}>
-        {#key $stats.data.jobsStatistics[0].histNumNodes}
-          <Histogram
-            data={convert2uplot($stats.data.jobsStatistics[0].histNumNodes)}
-            width={w2}
-            height={histogramHeight}
-            title="Number of Nodes Distribution"
-            xlabel="Allocated Nodes"
-            xunit="Nodes"
-            ylabel="Number of Jobs"
-            yunit="Jobs"
-          />
-        {/key}
-      </div>
+      {#key $stats.data.jobsStatistics[0].histNumNodes}
+        <Histogram
+          data={convert2uplot($stats.data.jobsStatistics[0].histNumNodes)}
+          title="Number of Nodes Distribution"
+          xlabel="Allocated Nodes"
+          xunit="Nodes"
+          ylabel="Number of Jobs"
+          yunit="Jobs"
+        />
+      {/key}
     </Col>
   {/if}
 </Row>
@@ -278,7 +267,6 @@
     {#key $stats.data.jobsStatistics[0].histMetrics}
       <PlotGrid
         let:item
-        let:width
         renderFor="user"
         items={$stats.data.jobsStatistics[0].histMetrics}
         itemsPerRow={3}
@@ -286,8 +274,6 @@
         <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}

web/frontend/src/generic/PlotGrid.svelte

@@ -17,8 +17,8 @@
     export let items
     export let renderFor
 
-    let rows = []
-    const isPlaceholder = x => x._is_placeholder === true
+    let rows = [];
+    const isPlaceholder = x => x._is_placeholder === true;
 
     function tile(items, itemsPerRow) {
         const rows = []

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

@@ -21,8 +21,8 @@
 
   export let data;
   export let usesBins = false;
-  export let width = 500;
-  export let height = 300;
+  export let width = null;
+  export let height = 250;
   export let title = "";
   export let xlabel = "";
   export let xunit = "";
@@ -226,10 +226,13 @@
   $: sizeChanged(width, height);
 </script>
 
-{#if data.length > 0}
-  <div bind:this={plotWrapper} />
-{:else}
-  <Card class="mx-4" body color="warning"
-    >Cannot render histogram: No data!</Card
-  >
-{/if}
+<!-- Define Wrapper and NoData Card within $width -->
+<div bind:clientWidth={width}>
+  {#if data.length > 0}
+    <div bind:this={plotWrapper} />
+  {:else}
+    <Card class="mx-4" body color="warning"
+      >Cannot render histogram: No data!</Card
+    >
+  {/if}
+</div>

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

@@ -117,6 +117,7 @@
 
   export let metric;
   export let scope = "node";
+  export let width = null;
   export let height = 300;
   export let timestep;
   export let series;
@@ -130,8 +131,6 @@
   export let numaccs = 0;
   export let zoomState = null;
 
-  let width;
-
   if (useStatsSeries == null) useStatsSeries = statisticsSeries != null;
   if (useStatsSeries == false && series == null) useStatsSeries = true;
 

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

@@ -146,8 +146,8 @@
     export let Y;
     export let S = null;
     export let color = '#0066cc';
-    export let width;
-    export let height;
+    export let width = 250;
+    export let height = 300;
     export let xLabel;
     export let yLabel;