From a8b0837e58f2378e995344347f76b0ef701841df Mon Sep 17 00:00:00 2001
From: Christian <80114847+TheBest6337@users.noreply.github.com>
Date: Sat, 8 Nov 2025 14:51:46 +0100
Subject: [PATCH 1/6] Add MinMaxValue component for displaying diameter ranges

---
 electron/src/control/MinMaxValue.tsx          | 175 ++++++++++++++++++
 .../laser/laser1/Laser1ControlPage.tsx        |  29 +++
 2 files changed, 204 insertions(+)
 create mode 100644 electron/src/control/MinMaxValue.tsx

diff --git a/electron/src/control/MinMaxValue.tsx b/electron/src/control/MinMaxValue.tsx
new file mode 100644
index 00000000..4fb8be17
--- /dev/null
+++ b/electron/src/control/MinMaxValue.tsx
@@ -0,0 +1,175 @@
+import { Icon, IconName } from "@/components/Icon";
+import React, { useState, useMemo } from "react";
+import {
+  getUnitIcon,
+  renderValueToReactNode,
+  renderUnitSymbol,
+  Unit,
+} from "./units";
+import { Label } from "./Label";
+import { TimeSeries, TimeSeriesValue } from "@/lib/timeseries";
+import { getSeriesMinMax } from "@/lib/timeseries";
+
+type TimeframeOption = {
+  label: string;
+  value: number; // in milliseconds
+};
+
+const TIMEFRAME_OPTIONS: TimeframeOption[] = [
+  { label: "1 min", value: 1 * 60 * 1000 },
+  { label: "5 min", value: 5 * 60 * 1000 },
+  { label: "10 min", value: 10 * 60 * 1000 },
+  { label: "30 min", value: 30 * 60 * 1000 },
+  { label: "1 hour", value: 60 * 60 * 1000 },
+];
+
+type Props = {
+  label: string;
+  unit?: Unit;
+  timeseries: TimeSeries;
+  icon?: IconName;
+  renderValue?: (value: number) => string;
+  defaultTimeframe?: number; // in milliseconds, defaults to 5 minutes
+};
+
+export function MinMaxValue({
+  unit,
+  timeseries,
+  icon,
+  label,
+  renderValue,
+  defaultTimeframe = 5 * 60 * 1000, // 5 minutes default
+}: Props) {
+  const [selectedTimeframe, setSelectedTimeframe] = useState(defaultTimeframe);
+
+  // Calculate min/max from the timeseries using the selected timeframe
+  const { min, max, hasData } = useMemo(() => {
+    // Use short series for timeframes <= 5 seconds, otherwise use long series
+    // Short series typically has ~5 second retention with high resolution
+    // Long series typically has ~1 hour retention with lower resolution
+    const series =
+      selectedTimeframe <= 5000 ? timeseries.short : timeseries.long;
+
+    // Manually calculate min/max to exclude zero values (which might be invalid readings)
+    const cutoffTime = series.lastTimestamp - selectedTimeframe;
+    let min = Number.POSITIVE_INFINITY;
+    let max = Number.NEGATIVE_INFINITY;
+    let hasValidData = false;
+    let dataCount = 0;
+
+    const { values: raw, index, size, validCount } = series;
+
+    const startIdx = validCount < size ? 0 : index;
+
+    for (let i = 0; i < validCount; i++) {
+      const idx = (startIdx + i) % size;
+      const val = raw[idx];
+
+      if (
+        val &&
+        val.timestamp > 0 &&
+        val.timestamp >= cutoffTime &&
+        val.value > 0
+      ) {
+        hasValidData = true;
+        dataCount++;
+        if (val.value < min) min = val.value;
+        if (val.value > max) max = val.value;
+      }
+    }
+
+    console.log("MinMaxValue Debug:", {
+      selectedTimeframe,
+      seriesType: selectedTimeframe <= 5000 ? "short" : "long",
+      validCount: series.validCount,
+      lastTimestamp: series.lastTimestamp,
+      cutoffTime,
+      dataCount,
+      min: hasValidData ? min : 0,
+      max: hasValidData ? max : 0,
+      currentValue: timeseries.current?.value,
+      sampleData: series.values
+        .slice(0, 5)
+        .filter((v): v is TimeSeriesValue => v !== null && v.timestamp > 0)
+        .map((v) => ({ value: v.value, timestamp: v.timestamp })),
+    });
+
+    if (!hasValidData) {
+      return { min: 0, max: 0, hasData: false };
+    }
+
+    return { min, max, hasData: true };
+  }, [
+    timeseries.short,
+    timeseries.long,
+    timeseries.current,
+    selectedTimeframe,
+  ]);
+
+  return (
+    <div className="flex w-full flex-col gap-3">
+      <Label label={label}>
+        <div className="flex flex-row items-center gap-6">
+          {/* Min Value */}
+          <div className="flex flex-row items-center gap-2">
+            <Icon
+              name={icon ?? (unit ? getUnitIcon(unit) : undefined)}
+              className="size-5 text-blue-500"
+            />
+            <div className="flex flex-col">
+              <span className="text-xs text-gray-500">Min</span>
+              <div className="flex flex-row items-center gap-1">
+                <span className="font-mono text-xl font-bold">
+                  {hasData
+                    ? renderValueToReactNode(min, unit, renderValue)
+                    : "-"}
+                </span>
+                {hasData && (
+                  <span className="text-sm">{renderUnitSymbol(unit)}</span>
+                )}
+              </div>
+            </div>
+          </div>
+
+          {/* Max Value */}
+          <div className="flex flex-row items-center gap-2">
+            <Icon
+              name={icon ?? (unit ? getUnitIcon(unit) : undefined)}
+              className="size-5 text-red-500"
+            />
+            <div className="flex flex-col">
+              <span className="text-xs text-gray-500">Max</span>
+              <div className="flex flex-row items-center gap-1">
+                <span className="font-mono text-xl font-bold">
+                  {hasData
+                    ? renderValueToReactNode(max, unit, renderValue)
+                    : "-"}
+                </span>
+                {hasData && (
+                  <span className="text-sm">{renderUnitSymbol(unit)}</span>
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+      </Label>
+
+      {/* Timeframe Selector */}
+      <div className="flex flex-row flex-wrap gap-2">
+        {TIMEFRAME_OPTIONS.map((option) => (
+          <button
+            key={option.value}
+            onClick={() => setSelectedTimeframe(option.value)}
+            className={`rounded-md px-3 py-1 text-sm transition-colors ${
+              selectedTimeframe === option.value
+                ? "bg-blue-500 text-white"
+                : "bg-gray-200 text-gray-700 hover:bg-gray-300"
+            }`}
+          >
+            {option.label}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/electron/src/machines/laser/laser1/Laser1ControlPage.tsx b/electron/src/machines/laser/laser1/Laser1ControlPage.tsx
index f9a8a319..49245d94 100644
--- a/electron/src/machines/laser/laser1/Laser1ControlPage.tsx
+++ b/electron/src/machines/laser/laser1/Laser1ControlPage.tsx
@@ -3,6 +3,7 @@ import { Page } from "@/components/Page";
 import React from "react";
 import { ControlGrid } from "@/control/ControlGrid";
 import { TimeSeriesValueNumeric } from "@/control/TimeSeriesValue";
+import { MinMaxValue } from "@/control/MinMaxValue";
 
 import { EditValue } from "@/control/EditValue";
 import { Label } from "@/control/Label";
@@ -77,6 +78,34 @@ export function Laser1ControlPage() {
               />
             </div>
           )}
+          <div className="mt-4 border-t pt-4">
+            <MinMaxValue
+              label="Diameter Range"
+              unit="mm"
+              timeseries={diameter}
+              renderValue={(value) => value.toFixed(3)}
+            />
+          </div>
+          {x_diameter?.current && (
+            <div className="mt-4 border-t pt-4">
+              <MinMaxValue
+                label="X-Diameter Range"
+                unit="mm"
+                timeseries={x_diameter}
+                renderValue={(value) => value.toFixed(3)}
+              />
+            </div>
+          )}
+          {y_diameter?.current && (
+            <div className="mt-4 border-t pt-4">
+              <MinMaxValue
+                label="Y-Diameter Range"
+                unit="mm"
+                timeseries={y_diameter}
+                renderValue={(value) => value.toFixed(3)}
+              />
+            </div>
+          )}
         </ControlCard>
         <ControlCard title="Settings">
           <Label label="Set Target Diameter">

From 7971797178ad5204c5f8c04aa4fc9f44926cffc7 Mon Sep 17 00:00:00 2001
From: Christian <80114847+TheBest6337@users.noreply.github.com>
Date: Sat, 8 Nov 2025 15:03:23 +0100
Subject: [PATCH 2/6] Refactor diameter range display for 2-axis lasers and
 improve layout

---
 .../laser/laser1/Laser1ControlPage.tsx        | 56 ++++++++++---------
 1 file changed, 30 insertions(+), 26 deletions(-)

diff --git a/electron/src/machines/laser/laser1/Laser1ControlPage.tsx b/electron/src/machines/laser/laser1/Laser1ControlPage.tsx
index 49245d94..01dd6805 100644
--- a/electron/src/machines/laser/laser1/Laser1ControlPage.tsx
+++ b/electron/src/machines/laser/laser1/Laser1ControlPage.tsx
@@ -29,6 +29,10 @@ export function Laser1ControlPage() {
   const targetDiameter = state?.laser_state?.target_diameter ?? 0;
   const lowerTolerance = state?.laser_state?.lower_tolerance ?? 0;
   const higherTolerance = state?.laser_state?.higher_tolerance ?? 0;
+
+  // Detect if this is a 2-axis laser
+  const isTwoAxis = !!x_diameter?.current || !!y_diameter?.current;
+
   return (
     <Page>
       <ControlGrid columns={2}>
@@ -79,33 +83,33 @@ export function Laser1ControlPage() {
             </div>
           )}
           <div className="mt-4 border-t pt-4">
-            <MinMaxValue
-              label="Diameter Range"
-              unit="mm"
-              timeseries={diameter}
-              renderValue={(value) => value.toFixed(3)}
-            />
+            {isTwoAxis ? (
+              // For 2-axis lasers: show diameter and roundness min/max side by side
+              <div className="grid grid-cols-2 gap-4">
+                <MinMaxValue
+                  label="Diameter Range"
+                  unit="mm"
+                  timeseries={diameter}
+                  renderValue={(value) => value.toFixed(3)}
+                />
+                {roundness?.current && (
+                  <MinMaxValue
+                    label="Roundness Range"
+                    timeseries={roundness}
+                    renderValue={(value) => value.toFixed(3)}
+                  />
+                )}
+              </div>
+            ) : (
+              // For single-axis lasers: show only diameter min/max
+              <MinMaxValue
+                label="Diameter Range"
+                unit="mm"
+                timeseries={diameter}
+                renderValue={(value) => value.toFixed(3)}
+              />
+            )}
           </div>
-          {x_diameter?.current && (
-            <div className="mt-4 border-t pt-4">
-              <MinMaxValue
-                label="X-Diameter Range"
-                unit="mm"
-                timeseries={x_diameter}
-                renderValue={(value) => value.toFixed(3)}
-              />
-            </div>
-          )}
-          {y_diameter?.current && (
-            <div className="mt-4 border-t pt-4">
-              <MinMaxValue
-                label="Y-Diameter Range"
-                unit="mm"
-                timeseries={y_diameter}
-                renderValue={(value) => value.toFixed(3)}
-              />
-            </div>
-          )}
         </ControlCard>
         <ControlCard title="Settings">
           <Label label="Set Target Diameter">

From 17523574d8f178eeb7d1105d7b8e8cec196c3def Mon Sep 17 00:00:00 2001
From: Christian <80114847+TheBest6337@users.noreply.github.com>
Date: Sat, 8 Nov 2025 15:14:22 +0100
Subject: [PATCH 3/6] Add shared timeframe selector to Laser1ControlPage and
 expose TIMEFRAME_OPTIONS

---
 electron/src/control/MinMaxValue.tsx          | 51 ++++++++++++-------
 .../laser/laser1/Laser1ControlPage.tsx        | 25 ++++++++-
 2 files changed, 57 insertions(+), 19 deletions(-)

diff --git a/electron/src/control/MinMaxValue.tsx b/electron/src/control/MinMaxValue.tsx
index 4fb8be17..8d1bbd49 100644
--- a/electron/src/control/MinMaxValue.tsx
+++ b/electron/src/control/MinMaxValue.tsx
@@ -15,7 +15,7 @@ type TimeframeOption = {
   value: number; // in milliseconds
 };
 
-const TIMEFRAME_OPTIONS: TimeframeOption[] = [
+export const TIMEFRAME_OPTIONS: TimeframeOption[] = [
   { label: "1 min", value: 1 * 60 * 1000 },
   { label: "5 min", value: 5 * 60 * 1000 },
   { label: "10 min", value: 10 * 60 * 1000 },
@@ -30,6 +30,12 @@ type Props = {
   icon?: IconName;
   renderValue?: (value: number) => string;
   defaultTimeframe?: number; // in milliseconds, defaults to 5 minutes
+  /** Optional externally-controlled timeframe (ms). When provided, component becomes controlled. */
+  timeframe?: number;
+  /** Optional callback when timeframe is changed via this component's selector */
+  onTimeframeChange?: (t: number) => void;
+  /** When true, hide the built-in timeframe selector (useful when sharing a selector outside) */
+  hideSelector?: boolean;
 };
 
 export function MinMaxValue({
@@ -39,8 +45,12 @@ export function MinMaxValue({
   label,
   renderValue,
   defaultTimeframe = 5 * 60 * 1000, // 5 minutes default
+  timeframe,
+  onTimeframeChange,
+  hideSelector = false,
 }: Props) {
-  const [selectedTimeframe, setSelectedTimeframe] = useState(defaultTimeframe);
+  const [internalTimeframe, setInternalTimeframe] = useState(defaultTimeframe);
+  const selectedTimeframe = timeframe ?? internalTimeframe;
 
   // Calculate min/max from the timeseries using the selected timeframe
   const { min, max, hasData } = useMemo(() => {
@@ -154,22 +164,27 @@ export function MinMaxValue({
         </div>
       </Label>
 
-      {/* Timeframe Selector */}
-      <div className="flex flex-row flex-wrap gap-2">
-        {TIMEFRAME_OPTIONS.map((option) => (
-          <button
-            key={option.value}
-            onClick={() => setSelectedTimeframe(option.value)}
-            className={`rounded-md px-3 py-1 text-sm transition-colors ${
-              selectedTimeframe === option.value
-                ? "bg-blue-500 text-white"
-                : "bg-gray-200 text-gray-700 hover:bg-gray-300"
-            }`}
-          >
-            {option.label}
-          </button>
-        ))}
-      </div>
+      {/* Timeframe Selector (hidden when sharing selector externally) */}
+      {!hideSelector && (
+        <div className="flex flex-row flex-wrap gap-2">
+          {TIMEFRAME_OPTIONS.map((option) => (
+            <button
+              key={option.value}
+              onClick={() => {
+                if (onTimeframeChange) onTimeframeChange(option.value);
+                else setInternalTimeframe(option.value);
+              }}
+              className={`rounded-md px-3 py-1 text-sm transition-colors ${
+                selectedTimeframe === option.value
+                  ? "bg-blue-500 text-white"
+                  : "bg-gray-200 text-gray-700 hover:bg-gray-300"
+              }`}
+            >
+              {option.label}
+            </button>
+          ))}
+        </div>
+      )}
     </div>
   );
 }
diff --git a/electron/src/machines/laser/laser1/Laser1ControlPage.tsx b/electron/src/machines/laser/laser1/Laser1ControlPage.tsx
index 01dd6805..bb256f74 100644
--- a/electron/src/machines/laser/laser1/Laser1ControlPage.tsx
+++ b/electron/src/machines/laser/laser1/Laser1ControlPage.tsx
@@ -3,7 +3,7 @@ import { Page } from "@/components/Page";
 import React from "react";
 import { ControlGrid } from "@/control/ControlGrid";
 import { TimeSeriesValueNumeric } from "@/control/TimeSeriesValue";
-import { MinMaxValue } from "@/control/MinMaxValue";
+import { MinMaxValue, TIMEFRAME_OPTIONS } from "@/control/MinMaxValue";
 
 import { EditValue } from "@/control/EditValue";
 import { Label } from "@/control/Label";
@@ -32,6 +32,8 @@ export function Laser1ControlPage() {
 
   // Detect if this is a 2-axis laser
   const isTwoAxis = !!x_diameter?.current || !!y_diameter?.current;
+  // Shared timeframe state (default 5 minutes)
+  const [timeframe, setTimeframe] = React.useState<number>(5 * 60 * 1000);
 
   return (
     <Page>
@@ -83,6 +85,23 @@ export function Laser1ControlPage() {
             </div>
           )}
           <div className="mt-4 border-t pt-4">
+            {/* Shared timeframe selector for diameter/roundness */}
+            <div className="mb-3 flex flex-row flex-wrap gap-2">
+              {TIMEFRAME_OPTIONS.map((option) => (
+                <button
+                  key={option.value}
+                  onClick={() => setTimeframe(option.value)}
+                  className={`rounded-md px-3 py-1 text-sm transition-colors ${
+                    timeframe === option.value
+                      ? "bg-blue-500 text-white"
+                      : "bg-gray-200 text-gray-700 hover:bg-gray-300"
+                  }`}
+                >
+                  {option.label}
+                </button>
+              ))}
+            </div>
+
             {isTwoAxis ? (
               // For 2-axis lasers: show diameter and roundness min/max side by side
               <div className="grid grid-cols-2 gap-4">
@@ -91,12 +110,16 @@ export function Laser1ControlPage() {
                   unit="mm"
                   timeseries={diameter}
                   renderValue={(value) => value.toFixed(3)}
+                  timeframe={timeframe}
+                  hideSelector
                 />
                 {roundness?.current && (
                   <MinMaxValue
                     label="Roundness Range"
                     timeseries={roundness}
                     renderValue={(value) => value.toFixed(3)}
+                    timeframe={timeframe}
+                    hideSelector
                   />
                 )}
               </div>

From 8594b06c3bd1357f767fd36ef8f81099d7efea9e Mon Sep 17 00:00:00 2001
From: Christian <80114847+TheBest6337@users.noreply.github.com>
Date: Sat, 8 Nov 2025 15:18:44 +0100
Subject: [PATCH 4/6] Reorganize shared timeframe selector for clarity and
 improve layout for diameter range display

---
 .../laser/laser1/Laser1ControlPage.tsx        | 38 ++++++++++---------
 1 file changed, 20 insertions(+), 18 deletions(-)

diff --git a/electron/src/machines/laser/laser1/Laser1ControlPage.tsx b/electron/src/machines/laser/laser1/Laser1ControlPage.tsx
index bb256f74..e38e08a4 100644
--- a/electron/src/machines/laser/laser1/Laser1ControlPage.tsx
+++ b/electron/src/machines/laser/laser1/Laser1ControlPage.tsx
@@ -85,23 +85,6 @@ export function Laser1ControlPage() {
             </div>
           )}
           <div className="mt-4 border-t pt-4">
-            {/* Shared timeframe selector for diameter/roundness */}
-            <div className="mb-3 flex flex-row flex-wrap gap-2">
-              {TIMEFRAME_OPTIONS.map((option) => (
-                <button
-                  key={option.value}
-                  onClick={() => setTimeframe(option.value)}
-                  className={`rounded-md px-3 py-1 text-sm transition-colors ${
-                    timeframe === option.value
-                      ? "bg-blue-500 text-white"
-                      : "bg-gray-200 text-gray-700 hover:bg-gray-300"
-                  }`}
-                >
-                  {option.label}
-                </button>
-              ))}
-            </div>
-
             {isTwoAxis ? (
               // For 2-axis lasers: show diameter and roundness min/max side by side
               <div className="grid grid-cols-2 gap-4">
@@ -124,14 +107,33 @@ export function Laser1ControlPage() {
                 )}
               </div>
             ) : (
-              // For single-axis lasers: show only diameter min/max
+              // For single-axis lasers: show only diameter min/max with shared selector
               <MinMaxValue
                 label="Diameter Range"
                 unit="mm"
                 timeseries={diameter}
                 renderValue={(value) => value.toFixed(3)}
+                timeframe={timeframe}
+                hideSelector
               />
             )}
+
+            {/* Shared timeframe selector for diameter/roundness */}
+            <div className="mt-3 flex flex-row flex-wrap gap-2">
+              {TIMEFRAME_OPTIONS.map((option) => (
+                <button
+                  key={option.value}
+                  onClick={() => setTimeframe(option.value)}
+                  className={`rounded-md px-3 py-1 text-sm transition-colors ${
+                    timeframe === option.value
+                      ? "bg-blue-500 text-white"
+                      : "bg-gray-200 text-gray-700 hover:bg-gray-300"
+                  }`}
+                >
+                  {option.label}
+                </button>
+              ))}
+            </div>
           </div>
         </ControlCard>
         <ControlCard title="Settings">