@adcops/autocore-react 3.3.123 → 3.5.3

package/src/components/UnitsEditor.tsx

@@ -0,0 +1,317 @@
+/*
+ * Copyright (C) 2026 Automated Design Corp. All Rights Reserved.
+ *
+ * UnitsEditor — operator-facing editor for the machine's `units.json`.
+ *
+ * This is the UI half of the units design (autocore-server/UNITS_PLAN.md). The
+ * file it edits is a SIDECAR next to project.json precisely so that this
+ * operator work is not wiped by an engineering project.json push.
+ *
+ * What the operator may change (all display-only, none of it reaches the control
+ * program): the display `label`, the `scalar` and `offset` that convert the
+ * backend value, and the display `precision` / `precision_mode`. They may also
+ * add and remove named systems.
+ *
+ * What they may NOT change here: `backend` — the unit GM/GNV actually holds. It
+ * is a commissioning declaration; changing it on a machine with recorded data is
+ * a data migration, not a settings tweak. It is shown, read-only, because you
+ * cannot sanely set a scalar without knowing what you are converting *from*.
+ *
+ * Precision is a first-class column, not an advanced setting: wrong precision is
+ * one of the most common customer complaints, and the whole point of putting this
+ * screen on the machine is that nobody has to wait for a release to fix it.
+ */
+
+import React, { useCallback, useContext, useEffect, useMemo, useState } from "react";
+import { DataTable } from "primereact/datatable";
+import { Column } from "primereact/column";
+import { InputText } from "primereact/inputtext";
+import { InputNumber } from "primereact/inputnumber";
+import { Dropdown } from "primereact/dropdown";
+import { Button } from "primereact/button";
+import { SelectButton } from "primereact/selectbutton";
+import { Message } from "primereact/message";
+import { EventEmitterContext } from "../core/EventEmitterContext";
+import { MessageType } from "../hub/CommandMessage";
+import type { PrecisionMode, UnitsTable } from "../core/AutoCoreTagTypes";
+
+const PRECISION_MODES: { label: string; value: PrecisionMode }[] = [
+    { label: "Decimals", value: "decimals" },
+    { label: "Significant", value: "significant" },
+];
+
+/** One editable row: a quantity, seen through the system being edited. */
+interface Row {
+    quantity: string;
+    backend: string;
+    kind: "delta" | "absolute";
+    label: string;
+    scalar: number;
+    offset: number;
+    precision: number;
+    precisionMode: PrecisionMode;
+}
+
+export interface UnitsEditorProps {
+    /** Heading text. Omit for none. */
+    title?: string;
+    /** Called after a successful save. */
+    onSaved?: (units: UnitsTable) => void;
+}
+
+export const UnitsEditor: React.FC<UnitsEditorProps> = ({ title = "Units", onSaved }) => {
+    const { invoke } = useContext(EventEmitterContext);
+
+    const [units, setUnits] = useState<UnitsTable | null>(null);
+    const [editSystem, setEditSystem] = useState<string | null>(null);
+    const [dirty, setDirty] = useState(false);
+    const [busy, setBusy] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+    const [notice, setNotice] = useState<string | null>(null);
+
+    const load = useCallback(async () => {
+        setBusy(true);
+        setError(null);
+        try {
+            const resp: any = await invoke("system.get_units" as any, MessageType.Request, {} as any);
+            const payload = resp?.data ?? resp;
+            const table = payload?.units as UnitsTable | null;
+            if (!table) {
+                setError(
+                    "This machine has no units.json. Display values are shown in backend " +
+                    "units until one is installed.",
+                );
+                setUnits(null);
+            } else {
+                setUnits(table);
+                setEditSystem((prev) =>
+                    prev && table.systems.includes(prev) ? prev : table.default_system,
+                );
+                setDirty(false);
+            }
+        } catch (e) {
+            setError(`Could not read units: ${e instanceof Error ? e.message : String(e)}`);
+        }
+        setBusy(false);
+    }, [invoke]);
+
+    useEffect(() => { void load(); }, [load]);
+
+    /** Flatten the table into rows for the system being edited. */
+    const rows = useMemo<Row[]>(() => {
+        if (!units || !editSystem) return [];
+        return Object.entries(units.scales)
+            .map(([quantity, scale]: [string, any]) => {
+                const entry = scale?.[editSystem] ?? {};
+                return {
+                    quantity,
+                    backend: scale?.backend ?? "",
+                    kind: (scale?.kind ?? "delta") as "delta" | "absolute",
+                    label: entry.label ?? "",
+                    scalar: typeof entry.scalar === "number" ? entry.scalar : 1,
+                    offset: typeof entry.offset === "number" ? entry.offset : 0,
+                    precision: typeof entry.precision === "number" ? entry.precision : 3,
+                    precisionMode: (entry.precision_mode ?? "decimals") as PrecisionMode,
+                };
+            })
+            .sort((a, b) => a.quantity.localeCompare(b.quantity));
+    }, [units, editSystem]);
+
+    /** Write one field of one (quantity, system) entry. */
+    const patch = (quantity: string, field: keyof Row, value: any) => {
+        if (!units || !editSystem) return;
+        const next: UnitsTable = JSON.parse(JSON.stringify(units));
+        const scale: any = next.scales[quantity];
+        if (!scale) return;
+        const entry = { ...(scale[editSystem] ?? {}) };
+        switch (field) {
+            case "label":         entry.label = value; break;
+            case "scalar":        entry.scalar = value; break;
+            case "offset":        entry.offset = value; break;
+            case "precision":     entry.precision = value; break;
+            case "precisionMode": entry.precision_mode = value; break;
+            default: return;
+        }
+        scale[editSystem] = entry;
+        setUnits(next);
+        setDirty(true);
+        setNotice(null);
+    };
+
+    const save = async () => {
+        if (!units) return;
+        setBusy(true);
+        setError(null);
+        setNotice(null);
+        try {
+            // The server validates authoritatively and REFUSES a bad table —
+            // an invalid scale would break every display on the machine, so a
+            // rejected save must leave the stored file untouched.
+            const resp: any = await invoke(
+                "system.save_units" as any, MessageType.Request, { units } as any,
+            );
+            if (!resp?.success) {
+                setError(resp?.error_message ?? "Save was refused.");
+                return;
+            }
+            setDirty(false);
+            setNotice("Saved.");
+            onSaved?.(units);
+        } catch (e) {
+            setError(`Save failed: ${e instanceof Error ? e.message : String(e)}`);
+        } finally {
+            setBusy(false);
+        }
+    };
+
+    if (!units) {
+        return (
+            <div>
+                {title ? <h3 style={{ marginTop: 0 }}>{title}</h3> : null}
+                {error ? <Message severity="warn" text={error} /> : null}
+                <div style={{ marginTop: "0.75rem" }}>
+                    <Button label="Reload" icon="pi pi-refresh" onClick={() => void load()} loading={busy} />
+                </div>
+            </div>
+        );
+    }
+
+    return (
+        <div>
+            {title ? <h3 style={{ marginTop: 0 }}>{title}</h3> : null}
+
+            <div style={{
+                display: "flex", alignItems: "center", gap: "1rem",
+                flexWrap: "wrap", marginBottom: "0.75rem",
+            }}>
+                <div>
+                    <div style={{ fontWeight: 600, marginBottom: "0.3rem" }}>Editing system</div>
+                    <SelectButton
+                        value={editSystem}
+                        options={units.systems.map((s) => ({ label: s, value: s }))}
+                        onChange={(e) => { if (e.value) setEditSystem(e.value); }}
+                        allowEmpty={false}
+                    />
+                </div>
+                <div style={{ marginLeft: "auto", display: "flex", gap: "0.5rem" }}>
+                    <Button
+                        label="Revert"
+                        icon="pi pi-undo"
+                        className="p-button-text"
+                        disabled={!dirty || busy}
+                        onClick={() => void load()}
+                    />
+                    <Button
+                        label="Save"
+                        icon="pi pi-check"
+                        disabled={!dirty || busy}
+                        loading={busy}
+                        onClick={() => void save()}
+                    />
+                </div>
+            </div>
+
+            {error ?   <Message severity="error" text={error} style={{ marginBottom: "0.5rem" }} /> : null}
+            {notice ?  <Message severity="success" text={notice} style={{ marginBottom: "0.5rem" }} /> : null}
+
+            <Message
+                severity="info"
+                style={{ marginBottom: "0.75rem" }}
+                text={
+                    "Display only — these settings never change what the machine stores or " +
+                    "how it moves. 'Backend' is the unit the controller holds and is set at " +
+                    "commissioning."
+                }
+            />
+
+            <DataTable value={rows} size="small" stripedRows scrollable scrollHeight="26rem">
+                <Column field="quantity" header="Quantity" style={{ minWidth: "11rem" }} />
+                <Column
+                    field="backend"
+                    header="Backend"
+                    style={{ width: "7rem" }}
+                    body={(r: Row) => (
+                        <span style={{ opacity: 0.7 }}>
+                            {r.backend || "—"}
+                            {r.kind === "absolute" ? " (abs)" : ""}
+                        </span>
+                    )}
+                />
+                <Column
+                    header="Label"
+                    style={{ width: "8rem" }}
+                    body={(r: Row) => (
+                        <InputText
+                            value={r.label}
+                            style={{ width: "100%" }}
+                            onChange={(e) => patch(r.quantity, "label", e.target.value)}
+                        />
+                    )}
+                />
+                <Column
+                    header="Scalar"
+                    style={{ width: "11rem" }}
+                    body={(r: Row) => (
+                        <InputNumber
+                            value={r.scalar}
+                            minFractionDigits={0}
+                            maxFractionDigits={10}
+                            style={{ width: "100%" }}
+                            inputStyle={{ width: "100%" }}
+                            onValueChange={(e) => patch(r.quantity, "scalar", e.value ?? 1)}
+                        />
+                    )}
+                />
+                <Column
+                    header="Offset"
+                    style={{ width: "8rem" }}
+                    body={(r: Row) =>
+                        // Only an absolute quantity takes an offset. A temperature
+                        // DIFFERENCE must not: a 10 °C rise is 18 °F, not 50 °F.
+                        r.kind === "absolute" ? (
+                            <InputNumber
+                                value={r.offset}
+                                minFractionDigits={0}
+                                maxFractionDigits={6}
+                                style={{ width: "100%" }}
+                                inputStyle={{ width: "100%" }}
+                                onValueChange={(e) => patch(r.quantity, "offset", e.value ?? 0)}
+                            />
+                        ) : (
+                            <span style={{ opacity: 0.4 }}>n/a</span>
+                        )
+                    }
+                />
+                <Column
+                    header="Precision"
+                    style={{ width: "7rem" }}
+                    body={(r: Row) => (
+                        <InputNumber
+                            value={r.precision}
+                            min={0}
+                            max={12}
+                            showButtons
+                            style={{ width: "100%" }}
+                            inputStyle={{ width: "100%" }}
+                            onValueChange={(e) => patch(r.quantity, "precision", e.value ?? 0)}
+                        />
+                    )}
+                />
+                <Column
+                    header="Mode"
+                    style={{ width: "9rem" }}
+                    body={(r: Row) => (
+                        <Dropdown
+                            value={r.precisionMode}
+                            options={PRECISION_MODES}
+                            style={{ width: "100%" }}
+                            onChange={(e) => patch(r.quantity, "precisionMode", e.value)}
+                        />
+                    )}
+                />
+            </DataTable>
+        </div>
+    );
+};
+
+export default UnitsEditor;

