From 4d7819802dbddc7120a5b268086a104fea6d44ea Mon Sep 17 00:00:00 2001
From: Christoph Kluge <christoph.kluge@fau.de>
Date: Fri, 1 Sep 2023 10:13:26 +0200
Subject: [PATCH 01/14] fix typo

---
 web/frontend/src/Analysis.root.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/frontend/src/Analysis.root.svelte b/web/frontend/src/Analysis.root.svelte
index 67cc652..06219b9 100644
--- a/web/frontend/src/Analysis.root.svelte
+++ b/web/frontend/src/Analysis.root.svelte
@@ -293,7 +293,7 @@
                         {#each $topQuery.data.topList as te, i}
                             <tr>
                                 <td><Icon name="circle-fill" style="color: {colors[i]};"/></td>
-                                {#if groupSelection.key == 'User'} 
+                                {#if groupSelection.key == 'user'} 
                                     <th scope="col"><a href="/monitoring/user/{te.id}?cluster={cluster.name}">{te.id}</a></th>
                                 {:else}
                                     <th scope="col"><a href="/monitoring/jobs/?cluster={cluster.name}&project={te.id}&projectMatch=eq">{te.id}</a></th>

From 69ee19bed09ad5ca9b79112175bfe18972fbb16a Mon Sep 17 00:00:00 2001
From: Christoph Kluge <christoph.kluge@fau.de>
Date: Fri, 1 Sep 2023 10:23:14 +0200
Subject: [PATCH 02/14] fix: include running jobs case in statsQueries

---
 internal/repository/stats.go | 30 ++++++++++++++++--------------
 1 file changed, 16 insertions(+), 14 deletions(-)

diff --git a/internal/repository/stats.go b/internal/repository/stats.go
index 3ac3ffd..8084553 100644
--- a/internal/repository/stats.go
+++ b/internal/repository/stats.go
@@ -70,28 +70,30 @@ func (r *JobRepository) buildStatsQuery(
 	var query sq.SelectBuilder
 	castType := r.getCastType()
 
+	// fmt.Sprintf(`CAST(ROUND((CASE WHEN job.job_state = "running" THEN %d - job.start_time ELSE job.duration END) / 3600) as %s) as value`, time.Now().Unix(), castType)
+
 	if col != "" {
 		// Scan columns: id, totalJobs, totalWalltime, totalNodes, totalNodeHours, totalCores, totalCoreHours, totalAccs, totalAccHours
 		query = sq.Select(col, "COUNT(job.id) as totalJobs",
-			fmt.Sprintf("CAST(ROUND(SUM(job.duration) / 3600) as %s) as totalWalltime", castType),
-			fmt.Sprintf("CAST(SUM(job.num_nodes) as %s) as totalNodes", castType),
-			fmt.Sprintf("CAST(ROUND(SUM(job.duration * job.num_nodes) / 3600) as %s) as totalNodeHours", castType),
-			fmt.Sprintf("CAST(SUM(job.num_hwthreads) as %s) as totalCores", castType),
-			fmt.Sprintf("CAST(ROUND(SUM(job.duration * job.num_hwthreads) / 3600) as %s) as totalCoreHours", castType),
-			fmt.Sprintf("CAST(SUM(job.num_acc) as %s) as totalAccs", castType),
-			fmt.Sprintf("CAST(ROUND(SUM(job.duration * job.num_acc) / 3600) as %s) as totalAccHours", castType),
+			fmt.Sprintf(`CAST(ROUND(SUM((CASE WHEN job.job_state = "running" THEN %d - job.start_time ELSE job.duration END)) / 3600) as %s) as totalWalltime`, time.Now().Unix(), castType),
+			fmt.Sprintf(`CAST(SUM(job.num_nodes) as %s) as totalNodes`, castType),
+			fmt.Sprintf(`CAST(ROUND(SUM((CASE WHEN job.job_state = "running" THEN %d - job.start_time ELSE job.duration END) * job.num_nodes) / 3600) as %s) as totalNodeHours`, time.Now().Unix(), castType),
+			fmt.Sprintf(`CAST(SUM(job.num_hwthreads) as %s) as totalCores`, castType),
+			fmt.Sprintf(`CAST(ROUND(SUM((CASE WHEN job.job_state = "running" THEN %d - job.start_time ELSE job.duration END) * job.num_hwthreads) / 3600) as %s) as totalCoreHours`, time.Now().Unix(), castType),
+			fmt.Sprintf(`CAST(SUM(job.num_acc) as %s) as totalAccs`, castType),
+			fmt.Sprintf(`CAST(ROUND(SUM((CASE WHEN job.job_state = "running" THEN %d - job.start_time ELSE job.duration END) * job.num_acc) / 3600) as %s) as totalAccHours`, time.Now().Unix(), castType),
 		).From("job").GroupBy(col)
 
 	} else {
 		// Scan columns: totalJobs, totalWalltime, totalNodes, totalNodeHours, totalCores, totalCoreHours, totalAccs, totalAccHours
 		query = sq.Select("COUNT(job.id)",
-			fmt.Sprintf("CAST(ROUND(SUM(job.duration) / 3600) as %s)", castType),
-			fmt.Sprintf("CAST(SUM(job.num_nodes) as %s)", castType),
-			fmt.Sprintf("CAST(ROUND(SUM(job.duration * job.num_nodes) / 3600) as %s)", castType),
-			fmt.Sprintf("CAST(SUM(job.num_hwthreads) as %s)", castType),
-			fmt.Sprintf("CAST(ROUND(SUM(job.duration * job.num_hwthreads) / 3600) as %s)", castType),
-			fmt.Sprintf("CAST(SUM(job.num_acc) as %s)", castType),
-			fmt.Sprintf("CAST(ROUND(SUM(job.duration * job.num_acc) / 3600) as %s)", castType),
+			fmt.Sprintf(`CAST(ROUND(SUM((CASE WHEN job.job_state = "running" THEN %d - job.start_time ELSE job.duration END)) / 3600) as %s)`, time.Now().Unix(), castType),
+			fmt.Sprintf(`CAST(SUM(job.num_nodes) as %s)`, castType),
+			fmt.Sprintf(`CAST(ROUND(SUM((CASE WHEN job.job_state = "running" THEN %d - job.start_time ELSE job.duration END) * job.num_nodes) / 3600) as %s)`, time.Now().Unix(), castType),
+			fmt.Sprintf(`CAST(SUM(job.num_hwthreads) as %s)`, castType),
+			fmt.Sprintf(`CAST(ROUND(SUM((CASE WHEN job.job_state = "running" THEN %d - job.start_time ELSE job.duration END) * job.num_hwthreads) / 3600) as %s)`, time.Now().Unix(), castType),
+			fmt.Sprintf(`CAST(SUM(job.num_acc) as %s)`, castType),
+			fmt.Sprintf(`CAST(ROUND(SUM((CASE WHEN job.job_state = "running" THEN %d - job.start_time ELSE job.duration END) * job.num_acc) / 3600) as %s)`, time.Now().Unix(), castType),
 		).From("job")
 	}
 

From f5c43d60d37ddc1fff9a0a1636191793952a8651 Mon Sep 17 00:00:00 2001
From: Christoph Kluge <christoph.kluge@fau.de>
Date: Fri, 1 Sep 2023 13:12:55 +0200
Subject: [PATCH 03/14] initial commit for rooflineuplot

---
 web/frontend/package-lock.json              |   7 +
 web/frontend/package.json                   |   1 +
 web/frontend/src/Status.root.svelte         |   6 +
 web/frontend/src/plots/Rooflineuplot.svelte | 187 ++++++
 web/frontend/src/plots/Scatteruplot.svelte  | 627 ++++++++++++++++++++
 5 files changed, 828 insertions(+)
 create mode 100644 web/frontend/src/plots/Rooflineuplot.svelte
 create mode 100644 web/frontend/src/plots/Scatteruplot.svelte

diff --git a/web/frontend/package-lock.json b/web/frontend/package-lock.json
index eb80726..1ca3349 100644
--- a/web/frontend/package-lock.json
+++ b/web/frontend/package-lock.json
@@ -22,6 +22,7 @@
         "@rollup/plugin-commonjs": "^24.1.0",
         "@rollup/plugin-node-resolve": "^15.0.2",
         "@rollup/plugin-terser": "^0.4.1",
+        "@timohausmann/quadtree-js": "^1.2.5",
         "rollup": "^3.21.0",
         "rollup-plugin-css-only": "^4.3.0",
         "rollup-plugin-svelte": "^7.1.4",
@@ -225,6 +226,12 @@
         }
       }
     },
+    "node_modules/@timohausmann/quadtree-js": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/@timohausmann/quadtree-js/-/quadtree-js-1.2.5.tgz",
+      "integrity": "sha512-WcH3pouYtpyLjTCRvNP0WuSV4m7mRyYhLzW44egveFryT7pJhpDsdIJASEe37iCFNA0vmEpqTYGoG0siyXEthA==",
+      "dev": true
+    },
     "node_modules/@types/estree": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.1.tgz",
diff --git a/web/frontend/package.json b/web/frontend/package.json
index b0bb5af..3e77474 100644
--- a/web/frontend/package.json
+++ b/web/frontend/package.json
@@ -10,6 +10,7 @@
     "@rollup/plugin-commonjs": "^24.1.0",
     "@rollup/plugin-node-resolve": "^15.0.2",
     "@rollup/plugin-terser": "^0.4.1",
+    "@timohausmann/quadtree-js": "^1.2.5",
     "rollup": "^3.21.0",
     "rollup-plugin-css-only": "^4.3.0",
     "rollup-plugin-svelte": "^7.1.4",
diff --git a/web/frontend/src/Status.root.svelte b/web/frontend/src/Status.root.svelte
index f1d8e05..27eb55e 100644
--- a/web/frontend/src/Status.root.svelte
+++ b/web/frontend/src/Status.root.svelte
@@ -2,6 +2,7 @@
     import { getContext } from "svelte";
     import Refresher from "./joblist/Refresher.svelte";
     import Roofline, { transformPerNodeData } from "./plots/Roofline.svelte";
