fix color overflow, add info if no status data

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)',

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>

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}

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"