apply updated rangefilter logic to energy and stats

2026-03-05 07:37:30 +01:00 · 2026-03-04 14:18:30 +01:00
parent 87425c0b09
commit db625239ea
8 changed files with 171 additions and 55 deletions
--- a/web/frontend/src/generic/Filters.svelte
+++ b/web/frontend/src/generic/Filters.svelte
@@ -206,7 +206,7 @@
      items.push({ duration: { to: filters.duration.lessThan, from: 0 } });
    if (filters.duration.moreThan)
      items.push({ duration: { to: 0, from: filters.duration.moreThan } });
-    if (filters.energy.from || filters.energy.to)
+    if (filters.energy.from != null || filters.energy.to != null)
      items.push({
        energy: { from: filters.energy.from, to: filters.energy.to },
      });
@@ -301,11 +301,20 @@
    if (filters.node) opts.push(`node=${filters.node}`);
    if (filters.node && filters.nodeMatch != "eq") // "eq" is default-case
      opts.push(`nodeMatch=${filters.nodeMatch}`);
-    if (filters.energy.from && filters.energy.to)
+    if (filters.energy.from > 1 && filters.energy.to > 0)
      opts.push(`energy=${filters.energy.from}-${filters.energy.to}`);
-    if (filters.stats.length != 0)
+    else if (filters.energy.from > 1 && filters.energy.to == 0)
+      opts.push(`energy=morethan-${filters.energy.from}`);
+    else if (filters.energy.from == 1 && filters.energy.to > 0)
+      opts.push(`energy=lessthan-${filters.energy.to}`);
+    if (filters.stats.length > 0)
      for (let stat of filters.stats) {
+        if (stat.from > 1 && stat.to > 0)
          opts.push(`stat=${stat.field}-${stat.from}-${stat.to}`);
+        else if (stat.from > 1 && stat.to == 0)
+          opts.push(`stat=${stat.field}-morethan-${stat.from}`);
+        else if (stat.from == 1 && stat.to > 0)
+          opts.push(`stat=${stat.field}-lessthan-${stat.to}`);
      }
    // Build && Return
    if (opts.length == 0 && window.location.search.length <= 1) return;
@@ -550,18 +559,36 @@
    </Info>
  {/if}

