From 10194105e3a86e45544018ecb025ad83204b800b Mon Sep 17 00:00:00 2001
From: Christoph Kluge <christoph.kluge@fau.de>
Date: Fri, 8 Aug 2025 13:50:09 +0200
Subject: [PATCH] fix color overflow, add info if no status data

---
 web/frontend/src/generic/plots/Pie.svelte | 42 ++++++++------------
 web/frontend/src/status/DevelDash.svelte  |  5 ++-
 web/frontend/src/status/StatusDash.svelte | 48 +----------------------
 web/frontend/src/status/UsageDash.svelte  | 13 +++++-
 4 files changed, 32 insertions(+), 76 deletions(-)

diff --git a/web/frontend/src/generic/plots/Pie.svelte b/web/frontend/src/generic/plots/Pie.svelte
index a0312c4..c3345c7 100644
--- a/web/frontend/src/generic/plots/Pie.svelte
+++ b/web/frontend/src/generic/plots/Pie.svelte
@@ -14,7 +14,22 @@
 -->
 
 <script module>
+  // https://www.learnui.design/tools/data-color-picker.html#divergent: 11, Shallow Green-Red
   export const colors = [
+    "#00876c",
+    "#449c6e",
+    "#70af6f",
+    "#9bc271",
+    "#c8d377",
+    "#f7e382",
+    "#f6c468",
+    "#f3a457",
+    "#ed834e",
+    "#e3614d",
+    "#d43d51",
+  ];
+  // https://www.learnui.design/tools/data-color-picker.html#palette: 12, Colorwheel-Like
+  export const altColors = [
     "#0022bb",
     "#ba0098",
     "#fa0066",
@@ -27,32 +42,7 @@
     "#006d77",
     "#005671",
     "#003f5c",
-    // Var 2
-    // "#00876c",
-    // "#449c6e",
-    // "#70af6f",
-    // "#9bc271",
-    // "#c8d377",
-    // "#f7e382",
-    // "#f6c468",
-    // "#f3a457",
-    // "#ed834e",
-    // "#e3614d",
-    // "#d43d51",
-    // Var 3
-    // "#ab0000",
-    // "#c33b00",
-    // "#d96000",
-    // "#ed8300",
-    // "#ffa600",
-    // "#ff7c43",
-    // "#f95d6a",
-    // "#d45087",
-    // "#a05195",
-    // "#665191",
-    // "#2f4b7c",
-    // "#003f5c"
-  ];
+  ]
   // http://tsitsul.in/blog/coloropt/ : 12 colors normal
   export const cbColors = [
     'rgb(235,172,35)',
diff --git a/web/frontend/src/status/DevelDash.svelte b/web/frontend/src/status/DevelDash.svelte
index f54e51b..e0f4960 100644
--- a/web/frontend/src/status/DevelDash.svelte
+++ b/web/frontend/src/status/DevelDash.svelte
@@ -22,7 +22,7 @@
   } from "../generic/utils.js";
   //import Roofline from "../generic/plots/Roofline.svelte";
   import Roofline from "../generic/plots/Roofline.svelte";
-  import Pie, { colors } from "../generic/plots/Pie.svelte";
+  import Pie, { cbColors, colors } from "../generic/plots/Pie.svelte";
   import { formatTime } from "../generic/units.js";
 
   /* Svelte 5 Props */
@@ -40,6 +40,7 @@
   let plotWidths = $state([]);
   let statesWidth = $state(0);
   let healthWidth = $state(0);
+  let cbmode = $state(false);
   // let nodesCounts = $state({});
   // let jobsJounts = $state({});
 
@@ -449,7 +450,7 @@
           </tr>
           {#each refinedHealthData as hd, i}
             <tr>
-              <td><Icon name="circle-fill" style="color: {colors[i]};" /></td>
+              <td><Icon name="circle-fill" style="color: {cbmode ? cbColors[i] : colors[i]};" /></td>
               <td>{hd.state}</td>
               <td>{hd.count}</td>
             </tr>
diff --git a/web/frontend/src/status/StatusDash.svelte b/web/frontend/src/status/StatusDash.svelte
index a87886f..f3fdd9b 100644
--- a/web/frontend/src/status/StatusDash.svelte
+++ b/web/frontend/src/status/StatusDash.svelte
@@ -404,52 +404,6 @@
                   >
                 </tr>
               {/if}
-              <hr class="my-1"/>
-              <!-- <tr class="py-2">
-                <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: 100px;"
-                  ><div class="col">
-                    <Progress
-                      value={flopRate[subCluster.name]}
-                      max={subCluster.flopRateSimd.value *
-                        subCluster.numberOfNodes}
-                    />
-                  </div></td
-                >
-                <td>
-                  {scaleNumbers(
-                    flopRate[subCluster.name],
-                    subCluster.flopRateSimd.value * subCluster.numberOfNodes,
-                    flopRateUnitPrefix[subCluster.name],
-                  )}{flopRateUnitBase[subCluster.name]} [Max]
-                </td>
-              </tr>
-              <tr class="py-2">
-                <th scope="col">MemBw Rate</th>
-                <td style="min-width: 100px;"
-                  ><div class="col">
-                    <Progress
-                      value={memBwRate[subCluster.name]}
-                      max={subCluster.memoryBandwidth.value *
-                        subCluster.numberOfNodes}
-                    />
-                  </div></td
-                >
-                <td>
-                  {scaleNumbers(
-                    memBwRate[subCluster.name],
-                    subCluster.memoryBandwidth.value * subCluster.numberOfNodes,
-                    memBwRateUnitPrefix[subCluster.name],
-                  )}{memBwRateUnitBase[subCluster.name]} [Max]
-                </td>
-              </tr> -->
             </Table>
           </CardBody>
         </Card>
@@ -499,4 +453,6 @@
       </Col>
     </Row>
   {/each}
+{:else}
+  <Card class="mx-4" body color="warning">Cannot render status tab: No data!</Card>
 {/if}
diff --git a/web/frontend/src/status/UsageDash.svelte b/web/frontend/src/status/UsageDash.svelte
index e09c4cf..93604ea 100644
--- a/web/frontend/src/status/UsageDash.svelte
+++ b/web/frontend/src/status/UsageDash.svelte
@@ -182,6 +182,15 @@
       });
     }
   }
+
+  function legendColor(targetIdx) {
+    // Reuses first color if targetIdx overflows
+    if (cbmode) {
+      return cbColors[(colors.length + targetIdx) % colors.length]
+    } else {
+      return colors[(colors.length + targetIdx) % colors.length]
+    }
+  }
 </script>
 
 {#if $initq.data}
@@ -235,7 +244,7 @@
             </tr>
             {#each $topUserQuery.data.topUser as tu, i}
               <tr>
-                <td><Icon name="circle-fill" style="color: {cbmode ? cbColors[i] : colors[i]};" /></td>
+                <td><Icon name="circle-fill" style="color: {legendColor(i)};" /></td>
                 <th scope="col" id="topName-{tu.id}"
                   ><a
                     href="/monitoring/user/{tu.id}?cluster={cluster}&state=running"
@@ -302,7 +311,7 @@
             </tr>
             {#each $topProjectQuery.data.topProjects as tp, i}
               <tr>
-                <td><Icon name="circle-fill" style="color: {cbmode ? cbColors[i] : colors[i]};" /></td>
+                <td><Icon name="circle-fill" style="color: {legendColor(i)};" /></td>
                 <th scope="col"
                   ><a
                     href="/monitoring/jobs/?cluster={cluster}&state=running&project={tp.id}&projectMatch=eq"