svelte state_referenced_locally warning fixes

- change to derived where possible
- suppress warning elsewhere
- discussion here: sveltejs/svelte/issues/17289

web/frontend/src/generic/Filters.svelte

@@ -89,6 +89,7 @@
   };
 
   /* State Init */
+  // svelte-ignore state_referenced_locally
   let filters = $state({
     dbId: filterPresets.dbId || [],
     jobId: filterPresets.jobId || "",

web/frontend/src/generic/JobCompare.svelte

@@ -64,10 +64,10 @@
   let plotSync = uPlot.sync("compareJobsView");
 
   /* State Init */
-  let filter = $state([...filterBuffer] || []);
   let tableJobIDFilter = $state("");
 
   /* Derived*/
+  let filter = $derived([...filterBuffer] || []);
   const compareData = $derived(queryStore({
       client: client,
       query: compareQuery,

web/frontend/src/generic/JobList.svelte

@@ -99,13 +99,13 @@
   /* State Init */
   let headerPaddingTop = $state(0);
   let jobs = $state([]);
-  let filter = $state([...filterBuffer]);
   let page = $state(1);
   let itemsPerPage = $state(usePaging ? (ccconfig?.jobList_jobsPerPage || 10) : 10);
   let triggerMetricRefresh = $state(false);
   let tableWidth = $state(0);
 
   /* Derived */
+  let filter = $derived([...filterBuffer]);
   let paging = $derived({ itemsPerPage, page });
   const plotWidth = $derived.by(() => {
     return Math.floor(

web/frontend/src/generic/filters/Cluster.svelte

@@ -34,9 +34,9 @@
   const clusters = getContext("clusters");
   const initialized = getContext("initialized");
 
-  /* State Init */
-  let pendingCluster = $state(presetCluster);
-  let pendingPartition = $state(presetPartition);
+  /* Derived */
+  let pendingCluster = $derived(presetCluster);
+  let pendingPartition = $derived(presetPartition);
 </script>
 
 <Modal {isOpen} toggle={() => (isOpen = !isOpen)}>

web/frontend/src/generic/filters/Duration.svelte

@@ -31,14 +31,13 @@
     setFilter
   } = $props();
 
-  /* State Init */
-  let pendingDuration = $state(presetDuration);
-  let lessState = $state(secsToHoursAndMins(presetDuration?.lessThan));
-  let moreState = $state(secsToHoursAndMins(presetDuration?.moreThan));
-  let fromState = $state(secsToHoursAndMins(presetDuration?.from));
-  let toState = $state(secsToHoursAndMins(presetDuration?.to));
+  /* Derived */
+  let pendingDuration = $derived(presetDuration);
+  let lessState = $derived(secsToHoursAndMins(presetDuration?.lessThan));
+  let moreState = $derived(secsToHoursAndMins(presetDuration?.moreThan));
+  let fromState = $derived(secsToHoursAndMins(presetDuration?.from));
+  let toState = $derived(secsToHoursAndMins(presetDuration?.to));
 
-  /* Derived Init */
   const lessDisabled = $derived(
     moreState.hours !== 0 ||
     moreState.mins !== 0 ||

web/frontend/src/generic/filters/Energy.svelte

@@ -28,8 +28,8 @@
     setFilter,
   } = $props();
 
-  /* State Init */
-  let energyState = $state(presetEnergy);
+  /* Derived */
+  let energyState = $derived(presetEnergy);
 </script>
 
 <Modal {isOpen} toggle={() => (isOpen = !isOpen)}>

web/frontend/src/generic/filters/JobStates.svelte

@@ -67,10 +67,10 @@
     "single_user",
   ];
 
-  /* State Init */
-  let pendingStates = $state([...presetStates]);
-  let pendingShared = $state(presetShared);
-  let pendingSchedule = $state(presetSchedule);
+  /* Derived */
+  let pendingStates = $derived([...presetStates]);
+  let pendingShared = $derived(presetShared);
+  let pendingSchedule = $derived(presetSchedule);
 
 </script>
 

web/frontend/src/generic/filters/Resources.svelte

@@ -79,18 +79,19 @@
   let maxNumNodes = $state(128);
   let maxNumHWThreads = $state(0);
   let maxNumAccelerators = $state(0);
-  // Pending
-  let pendingNumNodes = $state(presetNumNodes);
-  let pendingNumHWThreads = $state(presetNumHWThreads);
-  let pendingNumAccelerators = $state(presetNumAccelerators);
-  let pendingNamedNode = $state(presetNamedNode);
-  let pendingNodeMatch = $state(presetNodeMatch);
-  // Changable States
-  let nodesState = $state(presetNumNodes);
-  let threadState = $state(presetNumHWThreads);
-  let accState = $state(presetNumAccelerators);
 
   /* Derived States */
+  // Pending
+  let pendingNumNodes = $derived(presetNumNodes);
+  let pendingNumHWThreads = $derived(presetNumHWThreads);
+  let pendingNumAccelerators = $derived(presetNumAccelerators);
+  let pendingNamedNode = $derived(presetNamedNode);
+  let pendingNodeMatch = $derived(presetNodeMatch);
+  // Changable States
+  let nodesState = $derived(presetNumNodes);
+  let threadState = $derived(presetNumHWThreads);
+  let accState = $derived(presetNumAccelerators);
+
   const clusters = $derived(getContext("clusters"));
   const initialized = $derived(getContext("initialized"));
   // Is Selection Active

web/frontend/src/generic/filters/StartTime.svelte

@@ -48,12 +48,11 @@
   const resetFrom = { date: format(ago, "yyyy-MM-dd"), time: format(ago, "HH:mm")};
   const resetTo = { date: format(now, "yyyy-MM-dd"), time: format(now, "HH:mm")};
 
-  /* State Init */
-  let pendingStartTime = $state(presetStartTime);
-  let fromState = $state(fromRFC3339(presetStartTime?.from, resetFrom));
-  let toState = $state(fromRFC3339(presetStartTime?.to, resetTo));
+  /* Derived */
+  let pendingStartTime = $derived(presetStartTime);
+  let fromState = $derived(fromRFC3339(presetStartTime?.from, resetFrom));
+  let toState = $derived(fromRFC3339(presetStartTime?.to, resetTo));
 
-  /* Derived Init*/
   const rangeSelect = $derived(pendingStartTime?.range ? pendingStartTime.range : "")
 
   /* Functions */

web/frontend/src/generic/filters/Tags.svelte

@@ -35,8 +35,11 @@
   const initialized = $derived(getContext("initialized"))
 
   /* State Init */
-  let pendingTags = $state(presetTags);
   let searchTerm = $state("");
+
+  /* Derived */
+  let pendingTags = $derived(presetTags);
+
 </script>
 
 <Modal {isOpen} toggle={() => (isOpen = !isOpen)}>

web/frontend/src/generic/helper/Refresher.svelte

@@ -18,12 +18,12 @@
     onRefresh
   } = $props();
 
-  /* State Init */
-  let refreshInterval = $state(initially ? initially * 1000 : null);
-
   /* Var Init */
   let refreshIntervalId = null;
 
+  /* Derived */
+  let refreshInterval = $derived(initially ? initially * 1000 : null);
+
   /* Functions */
   function refreshIntervalChanged() {
     if (refreshIntervalId != null) clearInterval(refreshIntervalId);

web/frontend/src/generic/helper/TagManagement.svelte

@@ -45,8 +45,6 @@
   } = $props();
 
   /* Const Init */
-  const isAdmin = (roles && authlevel == roles.admin);
-  const isSupport = (roles && authlevel == roles.support);
   const client = getContextClient();
 
   /* State Init */
@@ -54,12 +52,14 @@
   let allTags = getContext("tags")
   let newTagType = $state("");
   let newTagName = $state("");
-  let newTagScope = $state(username);
   let filterTerm = $state("");
   let pendingChange = $state(false);
   let isOpen = $state(false);
 
-  /* Derived Init */
+  /* Derived */
+  let newTagScope = $derived(username);
+  const isAdmin = $derived((roles && authlevel == roles.admin));
+  const isSupport = $derived((roles && authlevel == roles.support));
   const allTagsFiltered = $derived(($initialized, jobTags, fuzzySearchTags(filterTerm, allTags))); // $init und JobTags only for triggering react
   const usedTagsFiltered = $derived(matchJobTags(jobTags, allTagsFiltered, 'used', isAdmin, isSupport));
   const unusedTagsFiltered = $derived(matchJobTags(jobTags, allTagsFiltered, 'unused', isAdmin, isSupport));

web/frontend/src/generic/helper/TextFilter.svelte

@@ -26,14 +26,16 @@
 
   /* Var Init */
   let user = "";
-  let project = presetProject ? presetProject : "";
   let jobName = "";
   let timeoutId = null;
 
   /* State Init */
-  let mode = $state(presetProject ? "jobName" : "project");
   let term = $state("");
 
+  /* Derived */
+  let project = $derived(presetProject ? presetProject : "");
+  let mode = $derived(presetProject ? "jobName" : "project");
+
   /* Functions */
   function modeChanged() {
     if (mode == "user") {

web/frontend/src/generic/joblist/JobListRow.svelte

@@ -37,13 +37,7 @@
 
   /* Const Init */
   const client = getContextClient();
-  const jobId = job.id;
   const cluster = getContext("clusters");
-  const scopes = (job.numNodes == 1)
-    ? (job.numAcc >= 1)
-      ? ["core", "accelerator"]
-      : ["core"]
-    : ["node"];
   const resampleConfig = getContext("resampling") || null;
   const resampleDefault = resampleConfig ? Math.max(...resampleConfig.resolutions) : 0;
   const query = gql`
@@ -84,6 +78,15 @@
   let thresholdStates = $state({});
 
   /* Derived */
+  const jobId = $derived(job?.id);
+  const scopes = $derived.by(() => {
+    if (job.numNodes == 1) {
+      if (job.numAcc >= 1) return ["core", "accelerator"];
+      else return ["core"];
+    } else {
+      return ["node"];
+    };
+  });
   let isSelected = $derived(previousSelect);
   let metricsQuery = $derived(queryStore({
       client: client,

web/frontend/src/generic/plots/Comparogram.svelte

@@ -73,6 +73,7 @@
   ]
 
   // UPLOT SCALES INIT //
+  // svelte-ignore state_referenced_locally
   if (forResources) {
     const resSeries = [
       {
@@ -136,8 +137,11 @@
 
   // UPLOT OPTIONS //
   const opts = {
+    // svelte-ignore state_referenced_locally
     width,
+    // svelte-ignore state_referenced_locally
     height,
+    // svelte-ignore state_referenced_locally
     title,
     plugins: [legendAsTooltipPlugin()],
     series: plotSeries,
@@ -147,6 +151,7 @@
         space: 25, // Tick Spacing
         rotate: 30,
         show: true,
+        // svelte-ignore state_referenced_locally
         label: xlabel,
         values(self, splits) {
           return splits.map(s => xticks[s]);
@@ -164,16 +169,19 @@
         scale: "y",
         grid: { show: true },
         labelFont: "sans-serif",
+        // svelte-ignore state_referenced_locally
         label: ylabel + (yunit ? ` (${yunit})` : ''),
         values: (u, vals) => vals.map((v) => formatNumber(v)),
       },
     ],
+    // svelte-ignore state_referenced_locally
     bands: forResources ? [] : plotBands,
     padding: [5, 10, 0, 0],
     hooks: {
       draw: [
         (u) => {
           // Draw plot type label:
+          // svelte-ignore state_referenced_locally
           let textl = forResources ? "Job Resources by Type" : "Metric Min/Avg/Max for Job Duration";
           let textr = "Earlier <- StartTime -> Later";
           u.ctx.save();
@@ -196,6 +204,7 @@
       x: { time: false },
       xst: { time: false },
       xrt: { time: false },
+      // svelte-ignore state_referenced_locally
       y: {auto: true, distr: forResources ? 3 : 1},
     },
     legend: {

web/frontend/src/generic/plots/DoubleMetricPlot.svelte

@@ -53,7 +53,6 @@
   // const subClusterTopology = getContext("getHardwareTopology")(cluster, subCluster);
   // const metricConfig = getContext("getMetricConfig")(cluster, subCluster, metric);
   const lineColors = clusterCockpitConfig.plotConfiguration_colorScheme;
-  const lineWidth = fixLinewidth ? fixLinewidth : clusterCockpitConfig.plotConfiguration_lineWidth / window.devicePixelRatio;
   // const cbmode = clusterCockpitConfig?.plotConfiguration_colorblindMode || false;
   const renderSleepTime = 200;
   // const normalLineColor = "#000000";
@@ -71,6 +70,7 @@
   let uplot = $state(null);
 
   /* Derived */
+  const lineWidth = $derived(fixLinewidth ? fixLinewidth : clusterCockpitConfig.plotConfiguration_lineWidth / window.devicePixelRatio);
   // const usesMeanStatsSeries = $derived((statisticsSeries?.mean && statisticsSeries.mean.length != 0));
   // const resampleTrigger = $derived(resampleConfig?.trigger ? Number(resampleConfig.trigger) : null);
   // const resampleResolutions = $derived(resampleConfig?.resolutions ? [...resampleConfig.resolutions] : null);

web/frontend/src/generic/plots/MetricPlot.svelte

@@ -56,8 +56,6 @@
   /* Const Init */
   const clusterCockpitConfig = getContext("cc-config");
   const resampleConfig = getContext("resampling");
-  const subClusterTopology = getContext("getHardwareTopology")(cluster, subCluster);
-  const metricConfig = getContext("getMetricConfig")(cluster, subCluster, metric);
   const lineColors = clusterCockpitConfig.plotConfiguration_colorScheme;
   const lineWidth = clusterCockpitConfig.plotConfiguration_lineWidth / window.devicePixelRatio;
   const cbmode = clusterCockpitConfig?.plotConfiguration_colorblindMode || false;
@@ -77,6 +75,8 @@
   let uplot = $state(null);
 
   /* Derived */
+  const subClusterTopology = $derived(getContext("getHardwareTopology")(cluster, subCluster));
+  const metricConfig = $derived(getContext("getMetricConfig")(cluster, subCluster, metric));
   const usesMeanStatsSeries = $derived((statisticsSeries?.mean && statisticsSeries.mean.length != 0));
   const resampleTrigger = $derived(resampleConfig?.trigger ? Number(resampleConfig.trigger) : null);
   const resampleResolutions = $derived(resampleConfig?.resolutions ? [...resampleConfig.resolutions] : null);

web/frontend/src/generic/plots/Pie.svelte

@@ -95,6 +95,7 @@
     animation: false,
     plugins: {
       legend: {
+        // svelte-ignore state_referenced_locally
         display: displayLegend
       }
     }

web/frontend/src/generic/plots/RooflineHeatmap.svelte

@@ -23,9 +23,6 @@
     height = 300,
   } = $props();
 
-  /* Check Before */
-  console.assert(tiles, "you must provide tiles!")
-
   /* Const Init */
   const axesColor = '#aaaaaa';
   const tickFontSize = 10;
@@ -42,10 +39,10 @@
   /* State Init */
   let ctx = $state();
   let canvasElement = $state();
-  let prevWidth = $state(width);
-  let prevHeight = $state(height);
 
   /* Derived */
+  let prevWidth = $derived(width);
+  let prevHeight = $derived(height);
   const data = $derived({
     tiles: tiles,
     xLabel: 'Intensity [FLOPS/byte]',

web/frontend/src/generic/plots/Stacked.svelte

@@ -100,12 +100,6 @@
     }
   };
 
-  // Data Prep For uPlot
-  const sortedData = data?.sort((a, b) => a.state.localeCompare(b.state)) || [];
-  const collectLabel = sortedData.map(d => d.state);
-  // Align Data to Timesteps, Introduces 'undefied' as placeholder, reiterate and set those to 0
-  const collectData = (sortedData.length > 0) ? uPlot.join(sortedData.map(d => [d.times, d.counts])).map(d => d.map(i => i ? i : 0)) : [];
-
   // STACKED CHART FUNCTIONS //
   function stack(data, omit) {
     let data2 = [];
@@ -287,14 +281,20 @@
     };
   }
 
-  // UPLOT SERIES INIT
-  const plotSeries = [
-    {
-      label: "Time",
-      scale: "x"
-    },
-    ...collectLabel.map(l => seriesConfig[l])
-  ]
+  // UPLOT SERIES INIT: DERIVED FROM PROPS
+  // Data Prep For uPlot
+  const sortedData = $derived(data?.sort((a, b) => a.state.localeCompare(b.state)) || []);
+  const collectLabel = $derived(sortedData.map(d => d.state));
+  // Align Data to Timesteps, Introduces 'undefied' as placeholder, reiterate and set those to 0
+  const collectData = $derived.by(() => {
+    if (sortedData.length > 0) {
+      return uPlot.join(sortedData.map(d => [d.times, d.counts])).map(d => d.map(i => i ? i : 0))
+    } else {
+      return [];
+    }
+  });
+  // Build Series
+  const plotSeries = $derived([{label: "Time", scale: "x"}, ...collectLabel.map(l => seriesConfig[l])]);
 
   /* Var Init */
   let timeoutId = null;

web/frontend/src/generic/select/DoubleRangeSlider.svelte

@@ -27,14 +27,16 @@
   } = $props();
 
   /* State Init */
-  let pendingValues = $state([fromPreset, toPreset]);
-  let sliderFrom = $state(Math.max(((fromPreset  == null ? sliderMin : fromPreset)  - sliderMin) / (sliderMax - sliderMin), 0.));
-  let sliderTo = $state(Math.min(((toPreset == null ? sliderMin : toPreset) - sliderMin) / (sliderMax - sliderMin), 1.));
-  let inputFieldFrom = $state(fromPreset.toString());
-  let inputFieldTo = $state(toPreset.toString());
   let leftHandle = $state();
   let sliderMain = $state();
 
+  /* Derived */
+  let pendingValues = $derived([fromPreset, toPreset]);
+  let sliderFrom = $derived(Math.max(((fromPreset  == null ? sliderMin : fromPreset)  - sliderMin) / (sliderMax - sliderMin), 0.));
+  let sliderTo = $derived(Math.min(((toPreset == null ? sliderMin : toPreset) - sliderMin) / (sliderMax - sliderMin), 1.));
+  let inputFieldFrom = $derived(fromPreset.toString());
+  let inputFieldTo = $derived(toPreset.toString());
+
   /* Var Init */
   let timeoutId = null;
 

web/frontend/src/generic/select/SortSelection.svelte

@@ -41,11 +41,11 @@
   ]);
 
   /* State Init */
-  let sorting = $state({...presetSorting})
   let activeColumnIdx = $state(0);
   let metricSortables = $state([]);
 
   /* Derived */
+  let sorting = $derived({...presetSorting})
   let sortableColumns = $derived([...fixedSortables, ...metricSortables]);
 
   /* Effect */