From ffd596e2c7756304c4697251a3195efd052bf405 Mon Sep 17 00:00:00 2001
From: Christoph Kluge <christoph.kluge@fau.de>
Date: Mon, 19 May 2025 09:25:23 +0200
Subject: [PATCH] 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             | 83 +++++++++++--------
 web/frontend/src/generic/Filters.svelte       | 50 +++++------
 .../src/generic/helper/Refresher.svelte       | 17 ++--
 .../src/generic/helper/TextFilter.svelte      | 29 ++++---
 4 files changed, 99 insertions(+), 80 deletions(-)

diff --git a/web/frontend/src/Jobs.root.svelte b/web/frontend/src/Jobs.root.svelte
index 1e7f96d..1c13777 100644
--- a/web/frontend/src/Jobs.root.svelte
+++ b/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
diff --git a/web/frontend/src/generic/Filters.svelte b/web/frontend/src/generic/Filters.svelte
index ee7f327..d56bb84 100644
--- a/web/frontend/src/generic/Filters.svelte
+++ b/web/frontend/src/generic/Filters.svelte
@@ -16,7 +16,6 @@
  -->
 
 <script>
-  import { createEventDispatcher } from "svelte";
   import {
     DropdownItem,
     DropdownMenu,
@@ -37,14 +36,16 @@
   import Resources from "./filters/Resources.svelte";
   import Statistics from "./filters/Stats.svelte";
 
-  const dispatch = createEventDispatcher();
-
-  export let menuText = null;
-  export let filterPresets = {};
-  export let disableClusterSelection = false;
-  export let startTimeQuickSelect = false;
-  export let matchedJobs = -2;
-  export let showFilter = true;
+  // Svelte 5 Props
+  let {  
+    menuText = null,
+    filterPresets = {},
+    disableClusterSelection = false,
+    startTimeQuickSelect = false,
+    matchedJobs = -2,
+    showFilter = true,
+    applyFilters
+  } = $props();
 
   const startTimeSelectOptions = [
     { range: "", rangeLabel: "No Selection"},
@@ -92,7 +93,8 @@
     stats: [],
   };
 
-  let filters = {
+  // Svelte 5 Reactive Vars
+  let filters = $state({
     projectMatch: filterPresets.projectMatch || "contains",
     userMatch: filterPresets.userMatch || "contains",
     jobIdMatch: filterPresets.jobIdMatch || "eq",
@@ -126,19 +128,19 @@
     numAccelerators: filterPresets.numAccelerators || { from: null, to: null },
 
     stats: filterPresets.stats || [],
-  };
+  });
 
-  let isClusterOpen = false,
-    isJobStatesOpen = false,
-    isStartTimeOpen = false,
-    isTagsOpen = false,
-    isDurationOpen = false,
-    isEnergyOpen = false,
-    isResourcesOpen = false,
-    isStatsOpen = false,
-    isNodesModified = false,
-    isHwthreadsModified = false,
-    isAccsModified = false;
+  let isClusterOpen = $state(false)
+  let isJobStatesOpen = $state(false)
+  let isStartTimeOpen = $state(false)
+  let isTagsOpen = $state(false)
+  let isDurationOpen = $state(false)
+  let isEnergyOpen = $state(false)
+  let isResourcesOpen = $state(false)
+  let isStatsOpen = $state(false)
+  let isNodesModified = $state(false)
+  let isHwthreadsModified = $state(false)
+  let isAccsModified = $state(false)
 
   // Can be called from the outside to trigger a 'update' event from this component.
   // 'force' option empties existing filters and then applies only 'additionalFilters'
@@ -217,7 +219,7 @@
     if (filters.stats.length != 0)
       items.push({ metricStats: filters.stats.map((st) => { return { metricName: st.field, range: { from: st.from, to: st.to }} }) });
 
-    dispatch("update-filters", { filters: items });
+    applyFilters({ filters: items });
     changeURL();
     return items;
   }
