From 11e94124ccd54d727a1c17129f747a3315184815 Mon Sep 17 00:00:00 2001
From: Christoph Kluge <christoph.kluge@fau.de>
Date: Tue, 16 Dec 2025 15:43:57 +0100
Subject: [PATCH] improve handling and layout if missing data in dashboard

---
 web/frontend/src/DashPublic.root.svelte       | 80 ++++++++++--------
 .../src/generic/plots/Roofline.svelte         |  2 +-
 web/frontend/src/generic/plots/Stacked.svelte |  6 +-
 web/frontend/src/status/DashInternal.svelte   | 82 ++++++++++---------
 4 files changed, 92 insertions(+), 78 deletions(-)

diff --git a/web/frontend/src/DashPublic.root.svelte b/web/frontend/src/DashPublic.root.svelte
index 676e496..36e6703 100644
--- a/web/frontend/src/DashPublic.root.svelte
+++ b/web/frontend/src/DashPublic.root.svelte
@@ -509,44 +509,52 @@
         </Col>
         <Col> <!-- Pie Last States -->
           <Row>
-            <Col class="px-3 mt-2 mt-lg-0">
-              <div bind:clientWidth={colWidthStates}>
+            {#if refinedStateData.length > 0}
+              <Col class="px-3 mt-2 mt-lg-0">
+                <div bind:clientWidth={colWidthStates}>
+                  {#key refinedStateData}
+                    <Pie
+                      canvasId="hpcpie-slurm"
+                      size={colWidthStates * 0.66}
+                      sliceLabel="Nodes"
+                      quantities={refinedStateData.map(
+                        (sd) => sd.count,
+                      )}
+                      entities={refinedStateData.map(
+                        (sd) => sd.state,
+                      )}
+                      fixColors={refinedStateData.map(
+                        (sd) => colors['nodeStates'][sd.state],
+                      )}
+                    />
+                  {/key}
+                </div>
+              </Col>
+              <Col class="px-4 py-2">
                 {#key refinedStateData}
-                  <Pie
-                    canvasId="hpcpie-slurm"
-                    size={colWidthStates * 0.66}
-                    sliceLabel="Nodes"
-                    quantities={refinedStateData.map(
-                      (sd) => sd.count,
-                    )}
-                    entities={refinedStateData.map(
-                      (sd) => sd.state,
-                    )}
-                    fixColors={refinedStateData.map(
-                      (sd) => colors['nodeStates'][sd.state],
-                    )}
-                  />
-                {/key}
-              </div>
-            </Col>
-            <Col class="px-4 py-2">
-              {#key refinedStateData}
-                <Table>
-                  <tr class="mb-2">
-                    <th></th>
-                    <th class="h4">State</th>
-                    <th class="h4">Count</th>
-                  </tr>
-                  {#each refinedStateData as sd, i}
-                    <tr>
-                      <td><Icon name="circle-fill" style="color: {colors['nodeStates'][sd.state]}; font-size: 30px;"/></td>
-                      <td class="h5">{sd.state.charAt(0).toUpperCase() + sd.state.slice(1)}</td>
-                      <td class="h5">{sd.count}</td>
+                  <Table>
+                    <tr class="mb-2">
+                      <th></th>
+                      <th class="h4">State</th>
+                      <th class="h4">Count</th>
                     </tr>
-                  {/each}
-                </Table>
-              {/key}
-            </Col>
+                    {#each refinedStateData as sd, i}
+                      <tr>
+                        <td><Icon name="circle-fill" style="color: {colors['nodeStates'][sd.state]}; font-size: 30px;"/></td>
+                        <td class="h5">{sd.state.charAt(0).toUpperCase() + sd.state.slice(1)}</td>
+                        <td class="h5">{sd.count}</td>
+                      </tr>
+                    {/each}
+                  </Table>
+                {/key}
+              </Col>
+            {:else}
+              <Col>
+                <Card body color="warning" class="mx-4 my-2"
+                  >Cannot render state status: No state data returned for <code>Pie Chart</code></Card
+                >
+              </Col>
+            {/if}
           </Row>
         </Col>
 
diff --git a/web/frontend/src/generic/plots/Roofline.svelte b/web/frontend/src/generic/plots/Roofline.svelte
index 53aefee..7b7df31 100644
--- a/web/frontend/src/generic/plots/Roofline.svelte
+++ b/web/frontend/src/generic/plots/Roofline.svelte
@@ -997,5 +997,5 @@
 {#if roofData != null}
   <div bind:this={plotWrapper} class="p-2"></div>
 {:else}
-  <Card class="mx-4" body color="warning">Cannot render roofline: No data!</Card>
+  <Card class="mx-4 my-2" body color="warning">Cannot render roofline: No data!</Card>
 {/if}
diff --git a/web/frontend/src/generic/plots/Stacked.svelte b/web/frontend/src/generic/plots/Stacked.svelte
index c9ec1d7..d4babb1 100644
--- a/web/frontend/src/generic/plots/Stacked.svelte
+++ b/web/frontend/src/generic/plots/Stacked.svelte
@@ -101,10 +101,10 @@
   };
 
   // Data Prep For uPlot
-  const sortedData = data.sort((a, b) => a.state.localeCompare(b.state));
+  const sortedData = data?.sort((a, b) => a.state.localeCompare(b.state)) || [];
   const collectLabel = sortedData.map(d => d.state);
   // Align Data to Timesteps, Introduces 'undefied' as placeholder, reiterate and set those to 0
-  const collectData  = uPlot.join(sortedData.map(d => [d.times, d.counts])).map(d => d.map(i => i ? i : 0));
+  const collectData = (sortedData.length > 0) ? uPlot.join(sortedData.map(d => [d.times, d.counts])).map(d => d.map(i => i ? i : 0)) : [];
 
   // STACKED CHART FUNCTIONS //
   function stack(data, omit) {
@@ -344,7 +344,7 @@
 </script>
 
 <!-- Define $width Wrapper and NoData Card -->
-{#if data && collectData[0].length > 0}
+{#if data && collectData.length > 0}
   <div bind:this={plotWrapper} bind:clientWidth={width}
         style="background-color: rgba(255, 255, 255, 1.0);" class="rounded"
   ></div>
diff --git a/web/frontend/src/status/DashInternal.svelte b/web/frontend/src/status/DashInternal.svelte
index c6abf06..47a841a 100644
--- a/web/frontend/src/status/DashInternal.svelte
+++ b/web/frontend/src/status/DashInternal.svelte
@@ -487,45 +487,51 @@
         </Col>
 
         <Col> <!-- Pie Jobs -->
-          <Row cols={{xs:1, md:2}}>
-            <Col class="p-2">
-              <div bind:clientWidth={colWidthJobs}>
-                <h4 class="text-center">
-                  Top Projects: Jobs
-                </h4>
-                <Pie
-                  {useCbColors}
-                  canvasId="hpcpie-jobs-projects"
-                  size={colWidthJobs * 0.75}
-                  sliceLabel={'Jobs'}
-                  quantities={$topJobsQuery.data.jobsStatistics.map(
-                    (tp) => tp['totalJobs'],
-                  )}
-                  entities={$topJobsQuery.data.jobsStatistics.map((tp) => scrambleNames ? scramble(tp.id) : tp.id)}
-                />
-              </div>
-            </Col>
-            <Col class="p-2">
-              <Table>
-                <tr class="mb-2">
-                  <th></th>
-                  <th style="padding-left: 0.5rem;">Project</th>
-                  <th>Jobs</th>
-                </tr>
-                {#each $topJobsQuery.data.jobsStatistics as tp, i}
-                  <tr>
-                    <td><Icon name="circle-fill" style="color: {legendColors(i)};" /></td>
-                    <td>
-                      <a target="_blank" href="/monitoring/jobs/?cluster={presetCluster}&state=running&project={tp.id}&projectMatch=eq"
-                        >{scrambleNames ? scramble(tp.id) : tp.id}
-                      </a>
-                    </td>
-                    <td>{tp['totalJobs']}</td>
+          {#if topJobsQuery?.data?.jobsStatistics?.length > 0}
+            <Row cols={{xs:1, md:2}}>
+              <Col class="p-2">
+                <div bind:clientWidth={colWidthJobs}>
+                  <h4 class="text-center">
+                    Top Projects: Jobs
+                  </h4>
+                  <Pie
+                    {useCbColors}
+                    canvasId="hpcpie-jobs-projects"
+                    size={colWidthJobs * 0.75}
+                    sliceLabel={'Jobs'}
+                    quantities={$topJobsQuery.data.jobsStatistics.map(
+                      (tp) => tp['totalJobs'],
+                    )}
+                    entities={$topJobsQuery.data.jobsStatistics.map((tp) => scrambleNames ? scramble(tp.id) : tp.id)}
+                  />
+                </div>
+              </Col>
+              <Col class="p-2">
+                <Table>
+                  <tr class="mb-2">
+                    <th></th>
+                    <th style="padding-left: 0.5rem;">Project</th>
+                    <th>Jobs</th>
                   </tr>
-                {/each}
-              </Table>
-            </Col>
-          </Row>
+                  {#each $topJobsQuery.data.jobsStatistics as tp, i}
+                    <tr>
+                      <td><Icon name="circle-fill" style="color: {legendColors(i)};" /></td>
+                      <td>
+                        <a target="_blank" href="/monitoring/jobs/?cluster={presetCluster}&state=running&project={tp.id}&projectMatch=eq"
+                          >{scrambleNames ? scramble(tp.id) : tp.id}
+                        </a>
+                      </td>
+                      <td>{tp['totalJobs']}</td>
+                    </tr>
+                  {/each}
+                </Table>
+              </Col>
+            </Row>
+          {:else}
+            <Card body color="warning" class="mx-4 my-2"
+              >Cannot render job status: No state data returned for <code>Pie Chart</code></Card
+            >
+          {/if}
         </Col>
 
         <Col> <!-- Job Roofline -->