initial commit with example event dispatch

web/frontend/src/Job.root.svelte

@@ -75,7 +75,7 @@
             duration, numNodes, numHWThreads, numAcc,
             SMT, exclusive, partition, subCluster, arrayJobId,
             monitoringStatus, state, walltime,
-            tags { id, type, name, scope },
+            tags { id, type, name },
             resources { hostname, hwthreads, accelerators },
             metaData,
             userData { name, email },
@@ -229,6 +229,11 @@
         $initq.data.job.subCluster,
       ),
     }));
+
+
+    const loadRes = ({ detail }) => {
+      console.log(">>> UPPER RES REQUEST", detail)
+    }
 </script>
 
 <Row>
@@ -358,6 +363,7 @@
           <Metric
             bind:this={plots[item.metric]}
             on:load-all={loadAllScopes}
+            on:new-res={loadRes}
             job={$initq.data.job}
             metricName={item.metric}
             metricUnit={$initq.data.globalMetrics.find((gm) => gm.name == item.metric)?.unit}

web/frontend/src/Node.root.svelte

@@ -27,7 +27,7 @@
   import {
     init,
     checkMetricDisabled,
-  } from "./utils.js";
+  } from "./generic/utils.js";
   import PlotTable from "./generic/PlotTable.svelte";
   import MetricPlot from "./generic/plots/MetricPlot.svelte";
   import TimeSelection from "./generic/select/TimeSelection.svelte";

web/frontend/src/job/Metric.svelte

@@ -40,11 +40,15 @@
     fetching = false,
     error = null;
   let selectedScope = minScope(scopes);
+  let selectedResolution = 60
+  $: dispatch("new-res", selectedResolution)
 
   let statsPattern = /(.*)-stat$/
   let statsSeries = rawData.map((data) => data?.statisticsSeries ? data.statisticsSeries : null)
   let selectedScopeIndex
 
+  const resolutions = [60, 240, 600]
+
   $: availableScopes = scopes;
   $: patternMatches = statsPattern.exec(selectedScope)
   $: if (!patternMatches) {
@@ -83,6 +87,11 @@
       {/each}
     </select>
   {/if}
+  <select class="form-select" bind:value={selectedResolution}>
+    {#each resolutions as res}
+      <option value={res}>Timestep: {res}</option>
+    {/each}
+  </select>
 </InputGroup>
 {#key series}
   {#if fetching == true}