From b42a11d30e05eec1d09e7885080e7088d8b42c3e Mon Sep 17 00:00:00 2001
From: Christoph Kluge <christoph.kluge@fau.de>
Date: Thu, 10 Aug 2023 12:05:02 +0200
Subject: [PATCH 1/8] feat: Use chart.js for polarplot n jobview

---
 web/frontend/src/Job.root.svelte    |   7 +-
 web/frontend/src/plots/Polar.svelte | 199 ++++++++--------------------
 2 files changed, 55 insertions(+), 151 deletions(-)

diff --git a/web/frontend/src/Job.root.svelte b/web/frontend/src/Job.root.svelte
index 31ecdc5..ebfdeae 100644
--- a/web/frontend/src/Job.root.svelte
+++ b/web/frontend/src/Job.root.svelte
@@ -20,12 +20,11 @@
     } from "sveltestrap";
     import PlotTable from "./PlotTable.svelte";
     import Metric from "./Metric.svelte";
-    import PolarPlot from "./plots/Polar.svelte";
+    import Polar from "./plots/Polar.svelte";
     import Roofline from "./plots/Roofline.svelte";
     import JobInfo from "./joblist/JobInfo.svelte";
     import TagManagement from "./TagManagement.svelte";
     import MetricSelection from "./MetricSelection.svelte";
-    import Zoom from "./Zoom.svelte";
     import StatsTable from "./StatsTable.svelte";
     import { getContext } from "svelte";
 
@@ -233,7 +232,7 @@
             {/if}
         {/if}
         <Col>