@@ -296,7 +298,7 @@
 <!-- Dropdown-Button -->
 <ButtonGroup>
   {#if showFilter}
-    <ButtonDropdown class="cc-dropdown-on-hover mb-1" style="{(matchedJobs >= -1) ? '' : 'margin-right: 0.5rem;'}">
+    <ButtonDropdown class="cc-dropdown-on-hover mb-1" style={(matchedJobs >= -1) ? '' : 'margin-right: 0.5rem;'}>
       <DropdownToggle outline caret color="success">
         <Icon name="sliders" />
         Filters
diff --git a/web/frontend/src/generic/helper/Refresher.svelte b/web/frontend/src/generic/helper/Refresher.svelte
index f5c6406..a1a1e58 100644
--- a/web/frontend/src/generic/helper/Refresher.svelte
+++ b/web/frontend/src/generic/helper/Refresher.svelte
@@ -8,22 +8,21 @@
     - `refresh`: When fired, the upstream component refreshes its contents
  -->
 <script>
-  import { createEventDispatcher } from "svelte";
   import { Button, Icon, Input, InputGroup } from "@sveltestrap/sveltestrap";
 
-  const dispatch = createEventDispatcher();
-
-  let refreshInterval = null;
+  let refreshInterval = $state(null);
   let refreshIntervalId = null;
+
   function refreshIntervalChanged() {
     if (refreshIntervalId != null) clearInterval(refreshIntervalId);
-
     if (refreshInterval == null) return;
-
     refreshIntervalId = setInterval(() => dispatch("refresh"), refreshInterval);
   }
 
-  export let initially = null;
+  let {
+    initially = null,
+    onRefresh
+  } = $props();
 
   if (initially != null) {
     refreshInterval = initially * 1000;
@@ -36,7 +35,7 @@
     type="select"
     title="Periodic refresh interval"
     bind:value={refreshInterval}
-    on:change={refreshIntervalChanged}
+    onchange={refreshIntervalChanged}
   >
     <option value={null}>No Interval</option>
     <option value={30 * 1000}>30 Seconds</option>
@@ -46,7 +45,7 @@
   </Input>
   <Button
     outline
-    on:click={() => dispatch("refresh")}
+    onclick={() => onRefresh()}
     disabled={refreshInterval != null}
     >
     <Icon name="arrow-clockwise" /> Refresh
diff --git a/web/frontend/src/generic/helper/TextFilter.svelte b/web/frontend/src/generic/helper/TextFilter.svelte
index 5ac9203..4b663de 100644
--- a/web/frontend/src/generic/helper/TextFilter.svelte
+++ b/web/frontend/src/generic/helper/TextFilter.svelte
@@ -12,16 +12,19 @@
 
 <script>
   import { InputGroup, Input, Button, Icon } from "@sveltestrap/sveltestrap";
-  import { createEventDispatcher } from "svelte";
   import { scramble, scrambleNames } from "../utils.js";
 
-  const dispatch = createEventDispatcher();
+  // If page with this component has project preset, keep preset until reset
+  let {
+    presetProject = "",
+    authlevel = null,
+    roles = null,
+    setFilter
+  } = $props();
+
+  let mode = $state(presetProject ? "jobName" : "project");
+  let term = $state("");
 
-  export let presetProject = ""; // If page with this component has project preset, keep preset until reset
-  export let authlevel = null;
-  export let roles = null;
-  let mode = presetProject ? "jobName" : "project";
-  let term = "";
   let user = "";
   let project = presetProject ? presetProject : "";
   let jobName = "";
@@ -52,7 +55,7 @@
       if (timeoutId != null) clearTimeout(timeoutId);
 
       timeoutId = setTimeout(() => {
-        dispatch("set-filter", {
+        setFilter({
           user,
           project,
           jobName
@@ -65,7 +68,7 @@
       if (timeoutId != null) clearTimeout(timeoutId);
 
       timeoutId = setTimeout(() => {
-        dispatch("set-filter", {
+        setFilter({
           project,
           jobName
         });
@@ -91,7 +94,7 @@
     class="form-select"
     title="Search Mode"
     bind:value={mode}
-    on:change={modeChanged}
+    onchange={modeChanged}
   >
     {#if !presetProject}
       <option value={"project"}>Project</option>
@@ -104,12 +107,12 @@
   <Input
     type="text"
     bind:value={term}
-    on:change={() => termChanged()}
-    on:keyup={(event) => termChanged(event.key == "Enter" ? 0 : throttle)}
+    onchange={() => termChanged()}
+    onkeyup={(event) => termChanged(event.key == "Enter" ? 0 : throttle)}
     placeholder={presetProject ? `Find ${mode} in ${scrambleNames ? scramble(presetProject) : presetProject} ...` : `Find ${mode} ...`}
   />
   {#if presetProject}
-  <Button title="Reset Project" on:click={() => resetProject()}
+  <Button title="Reset Project" onclick={() => resetProject()}
     ><Icon name="arrow-counterclockwise" /></Button
   >
   {/if}