From 390bc4c2232b1c7df43d6fc6fe83aaf29389d7ee Mon Sep 17 00:00:00 2001
From: Christoph Kluge <christoph.kluge@fau.de>
Date: Fri, 7 Oct 2022 15:01:14 +0200
Subject: [PATCH] Resize gauge card, hide scale on roofline, set colorDots to
 true

- Scale display switchable by new option 'showTime'
---
 web/frontend/src/Status.root.svelte    | 10 +++++-----
 web/frontend/src/plots/Roofline.svelte | 13 +++++++------
 2 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/web/frontend/src/Status.root.svelte b/web/frontend/src/Status.root.svelte
index 3a03433..0153b18 100644
--- a/web/frontend/src/Status.root.svelte
+++ b/web/frontend/src/Status.root.svelte
@@ -102,7 +102,7 @@
 {#if $initq.data && $mainQuery.data}
     {#each $initq.data.clusters.find(c => c.name == cluster).subClusters as subCluster, i}
         <Row cols={2} class="mb-3 justify-content-center">
-            <Col xs="3" class="px-3">
+            <Col xs="4" class="px-3">
                 <Card class="h-auto mt-1">
                     <CardHeader>
                         <CardTitle class="mb-0">SubCluster "{subCluster.name}"</CardTitle>
@@ -111,17 +111,17 @@
                         <Table>
                             <tr>
                                 <th scope="col">Allocated Nodes</th>
-                                <td style="min-width: 75px;"><div class="col"><Progress value={allocatedNodes[subCluster.name]} max={subCluster.numberOfNodes}/></div></td>
+                                <td style="min-width: 100px;"><div class="col"><Progress value={allocatedNodes[subCluster.name]} max={subCluster.numberOfNodes}/></div></td>
                                 <td>({allocatedNodes[subCluster.name]} Nodes / {subCluster.numberOfNodes} Total Nodes)</td>
                             </tr>
                             <tr>
                                 <th scope="col">Flop Rate (Any) <Icon name="info-circle" class="p-1" style="cursor: help;" title="Flops[Any] = (Flops[Double] x 2) + Flops[Single]"/></th>
-                                <td style="min-width: 75px;"><div class="col"><Progress value={flopRate[subCluster.name]} max={subCluster.flopRateSimd * subCluster.numberOfNodes}/></div></td>
+                                <td style="min-width: 100px;"><div class="col"><Progress value={flopRate[subCluster.name]} max={subCluster.flopRateSimd * subCluster.numberOfNodes}/></div></td>
                                 <td>({formatNumber(flopRate[subCluster.name])}Flops/s / {formatNumber((subCluster.flopRateSimd * subCluster.numberOfNodes))}Flops/s [Max])</td>
                             </tr>
                             <tr>
                                 <th scope="col">MemBw Rate</th>
-                                <td style="min-width: 75px;"><div class="col"><Progress value={memBwRate[subCluster.name]} max={subCluster.memoryBandwidth * subCluster.numberOfNodes}/></div></td>
+                                <td style="min-width: 100px;"><div class="col"><Progress value={memBwRate[subCluster.name]} max={subCluster.memoryBandwidth * subCluster.numberOfNodes}/></div></td>
                                 <td>({formatNumber(memBwRate[subCluster.name])}Byte/s / {formatNumber((subCluster.memoryBandwidth * subCluster.numberOfNodes))}Byte/s [Max])</td>
                             </tr>
                         </Table>
@@ -132,7 +132,7 @@
                 <div bind:clientWidth={plotWidths[i]}>
                     {#key $mainQuery.data.nodeMetrics}
                         <Roofline
-                            width={plotWidths[i] - 10} height={300} colorDots={true} cluster={subCluster}
+                            width={plotWidths[i] - 10} height={300} colorDots={true} showTime={false} cluster={subCluster}
                             data={transformPerNodeData($mainQuery.data.nodeMetrics.filter(data => data.subCluster == subCluster.name))} />
                     {/key}
                 </div>
diff --git a/web/frontend/src/plots/Roofline.svelte b/web/frontend/src/plots/Roofline.svelte
index d385f0d..dbf0431 100644
--- a/web/frontend/src/plots/Roofline.svelte
+++ b/web/frontend/src/plots/Roofline.svelte
@@ -41,7 +41,7 @@
         let a = ((x4 - x3) * (y1 - y3) - (y4 - y3) * (x1 - x3)) / l
         return {
             x: x1 + a * (x2 - x1),
-            y: y1 + a * (y2 - y1) 
+            y: y1 + a * (y2 - y1)
         }
     }
 
@@ -67,7 +67,7 @@
             return 2
     }
 
-    function render(ctx, data, cluster, width, height, colorDots, defaultMaxY) {
+    function render(ctx, data, cluster, width, height, colorDots, showTime, defaultMaxY) {
         if (width <= 0)
             return
 
@@ -222,8 +222,8 @@
         }
         ctx.stroke()
 
-        if (colorDots && data.x && data.y) {
-            // The Color Scale
+        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
@@ -305,6 +305,7 @@
     export let height
     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!")
@@ -327,7 +328,7 @@
 
         canvasElement.width = width
         canvasElement.height = height
-        render(ctx, data, cluster, width, height, colorDots, maxY)
+        render(ctx, data, cluster, width, height, colorDots, showTime, maxY)
     })
 
     let timeoutId = null
@@ -347,7 +348,7 @@
             timeoutId = null
             canvasElement.width = width
             canvasElement.height = height
-            render(ctx, data, cluster, width, height, colorDots, maxY)
+            render(ctx, data, cluster, width, height, colorDots, showTime, maxY)
         }, 250)
     }