svelte state_referenced_locally warning fixes

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

web/frontend/src/Analysis.root.svelte

@@ -43,11 +43,14 @@
   } = $props();
 
   // By default, look at the jobs of the last 6 hours:
+  // svelte-ignore state_referenced_locally
   if (filterPresets?.startTime == null) {
+    // svelte-ignore state_referenced_locally
     if (filterPresets == null) filterPresets = {};
     let now = new Date(Date.now());
     let hourAgo = new Date(now);
     hourAgo.setHours(hourAgo.getHours() - 6);
+    // svelte-ignore state_referenced_locally
     filterPresets.startTime = {
       from: hourAgo.toISOString(),
       to: now.toISOString(),

web/frontend/src/Header.svelte

@@ -53,7 +53,9 @@
   const views = [
     {
       title: "My Jobs",
+      // svelte-ignore state_referenced_locally
       requiredRole: roles.user,
+      // svelte-ignore state_referenced_locally
       href: `/monitoring/user/${username}`,
       icon: "bar-chart-line",
       perCluster: false,
@@ -61,7 +63,9 @@
       menu: "none",
     },
     {
+      // svelte-ignore state_referenced_locally
       title: jobsTitle.get(authlevel),
+      // svelte-ignore state_referenced_locally
       requiredRole: roles.user,
       href: `/monitoring/jobs/`,
       icon: "card-list",
@@ -71,6 +75,7 @@
     },
     {
       title: "Tags",
+      // svelte-ignore state_referenced_locally
       requiredRole: roles.user,
       href: "/monitoring/tags/",
       icon: "tags",
@@ -79,7 +84,9 @@
       menu: "Jobs",
     },
     {
+      // svelte-ignore state_referenced_locally
       title: usersTitle.get(authlevel),
+      // svelte-ignore state_referenced_locally
       requiredRole: roles.manager,
       href: "/monitoring/users/",
       icon: "people",
@@ -88,7 +95,9 @@
       menu: "Groups",
     },
     {
+      // svelte-ignore state_referenced_locally
       title: projectsTitle.get(authlevel),
+      // svelte-ignore state_referenced_locally
       requiredRole: roles.manager,
       href: "/monitoring/projects/",
       icon: "journals",
@@ -98,6 +107,7 @@
     },
     {
       title: "Nodes",
+      // svelte-ignore state_referenced_locally
       requiredRole: roles.support,
       href: "/monitoring/systems/",
       icon: "hdd-rack",
@@ -107,6 +117,7 @@
     },
     {
       title: "Analysis",
+      // svelte-ignore state_referenced_locally
       requiredRole: roles.support,
       href: "/monitoring/analysis/",
       icon: "graph-up",
@@ -116,6 +127,7 @@
     },
     {
       title: "Status",
+      // svelte-ignore state_referenced_locally
       requiredRole: roles.admin,
       href: "/monitoring/status/",
       icon: "clipboard-data",

web/frontend/src/Job.root.svelte

@@ -52,6 +52,7 @@
 
   /* Const Init */
   // Important: init() needs to be first const declaration or contextclient will not be initialized before "const client = ..."
+  // svelte-ignore state_referenced_locally
   const { query: initq } = init(`
     job(id: "${dbid}") {
       id, jobId, user, project, cluster, startTime,

web/frontend/src/Jobs.root.svelte

@@ -37,7 +37,6 @@
   /* Const Init */
   const { query: initq } = init();
   const ccconfig = getContext("cc-config");
-  const presetProject = filterPresets?.project ? filterPresets.project : ""
 
   /* State Init */
   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
@@ -51,13 +50,16 @@
   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
+  /* Derived */
+  const presetProject = $derived(filterPresets?.project ? filterPresets.project : "");
+  let selectedCluster = $derived(filterPresets?.cluster ? filterPresets.cluster : null);
+  let metrics = $derived(filterPresets.cluster
     ? ccconfig[`metricConfig_jobListMetrics:${filterPresets.cluster}`] ||
       ccconfig.metricConfig_jobListMetrics
     : ccconfig.metricConfig_jobListMetrics
   );
-  let showFootprint = $state(filterPresets.cluster
+  let showFootprint = $derived(filterPresets.cluster
     ? !!ccconfig[`jobList_showFootprint:${filterPresets.cluster}`]
     : !!ccconfig.jobList_showFootprint
   );

web/frontend/src/List.root.svelte

@@ -37,12 +37,6 @@
     filterPresets
   } = $props();
 
-  /* Validate Type */
-  console.assert(
-    type == "USER" || type == "PROJECT",
-    "Invalid list type provided!",
-  );
-
   /* Const Init */
   const {} = init();
   const client = getContextClient();

web/frontend/src/Node.root.svelte

@@ -54,11 +54,6 @@
   const nowEpoch = Date.now();
   const paging = { itemsPerPage: 50, page: 1 };
   const sorting = { field: "startTime", type: "col", order: "DESC" };
-  const filter = [
-    { cluster: { eq: cluster } },
-    { node: { contains: hostname } },
-    { state: ["running"] },
-  ];
   const client = getContextClient();
   const nodeMetricsQuery = gql`
     query ($cluster: String!, $nodes: [String!], $from: Time!, $to: Time!) {
@@ -111,11 +106,18 @@
   }
 
   /* State Init */
+  // svelte-ignore state_referenced_locally
   let from = $state(presetFrom ? presetFrom : new Date(nowEpoch - (4 * 3600 * 1000)));
+  // svelte-ignore state_referenced_locally
   let to = $state(presetTo ? presetTo : new Date(nowEpoch));
   let systemUnits = $state({});
 
   /* Derived */
+  const filter = $derived([
+    { cluster: { eq: cluster } },
+    { node: { contains: hostname } },
+    { state: ["running"] },
+  ]);
   const nodeMetricsData = $derived(queryStore({
       client: client,
       query: nodeMetricsQuery,

web/frontend/src/Systems.root.svelte

@@ -51,7 +51,6 @@
   /* Const Init */
   const { query: initq } = init();
   const client = getContextClient();
-  const displayNodeOverview = (displayType === 'OVERVIEW');
   const ccconfig = getContext("cc-config");
   const initialized = getContext("initialized");
   const globalMetrics = getContext("globalMetrics");
@@ -66,7 +65,9 @@
   let timeoutId = null;
 
   /* State Init */
+  // svelte-ignore state_referenced_locally
   let to = $state(presetTo || new Date(Date.now()));
+  // svelte-ignore state_referenced_locally
   let from = $state(presetFrom || new Date(nowDate.setHours(nowDate.getHours() - 4)));
   let selectedResolution = $state(resampleConfig ? resampleDefault : 0);
   let hostnameFilter = $state("");
@@ -75,6 +76,7 @@
   let isMetricsSelectionOpen = $state(false);
 
   /* Derived States */
+  const displayNodeOverview = $derived((displayType === 'OVERVIEW'));
   const systemMetrics = $derived($initialized ? [...globalMetrics.filter((gm) => gm?.availability.find((av) => av.cluster == cluster))] : []);
   const presetSystemUnits = $derived(loadUnits(systemMetrics));
   let selectedMetric = $derived.by(() => {

web/frontend/src/Tags.root.svelte

@@ -37,6 +37,7 @@
 
   /* State Init */
   let pendingChange = $state("none");
+  // svelte-ignore state_referenced_locally
   let tagmap = $state(presetTagmap);
 
   /* Functions */

web/frontend/src/User.root.svelte

@@ -64,17 +64,7 @@
   let isSortingOpen = $state(false);
   let isMetricsSelectionOpen = $state(false);
   let sorting = $state({ field: "startTime", type: "col", order: "DESC" });
-  let selectedCluster = $state(filterPresets?.cluster ? filterPresets.cluster : null);
   let selectedHistogramsBuffer = $state({ all: (ccconfig['userView_histogramMetrics'] || []) })
-  let metrics = $state(filterPresets.cluster
-    ? ccconfig[`metricConfig_jobListMetrics:${filterPresets.cluster}`] ||
-      ccconfig.metricConfig_jobListMetrics
-    : ccconfig.metricConfig_jobListMetrics
-  );
-  let showFootprint = $state(filterPresets.cluster
-    ? !!ccconfig[`jobList_showFootprint:${filterPresets.cluster}`]
-    : !!ccconfig.jobList_showFootprint
-  );
 
   // Histogram Vars
   let isHistogramSelectionOpen = $state(false);
@@ -88,7 +78,17 @@
   // let filterBuffer = $state([]);
   // let matchedCompareJobs = $state(0);
 
-  /* Derived Vars */
+  /* Derived */
+  let selectedCluster = $derived(filterPresets?.cluster ? filterPresets.cluster : null);
+  let metrics = $derived(filterPresets.cluster
+    ? ccconfig[`metricConfig_jobListMetrics:${filterPresets.cluster}`] ||
+      ccconfig.metricConfig_jobListMetrics
+    : ccconfig.metricConfig_jobListMetrics
+  );
+  let showFootprint = $derived(filterPresets.cluster
+    ? !!ccconfig[`jobList_showFootprint:${filterPresets.cluster}`]
+    : !!ccconfig.jobList_showFootprint
+  );
   let selectedHistograms = $derived(selectedCluster ? selectedHistogramsBuffer[selectedCluster] : selectedHistogramsBuffer['all']);
   let stats = $derived(
     queryStore({

web/frontend/src/analysis/PlotSelection.svelte

@@ -49,11 +49,13 @@
   /* State Init */
   let isHistogramConfigOpen = $state(false);
   let isScatterPlotConfigOpen = $state(false);
-  let metricsInHistograms = $state(presetMetricsInHistograms);
-  let metricsInScatterplots = $state(presetMetricsInScatterplots);
   let selectedMetric1 = $state(null);
   let selectedMetric2 = $state(null);
 
+  /* Derived */
+  let metricsInHistograms = $derived(presetMetricsInHistograms);
+  let metricsInScatterplots = $derived(presetMetricsInScatterplots);
+
   /* Functions */
   function updateConfiguration(data) {
     updateConfigurationMutation({

web/frontend/src/config/user/PlotColorScheme.svelte

@@ -28,8 +28,8 @@
     updateSetting
   } = $props();
 
-  /* State Init */
+  /* Derived */
-  let activeRow = $state(JSON.stringify(config?.plotConfiguration_colorScheme));
+  let activeRow = $derived(JSON.stringify(config?.plotConfiguration_colorScheme));
 
   /* Const Init */
   const colorSchemes = {

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 */
+  /* Derived */
-  let pendingCluster = $state(presetCluster);
+  let pendingCluster = $derived(presetCluster);
-  let pendingPartition = $state(presetPartition);
+  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 */
+  /* Derived */
-  let pendingDuration = $state(presetDuration);
+  let pendingDuration = $derived(presetDuration);
-  let lessState = $state(secsToHoursAndMins(presetDuration?.lessThan));
+  let lessState = $derived(secsToHoursAndMins(presetDuration?.lessThan));
-  let moreState = $state(secsToHoursAndMins(presetDuration?.moreThan));
+  let moreState = $derived(secsToHoursAndMins(presetDuration?.moreThan));
-  let fromState = $state(secsToHoursAndMins(presetDuration?.from));
+  let fromState = $derived(secsToHoursAndMins(presetDuration?.from));
-  let toState = $state(secsToHoursAndMins(presetDuration?.to));
+  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 */
+  /* Derived */
-  let energyState = $state(presetEnergy);
+  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 */
+  /* Derived */
-  let pendingStates = $state([...presetStates]);
+  let pendingStates = $derived([...presetStates]);
-  let pendingShared = $state(presetShared);
+  let pendingShared = $derived(presetShared);
-  let pendingSchedule = $state(presetSchedule);
+  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 */
+  /* Derived */
-  let pendingStartTime = $state(presetStartTime);
+  let pendingStartTime = $derived(presetStartTime);
-  let fromState = $state(fromRFC3339(presetStartTime?.from, resetFrom));
+  let fromState = $derived(fromRFC3339(presetStartTime?.from, resetFrom));
-  let toState = $state(fromRFC3339(presetStartTime?.to, resetTo));
+  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
+  // UPLOT SERIES INIT: DERIVED FROM PROPS
-  const plotSeries = [
+  // Data Prep For uPlot
-    {
+  const sortedData = $derived(data?.sort((a, b) => a.state.localeCompare(b.state)) || []);
-      label: "Time",
+  const collectLabel = $derived(sortedData.map(d => d.state));
-      scale: "x"
+  // Align Data to Timesteps, Introduces 'undefied' as placeholder, reiterate and set those to 0
-    },
+  const collectData = $derived.by(() => {
-    ...collectLabel.map(l => seriesConfig[l])
+    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 */

web/frontend/src/job/Metric.svelte

@@ -45,7 +45,6 @@
   const statsPattern = /(.*)-stat$/;
   const resampleConfig = getContext("resampling") || null;
   const resampleDefault = resampleConfig ? Math.max(...resampleConfig.resolutions) : 0;
-  const unit = (metricUnit?.prefix ? metricUnit.prefix : "") + (metricUnit?.base ? metricUnit.base : "");
   const subQuery = gql`
     query ($dbid: ID!, $selectedMetrics: [String!]!, $selectedScopes: [MetricScope!]!, $selectedResolution: Int) {
       singleUpdate: jobMetrics(id: $dbid, metrics: $selectedMetrics, scopes: $selectedScopes, resolution: $selectedResolution) {
@@ -79,14 +78,14 @@
   `;
 
   /* State Init */
-  let requestedScopes = $state(presetScopes);
   let selectedResolution = $state(resampleDefault);
-
   let selectedHost = $state(null);
   let zoomState = $state(null);
   let thresholdState = $state(null);
 
   /* Derived */
+  let requestedScopes = $derived(presetScopes);
+  const unit = $derived.by(() => { return (metricUnit?.prefix ? metricUnit.prefix : "") + (metricUnit?.base ? metricUnit.base : "")});
   const metricData = $derived(queryStore({
       client: client,
       query: subQuery,

web/frontend/src/job/statstab/StatsTable.svelte

@@ -25,9 +25,13 @@
   } = $props();
 
   /* State Init */
+  // svelte-ignore state_referenced_locally
   let sortedHosts = $state(hosts);
+  // svelte-ignore state_referenced_locally
   let sorting = $state(setupSorting(selectedMetrics));
+  // svelte-ignore state_referenced_locally
   let availableScopes = $state(setupAvailable(jobStats));
+  // svelte-ignore state_referenced_locally
   let selectedScopes = $state(setupSelected(availableScopes));
 
   /* Derived Init */

web/frontend/src/status/dashdetails/StatisticsDash.svelte

@@ -38,11 +38,11 @@
   const client = getContextClient();
 
   /* State Init */
-  let cluster = $state(presetCluster);
   // Histogram
   let isHistogramSelectionOpen = $state(false);
 
   /* Derived */
+  let cluster = $derived(presetCluster);
   let selectedHistograms = $derived(cluster
     ? ccconfig[`statusView_selectedHistograms:${cluster}`] || ( ccconfig['statusView_selectedHistograms'] || [] )
     : ccconfig['statusView_selectedHistograms'] || []);

web/frontend/src/status/dashdetails/StatusDash.svelte

@@ -41,7 +41,6 @@
   const client = getContextClient();
 
   /* State Init */
-  let cluster = $state(presetCluster);
   let pieWidth = $state(0);
   let stackedWidth1 = $state(0);
   let stackedWidth2 = $state(0);
@@ -65,6 +64,7 @@
   let totalAccs = $state({});
 
   /* Derived */
+  let cluster = $derived(presetCluster);
   // States for Stacked charts
   const statesTimed = $derived(queryStore({
     client: client,

web/frontend/src/status/dashdetails/UsageDash.svelte

@@ -44,7 +44,6 @@
   const durationBinOptions = ["1m","10m","1h","6h","12h"];
 
   /* State Init */
-  let cluster = $state(presetCluster)
   let pagingState = $state({page: 1, itemsPerPage: 10}) // Top 10
   let selectedHistograms = $state([]) // Dummy For Refresh 
   let colWidthJobs = $state(0);
@@ -53,6 +52,7 @@
   let numDurationBins = $state("1h");
 
   /* Derived */
+  let cluster = $derived(presetCluster)
   const topJobsQuery = $derived(queryStore({
     client: client,
     query: gql`

web/frontend/src/systems/NodeList.svelte

@@ -38,7 +38,6 @@
 
   /* Const Init */
   const client = getContextClient();
-  const usePaging = ccconfig?.nodeList_usePaging || false;
   const nodeListQuery = gql`
     query ($cluster: String!, $subCluster: String!, $nodeFilter: String!, $stateFilter: String!, $metrics: [String!],
            $scopes: [MetricScope!]!, $from: Time!, $to: Time!, $paging: PageRequest!, $selectedResolution: Int
@@ -94,13 +93,14 @@
 
   /* State Init */
   let nodes = $state([]);
-  let selectedMetrics = $state(pendingSelectedMetrics);
   let page = $state(1);
-  let itemsPerPage = $state(usePaging ? (ccconfig?.nodeList_nodesPerPage || 10) : 10);
   let headerPaddingTop = $state(0);
   let matchedNodes = $state(0);
 
   /* Derived */
+  let selectedMetrics = $derived(pendingSelectedMetrics);
+  let itemsPerPage = $derived(usePaging ? (ccconfig?.nodeList_nodesPerPage || 10) : 10);
+  const usePaging = $derived(ccconfig?.nodeList_usePaging || false);
   const paging = $derived({ itemsPerPage, page });
   const nodesQuery = $derived(queryStore({
     client: client,

web/frontend/src/systems/nodelist/NodeInfo.svelte

@@ -38,10 +38,6 @@
   } = $props();
 
   /* Const Init */
-  // Not at least one returned, selected metric: NodeHealth warning
-  const healthWarn = !dataHealth.includes(true);
-  // At least one non-returned selected metric: Metric config error?
-  const metricWarn = dataHealth.includes(false);
   // Node State Colors
   const stateColors = {
     allocated: 'success',
@@ -54,6 +50,10 @@
   }
 
   /* Derived */
+  // Not at least one returned, selected metric: NodeHealth warning
+  const healthWarn = $derived(!dataHealth.includes(true));
+  // At least one non-returned selected metric: Metric config error?
+  const metricWarn = $derived(dataHealth.includes(false));
   const userList = $derived(nodeJobsData
     ? Array.from(new Set(nodeJobsData.jobs.items.map((j) => scrambleNames ? scramble(j.user) : j.user))).sort((a, b) => a.localeCompare(b))
     : []

web/frontend/src/systems/nodelist/NodeListRow.svelte

@@ -27,17 +27,13 @@
   } = $props();
 
   /* Var Init*/
+  // svelte-ignore state_referenced_locally
   let plotSync = uPlot.sync(`nodeMetricStack-${nodeData.host}`);
 
   /* Const Init */
   const client = getContextClient();
   const paging = { itemsPerPage: 50, page: 1 };
   const sorting = { field: "startTime", type: "col", order: "DESC" };
-  const filter = [
-    { cluster: { eq: cluster } },
-    { node: { contains: nodeData.host } },
-    { state: ["running"] },
-  ];
   const nodeJobsQuery = gql`
     query (
       $filter: [JobFilter!]!
@@ -61,6 +57,11 @@
   `;
 
   /* Derived */
+  const filter = $derived([
+    { cluster: { eq: cluster } },
+    { node: { contains: nodeData.host } },
+    { state: ["running"] },
+  ]);
   const nodeJobsData = $derived(queryStore({
       client: client,
       query: nodeJobsQuery,
@@ -70,7 +71,7 @@
 
   let extendedLegendData = $derived($nodeJobsData?.data ? buildExtendedLegend() : null);
   let refinedData = $derived(nodeData?.metrics ? sortAndSelectScope(nodeData.metrics) : null);
-  let dataHealth = $derived(refinedData.filter((rd) => rd.disabled === false).map((enabled) => (enabled.data.metric.series.length > 0)));
+  let dataHealth = $derived(refinedData.filter((rd) => rd.disabled === false).map((enabled) => (enabled?.data?.metric?.series?.length > 0)));
 
   /* Functions */
   const selectScope = (nodeMetrics) =>