Migrate job list view and filter components

- filters now inactive in user jobs, lists and analysis due to missing dispatch

web/frontend/src/Jobs.root.svelte

@@ -8,7 +8,7 @@
  -->
  
  <script>
-  import { onMount, getContext } from "svelte";
+  import { untrack, onMount, getContext } from "svelte";
   import {
     Row,
     Col,
@@ -28,42 +28,57 @@
   import MetricSelection from "./generic/select/MetricSelection.svelte";
 
   const { query: initq } = init();
-
   const ccconfig = getContext("cc-config");
 
-  export let filterPresets = {};
-  export let authlevel;
-  export let roles;
+  // Svelte 5 Props
+  let { filterPresets, authlevel, roles } = $props();
 
-  let filterComponent; // see why here: https://stackoverflow.com/questions/58287729/how-can-i-export-a-function-from-a-svelte-component-that-changes-a-value-in-the
-  let filterBuffer = [];
-  let selectedJobs = [];
-  let jobList,
-      jobCompare,
-    matchedListJobs,
-    matchedCompareJobs = null;
-  let sorting = { field: "startTime", type: "col", order: "DESC" },
-    isSortingOpen = false,
-    isMetricsSelectionOpen = false;
-  let metrics = filterPresets.cluster
+  // Svelte 5 Reactive Vars
+  let filterComponent = $state(); // see why here: https://stackoverflow.com/questions/58287729/how-can-i-export-a-function-from-a-svelte-component-that-changes-a-value-in-the
+  let selectedJobs = $state([]);
+  let filterBuffer = $state([]);
+  let jobList = $state(null);
+  let jobCompare = $state(null);
+  let matchedListJobs = $state(0);
+  let matchedCompareJobs = $state(0);
+  let isSortingOpen = $state(false);
+  let showCompare = $state(false);
+  let isMetricsSelectionOpen = $state(false);
+  let sorting = $state({ field: "startTime", type: "col", order: "DESC" });
+  let selectedCluster = $state(filterPresets?.cluster ? filterPresets.cluster : null);
+  let metrics = $state(filterPresets.cluster
     ? ccconfig[`plot_list_selectedMetrics:${filterPresets.cluster}`] ||
       ccconfig.plot_list_selectedMetrics
-    : ccconfig.plot_list_selectedMetrics;
-  let showFootprint = filterPresets.cluster
+    : ccconfig.plot_list_selectedMetrics
+  );
+  let showFootprint = $state(filterPresets.cluster
     ? !!ccconfig[`plot_list_showFootprint:${filterPresets.cluster}`]
-    : !!ccconfig.plot_list_showFootprint;
-  let selectedCluster = filterPresets?.cluster ? filterPresets.cluster : null;
+    : !!ccconfig.plot_list_showFootprint
+  );
+
+  // Classic Inits
   let presetProject = filterPresets?.project ? filterPresets.project : ""
-  let showCompare = false;
 
   // The filterPresets are handled by the Filters component,
   // so we need to wait for it to be ready before we can start a query.
   // This is also why JobList component starts out with a paused query.
   onMount(() => filterComponent.updateFilters());
 
-  $: if (filterComponent && selectedJobs.length == 0) {
-    filterComponent.updateFilters({dbId: []})
-  }
+  function resetJobSelection() {
+    if (filterComponent && selectedJobs.length === 0) {
+      filterComponent.updateFilters({ dbId: [] });
+    };
+  };
+
+  $effect(() => {
+    // Reactive : Trigger Effect
+    selectedJobs.length
+    untrack(() => {
+      // Unreactive : Apply Reset w/o starting infinite loop
+      resetJobSelection()
+    });
+	});
+
 </script>
 
 <!-- ROW1: Status-->
@@ -85,13 +100,13 @@
 <Row cols={{ xs: 1, md: 2, lg: 5}} class="mb-3">
   <Col lg="2" class="mb-2 mb-lg-0">
     <ButtonGroup class="w-100">
-      <Button outline color="primary" on:click={() => (isSortingOpen = true)} disabled={showCompare}>
+      <Button outline color="primary" onclick={() => (isSortingOpen = true)} disabled={showCompare}>
         <Icon name="sort-up" /> Sorting
       </Button>
       <Button
         outline
         color="primary"
-        on:click={() => (isMetricsSelectionOpen = true)}
+        onclick={() => (isMetricsSelectionOpen = true)}
       >
         <Icon name="graph-up" /> Metrics
       </Button>
@@ -99,11 +114,11 @@
   </Col>
   <Col lg="4" class="mb-1 mb-lg-0">
     <Filters
-      showFilter={!showCompare}
-      {filterPresets}
-      matchedJobs={showCompare? matchedCompareJobs: matchedListJobs}
       bind:this={filterComponent}
-      on:update-filters={({ detail }) => {
+      {filterPresets}
+      showFilter={!showCompare}
+      matchedJobs={showCompare? matchedCompareJobs: matchedListJobs}
+      applyFilters={(detail) => {
         selectedCluster = detail.filters[0]?.cluster
           ? detail.filters[0].cluster.eq
           : null;
@@ -122,13 +137,13 @@
         {presetProject}
         bind:authlevel
         bind:roles
-        on:set-filter={({ detail }) => filterComponent.updateFilters(detail)}
+        setFilter={(filter) => filterComponent.updateFilters(filter)}
       />
     {/if}
   </Col>
   <Col lg="2" class="mb-1 mb-lg-0">
     {#if !showCompare}
-      <Refresher on:refresh={() => {
+      <Refresher onRefresh={() => {
           jobList.refreshJobs()
           jobList.refreshAllMetrics()
       }} />
@@ -136,7 +151,7 @@
   </Col>
   <Col lg="2" class="mb-2 mb-lg-0">
     <ButtonGroup class="w-100">
-      <Button color="primary" disabled={matchedListJobs >= 500 && !(selectedJobs.length != 0)} on:click={() => {
+      <Button color="primary" disabled={matchedListJobs >= 500 && !(selectedJobs.length != 0)} onclick={() => {
         if (selectedJobs.length != 0) filterComponent.updateFilters({dbId: selectedJobs}, true)
         showCompare = !showCompare
       }} >
@@ -144,7 +159,7 @@
         'Compare Jobs' + (selectedJobs.length != 0 ? ` (${selectedJobs.length} selected)` : matchedListJobs >= 500 ? ` (Too Many)` : ``)}
       </Button>
       {#if !showCompare && selectedJobs.length != 0}
-        <Button color="warning" on:click={() => {
+        <Button color="warning" onclick={() => {
           selectedJobs = [] // Only empty array, filters handled by reactive reset
         }}>
         Clear