package/src/components/index.ts

@@ -62,7 +62,11 @@ export type { ResultHistoryTableProps } from './tis/ResultHistoryTable';
 export { SampleSummaryPanel }  from './tis/SampleSummaryPanel';
 export type { SampleSummaryPanelProps } from './tis/SampleSummaryPanel';
 
-export { TestDataView }        from './tis/TestDataView';
+export { TestDataView, DEFAULT_X_DECIMALS } from './tis/TestDataView';
+export { UnitSystemSelector }  from './UnitSystemSelector';
+export type { UnitSystemSelectorProps } from './UnitSystemSelector';
+export { UnitsEditor }         from './UnitsEditor';
+export type { UnitsEditorProps } from './UnitsEditor';
 export type { TestDataViewProps, ChartAxis, ChartSeries, ChartView, RawDataShape } from './tis/TestDataView';
 
 export { TestRawDataView }     from './tis/TestRawDataView';

package/src/components/tis/ResultHistoryTable.tsx

@@ -77,10 +77,20 @@ export const ResultHistoryTable: React.FC<ResultHistoryTableProps> = (props) =>
     const [downloading, setDownloading] = useState<InFlight | null>(null);
     const [projectBusy, setProjectBusy] = useState<ProjectDownloadKind | null>(null);
     const [excludingRunId, setExcludingRunId] = useState<string | null>(null);
