change to one reactive metric data load on two variables

web/frontend/src/job/Metric.svelte

@@ -41,14 +41,16 @@
     plot,
     error = null;
   let selectedScope = minScope(scopes);
-  let selectedResolution = 600
+  let selectedResolution;
-  let statsPattern = /(.*)-stat$/
+  let pendingResolution = 600;
-  let statsSeries = rawData.map((data) => data?.statisticsSeries ? data.statisticsSeries : null)
+  let selectedScopeIndex = scopes.findIndex((s) => s == minScope(scopes));
-  let selectedScopeIndex
+  const statsPattern = /(.*)-stat$/;
+  let patternMatches = false;
+  let statsSeries = rawData.map((data) => data?.statisticsSeries ? data.statisticsSeries : null);
 
   // const dispatch = createEventDispatcher();
-  const unit = (metricUnit?.prefix ? metricUnit.prefix : "") + (metricUnit?.base ? metricUnit.base : "")
+  const unit = (metricUnit?.prefix ? metricUnit.prefix : "") + (metricUnit?.base ? metricUnit.base : "");
-  const resolutions = [600, 240, 60]
+  const resolutions = [600, 240, 60] // DEV: Make configable
   const client = getContextClient();
   const subQuery = gql`
     query ($dbid: ID!, $selectedMetrics: [String!]!, $selectedScopes: [MetricScope!]!, $selectedResolution: Int) {
@@ -86,39 +88,68 @@
   const dbid = job.id;
   const selectedMetrics = [metricName]
 
-  function loadUpdate() {
+  $: if (selectedScope == "load-all" || pendingResolution) {
-    console.log('S> OLD DATA:', rawData)
+    
+    if (selectedScope == "load-all") {
+      console.log('Triggered load-all')
+      selectedScopes = [...scopes, "socket", "core"]
+    } else {
+      console.log("Triggered scope switch:", selectedScope, pendingResolution)
+    }
+
+    // What if accelerator scope / native core scopes?
+    if ((selectedResolution !== pendingResolution) && selectedScopes.length >= 2) {
+      selectedScope = String("node")
+      selectedScopes = ["node"]
+      console.log("New Resolution: Reset to node scope")
+    } else {
+      console.log("New Resolution: No change in Res or just node scope")
+    }
+
+    if (!selectedResolution) {
+      selectedResolution = Number(pendingResolution)
+    } else {
+      selectedResolution = Number(pendingResolution)
+
       metricData = queryStore({
         client: client,
         query: subQuery,
         variables: { dbid, selectedMetrics, selectedScopes, selectedResolution },
+      // requestPolicy: "network-only",
       });
 
-  };
+      if ($metricData && !$metricData.fetching) {
+        console.log('Trigger Data Handling')
 
-  $: if (selectedScope == "load-all") {
+        rawData = $metricData.data.singleUpdate.map((x) => x.metric)
-    scopes = [...scopes, "socket", "core"]
+        scopes  = $metricData.data.singleUpdate.map((x) => x.scope)
-    selectedScope = nativeScope
+        statsSeries   = rawData.map((data) => data?.statisticsSeries ? data.statisticsSeries : null)
-    selectedScopes = [...scopes]
-    loadUpdate()
-  };
 
-  $: patternMatches = statsPattern.exec(selectedScope)
+        // Handle Selected Scope on load-all
-  $: if (!patternMatches) {
+        if (selectedScope == "load-all") {
+          selectedScope = minScope(scopes)
+          console.log('Set New SelectedScope after Load-All', selectedScope, scopes)
+        } else {
+          console.log('Set New SelectedScope', selectedScope)
+        }
+
+        patternMatches = statsPattern.exec(selectedScope)
+        if (!patternMatches) {
           selectedScopeIndex = scopes.findIndex((s) => s == selectedScope);
+          console.log("Selected Index # from Array", selectedScopeIndex, scopes)
         } else {
           selectedScopeIndex = scopes.findIndex((s) => s == patternMatches[1]);
+          console.log("Selected Stats Index # from Array", selectedScopeIndex, scopes)
         }
+      }
+    }
+  }
+
   $: data = rawData[selectedScopeIndex];
+  
   $: series = data?.series.filter(
     (series) => selectedHost == null || series.hostname == selectedHost,
   );
-
-  $: if ($metricData && !$metricData.fetching) {
-    rawData = $metricData.data.singleUpdate.map((x) => x.metric)
-    console.log('S> NEW DATA:', rawData)
-  }
-  $: console.log('SelectedScope', selectedScope)
 </script>
 
 <InputGroup>
@@ -144,12 +175,7 @@
       {/each}
     </select>
   {/if}
-  <select class="form-select" bind:value={selectedResolution} on:change={() => {
+  <select class="form-select" bind:value={pendingResolution}>
-      scopes = ["node"]
-      selectedScope = "node"
-      selectedScopes = [...scopes]
-      loadUpdate()
-    }}>
     {#each resolutions as res}
       <option value={res}>Timestep: {res}</option>
     {/each}