complete review of context initialization and access, streamlining

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(preInitialized || $initialized));
+  const allMetrics = $derived(loadAvailable(globalMetrics));
+  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) {
-      for (let gm of globalMetrics) {
+    if (gms) {
+      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]);
-
-  /* Effect */
-  $effect(() => {
-    if ($initialized) {
-      loadMetricSortables();
-    };
-  });
-
-  /* Functions */  
-  function loadMetricSortables() {
-    metricSortables = globalMetrics.map((gm) => {
+  let metricSortables = $derived.by(() => {
+    return 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,