From 0a0db36433ea18ea0d3c4ddcf3d88fda3b566aa1 Mon Sep 17 00:00:00 2001
From: Christoph Kluge <christoph.kluge@fau.de>
Date: Wed, 25 Feb 2026 19:12:18 +0100
Subject: [PATCH] load  statusDetails GQL on tab change

---
 web/frontend/src/status/DashDetails.svelte    | 15 +++++----
 .../src/status/dashdetails/HealthDash.svelte  | 19 ++++++------
 .../status/dashdetails/StatisticsDash.svelte  | 13 ++++----
 .../src/status/dashdetails/StatusDash.svelte  | 27 ++++++++--------
 .../src/status/dashdetails/UsageDash.svelte   | 31 ++++++++++---------
 5 files changed, 56 insertions(+), 49 deletions(-)

diff --git a/web/frontend/src/status/DashDetails.svelte b/web/frontend/src/status/DashDetails.svelte
index b46d0935..72c411b2 100644
--- a/web/frontend/src/status/DashDetails.svelte
+++ b/web/frontend/src/status/DashDetails.svelte
@@ -36,6 +36,9 @@
   const { query: initq } = init();
   const useCbColors = getContext("cc-config")?.plotConfiguration_colorblindMode || false
 
+  /* State Init */
+  let activeTab = $state("");
+
   /* Derived */
   const subClusters = $derived($initq?.data?.clusters?.find((c) => c.name == presetCluster)?.subClusters || []);
 </script>
@@ -63,22 +66,22 @@
   </Row>
 {:else}
   <Card class="overflow-auto" style="height: auto;">
-    <TabContent>
+    <TabContent on:tab={(e) => (activeTab = e.detail)}>
       <TabPane tabId="status-dash" tab="Status" active>
         <CardBody>
-          <StatusDash clusters={$initq.data.clusters} {presetCluster}></StatusDash>
+          <StatusDash clusters={$initq.data.clusters} {presetCluster} loadMe={(activeTab === "status-dash")}></StatusDash>
         </CardBody>
       </TabPane>
 
       <TabPane tabId="health-dash" tab="Metric Status">
         <CardBody>
-          <HealthDash {presetCluster}></HealthDash>
+          <HealthDash {presetCluster} loadMe={(activeTab === "health-dash")}></HealthDash>
         </CardBody>
       </TabPane>
 
       <TabPane tabId="usage-dash" tab="Cluster Usage">
         <CardBody>
-          <UsageDash {presetCluster} {useCbColors}></UsageDash>
+          <UsageDash {presetCluster} {useCbColors} loadMe={(activeTab === "usage-dash")}></UsageDash>
         </CardBody>
       </TabPane>
 
