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,10 +465,8 @@
       {/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"
@@ -478,13 +476,10 @@
           yunit="Jobs"
         />
       {/key}
-      </div>
     </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"
@@ -494,7 +489,6 @@
           yunit="Jobs"
         />
       {/key}
-      </div>
     </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 = [],
+  let plotWidths = [];
-    colWidth1,
+  let colWidth;
-    colWidth2;
   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,11 +590,9 @@
   <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"
@@ -603,13 +600,11 @@
           yunit="Jobs"
         />
       {/key}
-      </div>
     </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,11 +616,9 @@
   </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"
@@ -633,13 +626,11 @@
           yunit="Jobs"
         />
       {/key}
-      </div>
     </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,
+  let isHistogramSelectionOpen = false;
-    w2,
-    histogramHeight = 250,
-    isHistogramSelectionOpen = false;
   let selectedCluster = filterPresets?.cluster ? filterPresets.cluster : null;
   let showFootprint = filterPresets.cluster
     ? !!ccconfig[`plot_list_showFootprint:${filterPresets.cluster}`]
@@ -214,12 +211,9 @@
       </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"
@@ -227,15 +221,11 @@
           yunit="Jobs"
         />
       {/key}
-      </div>
     </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"
@@ -243,7 +233,6 @@
           yunit="Jobs"
         />
       {/key}
-      </div>
     </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 = []
+    let rows = [];
-    const isPlaceholder = x => x._is_placeholder === true
+    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 width = null;
-  export let height = 300;
+  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}
+<!-- Define Wrapper and NoData Card within $width -->
+<div bind:clientWidth={width}>
+  {#if data.length > 0}
     <div bind:this={plotWrapper} />
-{:else}
+  {:else}
     <Card class="mx-4" body color="warning"
       >Cannot render histogram: No data!</Card
     >
-{/if}
+  {/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 width = 250;
-    export let height;
+    export let height = 300;
     export let xLabel;
     export let yLabel;