improve handling and layout if missing data in dashboard

web/frontend/src/DashPublic.root.svelte

@@ -509,6 +509,7 @@
         </Col>
         <Col> <!-- Pie Last States -->
           <Row>
+            {#if refinedStateData.length > 0}
               <Col class="px-3 mt-2 mt-lg-0">
                 <div bind:clientWidth={colWidthStates}>
                   {#key refinedStateData}
@@ -547,6 +548,13 @@
                   </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>
 

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}

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>

web/frontend/src/status/DashInternal.svelte

@@ -487,6 +487,7 @@
         </Col>
 
         <Col> <!-- Pie Jobs -->
+          {#if topJobsQuery?.data?.jobsStatistics?.length > 0}
             <Row cols={{xs:1, md:2}}>
               <Col class="p-2">
                 <div bind:clientWidth={colWidthJobs}>
@@ -526,6 +527,11 @@
                 </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 -->