complete review of context initialization and access, streamlining

web/frontend/src/Job.root.svelte

@@ -68,12 +68,8 @@
       energyFootprint { hardware, metric, value }
     }
   `);
-  const client = getContextClient();
-  const ccconfig = getContext("cc-config");
-  const showRoofline = !!ccconfig[`jobView_showRoofline`];
-  const showStatsTable = !!ccconfig[`jobView_showStatTable`];
-
   /* Note: Actual metric data queried in <Metric> Component, only require base infos here -> reduce backend load by requesting just stats */
+  const client = getContextClient();
   const query = gql`
     query ($dbid: ID!, $selectedMetrics: [String!]!, $selectedScopes: [MetricScope!]!) {
       scopedJobStats(id: $dbid, metrics: $selectedMetrics, scopes: $selectedScopes) {
@@ -89,12 +85,56 @@
   /* State Init */
   let plots = $state({});
   let isMetricsSelectionOpen = $state(false);
-  let selectedMetrics = $state([]);
-  let selectedScopes = $state([]);
   let totalMetrics = $state(0);
 
-  /* Derived */
+  /* Derived Init Return */
-  const showSummary = $derived((!!ccconfig[`jobView_showFootprint`] || !!ccconfig[`jobView_showPolarPlot`]))
+  const thisJob = $derived($initq?.data ? $initq.data.job : null);
+
+  /* Derived Settings */
+  const globalMetrics = $derived(thisJob ? getContext("globalMetrics") : null);
+  const clusterInfo = $derived(thisJob ? getContext("clusters") : null);
+  const ccconfig = $derived(thisJob ? getContext("cc-config") : null);
+  const showRoofline = $derived(ccconfig ? !!ccconfig[`jobView_showRoofline`] : false);
+  const showStatsTable = $derived(ccconfig ? !!ccconfig[`jobView_showStatTable`] : false);
+  const showSummary = $derived(ccconfig ? (!!ccconfig[`jobView_showFootprint`] || !!ccconfig[`jobView_showPolarPlot`]) : false)
+
+  /* Derived Var Preprocessing*/
+  let selectedMetrics = $derived.by(() => {
+    if(thisJob && ccconfig) {
+      if (thisJob.cluster) {
+        if (thisJob.subCluster) {
+          return ccconfig[`metricConfig_jobViewPlotMetrics:${thisJob.cluster}:${thisJob.subCluster}`] ||
+            ccconfig[`metricConfig_jobViewPlotMetrics:${thisJob.cluster}`] ||
+            ccconfig.metricConfig_jobViewPlotMetrics
+        }
+        return ccconfig[`metricConfig_jobViewPlotMetrics:${thisJob.cluster}`] ||
+          ccconfig.metricConfig_jobViewPlotMetrics
+      }
+      return ccconfig.metricConfig_jobViewPlotMetrics
+    }
+    return [];
+  });
+
+  let selectedScopes = $derived.by(() => {
+    const pendingScopes = ["node"]
+    if (thisJob) {
+      const accScopeDefault = [...selectedMetrics].some(function (m) {
+        const thisCluster = clusterInfo.find((c) => c.name == thisJob.cluster);
+        const subCluster = thisCluster.subClusters.find((sc) => sc.name == thisJob.subCluster);
+        return subCluster.metricConfig.find((smc) => smc.name == m)?.scope === "accelerator";
+      });
+
+      
+      if (accScopeDefault) pendingScopes.push("accelerator")
+      if (thisJob.numNodes === 1) {
+        pendingScopes.push("socket")
+        pendingScopes.push("core")
+      }
+    }
+    return[...new Set(pendingScopes)]; 
+  });
+
+  /* Derived Query and Postprocessing*/
   const jobMetrics = $derived(queryStore({
       client: client,
       query: query,
@@ -103,11 +143,10 @@
   );
 
   const missingMetrics = $derived.by(() => {
-    if ($initq?.data && $jobMetrics?.data) {
+    if (thisJob && $jobMetrics?.data) {
-      let job = $initq.data.job;
       let metrics = $jobMetrics.data.scopedJobStats;
-      let metricNames = $initq.data.globalMetrics.reduce((names, gm) => {
+      let metricNames = globalMetrics.reduce((names, gm) => {
-          if (gm.availability.find((av) => av.cluster === job.cluster)) {
+          if (gm.availability.find((av) => av.cluster === thisJob.cluster)) {
               names.push(gm.name);
           }
           return names;
@@ -118,9 +157,10 @@
           !metrics.some((jm) => jm.name == metric) &&
           selectedMetrics.includes(metric) && 
           !checkMetricDisabled(
+            globalMetrics,
             metric,
-            $initq.data.job.cluster,
+            thisJob.cluster,
-            $initq.data.job.subCluster,
+            thisJob.subCluster,
           ),
       );
     } else {
@@ -129,17 +169,16 @@
   });
 
   const missingHosts = $derived.by(() => {
-    if ($initq?.data && $jobMetrics?.data) {
+    if (thisJob && $jobMetrics?.data) {
-      let job = $initq.data.job;
       let metrics = $jobMetrics.data.scopedJobStats;
-      let metricNames = $initq.data.globalMetrics.reduce((names, gm) => {
+      let metricNames = globalMetrics.reduce((names, gm) => {
-          if (gm.availability.find((av) => av.cluster === job.cluster)) {
+          if (gm.availability.find((av) => av.cluster === thisJob.cluster)) {
               names.push(gm.name);
           }
           return names;
         }, []);
 
-      return job.resources
+      return thisJob.resources
         .map(({ hostname }) => ({
           hostname: hostname,
           metrics: metricNames.filter(
@@ -165,51 +204,19 @@
       ? "Loading..."
       : $initq?.error
         ? "Error"
-        : `Job ${$initq.data.job.jobId} - ClusterCockpit`;
+        : `Job ${thisJob.jobId} - ClusterCockpit`;
-  });
-
-  /* On Init */
-  getContext("on-init")(() => {    
-    let job = $initq.data.job;
-    if (!job) return;
-    const pendingMetrics = (
-      ccconfig[`metricConfig_jobViewPlotMetrics:${job.cluster}:${job.subCluster}`] ||
-      ccconfig[`metricConfig_jobViewPlotMetrics:${job.cluster}`]
-    ) || 
-    $initq.data.globalMetrics.reduce((names, gm) => {
-      if (gm.availability.find((av) => av.cluster === job.cluster && av.subClusters.includes(job.subCluster))) {
-        names.push(gm.name);
-      }
-      return names;
-    }, [])
-
-    // Select default Scopes to load: Check before if any metric has accelerator scope by default
-    const accScopeDefault = [...pendingMetrics].some(function (m) {
-      const cluster = $initq.data.clusters.find((c) => c.name == job.cluster);
-      const subCluster = cluster.subClusters.find((sc) => sc.name == job.subCluster);
-      return subCluster.metricConfig.find((smc) => smc.name == m)?.scope === "accelerator";
-    });
-
-    const pendingScopes = ["node"]
-    if (accScopeDefault) pendingScopes.push("accelerator")
-    if (job.numNodes === 1) {
-      pendingScopes.push("socket")
-      pendingScopes.push("core")
-    }
-
-    selectedMetrics = [...new Set(pendingMetrics)];
-    selectedScopes = [...new Set(pendingScopes)];
   });
 
   /* Functions */
-  const orderAndMap = (grouped, selectedMetrics) =>
+  const orderAndMap = (grouped, inputMetrics) =>
-    selectedMetrics.map((metric) => ({
+    inputMetrics.map((metric) => ({
       metric: metric,
       data: grouped.find((group) => group[0].name == metric),
       disabled: checkMetricDisabled(
+        globalMetrics,
         metric,
-        $initq.data.job.cluster,
+        thisJob.cluster,
-        $initq.data.job.subCluster,
+        thisJob.subCluster,
       ),
     }));
 </script>
@@ -219,34 +226,34 @@
   <Col xs={12} md={6} xl={3} class="mb-3 mb-xxl-0">
     {#if $initq.error}
       <Card body color="danger">{$initq.error.message}</Card>
-    {:else if $initq?.data}
+    {:else if thisJob}
       <Card class="overflow-auto" style="height: auto;">
         <TabContent> <!-- on:tab={(e) => (status = e.detail)} -->
-          {#if $initq.data?.job?.metaData?.message}
+          {#if thisJob?.metaData?.message}
             <TabPane tabId="admin-msg" tab="Admin Note" active>
               <CardBody>
                 <Card body class="mb-2" color="warning">
-                  <h5>Job {$initq.data?.job?.jobId} ({$initq.data?.job?.cluster})</h5>
+                  <h5>Job {thisJob?.jobId} ({thisJob?.cluster})</h5>
                   The following note was added by administrators:
                 </Card>
                 <Card body>
-                  {@html $initq.data.job.metaData.message}
+                  {@html thisJob.metaData.message}
                 </Card>
               </CardBody>
             </TabPane>
           {/if}
-          <TabPane tabId="meta-info" tab="Job Info" active={$initq.data?.job?.metaData?.message?false:true}>
+          <TabPane tabId="meta-info" tab="Job Info" active={thisJob?.metaData?.message?false:true}>
             <CardBody class="pb-2">
-              <JobInfo job={$initq.data.job} {username} {authlevel} {roles} showTagEdit/>
+              <JobInfo job={thisJob} {username} {authlevel} {roles} showTagEdit/>
             </CardBody>
           </TabPane>
-          {#if $initq.data.job.concurrentJobs != null && $initq.data.job.concurrentJobs.items.length != 0}
+          {#if thisJob.concurrentJobs != null && thisJob.concurrentJobs.items.length != 0}
             <TabPane  tabId="shared-jobs">
               <span slot="tab">
-                {$initq.data.job.concurrentJobs.items.length} Concurrent Jobs
+                {thisJob.concurrentJobs.items.length} Concurrent Jobs
               </span>
               <CardBody>
-                <ConcurrentJobs cJobs={$initq.data.job.concurrentJobs} showLinks={(authlevel > roles.manager)}/>
+                <ConcurrentJobs cJobs={thisJob.concurrentJobs} showLinks={(authlevel > roles.manager)}/>
               </CardBody>
             </TabPane>
           {/if}
@@ -261,9 +268,9 @@
   <Col xs={12} md={6} xl={4} xxl={3} class="mb-3 mb-xxl-0">
     {#if $initq.error}
       <Card body color="danger">{$initq.error.message}</Card>
-    {:else if $initq?.data}
+    {:else if thisJob}
       {#if showSummary}
-        <JobSummary job={$initq.data.job}/>
+        <JobSummary job={thisJob}/>
       {/if}
     {:else}
       <Spinner secondary />
@@ -274,9 +281,9 @@
   <Col xs={12} md={12} xl={5} xxl={6}>
     {#if $initq.error}
       <Card body color="danger">{$initq.error.message}</Card>
-    {:else if $initq?.data}
+    {:else if thisJob}
       {#if showRoofline}
-        <JobRoofline job={$initq.data.job} clusters={$initq.data.clusters}/>
+        <JobRoofline job={thisJob} {clusterInfo}/>
       {/if}    
     {:else}
       <Spinner secondary />
@@ -285,10 +292,10 @@
 </Row>
 
 <!-- Row 2: Energy Information if available -->
-{#if $initq?.data && $initq.data.job.energyFootprint.length != 0}
+{#if thisJob && thisJob?.energyFootprint?.length != 0}
   <Row class="mb-3">
     <Col>
-      <EnergySummary jobId={$initq.data.job.jobId} jobEnergy={$initq.data.job.energy} jobEnergyFootprint={$initq.data.job.energyFootprint}/>
+      <EnergySummary jobId={thisJob.jobId} jobEnergy={thisJob.energy} jobEnergyFootprint={thisJob.energyFootprint}/>
     </Col>
   </Row>
 {/if}
@@ -297,7 +304,7 @@
 <Card class="mb-3">
   <CardBody>
     <Row class="mb-2">
-      {#if $initq?.data}
+      {#if thisJob}
         <Col xs="auto">
             <Button outline onclick={() => (isMetricsSelectionOpen = true)} color="primary">
               Select Metrics (Selected {selectedMetrics.length} of {totalMetrics} available)
@@ -310,7 +317,7 @@
     {#if $jobMetrics.error}
       <Row class="mt-2">
         <Col>
-          {#if $initq?.data && ($initq.data.job?.monitoringStatus == 0 || $initq.data.job?.monitoringStatus == 2)}
+          {#if thisJob && (thisJob?.monitoringStatus == 0 || thisJob?.monitoringStatus == 2)}
             <Card body color="warning">Not monitored or archiving failed</Card>
             <br />
           {/if}
@@ -323,18 +330,18 @@
           <Spinner secondary />
         </Col>
       </Row>
-    {:else if $initq?.data && $jobMetrics?.data?.scopedJobStats}
+    {:else if thisJob && $jobMetrics?.data?.scopedJobStats}
       <!-- Note: Ignore '#snippet' Error in IDE -->
       {#snippet gridContent(item)}
         {#if item.data}
           <Metric
             bind:this={plots[item.metric]}
-            job={$initq.data.job}
+            job={thisJob}
             metricName={item.metric}
-            metricUnit={$initq.data.globalMetrics.find((gm) => gm.name == item.metric)?.unit}
+            metricUnit={globalMetrics.find((gm) => gm.name == item.metric)?.unit}
-            nativeScope={$initq.data.globalMetrics.find((gm) => gm.name == item.metric)?.scope}
+            nativeScope={globalMetrics.find((gm) => gm.name == item.metric)?.scope}
             presetScopes={item.data.map((x) => x.scope)}
-            isShared={$initq.data.job.shared != "none"}
+            isShared={thisJob.shared != "none"}
           />
         {:else if item.disabled == true}
           <Card color="info">
@@ -342,7 +349,7 @@
               <b>Disabled Metric</b>
             </CardHeader>
             <CardBody>
-              <p>Metric <b>{item.metric}</b> is disabled for cluster <b>{$initq.data.job.cluster}:{$initq.data.job.subCluster}</b>.</p>
+              <p>Metric <b>{item.metric}</b> is disabled for cluster <b>{thisJob.cluster}:{thisJob.subCluster}</b>.</p>
               <p class="mb-1">To remove this card, open metric selection and press "Close and Apply".</p>
             </CardBody>
           </Card>
@@ -353,7 +360,7 @@
             </CardHeader>
             <CardBody>
               <p>No dataset(s) returned for <b>{item.metric}</b>.</p>
-              <p class="mb-1">Metric was not found in metric store for cluster <b>{$initq.data.job.cluster}</b>.</p>
+              <p class="mb-1">Metric was not found in metric store for cluster <b>{thisJob.cluster}</b>.</p>
             </CardBody>
           </Card>
         {/if}
@@ -374,7 +381,7 @@
 <!-- Metadata && Statistcics Table -->
 <Row class="mb-3">
   <Col>
-    {#if $initq?.data}
+    {#if thisJob}
       <Card>
         <TabContent>
           {#if somethingMissing}
@@ -409,12 +416,12 @@
           {/if}
           {#if showStatsTable}
             <!-- Includes <TabPane> Statistics Table with Independent GQL Query -->
-            <StatsTab job={$initq.data.job} clusters={$initq.data.clusters} tabActive={!somethingMissing}/>
+            <StatsTab job={thisJob} {clusterInfo} {globalMetrics} {ccconfig} tabActive={!somethingMissing}/>
           {/if}
           <TabPane tabId="job-script" tab="Job Script">
             <div class="pre-wrapper">
-              {#if $initq.data.job.metaData?.jobScript}
+              {#if thisJob.metaData?.jobScript}
-                <pre><code>{$initq.data.job.metaData?.jobScript}</code></pre>
+                <pre><code>{thisJob.metaData?.jobScript}</code></pre>
               {:else}
                 <Card body color="warning">No job script available</Card>
               {/if}
@@ -422,8 +429,8 @@
           </TabPane>
           <TabPane tabId="slurm-info" tab="Slurm Info">
             <div class="pre-wrapper">
-              {#if $initq.data.job.metaData?.slurmInfo}
+              {#if thisJob.metaData?.slurmInfo}
-                <pre><code>{$initq.data.job.metaData?.slurmInfo}</code></pre>
+                <pre><code>{thisJob.metaData?.slurmInfo}</code></pre>
               {:else}
                 <Card body color="warning"
                   >No additional slurm information available</Card
@@ -437,15 +444,15 @@
   </Col>
 </Row>
 
-{#if $initq?.data}
+{#if thisJob}
   <MetricSelection
     bind:isOpen={isMetricsSelectionOpen}
     bind:totalMetrics
     presetMetrics={selectedMetrics}
-    cluster={$initq.data.job.cluster}
+    cluster={thisJob.cluster}
-    subCluster={$initq.data.job.subCluster}
+    subCluster={thisJob.subCluster}
     configName="metricConfig_jobViewPlotMetrics"
-    preInitialized
+    {globalMetrics}
     applyMetrics={(newMetrics) => 
       selectedMetrics = [...newMetrics]
     }

web/frontend/src/Jobs.root.svelte

@@ -36,7 +36,6 @@
 
   /* Const Init */
   const { query: initq } = init();
-  const ccconfig = getContext("cc-config");
   const matchedJobCompareLimit = 500;
 
   /* State Init */
@@ -52,11 +51,17 @@
   let isMetricsSelectionOpen = $state(false);
   let sorting = $state({ field: "startTime", type: "col", order: "DESC" });
 
+  /* Derived Init Return */
+  const thisInit = $derived($initq?.data ? true : false);
+
   /* Derived */
+  const ccconfig = $derived(thisInit ? getContext("cc-config") : null);
+  const globalMetrics = $derived(thisInit ? getContext("globalMetrics") : null);
   let presetProject = $derived(filterPresets?.project ? filterPresets.project : "");
   let selectedCluster = $derived(filterPresets?.cluster ? filterPresets.cluster : null);
   let selectedSubCluster = $derived(filterPresets?.partition ? filterPresets.partition : null);
   let metrics = $derived.by(() => {
+    if (thisInit && ccconfig) {
       if (selectedCluster) {
         if (selectedSubCluster) {
           return ccconfig[`metricConfig_jobListMetrics:${selectedCluster}:${selectedSubCluster}`] ||
@@ -67,11 +72,15 @@
           ccconfig.metricConfig_jobListMetrics
       }
       return ccconfig.metricConfig_jobListMetrics
+    }
+    return [];
   });
 
-  let showFootprint = $derived(selectedCluster
+  let showFootprint = $derived((thisInit && ccconfig)
-    ? !!ccconfig[`jobList_showFootprint:${selectedCluster}`]
+    ? selectedCluster
-    : !!ccconfig.jobList_showFootprint
+      ? ccconfig[`jobList_showFootprint:${selectedCluster}`]
+      : ccconfig.jobList_showFootprint
+    : {}
   );
 
   /* Functions */
@@ -219,6 +228,7 @@
 <Sorting
   bind:isOpen={isSortingOpen}
   presetSorting={sorting}
+  {globalMetrics}
   applySorting={(newSort) =>
     sorting = {...newSort}
   }
@@ -232,6 +242,7 @@
     subCluster={selectedSubCluster}
     configName="metricConfig_jobListMetrics"
     footprintSelect
+    {globalMetrics}
     applyMetrics={(newMetrics) => 
       metrics = [...newMetrics]
     }

web/frontend/src/Node.root.svelte

@@ -49,14 +49,10 @@
 
   /* Const Init */
   const { query: initq } = init();
-  const initialized = getContext("initialized")
+  const client = getContextClient();
-  const globalMetrics = getContext("globalMetrics")
-  const ccconfig = getContext("cc-config");
-  const clusters = getContext("clusters");
   const nowEpoch = Date.now();
   const paging = { itemsPerPage: 50, page: 1 };
   const sorting = { field: "startTime", type: "col", order: "DESC" };
-  const client = getContextClient();
   const nodeMetricsQuery = gql`
     query ($cluster: String!, $nodes: [String!], $from: Time!, $to: Time!) {
       nodeMetrics(cluster: $cluster, nodes: $nodes, from: $from, to: $to) {
@@ -112,14 +108,32 @@
   let from = $state(presetFrom ? presetFrom : new Date(nowEpoch - (4 * 3600 * 1000)));
   // svelte-ignore state_referenced_locally
   let to = $state(presetTo ? presetTo : new Date(nowEpoch));
-  let systemUnits = $state({});
+
+  /* Derived Init Return */
+  const thisInit = $derived($initq?.data ? true : false);
 
   /* Derived */
+  const ccconfig = $derived(thisInit ? getContext("cc-config") : null);
+  const globalMetrics = $derived(thisInit ? getContext("globalMetrics") : null);
+  const clusterInfos = $derived(thisInit ? getContext("clusters") : null);
+
   const filter = $derived([
     { cluster: { eq: cluster } },
     { node: { contains: hostname } },
     { state: ["running"] },
   ]);
+
+  const systemUnits = $derived.by(() => {
+    const pendingUnits = {};
+    if (thisInit) {
+      const systemMetrics = [...globalMetrics.filter((gm) => gm?.availability.find((av) => av.cluster == cluster))]
+      for (let sm of systemMetrics) {
+        pendingUnits[sm.name] = (sm?.unit?.prefix ? sm.unit.prefix : "") + (sm?.unit?.base ? sm.unit.base : "")
+      }
+    }
+    return {...pendingUnits};
+  });
+
   const nodeMetricsData = $derived(queryStore({
       client: client,
       query: nodeMetricsQuery,
@@ -140,20 +154,6 @@
   );
 
   const thisNodeState = $derived($nodeMetricsData?.data?.nodeMetrics[0]?.state ? $nodeMetricsData.data.nodeMetrics[0].state : 'notindb');
-
-  /* Effect */
-  $effect(() => {
-    loadUnits($initialized);
-  });
-
-  /* Functions */
-  function loadUnits(isInitialized) {
-    if (!isInitialized) return
-    const systemMetrics = [...globalMetrics.filter((gm) => gm?.availability.find((av) => av.cluster == cluster))]
-    for (let sm of systemMetrics) {
-      systemUnits[sm.name] = (sm?.unit?.prefix ? sm.unit.prefix : "") + (sm?.unit?.base ? sm.unit.base : "")
-    }
-  }
 </script>
 
 <Row cols={{ xs: 2, lg: 5 }}>
@@ -246,7 +246,7 @@
           <MetricPlot
             metric={item.name}
             timestep={item.metric.timestep}
-            cluster={clusters.find((c) => c.name == cluster)}
+            cluster={clusterInfos.find((c) => c.name == cluster)}
             subCluster={$nodeMetricsData.data.nodeMetrics[0].subCluster}
             series={item.metric.series}
             enableFlip
@@ -277,6 +277,7 @@
           .map((m) => ({
             ...m,
             disabled: checkMetricDisabled(
+              globalMetrics,
               m.name,
               cluster,
               $nodeMetricsData.data.nodeMetrics[0].subCluster,

web/frontend/src/Systems.root.svelte

@@ -51,13 +51,6 @@
   /* Const Init */
   const { query: initq } = init();
   const client = getContextClient();
-  const ccconfig = getContext("cc-config");
-  const initialized = getContext("initialized");
-  const globalMetrics = getContext("globalMetrics");
-  const resampleConfig = getContext("resampling") || null;
-
-  const resampleResolutions = resampleConfig ? [...resampleConfig.resolutions] : [];
-  const resampleDefault = resampleConfig ? Math.max(...resampleConfig.resolutions) : 0;
   const stateOptions = ['all', 'allocated', 'idle', 'reserved', 'mixed', 'down', 'unknown', 'notindb'];
   const nowDate = new Date(Date.now());
 
@@ -65,35 +58,55 @@
   let timeoutId = null;
 
   /* State Init */
-  let selectedResolution = $state(resampleConfig ? resampleDefault : 0);
   let hostnameFilter = $state("");
   let hoststateFilter = $state("all");
   let pendingHostnameFilter = $state("");
   let isMetricsSelectionOpen = $state(false);
 
+  /* Derived Init Return */
+  const thisInit = $derived($initq?.data ? true : false);
+
   /* Derived States */
+  const ccconfig = $derived(thisInit ? getContext("cc-config") : null);
+  const globalMetrics = $derived(thisInit ? getContext("globalMetrics") : null);
+  const resampleConfig = $derived(thisInit ? getContext("resampling") : null);
+  const resampleResolutions = $derived(resampleConfig ? [...resampleConfig.resolutions] : []);
+  const resampleDefault = $derived(resampleConfig ? Math.max(...resampleConfig.resolutions) : 0);
+  const displayNodeOverview = $derived((displayType === 'OVERVIEW'));
+
+  const systemMetrics = $derived(globalMetrics ? [...globalMetrics.filter((gm) => gm?.availability.find((av) => av.cluster == cluster))] : []);
+  const systemUnits = $derived.by(() => {
+    const pendingUnits = {};
+    if (thisInit && systemMetrics.length > 0) {
+      for (let sm of systemMetrics) {
+        pendingUnits[sm.name] = (sm?.unit?.prefix ? sm.unit.prefix : "") + (sm?.unit?.base ? sm.unit.base : "")
+      };
+    }
+    return {...pendingUnits};
+  });
+
+  let selectedResolution = $derived(resampleDefault);
   let to = $derived(presetTo ? presetTo : new Date(Date.now()));
   let from = $derived(presetFrom ? presetFrom : new Date(nowDate.setHours(nowDate.getHours() - 4)));
-  const displayNodeOverview = $derived((displayType === 'OVERVIEW'));
+
-  const systemMetrics = $derived($initialized ? [...globalMetrics.filter((gm) => gm?.availability.find((av) => av.cluster == cluster))] : []);
-  const presetSystemUnits = $derived(loadUnits(systemMetrics));
   let selectedMetric = $derived.by(() => {
     let configKey = `nodeOverview_selectedMetric`;
     if (cluster) configKey += `:${cluster}`;
     if (subCluster) configKey += `:${subCluster}`;
 
-    if ($initialized) {
+    if (thisInit) {
       if (ccconfig[configKey]) return ccconfig[configKey]
       else if (systemMetrics.length !== 0) return systemMetrics[0].name
     }
     return ""
   });
+
   let selectedMetrics = $derived.by(() => {
     let configKey = `nodeList_selectedMetrics`;
     if (cluster) configKey += `:${cluster}`;
     if (subCluster) configKey += `:${subCluster}`;
 
-    if ($initialized) {
+    if (thisInit) {
       if (ccconfig[configKey]) return ccconfig[configKey]
       else if (systemMetrics.length >= 3) return [systemMetrics[0].name, systemMetrics[1].name, systemMetrics[2].name]
     }
@@ -108,16 +121,6 @@
   });
 
   /* Functions */
-  function loadUnits(systemMetrics) {
-    let pendingUnits = {};
-    if (systemMetrics.length > 0) {
-      for (let sm of systemMetrics) {
-        pendingUnits[sm.name] = (sm?.unit?.prefix ? sm.unit.prefix : "") + (sm?.unit?.base ? sm.unit.base : "")
-      };
-    };
-    return {...pendingUnits};
-  };
-
   // Wait after input for some time to prevent too many requests
   function updateHostnameFilter() {
     if (timeoutId != null) clearTimeout(timeoutId);
@@ -157,7 +160,7 @@
 
 <!-- ROW1: Tools-->
 <Row cols={{ xs: 2, lg: !displayNodeOverview ? (resampleConfig ? 6 : 5) : 5 }} class="mb-3">
-  {#if $initq?.data}
+  {#if thisInit}
     <!-- List Metric Select Col-->
     {#if !displayNodeOverview}
       <Col>
@@ -234,7 +237,7 @@
           <Input type="select" bind:value={selectedMetric}>
             {#each systemMetrics as metric (metric.name)}
               <option value={metric.name}
-                >{metric.name} {presetSystemUnits[metric.name] ? "("+presetSystemUnits[metric.name]+")" : ""}</option
+                >{metric.name} {systemUnits[metric.name] ? "("+systemUnits[metric.name]+")" : ""}</option
               >
             {:else}
               <option disabled>No available options</option>
@@ -266,10 +269,11 @@
 {:else}
   {#if displayNodeOverview}
     <!-- ROW2-1: Node Overview (Grid Included)-->
-    <NodeOverview {cluster} {ccconfig} {selectedMetric} {from} {to} {hostnameFilter} {hoststateFilter}/>
+    <NodeOverview {cluster} {ccconfig} {selectedMetric} {globalMetrics} {from} {to} {hostnameFilter} {hoststateFilter}/>
   {:else}
     <!-- ROW2-2: Node List (Grid Included)-->
-    <NodeList {cluster} {subCluster} {ccconfig} pendingSelectedMetrics={selectedMetrics} {selectedResolution} {hostnameFilter} {hoststateFilter} {from} {to} {presetSystemUnits}/>
+    <NodeList {cluster} {subCluster} {ccconfig} {globalMetrics}
+      pendingSelectedMetrics={selectedMetrics} {selectedResolution} {hostnameFilter} {hoststateFilter} {from} {to} {systemUnits}/>
   {/if}
 {/if}
 
@@ -279,6 +283,7 @@
     presetMetrics={selectedMetrics}
     {cluster}
     {subCluster}
+    {globalMetrics}
     configName="nodeList_selectedMetrics"
     applyMetrics={(newMetrics) => 
       selectedMetrics = [...newMetrics]

web/frontend/src/User.root.svelte

@@ -56,12 +56,10 @@
 
   /* Const Init */
   const { query: initq } = init();
-  const ccconfig = getContext("cc-config");
   const client = getContextClient();
   const durationBinOptions = ["1m","10m","1h","6h","12h"];
   const metricBinOptions = [10, 20, 50, 100];
   const matchedJobCompareLimit = 500;
-  const shortDuration = ccconfig.jobList_hideShortRunningJobs; // Always configured
 
   /* State Init */
   // List & Control Vars
@@ -73,7 +71,6 @@
   let isSortingOpen = $state(false);
   let isMetricsSelectionOpen = $state(false);
   let sorting = $state({ field: "startTime", type: "col", order: "DESC" });
-  let selectedHistogramsBuffer = $state({ all: (ccconfig['userView_histogramMetrics'] || []) })
   let jobCompare = $state(null);
   let matchedCompareJobs = $state(0);
   let showCompare = $state(false);
@@ -84,10 +81,17 @@
   let numDurationBins = $state("1h");
   let numMetricBins = $state(10);
 
+  /* Derived Init Return */
+  const thisInit = $derived($initq?.data ? true : false);
+
   /* Derived */
+  const ccconfig = $derived(thisInit ? getContext("cc-config") : null);
+  const globalMetrics = $derived(thisInit ? getContext("globalMetrics") : null);
+  const shortDuration = $derived(ccconfig?.jobList_hideShortRunningJobs);
   let selectedCluster = $derived(filterPresets?.cluster ? filterPresets.cluster : null);
   let selectedSubCluster = $derived(filterPresets?.partition ? filterPresets.partition : null);
   let metrics = $derived.by(() => {
+    if (thisInit && ccconfig) {
       if (selectedCluster) {
         if (selectedSubCluster) {
           return ccconfig[`metricConfig_jobListMetrics:${selectedCluster}:${selectedSubCluster}`] ||
@@ -98,12 +102,27 @@
           ccconfig.metricConfig_jobListMetrics
       }
       return ccconfig.metricConfig_jobListMetrics
+    }
+    return [];
   });
-  let showFootprint = $derived(filterPresets.cluster
+
-    ? !!ccconfig[`jobList_showFootprint:${filterPresets.cluster}`]
+  let showFootprint = $derived((thisInit && ccconfig)
-    : !!ccconfig.jobList_showFootprint
+    ? filterPresets?.cluster
+      ? ccconfig[`jobList_showFootprint:${filterPresets.cluster}`]
+      : ccconfig.jobList_showFootprint
+    : {}
   );
-  let selectedHistograms = $derived(selectedCluster ? selectedHistogramsBuffer[selectedCluster] : selectedHistogramsBuffer['all']);
+
+  let selectedHistograms = $derived.by(() => {
+    if (thisInit && ccconfig) {
+      if (selectedCluster) {
+        return ccconfig[`userView_histogramMetrics:${selectedCluster}`] // No Fallback; Unspecific lists an include unavailable metrics
+      }
+      return ccconfig.userView_histogramMetrics
+    }
+    return []
+  });
+
   let stats = $derived(
     queryStore({
       client: client,
@@ -159,19 +178,9 @@
     });
 	});
 
-  $effect(() => {
-    if (!selectedHistogramsBuffer[selectedCluster]) {
-      selectedHistogramsBuffer[selectedCluster] = ccconfig[`userView_histogramMetrics:${selectedCluster}`];
-    };
-  });
-
   /* On Mount */
   onMount(() => {
     filterComponent.updateFilters();
-    // Why? -> `$derived(ccconfig[$cluster])` only loads array from last Backend-Query if $cluster changed reactively (without reload)
-    if (filterPresets?.cluster) {
-      selectedHistogramsBuffer[filterPresets.cluster] = ccconfig[`userView_histogramMetrics:${filterPresets.cluster}`];
-    };
   });
 </script>
 
@@ -508,6 +517,7 @@
 <Sorting
   bind:isOpen={isSortingOpen}
   presetSorting={sorting}
+  {globalMetrics}
   applySorting={(newSort) =>
     sorting = {...newSort}
   }
@@ -521,6 +531,7 @@
     subCluster={selectedSubCluster}
     configName="metricConfig_jobListMetrics"
     footprintSelect
+    {globalMetrics}
     applyMetrics={(newMetrics) => 
       metrics = [...newMetrics]
     }
@@ -531,7 +542,8 @@
   bind:isOpen={isHistogramSelectionOpen}
   presetSelectedHistograms={selectedHistograms}
   configName="userView_histogramMetrics"
+  {globalMetrics}
   applyChange={(newSelection) => {
-    selectedHistogramsBuffer[selectedCluster || 'all'] = [...newSelection];
+    selectedHistograms = [...newSelection];
   }}
 />

web/frontend/src/generic/JobList.svelte

@@ -39,10 +39,6 @@
   } = $props();
 
   /* Const Init */
-  const ccconfig = getContext("cc-config");
-  const initialized = getContext("initialized");
-  const globalMetrics = getContext("globalMetrics");
-  const usePaging = ccconfig?.jobList_usePaging || false;
   const jobInfoColumnWidth = 250;
   const client = getContextClient();
   const query = gql`
@@ -100,11 +96,18 @@
   let headerPaddingTop = $state(0);
   let jobs = $state([]);
   let page = $state(1);
-  let itemsPerPage = $state(usePaging ? (ccconfig?.jobList_jobsPerPage || 10) : 10);
   let triggerMetricRefresh = $state(false);
   let tableWidth = $state(0);
 
   /* Derived */
+  const initialized = $derived(getContext("initialized") || false);
+  const ccconfig = $derived(initialized ? getContext("cc-config") : null);
+  const globalMetrics = $derived(initialized ? getContext("globalMetrics") : null);
+  const clusterInfos = $derived(initialized ? getContext("clusters"): null);
+  const resampleConfig = $derived(initialized ? getContext("resampling") : null);
+  const usePaging = $derived(ccconfig?.jobList_usePaging || false);
+
+  let itemsPerPage = $derived(usePaging ? (ccconfig?.jobList_jobsPerPage || 10) : 10);
   let filter = $derived([...filterBuffer]);
   let paging = $derived({ itemsPerPage, page });
   const plotWidth = $derived.by(() => {
@@ -274,7 +277,7 @@
               style="width: {plotWidth}px; padding-top: {headerPaddingTop}px"
             >
               {metric}
-              {#if $initialized}
+              {#if initialized}
                 ({getUnit(metric)})
               {/if}
             </th>
@@ -292,7 +295,8 @@
           </tr>
         {:else}
           {#each jobs as job (job.id)}
-            <JobListRow {triggerMetricRefresh} {job} {metrics} {plotWidth} {showFootprint} previousSelect={selectedJobs.includes(job.id)}
+            <JobListRow {triggerMetricRefresh} {job} {metrics} {plotWidth} {showFootprint} {globalMetrics} {clusterInfos} {resampleConfig}
+              previousSelect={selectedJobs.includes(job.id)}
               selectJob={(detail) => selectedJobs = [...selectedJobs, detail]}
               unselectJob={(detail) => selectedJobs = selectedJobs.filter(item => item !== detail)}
             />

web/frontend/src/generic/filters/Cluster.svelte

@@ -30,11 +30,10 @@
     setFilter
   } = $props();
 
-  /* Const Init */
-  const clusters = getContext("clusters");
-  const initialized = getContext("initialized");
 
   /* Derived */
+  const initialized = $derived(getContext("initialized") || false);
+  const clusterInfos = $derived($initialized ? getContext("clusters") : null);
   let pendingCluster = $derived(presetCluster);
   let pendingPartition = $derived(presetPartition);
 </script>
@@ -56,7 +55,7 @@
           >
             Any Cluster
           </ListGroupItem>
-          {#each clusters as cluster}
+          {#each clusterInfos as cluster}
             <ListGroupItem
               disabled={disableClusterSelection}
               active={pendingCluster == cluster.name}
@@ -80,7 +79,7 @@
         >
           Any Partition
         </ListGroupItem>
-        {#each clusters?.find((c) => c.name == pendingCluster)?.partitions as partition}
+        {#each clusterInfos?.find((c) => c.name == pendingCluster)?.partitions as partition}
           <ListGroupItem
             active={pendingPartition == partition}
             onclick={() => (pendingPartition = partition)}

web/frontend/src/generic/filters/Resources.svelte

@@ -42,8 +42,8 @@
     contains: "Contains",
   }
 
-  const findMaxNumAccels = (clusters) =>
+  const findMaxNumAccels = (infos) =>
-    clusters.reduce(
+    infos.reduce(
       (max, cluster) =>
         Math.max(
           max,
@@ -56,8 +56,8 @@
     );
 
   // Limited to Single-Node Thread Count
-  const findMaxNumHWThreadsPerNode = (clusters) =>
+  const findMaxNumHWThreadsPerNode = (infos) =>
-    clusters.reduce(
+    infos.reduce(
       (max, cluster) =>
         Math.max(
           max,
@@ -92,8 +92,8 @@
   let threadState = $derived(presetNumHWThreads);
   let accState = $derived(presetNumAccelerators);
 
-  const clusters = $derived(getContext("clusters"));
+  const initialized = $derived(getContext("initialized") || false);
-  const initialized = $derived(getContext("initialized"));
+  const clusterInfos = $derived($initialized ? getContext("clusters") : null);
   // Is Selection Active
   const nodesActive = $derived(!(JSON.stringify(nodesState) === JSON.stringify({ from: 1, to: maxNumNodes })));
   const threadActive = $derived(!(JSON.stringify(threadState) === JSON.stringify({ from: 1, to: maxNumHWThreads })));
@@ -109,12 +109,12 @@
   $effect(() => {
     if ($initialized) {
       if (activeCluster != null) {
-        const { subClusters } = clusters.find((c) => c.name == activeCluster);
+        const { subClusters } = clusterInfos.find((c) => c.name == activeCluster);
         maxNumAccelerators = findMaxNumAccels([{ subClusters }]);
         maxNumHWThreads = findMaxNumHWThreadsPerNode([{ subClusters }]);
-      } else if (clusters.length > 0) {
+      } else if (clusterInfos.length > 0) {
-        maxNumAccelerators = findMaxNumAccels(clusters);
+        maxNumAccelerators = findMaxNumAccels(clusterInfos);
-        maxNumHWThreads = findMaxNumHWThreadsPerNode(clusters);
+        maxNumHWThreads = findMaxNumHWThreadsPerNode(clusterInfos);
       }
     }
   });

web/frontend/src/generic/filters/Tags.svelte

@@ -31,8 +31,8 @@
   } = $props();
 
   /* Derived */
-  const allTags = $derived(getContext("tags"))
+  const initialized = $derived(getContext("initialized") || false)
-  const initialized = $derived(getContext("initialized"))
+  const allTags = $derived($initialized ? getContext("tags") : [])
 
   /* State Init */
   let searchTerm = $state("");

web/frontend/src/generic/helper/Tag.svelte

@@ -18,8 +18,8 @@
   } = $props();
 
   /* Derived */
-  const allTags = $derived(getContext('tags'));
+  const initialized = $derived(getContext('initialized') || false);
-  const initialized = $derived(getContext('initialized'));
+  const allTags = $derived($initialized ? getContext('tags') : []);
 
   /* Effects */
   $effect(() => {

web/frontend/src/generic/helper/TagManagement.svelte

@@ -48,8 +48,6 @@
   const client = getContextClient();
 
   /* State Init */
-  let initialized = getContext("initialized")
-  let allTags = getContext("tags")
   let newTagType = $state("");
   let newTagName = $state("");
   let filterTerm = $state("");
@@ -57,10 +55,13 @@
   let isOpen = $state(false);
 
   /* Derived */
+  const initialized = $derived(getContext("initialized") || false );
+  let allTags = $derived(initialized ? getContext("tags") : [])
   let newTagScope = $derived(username);
+
   const isAdmin = $derived((roles && authlevel == roles.admin));
   const isSupport = $derived((roles && authlevel == roles.support));
-  const allTagsFiltered = $derived(($initialized, jobTags, fuzzySearchTags(filterTerm, allTags))); // $init und JobTags only for triggering react
+  const allTagsFiltered = $derived((initialized, jobTags, fuzzySearchTags(filterTerm, allTags))); // $init und JobTags only for triggering react
   const usedTagsFiltered = $derived(matchJobTags(jobTags, allTagsFiltered, 'used', isAdmin, isSupport));
   const unusedTagsFiltered = $derived(matchJobTags(jobTags, allTagsFiltered, 'unused', isAdmin, isSupport));
 

web/frontend/src/generic/joblist/JobListRow.svelte

@@ -11,11 +11,13 @@
   - `triggerMetricRefresh Bool?`: If changed to true from upstream, will trigger metric query [Default: false]
   - `selectJob Func`: The callback function to select a job for comparison
   - `unselectJob Func`: The callback function to unselect a job from comparison
+  - `globalMetrics [Obj]`: Includes the backend supplied availabilities for cluster and subCluster
+  - `clusterInfos [Obj]`: Includes the backend supplied cluster topology
+  - `resampleConfig [Obj]`: Includes the backend supplied resampling info
 -->
 
 <script>
   import { queryStore, gql, getContextClient } from "@urql/svelte";
-  import { getContext } from "svelte";
   import { Card, Spinner } from "@sveltestrap/sveltestrap";
   import { maxScope, checkMetricDisabled } from "../utils.js";
   import JobInfo from "./JobInfo.svelte";
@@ -33,13 +35,13 @@
     triggerMetricRefresh = false,
     selectJob,
     unselectJob,
+    globalMetrics,
+    clusterInfos,
+    resampleConfig
   } = $props();
 
   /* Const Init */
   const client = getContextClient();
-  const cluster = getContext("clusters");
-  const resampleConfig = getContext("resampling") || null;
-  const resampleDefault = resampleConfig ? Math.max(...resampleConfig.resolutions) : 0;
   const query = gql`
     query ($id: ID!, $metrics: [String!]!, $scopes: [MetricScope!]!, $selectedResolution: Int) {
       jobMetrics(id: $id, metrics: $metrics, scopes: $scopes, resolution: $selectedResolution) {
@@ -73,11 +75,11 @@
   `;
 
   /* State Init */
-  let selectedResolution = $state(resampleDefault);
   let zoomStates = $state({});
   let thresholdStates = $state({});
 
   /* Derived */
+  const resampleDefault = $derived(resampleConfig ? Math.max(...resampleConfig.resolutions) : 0);
   const jobId = $derived(job?.id);
   const scopes = $derived.by(() => {
     if (job.numNodes == 1) {
@@ -87,6 +89,8 @@
       return ["node"];
     };
   });
+
+  let selectedResolution = $derived(resampleDefault);
   let isSelected = $derived(previousSelect);
   let metricsQuery = $derived(queryStore({
       client: client,
@@ -94,6 +98,7 @@
       variables: { id: jobId, metrics, scopes, selectedResolution },
     })
   );
+
   const refinedData = $derived($metricsQuery?.data?.jobMetrics ? sortAndSelectScope($metricsQuery.data.jobMetrics) : []);
 
   /* Effects */
@@ -160,6 +165,7 @@
           return {
             name: jobMetric.data.name,
             disabled: checkMetricDisabled(
+              globalMetrics,
               jobMetric.data.name,
               job.cluster,
               job.subCluster,
@@ -220,7 +226,7 @@
                 series={metric.data.metric.series}
                 statisticsSeries={metric.data.metric.statisticsSeries}
                 metric={metric.data.name}
-                cluster={cluster.find((c) => c.name == job.cluster)}
+                cluster={clusterInfos.find((c) => c.name == job.cluster)}
                 subCluster={job.subCluster}
                 isShared={job.shared != "none"}
                 numhwthreads={job.numHWThreads}

web/frontend/src/generic/select/HistogramSelection.svelte

@@ -6,6 +6,7 @@
   - `ìsOpen Bool`: Is selection opened [Bindable]
   - `configName String`: The config id string to be updated in database on selection change
   - `presetSelectedHistograms [String]`: The currently selected metrics to display as histogram
+  - `globalMetrics [Obj]`: Includes the backend supplied availabilities for cluster and subCluster
   - `applyChange Func`: The callback function to apply current selection
 -->
 
@@ -24,10 +25,11 @@
 
   /* Svelte 5 Props */
   let {
-    cluster,
+    cluster = "",
     isOpen = $bindable(),
     configName,
     presetSelectedHistograms,
+    globalMetrics,
     applyChange
   } = $props();
 
@@ -42,11 +44,11 @@
   function loadHistoMetrics(thisCluster) {
     // isInit Check Removed: Parent Component has finished Init-Query: Globalmetrics available here.
     if (!thisCluster) {
-      return getContext("globalMetrics")
+      return globalMetrics
       .filter((gm) => gm?.footprint)
       .map((fgm) => { return fgm.name })
     } else {
-      return getContext("globalMetrics")
+      return globalMetrics
       .filter((gm) => gm?.availability.find((av) => av.cluster == thisCluster))
       .filter((agm) => agm?.footprint)
       .map((afgm) => { return afgm.name })

web/frontend/src/generic/select/MetricSelection.svelte

@@ -9,13 +9,12 @@
   - `cluster String?`: The currently selected cluster [Default: null]
   - `subCluster String?`: The currently selected subCluster [Default: null]
   - `footprintSelect Bool?`: Render checkbox for footprint display in upstream component [Default: false]
-  - `preInitialized Bool?`: If the parent component has a dedicated call to init() [Default: false]
   - `configName String`: The config key for the last saved selection (constant)
+  - `globalMetrics [Obj]`: Includes the backend supplied availabilities for cluster and subCluster
   - `applyMetrics Func`: The callback function to apply current selection
 -->
 
 <script>
-  import { getContext } from "svelte";
   import {
     Modal,
     ModalBody,
@@ -35,14 +34,12 @@
     cluster = null,
     subCluster = null,
     footprintSelect = false,
-    preInitialized = false, // Job View is Pre-Init'd: $initialized "alone" store returns false
     configName,
+    globalMetrics,
     applyMetrics
   } = $props();
 
   /* Const Init */
-  const globalMetrics = getContext("globalMetrics");
-  const initialized = getContext("initialized");
   const client = getContextClient();
   const updateConfigurationMutation = ({ name, value }) => {
     return mutationStore({
@@ -58,27 +55,23 @@
 
   /* State Init */
   let pendingShowFootprint = $state(!!showFootprint);
-  let listedMetrics = $state([]);
   let columnHovering = $state(null);
 
   /* Derives States */
-  let pendingMetrics = $derived(presetMetrics);
+  const allMetrics = $derived(loadAvailable(globalMetrics));
-  const allMetrics = $derived(loadAvailable(preInitialized || $initialized));
+  let pendingMetrics = $derived(presetMetrics || []);
+  let listedMetrics = $derived([...presetMetrics, ...allMetrics.difference(new Set(presetMetrics))]); // List (preset) active metrics first, then list inactives
 
   /* Reactive Effects */
   $effect(() => {
     totalMetrics = allMetrics?.size || 0;
   });
 
-  $effect(() => {
-    listedMetrics = [...presetMetrics, ...allMetrics.difference(new Set(presetMetrics))]; // List (preset) active metrics first, then list inactives
-  });
-
   /* Functions */
-  function loadAvailable(init) {
+  function loadAvailable(gms) {
     const availableMetrics = new Set();
-    if (init) {
+    if (gms) {
-      for (let gm of globalMetrics) {
+      for (let gm of gms) {
         if (!cluster) {
           availableMetrics.add(gm.name)
         } else {
@@ -90,7 +83,7 @@
         }
       }
     }
-    return availableMetrics
+    return availableMetrics;
   }
 
   function printAvailability(metric, cluster) {

web/frontend/src/generic/select/SortSelection.svelte

@@ -5,11 +5,11 @@
   - `presetSorting Object?`: The latest sort selection state
     - Default { field: "startTime", type: "col", order: "DESC" }
   - `isOpen Bool?`: Is modal opened [Bindable, Default: false]
+  - `globalMetrics [Obj]`: Includes the backend supplied availabilities for cluster and subCluster
   - `applySorting Func`: The callback function to apply current selection
 -->
 
 <script>
-  import { getContext, onMount } from "svelte";
   import {
     Icon,
     Button,
@@ -25,12 +25,11 @@
   let {
     isOpen = $bindable(false),
     presetSorting = { field: "startTime", type: "col", order: "DESC" },
+    globalMetrics,
     applySorting
   } = $props();
 
   /* Const Init */
-  const initialized = getContext("initialized");
-  const globalMetrics = getContext("globalMetrics");
   const fixedSortables = $state([ 
     { field: "startTime", type: "col", text: "Start Time (Default)", order: "DESC" },
     { field: "duration", type: "col", text: "Duration", order: "DESC" },
@@ -42,22 +41,11 @@
 
   /* State Init */
   let activeColumnIdx = $state(0);
-  let metricSortables = $state([]);
 
   /* Derived */
   let sorting = $derived({...presetSorting})
-  let sortableColumns = $derived([...fixedSortables, ...metricSortables]);
+  let metricSortables = $derived.by(() => {
-
+    return globalMetrics.map((gm) => {
-  /* Effect */
-  $effect(() => {
-    if ($initialized) {
-      loadMetricSortables();
-    };
-  });
-
-  /* Functions */  
-  function loadMetricSortables() {
-    metricSortables = globalMetrics.map((gm) => {
         if (gm?.footprint) {
             return { 
                 field: gm.name + '_' + gm.footprint,
@@ -68,8 +56,10 @@
         }
         return null
     }).filter((r) => r != null)
-  };
+  });
+  let sortableColumns = $derived([...fixedSortables, ...metricSortables]);
 
+  /* Functions */  
   function loadActiveIndex() {
     activeColumnIdx = sortableColumns.findIndex(
       (col) => col.field == sorting.field,

web/frontend/src/generic/utils.js

@@ -302,19 +302,17 @@ export function stickyHeader(datatableHeaderSelector, updatePading) {
     onDestroy(() => document.removeEventListener("scroll", onscroll));
 }
 
-export function checkMetricDisabled(m, c, s) { // [m]etric, [c]luster, [s]ubcluster
+export function checkMetricDisabled(gm, m, c, s) { // [g]lobal[m]etrics, [m]etric, [c]luster, [s]ubcluster
-    const metrics = getContext("globalMetrics");
+    const available = gm?.find((gm) => gm.name === m)?.availability?.find((av) => av.cluster === c)?.subClusters?.includes(s)
-    const available = metrics?.find((gm) => gm.name === m)?.availability?.find((av) => av.cluster === c)?.subClusters?.includes(s)
     // Return inverse logic
     return !available
 }
 
-export function checkMetricsDisabled(ma, c, s) { // [m]etric[a]rray, [c]luster, [s]ubcluster
+export function checkMetricsDisabled(gm, ma, c, s) { // [g]lobal[m]etrics, [m]etric[a]rray, [c]luster, [s]ubcluster
     let result = {};
-    const metrics = getContext("globalMetrics");
     ma.forEach((m) => {
         // Return named inverse logic: !available
-        result[m] = !(metrics?.find((gm) => gm.name === m)?.availability?.find((av) => av.cluster === c)?.subClusters?.includes(s))
+        result[m] = !(gm?.find((gm) => gm.name === m)?.availability?.find((av) => av.cluster === c)?.subClusters?.includes(s))
     });
     return result
 }

web/frontend/src/job/JobRoofline.svelte

@@ -3,7 +3,7 @@
 
   Properties:
   - `job Object`: The GQL job object
-  - `clusters Array`: The GQL clusters array
+  - `clusterInfo Array`: The GQL clusters array
 -->
 
  <script>
@@ -24,7 +24,7 @@
   /* Svelte 5 Props */
   let {
     job,
-    clusters,
+    clusterInfo,
   } = $props();
 
   /* Const Init */
@@ -62,7 +62,7 @@
     <div bind:clientWidth={roofWidth}>
       <Roofline
         width={roofWidth}
-        subCluster={clusters
+        subCluster={clusterInfo
           .find((c) => c.name == job.cluster)
           .subClusters.find((sc) => sc.name == job.subCluster)}
         data={transformDataForRoofline(

web/frontend/src/job/StatsTab.svelte

@@ -3,8 +3,10 @@
 
   Properties:
   - `job Object`: The job object
-  - `clusters Object`: The clusters object
+  - `clusterInfo Object`: The clusters object
   - `tabActive bool`: Boolean if StatsTabe Tab is Active on Creation
+  - `globalMetrics [Obj]`: Includes the backend supplied availabilities for cluster and subCluster
+  - `ccconfig Object?`: The ClusterCockpit Config Context
 -->
 
 <script>
@@ -13,7 +15,6 @@
     gql,
     getContextClient 
   } from "@urql/svelte";
-  import { getContext } from "svelte";
   import {
     Card,
     Button,
@@ -29,8 +30,10 @@
   /* Svelte 5 Props */
   let {
     job,
-    clusters,
+    clusterInfo,
     tabActive,
+    globalMetrics,
+    ccconfig
   } = $props();
 
   /* Const Init */
@@ -55,65 +58,73 @@
 
   /* State Init */
   let moreScopes = $state(false);
-  let selectedScopes = $state([]);
-  let selectedMetrics = $state([]);
   let totalMetrics = $state(0); // For Info Only, filled by MetricSelection Component
   let isMetricSelectionOpen = $state(false);
 
-  /* Derived */
+  /* Derived Var Preprocessing*/
-  const scopedStats = $derived(queryStore({
+  let selectedTableMetrics = $derived.by(() => {
-      client: client,
+    if(job && ccconfig) {
-      query: query,
+      if (job.cluster) {
-      variables: { dbid: job.id, selectedMetrics, selectedScopes },
+        if (job.subCluster) {
-    })
+          return ccconfig[`metricConfig_jobViewTableMetrics:${job.cluster}:${job.subCluster}`] ||
-  );
+            ccconfig[`metricConfig_jobViewTableMetrics:${job.cluster}`] ||
-
+            ccconfig.metricConfig_jobViewTableMetrics
-  /* Functions  */
+        }
-  function loadScopes() {
+        return ccconfig[`metricConfig_jobViewTableMetrics:${job.cluster}`] ||
-    // Archived Jobs Load All Scopes By Default (See Backend)
+          ccconfig.metricConfig_jobViewTableMetrics
-    moreScopes = true;
+      }
-    selectedScopes = ["node", "socket", "core", "hwthread", "accelerator"];
+      return ccconfig.metricConfig_jobViewTableMetrics
-  };
+    }
-
+    return [];
-  /* On Init */
+  });
-  // Handle Job Query on Init -> is not executed anymore
-  getContext("on-init")(() => {
-    if (!job) return;
-
-    const pendingMetrics = (
-      getContext("cc-config")[`metricConfig_jobViewTableMetrics:${job.cluster}:${job.subCluster}`] ||
-      getContext("cc-config")[`metricConfig_jobViewTableMetrics:${job.cluster}`]
-    ) || getContext("cc-config")["metricConfig_jobViewTableMetrics"];
 
+  let selectedTableScopes = $derived.by(() => {
+    if (job) {
+      if (!moreScopes) {
         // Select default Scopes to load: Check before if any metric has accelerator scope by default
-    const accScopeDefault = [...pendingMetrics].some(function (m) {
+        const pendingScopes = ["node"]
-      const cluster = clusters.find((c) => c.name == job.cluster);
+        const accScopeDefault = [...selectedTableMetrics].some(function (m) {
+          const cluster = clusterInfo.find((c) => c.name == job.cluster);
           const subCluster = cluster.subClusters.find((sc) => sc.name == job.subCluster);
           return subCluster.metricConfig.find((smc) => smc.name == m)?.scope === "accelerator";
         });
         
-    const pendingScopes = ["node"]
         if (job.numNodes === 1) {
           pendingScopes.push("socket")
           pendingScopes.push("core")
           pendingScopes.push("hwthread")
           if (accScopeDefault) { pendingScopes.push("accelerator") }
         }
-
+        return[...new Set(pendingScopes)]; 
-    selectedMetrics = [...pendingMetrics];
+      } else {
-    selectedScopes = [...pendingScopes];
+        // If flag set: Always load all scopes
+        return ["node", "socket", "core", "hwthread", "accelerator"];
+      }
+    } // Fallback
+    return ["node"]
   });
 
+  /* Derived Query */
+  const scopedStats = $derived(queryStore({
+      client: client,
+      query: query,
+      variables: {
+        dbid: job.id,
+        selectedMetrics: selectedTableMetrics,
+        selectedScopes: selectedTableScopes
+      },
+    })
+  );
 </script>
 
 <TabPane tabId="stats" tab="Statistics Table" class="overflow-x-auto" active={tabActive}>
   <Row>
     <Col class="m-2">
       <Button outline onclick={() => (isMetricSelectionOpen = true)} class="px-2" color="primary" style="margin-right:0.5rem">
-        Select Metrics (Selected {selectedMetrics.length} of {totalMetrics} available)
+        Select Metrics (Selected {selectedTableMetrics.length} of {totalMetrics} available)
       </Button>
       {#if job.numNodes > 1 && job.state === "running"}
-        <Button class="px-2 ml-auto" color="success" outline onclick={loadScopes} disabled={moreScopes}>
+        <Button class="px-2 ml-auto" color="success" outline onclick={() => (moreScopes = !moreScopes)} disabled={moreScopes}>
           {#if !moreScopes}
             <Icon name="plus-square-fill" style="margin-right:0.25rem"/> Add More Scopes
           {:else}
@@ -141,7 +152,7 @@
     <StatsTable 
       hosts={job.resources.map((r) => r.hostname).sort()}
       jobStats={$scopedStats?.data?.scopedJobStats}
-      {selectedMetrics}
+      selectedMetrics={selectedTableMetrics}
     />
   {/if}
 </TabPane>
@@ -149,12 +160,12 @@
 <MetricSelection
   bind:isOpen={isMetricSelectionOpen}
   bind:totalMetrics
-  presetMetrics={selectedMetrics}
+  presetMetrics={selectedTableMetrics}
   cluster={job.cluster}
   subCluster={job.subCluster}
   configName="metricConfig_jobViewTableMetrics"
-  preInitialized
+  {globalMetrics}
   applyMetrics={(newMetrics) => 
-    selectedMetrics = [...newMetrics]
+    selectedTableMetrics = [...newMetrics]
   }
 />

web/frontend/src/systems/NodeList.svelte

@@ -5,11 +5,12 @@
   - `cluster String`: The nodes' cluster
   - `subCluster String`: The nodes' subCluster [Default: ""]
   - `ccconfig Object?`: The ClusterCockpit Config Context [Default: null]
+  - `globalMetrics [Obj]`: Includes the backend supplied availabilities for cluster and subCluster
   - `pendingSelectedMetrics [String]`: The array of selected metrics [Default []]
   - `selectedResolution Number?`: The selected data resolution [Default: 0]
   - `hostnameFilter String?`: The active hostnamefilter [Default: ""]
   - `hoststateFilter String?`: The active hoststatefilter [Default: ""]
-  - `presetSystemUnits Object`: The object of metric units [Default: null]
+  - `systemUnits Object`: The object of metric units [Default: null]
   - `from Date?`: The selected "from" date [Default: null]
   - `to Date?`: The selected "to" date [Default: null]
 -->
@@ -27,11 +28,12 @@
     cluster,
     subCluster = "",
     ccconfig = null,
+    globalMetrics = null,
     pendingSelectedMetrics = [],
     selectedResolution = 0,
     hostnameFilter = "",
     hoststateFilter = "",
-    presetSystemUnits = null,
+    systemUnits = null,
     from = null,
     to = null
   } = $props();
@@ -236,7 +238,7 @@
               scope="col"
               style="padding-top: {headerPaddingTop}px"
             >
-              {metric} ({presetSystemUnits[metric]})
+              {metric} ({systemUnits[metric]})
             </th>
           {/each}
         </tr>
@@ -250,7 +252,7 @@
           </Row>
         {:else}
           {#each nodes as nodeData (nodeData.host)}
-            <NodeListRow {nodeData} {cluster} {selectedMetrics}/>
+            <NodeListRow {nodeData} {cluster} {selectedMetrics} {globalMetrics}/>
           {:else}
             <tr>
               <td colspan={selectedMetrics.length + 1}> No nodes found </td>

web/frontend/src/systems/NodeOverview.svelte

@@ -9,10 +9,10 @@
   - `hostnameFilter String?`: The active hoststatefilter [Default: ""]
   - `from Date?`: The selected "from" date [Default: null]
   - `to Date?`: The selected "to" date [Default: null]
+  - `globalMetrics [Obj]`: Includes the backend supplied availabilities for cluster and subCluster
 -->
 
  <script>
-  import { getContext } from "svelte";
   import { queryStore, gql, getContextClient } from "@urql/svelte";
   import { Row, Col, Card, CardHeader, CardBody, Spinner, Badge } from "@sveltestrap/sveltestrap";
   import { checkMetricDisabled } from "../generic/utils.js";
@@ -26,11 +26,11 @@
     hostnameFilter = "",
     hoststateFilter = "",
     from = null,
-    to = null
+    to = null,
+    globalMetrics
   } = $props();
 
   /* Const Init */
-  const initialized = getContext("initialized");
   const client = getContextClient();
   // Node State Colors
   const stateColors = {
@@ -87,7 +87,7 @@
     },
   }));
 
-  const mappedData = $derived(handleQueryData($initialized, $nodesQuery?.data));
+  const mappedData = $derived(handleQueryData($nodesQuery?.data));
   const filteredData = $derived(mappedData.filter((h) => {
     if (hostnameFilter) {
       if (hoststateFilter == 'all') return h.host.includes(hostnameFilter)
@@ -99,7 +99,7 @@
   }));
 
   /* Functions */
-  function handleQueryData(isInitialized, queryData) {
+  function handleQueryData(queryData) {
     let rawData = []
     if (queryData) { 
       rawData = queryData.nodeMetrics.filter((h) => {
@@ -120,7 +120,8 @@
         data: h.metrics.filter(
           (m) => m?.name == selectedMetric && m.scope == "node",
         ),
-        disabled: isInitialized ? checkMetricDisabled(selectedMetric, cluster, h.subCluster) : null,
+        // TODO: Move To New Func Variant With Disabled Check on WHole Cluster Level: This never Triggers!
+        disabled: checkMetricDisabled(globalMetrics, selectedMetric, cluster, h.subCluster),
       }))
       .sort((a, b) => a.host.localeCompare(b.host))
     }
@@ -163,6 +164,7 @@
           </div>
           {#if item?.data}
             {#if item.disabled === true}
+              <!-- TODO: Will never be Shown: Overview Single Metric Return Will be Null, see Else Case-->
               <Card body class="mx-3" color="info"
                 >Metric disabled for subcluster <code
                   >{selectedMetric}:{item.subCluster}</code
@@ -182,7 +184,7 @@
                   enableFlip
                 />
               {/key}
-            {:else if item.disabled === null}
+            {:else}
               <Card body class="mx-3" color="info">
                 Global Metric List Not Initialized
                 Can not determine {selectedMetric} availability: Please Reload Page

web/frontend/src/systems/nodelist/NodeListRow.svelte

@@ -5,6 +5,7 @@
   - `cluster String`: The nodes' cluster
   - `nodeData Object`: The node data object including metric data
   - `selectedMetrics [String]`: The array of selected metrics
+  - `globalMetrics [Obj]`: Includes the backend supplied availabilities for cluster and subCluster
 -->
 
 <script>
@@ -24,6 +25,7 @@
     cluster,
     nodeData,
     selectedMetrics,
+    globalMetrics
   } = $props();
 
   /* Var Init*/
@@ -92,6 +94,7 @@
         if (scopedNodeMetric?.data) {
           return {
             disabled: checkMetricDisabled(
+              globalMetrics,
               scopedNodeMetric.data.name,
               cluster,
               nodeData.subCluster,