apply updated rangefilter logic to energy and stats

internal/routerConfig/routes.go

@@ -405,6 +405,17 @@ func buildFilterPresets(query url.Values) map[string]any {
 	if query.Get("energy") != "" {
 		parts := strings.Split(query.Get("energy"), "-")
 		if len(parts) == 2 {
+			if parts[0] == "lessthan" {
+				lt, lte := strconv.Atoi(parts[1])
+				if lte == nil {
+					filterPresets["energy"] = map[string]int{"from": 1, "to": lt}
+				}
+			} else if parts[0] == "morethan" {
+				mt, mte := strconv.Atoi(parts[1])
+				if mte == nil {
+					filterPresets["energy"] = map[string]int{"from": mt, "to": 0}
+				}
+			} else {
 				a, e1 := strconv.Atoi(parts[0])
 				b, e2 := strconv.Atoi(parts[1])
 				if e1 == nil && e2 == nil {
@@ -412,11 +423,33 @@ func buildFilterPresets(query url.Values) map[string]any {
 				}
 			}
 		}
+	}
 	if len(query["stat"]) != 0 {
 		statList := make([]map[string]any, 0)
 		for _, statEntry := range query["stat"] {
 			parts := strings.Split(statEntry, "-")
 			if len(parts) == 3 { // Metric Footprint Stat Field, from - to
+				if parts[1] == "lessthan" {
+					lt, lte := strconv.ParseInt(parts[2], 10, 64)
+					if lte == nil {
+						statEntry := map[string]any{
+							"field": parts[0],
+							"from":  1,
+							"to":    lt,
+						}
+						statList = append(statList, statEntry)
+					}
+				} else if parts[1] == "morethan" {
+					mt, mte := strconv.ParseInt(parts[2], 10, 64)
+					if mte == nil {
+						statEntry := map[string]any{
+							"field": parts[0],
+							"from":  mt,
+							"to":    0,
+						}
+						statList = append(statList, statEntry)
+					}
+				} else {
 					a, e1 := strconv.ParseInt(parts[1], 10, 64)
 					b, e2 := strconv.ParseInt(parts[2], 10, 64)
 					if e1 == nil && e2 == nil {
@@ -429,6 +462,7 @@ func buildFilterPresets(query url.Values) map[string]any {
 					}
 				}
 			}
+		}
 		filterPresets["stats"] = statList
 	}
 	return filterPresets

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}
+    {#each filters.stats as stat}
+      {#if stat.from > 1 && stat.to > 0}
         <Info icon="bar-chart" onclick={() => (isStatsOpen = true)}>
-      {filters.stats
-        .map((stat) => `${stat.field}: ${stat.from} - ${stat.to}`)
-        .join(", ")}
-    </Info>
+          {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}
 

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>

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 -->

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) => {

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
     >

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>

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}`
                     }
                 }
             }