-    // Per-row lifecycle menu (complete / abandon / reopen). One Menu instance is
-    // reused; `menuRow` is the row it was opened for.
+    // Per-row lifecycle menu (close / complete / abandon / reopen). One Menu
+    // instance is reused.
+    //
+    // The row is carried in an OPEN REQUEST rather than plain state, and the
+    // popup is shown from an effect once React has committed the new model.
+    // Opening it inline in onClick (the original shape) raced the state update:
+    // the popup rendered with the *previous* row's model — or an empty one on the
+    // first click — so an action either did nothing or silently hit the wrong
+    // run. Each click makes a fresh request object so re-opening the same row
+    // still fires the effect.
     const rowMenuRef = useRef<Menu>(null);
-    const [menuRow, setMenuRow] = useState<any>(null);
+    const [menuRequest, setMenuRequest] =
+        useState<{ row: any; anchor: HTMLElement; seq: number } | null>(null);
+    const menuSeqRef = useRef(0);
     const [lifecycleBusy, setLifecycleBusy] = useState<string | null>(null);
     const { invoke } = useContext(EventEmitterContext);
 
@@ -118,6 +128,15 @@ export const ResultHistoryTable: React.FC<ResultHistoryTableProps> = (props) =>
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [projectId, methodId, tis.state.activeRunId, tis.state.active]);
 