-            <PolarPlot
+            <Polar
                 width={polarPlotSize}
                 height={polarPlotSize}
                 metrics={ccconfig[
@@ -246,7 +245,7 @@
         <Col>
             <Roofline
                 width={fullWidth / 3 - 10}
-                height={polarPlotSize}
+                height={polarPlotSize + 20}
                 cluster={clusters
                     .find((c) => c.name == $initq.data.job.cluster)
                     .subClusters.find(
diff --git a/web/frontend/src/plots/Polar.svelte b/web/frontend/src/plots/Polar.svelte
index 6a013dc..cb99ba7 100644
--- a/web/frontend/src/plots/Polar.svelte
+++ b/web/frontend/src/plots/Polar.svelte
@@ -1,22 +1,35 @@
-<div>
-    <canvas bind:this={canvasElement} width="{width}" height="{height}"></canvas>
-</div>
-
 <script>
-    import { onMount, getContext } from 'svelte'
+    import { getContext } from 'svelte'
+    import { Radar } from 'svelte-chartjs';
+    import {
+        Chart as ChartJS,
+        Title,
+        Tooltip,
+        Legend,
+        Filler,
+        PointElement,
+        RadialLinearScale,
+        LineElement
+    } from 'chart.js';
+
+    ChartJS.register(
+        Title,
+        Tooltip,
+        Legend,
+        Filler,
+        PointElement,
+        RadialLinearScale,
+        LineElement
+    );
 
-    export let metrics
     export let width
     export let height
+    export let metrics
     export let cluster
     export let jobMetrics
 
-    const fontSize = 12
-    const fontFamily = 'system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"'
     const metricConfig = getContext('metrics')
 
-    let ctx, canvasElement
-
     const labels = metrics.filter(name => {
         if (!jobMetrics.find(m => m.name == name && m.scope == "node")) {
             console.warn(`PolarPlot: No metric data for '${name}'`)
@@ -46,145 +59,37 @@
         return avg / metric.series.length
     }
 
-    const data = [
-        {
-            name: 'Max',
-            values: getValuesForStat(getMax),
-            color: 'rgb(0, 102, 255)',
-            areaColor: 'rgba(0, 102, 255, 0.25)'
-        },
-        {
-            name: 'Avg',
-            values: getValuesForStat(getAvg),
-            color: 'rgb(255, 153, 0)',
-            areaColor: 'rgba(255, 153, 0, 0.25)'
-        }
-    ]
-
-    function render() {
-        if (!width || Number.isNaN(width))
-            return
-
-        const centerX = width / 2
-        const centerY = height / 2 - 15
-        const radius = (Math.min(width, height) / 2) - 50
-
-        // Draw circles
-        ctx.lineWidth = 1
-        ctx.strokeStyle = '#999999'
-        ctx.beginPath()
-        ctx.arc(centerX, centerY, radius * 1.0, 0, Math.PI * 2, false)
-        ctx.stroke()
-        ctx.beginPath()
-        ctx.arc(centerX, centerY, radius * 0.666, 0, Math.PI * 2, false)
-        ctx.stroke()
-        ctx.beginPath()
-        ctx.arc(centerX, centerY, radius * 0.333, 0, Math.PI * 2, false)
-        ctx.stroke()
-
-        // Axis
-        ctx.font = `${fontSize}px ${fontFamily}`
-        ctx.textAlign = 'center'
-        ctx.fillText('1/3',
-            Math.floor(centerX + radius * 0.333),
-            Math.floor(centerY + 15))
-        ctx.fillText('2/3',
-            Math.floor(centerX + radius * 0.666),
-            Math.floor(centerY + 15))
-        ctx.fillText('1.0',
-            Math.floor(centerX + radius * 1.0),
-            Math.floor(centerY + 15))
-
-        // Label text and straight lines from center
-        for (let i = 0; i < labels.length; i++) {
-            const angle = 2 * Math.PI * ((i + 1) / labels.length)
-            const dx = Math.cos(angle) * radius
-            const dy = Math.sin(angle) * radius
-            ctx.fillText(labels[i],
-                Math.floor(centerX + dx * 1.1),
-                Math.floor(centerY + dy * 1.1))
-
-            ctx.beginPath()
-            ctx.moveTo(centerX, centerY)
-            ctx.lineTo(centerX + dx, centerY + dy)
-            ctx.stroke()
-        }
-
-        for (let dataset of data) {
-            console.assert(dataset.values.length === labels.length, 'this will look confusing')
-            ctx.fillStyle = dataset.color
-            ctx.strokeStyle = dataset.color
-            const points = []
-            for (let i = 0; i < dataset.values.length; i++) {
-                const value = dataset.values[i]
-                const angle = 2 * Math.PI * ((i + 1) / labels.length)
-                const x = centerX + Math.cos(angle) * radius * value
-                const y = centerY + Math.sin(angle) * radius * value
-
-                ctx.beginPath()
-                ctx.arc(x, y, 3, 0, Math.PI * 2, false)
-                ctx.fill()
-
-                points.push({ x, y })
+    const data = {
+        labels: labels,
+        datasets: [
+            {
+                label: 'Max',
+                data: getValuesForStat(getMax),
+                fill: 1,
+                backgroundColor: 'rgba(0, 102, 255, 0.25)',
+                borderColor: 'rgb(0, 102, 255)',
+                pointBackgroundColor: 'rgb(0, 102, 255)',
+                pointBorderColor: '#fff',
+                pointHoverBackgroundColor: '#fff',
+                pointHoverBorderColor: 'rgb(0, 102, 255)'
+            },
+            {
+                label: 'Avg',
+                data: getValuesForStat(getAvg),
+                fill: true,
+                backgroundColor: 'rgba(255, 153, 0, 0.25)',
+                borderColor: 'rgb(255, 153, 0)',
+                pointBackgroundColor: 'rgb(255, 153, 0)',
+                pointBorderColor: '#fff',
+                pointHoverBackgroundColor: '#fff',
+                pointHoverBorderColor: 'rgb(255, 153, 0)'
             }
-
-            // "Fill" the shape this dataset has
-            ctx.fillStyle = dataset.areaColor
-            ctx.beginPath()
-            ctx.moveTo(points[0].x, points[0].y)
-            for (let p of points)
-                ctx.lineTo(p.x, p.y)
-            ctx.lineTo(points[0].x, points[0].y)
-            ctx.stroke()
-            ctx.fill()
-        }
-
-        // Legend at the bottom left corner
-        ctx.textAlign = 'left'
-        let paddingLeft = 0
-        for (let dataset of data) {
-            const text = `${dataset.name}: `
-            const textWidth = ctx.measureText(text).width
-            ctx.fillStyle = 'black'
-            ctx.fillText(text, paddingLeft, height - 20)
-
-            ctx.fillStyle = dataset.color
-            ctx.beginPath()
-            ctx.arc(paddingLeft + textWidth + 5, height - 25, 5, 0, Math.PI * 2, false)
-            ctx.fill()
-
-            paddingLeft += textWidth + 15
-        }
-        ctx.fillStyle = 'black'
-        ctx.fillText(`Values relative to respective peak.`, 0, height - 7)
+        ]
     }
 
-    let mounted = false
-    onMount(() => {
-        canvasElement.width = width
-        canvasElement.height = height
-        ctx = canvasElement.getContext('2d')
-        render(ctx, data, width, height)
-        mounted = true
-    })
+    // No custom defined options but keep for clarity 
+    const options = {}
 
-    let timeoutId = null
-    function sizeChanged() {
-        if (!mounted)
-            return;
-
-        if (timeoutId != null)
-            clearTimeout(timeoutId)
-
-        timeoutId = setTimeout(() => {
-            timeoutId = null
-
-            canvasElement.width = width
-            canvasElement.height = height
-            ctx = canvasElement.getContext('2d')
-            render(ctx, data, width, height)
-        }, 250)
-    }
-
-    $: sizeChanged(width, height)
 </script>
+
+<Radar {data} {options} {width} {height}/>

From bbd8637ca6770050e80c88bc19b2298c1ba56d7e Mon Sep 17 00:00:00 2001
From: Christoph Kluge <christoph.kluge@fau.de>
Date: Thu, 10 Aug 2023 15:10:06 +0200
Subject: [PATCH 2/8] Fix Polar sizing

- Note: Not adaptive to viewport size, but will snap to grid
---
 web/frontend/src/Job.root.svelte    |  6 ++----
 web/frontend/src/plots/Polar.svelte | 18 ++++++++++++++----
 2 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/web/frontend/src/Job.root.svelte b/web/frontend/src/Job.root.svelte
index ebfdeae..09d3fac 100644
--- a/web/frontend/src/Job.root.svelte
+++ b/web/frontend/src/Job.root.svelte
@@ -120,7 +120,6 @@
         jobTags,
         fullWidth,
         statsTable;
-    $: polarPlotSize = Math.min(fullWidth / 3 - 10, 300);
     $: document.title = $initq.fetching
         ? "Loading..."
         : $initq.error
@@ -233,8 +232,7 @@
         {/if}
         <Col>
             <Polar
-                width={polarPlotSize}
-                height={polarPlotSize}
+                size={fullWidth / 4.1}
                 metrics={ccconfig[
                     `job_view_polarPlotMetrics:${$initq.data.job.cluster}`
                 ] || ccconfig[`job_view_polarPlotMetrics`]}
@@ -245,7 +243,7 @@
         <Col>
             <Roofline
                 width={fullWidth / 3 - 10}
-                height={polarPlotSize + 20}
+                height={fullWidth / 5}
                 cluster={clusters
                     .find((c) => c.name == $initq.data.job.cluster)
                     .subClusters.find(
diff --git a/web/frontend/src/plots/Polar.svelte b/web/frontend/src/plots/Polar.svelte
index cb99ba7..bf4385f 100644
--- a/web/frontend/src/plots/Polar.svelte
+++ b/web/frontend/src/plots/Polar.svelte
@@ -22,8 +22,7 @@
         LineElement
     );
 
-    export let width
-    export let height
+    export let size
     export let metrics
     export let cluster
     export let jobMetrics
@@ -88,8 +87,19 @@
     }
 
     // No custom defined options but keep for clarity 
-    const options = {}
+    const options = {
+        maintainAspectRatio: false,
+    }
 
 </script>
 
-<Radar {data} {options} {width} {height}/>
+<div class="chart-container">
+    <Radar {data} {options} width={size} height={size}/>
+</div>
+
+<style>
+    .chart-container {
+        margin: auto;
+        position: relative;
+    }
+</style>
\ No newline at end of file

From da8cefe15378ce7bb2dfe0505ab3b8fb90ed9ca3 Mon Sep 17 00:00:00 2001
From: Christoph Kluge <christoph.kluge@fau.de>
Date: Thu, 10 Aug 2023 18:05:16 +0200
Subject: [PATCH 3/8] feat: Change histogram to piechart in status view

---
 web/frontend/src/Status.root.svelte | 29 ++++++-----
 web/frontend/src/User.root.svelte   |  2 +-
 web/frontend/src/plots/Pie.svelte   | 78 +++++++++++++++++++++++++++++
 3 files changed, 95 insertions(+), 14 deletions(-)
 create mode 100644 web/frontend/src/plots/Pie.svelte

diff --git a/web/frontend/src/Status.root.svelte b/web/frontend/src/Status.root.svelte
index c979ac5..5d96995 100644
--- a/web/frontend/src/Status.root.svelte
+++ b/web/frontend/src/Status.root.svelte
@@ -1,7 +1,7 @@
 <script>
     import Refresher from './joblist/Refresher.svelte'
     import Roofline, { transformPerNodeData } from './plots/Roofline.svelte'
-    import Histogram from './plots/Histogram.svelte'
+    import Pie from './plots/Pie.svelte'
     import Histogramuplot from './plots/Histogramuplot.svelte'
     import { Row, Col, Spinner, Card, CardHeader, CardTitle, CardBody, Table, Progress, Icon } from 'sveltestrap'
     import { init, convert2uplot } from './utils.js'
@@ -160,13 +160,15 @@
     <Row cols={4}>
         <Col class="p-2">
             <div bind:clientWidth={colWidth1}>
-                <h4 class="mb-3 text-center">Top Users</h4>
+                <h4 class="text-center">Top Users</h4>
                 {#key $mainQuery.data}
-                    <Histogram
-                        width={colWidth1 - 25}
-                        data={$mainQuery.data.topUsers.sort((a, b) => b.count - a.count).map(({ count }, idx) => ({ count, value: idx }))}
-                        label={(x) => x < $mainQuery.data.topUsers.length ? $mainQuery.data.topUsers[Math.floor(x)].name : '0'}
-                        xlabel="User Name" ylabel="Number of Jobs" />
+                    <Pie
+                        size={colWidth1}
+                        sliceLabel='Jobs'
+                        quantities={$mainQuery.data.topUsers.sort((a, b) => b.count - a.count).map((tu) => tu.count)}
+                        entities={$mainQuery.data.topUsers.sort((a, b) => b.count - a.count).map((tu) => tu.name)}
+                        
+                    />
                 {/key}
             </div>
         </Col>
@@ -182,13 +184,14 @@
             </Table>
         </Col>
         <Col class="p-2">
-            <h4 class="mb-3 text-center">Top Projects</h4>
+            <h4 class="text-center">Top Projects</h4>
             {#key $mainQuery.data}
-                <Histogram
-                    width={colWidth1 - 25}
-                    data={$mainQuery.data.topProjects.sort((a, b) => b.count - a.count).map(({ count }, idx) => ({ count, value: idx }))}
-                    label={(x) => x < $mainQuery.data.topProjects.length ? $mainQuery.data.topProjects[Math.floor(x)].name : '0'}
-                    xlabel="Project Code" ylabel="Number of Jobs" />
+                <Pie
+                    size={colWidth1}
+                    sliceLabel='Jobs'
+                    quantities={$mainQuery.data.topProjects.sort((a, b) => b.count - a.count).map((tp) => tp.count)}
+                    entities={$mainQuery.data.topProjects.sort((a, b) => b.count - a.count).map((tp) => tp.name)}
+                />
             {/key}
         </Col>
         <Col class="px-4 py-2">
diff --git a/web/frontend/src/User.root.svelte b/web/frontend/src/User.root.svelte
index 7744884..c874105 100644
--- a/web/frontend/src/User.root.svelte
+++ b/web/frontend/src/User.root.svelte
@@ -137,7 +137,7 @@
             {#key $stats.data.jobsStatistics[0].histDuration}
                 <Histogramuplot
                     data={convert2uplot($stats.data.jobsStatistics[0].histDuration)}
-                    width={w2 - 25} height={histogramHeight}
+                    width={w1 - 25} height={histogramHeight}
                     title="Duration Distribution"
                     xlabel="Current Runtimes"
                     xunit="Hours" 
diff --git a/web/frontend/src/plots/Pie.svelte b/web/frontend/src/plots/Pie.svelte
new file mode 100644
index 0000000..1bdc2ec
--- /dev/null
+++ b/web/frontend/src/plots/Pie.svelte
@@ -0,0 +1,78 @@
+<script>
+    // import { getContext } from 'svelte'
+    import { Pie } from 'svelte-chartjs';
+    import {
+        Chart as ChartJS,
+        Title,
+        Tooltip,
+        Legend,
+        ArcElement,
+        CategoryScale
+    } from 'chart.js';
+
+    ChartJS.register(
+        Title,
+        Tooltip,
+        Legend,
+        ArcElement,
+        CategoryScale
+    );
+
+    export let size
+    export let sliceLabel
+    export let quantities
+    export let entities
+    export let displayLegend = false
+
+    // http://tsitsul.in/blog/coloropt/ : 12 colors normal
+    const colors = [
+        'rgb(235,172,35)',
+        'rgb(184,0,88)',
+        'rgb(0,140,249)',
+        'rgb(0,110,0)',
+        'rgb(0,187,173)',
+        'rgb(209,99,230)',
+        'rgb(178,69,2)',
+        'rgb(255,146,135)',
+        'rgb(89,84,214)',
+        'rgb(0,198,248)',
+        'rgb(135,133,0)',
+        'rgb(0,167,108)',
+        'rgb(189,189,189)'
+    ]
+
+    const data = {
+        labels: entities,
+        datasets: [
+            {
+                label: sliceLabel,
+                data: quantities,
+                fill: 1,
+                backgroundColor: colors.slice(0, quantities.length),            
+            }
+        ]
+    }
+
+    const options = { 
+        maintainAspectRatio: false,
+        plugins: {
+            legend: {
+                display: displayLegend
+            }
+        }
+    }
+
+</script>
+
+<div class="chart-container" style="--container-width: {size}; --container-height: {size}">
+    <Pie {data} {options}/>
+</div>
+
+<style>
+    .chart-container {
+        position: relative;
+        margin: auto;
+        height: var(--container-height);
+        width: var(--container-width);
+    }
+</style>

From e80ce7a4742f4cfe19efb6170ade0d7f53b847ca Mon Sep 17 00:00:00 2001
From: Christoph Kluge <christoph.kluge@fau.de>
Date: Thu, 10 Aug 2023 18:06:19 +0200
Subject: [PATCH 4/8] feat: Rework analysis view top to contain piechart

---
 web/frontend/src/Analysis.root.svelte | 134 +++++++++++++++-----------
 1 file changed, 78 insertions(+), 56 deletions(-)

diff --git a/web/frontend/src/Analysis.root.svelte b/web/frontend/src/Analysis.root.svelte
index 1cfadc9..ba04e05 100644
--- a/web/frontend/src/Analysis.root.svelte
+++ b/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,82 +136,103 @@
         </Col>
     </Row>
 {:else if $statsQuery.data}
-    <Row>
-        <div class="col-3" bind:clientWidth={colWidth}>
-            <div style="height: 40%">
-                <Table>
-                    <tr>
-                        <th scope="col">Total Jobs</th>
-                        <td>{$statsQuery.data.stats[0].totalJobs}</td>
-                    </tr>
-                    <tr>
-                        <th scope="col">Short Jobs</th>
-                        <td>{$statsQuery.data.stats[0].shortJobs}</td>
-                    </tr>
-                    <tr>
-                        <th scope="col">Total Walltime</th>
-                        <td>{$statsQuery.data.stats[0].totalWalltime}</td>
-                    </tr>
-                    <tr>
-                        <th scope="col">Total Core Hours</th>
-                        <td>{$statsQuery.data.stats[0].totalCoreHours}</td>
-                    </tr>
-                </Table>
+    <Row cols={3} class="mb-4">
+        <Col>
+            <Table>
+                <tr>
+                    <th scope="col">Total Jobs</th>
+                    <td>{$statsQuery.data.stats[0].totalJobs}</td>
+                </tr>
+                <tr>
+                    <th scope="col">Short Jobs</th>
+                    <td>{$statsQuery.data.stats[0].shortJobs}</td>
+                </tr>
+                <tr>
+                    <th scope="col">Total Walltime</th>
+                    <td>{$statsQuery.data.stats[0].totalWalltime}</td>
+                </tr>
+                <tr>
+                    <th scope="col">Total Core Hours</th>
+                    <td>{$statsQuery.data.stats[0].totalCoreHours}</td>
+                </tr>
+            </Table>
+        </Col>
+        <Col>
+            <div bind:clientWidth={colWidth1}>
+            <h5>Top Users</h5>
+            {#key $statsQuery.data.topUsers}
+            <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>
-            <div style="height: 60%;">
-                {#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]"/>
+        </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>
-        <div class="col-3">
+                </div>
+            {/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" 
                     ylabel="Number of Jobs"
                     yunit="Jobs"/>
             {/key}
-        </div>
-        <div class="col-3">
+            </div>
+        </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"
                     ylabel="Number of Jobs"
                     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>
+            </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>

From e91cdf6b793a4217852c7385dd088f739f22838e Mon Sep 17 00:00:00 2001
From: Christoph Kluge <christoph.kluge@fau.de>
Date: Fri, 11 Aug 2023 09:15:43 +0200
Subject: [PATCH 5/8] Add dependencies

---
 web/frontend/package-lock.json | 217 ++++++++++++++++++---------------
 web/frontend/package.json      |   2 +
 2 files changed, 124 insertions(+), 95 deletions(-)

diff --git a/web/frontend/package-lock.json b/web/frontend/package-lock.json
index b00380d..0d1e68d 100644
--- a/web/frontend/package-lock.json
+++ b/web/frontend/package-lock.json
@@ -11,7 +11,9 @@
       "dependencies": {
         "@rollup/plugin-replace": "^5.0.2",
         "@urql/svelte": "^4.0.1",
+        "chart.js": "^4.3.3",
         "graphql": "^16.6.0",
+        "svelte-chartjs": "^3.1.2",
         "sveltestrap": "^5.10.0",
         "uplot": "^1.6.24",
         "wonka": "^6.3.2"
@@ -27,9 +29,9 @@
       }
     },
     "node_modules/@0no-co/graphql.web": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@0no-co/graphql.web/-/graphql.web-1.0.1.tgz",
-      "integrity": "sha512-6Yaxyv6rOwRkLIvFaL0NrLDgfNqC/Ng9QOPmTmlqW4mORXMEKmh5NYGkIvvt5Yw8fZesnMAqkj8cIqTj8f40cQ==",
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@0no-co/graphql.web/-/graphql.web-1.0.4.tgz",
+      "integrity": "sha512-W3ezhHGfO0MS1PtGloaTpg0PbaT8aZSmmaerL7idtU5F7oCI+uu25k+MsMS31BVFlp4aMkHSrNRxiD72IlK8TA==",
       "peerDependencies": {
         "graphql": "^14.0.0 || ^15.0.0 || ^16.0.0"
       },
@@ -40,9 +42,9 @@
       }
     },
     "node_modules/@jridgewell/gen-mapping": {
-      "version": "0.3.2",
-      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.2.tgz",
-      "integrity": "sha512-mh65xKQAzI6iBcFzwv28KVWSmCkdRBWoOh+bYQGW3+6OZvbbN3TqMGo5hqYxQniRcH9F2VZIoJCm4pa3BPDK/A==",
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz",
+      "integrity": "sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==",
       "dev": true,
       "dependencies": {
         "@jridgewell/set-array": "^1.0.1",
@@ -54,9 +56,9 @@
       }
     },
     "node_modules/@jridgewell/resolve-uri": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.0.tgz",
-      "integrity": "sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==",
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.1.tgz",
+      "integrity": "sha512-dSYZh7HhCDtCKm4QakX0xFpsRDqjjtZf/kjI/v3T3Nwt5r8/qz/M19F9ySyOqU94SXBmeG9ttTul+YnR4LOxFA==",
       "dev": true,
       "engines": {
         "node": ">=6.0.0"
@@ -72,9 +74,9 @@
       }
     },
     "node_modules/@jridgewell/source-map": {
-      "version": "0.3.2",
-      "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.2.tgz",
-      "integrity": "sha512-m7O9o2uR8k2ObDysZYzdfhb08VuEml5oWGiosa1VdaPZ/A6QyPkAJuwN0Q1lhULOf6B7MtQmHENS743hWtCrgw==",
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.5.tgz",
+      "integrity": "sha512-UTYAUj/wviwdsMfzoSJspJxbkH5o1snzwX0//0ENX1u/55kkZZkcTZP6u9bwKGkv+dkk9at4m1Cpt0uY80kcpQ==",
       "dev": true,
       "dependencies": {
         "@jridgewell/gen-mapping": "^0.3.0",
@@ -82,24 +84,29 @@
       }
     },
     "node_modules/@jridgewell/sourcemap-codec": {
-      "version": "1.4.14",
-      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz",
-      "integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw=="
+      "version": "1.4.15",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
+      "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg=="
     },
     "node_modules/@jridgewell/trace-mapping": {
-      "version": "0.3.14",
-      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.14.tgz",
-      "integrity": "sha512-bJWEfQ9lPTvm3SneWwRFVLzrh6nhjwqw7TUFFBEMzwvg7t7PCDenf2lDwqo4NQXzdpgBXyFgDWnQA+2vkruksQ==",
+      "version": "0.3.19",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.19.tgz",
+      "integrity": "sha512-kf37QtfW+Hwx/buWGMPcR60iF9ziHa6r/CZJIHbmcm4+0qrXiVdxegAH0F6yddEVQ7zdkjcGCgCzUu+BcbhQxw==",
       "dev": true,
       "dependencies": {
-        "@jridgewell/resolve-uri": "^3.0.3",
-        "@jridgewell/sourcemap-codec": "^1.4.10"
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@kurkle/color": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.2.tgz",
+      "integrity": "sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw=="
+    },
     "node_modules/@popperjs/core": {
-      "version": "2.11.0",
-      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.0.tgz",
-      "integrity": "sha512-zrsUxjLOKAzdewIDRWy9nsV1GQsKBCWaGwsZQlCgr6/q+vjyZhFgqedLfFBuI9anTPEUT4APq9Mu0SZBTzIcGQ==",
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/popperjs"
@@ -131,9 +138,9 @@
       }
     },
     "node_modules/@rollup/plugin-node-resolve": {
-      "version": "15.0.2",
-      "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-15.0.2.tgz",
-      "integrity": "sha512-Y35fRGUjC3FaurG722uhUuG8YHOJRJQbI6/CkbRkdPotSpDj9NtIN85z1zrcyDcCQIW4qp5mgG72U+gJ0TAFEg==",
+      "version": "15.1.0",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-15.1.0.tgz",
+      "integrity": "sha512-xeZHCgsiZ9pzYVgAo9580eCGqwh/XCEUM9q6iQfGNocjgkufHAqC3exA+45URvhiYV8sBF9RlBai650eNs7AsA==",
       "dev": true,
       "dependencies": {
         "@rollup/pluginutils": "^5.0.1",
@@ -176,14 +183,14 @@
       }
     },
     "node_modules/@rollup/plugin-terser": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/@rollup/plugin-terser/-/plugin-terser-0.4.1.tgz",
-      "integrity": "sha512-aKS32sw5a7hy+fEXVy+5T95aDIwjpGHCTv833HXVtyKMDoVS7pBr5K3L9hEQoNqbJFjfANPrNpIXlTQ7is00eA==",
+      "version": "0.4.3",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-terser/-/plugin-terser-0.4.3.tgz",
+      "integrity": "sha512-EF0oejTMtkyhrkwCdg0HJ0IpkcaVg1MMSf2olHb2Jp+1mnLM04OhjpJWGma4HobiDTF0WCyViWuvadyE9ch2XA==",
       "dev": true,
       "dependencies": {
-        "serialize-javascript": "^6.0.0",
-        "smob": "^0.0.6",
-        "terser": "^5.15.1"
+        "serialize-javascript": "^6.0.1",
+        "smob": "^1.0.0",
+        "terser": "^5.17.4"
       },
       "engines": {
         "node": ">=14.0.0"
@@ -197,15 +204,6 @@
         }
       }
     },
-    "node_modules/@rollup/plugin-terser/node_modules/serialize-javascript": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.1.tgz",
-      "integrity": "sha512-owoXEFjWRllis8/M1Q+Cw5k8ZH40e3zhp/ovX+Xr/vi1qj6QesbyXXViFbpNvWvPNAD62SutwEXavefrLJWj7w==",
-      "dev": true,
-      "dependencies": {
-        "randombytes": "^2.1.0"
-      }
-    },
     "node_modules/@rollup/pluginutils": {
       "version": "5.0.2",
       "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.0.2.tgz",
@@ -239,30 +237,30 @@
       "dev": true
     },
     "node_modules/@urql/core": {
-      "version": "4.0.7",
-      "resolved": "https://registry.npmjs.org/@urql/core/-/core-4.0.7.tgz",
-      "integrity": "sha512-UtZ9oSbSFODXzFydgLCXpAQz26KGT1d6uEfcylKphiRWNXSWZi8k7vhJXNceNm/Dn0MiZ+kaaJHKcnGY1jvHRQ==",
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/@urql/core/-/core-4.1.1.tgz",
+      "integrity": "sha512-iIoAy6BY+BUZZ7KIpnMT7C9q+ULf5ZCVxGe3/i7WZSJBrQa2h1QkIMhL+8fAKmOn9gt83jSIv5drWWnhZ9izEA==",
       "dependencies": {
         "@0no-co/graphql.web": "^1.0.1",
         "wonka": "^6.3.2"
       }
     },
     "node_modules/@urql/svelte": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/@urql/svelte/-/svelte-4.0.1.tgz",
-      "integrity": "sha512-WbsVjuK7IUNlJlvXAgevjQunoso0T+AngFlb0zafDvay6HN47Zc3CSVbAlP8KjETjERUMJLuiqknmPFFm2GEFQ==",
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/@urql/svelte/-/svelte-4.0.4.tgz",
+      "integrity": "sha512-HYz9dHdqEcs9d82WWczQ3XG+zuup3TS01H+txaij/QfQ+KHjrlrn0EkOHQQd1S+H8+nFjFU2x9+HE3+3fuwL1A==",
       "dependencies": {
-        "@urql/core": "^4.0.0",
+        "@urql/core": "^4.1.0",
         "wonka": "^6.3.2"
       },
       "peerDependencies": {
-        "svelte": "^3.0.0"
+        "svelte": "^3.0.0 || ^4.0.0"
       }
     },
     "node_modules/acorn": {
-      "version": "8.8.0",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.0.tgz",
-      "integrity": "sha512-QOxyigPVrpZ2GXT+PFyZTl6TtOFc5egxHIP9IlQ+RbupQuX4RkT/Bee4/kQuC02Xkzg84JcT7oLYtDIQxp+v7w==",
+      "version": "8.10.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.10.0.tgz",
+      "integrity": "sha512-F0SAmZ8iUtS//m8DmCTA0jlh6TDKkHQyK6xc6V4KDTyZKA9dnvX9/3sRTVQrWm79glUAZbnmmNcdYwUIHWVybw==",
       "dev": true,
       "bin": {
         "acorn": "bin/acorn"
@@ -304,6 +302,17 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/chart.js": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.3.3.tgz",
+      "integrity": "sha512-aTk7pBw+x6sQYhon/NR3ikfUJuym/LdgpTlgZRe2PaEhjUMKBKyNaFCMVRAyTEWYFNO7qRu7iQVqOw/OqzxZxQ==",
+      "dependencies": {
+        "@kurkle/color": "^0.3.0"
+      },
+      "engines": {
+        "pnpm": ">=7"
+      }
+    },
     "node_modules/commander": {
       "version": "2.20.3",
       "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
@@ -313,13 +322,13 @@
     "node_modules/commondir": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz",
-      "integrity": "sha1-3dgA2gxmEnOTzKWVDqloo6rxJTs= sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==",
+      "integrity": "sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==",
       "dev": true
     },
     "node_modules/deepmerge": {
-      "version": "4.2.2",
-      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz",
-      "integrity": "sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==",
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
+      "integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==",
       "dev": true,
       "engines": {
         "node": ">=0.10.0"
@@ -376,9 +385,9 @@
       }
     },
     "node_modules/graphql": {
-      "version": "16.6.0",
-      "resolved": "https://registry.npmjs.org/graphql/-/graphql-16.6.0.tgz",
-      "integrity": "sha512-KPIBPDlW7NxrbT/eh4qPXz5FiFdL5UbaA0XUNz2Rp3Z3hqBSkbj0GVjwFDztsWVauZUWsbKHgMg++sk8UX0bkw==",
+      "version": "16.7.1",
+      "resolved": "https://registry.npmjs.org/graphql/-/graphql-16.7.1.tgz",
+      "integrity": "sha512-DRYR9tf+UGU0KOsMcKAlXeFfX89UiiIZ0dRU3mR0yJfu6OjZqUcp68NnFLnqQU5RexygFoDy1EW+ccOYcPfmHg==",
       "engines": {
         "node": "^12.22.0 || ^14.16.0 || ^16.0.0 || >=17.0.0"
       }
@@ -427,9 +436,9 @@
       }
     },
     "node_modules/is-core-module": {
-      "version": "2.12.0",
-      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.12.0.tgz",
-      "integrity": "sha512-RECHCBCd/viahWmwj6enj19sKbHfJrddi/6cBDsNTKbNq0f7VeaUkBo60BqzvPqo/W54ChS62Z5qyun7cfOMqQ==",
+      "version": "2.13.0",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.13.0.tgz",
+      "integrity": "sha512-Z7dk6Qo8pOCp3l4tsX2C5ZVas4V+UxwQodwZhLopL91TX8UyyHEXafPcyoeeWuLrwzHcr3igO78wNLwHJHsMCQ==",
       "dev": true,
       "dependencies": {
         "has": "^1.0.3"
@@ -441,7 +450,7 @@
     "node_modules/is-module": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/is-module/-/is-module-1.0.0.tgz",
-      "integrity": "sha1-Mlj7afeMFNW4FdZkM2tM/7ZEFZE= sha512-51ypPSPCoTEIN9dy5Oy+h4pShgJmPCygKfyRCISBI+JoWT/2oJvK8QPxmwv7b/p239jXrm9M1mlQbyKJ5A152g==",
+      "integrity": "sha512-51ypPSPCoTEIN9dy5Oy+h4pShgJmPCygKfyRCISBI+JoWT/2oJvK8QPxmwv7b/p239jXrm9M1mlQbyKJ5A152g==",
       "dev": true
     },
     "node_modules/is-reference": {
@@ -512,12 +521,12 @@
       }
     },
     "node_modules/resolve": {
-      "version": "1.22.2",
-      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.2.tgz",
-      "integrity": "sha512-Sb+mjNHOULsBv818T40qSPeRiuWLyaGMa5ewydRLFimneixmVy2zdivRl+AF6jaYPC8ERxGDmFSiqui6SfPd+g==",
+      "version": "1.22.4",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.4.tgz",
+      "integrity": "sha512-PXNdCiPqDqeUou+w1C2eTQbNfxKSuMxqTCuvlmmMsk1NWHL5fRrhY6Pl0qEYYc6+QqGClco1Qj8XnjPego4wfg==",
       "dev": true,
       "dependencies": {
-        "is-core-module": "^2.11.0",
+        "is-core-module": "^2.13.0",
         "path-parse": "^1.0.7",
         "supports-preserve-symlinks-flag": "^1.0.0"
       },
@@ -538,9 +547,9 @@
       }
     },
     "node_modules/rollup": {
-      "version": "3.21.0",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.21.0.tgz",
-      "integrity": "sha512-ANPhVcyeHvYdQMUyCbczy33nbLzI7RzrBje4uvNiTDJGIMtlKoOStmympwr9OtS1LZxiDmE2wvxHyVhoLtf1KQ==",
+      "version": "3.28.0",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.28.0.tgz",
+      "integrity": "sha512-d7zhvo1OUY2SXSM6pfNjgD5+d0Nz87CUp4mt8l/GgVP3oBsPwzNvSzyu1me6BSG9JIgWNTVcafIXBIyM8yQ3yw==",
       "devOptional": true,
       "bin": {
         "rollup": "dist/bin/rollup"
@@ -569,9 +578,9 @@
       }
     },
     "node_modules/rollup-plugin-svelte": {
-      "version": "7.1.4",
-      "resolved": "https://registry.npmjs.org/rollup-plugin-svelte/-/rollup-plugin-svelte-7.1.4.tgz",
-      "integrity": "sha512-Jm0FCydR7k8bBGe7wimXAes8x2zEK10Ew3f3lEZwYor/Zya3X0AZVeSAPRH7yiXB9hWQVzJu597EUeNwGDTdjQ==",
+      "version": "7.1.6",
+      "resolved": "https://registry.npmjs.org/rollup-plugin-svelte/-/rollup-plugin-svelte-7.1.6.tgz",
+      "integrity": "sha512-nVFRBpGWI2qUY1OcSiEEA/kjCY2+vAjO9BI8SzA7NRrh2GTunLd6w2EYmnMt/atgdg8GvcNjLsmZmbQs/u4SQA==",
       "dev": true,
       "dependencies": {
         "@rollup/pluginutils": "^4.1.0",
@@ -618,10 +627,19 @@
         }
       ]
     },
+    "node_modules/serialize-javascript": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.1.tgz",
+      "integrity": "sha512-owoXEFjWRllis8/M1Q+Cw5k8ZH40e3zhp/ovX+Xr/vi1qj6QesbyXXViFbpNvWvPNAD62SutwEXavefrLJWj7w==",
+      "dev": true,
+      "dependencies": {
+        "randombytes": "^2.1.0"
+      }
+    },
     "node_modules/smob": {
-      "version": "0.0.6",
-      "resolved": "https://registry.npmjs.org/smob/-/smob-0.0.6.tgz",
-      "integrity": "sha512-V21+XeNni+tTyiST1MHsa84AQhT1aFZipzPpOFAVB8DkHzwJyjjAmt9bgwnuZiZWnIbMo2duE29wybxv/7HWUw==",
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/smob/-/smob-1.4.0.tgz",
+      "integrity": "sha512-MqR3fVulhjWuRNSMydnTlweu38UhQ0HXM4buStD/S3mc/BzX3CuM9OmhyQpmtYCvoYdl5ris6TI0ZqH355Ymqg==",
       "dev": true
     },
     "node_modules/source-map": {
@@ -656,32 +674,41 @@
       }
     },
     "node_modules/svelte": {
-      "version": "3.58.0",
-      "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.58.0.tgz",
-      "integrity": "sha512-brIBNNB76mXFmU/Kerm4wFnkskBbluBDCjx/8TcpYRb298Yh2dztS2kQ6bhtjMcvUhd5ynClfwpz5h2gnzdQ1A==",
+      "version": "3.59.2",
+      "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.59.2.tgz",
+      "integrity": "sha512-vzSyuGr3eEoAtT/A6bmajosJZIUWySzY2CzB3w2pgPvnkUjGqlDnsNnA0PMO+mMAhuyMul6C2uuZzY6ELSkzyA==",
       "engines": {
         "node": ">= 8"
       }
     },
+    "node_modules/svelte-chartjs": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/svelte-chartjs/-/svelte-chartjs-3.1.2.tgz",
+      "integrity": "sha512-3+6gY2IJ9Ua8R9pk3iS1ypa7Z9OoXCJb9oPwIfTp7caJM+X+RrWnH2CTkGAq7FeSxc2nnmW08tYN88Q8Y+5M+w==",
+      "peerDependencies": {
+        "chart.js": "^3.5.0 || ^4.0.0",
+        "svelte": "^3.45.0"
+      }
+    },
     "node_modules/sveltestrap": {
-      "version": "5.10.0",
-      "resolved": "https://registry.npmjs.org/sveltestrap/-/sveltestrap-5.10.0.tgz",
-      "integrity": "sha512-k6Ob+6G2AMYvBidXHBKM9W28fJqFHbmosqCe/NC8pv6TV7K+v47Yw+zmnLWkjqCzzmjkSLkL48SrHZrlWc9mYQ==",
+      "version": "5.11.1",
+      "resolved": "https://registry.npmjs.org/sveltestrap/-/sveltestrap-5.11.1.tgz",
+      "integrity": "sha512-FIvPIEU1VolqMN1wi2XrC8aehWVbIJEST7zPfPbOUUfPimyx9giN4nA3We5wkXrBUaifXA8CSIwuHFvf3CmYQw==",
       "dependencies": {
-        "@popperjs/core": "^2.9.2"
+        "@popperjs/core": "^2.11.8"
       },
       "peerDependencies": {
-        "svelte": "^3.29.0"
+        "svelte": "^3.53.1"
       }
     },
     "node_modules/terser": {
-      "version": "5.17.1",
-      "resolved": "https://registry.npmjs.org/terser/-/terser-5.17.1.tgz",
-      "integrity": "sha512-hVl35zClmpisy6oaoKALOpS0rDYLxRFLHhRuDlEGTKey9qHjS1w9GMORjuwIMt70Wan4lwsLYyWDVnWgF+KUEw==",
+      "version": "5.19.2",
+      "resolved": "https://registry.npmjs.org/terser/-/terser-5.19.2.tgz",
+      "integrity": "sha512-qC5+dmecKJA4cpYxRa5aVkKehYsQKc+AHeKl0Oe62aYjBL8ZA33tTljktDHJSaxxMnbI5ZYw+o/S2DxxLu8OfA==",
       "dev": true,
       "dependencies": {
-        "@jridgewell/source-map": "^0.3.2",
-        "acorn": "^8.5.0",
+        "@jridgewell/source-map": "^0.3.3",
+        "acorn": "^8.8.2",
         "commander": "^2.20.0",
         "source-map-support": "~0.5.20"
       },
@@ -693,14 +720,14 @@
       }
     },
     "node_modules/uplot": {
-      "version": "1.6.24",
-      "resolved": "https://registry.npmjs.org/uplot/-/uplot-1.6.24.tgz",
-      "integrity": "sha512-WpH2BsrFrqxkMu+4XBvc0eCDsRBhzoq9crttYeSI0bfxpzR5YoSVzZXOKFVWcVC7sp/aDXrdDPbDZGCtck2PVg=="
+      "version": "1.6.25",
+      "resolved": "https://registry.npmjs.org/uplot/-/uplot-1.6.25.tgz",
+      "integrity": "sha512-eWLAhEaGtIcVBiS67mC2UC0yV+G6eYLS2rU67N4F2JVWjt7uBMg4xKXUYGW0dEz9G+m7fNatjCVXHts4gjyuMQ=="
     },
     "node_modules/wonka": {
-      "version": "6.3.2",
-      "resolved": "https://registry.npmjs.org/wonka/-/wonka-6.3.2.tgz",
-      "integrity": "sha512-2xXbQ1LnwNS7egVm1HPhW2FyKrekolzhpM3mCwXdQr55gO+tAiY76rhb32OL9kKsW8taj++iP7C6hxlVzbnvrw=="
+      "version": "6.3.4",
+      "resolved": "https://registry.npmjs.org/wonka/-/wonka-6.3.4.tgz",
+      "integrity": "sha512-CjpbqNtBGNAeyNS/9W6q3kSkKE52+FjIj7AkFlLr11s/VWGUu6a2CdYSdGxocIhIVjaW/zchesBQUKPVU69Cqg=="
     },
     "node_modules/wrappy": {
       "version": "1.0.2",
diff --git a/web/frontend/package.json b/web/frontend/package.json
index 0b8baaa..4ef7314 100644
--- a/web/frontend/package.json
+++ b/web/frontend/package.json
@@ -18,7 +18,9 @@
   "dependencies": {
     "@rollup/plugin-replace": "^5.0.2",
     "@urql/svelte": "^4.0.1",
+    "chart.js": "^4.3.3",
     "graphql": "^16.6.0",
+    "svelte-chartjs": "^3.1.2",
     "sveltestrap": "^5.10.0",
     "uplot": "^1.6.24",
     "wonka": "^6.3.2"

From 32420fb5313778cd40f14a4100c7bbd6d6013fac Mon Sep 17 00:00:00 2001
From: Christoph Kluge <christoph.kluge@fau.de>
Date: Fri, 11 Aug 2023 09:41:39 +0200
Subject: [PATCH 6/8] Add pie color legend to Top-Tables

---
 web/frontend/src/Analysis.root.svelte |  9 ++++---
 web/frontend/src/Status.root.svelte   | 24 ++++++++++++++----
 web/frontend/src/plots/Pie.svelte     | 36 +++++++++++++--------------
 3 files changed, 42 insertions(+), 27 deletions(-)

diff --git a/web/frontend/src/Analysis.root.svelte b/web/frontend/src/Analysis.root.svelte
index ba04e05..e7fe720 100644
--- a/web/frontend/src/Analysis.root.svelte
+++ b/web/frontend/src/Analysis.root.svelte
@@ -2,11 +2,11 @@
     import { init, convert2uplot } from './utils.js'
     import { getContext, onMount } from 'svelte'
     import { queryStore, gql, getContextClient  } from '@urql/svelte'
-    import { Row, Col, Spinner, Card, Table } from 'sveltestrap'
+    import { Row, Col, Spinner, Card, Table, Icon } from 'sveltestrap'
     import Filters from './filters/Filters.svelte'
     import PlotSelection from './PlotSelection.svelte'
     import Histogramuplot from './plots/Histogramuplot.svelte'
-    import Pie from './plots/Pie.svelte'
+    import Pie, { colors } from './plots/Pie.svelte'
     import { binsFromFootprint } from './plots/Histogram.svelte'
     import ScatterPlot from './plots/Scatter.svelte'
     import PlotTable from './PlotTable.svelte'
@@ -172,9 +172,10 @@
         </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 class="mb-2"><th>Legend</th><th>User Name</th><th>Node Hours</th></tr>
+                {#each $statsQuery.data.topUsers.sort((a, b) => b.count - a.count) as { name, count }, i}
                     <tr>
+                        <td><Icon name="circle-fill" style="color: {colors[i]};"/></td>
                         <th scope="col"><a href="/monitoring/user/{name}?cluster={cluster.name}">{name}</a></th>
                         <td>{count}</td>
                     </tr>
diff --git a/web/frontend/src/Status.root.svelte b/web/frontend/src/Status.root.svelte
index 5d96995..11aa255 100644
--- a/web/frontend/src/Status.root.svelte
+++ b/web/frontend/src/Status.root.svelte
@@ -1,7 +1,7 @@
 <script>
     import Refresher from './joblist/Refresher.svelte'
     import Roofline, { transformPerNodeData } from './plots/Roofline.svelte'
-    import Pie from './plots/Pie.svelte'
+    import Pie, { colors } from './plots/Pie.svelte'
     import Histogramuplot from './plots/Histogramuplot.svelte'
     import { Row, Col, Spinner, Card, CardHeader, CardTitle, CardBody, Table, Progress, Icon } from 'sveltestrap'
     import { init, convert2uplot } from './utils.js'
@@ -174,9 +174,10 @@
         </Col>
         <Col class="px-4 py-2">
             <Table>
-                <tr class="mb-2"><th>User Name</th><th>Number of Nodes</th></tr>
-                {#each $mainQuery.data.topUsers.sort((a, b) => b.count - a.count) as { name, count }}
+                <tr class="mb-2"><th>Legend</th><th>User Name</th><th>Number of Nodes</th></tr>
+                {#each $mainQuery.data.topUsers.sort((a, b) => b.count - a.count) as { name, count }, i}
                     <tr>
+                        <td><Icon name="circle-fill" style="color: {colors[i]};"/></td>
                         <th scope="col"><a href="/monitoring/user/{name}?cluster={cluster}&state=running">{name}</a></th>
                         <td>{count}</td>
                     </tr>
@@ -196,9 +197,10 @@
         </Col>
         <Col class="px-4 py-2">
             <Table>
-                <tr class="mb-2"><th>Project Code</th><th>Number of Nodes</th></tr>
-                {#each $mainQuery.data.topProjects.sort((a, b) => b.count - a.count) as { name, count }}
+                <tr class="mb-2"><th>Legend</th><th>Project Code</th><th>Number of Nodes</th></tr>
+                {#each $mainQuery.data.topProjects.sort((a, b) => b.count - a.count) as { name, count }, i}
                     <tr>
+                        <td><Icon name="circle-fill" style="color: {colors[i]};"/></td>
                         <th scope="col"><a href="/monitoring/jobs/?cluster={cluster}&state=running&project={name}&projectMatch=eq">{name}</a></th>
                         <td>{count}</td>
                     </tr>
@@ -236,3 +238,15 @@
         </Col>
     </Row>
 {/if}
+
+<style>
+    .colorBoxWrapper {
+        display: flex;
+    }
+
+    .colorBox {
+        width: 20px;
+        height: 20px;
+        border: 1px solid rgba(0, 0, 0, .2);
+    }
+</style>
\ No newline at end of file
diff --git a/web/frontend/src/plots/Pie.svelte b/web/frontend/src/plots/Pie.svelte
index 1bdc2ec..326c062 100644
--- a/web/frontend/src/plots/Pie.svelte
+++ b/web/frontend/src/plots/Pie.svelte
@@ -1,5 +1,22 @@
+<script context="module">
+    // http://tsitsul.in/blog/coloropt/ : 12 colors normal
+    export const colors = [
+        'rgb(235,172,35)',
+        'rgb(184,0,88)',
+        'rgb(0,140,249)',
+        'rgb(0,110,0)',
+        'rgb(0,187,173)',
+        'rgb(209,99,230)',
+        'rgb(178,69,2)',
+        'rgb(255,146,135)',
+        'rgb(89,84,214)',
+        'rgb(0,198,248)',
+        'rgb(135,133,0)',
+        'rgb(0,167,108)',
+        'rgb(189,189,189)'
+    ]
+</script>
 <script>
-    // import { getContext } from 'svelte'
     import { Pie } from 'svelte-chartjs';
     import {
         Chart as ChartJS,
@@ -24,23 +41,6 @@
     export let entities
     export let displayLegend = false
 
-    // http://tsitsul.in/blog/coloropt/ : 12 colors normal
-    const colors = [
-        'rgb(235,172,35)',
-        'rgb(184,0,88)',
-        'rgb(0,140,249)',
-        'rgb(0,110,0)',
-        'rgb(0,187,173)',
-        'rgb(209,99,230)',
-        'rgb(178,69,2)',
-        'rgb(255,146,135)',
-        'rgb(89,84,214)',
-        'rgb(0,198,248)',
-        'rgb(135,133,0)',
-        'rgb(0,167,108)',
-        'rgb(189,189,189)'
-    ]
-
     const data = {
         labels: entities,
         datasets: [

From c04344bfde2101642994eba0e7d0e082c626da35 Mon Sep 17 00:00:00 2001
From: Christoph Kluge <christoph.kluge@fau.de>
Date: Fri, 11 Aug 2023 10:25:35 +0200
Subject: [PATCH 7/8] Remove unused css styles

---
 web/frontend/src/Status.root.svelte | 14 +-------------
 1 file changed, 1 insertion(+), 13 deletions(-)

diff --git a/web/frontend/src/Status.root.svelte b/web/frontend/src/Status.root.svelte
index 11aa255..d402c08 100644
--- a/web/frontend/src/Status.root.svelte
+++ b/web/frontend/src/Status.root.svelte
@@ -237,16 +237,4 @@
             {/key}
         </Col>
     </Row>
-{/if}
-
-<style>
-    .colorBoxWrapper {
-        display: flex;
-    }
-
-    .colorBox {
-        width: 20px;
-        height: 20px;
-        border: 1px solid rgba(0, 0, 0, .2);
-    }
-</style>
\ No newline at end of file
+{/if}
\ No newline at end of file

From f758e52ccd0d0904a13781347be70f1fe58f072f Mon Sep 17 00:00:00 2001
From: Christoph Kluge <christoph.kluge@fau.de>
Date: Fri, 11 Aug 2023 11:42:30 +0200
Subject: [PATCH 8/8] Disable chart.js animations

---
 web/frontend/src/plots/Pie.svelte   | 1 +
 web/frontend/src/plots/Polar.svelte | 1 +
 2 files changed, 2 insertions(+)

diff --git a/web/frontend/src/plots/Pie.svelte b/web/frontend/src/plots/Pie.svelte
index 326c062..0db451f 100644
--- a/web/frontend/src/plots/Pie.svelte
+++ b/web/frontend/src/plots/Pie.svelte
@@ -55,6 +55,7 @@
 
     const options = { 
         maintainAspectRatio: false,
+        animation: false,
         plugins: {
             legend: {
                 display: displayLegend
diff --git a/web/frontend/src/plots/Polar.svelte b/web/frontend/src/plots/Polar.svelte
index bf4385f..e556cc2 100644
--- a/web/frontend/src/plots/Polar.svelte
+++ b/web/frontend/src/plots/Polar.svelte
@@ -89,6 +89,7 @@
     // No custom defined options but keep for clarity 
     const options = {
         maintainAspectRatio: false,
+        animation: false
     }
 
 </script>