fix color overflow, add info if no status data

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"