+    // Show the popup only after React has committed the model for `menuRequest`
+    // (see the note on `menuRequest`). `anchor` is the captured DOM node — the
+    // original event's currentTarget is null by now.
+    useEffect(() => {
+        if (!menuRequest) return;
+        rowMenuRef.current?.show({ currentTarget: menuRequest.anchor } as any);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [menuRequest]);
+
     const formatDate = (dateStr: string) => {
         if (!dateStr) return '';
         return new Date(dateStr).toLocaleString();
@@ -233,6 +252,10 @@ export const ResultHistoryTable: React.FC<ResultHistoryTableProps> = (props) =>
     /**
      * Menu items for a row, gated on its lifecycle state:
      *  - open (in_progress / paused) → Complete, Abandon
+     *  - interrupted (auto-closed)   → Close (acknowledge it as done), Reopen,
+     *    Abandon. Abandon is offered here but NOT for a run a person completed:
+     *    nobody vouched for an interrupted run, so clearing a junk one out of
+     *    the history is a judgement the operator is entitled to make.
      *  - completed but not finalized → Reopen (add more cycles under the same
      *    Test ID — the multi-specimen case where a set turned out to be bigger)
      *  - finalized (abandoned)       → nothing; `finalized` exists precisely to
@@ -242,6 +265,11 @@ export const ResultHistoryTable: React.FC<ResultHistoryTableProps> = (props) =>
         const status = rowData?.status;
         const finalized = rowData?.finalized === true;
         const isOpen = status === 'in_progress' || status === 'paused';
+        // Closed by the TIS startup sweep, not by a person. It is already out of
+        // "In Progress", but nobody has confirmed the run is done with — so it
+        // still reads as Interrupted until someone closes it.
+        const isInterrupted =
+            status === 'completed' && rowData?.auto_closed === true && !finalized;
         const items: any[] = [];
 
         if (isOpen) {
@@ -264,6 +292,50 @@ export const ResultHistoryTable: React.FC<ResultHistoryTableProps> = (props) =>
                     accept: () => handleLifecycle(rowData, 'abandon'),
                 }),
             });
+        } else if (isInterrupted) {
+            items.push({
+                label: 'Close Test',
+                icon: 'pi pi-check-circle',
+                command: () => confirmDialog({
+                    header: 'Close Interrupted Test',
+                    message:
+                        `Close ${rowData?.sample_id || rowData?.run_id}? It was closed automatically ` +
+                        `when the software restarted mid-test. Closing it marks it Completed and ` +
+                        `keeps the recorded end time. Recorded data is not changed, and the test ` +
+                        `can still be reopened later.`,
+                    icon: 'pi pi-check-circle',
+                    acceptLabel: 'Close Test',
+                    accept: () => handleLifecycle(rowData, 'complete'),
+                }),
+            });
+            items.push({
+                label: 'Reopen Test',
+                icon: 'pi pi-replay',
+                command: () => confirmDialog({
+                    header: 'Reopen Test',
+                    message:
+                        `Reopen ${rowData?.sample_id || rowData?.run_id} so new cycles are added to ` +
+                        `it? Cycle numbering continues from where it stopped. This changes where ` +
+                        `data is recorded — it does not start the machine.`,
+                    icon: 'pi pi-replay',
+                    acceptLabel: 'Reopen',
+                    accept: () => handleLifecycle(rowData, 'reopen'),
+                }),
+            });
+            items.push({
+                label: 'Abandon Test',
+                icon: 'pi pi-ban',
+                command: () => confirmDialog({
+                    header: 'Abandon Test',
+                    message:
+                        `Mark ${rowData?.sample_id || rowData?.run_id} as abandoned? ` +
+                        `Recorded data is kept, but the test can no longer be reopened.`,
+                    icon: 'pi pi-exclamation-triangle',
+                    acceptClassName: 'p-button-danger',
+                    acceptLabel: 'Abandon',
+                    accept: () => handleLifecycle(rowData, 'abandon'),
+                }),
+            });
         } else if (status === 'completed' && !finalized) {
             items.push({
                 label: 'Reopen Test',
@@ -377,6 +449,13 @@ export const ResultHistoryTable: React.FC<ResultHistoryTableProps> = (props) =>
     const statusOf = (rowData: any): { label: string; severity: 'success' | 'info' | 'warning' | 'danger' | undefined } => {
         if (rowData?.finalized === true) return { label: 'Abandoned', severity: 'danger' };
         const status = typeof rowData?.status === 'string' ? rowData.status : 'completed';
+        // A run TIS closed at startup because the previous process stopped
+        // mid-test. It is closed (not "In Progress"), but the operator never
+        // finished it, so calling it "Completed" would overstate what happened.
+        // Still reopenable — `finalized` is deliberately not set by that sweep.
+        if (status === 'completed' && rowData?.auto_closed === true) {
+            return { label: 'Interrupted', severity: 'warning' };
+        }
         switch (status) {
             case 'in_progress': return { label: 'In Progress', severity: 'info' };
             case 'paused':      return { label: 'Paused', severity: 'warning' };
@@ -573,14 +652,25 @@ export const ResultHistoryTable: React.FC<ResultHistoryTableProps> = (props) =>
                             tooltip="Complete / abandon / reopen this test"
                             tooltipOptions={{ position: 'left' }}
                             onClick={(e) => {
-                                setMenuRow(rowData);
-                                rowMenuRef.current?.toggle(e);
+                                // Capture the DOM anchor now: React clears
+                                // currentTarget once the handler returns, and the
+                                // effect needs it to position the popup.
+                                menuSeqRef.current += 1;
+                                setMenuRequest({
+                                    row: rowData,
+                                    anchor: e.currentTarget as HTMLElement,
+                                    seq: menuSeqRef.current,
+                                });
                             }}
                         />
                     )}
                 />
             </DataTable>
-            <Menu model={menuRow ? rowMenuItems(menuRow) : []} popup ref={rowMenuRef} />
+            <Menu
+                model={menuRequest ? rowMenuItems(menuRequest.row) : []}
+                popup
+                ref={rowMenuRef}
+            />
         </div>
     );
 };

package/src/components/tis/ScienceTable.tsx

@@ -52,6 +52,20 @@ export interface ScienceTableProps {
     showIndex?: boolean;
     /** Header for the index column. Default "#". */
     indexHeader?: string;
+    /**
+     * Which way the row index counts.
+     *
+     * `'ascending'` (default) numbers top-to-bottom, 1..n — right for a table
+     * whose first row is its first record.
+     *
+     * `'descending'` numbers n..1, so the TOP row carries the highest number.
+     * Use it whenever `rows` is newest-first: the number then reads as "this is
+     * cycle 47 of 47" instead of restarting at 1 on every new arrival, which is
+     * what an operator watching a running test expects. Getting this wrong is
+     * actively misleading — an ascending index over newest-first rows labels the
+     * newest cycle "1" and the oldest one "47".
+     */
+    indexOrder?: 'ascending' | 'descending';
     emptyMessage?: string;
     /** Enable virtual scrolling; pair with `scrollHeight` for large runs. */
     scrollable?: boolean;
@@ -80,6 +94,7 @@ export const ScienceTable: React.FC<ScienceTableProps> = ({
     rows,
     showIndex = true,
     indexHeader = '#',
+    indexOrder = 'ascending',
     emptyMessage = 'No data.',
     scrollable = false,
     scrollHeight,
@@ -87,6 +102,18 @@ export const ScienceTable: React.FC<ScienceTableProps> = ({
     onCellEdit,
 }) => {
     const virtual = scrollable && !!scrollHeight;
+
+    // Force a remount when the COLUMN DEFINITION changes — which is what a
+    // Metric/Imperial switch does (new label, new unit, new body formatter).
+    //
+    // PrimeReact memoises rendered rows against the row data, so with the same
+    // `rows` array it keeps the old cells even though every column's `body`
+    // closure is new: the header flipped to "lbf" while the numbers stayed in N,
+    // and the operator had to leave the tab and come back. Keying on the column
+    // signature (not on every render) confines the remount to an actual change.
+    const columnSignature = columns
+        .map((c) => `${c.field}\u0000${c.label}\u0000${c.units ?? ''}`)
+        .join('\u0001');
     // Cell edit mode is switched on only when a column asks for it AND a commit
     // handler exists, so a plain report table keeps DataTable's read-only path.
     const anyEditable = !!onCellEdit && columns.some((c) => c.editable);
@@ -95,6 +122,7 @@ export const ScienceTable: React.FC<ScienceTableProps> = ({
             {title != null && <div className="ac-science-table-title">{title}</div>}
             <div className="ac-science-table-scroll">
                 <DataTable
+                    key={columnSignature}
                     className="ac-science-table"
                     value={rows}
                     scrollable={scrollable}
@@ -111,7 +139,11 @@ export const ScienceTable: React.FC<ScienceTableProps> = ({
                             align="center"
                             alignHeader="center"
                             style={{ width: '3.5rem', maxWidth: '3.5rem' }}
-                            body={(_data: any, options: ColumnBodyOptions) => options.rowIndex + 1}
+                            body={(_data: any, options: ColumnBodyOptions) =>
+                                indexOrder === 'descending'
+                                    ? rows.length - options.rowIndex
+                                    : options.rowIndex + 1
+                            }
                         />
                     ) : null}
                     {columns.map((c) => {