feat: Rework analysis view top to contain piechart

web/frontend/src/Analysis.root.svelte

@@ -6,7 +6,8 @@
     import Filters from './filters/Filters.svelte'
     import PlotSelection from './PlotSelection.svelte'
     import Histogramuplot from './plots/Histogramuplot.svelte'
-    import Histogram, { binsFromFootprint } from './plots/Histogram.svelte'
+    import Pie from './plots/Pie.svelte'
+    import { binsFromFootprint } from './plots/Histogram.svelte'
     import ScatterPlot from './plots/Scatter.svelte'
     import PlotTable from './PlotTable.svelte'
     import Roofline from './plots/Roofline.svelte'
@@ -30,7 +31,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 colWidth;
+    let colWidth1, colWidth2, colWidth3, colWidth4;
     let numBins = 50;
     let maxY = -1;
     const ccconfig = getContext('cc-config')
@@ -135,9 +136,8 @@
         </Col>
     </Row>
 {:else if $statsQuery.data}
-    <Row>
-        <div class="col-3" bind:clientWidth={colWidth}>
-            <div style="height: 40%">
+    <Row cols={3} class="mb-4">
+        <Col>
             <Table>
                 <tr>
                     <th scope="col">Total Jobs</th>
@@ -156,23 +156,56 @@
                     <td>{$statsQuery.data.stats[0].totalCoreHours}</td>
                 </tr>
             </Table>
-            </div>
-            <div style="height: 60%;">
+        </Col>
+        <Col>
+            <div bind:clientWidth={colWidth1}>
+            <h5>Top Users</h5>
             {#key $statsQuery.data.topUsers}
-                    <h4>Top Users (by node hours)</h4>
-                    <Histogram
-                        width={colWidth - 25} height={300 * 0.5} small={true}
-                        data={$statsQuery.data.topUsers.sort((a, b) => b.count - a.count).map(({ count }, idx) => ({ count, value: idx }))}
-                        label={(x) => x < $statsQuery.data.topUsers.length ? $statsQuery.data.topUsers[Math.floor(x)].name : 'No Users'} 
-                        ylabel="Node Hours [h]"/>
+            <Pie
+                size={colWidth1}
+                sliceLabel='Hours'
+                quantities={$statsQuery.data.topUsers.sort((a, b) => b.count - a.count).map((tu) => tu.count)}
+                entities={$statsQuery.data.topUsers.sort((a, b) => b.count - a.count).map((tu) => tu.name)}
+            />
             {/key}
             </div>
+        </Col>
+        <Col>
+            <Table>
+                <tr class="mb-2"><th>User Name</th><th>Node Hours</th></tr>
+                {#each $statsQuery.data.topUsers.sort((a, b) => b.count - a.count) as { name, count }}
+                    <tr>
+                        <th scope="col"><a href="/monitoring/user/{name}?cluster={cluster.name}">{name}</a></th>
+                        <td>{count}</td>
+                    </tr>
+                {/each}
+            </Table>
+        </Col>
+    </Row>
+    <Row cols={3} class="mb-2">
+        <Col>
+            {#if $rooflineQuery.fetching}
+                <Spinner />
+            {:else if $rooflineQuery.error}
+                <Card body color="danger">{$rooflineQuery.error.message}</Card>
+            {:else if $rooflineQuery.data && cluster}
+                <div bind:clientWidth={colWidth2}>
+                {#key $rooflineQuery.data}
+                    <Roofline
+                        width={colWidth2} height={300}
+                        tiles={$rooflineQuery.data.rooflineHeatmap}
+                        cluster={cluster.subClusters.length == 1 ? cluster.subClusters[0] : null}
+                        maxY={rooflineMaxY} />
+                {/key}
                 </div>
-        <div class="col-3">
+            {/if}
+        </Col>
+        <Col>
+            <div bind:clientWidth={colWidth3}>
             {#key $statsQuery.data.stats[0].histDuration}
                 <Histogramuplot
+                    width={colWidth3} height={300}
                     data={convert2uplot($statsQuery.data.stats[0].histDuration)}
-                    width={colWidth - 25}
                     title="Duration Distribution"
                     xlabel="Current Runtimes"
                     xunit="Hours" 
@@ -180,11 +213,13 @@
                     yunit="Jobs"/>
             {/key}
             </div>
-        <div class="col-3">
+        </Col>
+        <Col>
+            <div bind:clientWidth={colWidth4}>
             {#key $statsQuery.data.stats[0].histNumNodes}
                 <Histogramuplot
+                    width={colWidth4} height={300}
                     data={convert2uplot($statsQuery.data.stats[0].histNumNodes)}
-                    width={colWidth - 25}
                     title="Number of Nodes Distribution"
                     xlabel="Allocated Nodes"
                     xunit="Nodes"
@@ -192,25 +227,12 @@
                     yunit="Jobs"/>
             {/key}
             </div>
-        <div class="col-3">
-            {#if $rooflineQuery.fetching}
-                <Spinner />
-            {:else if $rooflineQuery.error}
-                <Card body color="danger">{$rooflineQuery.error.message}</Card>
-            {:else if $rooflineQuery.data && cluster}
-                {#key $rooflineQuery.data}
-                    <Roofline
-                        width={colWidth - 25}
-                        tiles={$rooflineQuery.data.rooflineHeatmap}
-                        cluster={cluster.subClusters.length == 1 ? cluster.subClusters[0] : null}
-                        maxY={rooflineMaxY} />
-                {/key}
-            {/if}
-        </div>
+        </Col>
     </Row>
 {/if}
 
-<br/>
+<hr class="my-6"/>
+
 {#if $footprintsQuery.error}
     <Row>
         <Col>
@@ -284,7 +306,7 @@
 {/if}
 
 <style>
-    h4 {
+    h5 {
         text-align: center;
     }
 </style>