From bc214f6cead0d4022226851d6cf043893f2a5346 Mon Sep 17 00:00:00 2001
From: Christoph Kluge <christoph.kluge@fau.de>
Date: Fri, 13 Mar 2026 14:20:45 +0100
Subject: [PATCH] add nullsafes to frontend

---
 web/frontend/src/Job.root.svelte              |  2 +-
 web/frontend/src/Jobs.root.svelte             |  2 +-
 web/frontend/src/User.root.svelte             | 34 +++++++++----------
 .../src/generic/joblist/JobInfo.svelte        |  2 +-
 .../src/generic/plots/Comparogram.svelte      |  2 +-
 .../status/dashdetails/StatisticsDash.svelte  |  4 +--
 .../src/status/dashdetails/StatusDash.svelte  |  4 +--
 .../src/status/dashdetails/UsageDash.svelte   |  8 ++---
 web/frontend/src/systems/NodeOverview.svelte  | 10 +++---
 .../src/systems/nodelist/NodeInfo.svelte      |  4 +--
 10 files changed, 36 insertions(+), 36 deletions(-)

diff --git a/web/frontend/src/Job.root.svelte b/web/frontend/src/Job.root.svelte
index 3baed1c1..8e55a15a 100644
--- a/web/frontend/src/Job.root.svelte
+++ b/web/frontend/src/Job.root.svelte
@@ -211,7 +211,7 @@
   const orderAndMap = (grouped, inputMetrics) =>
     inputMetrics.map((metric) => ({
       metric: metric,
-      data: grouped.find((group) => group[0].name == metric),
+      data: grouped.find((group) => group[0]?.name == metric),
       availability: checkMetricAvailability(
         globalMetrics,
         metric,
diff --git a/web/frontend/src/Jobs.root.svelte b/web/frontend/src/Jobs.root.svelte
index a06aee3c..370f267c 100644
--- a/web/frontend/src/Jobs.root.svelte
+++ b/web/frontend/src/Jobs.root.svelte
@@ -148,7 +148,7 @@
       showFilter={!showCompare}
       matchedJobs={showCompare? matchedCompareJobs: matchedListJobs}
       applyFilters={(detail) => {
-        selectedCluster = detail.filters[0]?.cluster
+        selectedCluster = detail?.filters[0]?.cluster
           ? detail.filters[0].cluster.eq
           : null;
         selectedSubCluster = detail.filters[1]?.partition
diff --git a/web/frontend/src/User.root.svelte b/web/frontend/src/User.root.svelte
index d086df14..e1bc5483 100644
--- a/web/frontend/src/User.root.svelte
+++ b/web/frontend/src/User.root.svelte
@@ -159,7 +159,7 @@
       variables: { jobFilters, selectedHistograms, numDurationBins, numMetricBins },
     })
   );
-  const hasAccHours = $derived($stats?.data?.jobsStatistics[0]?.totalAccHours != 0);
+  const hasAccHours = $derived(($stats?.data?.jobsStatistics[0]?.totalAccHours || 0) != 0);
 
   /* Functions */
   function resetJobSelection() {
@@ -310,8 +310,8 @@
             <tr>
               <th scope="row">Total Jobs</th>
               <td>
-                <span style="cursor: help;" title="{$stats.data.jobsStatistics[0].totalJobs} Jobs">
-                  {formatNumber($stats.data.jobsStatistics[0].totalJobs)} Jobs
+                <span style="cursor: help;" title="{$stats?.data?.jobsStatistics[0]?.totalJobs || 0} Jobs">
+                  {formatNumber($stats?.data?.jobsStatistics[0]?.totalJobs || 0)} Jobs
                 </span>
               </td>
             </tr>
@@ -326,24 +326,24 @@
                 </Tooltip>
               </th>
               <td>
-                <span style="cursor: help;" title="{$stats.data.jobsStatistics[0].shortJobs} Jobs">
-                  {formatNumber($stats.data.jobsStatistics[0].shortJobs)} Jobs
+                <span style="cursor: help;" title="{$stats?.data?.jobsStatistics[0]?.shortJobs || 0} Jobs">
+                  {formatNumber($stats?.data?.jobsStatistics[0]?.shortJobs || 0)} Jobs
                 </span>
               </td>
             </tr>
             <tr>
               <th scope="row">Total Walltime</th>
               <td>
-                <span style="cursor: help;" title="{$stats.data.jobsStatistics[0].totalWalltime} Hours">
-                  {formatNumber($stats.data.jobsStatistics[0].totalWalltime)} Hours
+                <span style="cursor: help;" title="{$stats?.data?.jobsStatistics[0]?.totalWalltime || 0} Hours">
+                  {formatNumber($stats?.data?.jobsStatistics[0]?.totalWalltime || 0)} Hours
                 </span>
               </td>
             </tr>
             <tr>
               <th scope="row">Total Core Hours</th>
               <td>
-                <span style="cursor: help;" title="{$stats.data.jobsStatistics[0].totalCoreHours} Hours">
-                  {formatNumber($stats.data.jobsStatistics[0].totalCoreHours)} Hours
+                <span style="cursor: help;" title="{$stats?.data?.jobsStatistics[0]?.totalCoreHours || 0} Hours">
+                  {formatNumber($stats?.data?.jobsStatistics[0]?.totalCoreHours || 0)} Hours
                 </span>
               </td>
             </tr>
@@ -351,8 +351,8 @@
               <tr>
                 <th scope="row">Total Accelerator Hours</th>
                 <td>
-                  <span style="cursor: help;" title="{$stats.data.jobsStatistics[0].totalAccHours} Hours">
-                    {formatNumber($stats.data.jobsStatistics[0].totalAccHours)} Hours
+                  <span style="cursor: help;" title="{$stats?.data?.jobsStatistics[0]?.totalAccHours || 0} Hours">
+                    {formatNumber($stats?.data?.jobsStatistics[0]?.totalAccHours || 0)} Hours
                   </span>
                 </td>
               </tr>
@@ -361,9 +361,9 @@
         </Table>
       </Col>
       <Col class="px-1">
-        {#key $stats.data.jobsStatistics[0].histDuration}
+        {#key $stats?.data?.jobsStatistics[0]?.histDuration}
           <Histogram
-            data={convert2uplot($stats.data.jobsStatistics[0].histDuration)}
+            data={convert2uplot($stats?.data?.jobsStatistics[0]?.histDuration)}
             title="Duration Distribution"
             xlabel="Job Runtimes"
             xunit="Runtime"
@@ -376,9 +376,9 @@
         {/key}
       </Col>
       <Col class="px-1">
-        {#key $stats.data.jobsStatistics[0].histNumNodes}
+        {#key $stats?.data?.jobsStatistics[0]?.histNumNodes}
           <Histogram
-            data={convert2uplot($stats.data.jobsStatistics[0].histNumNodes)}
+            data={convert2uplot($stats?.data?.jobsStatistics[0]?.histNumNodes)}
             title="Number of Nodes Distribution"
             xlabel="Allocated Nodes"
             xunit="Nodes"
@@ -450,9 +450,9 @@
         />
       {/snippet}
 
-      {#key $stats.data.jobsStatistics[0].histMetrics}
+      {#key $stats?.data?.jobsStatistics[0]?.histMetrics}
         <PlotGrid
-          items={$stats.data.jobsStatistics[0].histMetrics}
+          items={$stats?.data?.jobsStatistics[0]?.histMetrics || []}
           itemsPerRow={3}
           {gridContent}
         />
diff --git a/web/frontend/src/generic/joblist/JobInfo.svelte b/web/frontend/src/generic/joblist/JobInfo.svelte
index 794efe93..41404c0a 100644
--- a/web/frontend/src/generic/joblist/JobInfo.svelte
+++ b/web/frontend/src/generic/joblist/JobInfo.svelte
@@ -167,7 +167,7 @@
 
   <p class="mb-2">
     {#if job.numNodes == 1}
-      {job.resources[0].hostname}
+      {job?.resources[0]?.hostname}
     {:else}
       {job.numNodes}
     {/if}
diff --git a/web/frontend/src/generic/plots/Comparogram.svelte b/web/frontend/src/generic/plots/Comparogram.svelte
index b1835c2c..0a0c8f0c 100644
--- a/web/frontend/src/generic/plots/Comparogram.svelte
+++ b/web/frontend/src/generic/plots/Comparogram.svelte
@@ -340,7 +340,7 @@
 </script>
 
 <!-- Define $width Wrapper and NoData Card -->
-{#if data && data[0].length > 0}
+{#if data && data[0]?.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/dashdetails/StatisticsDash.svelte b/web/frontend/src/status/dashdetails/StatisticsDash.svelte
index 6c0e17fc..f0c5ec81 100644
--- a/web/frontend/src/status/dashdetails/StatisticsDash.svelte
+++ b/web/frontend/src/status/dashdetails/StatisticsDash.svelte
@@ -129,9 +129,9 @@
       />
     {/snippet}
     
-    {#key $metricStatusQuery.data.jobsStatistics[0].histMetrics}
+    {#key $metricStatusQuery?.data?.jobsStatistics[0]?.histMetrics}
       <PlotGrid
-        items={$metricStatusQuery.data.jobsStatistics[0].histMetrics}
+        items={$metricStatusQuery?.data?.jobsStatistics[0]?.histMetrics}
         itemsPerRow={2}
         {gridContent}
       />
diff --git a/web/frontend/src/status/dashdetails/StatusDash.svelte b/web/frontend/src/status/dashdetails/StatusDash.svelte
index 228b1ae8..46768502 100644
--- a/web/frontend/src/status/dashdetails/StatusDash.svelte
+++ b/web/frontend/src/status/dashdetails/StatusDash.svelte
@@ -294,8 +294,8 @@
         const flopsData = subclusterData[i].metrics.find((s) => s.name == "flops_any")
         const memBwData = subclusterData[i].metrics.find((s) => s.name == "mem_bw")
 
-        const f = flopsData.metric.series[0].statistics.avg
-        const m = memBwData.metric.series[0].statistics.avg
+        const f = flopsData?.metric?.series[0]?.statistics?.avg || 0
+        const m = memBwData?.metric?.series[0]?.statistics?.avg || 0
 
         let intensity = f / m
         if (Number.isNaN(intensity) || !Number.isFinite(intensity)) {
diff --git a/web/frontend/src/status/dashdetails/UsageDash.svelte b/web/frontend/src/status/dashdetails/UsageDash.svelte
index 29a34697..40371ab1 100644
--- a/web/frontend/src/status/dashdetails/UsageDash.svelte
+++ b/web/frontend/src/status/dashdetails/UsageDash.svelte
@@ -230,10 +230,10 @@
 {:else if $topStatsQuery?.data && $nodeStatusQuery?.data}
   <Row>
     <Col xs="12" lg="4" class="p-2">
-      {#key $nodeStatusQuery.data.jobsStatistics[0].histDuration}
+      {#key $nodeStatusQuery?.data?.jobsStatistics[0]?.histDuration}
         <Histogram
           data={convert2uplot(
-            $nodeStatusQuery.data.jobsStatistics[0].histDuration,
+            $nodeStatusQuery?.data?.jobsStatistics[0]?.histDuration,
           )}
           title="Duration Distribution"
           xlabel="Current Job Runtimes"
@@ -356,7 +356,7 @@
     <Col xs="12" lg="4" class="p-2">
       <Histogram
         data={convert2uplot(
-          $nodeStatusQuery.data.jobsStatistics[0].histNumNodes,
+          $nodeStatusQuery?.data?.jobsStatistics[0]?.histNumNodes,
         )}
         title="Number of Nodes Distribution"
         xlabel="Allocated Nodes"
@@ -476,7 +476,7 @@
     <Col xs="12" lg="4" class="p-2">
       <Histogram
         data={convert2uplot(
-          $nodeStatusQuery.data.jobsStatistics[0].histNumAccs,
+          $nodeStatusQuery?.data?.jobsStatistics[0]?.histNumAccs,
         )}
         title="Number of Accelerators Distribution"
         xlabel="Allocated Accs"
diff --git a/web/frontend/src/systems/NodeOverview.svelte b/web/frontend/src/systems/NodeOverview.svelte
index b3c2c7cb..f2a3aba6 100644
--- a/web/frontend/src/systems/NodeOverview.svelte
+++ b/web/frontend/src/systems/NodeOverview.svelte
@@ -175,13 +175,13 @@
           {:else if item?.data}
             <!-- "Empty Series"-Warning included in MetricPlot-Component   -->
             <!-- #key: X-axis keeps last selected timerange otherwise -->
-            {#key item.data[0].metric.series[0].data.length}
+            {#key item?.data[0]?.metric?.series[0]?.data?.length}
               <MetricPlot
-                timestep={item.data[0].metric.timestep}
-                series={item.data[0].metric.series}
-                metric={item.data[0].name}
+                timestep={item?.data[0]?.metric?.timestep || 60}
+                series={item?.data[0]?.metric?.series || []}
+                metric={item?.data[0]?.name || 'unknown'}
                 {cluster}
-                subCluster={item.subCluster}
+                subCluster={item?.subCluster || 'unknown'}
                 forNode
                 enableFlip
               />
diff --git a/web/frontend/src/systems/nodelist/NodeInfo.svelte b/web/frontend/src/systems/nodelist/NodeInfo.svelte
index 4b616f10..aad8a8f8 100644
--- a/web/frontend/src/systems/nodelist/NodeInfo.svelte
+++ b/web/frontend/src/systems/nodelist/NodeInfo.svelte
@@ -109,7 +109,7 @@
             <Button class="flex-grow-1" color="warning" disabled>
               Missing Metric
             </Button>
-          {:else if nodeJobsData.jobs.count == 1 && nodeJobsData.jobs.items[0].shared == "none"}
+          {:else if nodeJobsData.jobs.count == 1 && nodeJobsData?.jobs?.items[0]?.shared == "none"}
             <InputGroupText class="flex-grow-1 flex-lg-grow-0">
               <Icon name="circle-fill" style="padding-right: 0.5rem;"/>
               <span>Jobs</span>
@@ -117,7 +117,7 @@
             <Button class="flex-grow-1" color="success" disabled>
               Exclusive
             </Button>
-          {:else if nodeJobsData.jobs.count >= 1 && !(nodeJobsData.jobs.items[0].shared == "none")}
+          {:else if nodeJobsData.jobs.count >= 1 && !(nodeJobsData?.jobs?.items[0]?.shared == "none")}
             <InputGroupText class="flex-grow-1 flex-lg-grow-0">
               <Icon name="circle-half" style="padding-right: 0.5rem;"/>
               <span>Jobs</span>