@@ -86,7 +89,7 @@
         {#each subClusters.map(sc => sc.name) as scn}
         <TabPane tabId="{scn}-usage-dash" tab="{scn.charAt(0).toUpperCase() + scn.slice(1)} Usage">
           <CardBody>
-            <UsageDash {presetCluster} presetSubCluster={scn} {useCbColors}></UsageDash>
+            <UsageDash {presetCluster} presetSubCluster={scn} {useCbColors} loadMe={(activeTab === `${scn}-usage-dash`)}></UsageDash>
           </CardBody>
         </TabPane>
         {/each}
@@ -94,7 +97,7 @@
       
       <TabPane tabId="metric-dash" tab="Statistics">
         <CardBody>
-          <StatisticsDash {presetCluster} {useCbColors}></StatisticsDash>
+          <StatisticsDash {presetCluster} {useCbColors} loadMe={(activeTab === "metric-dash")}></StatisticsDash>
         </CardBody>
       </TabPane>
     </TabContent>
diff --git a/web/frontend/src/status/dashdetails/HealthDash.svelte b/web/frontend/src/status/dashdetails/HealthDash.svelte
index aa6539ae..a30552b1 100644
--- a/web/frontend/src/status/dashdetails/HealthDash.svelte
+++ b/web/frontend/src/status/dashdetails/HealthDash.svelte
@@ -29,6 +29,7 @@
   /* Svelte 5 Props */
   let {
     presetCluster,
+    loadMe = false,
   } = $props();
 
   /* Const Init */
@@ -55,7 +56,7 @@
   /* Derived */
   let cluster = $derived(presetCluster);
 
-  const statusQuery = $derived(queryStore({
+  const statusQuery = $derived(loadMe ? queryStore({
     client: client,
     query: gql`
       query (
@@ -85,7 +86,7 @@
       sorting: querySorting,
     },
     requestPolicy: "network-only"
-  }));
+  }) : null);
 
   let healthTableData = $derived.by(() => {
     if ($statusQuery?.data) {
@@ -161,16 +162,16 @@
 <hr/>
 
 <!-- Node Health Pis, later Charts -->
-{#if $statusQuery.fetching}
+{#if $statusQuery?.fetching}
   <Row cols={1} class="text-center mt-3">
     <Col>
       <Spinner />
     </Col>
   </Row>
-{:else if $statusQuery.error}
+{:else if $statusQuery?.error}
   <Row cols={1} class="text-center mt-3">
     <Col>  
-      <Card body color="danger">Status Query (States): {$statusQuery.error.message}</Card>
+      <Card body color="danger">Status Query (States): {$statusQuery?.error?.message}</Card>
     </Col>
   </Row>
 {:else if $statusQuery?.data?.nodeStates}
@@ -264,19 +265,19 @@
 <hr/>
 
 <!-- Tabular Info About Node States and Missing Metrics -->
-{#if $statusQuery.fetching}
+{#if $statusQuery?.fetching}
   <Row cols={1} class="text-center mt-3">
     <Col>
       <Spinner />
     </Col>
   </Row>
-{:else if $statusQuery.error}
+{:else if $statusQuery?.error}
   <Row cols={1} class="text-center mt-3">
     <Col>  
-      <Card body color="danger">Status Query (Details): {$statusQuery.error.message}</Card>
+      <Card body color="danger">Status Query (Details): {$statusQuery?.error?.message}</Card>
     </Col>
   </Row>
-{:else if $statusQuery.data}
+{:else if $statusQuery?.data}
   <Row>
     <Col>
       <Card>
diff --git a/web/frontend/src/status/dashdetails/StatisticsDash.svelte b/web/frontend/src/status/dashdetails/StatisticsDash.svelte
index 2cf8621e..d83adc15 100644
--- a/web/frontend/src/status/dashdetails/StatisticsDash.svelte
+++ b/web/frontend/src/status/dashdetails/StatisticsDash.svelte
@@ -30,7 +30,8 @@
 
   /* Svelte 5 Props */
   let {
-    presetCluster
+    presetCluster,
+    loadMe = false,
   } = $props();
 
   /* Const Init */
@@ -49,7 +50,7 @@
     : ccconfig['statusView_selectedHistograms'] || []);
 
   // Note: nodeMetrics are requested on configured $timestep resolution
-  const metricStatusQuery = $derived(queryStore({
+  const metricStatusQuery = $derived(loadMe ? queryStore({
     client: client,
     query: gql`
       query (
@@ -75,7 +76,7 @@
       selectedHistograms: selectedHistograms
     },
     requestPolicy: "network-only"
-  }));
+  }) : null);
 </script>
 
 <!-- Loading indicators & Metric Sleect -->
@@ -100,18 +101,18 @@
 </Row>
 
 <Row cols={1} class="text-center mt-3">
-  {#if $metricStatusQuery.fetching}
+  {#if $metricStatusQuery?.fetching}
     <Col>
       <Spinner />
     </Col>
-  {:else if $metricStatusQuery.error}
+  {:else if $metricStatusQuery?.error}
     <Col>  
       <Card body color="danger">{$metricStatusQuery.error.message}</Card>
     </Col>
   {/if}
 </Row>
 
-{#if $metricStatusQuery.data}
+{#if $metricStatusQuery?.data}
   <!-- Selectable Stats as Histograms : Average Values of Running Jobs -->
   {#if selectedHistograms}
     <!-- Note: Ignore '#snippet' Error in IDE -->
diff --git a/web/frontend/src/status/dashdetails/StatusDash.svelte b/web/frontend/src/status/dashdetails/StatusDash.svelte
index 8d108964..0c2626d0 100644
--- a/web/frontend/src/status/dashdetails/StatusDash.svelte
+++ b/web/frontend/src/status/dashdetails/StatusDash.svelte
@@ -32,6 +32,7 @@
   let {
     clusters,
     presetCluster,
+    loadMe = false,
   } = $props();
 
   /* Const Init */
@@ -59,7 +60,7 @@
   /* Derived */
   let cluster = $derived(presetCluster);
   // States for Stacked charts
-  const statesTimed = $derived(queryStore({
+  const statesTimed = $derived(loadMe ? queryStore({
     client: client,
     query: gql`
       query ($filter: [NodeFilter!], $typeNode: String!, $typeHealth: String!) {
@@ -81,11 +82,11 @@
       typeHealth: "health"
     },
     requestPolicy: "network-only"
-  }));
+  }) : null);
 
   // Note: nodeMetrics are requested on configured $timestep resolution
   // Result: The latest 5 minutes (datapoints) for each node independent of job
-  const statusQuery = $derived(queryStore({
+  const statusQuery = $derived(loadMe ? queryStore({
     client: client,
     query: gql`
       query (
@@ -184,11 +185,11 @@
       sorting: { field: "startTime", type: "col", order: "DESC" }
     },
     requestPolicy: "network-only"
-  }));
+  }) : null);
 
   /* Effects */
   $effect(() => {
-    if ($statusQuery.data) {
+    if ($statusQuery?.data) {
       let subClusters = clusters.find(
         (c) => c.name == cluster,
       ).subClusters;
@@ -374,19 +375,19 @@
 <hr/>
 
 <!-- Node Stack Charts -->
-{#if $statesTimed.fetching}
+{#if $statesTimed?.fetching}
   <Row cols={1} class="text-center mt-3">
     <Col>
       <Spinner />
     </Col>
   </Row>
-{:else if $statesTimed.error}
+{:else if $statesTimed?.error}
   <Row cols={1} class="text-center mt-3">
     <Col>  
-      <Card body color="danger">States Timed: {$statesTimed.error.message}</Card>
+      <Card body color="danger">States Timed: {$statesTimed?.error?.message}</Card>
     </Col>
   </Row>
-{:else if $statesTimed.data}
+{:else if $statesTimed?.data}
   <Row cols={{ md: 2 , sm: 1}} class="mb-3 justify-content-center">
     <Col class="px-3 mt-2 mt-lg-0">
       <div>
@@ -427,19 +428,19 @@
 
 <hr/>
 <!-- Gauges & Roofline per Subcluster-->
-{#if $statusQuery.fetching}
+{#if $statusQuery?.fetching}
   <Row cols={1} class="text-center mt-3">
     <Col>
       <Spinner />
     </Col>
   </Row>
-{:else if $statusQuery.error}
+{:else if $statusQuery?.error}
   <Row cols={1} class="text-center mt-3">
     <Col>  
-      <Card body color="danger">Status Query (Details): {$statusQuery.error.message}</Card>
+      <Card body color="danger">Status Query (Details): {$statusQuery?.error?.message}</Card>
     </Col>
   </Row>
-{:else if $statusQuery.data}
+{:else if $statusQuery?.data}
   {#each clusters.find((c) => c.name == cluster).subClusters as subCluster, i}
     <Row cols={{ lg: 3, md: 1 , sm: 1}} class="mb-3 justify-content-center">
       <Col class="px-3">
diff --git a/web/frontend/src/status/dashdetails/UsageDash.svelte b/web/frontend/src/status/dashdetails/UsageDash.svelte
index 3fa197ae..2a9b3037 100644
--- a/web/frontend/src/status/dashdetails/UsageDash.svelte
+++ b/web/frontend/src/status/dashdetails/UsageDash.svelte
@@ -40,7 +40,8 @@
     presetCluster,
     presetSubCluster = null,
     useCbColors = false,
-    useAltColors = false
+    useAltColors = false,
+    loadMe = false,
   } = $props();
 
   /* Const Init */
@@ -62,7 +63,7 @@
       ? [{ state: ["running"] }, { cluster: { eq: presetCluster} }, { subCluster: { eq: presetSubCluster } }]
       : [{ state: ["running"] }, { cluster: { eq: presetCluster} }] 
   );
-  const topJobsQuery = $derived(queryStore({
+  const topJobsQuery = $derived(loadMe ? queryStore({
     client: client,
     query: gql`
       query (
@@ -95,9 +96,9 @@
       paging: pagingState // Top 10
     },
     requestPolicy: "network-only"
-  }));
+  }) : null);
 
-  const topNodesQuery = $derived(queryStore({
+  const topNodesQuery = $derived(loadMe ? queryStore({
     client: client,
     query: gql`
       query (
@@ -130,9 +131,9 @@
       paging: pagingState
     },
     requestPolicy: "network-only"
-  }));
+  }) : null);
 
-  const topAccsQuery = $derived(queryStore({
+  const topAccsQuery = $derived(loadMe ? queryStore({
     client: client,
     query: gql`
       query (
@@ -165,10 +166,10 @@
       paging: pagingState
     },
     requestPolicy: "network-only"
-  }));
+  }): null);
 
   // Note: nodeMetrics are requested on configured $timestep resolution
-  const nodeStatusQuery = $derived(queryStore({
+  const nodeStatusQuery = $derived(loadMe ? queryStore({
     client: client,
     query: gql`
       query (
@@ -198,7 +199,7 @@
       numDurationBins: numDurationBins,
     },
     requestPolicy: "network-only"
-  }));
+  }) : null);
 
   /* Functions */
   function legendColors(targetIdx) {
@@ -246,9 +247,9 @@
 <hr/>
 
 <!-- Job Duration, Top Users and Projects-->
-{#if $topJobsQuery.fetching || $nodeStatusQuery.fetching}
+{#if $topJobsQuery?.fetching || $nodeStatusQuery?.fetching}
   <Spinner />
-{:else if $topJobsQuery.data && $nodeStatusQuery.data}
+{:else if $topJobsQuery?.data && $nodeStatusQuery?.data}
   <Row>
     <Col xs="12" lg="4" class="p-2">
       {#key $nodeStatusQuery.data.jobsStatistics[0].histDuration}
@@ -354,9 +355,9 @@
 <hr/>
 
 <!-- Node Distribution, Top Users and Projects-->
-{#if $topNodesQuery.fetching || $nodeStatusQuery.fetching}
+{#if $topNodesQuery?.fetching || $nodeStatusQuery?.fetching}
   <Spinner />
-{:else if $topNodesQuery.data && $nodeStatusQuery.data}
+{:else if $topNodesQuery?.data && $nodeStatusQuery?.data}
   <Row>
     <Col xs="12" lg="4" class="p-2">
       <Histogram
@@ -458,9 +459,9 @@
 <hr/>
 
 <!-- Acc Distribution, Top Users and Projects-->
-{#if $topAccsQuery.fetching || $nodeStatusQuery.fetching}
+{#if $topAccsQuery?.fetching || $nodeStatusQuery?.fetching}
   <Spinner />
-{:else if $topAccsQuery.data && $nodeStatusQuery.data}
+{:else if $topAccsQuery?.data && $nodeStatusQuery?.data}
   <Row>
     <Col xs="12" lg="4" class="p-2">
       <Histogram