-  {#if filters.energy.from || filters.energy.to}
+  {#if filters.energy.from > 1 && filters.energy.to > 0}
    <Info icon="lightning-charge-fill" onclick={() => (isEnergyOpen = true)}>
-      Total Energy: {filters.energy.from} - {filters.energy.to}
+      Total Energy: {filters.energy.from} - {filters.energy.to} kWh
+    </Info>
+  {:else if filters.energy.from > 1 && filters.energy.to == 0}
+    <Info icon="lightning-charge-fill" onclick={() => (isEnergyOpen = true)}>
+      Total Energy &ge;&nbsp;{filters.energy.from} kWh
+    </Info>
+  {:else if filters.energy.from == 1 && filters.energy.to > 0}
+    <Info icon="lightning-charge-fill" onclick={() => (isEnergyOpen = true)}>
+      Total Energy &le;&nbsp;{filters.energy.to} kWh
    </Info>
  {/if}

  {#if filters.stats.length > 0}
-    <Info icon="bar-chart" onclick={() => (isStatsOpen = true)}>
-      {filters.stats
-        .map((stat) => `${stat.field}: ${stat.from} - ${stat.to}`)
-        .join(", ")}
-    </Info>
+    {#each filters.stats as stat}
+      {#if stat.from > 1 && stat.to > 0}
+        <Info icon="bar-chart" onclick={() => (isStatsOpen = true)}>
+          {stat.field}: {stat.from} - {stat.to} {stat.unit}
+        </Info>&thinsp;
+      {:else if stat.from > 1 && stat.to == 0}
+        <Info icon="bar-chart" onclick={() => (isStatsOpen = true)}>
+          {stat.field} &ge;&nbsp;{stat.from} {stat.unit}
+        </Info>&thinsp;
+      {:else if stat.from == 1 && stat.to > 0}
+        <Info icon="bar-chart" onclick={() => (isStatsOpen = true)}>
+          {stat.field} &le;&nbsp;{stat.to} {stat.unit}
+        </Info>&thinsp;
+      {/if}
+    {/each}
  {/if}
 {/if}

--- a/web/frontend/src/generic/filters/Energy.svelte
+++ b/web/frontend/src/generic/filters/Energy.svelte
@@ -15,54 +15,90 @@
    ModalBody,
    ModalHeader,
    ModalFooter,
+    Tooltip,
+    Icon
  } from "@sveltestrap/sveltestrap";
  import DoubleRangeSlider from "../select/DoubleRangeSlider.svelte";

  /* Svelte 5 Props */
  let {
    isOpen = $bindable(false),
-    presetEnergy = {
-      from: null,
-      to: null
-    },
+    presetEnergy = { from: null, to: null },
    setFilter,
  } = $props();

+  /* Const */
+  const minEnergyPreset = 1;
+  const maxEnergyPreset = 1000;
+
  /* Derived */
-  let energyState = $derived(presetEnergy);
+  // Pending
+  let pendingEnergyState = $derived({
+    from: presetEnergy?.from ? presetEnergy.from : minEnergyPreset,
+    to: !(presetEnergy.to == null || presetEnergy.to == 0) ? presetEnergy.to : maxEnergyPreset,
+  });
+  // Changable
+  let energyState = $derived({
+    from: presetEnergy?.from ? presetEnergy.from : minEnergyPreset,
+    to: !(presetEnergy.to == null || presetEnergy.to == 0) ? presetEnergy.to : maxEnergyPreset,
+  });
+
+  const energyActive = $derived(!(JSON.stringify(energyState) === JSON.stringify({ from: minEnergyPreset, to: maxEnergyPreset })));
+  // Block Apply if null
+  const disableApply = $derived(energyState.from === null || energyState.to === null);
+
+  /* Function */
+  function setEnergy() {
+    if (energyActive) {
+      pendingEnergyState = {
+        from: energyState.from,
+        to: (energyState.to == maxEnergyPreset) ? 0 : energyState.to
+      };
+    } else {
+      pendingEnergyState = { from: null, to: null};
+    };
+  }
 </script>

 <Modal {isOpen} toggle={() => (isOpen = !isOpen)}>
  <ModalHeader>Filter based on energy</ModalHeader>
  <ModalBody>
    <div class="mb-3">
-      <div class="mb-0"><b>Total Job Energy (kWh)</b></div>
+      <div class="mb-0">
+        <b>Total Job Energy (kWh)</b>
+        <Icon id="energy-info" style="cursor:help; padding-right: 10px;" size="sm" name="info-circle"/>
+      </div>
+      <Tooltip target={`energy-info`} placement="right">
+        Generalized Presets. Use input fields to change to higher values.
+      </Tooltip>
      <DoubleRangeSlider
        changeRange={(detail) => {
          energyState.from = detail[0];
          energyState.to = detail[1];
        }}
-        sliderMin={0.0}
-        sliderMax={1000.0}
-        fromPreset={energyState?.from? energyState.from : 0.0}
-        toPreset={energyState?.to? energyState.to : 1000.0}
+        sliderMin={minEnergyPreset}
+        sliderMax={maxEnergyPreset}
+        fromPreset={energyState.from}
+        toPreset={energyState.to}
      />
    </div>
  </ModalBody>
  <ModalFooter>
    <Button
      color="primary"
+      disabled={disableApply}
      onclick={() => {
        isOpen = false;
-        setFilter({ energy: energyState });
+        setEnergy();
+        setFilter({ energy: pendingEnergyState });
      }}>Close & Apply</Button
    >
    <Button
      color="danger"
      onclick={() => {
        isOpen = false;
-        energyState = {from: null, to: null};
-        setFilter({ energy: energyState });
+        pendingEnergyState = {from: null, to: null};
+        setFilter({ energy: pendingEnergyState });
      }}>Reset</Button
    >
    <Button onclick={() => (isOpen = false)}>Close</Button>
--- a/web/frontend/src/generic/filters/InfoBox.svelte
+++ b/web/frontend/src/generic/filters/InfoBox.svelte
@@ -20,7 +20,7 @@
  } = $props();
 </script>

-<Button class="mr-2 mb-1" outline color={modified ? "warning" : "primary"} {onclick}>
+<Button class="mb-1" outline color={modified ? "warning" : "primary"} {onclick}>
  <Icon name={icon} />
  {#if children}
    <!-- Note: Ignore '@' Error in IDE -->
--- a/web/frontend/src/generic/filters/Resources.svelte
+++ b/web/frontend/src/generic/filters/Resources.svelte
@@ -262,7 +262,7 @@
        <Icon id="numthreads-info" style="cursor:help; padding-right: 10px;" size="sm" name="info-circle"/>
      </div>
      <Tooltip target={`numthreads-info`} placement="right">
-        Presets for a single node. Can be changed to higher values.
+        Presets for a single node. Use input fields to change to higher values.
      </Tooltip>
      <DoubleRangeSlider
        changeRange={(detail) => {
@@ -282,7 +282,7 @@
          <Icon id="numaccs-info" style="cursor:help; padding-right: 10px;" size="sm" name="info-circle"/>
        </div>
        <Tooltip target={`numaccs-info`} placement="right">
-          Presets for a single node. Can be changed to higher values.
+          Presets for a single node. Use input fields to change to higher values.
        </Tooltip>
        <DoubleRangeSlider
          changeRange={(detail) => {
--- a/web/frontend/src/generic/filters/Stats.svelte
+++ b/web/frontend/src/generic/filters/Stats.svelte
@@ -15,13 +15,15 @@
    ModalBody,
    ModalHeader,
    ModalFooter,
+    Tooltip,
+    Icon
  } from "@sveltestrap/sveltestrap";
  import DoubleRangeSlider from "../select/DoubleRangeSlider.svelte";

  /* Svelte 5 Props */
  let { 
    isOpen = $bindable(),
-    presetStats,
+    presetStats = [],
    setFilter
   } = $props();

@@ -29,10 +31,18 @@
  const availableStats = $derived(getStatsItems(presetStats));

  /* Functions */
+  function setRanges() {
+    for (let as of availableStats) {
+      if (as.enabled) {
+        as.to = (as.to == as.peak) ? 0 : as.to
+      }
+    };
+  }
+  
  function resetRanges() {
    for (let as of availableStats) {
      as.enabled = false
-      as.from = 0
+      as.from = 1
      as.to = as.peak
    };
  }
@@ -45,18 +55,24 @@
  <ModalBody>
    {#each availableStats as aStat}
      <div class="mb-3">
-        <div class="mb-0"><b>{aStat.text}</b></div>
+        <div class="mb-0">
+          <b>{aStat.text} ({aStat.unit})</b>
+          <Icon id={`${aStat.metric}-info`} style="cursor:help; padding-right: 10px;" size="sm" name="info-circle"/>
+        </div>
+        <Tooltip target={`${aStat.metric}-info`} placement="right">
+          Peak Threshold Preset. Use input fields to change to higher values.
+        </Tooltip>
        <DoubleRangeSlider
          changeRange={(detail) => {
            aStat.from = detail[0];
            aStat.to = detail[1];
-            if (aStat.from == 0 && aStat.to == aStat.peak) {
+            if (aStat.from == 1 && aStat.to == aStat.peak) {
              aStat.enabled = false;
            } else {
              aStat.enabled = true;
            }
          }}
-          sliderMin={0.0}
+          sliderMin={1}
          sliderMax={aStat.peak}
          fromPreset={aStat.from}
          toPreset={aStat.to}
@@ -69,6 +85,7 @@
      color="primary"
      onclick={() => {
        isOpen = false;
+        setRanges();
        setFilter({ stats: [...availableStats.filter((as) => as.enabled)] });
      }}>Close & Apply</Button
    >
--- a/web/frontend/src/generic/select/DoubleRangeSlider.svelte
+++ b/web/frontend/src/generic/select/DoubleRangeSlider.svelte
@@ -165,11 +165,11 @@
      }}
    />

-    {#if inputFieldFrom != "1" && inputFieldTo != sliderMax?.toString() }
+    {#if inputFieldFrom != sliderMin?.toString() && inputFieldTo != sliderMax?.toString() }
      <span>Selected: Range <b> {inputFieldFrom} </b> - <b> {inputFieldTo} </b></span>
-    {:else if inputFieldFrom != "1" && inputFieldTo == sliderMax?.toString() }
+    {:else if inputFieldFrom != sliderMin?.toString() && inputFieldTo == sliderMax?.toString() }
      <span>Selected: More than <b> {inputFieldFrom} </b> </span>
-    {:else if inputFieldFrom == "1" && inputFieldTo != sliderMax?.toString() }
+    {:else if inputFieldFrom == sliderMin?.toString() && inputFieldTo != sliderMax?.toString() }
      <span>Selected: Less than <b> {inputFieldTo} </b></span>
    {:else}
      <span><i>No Selection</i></span>
--- a/web/frontend/src/generic/utils.js
+++ b/web/frontend/src/generic/utils.js
@@ -341,26 +341,28 @@ export function getStatsItems(presetStats = []) {
        if (gm?.footprint) {
            const mc = getMetricConfigDeep(gm.name, null, null)
            if (mc) {
-                const presetEntry = presetStats.find((s) => s?.field === (gm.name + '_' + gm.footprint))
+                const presetEntry = presetStats.find((s) => s.field == `${gm.name}_${gm.footprint}`)
                if (presetEntry) {
                    return {
-                        field: gm.name + '_' + gm.footprint,
-                        text: gm.name + ' (' + gm.footprint + ')',
+                        field: presetEntry.field,
+                        text: `${gm.name} (${gm.footprint})`,
                        metric: gm.name,
                        from: presetEntry.from,
-                        to: presetEntry.to,
+                        to: (presetEntry.to == 0) ? mc.peak : presetEntry.to,
                        peak: mc.peak,
-                        enabled: true
+                        enabled: true,
+                        unit: `${gm?.unit?.prefix ? gm.unit.prefix : ''}${gm.unit.base}`
                    }
                } else {
                    return {
-                        field: gm.name + '_' + gm.footprint,
-                        text: gm.name + ' (' + gm.footprint + ')',
+                        field: `${gm.name}_${gm.footprint}`,
+                        text: `${gm.name} (${gm.footprint})`,
                        metric: gm.name,
-                        from: 0,
+                        from: 1,
                        to: mc.peak,
                        peak: mc.peak,
-                        enabled: false
+                        enabled: false,
+                        unit: `${gm?.unit?.prefix ? gm.unit.prefix : ''}${gm.unit.base}`
                    }
                }
            }