+    import Rooflineuplot from "./plots/Rooflineuplot.svelte";
     import Pie, { colors } from "./plots/Pie.svelte";
     import Histogram from "./plots/Histogram.svelte";
     import {
@@ -665,4 +666,9 @@
             {/key}
         </Col>
     </Row>
+    <Row>
+        <Col>
+            <Rooflineuplot/>
+        </Col>
+    </Row>
 {/if}
diff --git a/web/frontend/src/plots/Rooflineuplot.svelte b/web/frontend/src/plots/Rooflineuplot.svelte
new file mode 100644
index 0000000..11c1a44
--- /dev/null
+++ b/web/frontend/src/plots/Rooflineuplot.svelte
@@ -0,0 +1,187 @@
+<script>
+    import uPlot from 'uplot'
+    import { formatNumber } from '../units.js'
+    import { onMount, onDestroy } from 'svelte'
+    import { Card } from 'sveltestrap'
+
+    let plotWrapper = null
+    let uplot = null
+    let timeoutId = null
+
+    function randInt(min, max) {
+        return Math.floor(Math.random() * (max - min + 1)) + min;
+    }
+
+    function filledArr(len, val) {
+        let arr = Array(len);
+
+        if (typeof val == "function") {
+            for (let i = 0; i < len; ++i)
+                arr[i] = val(i);
+        }
+        else {
+            for (let i = 0; i < len; ++i)
+                arr[i] = val;
+        }
+
+        return arr;
+    }
+
+    let points = 10000;
+    let series = 5;
+
+    console.time("prep");
+
+    let data = filledArr(series, v => [
+        filledArr(points, i => randInt(0,500)),
+        filledArr(points, i => randInt(0,500)),
+    ]);
+
+    data[0] = null;
+
+    console.timeEnd("prep");
+
+    console.log(data);
+
+    const drawPoints = (u, seriesIdx, idx0, idx1) => {
+        const size = 5 * devicePixelRatio;
+
+        uPlot.orient(u, seriesIdx, (series, dataX, dataY, scaleX, scaleY, valToPosX, valToPosY, xOff, yOff, xDim, yDim, moveTo, lineTo, rect, arc) => {
+            let d = u.data[seriesIdx];
+
+            u.ctx.fillStyle = series.stroke();
+
+            let deg360 = 2 * Math.PI;
+
+            console.time("points");
+
+            let p = new Path2D();
+
+            for (let i = 0; i < d[0].length; i++) {
+                let xVal = d[0][i];
+                let yVal = d[1][i];
+
+                if (xVal >= scaleX.min && xVal <= scaleX.max && yVal >= scaleY.min && yVal <= scaleY.max) {
+                    let cx = valToPosX(xVal, scaleX, xDim, xOff);
+                    let cy = valToPosY(yVal, scaleY, yDim, yOff);
+
+                    p.moveTo(cx + size/2, cy);
+                    arc(p, cx, cy, size/2, 0, deg360);
+                }
+            }
+
+            console.timeEnd("points1");
+
+            u.ctx.fill(p);
+        });
+
+        return null;
+    };
+
+    let pxRatio;
+
+    function setPxRatio() {
+        pxRatio = devicePixelRatio;
+    }
+
+    function guardedRange(u, min, max) {
+        if (max == min) {
+            if (min == null) {
+                min = 0;
+                max = 100;
+            }
+            else {
+                let delta = Math.abs(max) || 100;
+                max += delta;
+                min -= delta;
+            }
+        }
+
+        return [min, max];
+    }
+
+    setPxRatio();
+
+    window.addEventListener('dppxchange', setPxRatio);
+
+    const opts = {
+        title: "Scatter Plot",
+        mode: 2,
+        width: 1920,
+        height: 600,
+        legend: {
+            live: false,
+        },
+        hooks: {
+            drawClear: [
+                u => {
+                    u.series.forEach((s, i) => {
+                        if (i > 0)
+                            s._paths = null;
+                    });
+                },
+            ],
+        },
+        scales: {
+            x: {
+                time: false,
+            //	auto: false,
+            //	range: [0, 500],
+                // remove any scale padding, use raw data limits
+                range: guardedRange,
+            },
+            y: {
+            //	auto: false,
+            //	range: [0, 500],
+                // remove any scale padding, use raw data limits
+                range: guardedRange,
+            },
+        },
+        series: [
+            {
+                /*
+                stroke: "red",
+                fill: "rgba(255,0,0,0.1)",
+                paths: (u, seriesIdx, idx0, idx1) => {
+                    uPlot.orient(u, seriesIdx, (series, dataX, dataY, scaleX, scaleY, valToPosX, valToPosY, xOff, yOff, xDim, yDim) => {
+                        let d = u.data[seriesIdx];
+
+                        console.log(d);
+                    });
+
+                    return null;
+                },
+                */
+            },
+            {
+                stroke: "red",
+                fill: "rgba(255,0,0,0.1)",
+                paths: drawPoints,
+            },
+            {
+                stroke: "green",
+                fill: "rgba(0,255,0,0.1)",
+                paths: drawPoints,
+            },
+            {
+                stroke: "blue",
+                fill: "rgba(0,0,255,0.1)",
+                paths: drawPoints,
+            },
+            {
+                stroke: "magenta",
+                fill: "rgba(0,0,255,0.1)",
+                paths: drawPoints,
+            },
+        ],
+    };
+
+    let u = new uPlot(opts, data, document.body);
+
+</script>
+
+{#if data != null}
+    <div bind:this={plotWrapper}/>
+{:else}
+    <Card class="mx-4" body color="warning">Cannot render roofline: No data!</Card>
+{/if}
\ No newline at end of file
diff --git a/web/frontend/src/plots/Scatteruplot.svelte b/web/frontend/src/plots/Scatteruplot.svelte
new file mode 100644
index 0000000..0fac0b7
--- /dev/null
+++ b/web/frontend/src/plots/Scatteruplot.svelte
@@ -0,0 +1,627 @@
+<script>
+    import Quadtree from '@timohausmann/quadtree-js' // https://github.com/timohausmann/quadtree-js
+    import uPlot from 'uplot'
+    import { formatNumber } from '../units.js'
+    import { onMount, onDestroy } from 'svelte'
+    import { Card } from 'sveltestrap'
+
+    let plotWrapper = null
+    let uplot = null
+    let timeoutId = null
+
+    function randInt(min, max) {
+        return Math.floor(Math.random() * (max - min + 1)) + min;
+    }
+
+    function filledArr(len, val) {
+        let arr = Array(len);
+
+        if (typeof val == "function") {
+            for (let i = 0; i < len; ++i)
+                arr[i] = val(i);
+        }
+        else {
+            for (let i = 0; i < len; ++i)
+                arr[i] = val;
+        }
+
+        return arr;
+    }
+
+    let points = 10000;
+    let series = 5;
+
+    console.time("prep");
+
+    let data = filledArr(series, v => [
+        filledArr(points, i => randInt(0,500)),
+        filledArr(points, i => randInt(0,500)),
+    ]);
+
+    data[0] = null;
+
+    console.timeEnd("prep");
+
+    console.log(data);
+
+    const drawPoints = (u, seriesIdx, idx0, idx1) => {
+        const size = 5 * devicePixelRatio;
+
+        uPlot.orient(u, seriesIdx, (series, dataX, dataY, scaleX, scaleY, valToPosX, valToPosY, xOff, yOff, xDim, yDim, moveTo, lineTo, rect, arc) => {
+            let d = u.data[seriesIdx];
+
+            u.ctx.fillStyle = series.stroke();
+
+            let deg360 = 2 * Math.PI;
+
+            console.time("points");
+
+        //	let cir = new Path2D();
+        //	cir.moveTo(0, 0);
+        //	arc(cir, 0, 0, 3, 0, deg360);
+
+            // Create transformation matrix that moves 200 points to the right
+        //	let m = document.createElementNS('http://www.w3.org/2000/svg', 'svg').createSVGMatrix();
+        //	m.a = 1;   m.b = 0;
+        //	m.c = 0;   m.d = 1;
+        //	m.e = 200; m.f = 0;
+
+
+            let p = new Path2D();
+
+            for (let i = 0; i < d[0].length; i++) {
+                let xVal = d[0][i];
+                let yVal = d[1][i];
+
+                if (xVal >= scaleX.min && xVal <= scaleX.max && yVal >= scaleY.min && yVal <= scaleY.max) {
+                    let cx = valToPosX(xVal, scaleX, xDim, xOff);
+                    let cy = valToPosY(yVal, scaleY, yDim, yOff);
+
+                    p.moveTo(cx + size/2, cy);
+                //	arc(p, cx, cy, 3, 0, deg360);
+                    arc(p, cx, cy, size/2, 0, deg360);
+
+                //	m.e = cx;
+                //	m.f = cy;
+                //	p.addPath(cir, m);
+
+                //	qt.add({x: cx - 1.5, y: cy - 1.5, w: 3, h: 3, sidx: seriesIdx, didx: i});
+                }
+            }
+
+            console.timeEnd("points");
+
+            u.ctx.fill(p);
+        });
+
+        return null;
+    };
+
+    const drawPoints2 = (u, seriesIdx, idx0, idx1) => {
+        uPlot.orient(u, seriesIdx, (series, dataX, dataY, scaleX, scaleY, valToPosX, valToPosY, xOff, yOff, xDim, yDim, moveTo, lineTo, rect, arc) => {
+            let d = u.data[seriesIdx];
+
+            u.ctx.fillStyle = series.fill();
+
+            let deg360 = 2 * Math.PI;
+
+            console.time("points");
+
+        //	let cir = new Path2D();
+        //	cir.moveTo(0, 0);
+        //	arc(cir, 0, 0, 3, 0, deg360);
+
+            // Create transformation matrix that moves 200 points to the right
+        //	let m = document.createElementNS('http://www.w3.org/2000/svg', 'svg').createSVGMatrix();
+        //	m.a = 1;   m.b = 0;
+        //	m.c = 0;   m.d = 1;
+        //	m.e = 200; m.f = 0;
+
+
+            let p = new Path2D();
+
+            let strokeWidth = 1;
+
+            for (let i = 0; i < d[0].length; i++) {
+                let cx = valToPosX(d[0][i], scaleX, xDim, xOff);
+                let cy = valToPosY(d[1][i], scaleY, yDim, yOff);
+
+                let size = d[2][i] * devicePixelRatio;
+
+                p.moveTo(cx + size, cy);
+                arc(p, cx, cy, size, 0, deg360);
+                qt.add({
+                    x: cx - size - strokeWidth/2 - u.bbox.left,
+                    y: cy - size - strokeWidth/2 - u.bbox.top,
+                    w: size * 2 + strokeWidth,
+                    h: size * 2 + strokeWidth,
+                    sidx: seriesIdx,
+                    didx: i
+                });
+            }
+
+            console.timeEnd("points");
+
+            u.ctx.fill(p);
+
+            u.ctx.lineWidth = strokeWidth;
+            u.ctx.strokeStyle = series.stroke();
+            u.ctx.stroke(p);
+        });
+
+        return null;
+    };
+
+    // shape?
+    const makeDrawPoints3 = (opts) => {
+        let {/*size,*/ disp, each = () => {}} = opts;
+
+        return (u, seriesIdx, idx0, idx1) => {
+            uPlot.orient(u, seriesIdx, (series, dataX, dataY, scaleX, scaleY, valToPosX, valToPosY, xOff, yOff, xDim, yDim, moveTo, lineTo, rect, arc) => {
+                let d = u.data[seriesIdx];
+
+                let strokeWidth = 1;
+
+                u.ctx.save();
+
+                u.ctx.rect(u.bbox.left, u.bbox.top, u.bbox.width, u.bbox.height);
+                u.ctx.clip();
+
+                u.ctx.fillStyle = series.fill();
+                u.ctx.strokeStyle = series.stroke();
+                u.ctx.lineWidth = strokeWidth;
+
+                let deg360 = 2 * Math.PI;
+
+                console.time("points");
+
+            //	let cir = new Path2D();
+            //	cir.moveTo(0, 0);
+            //	arc(cir, 0, 0, 3, 0, deg360);
+
+                // Create transformation matrix that moves 200 points to the right
+            //	let m = document.createElementNS('http://www.w3.org/2000/svg', 'svg').createSVGMatrix();
+            //	m.a = 1;   m.b = 0;
+            //	m.c = 0;   m.d = 1;
+            //	m.e = 200; m.f = 0;
+
+                // compute bubble dims
+                let sizes = disp.size.values(u, seriesIdx, idx0, idx1);
+
+                // todo: this depends on direction & orientation
+                // todo: calc once per redraw, not per path
+                let filtLft = u.posToVal(-maxSize / 2, scaleX.key);
+                let filtRgt = u.posToVal(u.bbox.width / devicePixelRatio + maxSize / 2, scaleX.key);
+                let filtBtm = u.posToVal(u.bbox.height / devicePixelRatio + maxSize / 2, scaleY.key);
+                let filtTop = u.posToVal(-maxSize / 2, scaleY.key);
+
+                for (let i = 0; i < d[0].length; i++) {
+                    let xVal = d[0][i];
+                    let yVal = d[1][i];
+                    let size = sizes[i] * devicePixelRatio;
+
+                    if (xVal >= filtLft && xVal <= filtRgt && yVal >= filtBtm && yVal <= filtTop) {
+                        let cx = valToPosX(xVal, scaleX, xDim, xOff);
+                        let cy = valToPosY(yVal, scaleY, yDim, yOff);
+
+                        u.ctx.moveTo(cx + size/2, cy);
+                        u.ctx.beginPath();
+                        u.ctx.arc(cx, cy, size/2, 0, deg360);
+                        u.ctx.fill();
+                        u.ctx.stroke();
+
+                        each(u, seriesIdx, i,
+                            cx - size/2 - strokeWidth/2,
+                            cy - size/2 - strokeWidth/2,
+                            size + strokeWidth,
+                            size + strokeWidth
+                        );
+                    }
+                }
+
+                console.timeEnd("points");
+
+                u.ctx.restore();
+            });
+
+            return null;
+        };
+    };
+
+    // https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/isPointInPath
+    let qt;
+
+    let pxRatio;
+
+    function setPxRatio() {
+        pxRatio = devicePixelRatio;
+    }
+
+    function guardedRange(u, min, max) {
+        if (max == min) {
+            if (min == null) {
+                min = 0;
+                max = 100;
+            }
+            else {
+                let delta = Math.abs(max) || 100;
+                max += delta;
+                min -= delta;
+            }
+        }
+
+        return [min, max];
+    }
+
+    setPxRatio();
+
+    window.addEventListener('dppxchange', setPxRatio);
+
+    const opts = {
+        title: "Scatter Plot",
+        mode: 2,
+        width: 1920,
+        height: 600,
+        legend: {
+            live: false,
+        },
+        hooks: {
+            drawClear: [
+                u => {
+                //	qt = qt || new Quadtree(0, 0, u.bbox.width, u.bbox.height);
+
+                //	qt.clear();
+
+                    // force-clear the path cache to cause drawBars() to rebuild new quadtree
+                    u.series.forEach((s, i) => {
+                        if (i > 0)
+                            s._paths = null;
+                    });
+                },
+            ],
+        },
+        scales: {
+            x: {
+                time: false,
+            //	auto: false,
+            //	range: [0, 500],
+                // remove any scale padding, use raw data limits
+                range: guardedRange,
+            },
+            y: {
+            //	auto: false,
+            //	range: [0, 500],
+                // remove any scale padding, use raw data limits
+                range: guardedRange,
+            },
+        },
+        series: [
+            {
+                /*
+                stroke: "red",
+                fill: "rgba(255,0,0,0.1)",
+                paths: (u, seriesIdx, idx0, idx1) => {
+                    uPlot.orient(u, seriesIdx, (series, dataX, dataY, scaleX, scaleY, valToPosX, valToPosY, xOff, yOff, xDim, yDim) => {
+                        let d = u.data[seriesIdx];
+
+                        console.log(d);
+                    });
+
+                    return null;
+                },
+                */
+            },
+            {
+                stroke: "red",
+                fill: "rgba(255,0,0,0.1)",
+                paths: drawPoints,
+            },
+            {
+                stroke: "green",
+                fill: "rgba(0,255,0,0.1)",
+                paths: drawPoints,
+            },
+            {
+                stroke: "blue",
+                fill: "rgba(0,0,255,0.1)",
+                paths: drawPoints,
+            },
+            {
+                stroke: "magenta",
+                fill: "rgba(0,0,255,0.1)",
+                paths: drawPoints,
+            },
+        ],
+    };
+
+    let u = new uPlot(opts, data, document.body);
+
+
+
+    points = 50;
+
+    // size range in pixels (diameter)
+    let minSize = 6;
+    let maxSize = 60;
+
+    let maxArea = Math.PI * (maxSize / 2) ** 2;
+    let minArea = Math.PI * (minSize / 2) ** 2;
+
+    // quadratic scaling (px area)
+    function getSize(value, minValue, maxValue) {
+        let pct = value / maxValue;
+        // clamp to min area
+        //let area = Math.max(maxArea * pct, minArea);
+        let area = maxArea * pct;
+        return Math.sqrt(area / Math.PI) * 2;
+    }
+
+    function getSizeMinMax(u) {
+        let minValue = Infinity;
+        let maxValue = -Infinity;
+
+        for (let i = 1; i < u.series.length; i++) {
+            let sizeData = u.data[i][2];
+
+            for (let j = 0; j < sizeData.length; j++) {
+                minValue = Math.min(minValue, sizeData[j]);
+                maxValue = Math.max(maxValue, sizeData[j]);
+            }
+        }
+
+        return [minValue, maxValue];
+    }
+
+    let drawPoints3 = makeDrawPoints3({
+        disp: {
+            size: {
+                unit: 3, // raw CSS pixels
+            //	discr: true,
+                values: (u, seriesIdx, idx0, idx1) => {
+                    // TODO: only run once per setData() call
+                    let [minValue, maxValue] = getSizeMinMax(u);
+                    return u.data[seriesIdx][2].map(v => getSize(v, minValue, maxValue));
+                },
+            },
+        },
+        each: (u, seriesIdx, dataIdx, lft, top, wid, hgt) => {
+            // we get back raw canvas coords (included axes & padding). translate to the plotting area origin
+            lft -= u.bbox.left;
+            top -= u.bbox.top;
+            qt.add({x: lft, y: top, w: wid, h: hgt, sidx: seriesIdx, didx: dataIdx});
+        },
+    });
+
+    let data2 = filledArr(series, v => [
+        filledArr(points, i => randInt(0,500)),
+        filledArr(points, i => randInt(0,500)),
+        filledArr(points, i => randInt(1,10000)),  // bubble size, population
+        filledArr(points, i => (Math.random() + 1).toString(36).substring(7)), // label / country name
+    ]);
+
+    data2[0] = null;
+    data2[1][1] = data2[1][1].map(v => v == 0 ? v : v * -1);
+
+    /*
+    const legendValue = (u, val, seriesIdx, idx) => {
+        let [x, y, size] = u.data[seriesIdx];
+        return `${x[idx]}, ${y[idx]}, ${size[idx]}`;
+    };
+    */
+
+    const legendValues = (u, seriesIdx, dataIdx) => {
+        // when data null, it's initial schema probe (also u.status == 0)
+        if (u.data == null || dataIdx == null || hRect == null || hRect.sidx != seriesIdx) {
+            return {
+                "Country":    '<NUM COUNTRIES>',
+                "Population": '<TOTAL POP>',
+                "GDP":        '<TOTAL GDP>',
+                "Income":     '<AVG INCOME>'
+            };
+        }
+
+        let [x, y, size, label] = u.data[seriesIdx];
+
+        return {
+            "Country":    label[hRect.didx],
+            "Population": size[hRect.didx],
+            "GDP":        '$' + x[hRect.didx],
+            "Income":     '$' + y[hRect.didx],
+        };
+    };
+
+    // hovered
+    let hRect;
+
+    const opts2 = {
+        title: "Bubble Plot",
+        mode: 2,
+        width: 1920,
+        height: 600,
+        legend: {
+        //	live: false,
+        },
+        cursor: {
+            dataIdx: (u, seriesIdx) => {
+                if (seriesIdx == 1) {
+                    hRect = null;
+
+                    let dist = Infinity;
+                    let cx = u.cursor.left * pxRatio;
+                    let cy = u.cursor.top * pxRatio;
+
+                    // !!! https://github.com/timohausmann/quadtree-js/blob/master/docs/simple.html
+                    // Rewrite mouseOver based on this example
+
+                    // let overlaps =  qt.retrieve({x:cx, y:cy, width:1, height:1})
+                    
+                    // for(var i=0;i<overlaps.length;i=i+1) {
+                    //     overlaps[i].check = true;
+                    // }
+
+                    // OLD!
+                    qt.get(cx, cy, 1, 1, o => {
+                        if (pointWithin(cx, cy, o.x, o.y, o.x + o.w, o.y + o.h)) {
+                            let ocx = o.x + o.w / 2;
+                            let ocy = o.y + o.h / 2;
+
+                            let dx = ocx - cx;
+                            let dy = ocy - cy;
+
+                            let d = Math.sqrt(dx ** 2 + dy ** 2);
+
+                            // test against radius for actual hover
+                            if (d <= o.w / 2) {
+                                // only hover bbox with closest distance
+                                if (d <= dist) {
+                                    dist = d;
+                                    hRect = o;
+                                }
+                            }
+                        }
+                    });
+                }
+
+                return hRect && seriesIdx == hRect.sidx ? hRect.didx : null;
+            },
+            points: {
+                size: (u, seriesIdx) => {
+                    return hRect && seriesIdx == hRect.sidx ? hRect.w / devicePixelRatio : 0;
+                }
+            }
+        },
+        hooks: {
+            drawClear: [
+                u => {
+                    qt = qt || new Quadtree(0, 0, u.bbox.width, u.bbox.height);
+
+                    qt.clear();
+
+                    // force-clear the path cache to cause drawBars() to rebuild new quadtree
+                    u.series.forEach((s, i) => {
+                        if (i > 0)
+                            s._paths = null;
+                    });
+                },
+            ],
+        },
+        axes: [
+            {
+                label: "GDP",
+            },
+            {
+                label: "Income 1",
+            },
+            {
+                side: 1,
+                scale: 'y2',
+                stroke: "red",
+                label: "Income 2",
+                grid: {
+                    show: false,
+                },
+            },
+        ],
+        scales: {
+            x: {
+                time: false,
+            //	auto: false,
+            //	range: [0, 500],
+
+                // remove any scale padding, use raw data limits
+                range: guardedRange,
+            },
+            y: {
+            //	auto: false,
+            //	range: [0, 500],
+
+                // remove any scale padding, use raw data limits
+                range: guardedRange,
+            },
+            y2: {
+                dir: 1,
+                ori: 1,
+                range: guardedRange,
+            }
+        },
+        series: [
+            null,
+            {
+                facets: [
+                    {
+                        scale: 'x',
+                        auto: true,
+                    },
+                    {
+                        scale: 'y2',
+                        auto: true,
+                    }
+                ],
+                label: "Region A",
+                stroke: "red",
+                fill: "rgba(255,0,0,0.3)",
+                paths: drawPoints3,
+                values: legendValues,
+            },
+            {
+                facets: [
+                    {
+                        scale: 'x',
+                        auto: true,
+                    },
+                    {
+                        scale: 'y',
+                        auto: true,
+                    }
+                ],
+                label: "Region B",
+                stroke: "green",
+                fill: "rgba(0,255,0,0.3)",
+                paths: drawPoints3,
+                values: legendValues,
+            },
+            {
+                facets: [
+                    {
+                        scale: 'x',
+                        auto: true,
+                    },
+                    {
+                        scale: 'y',
+                        auto: true,
+                    }
+                ],
+                label: "Region C",
+                stroke: "blue",
+                fill: "rgba(0,0,255,0.3)",
+                paths: drawPoints3,
+                values: legendValues,
+            },
+            {
+                facets: [
+                    {
+                        scale: 'x',
+                        auto: true,
+                    },
+                    {
+                        scale: 'y',
+                        auto: true,
+                    }
+                ],
+                label: "Region E",
+                stroke: "orange",
+                fill: "rgba(255,128,0,0.3)",
+                paths: drawPoints3,
+                values: legendValues,
+            },
+        ],
+    };
+
+    let u2 = new uPlot(opts2, data2, document.body);
+</script>
+
+{#if data != null}
+    <div bind:this={plotWrapper}/>
+{:else}
+    <Card class="mx-4" body color="warning">Cannot render scatter: No data!</Card>
+{/if}
\ No newline at end of file

From c1b5134627d634e9e75cd675f3d7d3144e93c7c6 Mon Sep 17 00:00:00 2001
From: Christoph Kluge <christoph.kluge@fau.de>
Date: Mon, 4 Sep 2023 10:37:20 +0200
Subject: [PATCH 04/14] Reduce uplot example code to common denominator

---
 web/frontend/src/Status.root.svelte         |   8 +-
 web/frontend/src/plots/Rooflineuplot.svelte | 235 ++++++++++++--------
 2 files changed, 151 insertions(+), 92 deletions(-)

diff --git a/web/frontend/src/Status.root.svelte b/web/frontend/src/Status.root.svelte
index 27eb55e..1559121 100644
--- a/web/frontend/src/Status.root.svelte
+++ b/web/frontend/src/Status.root.svelte
@@ -33,7 +33,8 @@
 
     let plotWidths = [],
         colWidth1 = 0,
-        colWidth2;
+        colWidth2 = 0,
+        colWidth3 = 0;
     let from = new Date(Date.now() - 5 * 60 * 1000),
         to = new Date(Date.now());
     const topOptions = [
@@ -668,7 +669,10 @@
     </Row>
     <Row>
         <Col>
-            <Rooflineuplot/>
+            <div bind:clientWidth={colWidth3}>
+                <Rooflineuplot
+                    width={colWidth3 - 25}
+                />
         </Col>
     </Row>
 {/if}
diff --git a/web/frontend/src/plots/Rooflineuplot.svelte b/web/frontend/src/plots/Rooflineuplot.svelte
index 11c1a44..e1f9c3c 100644
--- a/web/frontend/src/plots/Rooflineuplot.svelte
+++ b/web/frontend/src/plots/Rooflineuplot.svelte
@@ -4,10 +4,28 @@
     import { onMount, onDestroy } from 'svelte'
     import { Card } from 'sveltestrap'
 
+    export let flopsAny = null
+    export let memBw = null
+    export let cluster = null
+    export let maxY = null
+    export let width = 500
+    export let height = 300
+    export let tiles = null
+    export let colorDots = true
+    export let showTime = true
+    export let data = null
+
     let plotWrapper = null
     let uplot = null
     let timeoutId = null
 
+    // Three Render-Cases:
+    // #1 Single-Job Roofline -> Has Time-Information: Use data, allow colorDots && showTime
+    // #2 MultiNode Roofline - > Has No Time-Information: Transform from nodeData, only "IST"-state of nodes, no timeInfo
+    // #3 Multi-Job Roofline -> No Time Information? -> Use Backend-Prepared "Tiles" with increasing occupancy for stronger values
+
+    // Start Demo Data
+
     function randInt(min, max) {
         return Math.floor(Math.random() * (max - min + 1)) + min;
     }
@@ -27,21 +45,52 @@
         return arr;
     }
 
-    let points = 10000;
-    let series = 5;
+    let points = 100;
+    let series = 2;
+    let time = []
 
-    console.time("prep");
+    for (let i = 0; i < points; ++i)
+                time[i] = i;
 
-    let data = filledArr(series, v => [
-        filledArr(points, i => randInt(0,500)),
-        filledArr(points, i => randInt(0,500)),
+    data = filledArr(series, v => [
+        filledArr(points, i => randInt(0,200)),
+        filledArr(points, i => randInt(0,200)),
     ]);
 
     data[0] = null;
 
-    console.timeEnd("prep");
+    console.log("Data: ", data);
 
-    console.log(data);
+    // End Demo Data
+
+    // Helpers
+
+    function getGradientR(x) {
+        if (x < 0.5) return 0
+        if (x > 0.75) return 255
+        x = (x - 0.5) * 4.0
+        return Math.floor(x * 255.0)
+    }
+
+    function getGradientG(x) {
+        if (x > 0.25 && x < 0.75) return 255
+        if (x < 0.25) x = x * 4.0
+        else          x = 1.0 - (x - 0.75) * 4.0
+        return Math.floor(x * 255.0)
+    }
+
+    function getGradientB(x) {
+        if (x < 0.25) return 255
+        if (x > 0.5) return 0
+        x = 1.0 - (x - 0.25) * 4.0
+        return Math.floor(x * 255.0)
+    }
+
+    function getRGB(c) {
+        return `rgb(${getGradientR(c)}, ${getGradientG(c)}, ${getGradientB(c)})`
+    }
+
+    // End Helpers
 
     const drawPoints = (u, seriesIdx, idx0, idx1) => {
         const size = 5 * devicePixelRatio;
@@ -53,8 +102,6 @@
 
             let deg360 = 2 * Math.PI;
 
-            console.time("points");
-
             let p = new Path2D();
 
             for (let i = 0; i < d[0].length; i++) {
@@ -70,20 +117,12 @@
                 }
             }
 
-            console.timeEnd("points1");
-
             u.ctx.fill(p);
         });
 
         return null;
     };
 
-    let pxRatio;
-
-    function setPxRatio() {
-        pxRatio = devicePixelRatio;
-    }
-
     function guardedRange(u, min, max) {
         if (max == min) {
             if (min == null) {
@@ -100,83 +139,99 @@
         return [min, max];
     }
 
-    setPxRatio();
-
-    window.addEventListener('dppxchange', setPxRatio);
-
-    const opts = {
-        title: "Scatter Plot",
-        mode: 2,
-        width: 1920,
-        height: 600,
-        legend: {
-            live: false,
-        },
-        hooks: {
-            drawClear: [
-                u => {
-                    u.series.forEach((s, i) => {
-                        if (i > 0)
-                            s._paths = null;
-                    });
+    function render() {
+        const opts = {
+            title: "",
+            mode: 2,
+            width: width,
+            height: height,
+            legend: {
+                live: false,
+            },
+            hooks: {
+                drawClear: [
+                    u => {
+                        u.series.forEach((s, i) => {
+                            if (i > 0)
+                                s._paths = null;
+                        });
+                    },
+                ],
+            },
+            scales: {
+                x: {
+                    time: false,
+                //	auto: false,
+                //	range: [0, 500],
+                    // remove any scale padding, use raw data limits
+                    range: guardedRange,
                 },
+                y: {
+                //	auto: false,
+                //	range: [0, 500],
+                    // remove any scale padding, use raw data limits
+                    range: guardedRange,
+                },
+            },
+            series: [
+                {
+                    /*
+                    stroke: "red",
+                    fill: "rgba(255,0,0,0.1)",
+                    paths: (u, seriesIdx, idx0, idx1) => {
+                        uPlot.orient(u, seriesIdx, (series, dataX, dataY, scaleX, scaleY, valToPosX, valToPosY, xOff, yOff, xDim, yDim) => {
+                            let d = u.data[seriesIdx];
+
+                            console.log(d);
+                        });
+
+                        return null;
+                    },
+                    */
+                },
+                {
+                    stroke: (u, seriesIdx) => {
+                        for (let i = 0; i < points; ++i) { return getRGB(time[i]) }
+					},
+                    fill: (u, seriesIdx) => {
+                        for (let i = 0; i < points; ++i) { return getRGB(time[i]) }
+					},
+                    paths: drawPoints,
+                }
             ],
-        },
-        scales: {
-            x: {
-                time: false,
-            //	auto: false,
-            //	range: [0, 500],
-                // remove any scale padding, use raw data limits
-                range: guardedRange,
-            },
-            y: {
-            //	auto: false,
-            //	range: [0, 500],
-                // remove any scale padding, use raw data limits
-                range: guardedRange,
-            },
-        },
-        series: [
-            {
-                /*
-                stroke: "red",
-                fill: "rgba(255,0,0,0.1)",
-                paths: (u, seriesIdx, idx0, idx1) => {
-                    uPlot.orient(u, seriesIdx, (series, dataX, dataY, scaleX, scaleY, valToPosX, valToPosY, xOff, yOff, xDim, yDim) => {
-                        let d = u.data[seriesIdx];
+        };
 
-                        console.log(d);
-                    });
+        uplot = new uPlot(opts, data, plotWrapper);
+    }
 
-                    return null;
-                },
-                */
-            },
-            {
-                stroke: "red",
-                fill: "rgba(255,0,0,0.1)",
-                paths: drawPoints,
-            },
-            {
-                stroke: "green",
-                fill: "rgba(0,255,0,0.1)",
-                paths: drawPoints,
-            },
-            {
-                stroke: "blue",
-                fill: "rgba(0,0,255,0.1)",
-                paths: drawPoints,
-            },
-            {
-                stroke: "magenta",
-                fill: "rgba(0,0,255,0.1)",
-                paths: drawPoints,
-            },
-        ],
-    };
+    // Copied from Histogram
+    
+    onMount(() => {
+        render()
+    })
 
-    let u = new uPlot(opts, data, document.body);
+    onDestroy(() => {
+        if (uplot)
+            uplot.destroy()
+
+        if (timeoutId != null)
+            clearTimeout(timeoutId)
+    })
+
+    function sizeChanged() {
+        if (timeoutId != null)
+            clearTimeout(timeoutId)
+
+        timeoutId = setTimeout(() => {
+            timeoutId = null
+            if (uplot)
+                uplot.destroy()
+
+            render()
+        }, 200)
+    }
+
+    $: sizeChanged(width, height)
 
 </script>
 

From 8d7f942de46a96facd9118e861a01c5ec61828f8 Mon Sep 17 00:00:00 2001
From: Christoph Kluge <christoph.kluge@fau.de>
Date: Mon, 4 Sep 2023 12:53:38 +0200
Subject: [PATCH 05/14] Render loglog scatter, fix data format, start draw

---
 web/frontend/src/Status.root.svelte         |   1 +
 web/frontend/src/plots/Rooflineuplot.svelte | 259 ++++++++++++++------
 2 files changed, 190 insertions(+), 70 deletions(-)

diff --git a/web/frontend/src/Status.root.svelte b/web/frontend/src/Status.root.svelte
index 1559121..df5eb71 100644
--- a/web/frontend/src/Status.root.svelte
+++ b/web/frontend/src/Status.root.svelte
@@ -672,6 +672,7 @@
             <div bind:clientWidth={colWidth3}>
                 <Rooflineuplot
                     width={colWidth3 - 25}
+                    cluster={$initq.data.clusters.find((c) => c.name == cluster).subClusters[0]}
                 />
         </Col>
     </Row>
diff --git a/web/frontend/src/plots/Rooflineuplot.svelte b/web/frontend/src/plots/Rooflineuplot.svelte
index e1f9c3c..4defe68 100644
--- a/web/frontend/src/plots/Rooflineuplot.svelte
+++ b/web/frontend/src/plots/Rooflineuplot.svelte
@@ -7,7 +7,7 @@
     export let flopsAny = null
     export let memBw = null
     export let cluster = null
-    export let maxY = null
+    export let defaultMaxY = null
     export let width = 500
     export let height = 300
     export let tiles = null
@@ -19,6 +19,11 @@
     let uplot = null
     let timeoutId = null
 
+    const paddingLeft = 40,
+          paddingRight = 10,
+          paddingTop = 10,
+          paddingBottom = 50
+
     // Three Render-Cases:
     // #1 Single-Job Roofline -> Has Time-Information: Use data, allow colorDots && showTime
     // #2 MultiNode Roofline - > Has No Time-Information: Transform from nodeData, only "IST"-state of nodes, no timeInfo
@@ -30,6 +35,14 @@
         return Math.floor(Math.random() * (max - min + 1)) + min;
     }
 
+    function randFloat(min, max) {
+        return roundTwo(((Math.random() * (max - min + 1)) + min) / randInt(1, 500));
+    }
+
+    function roundTwo(num) {
+       return  Math.round((num + Number.EPSILON) * 100) / 100
+    }
+
     function filledArr(len, val) {
         let arr = Array(len);
 
@@ -45,26 +58,42 @@
         return arr;
     }
 
-    let points = 100;
-    let series = 2;
-    let time = []
+    let points = 1000;
 
-    for (let i = 0; i < points; ++i)
-                time[i] = i;
-
-    data = filledArr(series, v => [
-        filledArr(points, i => randInt(0,200)),
-        filledArr(points, i => randInt(0,200)),
-    ]);
-
-    data[0] = null;
+    data       = [null, [], []] // Null-Axis required for scatter
+    data[1][0] = filledArr(points, i => randFloat(1,5000)) // Intensity
+    data[1][1] = filledArr(points, i => randFloat(1,5000)) // Performance
+    data[2]    = filledArr(points, i => 0) // Time Information (Optional)
 
+    console.log("Subcluster: ", cluster);
     console.log("Data: ", data);
 
     // End Demo Data
 
     // Helpers
 
+    const [minX, maxX, minY, maxY] = [0.01, 1000, 1., cluster?.flopRateSimd?.value || defaultMaxY]
+
+    const w = width - paddingLeft - paddingRight
+
+    const h = height - paddingTop - paddingBottom
+
+    const [log10minX, log10maxX, log10minY, log10maxY] =
+            [Math.log10(minX), Math.log10(maxX), Math.log10(minY), Math.log10(maxY)]
+
+    const getCanvasX = (x) => {
+        x = Math.log10(x)
+        x -= log10minX; x /= (log10maxX - log10minX)
+        return Math.round((x * w) + paddingLeft)
+    }
+
+    const getCanvasY = (y) => {
+        y = Math.log10(y)
+        y -= log10minY
+        y /= (log10maxY - log10minY)
+        return Math.round((h - y * h) + paddingTop)
+    }
+
     function getGradientR(x) {
         if (x < 0.5) return 0
         if (x > 0.75) return 255
@@ -90,6 +119,78 @@
         return `rgb(${getGradientR(c)}, ${getGradientG(c)}, ${getGradientB(c)})`
     }
 
+    function lineIntersect(x1, y1, x2, y2, x3, y3, x4, y4) {
+        let l = (y4 - y3) * (x2 - x1) - (x4 - x3) * (y2 - y1)
+        let a = ((x4 - x3) * (y1 - y3) - (y4 - y3) * (x1 - x3)) / l
+        return {
+            x: x1 + a * (x2 - x1),
+            y: y1 + a * (y2 - y1)
+        }
+    }
+
+    function transformData(flopsAny, memBw, colorDots) { // Uses Metric Object
+        const nodes = flopsAny.series.length
+        const timesteps = flopsAny.series[0].data.length
+
+        /* c will contain values from 0 to 1 representing the time */
+        const x = [], y = [], c = []
+
+        if (flopsAny && memBw) {
+            for (let i = 0; i < nodes; i++) {
+                const flopsData = flopsAny.series[i].data
+                const memBwData = memBw.series[i].data
+                for (let j = 0; j < timesteps; j++) {
+                    const f = flopsData[j], m = memBwData[j]
+                    const intensity = f / m
+                    if (Number.isNaN(intensity) || !Number.isFinite(intensity))
+                        continue
+
+                    x.push(intensity)
+                    y.push(f)
+                    c.push(colorDots ? j / timesteps : 0)
+                }
+            }
+        } else {
+            console.warn("transformData: metrics for 'mem_bw' and/or 'flops_any' missing!")
+        }
+
+        return {
+            x, y, c,
+            xLabel: 'Intensity [FLOPS/byte]',
+            yLabel: 'Performance [GFLOPS]'
+        }
+    }
+
+    // Return something to be plotted. The argument shall be the result of the
+    // `nodeMetrics` GraphQL query.
+    export function transformPerNodeData(nodes) {
+        const x = [], y = [], c = []
+        for (let node of nodes) {
+            let flopsAny = node.metrics.find(m => m.name == 'flops_any' && m.scope == 'node')?.metric
+            let memBw    = node.metrics.find(m => m.name == 'mem_bw'    && m.scope == 'node')?.metric
+            if (!flopsAny || !memBw) {
+                console.warn("transformPerNodeData: metrics for 'mem_bw' and/or 'flops_any' missing!")
+                continue
+            }
+
+            let flopsData = flopsAny.series[0].data, memBwData = memBw.series[0].data
+            const f = flopsData[flopsData.length - 1], m = memBwData[flopsData.length - 1]
+            const intensity = f / m
+            if (Number.isNaN(intensity) || !Number.isFinite(intensity))
+                continue
+
+            x.push(intensity)
+            y.push(f)
+            c.push(0)
+        }
+
+        return {
+            x, y, c,
+            xLabel: 'Intensity [FLOPS/byte]',
+            yLabel: 'Performance [GFLOPS]'
+        }
+    }
+
     // End Helpers
 
     const drawPoints = (u, seriesIdx, idx0, idx1) => {
@@ -123,22 +224,6 @@
         return null;
     };
 
-    function guardedRange(u, min, max) {
-        if (max == min) {
-            if (min == null) {
-                min = 0;
-                max = 100;
-            }
-            else {
-                let delta = Math.abs(max) || 100;
-                max += delta;
-                min -= delta;
-            }
-        }
-
-        return [min, max];
-    }
-
     function render() {
         const opts = {
             title: "",
@@ -146,8 +231,39 @@
             width: width,
             height: height,
             legend: {
-                live: false,
+                show: false
             },
+            axes: [
+                {
+                    label: 'Intensity [FLOPS/Byte]'
+                },
+                {
+                    label: 'Performace [GFLOPS]'
+                }
+            ],
+            scales: {
+                x: {
+                    time: false,
+                    distr: 3,
+					log: 10,
+                },
+                y: {
+                    distr: 3,
+					log: 10,
+                },
+            },
+            series: [
+                {},
+                {
+                    stroke: (u, seriesIdx) => {
+                        for (let i = 0; i < points; ++i) { return getRGB(data[2][i]) }
+					},
+                    fill: (u, seriesIdx) => {
+                        for (let i = 0; i < points; ++i) { return getRGB(data[2][i]) }
+					},
+                    paths: drawPoints,
+                }
+            ],
             hooks: {
                 drawClear: [
                     u => {
@@ -157,48 +273,51 @@
                         });
                     },
                 ],
-            },
-            scales: {
-                x: {
-                    time: false,
-                //	auto: false,
-                //	range: [0, 500],
-                    // remove any scale padding, use raw data limits
-                    range: guardedRange,
-                },
-                y: {
-                //	auto: false,
-                //	range: [0, 500],
-                    // remove any scale padding, use raw data limits
-                    range: guardedRange,
-                },
-            },
-            series: [
-                {
-                    /*
-                    stroke: "red",
-                    fill: "rgba(255,0,0,0.1)",
-                    paths: (u, seriesIdx, idx0, idx1) => {
-                        uPlot.orient(u, seriesIdx, (series, dataX, dataY, scaleX, scaleY, valToPosX, valToPosY, xOff, yOff, xDim, yDim) => {
-                            let d = u.data[seriesIdx];
+                draw: [
+                        u => { // draw roofs
+                        u.ctx.strokeStyle = 'black'
+                        u.ctx.lineWidth = 2
+                        u.ctx.beginPath()
+                        if (cluster != null) {
+                            const ycut = 0.01 * cluster.memoryBandwidth.value
+                            const scalarKnee = (cluster.flopRateScalar.value - ycut) / cluster.memoryBandwidth.value
+                            const simdKnee = (cluster.flopRateSimd.value - ycut) / cluster.memoryBandwidth.value
+                            const scalarKneeX = getCanvasX(scalarKnee),
+                                simdKneeX = getCanvasX(simdKnee),
+                                flopRateScalarY = getCanvasY(cluster.flopRateScalar.value),
+                                flopRateSimdY = getCanvasY(cluster.flopRateSimd.value)
 
-                            console.log(d);
-                        });
+                            if (scalarKneeX < width - paddingRight) {
+                                u.ctx.moveTo(scalarKneeX, flopRateScalarY)
+                                u.ctx.lineTo(width - paddingRight, flopRateScalarY)
+                            }
 
-                        return null;
-                    },
-                    */
-                },
-                {
-                    stroke: (u, seriesIdx) => {
-                        for (let i = 0; i < points; ++i) { return getRGB(time[i]) }
-					},
-                    fill: (u, seriesIdx) => {
-                        for (let i = 0; i < points; ++i) { return getRGB(time[i]) }
-					},
-                    paths: drawPoints,
-                }
-            ],
+                            if (simdKneeX < width - paddingRight) {
+                                u.ctx.moveTo(simdKneeX, flopRateSimdY)
+                                u.ctx.lineTo(width - paddingRight, flopRateSimdY)
+                            }
+
+                            let x1 = getCanvasX(0.01),
+                                y1 = getCanvasY(ycut),
+                                x2 = getCanvasX(simdKnee),
+                                y2 = flopRateSimdY
+
+                            let xAxisIntersect = lineIntersect(
+                                x1, y1, x2, y2,
+                                0, height - paddingBottom, width, height - paddingBottom)
+
+                            if (xAxisIntersect.x > x1) {
+                                x1 = xAxisIntersect.x
+                                y1 = xAxisIntersect.y
+                            }
+
+                            u.ctx.moveTo(x1, y1)
+                            u.ctx.lineTo(x2, y2)
+                        }
+                        u.ctx.stroke()
+                    }
+                ]
+            },
         };
 
         uplot = new uPlot(opts, data, plotWrapper);

From b2b4beaeaa16d4059a4a6942059ad969b30b4c84 Mon Sep 17 00:00:00 2001
From: Christoph Kluge <christoph.kluge@fau.de>
Date: Mon, 4 Sep 2023 16:31:47 +0200
Subject: [PATCH 06/14] Finish direct data render roofplot demo

---
 web/frontend/src/plots/Rooflineuplot.svelte | 92 +++++++++------------
 1 file changed, 40 insertions(+), 52 deletions(-)

diff --git a/web/frontend/src/plots/Rooflineuplot.svelte b/web/frontend/src/plots/Rooflineuplot.svelte
index 4defe68..6c1c54d 100644
--- a/web/frontend/src/plots/Rooflineuplot.svelte
+++ b/web/frontend/src/plots/Rooflineuplot.svelte
@@ -6,8 +6,8 @@
 
     export let flopsAny = null
     export let memBw = null
+    export let maxY = null
     export let cluster = null
-    export let defaultMaxY = null
     export let width = 500
     export let height = 300
     export let tiles = null
@@ -19,11 +19,6 @@
     let uplot = null
     let timeoutId = null
 
-    const paddingLeft = 40,
-          paddingRight = 10,
-          paddingTop = 10,
-          paddingBottom = 50
-
     // Three Render-Cases:
     // #1 Single-Job Roofline -> Has Time-Information: Use data, allow colorDots && showTime
     // #2 MultiNode Roofline - > Has No Time-Information: Transform from nodeData, only "IST"-state of nodes, no timeInfo
@@ -65,35 +60,10 @@
     data[1][1] = filledArr(points, i => randFloat(1,5000)) // Performance
     data[2]    = filledArr(points, i => 0) // Time Information (Optional)
 
-    console.log("Subcluster: ", cluster);
-    console.log("Data: ", data);
-
     // End Demo Data
 
     // Helpers
 
-    const [minX, maxX, minY, maxY] = [0.01, 1000, 1., cluster?.flopRateSimd?.value || defaultMaxY]
-
-    const w = width - paddingLeft - paddingRight
-
-    const h = height - paddingTop - paddingBottom
-
-    const [log10minX, log10maxX, log10minY, log10maxY] =
-            [Math.log10(minX), Math.log10(maxX), Math.log10(minY), Math.log10(maxY)]
-
-    const getCanvasX = (x) => {
-        x = Math.log10(x)
-        x -= log10minX; x /= (log10maxX - log10minX)
-        return Math.round((x * w) + paddingLeft)
-    }
-
-    const getCanvasY = (y) => {
-        y = Math.log10(y)
-        y -= log10minY
-        y /= (log10maxY - log10minY)
-        return Math.round((h - y * h) + paddingTop)
-    }
-
     function getGradientR(x) {
         if (x < 0.5) return 0
         if (x > 0.75) return 255
@@ -119,6 +89,10 @@
         return `rgb(${getGradientR(c)}, ${getGradientG(c)}, ${getGradientB(c)})`
     }
 
+    function nearestThousand (num) {
+        return Math.ceil(num/1000) * 1000
+    }
+
     function lineIntersect(x1, y1, x2, y2, x3, y3, x4, y4) {
         let l = (y4 - y3) * (x2 - x1) - (x4 - x3) * (y2 - y1)
         let a = ((x4 - x3) * (y1 - y3) - (y4 - y3) * (x1 - x3)) / l
@@ -233,6 +207,7 @@
             legend: {
                 show: false
             },
+            cursor: { drag: { x: false, y: false } },
             axes: [
                 {
                     label: 'Intensity [FLOPS/Byte]'
@@ -244,12 +219,14 @@
             scales: {
                 x: {
                     time: false,
-                    distr: 3,
-					log: 10,
+                    range: [0.01, 1000],
+                    distr: 3, // Render as log
+					log: 10, // log exp
                 },
                 y: {
-                    distr: 3,
-					log: 10,
+                    range: [1.0, nearestThousand(cluster.flopRateSimd.value || maxY)],
+                    distr: 3, // Render as log
+					log: 10, // log exp
                 },
             },
             series: [
@@ -274,47 +251,58 @@
                     },
                 ],
                 draw: [
-                        u => { // draw roofs
-                        u.ctx.strokeStyle = 'black'
-                        u.ctx.lineWidth = 2
-                        u.ctx.beginPath()
+                    u => { // draw roofs when cluster set
                         if (cluster != null) {
+                            const padding = u._padding // [top, right, bottom, left]
+
+                            u.ctx.strokeStyle = 'black'
+                            u.ctx.lineWidth = 2
+                            u.ctx.beginPath()
+
                             const ycut = 0.01 * cluster.memoryBandwidth.value
                             const scalarKnee = (cluster.flopRateScalar.value - ycut) / cluster.memoryBandwidth.value
                             const simdKnee = (cluster.flopRateSimd.value - ycut) / cluster.memoryBandwidth.value
-                            const scalarKneeX = getCanvasX(scalarKnee),
-                                simdKneeX = getCanvasX(simdKnee),
-                                flopRateScalarY = getCanvasY(cluster.flopRateScalar.value),
-                                flopRateSimdY = getCanvasY(cluster.flopRateSimd.value)
+                            const scalarKneeX = u.valToPos(scalarKnee, 'x', true), // Value, axis, toCanvasPixels
+                                simdKneeX = u.valToPos(simdKnee, 'x', true),
+                                flopRateScalarY = u.valToPos(cluster.flopRateScalar.value, 'y', true),
+                                flopRateSimdY = u.valToPos(cluster.flopRateSimd.value, 'y', true)
 
-                            if (scalarKneeX < width - paddingRight) {
+                            if (scalarKneeX < width - padding[1]) { // Top horizontal roofline
                                 u.ctx.moveTo(scalarKneeX, flopRateScalarY)
-                                u.ctx.lineTo(width - paddingRight, flopRateScalarY)
+                                u.ctx.lineTo(width - padding[1], flopRateScalarY)
                             }
 
-                            if (simdKneeX < width - paddingRight) {
+                            if (simdKneeX < width - padding[1]) { // Lower horitontal roofline
                                 u.ctx.moveTo(simdKneeX, flopRateSimdY)
-                                u.ctx.lineTo(width - paddingRight, flopRateSimdY)
+                                u.ctx.lineTo(width - padding[1], flopRateSimdY)
                             }
 
-                            let x1 = getCanvasX(0.01),
-                                y1 = getCanvasY(ycut),
-                                x2 = getCanvasX(simdKnee),
+                            let x1 = u.valToPos(0.01, 'x', true),
+                                y1 = u.valToPos(ycut, 'y', true)
+                                
+                            let x2 = u.valToPos(simdKnee, 'x', true),
                                 y2 = flopRateSimdY
 
                             let xAxisIntersect = lineIntersect(
                                 x1, y1, x2, y2,
-                                0, height - paddingBottom, width, height - paddingBottom)
+                                u.valToPos(0.01, 'x', true), u.valToPos(1.0, 'y', true),
+                                u.valToPos(1000, 'x', true), u.valToPos(1.0, 'y', true) // X-Axis Coords
+                            )
+
 
                             if (xAxisIntersect.x > x1) {
                                 x1 = xAxisIntersect.x
                                 y1 = xAxisIntersect.y
                             }
 
+                            // Diagonal
                             u.ctx.moveTo(x1, y1)
                             u.ctx.lineTo(x2, y2)
+
+                            u.ctx.stroke()
+                            // Reset lineWidth
+                            u.ctx.lineWidth = 0.15
                         }
-                        u.ctx.stroke()
                     }
                 ]
             },

From f235b1a99c0d03f856fb0aff983592fee8c09244 Mon Sep 17 00:00:00 2001
From: Christoph Kluge <christoph.kluge@fau.de>
Date: Tue, 5 Sep 2023 09:19:43 +0200
Subject: [PATCH 07/14] Allow render of time information as color gradient

---
 web/frontend/src/plots/Rooflineuplot.svelte | 87 ++++++++++++---------
 1 file changed, 49 insertions(+), 38 deletions(-)

diff --git a/web/frontend/src/plots/Rooflineuplot.svelte b/web/frontend/src/plots/Rooflineuplot.svelte
index 6c1c54d..01ed489 100644
--- a/web/frontend/src/plots/Rooflineuplot.svelte
+++ b/web/frontend/src/plots/Rooflineuplot.svelte
@@ -10,9 +10,7 @@
     export let cluster = null
     export let width = 500
     export let height = 300
-    export let tiles = null
-    export let colorDots = true
-    export let showTime = true
+    export let renderTime = false
     export let data = null
 
     let plotWrapper = null
@@ -38,16 +36,20 @@
        return  Math.round((num + Number.EPSILON) * 100) / 100
     }
 
-    function filledArr(len, val) {
+    function filledArr(len, val, time) {
         let arr = Array(len);
 
         if (typeof val == "function") {
             for (let i = 0; i < len; ++i)
                 arr[i] = val(i);
         }
+        else if (time) {
+            for (let i = 0; i < len; ++i)
+                arr[i] = i / 1000;
+        }
         else {
             for (let i = 0; i < len; ++i)
-                arr[i] = val;
+                arr[i] = i;
         }
 
         return arr;
@@ -55,10 +57,12 @@
 
     let points = 1000;
 
-    data       = [null, [], []] // Null-Axis required for scatter
-    data[1][0] = filledArr(points, i => randFloat(1,5000)) // Intensity
-    data[1][1] = filledArr(points, i => randFloat(1,5000)) // Performance
-    data[2]    = filledArr(points, i => 0) // Time Information (Optional)
+    data       = [null, []] // Null-Axis required for scatter
+    data[1][0] = filledArr(points, i => randFloat(1,5000), false) // Intensity
+    data[1][1] = filledArr(points, i => randFloat(1,5000), false) // Performance
+    // data[1][0] = filledArr(points, 0, false) // Intensity
+    // data[1][1] = filledArr(points, 0, false) // Performance
+    data[2]    = filledArr(points, 0, true) // Time Information (Optional)
 
     // End Demo Data
 
@@ -167,22 +171,18 @@
 
     // End Helpers
 
-    const drawPoints = (u, seriesIdx, idx0, idx1) => {
+    const drawColorPoints = (u, seriesIdx, idx0, idx1) => {
         const size = 5 * devicePixelRatio;
 
         uPlot.orient(u, seriesIdx, (series, dataX, dataY, scaleX, scaleY, valToPosX, valToPosY, xOff, yOff, xDim, yDim, moveTo, lineTo, rect, arc) => {
             let d = u.data[seriesIdx];
-
-            u.ctx.fillStyle = series.stroke();
-
             let deg360 = 2 * Math.PI;
-
-            let p = new Path2D();
-
             for (let i = 0; i < d[0].length; i++) {
+                let p    = new Path2D();
                 let xVal = d[0][i];
                 let yVal = d[1][i];
-
+                u.ctx.strokeStyle = getRGB(u.data[2][i])
+                u.ctx.fillStyle   = getRGB(u.data[2][i])
                 if (xVal >= scaleX.min && xVal <= scaleX.max && yVal >= scaleY.min && yVal <= scaleY.max) {
                     let cx = valToPosX(xVal, scaleX, xDim, xOff);
                     let cy = valToPosY(yVal, scaleY, yDim, yOff);
@@ -190,14 +190,37 @@
                     p.moveTo(cx + size/2, cy);
                     arc(p, cx, cy, size/2, 0, deg360);
                 }
+                u.ctx.fill(p);
             }
-
-            u.ctx.fill(p);
         });
 
         return null;
     };
 
+    const drawPoints = (u, seriesIdx, idx0, idx1) => {
+        const size = 5 * devicePixelRatio;
+
+        uPlot.orient(u, seriesIdx, (series, dataX, dataY, scaleX, scaleY, valToPosX, valToPosY, xOff, yOff, xDim, yDim, moveTo, lineTo, rect, arc) => {
+            let d = u.data[seriesIdx];
+            u.ctx.strokeStyle = getRGB(0);
+            u.ctx.fillStyle   = getRGB(0);
+            let deg360 = 2 * Math.PI;
+            let p      = new Path2D();
+            for (let i = 0; i < d[0].length; i++) {
+                let xVal = d[0][i];
+                let yVal = d[1][i];
+                if (xVal >= scaleX.min && xVal <= scaleX.max && yVal >= scaleY.min && yVal <= scaleY.max) {
+                    let cx = valToPosX(xVal, scaleX, xDim, xOff);
+                    let cy = valToPosY(yVal, scaleY, yDim, yOff);
+                    p.moveTo(cx + size/2, cy);
+                    arc(p, cx, cy, size/2, 0, deg360);
+                }
+            }
+            u.ctx.fill(p);
+        });
+        return null;
+    };
+
     function render() {
         const opts = {
             title: "",
@@ -209,12 +232,8 @@
             },
             cursor: { drag: { x: false, y: false } },
             axes: [
-                {
-                    label: 'Intensity [FLOPS/Byte]'
-                },
-                {
-                    label: 'Performace [GFLOPS]'
-                }
+                { label: 'Intensity [FLOPS/Byte]' },
+                { label: 'Performace [GFLOPS]' }
             ],
             scales: {
                 x: {
@@ -231,15 +250,7 @@
             },
             series: [
                 {},
-                {
-                    stroke: (u, seriesIdx) => {
-                        for (let i = 0; i < points; ++i) { return getRGB(data[2][i]) }
-					},
-                    fill: (u, seriesIdx) => {
-                        for (let i = 0; i < points; ++i) { return getRGB(data[2][i]) }
-					},
-                    paths: drawPoints,
-                }
+                { paths: renderTime ? drawColorPoints : drawPoints }
             ],
             hooks: {
                 drawClear: [
@@ -252,6 +263,7 @@
                 ],
                 draw: [
                     u => { // draw roofs when cluster set
+                        // console.log(u)
                         if (cluster != null) {
                             const padding = u._padding // [top, right, bottom, left]
 
@@ -285,11 +297,10 @@
 
                             let xAxisIntersect = lineIntersect(
                                 x1, y1, x2, y2,
-                                u.valToPos(0.01, 'x', true), u.valToPos(1.0, 'y', true),
-                                u.valToPos(1000, 'x', true), u.valToPos(1.0, 'y', true) // X-Axis Coords
+                                u.valToPos(0.01, 'x', true), u.valToPos(1.0, 'y', true), // X-Axis Start Coords
+                                u.valToPos(1000, 'x', true), u.valToPos(1.0, 'y', true)  // X-Axis End Coords
                             )
 
-
                             if (xAxisIntersect.x > x1) {
                                 x1 = xAxisIntersect.x
                                 y1 = xAxisIntersect.y
@@ -300,7 +311,7 @@
                             u.ctx.lineTo(x2, y2)
 
                             u.ctx.stroke()
-                            // Reset lineWidth
+                            // Reset grid lineWidth
                             u.ctx.lineWidth = 0.15
                         }
                     }

From b449b77b959818de802d3e3d3ca5a8e16eb1c199 Mon Sep 17 00:00:00 2001
From: Christoph Kluge <christoph.kluge@fau.de>
Date: Tue, 5 Sep 2023 10:01:34 +0200
Subject: [PATCH 08/14] Rename dev component, separate rooflineHeatmap

- moved roofline helper functions to utils
---
 web/frontend/src/Analysis.root.svelte         |   4 +-
 web/frontend/src/Status.root.svelte           |  19 +-
 web/frontend/src/plots/Roofline.svelte        | 519 ++++++++----------
 web/frontend/src/plots/RooflineHeatmap.svelte | 234 ++++++++
 web/frontend/src/plots/Rooflineuplot.svelte   | 360 ------------
 web/frontend/src/utils.js                     |  63 +++
 6 files changed, 532 insertions(+), 667 deletions(-)
 create mode 100644 web/frontend/src/plots/RooflineHeatmap.svelte
 delete mode 100644 web/frontend/src/plots/Rooflineuplot.svelte

diff --git a/web/frontend/src/Analysis.root.svelte b/web/frontend/src/Analysis.root.svelte
index 06219b9..aa4ae37 100644
--- a/web/frontend/src/Analysis.root.svelte
+++ b/web/frontend/src/Analysis.root.svelte
@@ -10,7 +10,7 @@
     import { binsFromFootprint } from './utils.js'
     import ScatterPlot from './plots/Scatter.svelte'
     import PlotTable from './PlotTable.svelte'
-    import Roofline from './plots/Roofline.svelte'
+    import RooflineHeatmap from './plots/RooflineHeatmap.svelte'
 
     const { query: initq } = init()
 
@@ -315,7 +315,7 @@
             {:else if $rooflineQuery.data && cluster}
                 <div bind:clientWidth={colWidth2}>
                 {#key $rooflineQuery.data}
-                    <Roofline
+                    <RooflineHeatmap
                         width={colWidth2} height={300}
                         tiles={$rooflineQuery.data.rooflineHeatmap}
                         cluster={cluster.subClusters.length == 1 ? cluster.subClusters[0] : null}
diff --git a/web/frontend/src/Status.root.svelte b/web/frontend/src/Status.root.svelte
index df5eb71..8e162ab 100644
--- a/web/frontend/src/Status.root.svelte
+++ b/web/frontend/src/Status.root.svelte
@@ -1,8 +1,7 @@
 <script>
     import { getContext } from "svelte";
     import Refresher from "./joblist/Refresher.svelte";
-    import Roofline, { transformPerNodeData } from "./plots/Roofline.svelte";
-    import Rooflineuplot from "./plots/Rooflineuplot.svelte";
+    import Roofline from "./plots/Roofline.svelte";
     import Pie, { colors } from "./plots/Pie.svelte";
     import Histogram from "./plots/Histogram.svelte";
     import {
@@ -17,7 +16,7 @@
         Progress,
         Icon,
     } from "sveltestrap";
-    import { init, convert2uplot } from "./utils.js";
+    import { init, convert2uplot, transformPerNodeDataForRoofline } from "./utils.js";
     import { scaleNumbers } from "./units.js";
     import {
         queryStore,
@@ -33,8 +32,7 @@
 
     let plotWidths = [],
         colWidth1 = 0,
-        colWidth2 = 0,
-        colWidth3 = 0;
+        colWidth2 = 0
     let from = new Date(Date.now() - 5 * 60 * 1000),
         to = new Date(Date.now());
     const topOptions = [
@@ -434,7 +432,7 @@
                             colorDots={true}
                             showTime={false}
                             cluster={subCluster}
-                            data={transformPerNodeData(
+                            data={transformPerNodeDataForRoofline(
                                 $mainQuery.data.nodeMetrics.filter(
                                     (data) => data.subCluster == subCluster.name
                                 )
@@ -667,13 +665,4 @@
             {/key}
         </Col>
     </Row>
-    <Row>
-        <Col>
-            <div bind:clientWidth={colWidth3}>
-                <Rooflineuplot
-                    width={colWidth3 - 25}
-                    cluster={$initq.data.clusters.find((c) => c.name == cluster).subClusters[0]}
-                />
-        </Col>
-    </Row>
 {/if}
diff --git a/web/frontend/src/plots/Roofline.svelte b/web/frontend/src/plots/Roofline.svelte
index 57482ee..cc65f41 100644
--- a/web/frontend/src/plots/Roofline.svelte
+++ b/web/frontend/src/plots/Roofline.svelte
@@ -1,16 +1,72 @@
-<div class="cc-plot">
-    <canvas bind:this={canvasElement} width="{prevWidth}" height="{prevHeight}"></canvas>
-</div>
+<script>
+    import uPlot from 'uplot'
+    import { formatNumber } from '../units.js'
+    import { onMount, onDestroy } from 'svelte'
+    import { Card } from 'sveltestrap'
 
-<script context="module">
-    const axesColor = '#aaaaaa'
-    const tickFontSize = 10
-    const labelFontSize = 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 paddingLeft = 40,
-        paddingRight = 10,
-        paddingTop = 10,
-        paddingBottom = 50
+    export let flopsAny = null
+    export let memBw = null
+    export let maxY = null
+    export let cluster = null
+    export let width = 500
+    export let height = 300
+    export let renderTime = false
+    export let data = null
+
+    let plotWrapper = null
+    let uplot = null
+    let timeoutId = null
+
+    // Three Render-Cases:
+    // #1 Single-Job Roofline -> Has Time-Information: Use data, allow renderTime
+    // #2 MultiNode Roofline - > Has No Time-Information: Transform from nodeData, only "IST"-state of nodes, no timeInfo
+    // #3 Multi-Job Roofline as Heatmap -> Keep Original
+
+    // Start Demo Data
+
+    function randInt(min, max) {
+        return Math.floor(Math.random() * (max - min + 1)) + min;
+    }
+
+    function randFloat(min, max) {
+        return roundTwo(((Math.random() * (max - min + 1)) + min) / randInt(1, 500));
+    }
+
+    function roundTwo(num) {
+       return  Math.round((num + Number.EPSILON) * 100) / 100
+    }
+
+    function filledArr(len, val, time) {
+        let arr = Array(len);
+
+        if (typeof val == "function") {
+            for (let i = 0; i < len; ++i)
+                arr[i] = val(i);
+        }
+        else if (time) {
+            for (let i = 0; i < len; ++i)
+                arr[i] = i / 1000;
+        }
+        else {
+            for (let i = 0; i < len; ++i)
+                arr[i] = i;
+        }
+
+        return arr;
+    }
+
+    let points = 1000;
+
+    data       = [null, []] // Null-Axis required for scatter
+    data[1][0] = filledArr(points, i => randFloat(1,5000), false) // Intensity
+    data[1][1] = filledArr(points, i => randFloat(1,5000), false) // Performance
+    // data[1][0] = filledArr(points, 0, false) // Intensity
+    // data[1][1] = filledArr(points, 0, false) // Performance
+    data[2]    = filledArr(points, 0, true) // Time Information (Optional)
+
+    // End Demo Data
+
+    // Helpers
 
     function getGradientR(x) {
         if (x < 0.5) return 0
@@ -37,6 +93,10 @@
         return `rgb(${getGradientR(c)}, ${getGradientG(c)}, ${getGradientB(c)})`
     }
 
+    function nearestThousand (num) {
+        return Math.ceil(num/1000) * 1000
+    }
+
     function lineIntersect(x1, y1, x2, y2, x3, y3, x4, y4) {
         let l = (y4 - y3) * (x2 - x1) - (x4 - x3) * (y2 - y1)
         let a = ((x4 - x3) * (y1 - y3) - (y4 - y3) * (x1 - x3)) / l
@@ -46,313 +106,192 @@
         }
     }
 
-    function axisStepFactor(i, size) {
-        if (size && size < 500)
-            return 10
+    // End Helpers
 
-        if (i % 3 == 0)
-            return 2
-        else if (i % 3 == 1)
-            return 2.5
-        else
-            return 2
-    }
+    const drawColorPoints = (u, seriesIdx, idx0, idx1) => {
+        const size = 5 * devicePixelRatio;
 
-    function render(ctx, data, cluster, width, height, colorDots, showTime, defaultMaxY) {
-        if (width <= 0)
-            return
+        uPlot.orient(u, seriesIdx, (series, dataX, dataY, scaleX, scaleY, valToPosX, valToPosY, xOff, yOff, xDim, yDim, moveTo, lineTo, rect, arc) => {
+            let d = u.data[seriesIdx];
+            let deg360 = 2 * Math.PI;
+            for (let i = 0; i < d[0].length; i++) {
+                let p    = new Path2D();
+                let xVal = d[0][i];
+                let yVal = d[1][i];
+                u.ctx.strokeStyle = getRGB(u.data[2][i])
+                u.ctx.fillStyle   = getRGB(u.data[2][i])
+                if (xVal >= scaleX.min && xVal <= scaleX.max && yVal >= scaleY.min && yVal <= scaleY.max) {
+                    let cx = valToPosX(xVal, scaleX, xDim, xOff);
+                    let cy = valToPosY(yVal, scaleY, yDim, yOff);
 
-        const [minX, maxX, minY, maxY] = [0.01, 1000, 1., cluster?.flopRateSimd?.value || defaultMaxY]
-        const w = width - paddingLeft - paddingRight
-        const h = height - paddingTop - paddingBottom
-
-        // Helpers:
-        const [log10minX, log10maxX, log10minY, log10maxY] =
-            [Math.log10(minX), Math.log10(maxX), Math.log10(minY), Math.log10(maxY)]
-
-        /* Value -> Pixel-Coordinate */
-        const getCanvasX = (x) => {
-            x = Math.log10(x)
-            x -= log10minX; x /= (log10maxX - log10minX)
-            return Math.round((x * w) + paddingLeft)
-        }
-        const getCanvasY = (y) => {
-            y = Math.log10(y)
-            y -= log10minY
-            y /= (log10maxY - log10minY)
-            return Math.round((h - y * h) + paddingTop)
-        }
-
-        // Axes
-        ctx.fillStyle = 'black'
-        ctx.strokeStyle = axesColor
-        ctx.font = `${tickFontSize}px ${fontFamily}`
-        ctx.beginPath()
-        for (let x = minX, i = 0; x <= maxX; i++) {
-            let px = getCanvasX(x)
-            let text = formatNumber(x)
-            let textWidth = ctx.measureText(text).width
-            ctx.fillText(text,
-                Math.floor(px - (textWidth / 2)),
-                height - paddingBottom + tickFontSize + 5)
-            ctx.moveTo(px, paddingTop - 5)
-            ctx.lineTo(px, height - paddingBottom + 5)
-
-            x *= axisStepFactor(i, w)
-        }
-        if (data.xLabel) {
-            ctx.font = `${labelFontSize}px ${fontFamily}`
-            let textWidth = ctx.measureText(data.xLabel).width
-            ctx.fillText(data.xLabel, Math.floor((width / 2) - (textWidth / 2)), height - 20)
-        }
-
-        ctx.textAlign = 'center'
-        ctx.font = `${tickFontSize}px ${fontFamily}`
-        for (let y = minY, i = 0; y <= maxY; i++) {
-            let py = getCanvasY(y)
-            ctx.moveTo(paddingLeft - 5, py)
-            ctx.lineTo(width - paddingRight + 5, py)
-
-            ctx.save()
-            ctx.translate(paddingLeft - 10, py)
-            ctx.rotate(-Math.PI / 2)
-            ctx.fillText(formatNumber(y), 0, 0)
-            ctx.restore()
-
-            y *= axisStepFactor(i)
-        }
-        if (data.yLabel) {
-            ctx.font = `${labelFontSize}px ${fontFamily}`
-            ctx.save()
-            ctx.translate(15, Math.floor(height / 2))
-            ctx.rotate(-Math.PI / 2)
-            ctx.fillText(data.yLabel, 0, 0)
-            ctx.restore()
-        }
-        ctx.stroke()
-
-        // Draw Data
-        if (data.x && data.y) {
-            for (let i = 0; i < data.x.length; i++) {
-                let x = data.x[i], y = data.y[i], c = data.c[i]
-                if (x == null || y == null || Number.isNaN(x) || Number.isNaN(y))
-                    continue
-
-                const s = 3
-                const px = getCanvasX(x)
-                const py = getCanvasY(y)
-
-                ctx.fillStyle = getRGB(c)
-                ctx.beginPath()
-                ctx.arc(px, py, s, 0, Math.PI * 2, false)
-                ctx.fill()
+                    p.moveTo(cx + size/2, cy);
+                    arc(p, cx, cy, size/2, 0, deg360);
+                }
+                u.ctx.fill(p);
             }
-        } else if (data.tiles) {
-            const rows = data.tiles.length
-            const cols = data.tiles[0].length
+        });
 
-            const tileWidth = Math.ceil(w / cols)
-            const tileHeight = Math.ceil(h / rows)
+        return null;
+    };
 
-            let max = data.tiles.reduce((max, row) =>
-                Math.max(max, row.reduce((max, val) =>
-                    Math.max(max, val)), 0), 0)
+    const drawPoints = (u, seriesIdx, idx0, idx1) => {
+        const size = 5 * devicePixelRatio;
 
-            if (max == 0)
-                max = 1
-
-            const tileColor = val => `rgba(255, 0, 0, ${(val / max)})`
-
-            for (let i = 0; i < rows; i++) {
-                for (let j = 0; j < cols; j++) {
-                    let px = paddingLeft + (j / cols) * w
-                    let py = paddingTop + (h - (i / rows) * h) - tileHeight
-
-                    ctx.fillStyle = tileColor(data.tiles[i][j])
-                    ctx.fillRect(px, py, tileWidth, tileHeight)
+        uPlot.orient(u, seriesIdx, (series, dataX, dataY, scaleX, scaleY, valToPosX, valToPosY, xOff, yOff, xDim, yDim, moveTo, lineTo, rect, arc) => {
+            let d = u.data[seriesIdx];
+            u.ctx.strokeStyle = getRGB(0);
+            u.ctx.fillStyle   = getRGB(0);
+            let deg360 = 2 * Math.PI;
+            let p      = new Path2D();
+            for (let i = 0; i < d[0].length; i++) {
+                let xVal = d[0][i];
+                let yVal = d[1][i];
+                if (xVal >= scaleX.min && xVal <= scaleX.max && yVal >= scaleY.min && yVal <= scaleY.max) {
+                    let cx = valToPosX(xVal, scaleX, xDim, xOff);
+                    let cy = valToPosY(yVal, scaleY, yDim, yOff);
+                    p.moveTo(cx + size/2, cy);
+                    arc(p, cx, cy, size/2, 0, deg360);
                 }
             }
-        }
+            u.ctx.fill(p);
+        });
+        return null;
+    };
 
-        // Draw roofs
-        ctx.strokeStyle = 'black'
-        ctx.lineWidth = 2
-        ctx.beginPath()
-        if (cluster != null) {
-            const ycut = 0.01 * cluster.memoryBandwidth.value
-            const scalarKnee = (cluster.flopRateScalar.value - ycut) / cluster.memoryBandwidth.value
-            const simdKnee = (cluster.flopRateSimd.value - ycut) / cluster.memoryBandwidth.value
-            const scalarKneeX = getCanvasX(scalarKnee),
-                  simdKneeX = getCanvasX(simdKnee),
-                  flopRateScalarY = getCanvasY(cluster.flopRateScalar.value),
-                  flopRateSimdY = getCanvasY(cluster.flopRateSimd.value)
+    function render() {
+        const opts = {
+            title: "",
+            mode: 2,
+            width: width,
+            height: height,
+            legend: {
+                show: false
+            },
+            cursor: { drag: { x: false, y: false } },
+            axes: [
+                { label: 'Intensity [FLOPS/Byte]' },
+                { label: 'Performace [GFLOPS]' }
+            ],
+            scales: {
+                x: {
+                    time: false,
+                    range: [0.01, 1000],
+                    distr: 3, // Render as log
+					log: 10, // log exp
+                },
+                y: {
+                    range: [1.0, nearestThousand(cluster.flopRateSimd.value || maxY)],
+                    distr: 3, // Render as log
+					log: 10, // log exp
+                },
+            },
+            series: [
+                {},
+                { paths: renderTime ? drawColorPoints : drawPoints }
+            ],
+            hooks: {
+                drawClear: [
+                    u => {
+                        u.series.forEach((s, i) => {
+                            if (i > 0)
+                                s._paths = null;
+                        });
+                    },
+                ],
+                draw: [
+                    u => { // draw roofs when cluster set
+                        // console.log(u)
+                        if (cluster != null) {
+                            const padding = u._padding // [top, right, bottom, left]
 
-            if (scalarKneeX < width - paddingRight) {
-                ctx.moveTo(scalarKneeX, flopRateScalarY)
-                ctx.lineTo(width - paddingRight, flopRateScalarY)
-            }
+                            u.ctx.strokeStyle = 'black'
+                            u.ctx.lineWidth = 2
+                            u.ctx.beginPath()
 
-            if (simdKneeX < width - paddingRight) {
-                ctx.moveTo(simdKneeX, flopRateSimdY)
-                ctx.lineTo(width - paddingRight, flopRateSimdY)
-            }
+                            const ycut = 0.01 * cluster.memoryBandwidth.value
+                            const scalarKnee = (cluster.flopRateScalar.value - ycut) / cluster.memoryBandwidth.value
+                            const simdKnee = (cluster.flopRateSimd.value - ycut) / cluster.memoryBandwidth.value
+                            const scalarKneeX = u.valToPos(scalarKnee, 'x', true), // Value, axis, toCanvasPixels
+                                simdKneeX = u.valToPos(simdKnee, 'x', true),
+                                flopRateScalarY = u.valToPos(cluster.flopRateScalar.value, 'y', true),
+                                flopRateSimdY = u.valToPos(cluster.flopRateSimd.value, 'y', true)
 
-            let x1 = getCanvasX(0.01),
-                y1 = getCanvasY(ycut),
-                x2 = getCanvasX(simdKnee),
-                y2 = flopRateSimdY
+                            if (scalarKneeX < width - padding[1]) { // Top horizontal roofline
+                                u.ctx.moveTo(scalarKneeX, flopRateScalarY)
+                                u.ctx.lineTo(width - padding[1], flopRateScalarY)
+                            }
 
-            let xAxisIntersect = lineIntersect(
-                x1, y1, x2, y2,
-                0, height - paddingBottom, width, height - paddingBottom)
+                            if (simdKneeX < width - padding[1]) { // Lower horitontal roofline
+                                u.ctx.moveTo(simdKneeX, flopRateSimdY)
+                                u.ctx.lineTo(width - padding[1], flopRateSimdY)
+                            }
 
-            if (xAxisIntersect.x > x1) {
-                x1 = xAxisIntersect.x
-                y1 = xAxisIntersect.y
-            }
+                            let x1 = u.valToPos(0.01, 'x', true),
+                                y1 = u.valToPos(ycut, 'y', true)
+                                
+                            let x2 = u.valToPos(simdKnee, 'x', true),
+                                y2 = flopRateSimdY
 
-            ctx.moveTo(x1, y1)
-            ctx.lineTo(x2, y2)
-        }
-        ctx.stroke()
+                            let xAxisIntersect = lineIntersect(
+                                x1, y1, x2, y2,
+                                u.valToPos(0.01, 'x', true), u.valToPos(1.0, 'y', true), // X-Axis Start Coords
+                                u.valToPos(1000, 'x', true), u.valToPos(1.0, 'y', true)  // X-Axis End Coords
+                            )
 
-        if (colorDots && showTime &&  data.x && data.y) {
-            // The Color Scale For Time Information
-            ctx.fillStyle = 'black'
-            ctx.fillText('Time:', 17, height - 5)
-            const start = paddingLeft + 5
-            for (let x = start; x < width - paddingRight; x += 15) {
-                let c = (x - start) / (width - start - paddingRight)
-                ctx.fillStyle = getRGB(c)
-                ctx.beginPath()
-                ctx.arc(x, height - 10, 5, 0, Math.PI * 2, false)
-                ctx.fill()
-            }
-        }
+                            if (xAxisIntersect.x > x1) {
+                                x1 = xAxisIntersect.x
+                                y1 = xAxisIntersect.y
+                            }
+
+                            // Diagonal
+                            u.ctx.moveTo(x1, y1)
+                            u.ctx.lineTo(x2, y2)
+
+                            u.ctx.stroke()
+                            // Reset grid lineWidth
+                            u.ctx.lineWidth = 0.15
+                        }
+                    }
+                ]
+            },
+        };
+
+        uplot = new uPlot(opts, data, plotWrapper);
     }
 
-    function transformData(flopsAny, memBw, colorDots) { // Uses Metric Object
-        const nodes = flopsAny.series.length
-        const timesteps = flopsAny.series[0].data.length
-
-        /* c will contain values from 0 to 1 representing the time */
-        const x = [], y = [], c = []
-
-        if (flopsAny && memBw) {
-            for (let i = 0; i < nodes; i++) {
-                const flopsData = flopsAny.series[i].data
-                const memBwData = memBw.series[i].data
-                for (let j = 0; j < timesteps; j++) {
-                    const f = flopsData[j], m = memBwData[j]
-                    const intensity = f / m
-                    if (Number.isNaN(intensity) || !Number.isFinite(intensity))
-                        continue
-
-                    x.push(intensity)
-                    y.push(f)
-                    c.push(colorDots ? j / timesteps : 0)
-                }
-            }
-        } else {
-            console.warn("transformData: metrics for 'mem_bw' and/or 'flops_any' missing!")
-        }
-
-        return {
-            x, y, c,
-            xLabel: 'Intensity [FLOPS/byte]',
-            yLabel: 'Performance [GFLOPS]'
-        }
-    }
-
-    // Return something to be plotted. The argument shall be the result of the
-    // `nodeMetrics` GraphQL query.
-    export function transformPerNodeData(nodes) {
-        const x = [], y = [], c = []
-        for (let node of nodes) {
-            let flopsAny = node.metrics.find(m => m.name == 'flops_any' && m.scope == 'node')?.metric
-            let memBw    = node.metrics.find(m => m.name == 'mem_bw'    && m.scope == 'node')?.metric
-            if (!flopsAny || !memBw) {
-                console.warn("transformPerNodeData: metrics for 'mem_bw' and/or 'flops_any' missing!")
-                continue
-            }
-
-            let flopsData = flopsAny.series[0].data, memBwData = memBw.series[0].data
-            const f = flopsData[flopsData.length - 1], m = memBwData[flopsData.length - 1]
-            const intensity = f / m
-            if (Number.isNaN(intensity) || !Number.isFinite(intensity))
-                continue
-
-            x.push(intensity)
-            y.push(f)
-            c.push(0)
-        }
-
-        return {
-            x, y, c,
-            xLabel: 'Intensity [FLOPS/byte]',
-            yLabel: 'Performance [GFLOPS]'
-        }
-    }
-</script>
-
-<script>
-    import { onMount, tick } from 'svelte'
-    import { formatNumber } from '../units.js'
-
-    export let flopsAny = null
-    export let memBw = null
-    export let cluster = null
-    export let maxY = null
-    export let width = 500
-    export let height = 300
-    export let tiles = null
-    export let colorDots = true
-    export let showTime = true
-    export let data = null
-
-    console.assert(data || tiles || (flopsAny && memBw), "you must provide flopsAny and memBw or tiles!")
-
-    let ctx, canvasElement, prevWidth = width, prevHeight = height
-    data = data != null ? data : (flopsAny && memBw
-        ? transformData(flopsAny.metric, memBw.metric, colorDots) // Use Metric Object from Parent
-        : {
-            tiles: tiles,
-            xLabel: 'Intensity [FLOPS/byte]',
-            yLabel: 'Performance [GFLOPS]'
-        })
-
+    // Copied from Histogram
+    
     onMount(() => {
-        ctx = canvasElement.getContext('2d')
-        if (prevWidth != width || prevHeight != height) {
-            sizeChanged()
-            return
-        }
-
-        canvasElement.width = width
-        canvasElement.height = height
-        render(ctx, data, cluster, width, height, colorDots, showTime, maxY)
+        render()
     })
 
-    let timeoutId = null
-    function sizeChanged() {
-        if (!ctx)
-            return
+    onDestroy(() => {
+        if (uplot)
+            uplot.destroy()
 
         if (timeoutId != null)
             clearTimeout(timeoutId)
+    })
+
+    function sizeChanged() {
+        if (timeoutId != null)
+            clearTimeout(timeoutId)
 
-        prevWidth = width
-        prevHeight = height
         timeoutId = setTimeout(() => {
-            if (!canvasElement)
-                return
-
             timeoutId = null
-            canvasElement.width = width
-            canvasElement.height = height
-            render(ctx, data, cluster, width, height, colorDots, showTime, maxY)
-        }, 250)
+            if (uplot)
+                uplot.destroy()
+
+            render()
+        }, 200)
     }
 
     $: sizeChanged(width, height)
+
 </script>
+
+{#if data != null}
+    <div bind:this={plotWrapper}/>
+{:else}
+    <Card class="mx-4" body color="warning">Cannot render roofline: No data!</Card>
+{/if}
\ No newline at end of file
diff --git a/web/frontend/src/plots/RooflineHeatmap.svelte b/web/frontend/src/plots/RooflineHeatmap.svelte
new file mode 100644
index 0000000..be7ec65
--- /dev/null
+++ b/web/frontend/src/plots/RooflineHeatmap.svelte
@@ -0,0 +1,234 @@
+<div class="cc-plot">
+    <canvas bind:this={canvasElement} width="{prevWidth}" height="{prevHeight}"></canvas>
+</div>
+
+<script context="module">
+    const axesColor = '#aaaaaa'
+    const tickFontSize = 10
+    const labelFontSize = 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 paddingLeft = 40,
+        paddingRight = 10,
+        paddingTop = 10,
+        paddingBottom = 50
+
+    function lineIntersect(x1, y1, x2, y2, x3, y3, x4, y4) {
+        let l = (y4 - y3) * (x2 - x1) - (x4 - x3) * (y2 - y1)
+        let a = ((x4 - x3) * (y1 - y3) - (y4 - y3) * (x1 - x3)) / l
+        return {
+            x: x1 + a * (x2 - x1),
+            y: y1 + a * (y2 - y1)
+        }
+    }
+
+    function axisStepFactor(i, size) {
+        if (size && size < 500)
+            return 10
+
+        if (i % 3 == 0)
+            return 2
+        else if (i % 3 == 1)
+            return 2.5
+        else
+            return 2
+    }
+
+    function render(ctx, data, cluster, width, height, defaultMaxY) {
+        if (width <= 0)
+            return
+
+        const [minX, maxX, minY, maxY] = [0.01, 1000, 1., cluster?.flopRateSimd?.value || defaultMaxY]
+        const w = width - paddingLeft - paddingRight
+        const h = height - paddingTop - paddingBottom
+
+        // Helpers:
+        const [log10minX, log10maxX, log10minY, log10maxY] =
+            [Math.log10(minX), Math.log10(maxX), Math.log10(minY), Math.log10(maxY)]
+
+        /* Value -> Pixel-Coordinate */
+        const getCanvasX = (x) => {
+            x = Math.log10(x)
+            x -= log10minX; x /= (log10maxX - log10minX)
+            return Math.round((x * w) + paddingLeft)
+        }
+        const getCanvasY = (y) => {
+            y = Math.log10(y)
+            y -= log10minY
+            y /= (log10maxY - log10minY)
+            return Math.round((h - y * h) + paddingTop)
+        }
+
+        // Axes
+        ctx.fillStyle = 'black'
+        ctx.strokeStyle = axesColor
+        ctx.font = `${tickFontSize}px ${fontFamily}`
+        ctx.beginPath()
+        for (let x = minX, i = 0; x <= maxX; i++) {
+            let px = getCanvasX(x)
+            let text = formatNumber(x)
+            let textWidth = ctx.measureText(text).width
+            ctx.fillText(text,
+                Math.floor(px - (textWidth / 2)),
+                height - paddingBottom + tickFontSize + 5)
+            ctx.moveTo(px, paddingTop - 5)
+            ctx.lineTo(px, height - paddingBottom + 5)
+
+            x *= axisStepFactor(i, w)
+        }
+        if (data.xLabel) {
+            ctx.font = `${labelFontSize}px ${fontFamily}`
+            let textWidth = ctx.measureText(data.xLabel).width
+            ctx.fillText(data.xLabel, Math.floor((width / 2) - (textWidth / 2)), height - 20)
+        }
+
+        ctx.textAlign = 'center'
+        ctx.font = `${tickFontSize}px ${fontFamily}`
+        for (let y = minY, i = 0; y <= maxY; i++) {
+            let py = getCanvasY(y)
+            ctx.moveTo(paddingLeft - 5, py)
+            ctx.lineTo(width - paddingRight + 5, py)
+
+            ctx.save()
+            ctx.translate(paddingLeft - 10, py)
+            ctx.rotate(-Math.PI / 2)
+            ctx.fillText(formatNumber(y), 0, 0)
+            ctx.restore()
+
+            y *= axisStepFactor(i)
+        }
+        if (data.yLabel) {
+            ctx.font = `${labelFontSize}px ${fontFamily}`
+            ctx.save()
+            ctx.translate(15, Math.floor(height / 2))
+            ctx.rotate(-Math.PI / 2)
+            ctx.fillText(data.yLabel, 0, 0)
+            ctx.restore()
+        }
+        ctx.stroke()
+
+        // Draw Data
+        if (data.tiles) {
+            const rows = data.tiles.length
+            const cols = data.tiles[0].length
+
+            const tileWidth = Math.ceil(w / cols)
+            const tileHeight = Math.ceil(h / rows)
+
+            let max = data.tiles.reduce((max, row) =>
+                Math.max(max, row.reduce((max, val) =>
+                    Math.max(max, val)), 0), 0)
+
+            if (max == 0)
+                max = 1
+
+            const tileColor = val => `rgba(255, 0, 0, ${(val / max)})`
+
+            for (let i = 0; i < rows; i++) {
+                for (let j = 0; j < cols; j++) {
+                    let px = paddingLeft + (j / cols) * w
+                    let py = paddingTop + (h - (i / rows) * h) - tileHeight
+
+                    ctx.fillStyle = tileColor(data.tiles[i][j])
+                    ctx.fillRect(px, py, tileWidth, tileHeight)
+                }
+            }
+        }
+
+        // Draw roofs
+        ctx.strokeStyle = 'black'
+        ctx.lineWidth = 2
+        ctx.beginPath()
+        if (cluster != null) {
+            const ycut = 0.01 * cluster.memoryBandwidth.value
+            const scalarKnee = (cluster.flopRateScalar.value - ycut) / cluster.memoryBandwidth.value
+            const simdKnee = (cluster.flopRateSimd.value - ycut) / cluster.memoryBandwidth.value
+            const scalarKneeX = getCanvasX(scalarKnee),
+                  simdKneeX = getCanvasX(simdKnee),
+                  flopRateScalarY = getCanvasY(cluster.flopRateScalar.value),
+                  flopRateSimdY = getCanvasY(cluster.flopRateSimd.value)
+
+            if (scalarKneeX < width - paddingRight) {
+                ctx.moveTo(scalarKneeX, flopRateScalarY)
+                ctx.lineTo(width - paddingRight, flopRateScalarY)
+            }
+
+            if (simdKneeX < width - paddingRight) {
+                ctx.moveTo(simdKneeX, flopRateSimdY)
+                ctx.lineTo(width - paddingRight, flopRateSimdY)
+            }
+
+            let x1 = getCanvasX(0.01),
+                y1 = getCanvasY(ycut),
+                x2 = getCanvasX(simdKnee),
+                y2 = flopRateSimdY
+
+            let xAxisIntersect = lineIntersect(
+                x1, y1, x2, y2,
+                0, height - paddingBottom, width, height - paddingBottom)
+
+            if (xAxisIntersect.x > x1) {
+                x1 = xAxisIntersect.x
+                y1 = xAxisIntersect.y
+            }
+
+            ctx.moveTo(x1, y1)
+            ctx.lineTo(x2, y2)
+        }
+        ctx.stroke()
+    }
+</script>
+
+<script>
+    import { onMount } from 'svelte'
+    import { formatNumber } from '../units.js'
+
+    export let cluster  = null
+    export let tiles    = null
+    export let maxY     = null
+    export let width    = 500
+    export let height   = 300
+
+    console.assert(tiles, "you must provide tiles!")
+
+    let ctx, canvasElement, prevWidth = width, prevHeight = height
+    const data = {
+        tiles: tiles,
+        xLabel: 'Intensity [FLOPS/byte]',
+        yLabel: 'Performance [GFLOPS]'
+    }
+
+    onMount(() => {
+        ctx = canvasElement.getContext('2d')
+        if (prevWidth != width || prevHeight != height) {
+            sizeChanged()
+            return
+        }
+
+        canvasElement.width = width
+        canvasElement.height = height
+        render(ctx, data, cluster, width, height, maxY)
+    })
+
+    let timeoutId = null
+    function sizeChanged() {
+        if (!ctx)
+            return
+
+        if (timeoutId != null)
+            clearTimeout(timeoutId)
+
+        prevWidth = width
+        prevHeight = height
+        timeoutId = setTimeout(() => {
+            if (!canvasElement)
+                return
+
+            timeoutId = null
+            canvasElement.width = width
+            canvasElement.height = height
+            render(ctx, data, cluster, width, height, maxY)
+        }, 250)
+    }
+
+    $: sizeChanged(width, height)
+</script>
diff --git a/web/frontend/src/plots/Rooflineuplot.svelte b/web/frontend/src/plots/Rooflineuplot.svelte
deleted file mode 100644
index 01ed489..0000000
--- a/web/frontend/src/plots/Rooflineuplot.svelte
+++ /dev/null
@@ -1,360 +0,0 @@
-<script>
-    import uPlot from 'uplot'
-    import { formatNumber } from '../units.js'
-    import { onMount, onDestroy } from 'svelte'
-    import { Card } from 'sveltestrap'
-
-    export let flopsAny = null
-    export let memBw = null
-    export let maxY = null
-    export let cluster = null
-    export let width = 500
-    export let height = 300
-    export let renderTime = false
-    export let data = null
-
-    let plotWrapper = null
-    let uplot = null
-    let timeoutId = null
-
-    // Three Render-Cases:
-    // #1 Single-Job Roofline -> Has Time-Information: Use data, allow colorDots && showTime
-    // #2 MultiNode Roofline - > Has No Time-Information: Transform from nodeData, only "IST"-state of nodes, no timeInfo
-    // #3 Multi-Job Roofline -> No Time Information? -> Use Backend-Prepared "Tiles" with increasing occupancy for stronger values
-
-    // Start Demo Data
-
-    function randInt(min, max) {
-        return Math.floor(Math.random() * (max - min + 1)) + min;
-    }
-
-    function randFloat(min, max) {
-        return roundTwo(((Math.random() * (max - min + 1)) + min) / randInt(1, 500));
-    }
-
-    function roundTwo(num) {
-       return  Math.round((num + Number.EPSILON) * 100) / 100
-    }
-
-    function filledArr(len, val, time) {
-        let arr = Array(len);
-
-        if (typeof val == "function") {
-            for (let i = 0; i < len; ++i)
-                arr[i] = val(i);
-        }
-        else if (time) {
-            for (let i = 0; i < len; ++i)
-                arr[i] = i / 1000;
-        }
-        else {
-            for (let i = 0; i < len; ++i)
-                arr[i] = i;
-        }
-
-        return arr;
-    }
-
-    let points = 1000;
-
-    data       = [null, []] // Null-Axis required for scatter
-    data[1][0] = filledArr(points, i => randFloat(1,5000), false) // Intensity
-    data[1][1] = filledArr(points, i => randFloat(1,5000), false) // Performance
-    // data[1][0] = filledArr(points, 0, false) // Intensity
-    // data[1][1] = filledArr(points, 0, false) // Performance
-    data[2]    = filledArr(points, 0, true) // Time Information (Optional)
-
-    // End Demo Data
-
-    // Helpers
-
-    function getGradientR(x) {
-        if (x < 0.5) return 0
-        if (x > 0.75) return 255
-        x = (x - 0.5) * 4.0
-        return Math.floor(x * 255.0)
-    }
-
-    function getGradientG(x) {
-        if (x > 0.25 && x < 0.75) return 255
-        if (x < 0.25) x = x * 4.0
-        else          x = 1.0 - (x - 0.75) * 4.0
-        return Math.floor(x * 255.0)
-    }
-
-    function getGradientB(x) {
-        if (x < 0.25) return 255
-        if (x > 0.5) return 0
-        x = 1.0 - (x - 0.25) * 4.0
-        return Math.floor(x * 255.0)
-    }
-
-    function getRGB(c) {
-        return `rgb(${getGradientR(c)}, ${getGradientG(c)}, ${getGradientB(c)})`
-    }
-
-    function nearestThousand (num) {
-        return Math.ceil(num/1000) * 1000
-    }
-
-    function lineIntersect(x1, y1, x2, y2, x3, y3, x4, y4) {
-        let l = (y4 - y3) * (x2 - x1) - (x4 - x3) * (y2 - y1)
-        let a = ((x4 - x3) * (y1 - y3) - (y4 - y3) * (x1 - x3)) / l
-        return {
-            x: x1 + a * (x2 - x1),
-            y: y1 + a * (y2 - y1)
-        }
-    }
-
-    function transformData(flopsAny, memBw, colorDots) { // Uses Metric Object
-        const nodes = flopsAny.series.length
-        const timesteps = flopsAny.series[0].data.length
-
-        /* c will contain values from 0 to 1 representing the time */
-        const x = [], y = [], c = []
-
-        if (flopsAny && memBw) {
-            for (let i = 0; i < nodes; i++) {
-                const flopsData = flopsAny.series[i].data
-                const memBwData = memBw.series[i].data
-                for (let j = 0; j < timesteps; j++) {
-                    const f = flopsData[j], m = memBwData[j]
-                    const intensity = f / m
-                    if (Number.isNaN(intensity) || !Number.isFinite(intensity))
-                        continue
-
-                    x.push(intensity)
-                    y.push(f)
-                    c.push(colorDots ? j / timesteps : 0)
-                }
-            }
-        } else {
-            console.warn("transformData: metrics for 'mem_bw' and/or 'flops_any' missing!")
-        }
-
-        return {
-            x, y, c,
-            xLabel: 'Intensity [FLOPS/byte]',
-            yLabel: 'Performance [GFLOPS]'
-        }
-    }
-
-    // Return something to be plotted. The argument shall be the result of the
-    // `nodeMetrics` GraphQL query.
-    export function transformPerNodeData(nodes) {
-        const x = [], y = [], c = []
-        for (let node of nodes) {
-            let flopsAny = node.metrics.find(m => m.name == 'flops_any' && m.scope == 'node')?.metric
-            let memBw    = node.metrics.find(m => m.name == 'mem_bw'    && m.scope == 'node')?.metric
-            if (!flopsAny || !memBw) {
-                console.warn("transformPerNodeData: metrics for 'mem_bw' and/or 'flops_any' missing!")
-                continue
-            }
-
-            let flopsData = flopsAny.series[0].data, memBwData = memBw.series[0].data
-            const f = flopsData[flopsData.length - 1], m = memBwData[flopsData.length - 1]
-            const intensity = f / m
-            if (Number.isNaN(intensity) || !Number.isFinite(intensity))
-                continue
-
-            x.push(intensity)
-            y.push(f)
-            c.push(0)
-        }
-
-        return {
-            x, y, c,
-            xLabel: 'Intensity [FLOPS/byte]',
-            yLabel: 'Performance [GFLOPS]'
-        }
-    }
-
-    // End Helpers
-
-    const drawColorPoints = (u, seriesIdx, idx0, idx1) => {
-        const size = 5 * devicePixelRatio;
-
-        uPlot.orient(u, seriesIdx, (series, dataX, dataY, scaleX, scaleY, valToPosX, valToPosY, xOff, yOff, xDim, yDim, moveTo, lineTo, rect, arc) => {
-            let d = u.data[seriesIdx];
-            let deg360 = 2 * Math.PI;
-            for (let i = 0; i < d[0].length; i++) {
-                let p    = new Path2D();
-                let xVal = d[0][i];
-                let yVal = d[1][i];
-                u.ctx.strokeStyle = getRGB(u.data[2][i])
-                u.ctx.fillStyle   = getRGB(u.data[2][i])
-                if (xVal >= scaleX.min && xVal <= scaleX.max && yVal >= scaleY.min && yVal <= scaleY.max) {
-                    let cx = valToPosX(xVal, scaleX, xDim, xOff);
-                    let cy = valToPosY(yVal, scaleY, yDim, yOff);
-
-                    p.moveTo(cx + size/2, cy);
-                    arc(p, cx, cy, size/2, 0, deg360);
-                }
-                u.ctx.fill(p);
-            }
-        });
-
-        return null;
-    };
-
-    const drawPoints = (u, seriesIdx, idx0, idx1) => {
-        const size = 5 * devicePixelRatio;
-
-        uPlot.orient(u, seriesIdx, (series, dataX, dataY, scaleX, scaleY, valToPosX, valToPosY, xOff, yOff, xDim, yDim, moveTo, lineTo, rect, arc) => {
-            let d = u.data[seriesIdx];
-            u.ctx.strokeStyle = getRGB(0);
-            u.ctx.fillStyle   = getRGB(0);
-            let deg360 = 2 * Math.PI;
-            let p      = new Path2D();
-            for (let i = 0; i < d[0].length; i++) {
-                let xVal = d[0][i];
-                let yVal = d[1][i];
-                if (xVal >= scaleX.min && xVal <= scaleX.max && yVal >= scaleY.min && yVal <= scaleY.max) {
-                    let cx = valToPosX(xVal, scaleX, xDim, xOff);
-                    let cy = valToPosY(yVal, scaleY, yDim, yOff);
-                    p.moveTo(cx + size/2, cy);
-                    arc(p, cx, cy, size/2, 0, deg360);
-                }
-            }
-            u.ctx.fill(p);
-        });
-        return null;
-    };
-
-    function render() {
-        const opts = {
-            title: "",
-            mode: 2,
-            width: width,
-            height: height,
-            legend: {
-                show: false
-            },
-            cursor: { drag: { x: false, y: false } },
-            axes: [
-                { label: 'Intensity [FLOPS/Byte]' },
-                { label: 'Performace [GFLOPS]' }
-            ],
-            scales: {
-                x: {
-                    time: false,
-                    range: [0.01, 1000],
-                    distr: 3, // Render as log
-					log: 10, // log exp
-                },
-                y: {
-                    range: [1.0, nearestThousand(cluster.flopRateSimd.value || maxY)],
-                    distr: 3, // Render as log
-					log: 10, // log exp
-                },
-            },
-            series: [
-                {},
-                { paths: renderTime ? drawColorPoints : drawPoints }
-            ],
-            hooks: {
-                drawClear: [
-                    u => {
-                        u.series.forEach((s, i) => {
-                            if (i > 0)
-                                s._paths = null;
-                        });
-                    },
-                ],
-                draw: [
-                    u => { // draw roofs when cluster set
-                        // console.log(u)
-                        if (cluster != null) {
-                            const padding = u._padding // [top, right, bottom, left]
-
-                            u.ctx.strokeStyle = 'black'
-                            u.ctx.lineWidth = 2
-                            u.ctx.beginPath()
-
-                            const ycut = 0.01 * cluster.memoryBandwidth.value
-                            const scalarKnee = (cluster.flopRateScalar.value - ycut) / cluster.memoryBandwidth.value
-                            const simdKnee = (cluster.flopRateSimd.value - ycut) / cluster.memoryBandwidth.value
-                            const scalarKneeX = u.valToPos(scalarKnee, 'x', true), // Value, axis, toCanvasPixels
-                                simdKneeX = u.valToPos(simdKnee, 'x', true),
-                                flopRateScalarY = u.valToPos(cluster.flopRateScalar.value, 'y', true),
-                                flopRateSimdY = u.valToPos(cluster.flopRateSimd.value, 'y', true)
-
-                            if (scalarKneeX < width - padding[1]) { // Top horizontal roofline
-                                u.ctx.moveTo(scalarKneeX, flopRateScalarY)
-                                u.ctx.lineTo(width - padding[1], flopRateScalarY)
-                            }
-
-                            if (simdKneeX < width - padding[1]) { // Lower horitontal roofline
-                                u.ctx.moveTo(simdKneeX, flopRateSimdY)
-                                u.ctx.lineTo(width - padding[1], flopRateSimdY)
-                            }
-
-                            let x1 = u.valToPos(0.01, 'x', true),
-                                y1 = u.valToPos(ycut, 'y', true)
-                                
-                            let x2 = u.valToPos(simdKnee, 'x', true),
-                                y2 = flopRateSimdY
-
-                            let xAxisIntersect = lineIntersect(
-                                x1, y1, x2, y2,
-                                u.valToPos(0.01, 'x', true), u.valToPos(1.0, 'y', true), // X-Axis Start Coords
-                                u.valToPos(1000, 'x', true), u.valToPos(1.0, 'y', true)  // X-Axis End Coords
-                            )
-
-                            if (xAxisIntersect.x > x1) {
-                                x1 = xAxisIntersect.x
-                                y1 = xAxisIntersect.y
-                            }
-
-                            // Diagonal
-                            u.ctx.moveTo(x1, y1)
-                            u.ctx.lineTo(x2, y2)
-
-                            u.ctx.stroke()
-                            // Reset grid lineWidth
-                            u.ctx.lineWidth = 0.15
-                        }
-                    }
-                ]
-            },
-        };
-
-        uplot = new uPlot(opts, data, plotWrapper);
-    }
-
-    // Copied from Histogram
-    
-    onMount(() => {
-        render()
-    })
-
-    onDestroy(() => {
-        if (uplot)
-            uplot.destroy()
-
-        if (timeoutId != null)
-            clearTimeout(timeoutId)
-    })
-
-    function sizeChanged() {
-        if (timeoutId != null)
-            clearTimeout(timeoutId)
-
-        timeoutId = setTimeout(() => {
-            timeoutId = null
-            if (uplot)
-                uplot.destroy()
-
-            render()
-        }, 200)
-    }
-
-    $: sizeChanged(width, height)
-
-</script>
-
-{#if data != null}
-    <div bind:this={plotWrapper}/>
-{:else}
-    <Card class="mx-4" body color="warning">Cannot render roofline: No data!</Card>
-{/if}
\ No newline at end of file
diff --git a/web/frontend/src/utils.js b/web/frontend/src/utils.js
index 0650916..c89afda 100644
--- a/web/frontend/src/utils.js
+++ b/web/frontend/src/utils.js
@@ -363,3 +363,66 @@ export function binsFromFootprint(weights, scope, values, numBins) {
         bins: bins
     }
 }
+
+export function transformDataForRoofline(flopsAny, memBw, renderTime) { // Uses Metric Object
+    const nodes = flopsAny.series.length
+    const timesteps = flopsAny.series[0].data.length
+
+    /* c will contain values from 0 to 1 representing the time */
+    const x = [], y = [], c = []
+
+    if (flopsAny && memBw) {
+        for (let i = 0; i < nodes; i++) {
+            const flopsData = flopsAny.series[i].data
+            const memBwData = memBw.series[i].data
+            for (let j = 0; j < timesteps; j++) {
+                const f = flopsData[j], m = memBwData[j]
+                const intensity = f / m
+                if (Number.isNaN(intensity) || !Number.isFinite(intensity))
+                    continue
+
+                x.push(intensity)
+                y.push(f)
+                c.push(renderTime ? j / timesteps : 0)
+            }
+        }
+    } else {
+        console.warn("transformData: metrics for 'mem_bw' and/or 'flops_any' missing!")
+    }
+
+    return {
+        x, y, c,
+        xLabel: 'Intensity [FLOPS/byte]',
+        yLabel: 'Performance [GFLOPS]'
+    }
+}
+
+//  Return something to be plotted. The argument shall be the result of the
+// `nodeMetrics` GraphQL query.
+export function transformPerNodeDataForRoofline(nodes) {
+    const x = [], y = [], c = []
+    for (let node of nodes) {
+        let flopsAny = node.metrics.find(m => m.name == 'flops_any' && m.scope == 'node')?.metric
+        let memBw    = node.metrics.find(m => m.name == 'mem_bw'    && m.scope == 'node')?.metric
+        if (!flopsAny || !memBw) {
+            console.warn("transformPerNodeData: metrics for 'mem_bw' and/or 'flops_any' missing!")
+            continue
+        }
+
+        let flopsData = flopsAny.series[0].data, memBwData = memBw.series[0].data
+        const f = flopsData[flopsData.length - 1], m = memBwData[flopsData.length - 1]
+        const intensity = f / m
+        if (Number.isNaN(intensity) || !Number.isFinite(intensity))
+            continue
+
+        x.push(intensity)
+        y.push(f)
+        c.push(0)
+    }
+
+    return {
+        x, y, c,
+        xLabel: 'Intensity [FLOPS/byte]',
+        yLabel: 'Performance [GFLOPS]'
+    }
+}

From 1b8c4e293c3d1196569fee6425a46f16f8ef674d Mon Sep 17 00:00:00 2001
From: Christoph Kluge <christoph.kluge@fau.de>
Date: Tue, 5 Sep 2023 11:46:34 +0200
Subject: [PATCH 09/14] Change to prod data, allow and handle null data

- fix errors regarding render timing
- always collect time info in transFormData function
- remove size from polar plot
---
 web/frontend/src/Job.root.svelte       |  38 ++--
 web/frontend/src/Status.root.svelte    |  18 +-
 web/frontend/src/plots/Polar.svelte    |   3 +-
 web/frontend/src/plots/Roofline.svelte | 285 +++++++++++--------------
 web/frontend/src/units.js              |   4 +-
 web/frontend/src/utils.js              |  44 ++--
 6 files changed, 180 insertions(+), 212 deletions(-)

diff --git a/web/frontend/src/Job.root.svelte b/web/frontend/src/Job.root.svelte
index 153b8f9..b0db95e 100644
--- a/web/frontend/src/Job.root.svelte
+++ b/web/frontend/src/Job.root.svelte
@@ -4,6 +4,7 @@
         groupByScope,
         fetchMetricsStore,
         checkMetricDisabled,
+        transformDataForRoofline
     } from "./utils.js";
     import {
         Row,
@@ -130,8 +131,8 @@
         lazyFetchMoreMetrics();
 
     let plots = {},
+        roofWidth,
         jobTags,
-        fullWidth,
         statsTable;
     $: document.title = $initq.fetching
         ? "Loading..."
@@ -190,7 +191,6 @@
         }));
 </script>
 
-<div class="row" bind:clientWidth={fullWidth} />
 <Row>
     <Col>
         {#if $initq.error}
@@ -245,7 +245,6 @@
         {/if}
         <Col>
             <Polar
-                size={fullWidth / 4.1}
                 metrics={ccconfig[
                     `job_view_polarPlotMetrics:${$initq.data.job.cluster}`
                 ] || ccconfig[`job_view_polarPlotMetrics`]}
@@ -254,21 +253,24 @@
             />
         </Col>
         <Col>
-            <Roofline
-                width={fullWidth / 3 - 10}
-                height={fullWidth / 5}
-                cluster={clusters
-                    .find((c) => c.name == $initq.data.job.cluster)
-                    .subClusters.find(
-                        (sc) => sc.name == $initq.data.job.subCluster
-                    )}
-                flopsAny={$jobMetrics.data.jobMetrics.find(
-                    (m) => m.name == "flops_any" && m.scope == "node"
-                )}
-                memBw={$jobMetrics.data.jobMetrics.find(
-                    (m) => m.name == "mem_bw" && m.scope == "node"
-                )}
-            />
+            <div bind:clientWidth={roofWidth}>
+                <Roofline
+                    width={roofWidth - 10}
+                    height={(roofWidth / 2) - 5}
+                    renderTime={true}
+                    cluster={clusters
+                        .find((c) => c.name == $initq.data.job.cluster)
+                        .subClusters.find(
+                            (sc) => sc.name == $initq.data.job.subCluster
+                        )}
+                    data={
+                        transformDataForRoofline (
+                            $jobMetrics.data.jobMetrics.find((m) => m.name == "flops_any" && m.scope == "node").metric,
+                            $jobMetrics.data.jobMetrics.find((m) => m.name == "mem_bw" && m.scope == "node").metric
+                        )
+                    }
+                />
+            </div>
         </Col>
     {:else}
         <Col />
diff --git a/web/frontend/src/Status.root.svelte b/web/frontend/src/Status.root.svelte
index 8e162ab..73060c6 100644
--- a/web/frontend/src/Status.root.svelte
+++ b/web/frontend/src/Status.root.svelte
@@ -31,8 +31,8 @@
     export let cluster;
 
     let plotWidths = [],
-        colWidth1 = 0,
-        colWidth2 = 0
+        colWidth1,
+        colWidth2
     let from = new Date(Date.now() - 5 * 60 * 1000),
         to = new Date(Date.now());
     const topOptions = [
@@ -429,14 +429,14 @@
                         <Roofline
                             width={plotWidths[i] - 10}
                             height={300}
-                            colorDots={true}
-                            showTime={false}
                             cluster={subCluster}
-                            data={transformPerNodeDataForRoofline(
-                                $mainQuery.data.nodeMetrics.filter(
-                                    (data) => data.subCluster == subCluster.name
+                            data={
+                                transformPerNodeDataForRoofline(
+                                    $mainQuery.data.nodeMetrics.filter(
+                                        (data) => data.subCluster == subCluster.name
+                                    )
                                 )
-                            )}
+                            }
                         />
                     {/key}
                 </div>
@@ -444,7 +444,7 @@
         </Row>
     {/each}
 
-    <hr style="margin-top: -1em;" />
+    <hr/>
 
     <!-- Usage Stats as Histograms -->
 
diff --git a/web/frontend/src/plots/Polar.svelte b/web/frontend/src/plots/Polar.svelte
index e556cc2..b5c488f 100644
--- a/web/frontend/src/plots/Polar.svelte
+++ b/web/frontend/src/plots/Polar.svelte
@@ -22,7 +22,6 @@
         LineElement
     );
 
-    export let size
     export let metrics
     export let cluster
     export let jobMetrics
@@ -95,7 +94,7 @@
 </script>
 
 <div class="chart-container">
-    <Radar {data} {options} width={size} height={size}/>
+    <Radar {data} {options}/>
 </div>
 
 <style>
diff --git a/web/frontend/src/plots/Roofline.svelte b/web/frontend/src/plots/Roofline.svelte
index cc65f41..b3abd72 100644
--- a/web/frontend/src/plots/Roofline.svelte
+++ b/web/frontend/src/plots/Roofline.svelte
@@ -4,99 +4,52 @@
     import { onMount, onDestroy } from 'svelte'
     import { Card } from 'sveltestrap'
 
-    export let flopsAny = null
-    export let memBw = null
-    export let maxY = null
+    export let data = null
+    export let renderTime = false
+    export let maxY = null // Optional
     export let cluster = null
     export let width = 500
     export let height = 300
-    export let renderTime = false
-    export let data = null
 
     let plotWrapper = null
     let uplot = null
     let timeoutId = null
 
-    // Three Render-Cases:
-    // #1 Single-Job Roofline -> Has Time-Information: Use data, allow renderTime
-    // #2 MultiNode Roofline - > Has No Time-Information: Transform from nodeData, only "IST"-state of nodes, no timeInfo
-    // #3 Multi-Job Roofline as Heatmap -> Keep Original
+    /* Data Format
+     * data       = [null, [], []] // 0: null-axis required for scatter, 1: Array of XY-Array for Scatter, 2: Optional Time Info
+     * data[1][0] = [100, 200, 500, ...] // X Axis -> Intensity (Vals up to clusters' flopRateScalar value)
+     * data[1][1] = [1000, 2000, 1500, ...] // Y Axis -> Performance (Vals up to clusters' flopRateSimd value)
+     * data[2]    = [0.1, 0.15, 0.2, ...] // Color Code -> Time Information (Floats from 0 to 1) (Optional)
+    */
 
-    // Start Demo Data
-
-    function randInt(min, max) {
-        return Math.floor(Math.random() * (max - min + 1)) + min;
-    }
-
-    function randFloat(min, max) {
-        return roundTwo(((Math.random() * (max - min + 1)) + min) / randInt(1, 500));
-    }
-
-    function roundTwo(num) {
-       return  Math.round((num + Number.EPSILON) * 100) / 100
-    }
-
-    function filledArr(len, val, time) {
-        let arr = Array(len);
-
-        if (typeof val == "function") {
-            for (let i = 0; i < len; ++i)
-                arr[i] = val(i);
-        }
-        else if (time) {
-            for (let i = 0; i < len; ++i)
-                arr[i] = i / 1000;
-        }
-        else {
-            for (let i = 0; i < len; ++i)
-                arr[i] = i;
-        }
-
-        return arr;
-    }
-
-    let points = 1000;
-
-    data       = [null, []] // Null-Axis required for scatter
-    data[1][0] = filledArr(points, i => randFloat(1,5000), false) // Intensity
-    data[1][1] = filledArr(points, i => randFloat(1,5000), false) // Performance
-    // data[1][0] = filledArr(points, 0, false) // Intensity
-    // data[1][1] = filledArr(points, 0, false) // Performance
-    data[2]    = filledArr(points, 0, true) // Time Information (Optional)
-
-    // End Demo Data
+    // Check
+    // console.assert(data , "you must provide data")
 
     // Helpers
-
     function getGradientR(x) {
         if (x < 0.5) return 0
         if (x > 0.75) return 255
         x = (x - 0.5) * 4.0
         return Math.floor(x * 255.0)
     }
-
     function getGradientG(x) {
         if (x > 0.25 && x < 0.75) return 255
         if (x < 0.25) x = x * 4.0
         else          x = 1.0 - (x - 0.75) * 4.0
         return Math.floor(x * 255.0)
     }
-
     function getGradientB(x) {
         if (x < 0.25) return 255
         if (x > 0.5) return 0
         x = 1.0 - (x - 0.25) * 4.0
         return Math.floor(x * 255.0)
     }
-
     function getRGB(c) {
         return `rgb(${getGradientR(c)}, ${getGradientG(c)}, ${getGradientB(c)})`
     }
-
     function nearestThousand (num) {
         return Math.ceil(num/1000) * 1000
     }
-
     function lineIntersect(x1, y1, x2, y2, x3, y3, x4, y4) {
         let l = (y4 - y3) * (x2 - x1) - (x4 - x3) * (y2 - y1)
         let a = ((x4 - x3) * (y1 - y3) - (y4 - y3) * (x1 - x3)) / l
@@ -105,12 +58,11 @@
             y: y1 + a * (y2 - y1)
         }
     }
-
     // End Helpers
 
+    // Dot Renderers
     const drawColorPoints = (u, seriesIdx, idx0, idx1) => {
         const size = 5 * devicePixelRatio;
-
         uPlot.orient(u, seriesIdx, (series, dataX, dataY, scaleX, scaleY, valToPosX, valToPosY, xOff, yOff, xDim, yDim, moveTo, lineTo, rect, arc) => {
             let d = u.data[seriesIdx];
             let deg360 = 2 * Math.PI;
@@ -136,7 +88,6 @@
 
     const drawPoints = (u, seriesIdx, idx0, idx1) => {
         const size = 5 * devicePixelRatio;
-
         uPlot.orient(u, seriesIdx, (series, dataX, dataY, scaleX, scaleY, valToPosX, valToPosY, xOff, yOff, xDim, yDim, moveTo, lineTo, rect, arc) => {
             let d = u.data[seriesIdx];
             u.ctx.strokeStyle = getRGB(0);
@@ -158,113 +109,121 @@
         return null;
     };
 
-    function render() {
-        const opts = {
-            title: "",
-            mode: 2,
-            width: width,
-            height: height,
-            legend: {
-                show: false
-            },
-            cursor: { drag: { x: false, y: false } },
-            axes: [
-                { label: 'Intensity [FLOPS/Byte]' },
-                { label: 'Performace [GFLOPS]' }
-            ],
-            scales: {
-                x: {
-                    time: false,
-                    range: [0.01, 1000],
-                    distr: 3, // Render as log
-					log: 10, // log exp
+    // Main Function
+    function render(plotData) {
+        if (plotData) {
+            const opts = {
+                title: "",
+                mode: 2,
+                width: width,
+                height: height,
+                legend: {
+                    show: false
                 },
-                y: {
-                    range: [1.0, nearestThousand(cluster.flopRateSimd.value || maxY)],
-                    distr: 3, // Render as log
-					log: 10, // log exp
-                },
-            },
-            series: [
-                {},
-                { paths: renderTime ? drawColorPoints : drawPoints }
-            ],
-            hooks: {
-                drawClear: [
-                    u => {
-                        u.series.forEach((s, i) => {
-                            if (i > 0)
-                                s._paths = null;
-                        });
+                cursor: { drag: { x: false, y: false } },
+                axes: [
+                    { 
+                        label: 'Intensity [FLOPS/Byte]',
+                        values: (u, vals) => vals.map(v => formatNumber(v))
                     },
-                ],
-                draw: [
-                    u => { // draw roofs when cluster set
-                        // console.log(u)
-                        if (cluster != null) {
-                            const padding = u._padding // [top, right, bottom, left]
-
-                            u.ctx.strokeStyle = 'black'
-                            u.ctx.lineWidth = 2
-                            u.ctx.beginPath()
-
-                            const ycut = 0.01 * cluster.memoryBandwidth.value
-                            const scalarKnee = (cluster.flopRateScalar.value - ycut) / cluster.memoryBandwidth.value
-                            const simdKnee = (cluster.flopRateSimd.value - ycut) / cluster.memoryBandwidth.value
-                            const scalarKneeX = u.valToPos(scalarKnee, 'x', true), // Value, axis, toCanvasPixels
-                                simdKneeX = u.valToPos(simdKnee, 'x', true),
-                                flopRateScalarY = u.valToPos(cluster.flopRateScalar.value, 'y', true),
-                                flopRateSimdY = u.valToPos(cluster.flopRateSimd.value, 'y', true)
-
-                            if (scalarKneeX < width - padding[1]) { // Top horizontal roofline
-                                u.ctx.moveTo(scalarKneeX, flopRateScalarY)
-                                u.ctx.lineTo(width - padding[1], flopRateScalarY)
-                            }
-
-                            if (simdKneeX < width - padding[1]) { // Lower horitontal roofline
-                                u.ctx.moveTo(simdKneeX, flopRateSimdY)
-                                u.ctx.lineTo(width - padding[1], flopRateSimdY)
-                            }
-
-                            let x1 = u.valToPos(0.01, 'x', true),
-                                y1 = u.valToPos(ycut, 'y', true)
-                                
-                            let x2 = u.valToPos(simdKnee, 'x', true),
-                                y2 = flopRateSimdY
-
-                            let xAxisIntersect = lineIntersect(
-                                x1, y1, x2, y2,
-                                u.valToPos(0.01, 'x', true), u.valToPos(1.0, 'y', true), // X-Axis Start Coords
-                                u.valToPos(1000, 'x', true), u.valToPos(1.0, 'y', true)  // X-Axis End Coords
-                            )
-
-                            if (xAxisIntersect.x > x1) {
-                                x1 = xAxisIntersect.x
-                                y1 = xAxisIntersect.y
-                            }
-
-                            // Diagonal
-                            u.ctx.moveTo(x1, y1)
-                            u.ctx.lineTo(x2, y2)
-
-                            u.ctx.stroke()
-                            // Reset grid lineWidth
-                            u.ctx.lineWidth = 0.15
-                        }
+                    { 
+                        label: 'Performace [GFLOPS]',
+                        values: (u, vals) => vals.map(v => formatNumber(v))
                     }
-                ]
-            },
-        };
+                ],
+                scales: {
+                    x: {
+                        time: false,
+                        range: [0.01, 1000],
+                        distr: 3, // Render as log
+                        log: 10, // log exp
+                    },
+                    y: {
+                        range: [1.0, nearestThousand(cluster.flopRateSimd.value || maxY)],
+                        distr: 3, // Render as log
+                        log: 10, // log exp
+                    },
+                },
+                series: [
+                    {},
+                    { paths: renderTime ? drawColorPoints : drawPoints }
+                ],
+                hooks: {
+                    drawClear: [
+                        u => {
+                            u.series.forEach((s, i) => {
+                                if (i > 0)
+                                    s._paths = null;
+                            });
+                        },
+                    ],
+                    draw: [
+                        u => { // draw roofs when cluster set
+                            // console.log(u)
+                            if (cluster != null) {
+                                const padding = u._padding // [top, right, bottom, left]
 
-        uplot = new uPlot(opts, data, plotWrapper);
+                                u.ctx.strokeStyle = 'black'
+                                u.ctx.lineWidth = 2
+                                u.ctx.beginPath()
+
+                                const ycut = 0.01 * cluster.memoryBandwidth.value
+                                const scalarKnee = (cluster.flopRateScalar.value - ycut) / cluster.memoryBandwidth.value
+                                const simdKnee = (cluster.flopRateSimd.value - ycut) / cluster.memoryBandwidth.value
+                                const scalarKneeX = u.valToPos(scalarKnee, 'x', true), // Value, axis, toCanvasPixels
+                                    simdKneeX = u.valToPos(simdKnee, 'x', true),
+                                    flopRateScalarY = u.valToPos(cluster.flopRateScalar.value, 'y', true),
+                                    flopRateSimdY = u.valToPos(cluster.flopRateSimd.value, 'y', true)
+
+                                if (scalarKneeX < width - padding[1]) { // Top horizontal roofline
+                                    u.ctx.moveTo(scalarKneeX, flopRateScalarY)
+                                    u.ctx.lineTo(width - padding[1], flopRateScalarY)
+                                }
+
+                                if (simdKneeX < width - padding[1]) { // Lower horitontal roofline
+                                    u.ctx.moveTo(simdKneeX, flopRateSimdY)
+                                    u.ctx.lineTo(width - padding[1], flopRateSimdY)
+                                }
+
+                                let x1 = u.valToPos(0.01, 'x', true),
+                                    y1 = u.valToPos(ycut, 'y', true)
+                                    
+                                let x2 = u.valToPos(simdKnee, 'x', true),
+                                    y2 = flopRateSimdY
+
+                                let xAxisIntersect = lineIntersect(
+                                    x1, y1, x2, y2,
+                                    u.valToPos(0.01, 'x', true), u.valToPos(1.0, 'y', true), // X-Axis Start Coords
+                                    u.valToPos(1000, 'x', true), u.valToPos(1.0, 'y', true)  // X-Axis End Coords
+                                )
+
+                                if (xAxisIntersect.x > x1) {
+                                    x1 = xAxisIntersect.x
+                                    y1 = xAxisIntersect.y
+                                }
+
+                                // Diagonal
+                                u.ctx.moveTo(x1, y1)
+                                u.ctx.lineTo(x2, y2)
+
+                                u.ctx.stroke()
+                                // Reset grid lineWidth
+                                u.ctx.lineWidth = 0.15
+                            }
+                        }
+                    ]
+                },
+            };
+            uplot = new uPlot(opts, plotData, plotWrapper);
+        } else {
+            console.log('No data for roofline!')
+        }
     }
 
-    // Copied from Histogram
-    
+    // Svelte and Sizechange
     onMount(() => {
-        render()
+        render(data)
     })
-
     onDestroy(() => {
         if (uplot)
             uplot.destroy()
@@ -272,7 +231,6 @@
         if (timeoutId != null)
             clearTimeout(timeoutId)
     })
-
     function sizeChanged() {
         if (timeoutId != null)
             clearTimeout(timeoutId)
@@ -281,13 +239,10 @@
             timeoutId = null
             if (uplot)
                 uplot.destroy()
-
-            render()
+            render(data)
         }, 200)
     }
-
     $: sizeChanged(width, height)
-
 </script>
 
 {#if data != null}
diff --git a/web/frontend/src/units.js b/web/frontend/src/units.js
index d306e73..9a4defd 100644
--- a/web/frontend/src/units.js
+++ b/web/frontend/src/units.js
@@ -6,8 +6,8 @@ const power  = [1, 1e3, 1e6, 1e9, 1e12, 1e15, 1e18, 1e21]
 const prefix = ['', 'K', 'M', 'G', 'T', 'P', 'E']
 
 export function formatNumber(x) {
-    if ( isNaN(x) ) {
-        return x // Return if String , used in Histograms
+    if ( isNaN(x) || x == null) {
+        return x // Return if String or Null
     } else {
         for (let i = 0; i < prefix.length; i++)
             if (power[i] <= x && x < power[i+1])
diff --git a/web/frontend/src/utils.js b/web/frontend/src/utils.js
index c89afda..da1878a 100644
--- a/web/frontend/src/utils.js
+++ b/web/frontend/src/utils.js
@@ -6,7 +6,7 @@ import {
 } from "@urql/svelte";
 import { setContext, getContext, hasContext, onDestroy, tick } from "svelte";
 import { readable } from "svelte/store";
-import { formatNumber } from './units.js'
+// import { formatNumber } from './units.js'
 
 /*
  * Call this function only at component initialization time!
@@ -326,8 +326,11 @@ export function convert2uplot(canvasData) {
 }
 
 export function binsFromFootprint(weights, scope, values, numBins) {
-    let min = 0, max = 0
+    let min = 0, max = 0 //, median = 0
     if (values.length != 0) {
+        // Extreme, wrong peak vlaues: Filter here or backend?
+        // median = median(values)
+
         for (let x of values) {
             min = Math.min(min, x)
             max = Math.max(max, x)
@@ -364,11 +367,12 @@ export function binsFromFootprint(weights, scope, values, numBins) {
     }
 }
 
-export function transformDataForRoofline(flopsAny, memBw, renderTime) { // Uses Metric Object
+export function transformDataForRoofline(flopsAny, memBw) { // Uses Metric Objects: {series:[{},{},...], timestep:60, name:$NAME}
     const nodes = flopsAny.series.length
     const timesteps = flopsAny.series[0].data.length
 
     /* c will contain values from 0 to 1 representing the time */
+    let data = null
     const x = [], y = [], c = []
 
     if (flopsAny && memBw) {
@@ -383,24 +387,23 @@ export function transformDataForRoofline(flopsAny, memBw, renderTime) { // Uses
 
                 x.push(intensity)
                 y.push(f)
-                c.push(renderTime ? j / timesteps : 0)
+                c.push(j / timesteps)
             }
         }
     } else {
         console.warn("transformData: metrics for 'mem_bw' and/or 'flops_any' missing!")
     }
-
-    return {
-        x, y, c,
-        xLabel: 'Intensity [FLOPS/byte]',
-        yLabel: 'Performance [GFLOPS]'
+    if (x.length > 0 && y.length > 0 && c.length > 0) {
+        data = [null, [x, y], c] // for dataformat see roofline.svelte
     }
+    return data
 }
 
 //  Return something to be plotted. The argument shall be the result of the
 // `nodeMetrics` GraphQL query.
 export function transformPerNodeDataForRoofline(nodes) {
-    const x = [], y = [], c = []
+    let data = null
+    const x = [], y = []
     for (let node of nodes) {
         let flopsAny = node.metrics.find(m => m.name == 'flops_any' && m.scope == 'node')?.metric
         let memBw    = node.metrics.find(m => m.name == 'mem_bw'    && m.scope == 'node')?.metric
@@ -417,12 +420,21 @@ export function transformPerNodeDataForRoofline(nodes) {
 
         x.push(intensity)
         y.push(f)
-        c.push(0)
     }
-
-    return {
-        x, y, c,
-        xLabel: 'Intensity [FLOPS/byte]',
-        yLabel: 'Performance [GFLOPS]'
+    if (x.length > 0 && y.length > 0) {
+        data = [null, [x, y], []] // for dataformat see roofline.svelte
     }
+    return data
 }
+
+// https://stackoverflow.com/questions/45309447/calculating-median-javascript
+// function median(numbers) {
+//     const sorted = Array.from(numbers).sort((a, b) => a - b);
+//     const middle = Math.floor(sorted.length / 2);
+  
+//     if (sorted.length % 2 === 0) {
+//         return (sorted[middle - 1] + sorted[middle]) / 2;
+//     }
+  
+//     return sorted[middle];
+// }

From 0993549cacac48672486cffab538246281045d44 Mon Sep 17 00:00:00 2001
From: Christoph Kluge <christoph.kluge@fau.de>
Date: Tue, 5 Sep 2023 11:51:50 +0200
Subject: [PATCH 10/14] Remove in-dev uplot scatter from this branch

---
 web/frontend/src/plots/Scatteruplot.svelte | 627 ---------------------
 1 file changed, 627 deletions(-)
 delete mode 100644 web/frontend/src/plots/Scatteruplot.svelte

diff --git a/web/frontend/src/plots/Scatteruplot.svelte b/web/frontend/src/plots/Scatteruplot.svelte
deleted file mode 100644
index 0fac0b7..0000000
--- a/web/frontend/src/plots/Scatteruplot.svelte
+++ /dev/null
@@ -1,627 +0,0 @@
-<script>
-    import Quadtree from '@timohausmann/quadtree-js' // https://github.com/timohausmann/quadtree-js
-    import uPlot from 'uplot'
-    import { formatNumber } from '../units.js'
-    import { onMount, onDestroy } from 'svelte'
-    import { Card } from 'sveltestrap'
-
-    let plotWrapper = null
-    let uplot = null
-    let timeoutId = null
-
-    function randInt(min, max) {
-        return Math.floor(Math.random() * (max - min + 1)) + min;
-    }
-
-    function filledArr(len, val) {
-        let arr = Array(len);
-
-        if (typeof val == "function") {
-            for (let i = 0; i < len; ++i)
-                arr[i] = val(i);
-        }
-        else {
-            for (let i = 0; i < len; ++i)
-                arr[i] = val;
-        }
-
-        return arr;
-    }
-
-    let points = 10000;
-    let series = 5;
-
-    console.time("prep");
-
-    let data = filledArr(series, v => [
-        filledArr(points, i => randInt(0,500)),
-        filledArr(points, i => randInt(0,500)),
-    ]);
-
-    data[0] = null;
-
-    console.timeEnd("prep");
-
-    console.log(data);
-
-    const drawPoints = (u, seriesIdx, idx0, idx1) => {
-        const size = 5 * devicePixelRatio;
-
-        uPlot.orient(u, seriesIdx, (series, dataX, dataY, scaleX, scaleY, valToPosX, valToPosY, xOff, yOff, xDim, yDim, moveTo, lineTo, rect, arc) => {
-            let d = u.data[seriesIdx];
-
-            u.ctx.fillStyle = series.stroke();
-
-            let deg360 = 2 * Math.PI;
-
-            console.time("points");
-
-        //	let cir = new Path2D();
-        //	cir.moveTo(0, 0);
-        //	arc(cir, 0, 0, 3, 0, deg360);
-
-            // Create transformation matrix that moves 200 points to the right
-        //	let m = document.createElementNS('http://www.w3.org/2000/svg', 'svg').createSVGMatrix();
-        //	m.a = 1;   m.b = 0;
-        //	m.c = 0;   m.d = 1;
-        //	m.e = 200; m.f = 0;
-
-
-            let p = new Path2D();
-
-            for (let i = 0; i < d[0].length; i++) {
-                let xVal = d[0][i];
-                let yVal = d[1][i];
-
-                if (xVal >= scaleX.min && xVal <= scaleX.max && yVal >= scaleY.min && yVal <= scaleY.max) {
-                    let cx = valToPosX(xVal, scaleX, xDim, xOff);
-                    let cy = valToPosY(yVal, scaleY, yDim, yOff);
-
-                    p.moveTo(cx + size/2, cy);
-                //	arc(p, cx, cy, 3, 0, deg360);
-                    arc(p, cx, cy, size/2, 0, deg360);
-
-                //	m.e = cx;
-                //	m.f = cy;
-                //	p.addPath(cir, m);
-
-                //	qt.add({x: cx - 1.5, y: cy - 1.5, w: 3, h: 3, sidx: seriesIdx, didx: i});
-                }
-            }
-
-            console.timeEnd("points");
-
-            u.ctx.fill(p);
-        });
-
-        return null;
-    };
-
-    const drawPoints2 = (u, seriesIdx, idx0, idx1) => {
-        uPlot.orient(u, seriesIdx, (series, dataX, dataY, scaleX, scaleY, valToPosX, valToPosY, xOff, yOff, xDim, yDim, moveTo, lineTo, rect, arc) => {
-            let d = u.data[seriesIdx];
-
-            u.ctx.fillStyle = series.fill();
-
-            let deg360 = 2 * Math.PI;
-
-            console.time("points");
-
-        //	let cir = new Path2D();
-        //	cir.moveTo(0, 0);
-        //	arc(cir, 0, 0, 3, 0, deg360);
-
-            // Create transformation matrix that moves 200 points to the right
-        //	let m = document.createElementNS('http://www.w3.org/2000/svg', 'svg').createSVGMatrix();
-        //	m.a = 1;   m.b = 0;
-        //	m.c = 0;   m.d = 1;
-        //	m.e = 200; m.f = 0;
-
-
-            let p = new Path2D();
-
-            let strokeWidth = 1;
-
-            for (let i = 0; i < d[0].length; i++) {
-                let cx = valToPosX(d[0][i], scaleX, xDim, xOff);
-                let cy = valToPosY(d[1][i], scaleY, yDim, yOff);
-
-                let size = d[2][i] * devicePixelRatio;
-
-                p.moveTo(cx + size, cy);
-                arc(p, cx, cy, size, 0, deg360);
-                qt.add({
-                    x: cx - size - strokeWidth/2 - u.bbox.left,
-                    y: cy - size - strokeWidth/2 - u.bbox.top,
-                    w: size * 2 + strokeWidth,
-                    h: size * 2 + strokeWidth,
-                    sidx: seriesIdx,
-                    didx: i
-                });
-            }
-
-            console.timeEnd("points");
-
-            u.ctx.fill(p);
-
-            u.ctx.lineWidth = strokeWidth;
-            u.ctx.strokeStyle = series.stroke();
-            u.ctx.stroke(p);
-        });
-
-        return null;
-    };
-
-    // shape?
-    const makeDrawPoints3 = (opts) => {
-        let {/*size,*/ disp, each = () => {}} = opts;
-
-        return (u, seriesIdx, idx0, idx1) => {
-            uPlot.orient(u, seriesIdx, (series, dataX, dataY, scaleX, scaleY, valToPosX, valToPosY, xOff, yOff, xDim, yDim, moveTo, lineTo, rect, arc) => {
-                let d = u.data[seriesIdx];
-
-                let strokeWidth = 1;
-
-                u.ctx.save();
-
-                u.ctx.rect(u.bbox.left, u.bbox.top, u.bbox.width, u.bbox.height);
-                u.ctx.clip();
-
-                u.ctx.fillStyle = series.fill();
-                u.ctx.strokeStyle = series.stroke();
-                u.ctx.lineWidth = strokeWidth;
-
-                let deg360 = 2 * Math.PI;
-
-                console.time("points");
-
-            //	let cir = new Path2D();
-            //	cir.moveTo(0, 0);
-            //	arc(cir, 0, 0, 3, 0, deg360);
-
-                // Create transformation matrix that moves 200 points to the right
-            //	let m = document.createElementNS('http://www.w3.org/2000/svg', 'svg').createSVGMatrix();
-            //	m.a = 1;   m.b = 0;
-            //	m.c = 0;   m.d = 1;
-            //	m.e = 200; m.f = 0;
-
-                // compute bubble dims
-                let sizes = disp.size.values(u, seriesIdx, idx0, idx1);
-
-                // todo: this depends on direction & orientation
-                // todo: calc once per redraw, not per path
-                let filtLft = u.posToVal(-maxSize / 2, scaleX.key);
-                let filtRgt = u.posToVal(u.bbox.width / devicePixelRatio + maxSize / 2, scaleX.key);
-                let filtBtm = u.posToVal(u.bbox.height / devicePixelRatio + maxSize / 2, scaleY.key);
-                let filtTop = u.posToVal(-maxSize / 2, scaleY.key);
-
-                for (let i = 0; i < d[0].length; i++) {
-                    let xVal = d[0][i];
-                    let yVal = d[1][i];
-                    let size = sizes[i] * devicePixelRatio;
-
-                    if (xVal >= filtLft && xVal <= filtRgt && yVal >= filtBtm && yVal <= filtTop) {
-                        let cx = valToPosX(xVal, scaleX, xDim, xOff);
-                        let cy = valToPosY(yVal, scaleY, yDim, yOff);
-
-                        u.ctx.moveTo(cx + size/2, cy);
-                        u.ctx.beginPath();
-                        u.ctx.arc(cx, cy, size/2, 0, deg360);
-                        u.ctx.fill();
-                        u.ctx.stroke();
-
-                        each(u, seriesIdx, i,
-                            cx - size/2 - strokeWidth/2,
-                            cy - size/2 - strokeWidth/2,
-                            size + strokeWidth,
-                            size + strokeWidth
-                        );
-                    }
-                }
-
-                console.timeEnd("points");
-
-                u.ctx.restore();
-            });
-
-            return null;
-        };
-    };
-
-    // https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/isPointInPath
-    let qt;
-
-    let pxRatio;
-
-    function setPxRatio() {
-        pxRatio = devicePixelRatio;
-    }
-
-    function guardedRange(u, min, max) {
-        if (max == min) {
-            if (min == null) {
-                min = 0;
-                max = 100;
-            }
-            else {
-                let delta = Math.abs(max) || 100;
-                max += delta;
-                min -= delta;
-            }
-        }
-
-        return [min, max];
-    }
-
-    setPxRatio();
-
-    window.addEventListener('dppxchange', setPxRatio);
-
-    const opts = {
-        title: "Scatter Plot",
-        mode: 2,
-        width: 1920,
-        height: 600,
-        legend: {
-            live: false,
-        },
-        hooks: {
-            drawClear: [
-                u => {
-                //	qt = qt || new Quadtree(0, 0, u.bbox.width, u.bbox.height);
-
-                //	qt.clear();
-
-                    // force-clear the path cache to cause drawBars() to rebuild new quadtree
-                    u.series.forEach((s, i) => {
-                        if (i > 0)
-                            s._paths = null;
-                    });
-                },
-            ],
-        },
-        scales: {
-            x: {
-                time: false,
-            //	auto: false,
-            //	range: [0, 500],
-                // remove any scale padding, use raw data limits
-                range: guardedRange,
-            },
-            y: {
-            //	auto: false,
-            //	range: [0, 500],
-                // remove any scale padding, use raw data limits
-                range: guardedRange,
-            },
-        },
-        series: [
-            {
-                /*
-                stroke: "red",
-                fill: "rgba(255,0,0,0.1)",
-                paths: (u, seriesIdx, idx0, idx1) => {
-                    uPlot.orient(u, seriesIdx, (series, dataX, dataY, scaleX, scaleY, valToPosX, valToPosY, xOff, yOff, xDim, yDim) => {
-                        let d = u.data[seriesIdx];
-
-                        console.log(d);
-                    });
-
-                    return null;
-                },
-                */
-            },
-            {
-                stroke: "red",
-                fill: "rgba(255,0,0,0.1)",
-                paths: drawPoints,
-            },
-            {
-                stroke: "green",
-                fill: "rgba(0,255,0,0.1)",
-                paths: drawPoints,
-            },
-            {
-                stroke: "blue",
-                fill: "rgba(0,0,255,0.1)",
-                paths: drawPoints,
-            },
-            {
-                stroke: "magenta",
-                fill: "rgba(0,0,255,0.1)",
-                paths: drawPoints,
-            },
-        ],
-    };
-
-    let u = new uPlot(opts, data, document.body);
-
-
-
-    points = 50;
-
-    // size range in pixels (diameter)
-    let minSize = 6;
-    let maxSize = 60;
-
-    let maxArea = Math.PI * (maxSize / 2) ** 2;
-    let minArea = Math.PI * (minSize / 2) ** 2;
-
-    // quadratic scaling (px area)
-    function getSize(value, minValue, maxValue) {
-        let pct = value / maxValue;
-        // clamp to min area
-        //let area = Math.max(maxArea * pct, minArea);
-        let area = maxArea * pct;
-        return Math.sqrt(area / Math.PI) * 2;
-    }
-
-    function getSizeMinMax(u) {
-        let minValue = Infinity;
-        let maxValue = -Infinity;
-
-        for (let i = 1; i < u.series.length; i++) {
-            let sizeData = u.data[i][2];
-
-            for (let j = 0; j < sizeData.length; j++) {
-                minValue = Math.min(minValue, sizeData[j]);
-                maxValue = Math.max(maxValue, sizeData[j]);
-            }
-        }
-
-        return [minValue, maxValue];
-    }
-
-    let drawPoints3 = makeDrawPoints3({
-        disp: {
-            size: {
-                unit: 3, // raw CSS pixels
-            //	discr: true,
-                values: (u, seriesIdx, idx0, idx1) => {
-                    // TODO: only run once per setData() call
-                    let [minValue, maxValue] = getSizeMinMax(u);
-                    return u.data[seriesIdx][2].map(v => getSize(v, minValue, maxValue));
-                },
-            },
-        },
-        each: (u, seriesIdx, dataIdx, lft, top, wid, hgt) => {
-            // we get back raw canvas coords (included axes & padding). translate to the plotting area origin
-            lft -= u.bbox.left;
-            top -= u.bbox.top;
-            qt.add({x: lft, y: top, w: wid, h: hgt, sidx: seriesIdx, didx: dataIdx});
-        },
-    });
-
-    let data2 = filledArr(series, v => [
-        filledArr(points, i => randInt(0,500)),
-        filledArr(points, i => randInt(0,500)),
-        filledArr(points, i => randInt(1,10000)),  // bubble size, population
-        filledArr(points, i => (Math.random() + 1).toString(36).substring(7)), // label / country name
-    ]);
-
-    data2[0] = null;
-    data2[1][1] = data2[1][1].map(v => v == 0 ? v : v * -1);
-
-    /*
-    const legendValue = (u, val, seriesIdx, idx) => {
-        let [x, y, size] = u.data[seriesIdx];
-        return `${x[idx]}, ${y[idx]}, ${size[idx]}`;
-    };
-    */
-
-    const legendValues = (u, seriesIdx, dataIdx) => {
-        // when data null, it's initial schema probe (also u.status == 0)
-        if (u.data == null || dataIdx == null || hRect == null || hRect.sidx != seriesIdx) {
-            return {
-                "Country":    '<NUM COUNTRIES>',
-                "Population": '<TOTAL POP>',
-                "GDP":        '<TOTAL GDP>',
-                "Income":     '<AVG INCOME>'
-            };
-        }
-
-        let [x, y, size, label] = u.data[seriesIdx];
-
-        return {
-            "Country":    label[hRect.didx],
-            "Population": size[hRect.didx],
-            "GDP":        '$' + x[hRect.didx],
-            "Income":     '$' + y[hRect.didx],
-        };
-    };
-
-    // hovered
-    let hRect;
-
-    const opts2 = {
-        title: "Bubble Plot",
-        mode: 2,
-        width: 1920,
-        height: 600,
-        legend: {
-        //	live: false,
-        },
-        cursor: {
-            dataIdx: (u, seriesIdx) => {
-                if (seriesIdx == 1) {
-                    hRect = null;
-
-                    let dist = Infinity;
-                    let cx = u.cursor.left * pxRatio;
-                    let cy = u.cursor.top * pxRatio;
-
-                    // !!! https://github.com/timohausmann/quadtree-js/blob/master/docs/simple.html
-                    // Rewrite mouseOver based on this example
-
-                    // let overlaps =  qt.retrieve({x:cx, y:cy, width:1, height:1})
-                    
-                    // for(var i=0;i<overlaps.length;i=i+1) {
-                    //     overlaps[i].check = true;
-                    // }
-
-                    // OLD!
-                    qt.get(cx, cy, 1, 1, o => {
-                        if (pointWithin(cx, cy, o.x, o.y, o.x + o.w, o.y + o.h)) {
-                            let ocx = o.x + o.w / 2;
-                            let ocy = o.y + o.h / 2;
-
-                            let dx = ocx - cx;
-                            let dy = ocy - cy;
-
-                            let d = Math.sqrt(dx ** 2 + dy ** 2);
-
-                            // test against radius for actual hover
-                            if (d <= o.w / 2) {
-                                // only hover bbox with closest distance
-                                if (d <= dist) {
-                                    dist = d;
-                                    hRect = o;
-                                }
-                            }
-                        }
-                    });
-                }
-
-                return hRect && seriesIdx == hRect.sidx ? hRect.didx : null;
-            },
-            points: {
-                size: (u, seriesIdx) => {
-                    return hRect && seriesIdx == hRect.sidx ? hRect.w / devicePixelRatio : 0;
-                }
-            }
-        },
-        hooks: {
-            drawClear: [
-                u => {
-                    qt = qt || new Quadtree(0, 0, u.bbox.width, u.bbox.height);
-
-                    qt.clear();
-
-                    // force-clear the path cache to cause drawBars() to rebuild new quadtree
-                    u.series.forEach((s, i) => {
-                        if (i > 0)
-                            s._paths = null;
-                    });
-                },
-            ],
-        },
-        axes: [
-            {
-                label: "GDP",
-            },
-            {
-                label: "Income 1",
-            },
-            {
-                side: 1,
-                scale: 'y2',
-                stroke: "red",
-                label: "Income 2",
-                grid: {
-                    show: false,
-                },
-            },
-        ],
-        scales: {
-            x: {
-                time: false,
-            //	auto: false,
-            //	range: [0, 500],
-
-                // remove any scale padding, use raw data limits
-                range: guardedRange,
-            },
-            y: {
-            //	auto: false,
-            //	range: [0, 500],
-
-                // remove any scale padding, use raw data limits
-                range: guardedRange,
-            },
-            y2: {
-                dir: 1,
-                ori: 1,
-                range: guardedRange,
-            }
-        },
-        series: [
-            null,
-            {
-                facets: [
-                    {
-                        scale: 'x',
-                        auto: true,
-                    },
-                    {
-                        scale: 'y2',
-                        auto: true,
-                    }
-                ],
-                label: "Region A",
-                stroke: "red",
-                fill: "rgba(255,0,0,0.3)",
-                paths: drawPoints3,
-                values: legendValues,
-            },
-            {
-                facets: [
-                    {
-                        scale: 'x',
-                        auto: true,
-                    },
-                    {
-                        scale: 'y',
-                        auto: true,
-                    }
-                ],
-                label: "Region B",
-                stroke: "green",
-                fill: "rgba(0,255,0,0.3)",
-                paths: drawPoints3,
-                values: legendValues,
-            },
-            {
-                facets: [
-                    {
-                        scale: 'x',
-                        auto: true,
-                    },
-                    {
-                        scale: 'y',
-                        auto: true,
-                    }
-                ],
-                label: "Region C",
-                stroke: "blue",
-                fill: "rgba(0,0,255,0.3)",
-                paths: drawPoints3,
-                values: legendValues,
-            },
-            {
-                facets: [
-                    {
-                        scale: 'x',
-                        auto: true,
-                    },
-                    {
-                        scale: 'y',
-                        auto: true,
-                    }
-                ],
-                label: "Region E",
-                stroke: "orange",
-                fill: "rgba(255,128,0,0.3)",
-                paths: drawPoints3,
-                values: legendValues,
-            },
-        ],
-    };
-
-    let u2 = new uPlot(opts2, data2, document.body);
-</script>
-
-{#if data != null}
-    <div bind:this={plotWrapper}/>
-{:else}
-    <Card class="mx-4" body color="warning">Cannot render scatter: No data!</Card>
-{/if}
\ No newline at end of file

From c4a9fcc1caa92dbc6092d98fc87d8c9908be5675 Mon Sep 17 00:00:00 2001
From: Christoph Kluge <christoph.kluge@fau.de>
Date: Tue, 5 Sep 2023 12:00:58 +0200
Subject: [PATCH 11/14] feat: Implemented rooflineplot with uPlot

---
 web/frontend/src/plots/Roofline.svelte | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/web/frontend/src/plots/Roofline.svelte b/web/frontend/src/plots/Roofline.svelte
index b3abd72..446513e 100644
--- a/web/frontend/src/plots/Roofline.svelte
+++ b/web/frontend/src/plots/Roofline.svelte
@@ -22,9 +22,6 @@
      * data[2]    = [0.1, 0.15, 0.2, ...] // Color Code -> Time Information (Floats from 0 to 1) (Optional)
     */
 
-    // Check
-    // console.assert(data , "you must provide data")
-
     // Helpers
     function getGradientR(x) {
         if (x < 0.5) return 0
@@ -82,7 +79,6 @@
                 u.ctx.fill(p);
             }
         });
-
         return null;
     };
 

From 827a85412e3dc2a9698adadc92492c334f739347 Mon Sep 17 00:00:00 2001
From: Christoph Kluge <christoph.kluge@fau.de>
Date: Tue, 5 Sep 2023 14:55:36 +0200
Subject: [PATCH 12/14] Fix polar and roofline sizes in jobView

- add option for adaptable roofline sizing
---
 web/frontend/src/Job.root.svelte       | 33 +++++++++++---------------
 web/frontend/src/Status.root.svelte    |  1 +
 web/frontend/src/plots/Polar.svelte    |  3 ++-
 web/frontend/src/plots/Roofline.svelte | 10 ++++----
 4 files changed, 22 insertions(+), 25 deletions(-)

diff --git a/web/frontend/src/Job.root.svelte b/web/frontend/src/Job.root.svelte
index b0db95e..e2bba63 100644
--- a/web/frontend/src/Job.root.svelte
+++ b/web/frontend/src/Job.root.svelte
@@ -131,7 +131,6 @@
         lazyFetchMoreMetrics();
 
     let plots = {},
-        roofWidth,
         jobTags,
         statsTable;
     $: document.title = $initq.fetching
@@ -253,24 +252,20 @@
             />
         </Col>
         <Col>
-            <div bind:clientWidth={roofWidth}>
-                <Roofline
-                    width={roofWidth - 10}
-                    height={(roofWidth / 2) - 5}
-                    renderTime={true}
-                    cluster={clusters
-                        .find((c) => c.name == $initq.data.job.cluster)
-                        .subClusters.find(
-                            (sc) => sc.name == $initq.data.job.subCluster
-                        )}
-                    data={
-                        transformDataForRoofline (
-                            $jobMetrics.data.jobMetrics.find((m) => m.name == "flops_any" && m.scope == "node").metric,
-                            $jobMetrics.data.jobMetrics.find((m) => m.name == "mem_bw" && m.scope == "node").metric
-                        )
-                    }
-                />
-            </div>
+            <Roofline
+                renderTime={true}
+                cluster={clusters
+                    .find((c) => c.name == $initq.data.job.cluster)
+                    .subClusters.find(
+                        (sc) => sc.name == $initq.data.job.subCluster
+                    )}
+                data={
+                    transformDataForRoofline (
+                        $jobMetrics.data.jobMetrics.find((m) => m.name == "flops_any" && m.scope == "node").metric,
+                        $jobMetrics.data.jobMetrics.find((m) => m.name == "mem_bw" && m.scope == "node").metric
+                    )
+                }
+            />
         </Col>
     {:else}
         <Col />
diff --git a/web/frontend/src/Status.root.svelte b/web/frontend/src/Status.root.svelte
index 73060c6..fffbfde 100644
--- a/web/frontend/src/Status.root.svelte
+++ b/web/frontend/src/Status.root.svelte
@@ -427,6 +427,7 @@
                 <div bind:clientWidth={plotWidths[i]}>
                     {#key $mainQuery.data.nodeMetrics}
                         <Roofline
+                            allowSizeChange={true}
                             width={plotWidths[i] - 10}
                             height={300}
                             cluster={subCluster}
diff --git a/web/frontend/src/plots/Polar.svelte b/web/frontend/src/plots/Polar.svelte
index b5c488f..3aeb74d 100644
--- a/web/frontend/src/plots/Polar.svelte
+++ b/web/frontend/src/plots/Polar.svelte
@@ -25,6 +25,7 @@
     export let metrics
     export let cluster
     export let jobMetrics
+    export let height = 350
 
     const metricConfig = getContext('metrics')
 
@@ -94,7 +95,7 @@
 </script>
 
 <div class="chart-container">
-    <Radar {data} {options}/>
+    <Radar {data} {options} {height}/>
 </div>
 
 <style>
diff --git a/web/frontend/src/plots/Roofline.svelte b/web/frontend/src/plots/Roofline.svelte
index 446513e..f394293 100644
--- a/web/frontend/src/plots/Roofline.svelte
+++ b/web/frontend/src/plots/Roofline.svelte
@@ -6,10 +6,10 @@
 
     export let data = null
     export let renderTime = false
-    export let maxY = null // Optional
+    export let allowSizeChange = false
     export let cluster = null
-    export let width = 500
-    export let height = 300
+    export let width = 600
+    export let height = 350
 
     let plotWrapper = null
     let uplot = null
@@ -135,7 +135,7 @@
                         log: 10, // log exp
                     },
                     y: {
-                        range: [1.0, nearestThousand(cluster.flopRateSimd.value || maxY)],
+                        range: [1.0, cluster?.flopRateSimd?.value ? nearestThousand(cluster.flopRateSimd.value) : 10000],
                         distr: 3, // Render as log
                         log: 10, // log exp
                     },
@@ -238,7 +238,7 @@
             render(data)
         }, 200)
     }
-    $: sizeChanged(width, height)
+    $: if (allowSizeChange) sizeChanged(width, height)
 </script>
 
 {#if data != null}

From bd6f38b4f374a2c4face165128f7d2d307de0ece Mon Sep 17 00:00:00 2001
From: Christoph Kluge <christoph.kluge@fau.de>
Date: Tue, 5 Sep 2023 15:15:09 +0200
Subject: [PATCH 13/14] job view layout fixes, fix polar plot axis scales

---
 web/frontend/src/Job.root.svelte    |  4 +---
 web/frontend/src/plots/Polar.svelte | 10 ++++++++--
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/web/frontend/src/Job.root.svelte b/web/frontend/src/Job.root.svelte
index e2bba63..f7a7c62 100644
--- a/web/frontend/src/Job.root.svelte
+++ b/web/frontend/src/Job.root.svelte
@@ -272,8 +272,7 @@
         <Col />
     {/if}
 </Row>
-<br />
-<Row>
+<Row class="mb-3">
     <Col xs="auto">
         {#if $initq.data}
             <TagManagement job={$initq.data.job} bind:jobTags />
@@ -290,7 +289,6 @@
         <Zoom timeseriesPlots={plots} />
     </Col> -->
 </Row>
-<br />
 <Row>
     <Col>
         {#if $jobMetrics.error}
diff --git a/web/frontend/src/plots/Polar.svelte b/web/frontend/src/plots/Polar.svelte
index 3aeb74d..59f89f3 100644
--- a/web/frontend/src/plots/Polar.svelte
+++ b/web/frontend/src/plots/Polar.svelte
@@ -25,7 +25,7 @@
     export let metrics
     export let cluster
     export let jobMetrics
-    export let height = 350
+    export let height = 365
 
     const metricConfig = getContext('metrics')
 
@@ -89,7 +89,13 @@
     // No custom defined options but keep for clarity 
     const options = {
         maintainAspectRatio: false,
-        animation: false
+        animation: false,
+        scales: { // fix scale
+            r: {
+                suggestedMin: 0.0,
+                suggestedMax: 1.0
+            }
+        }
     }
 
 </script>

From df7217f79c3febd8f0f04e6b5d059c6ff454eeb0 Mon Sep 17 00:00:00 2001
From: Jan Eitzinger <jan@moebiusband.org>
Date: Tue, 5 Sep 2023 15:17:39 +0200
Subject: [PATCH 14/14] Change margins

---
 web/frontend/src/Job.root.svelte | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/web/frontend/src/Job.root.svelte b/web/frontend/src/Job.root.svelte
index e2bba63..18a075b 100644
--- a/web/frontend/src/Job.root.svelte
+++ b/web/frontend/src/Job.root.svelte
@@ -272,8 +272,7 @@
         <Col />
     {/if}
 </Row>
-<br />
-<Row>
+<Row class="mb-2">
     <Col xs="auto">
         {#if $initq.data}
             <TagManagement job={$initq.data.job} bind:jobTags />
@@ -290,7 +289,6 @@
         <Zoom timeseriesPlots={plots} />
     </Col> -->
 </Row>
-<br />
 <Row>
     <Col>
         {#if $jobMetrics.error}
@@ -337,8 +335,7 @@
         {/if}
     </Col>
 </Row>
-<br />
-<Row>
+<Row class="mt-2">
     <Col>
         {#if $initq.data}
             <TabContent>