@adcops/autocore-react 3.3.79 → 3.3.83

package/src/components/ams/AssetDetailView.tsx

@@ -24,6 +24,11 @@ export const AssetDetailView: React.FC = () => {
     const [cals, setCals]   = useState<any[]>([]);
     const [usage, setUsage] = useState<any | null>(null);
     const [calDialogOpen, setCalDialogOpen] = useState(false);
+    /** When non-null, the dialog opens in edit mode pre-seeded from this
+     *  Calibration record. Only the asset's current calibration is
+     *  editable (server enforces); the Edit button only renders on that
+     *  row, so this is always either null or the current cal. */
+    const [editingCal, setEditingCal] = useState<any | null>(null);
     const [deleting, setDeleting] = useState(false);
 
     /** Two-step asset retirement: flip status to retired via update_asset.
@@ -234,7 +239,7 @@ export const AssetDetailView: React.FC = () => {
                         />
                     )}
                     <Button label="+ Calibration" icon="pi pi-plus"
-                        onClick={() => setCalDialogOpen(true)} />
+                        onClick={() => { setEditingCal(null); setCalDialogOpen(true); }} />
                 </div>
             </div>
             <ConfirmDialog />
@@ -253,13 +258,30 @@ export const AssetDetailView: React.FC = () => {
                 <Column header="Values"
                     body={(r) => <code style={{ fontSize: '0.75rem' }}>{JSON.stringify(r.values)}</code>}
                 />
+                <Column header="" style={{ width: '5rem' }}
+                    body={(r) => (
+                        // Edit is only offered for the asset's current
+                        // calibration — historical records are frozen
+                        // (server enforces too). Customers asked for
+                        // this so typos can be fixed without minting a
+                        // new cal_id every time.
+                        r.cal_id === asset.current_calibration_id ? (
+                            <Button icon="pi pi-pencil" text rounded size="small"
+                                tooltip="Edit this calibration (fixes a typo in place)."
+                                tooltipOptions={{ position: 'left' }}
+                                onClick={() => { setEditingCal(r); setCalDialogOpen(true); }}
+                            />
+                        ) : null
+                    )}
+                />
             </DataTable>
 
             <CalibrationEntryDialog
                 visible={calDialogOpen}
                 assetId={asset.asset_id}
                 assetType={asset.asset_type}
-                onHide={() => setCalDialogOpen(false)}
+                editing={editingCal}
+                onHide={() => { setCalDialogOpen(false); setEditingCal(null); }}
                 onAdded={() => { refresh(); }}
             />
         </div>

package/src/components/ams/CalibrationEntryDialog.tsx

@@ -1,11 +1,17 @@
 /*
- * <CalibrationEntryDialog> — form for adding a calibration record to
- * an asset. Renders a dynamic field set built from the asset_type's
+ * <CalibrationEntryDialog> — form for adding *or editing* a calibration
+ * record. Renders a dynamic field set built from the asset_type's
  * `calibration_fields` schema, plus a few standard meta fields.
  *
- * Triggered by <AssetDetailView>'s "+ Calibration" button. Submits via
- * `ams.add_calibration`; on success the AmsProvider's
- * `ams.calibration_added` subscription refreshes the registry.
+ * Two modes:
+ *   - Add: `editing` prop absent. Submits via `ams.add_calibration`,
+ *     which mints a new cal_id and bumps the asset's current_calibration_id.
+ *   - Edit: `editing` prop carries the existing Calibration record. Form
+ *     fields are pre-seeded from it; submit hits `ams.update_calibration`
+ *     which overwrites the file in place (cal_id and the rest of the
+ *     history are preserved). The server enforces that only the asset's
+ *     *current* calibration is editable, so the parent should only open
+ *     the dialog in edit mode for the current row.
  */
 
 import React, { useContext, useEffect, useState } from 'react';
@@ -24,7 +30,22 @@ export interface CalibrationEntryDialogProps {
     assetId: string;
     assetType: string;
     onHide: () => void;
+    /** Fires after a successful add OR edit. The cal_id is the same as
+     *  the editing record on edit, or a freshly minted id on add. */
     onAdded?: (calId: string) => void;
+    /** When set, the dialog opens in edit mode pre-seeded from this
+     *  Calibration record. cal_id is preserved through the round-trip.
+     *  Caller is responsible for only passing the asset's *current*
+     *  calibration — the server rejects edits to historical records. */
+    editing?: {
+        cal_id: string;
+        performed_at?: string;
+        performed_by?: string;
+        expires_at?: string | null;
+        cert_ref?: string;
+        notes?: string;
+        values: any;
+    } | null;
 }
 
 interface FieldSpec {
@@ -50,8 +71,9 @@ interface SubLocationsSchema {
 }
 
 export const CalibrationEntryDialog: React.FC<CalibrationEntryDialogProps> = ({
-    visible, assetId, assetType, onHide, onAdded,
+    visible, assetId, assetType, onHide, onAdded, editing,
 }) => {
+    const isEdit = !!editing;
     const schemas = useAmsSchemas();
     const { invoke } = useContext(EventEmitterContext);
 
@@ -81,17 +103,46 @@ export const CalibrationEntryDialog: React.FC<CalibrationEntryDialogProps> = ({
     const [submitting, setSubmitting]   = useState(false);
     const [error, setError]             = useState<string | null>(null);
 
+    // Reset / pre-seed when the dialog opens. In edit mode the form
+    // mirrors the existing record so the operator only has to change
+    // what's wrong; in add mode the form starts blank.
     useEffect(() => {
-        if (visible) {
+        if (!visible) return;
+        setError(null);
+        if (editing) {
+            // The values payload shape mirrors what the server stores:
+            // per-axis types use `{ <key>: { <field>: ... } }`; flat
+            // types use `{ <field>: ... }`. Route into the right slot
+            // based on the schema, not the payload, so a corrupt or
+            // legacy shape doesn't crosstalk into the wrong UI mode.
+            if (isPerAxis) {
+                setValues({});
+                setPerAxisValues(
+                    (editing.values && typeof editing.values === 'object')
+                        ? editing.values as { [k: string]: { [f: string]: any } }
+                        : {}
+                );
+            } else {
+                setValues(
+                    (editing.values && typeof editing.values === 'object')
+                        ? editing.values as { [k: string]: any }
+                        : {}
+                );
+                setPerAxisValues({});
+            }
+            setPerformedBy(editing.performed_by ?? '');
+            setExpiresAt(editing.expires_at ? new Date(editing.expires_at) : null);
+            setCertRef(editing.cert_ref ?? '');
+            setNotes(editing.notes ?? '');
+        } else {
             setValues({});
             setPerAxisValues({});
             setPerformedBy('');
             setExpiresAt(null);
             setCertRef('');
             setNotes('');
-            setError(null);
         }
-    }, [visible]);
+    }, [visible, editing, isPerAxis]);
 
     const renderField = (f: FieldSpec) => {
         const labelText = `${f.label ?? f.name}${f.units ? ` [${f.units}]` : ''}${f.required ? ' *' : ''}`;
@@ -176,19 +227,28 @@ export const CalibrationEntryDialog: React.FC<CalibrationEntryDialogProps> = ({
         setSubmitting(true);
         setError(null);
         try {
-            const resp: any = await invoke('ams.add_calibration' as any, MessageType.Request, {
+            // Edit and add share the same payload shape; the topic
+            // differentiates them. On edit we also pin the cal_id so
+            // the server overwrites the right record rather than
+            // minting a new one.
+            const topic = isEdit ? 'ams.update_calibration' : 'ams.add_calibration';
+            const payload: any = {
                 asset_id:     assetId,
                 performed_by: performedBy,
                 expires_at:   expiresAt ? expiresAt.toISOString() : null,
                 cert_ref:     certRef,
                 notes,
                 values:       valuesPayload,
-            } as any);
+            };
+            if (isEdit && editing) {
+                payload.cal_id = editing.cal_id;
+            }
+            const resp: any = await invoke(topic as any, MessageType.Request, payload);
             if (resp?.success) {
                 onAdded?.(resp.data.cal_id);
                 onHide();
             } else {
-                setError(resp?.error_message ?? 'add_calibration failed');
+                setError(resp?.error_message ?? `${topic} failed`);
             }
         } catch (e: any) {
             setError(String(e?.message ?? e));
@@ -199,7 +259,9 @@ export const CalibrationEntryDialog: React.FC<CalibrationEntryDialogProps> = ({
 
     return (
         <Dialog
-            header={`Add Calibration — ${assetId}`}
+            header={isEdit
+                ? `Edit Calibration ${editing!.cal_id} — ${assetId}`
+                : `Add Calibration — ${assetId}`}
             visible={visible}
             onHide={onHide}
             style={{ width: '40rem' }}

package/src/components/tis/TestDataView.tsx

@@ -2,10 +2,26 @@
  * Copyright (C) 2026 Automated Design Corp. All Rights Reserved.
  *
  * TestDataView — standardized test-detail view for the Test Information
- * System. Renders metadata header + cycle-scatter chart + virtual-scroll
- * cycle table + results table, and subscribes to live `tis.cycle_added`
- * and `tis.results_updated` broadcasts so the display updates as the
- * control program appends cycles.
+ * System. Renders, top-to-bottom:
+ *
+ *   - metadata header (sample, project/method/run, "View Raw Data" btn)
+ *   - **unified chart panel**: one dropdown lists every view declared in
+ *     the schema (any type). The chart area dispatches on `view.type`:
+ *       * `raw_trace`     — plots columns from the per-cycle raw blob,
+ *                            shows a cycle picker when >1 cycle exists.
+ *       * `cycle_scatter` — plots per-cycle scalars across the full run.
+ *     Raw blob fetching is lazy: nothing's pulled until a raw_trace view
+ *     is actually selected, so scatter-only runs don't pay the round trip.
+ *   - virtual-scroll cycle table
+ *   - results table
+ *
+ * Subscribes to live `tis.cycle_added` and `tis.results_updated`
+ * broadcasts so cycle data + scatter chart update as the control
+ * program appends cycles.
+ *
+ * Sibling <TestRawDataView> stays exported for callers that want a
+ * focused trace-only viewer with no scatter / cycle-table / results
+ * sections.
  */
 
 import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
@@ -26,6 +42,7 @@ import { Line } from 'react-chartjs-2';
 import { EventEmitterContext } from '../../core/EventEmitterContext';
 import { MessageType } from '../../hub/CommandMessage';
 import { useTis } from './TisProvider';
+import { useRawCycleData } from './useRawCycleData';
 
 ChartJS.register(
     CategoryScale, LinearScale, PointElement, LineElement,
@@ -88,6 +105,9 @@ export interface TestDataViewProps {
     throttleMs?:  number;
     /** Fixed cycle-table scroll height. Default "400px". */
     cycleTableHeight?: string;
+    /** Height of the unified chart panel (any CSS length). Default "320px".
+     *  Set to e.g. "50vh" for a taller chart on a single-test page. */
+    chartHeight?: string;
 }
 
 // -------------------------------------------------------------------------
@@ -98,7 +118,7 @@ export const TestDataView: React.FC<TestDataViewProps> = (props) => {
     const methodId  = props.methodId  ?? tis.selection.methodId;
     const runId     = props.runId     ?? tis.selection.runId;
     const schema    = props.schema    ?? (methodId ? (tis.schemas[methodId] as TestMethod) : undefined);
-    const { throttleMs = 100, cycleTableHeight = '400px' } = props;
+    const { throttleMs = 100, cycleTableHeight = '400px', chartHeight = '320px' } = props;
     const { invoke, subscribe, unsubscribe } = useContext(EventEmitterContext);
 
     const [meta, setMeta]       = useState<any>(null);
@@ -128,37 +148,42 @@ export const TestDataView: React.FC<TestDataViewProps> = (props) => {
     const [availableCycles, setAvailableCycles] = useState<number[]>([]);
     const [selectedCycle, setSelectedCycle]     = useState<number | null>(null);
 
-    // Scatter-capable views only — raw_trace lives in <TestRawDataView>.
-    const scatterViews = useMemo(() => {
+    // All views, any type, in declaration order. The dropdown lists
+    // every one; the chart area dispatches on `view.type` to render
+    // either a scatter or a raw_trace chart from the appropriate data.
+    const allViews = useMemo(() => {
         const out: { name: string; view: ChartView }[] = [];
         for (const [name, v] of Object.entries(schema?.views ?? {})) {
-            if ((v as ChartView).type === 'cycle_scatter') out.push({ name, view: v as ChartView });
+            out.push({ name, view: v as ChartView });
         }
         return out;
     }, [schema]);
 
     const [selectedView, setSelectedView] = useState<string | null>(
-        scatterViews.length > 0 ? scatterViews[0].name : null,
+        allViews.length > 0 ? allViews[0].name : null,
     );
 
     // Default to the first available view as soon as the schema loads.
     // The useState initializer above only runs on first mount, when
-    // scatterViews is typically still empty (schema fetch in flight).
+    // allViews is typically still empty (schema fetch in flight).
     // Without this effect, selectedView stays null and the chart
     // stays blank until the operator opens the dropdown — almost
     // nobody does, so they email asking why the chart is broken.
     //
     // Also handles the case where the schema changes and the
-    // currently-selected view is no longer in scatterViews — falls
-    // back to the new first view rather than rendering nothing.
+    // currently-selected view is no longer in allViews — falls back
+    // to the new first view rather than rendering nothing.
     useEffect(() => {
-        if (scatterViews.length === 0) return;
+        if (allViews.length === 0) return;
         const stillValid = selectedView !== null
-            && scatterViews.some(v => v.name === selectedView);
+            && allViews.some(v => v.name === selectedView);
         if (!stillValid) {
-            setSelectedView(scatterViews[0].name);
+            setSelectedView(allViews[0].name);
         }
-    }, [scatterViews, selectedView]);
+    }, [allViews, selectedView]);
+
+    const selectedViewDef = allViews.find(v => v.name === selectedView)?.view;
+    const isRawTraceView  = selectedViewDef?.type === 'raw_trace';
 
     // Pending updates coalesced by a throttle window — keeps React
     // re-renders at <= 1 / throttleMs even if cycles stream faster.
@@ -245,58 +270,102 @@ export const TestDataView: React.FC<TestDataViewProps> = (props) => {
     }, [projectId, methodId, runId, throttleMs]);
 
     // -----------------------------------------------------------------
-    // Chart data
+    // Raw-trace data fetch (lazy)
+    //
+    // Only ever pulls a blob when the active chart view is a raw_trace.
+    // Switching to a cycle_scatter view leaves the previously-loaded
+    // raw state alone (still in memory but unused), so flipping back
+    // and forth is instant after the first fetch.
+    // -----------------------------------------------------------------
+    const traceBlobName = schema?.raw_data?.blob_name ?? 'trace';
+    const traceFetch = useRawCycleData({
+        projectId, methodId, runId,
+        blobName: traceBlobName,
+        enabled: isRawTraceView,
+    });
+
+    // -----------------------------------------------------------------
+    // Chart data — dispatches on view.type so one panel handles both
+    // shapes. Returns null when the active view's input data isn't
+    // ready (e.g., raw blob still loading); the render block treats
+    // null as "show overlay instead of an empty chart."
     // -----------------------------------------------------------------
     const chartData = useMemo(() => {
-        if (!selectedView || scatterViews.length === 0) return null;
-        const view = scatterViews.find(v => v.name === selectedView)?.view;
-        if (!view) return null;
-
-        const xField = view.x.field!;
-        const asc = [...cycles].reverse();  // cycles state is newest-first; charts want oldest-first
-        const xs = asc.map(c => c[xField]);
-
-        const datasets = view.y.map((s, idx) => ({
-            label: s.label ?? s.field,
-            data: asc.map(c => c[s.field!]),
-            yAxisID: s.y_axis === 'right' ? 'y1' : 'y',
-            borderColor:  palette(idx),
-            backgroundColor: palette(idx),
-            tension: 0.1,
-            pointRadius: 2,
-        }));
-
-        return { labels: xs, datasets };
-    }, [cycles, selectedView, scatterViews]);
-
-    const selectedViewDef = scatterViews.find(v => v.name === selectedView)?.view;
+        if (!selectedViewDef) return null;
+        if (selectedViewDef.type === 'cycle_scatter') {
+            const xField = selectedViewDef.x.field;
+            if (!xField) return null;
+            const asc = [...cycles].reverse(); // state is newest-first; charts want oldest-first
+            const xs = asc.map(c => c[xField]);
+            const datasets = selectedViewDef.y.map((s, idx) => ({
+                label: s.label ?? s.field,
+                data: asc.map(c => c[s.field!]),
+                yAxisID: s.y_axis === 'right' ? 'y1' : 'y',
+                borderColor:  palette(idx),
+                backgroundColor: palette(idx),
+                tension: 0.1,
+                pointRadius: 2,
+            }));
+            return { labels: xs, datasets };
+        }
+        if (selectedViewDef.type === 'raw_trace') {
+            if (!traceFetch.raw) return null;
+            const xCol = selectedViewDef.x.column;
+            if (!xCol) return null;
+            const xs = traceFetch.raw[xCol] ?? [];
+            const datasets = selectedViewDef.y.map((s, idx) => ({
+                label: s.label ?? s.column,
+                data: (traceFetch.raw![s.column!] ?? []).map((y, i) => ({ x: xs[i], y })),
+                yAxisID: s.y_axis === 'right' ? 'y1' : 'y',
+                borderColor:  palette(idx),
+                backgroundColor: palette(idx),
+                pointRadius: 0,
+                borderWidth: 1.5,
+                showLine: true,
+            }));
+            return { datasets };
+        }
+        return null;
+    }, [selectedViewDef, cycles, traceFetch.raw]);
+
     const usesRightAxis = selectedViewDef?.y.some(s => s.y_axis === 'right') ?? false;
 
-    const chartOptions = useMemo(() => ({
-        responsive: true,
-        maintainAspectRatio: false,
-        scales: {
-            x:  { title: { display: !!selectedViewDef?.x.label, text: selectedViewDef?.x.label } },
-            y:  { position: 'left' as const,
-                  title: { display: true, text: leftAxisLabel(selectedViewDef) } },
-            ...(usesRightAxis ? {
-                y1: { position: 'right' as const,
-                      grid: { drawOnChartArea: false },
-                      title: { display: true, text: rightAxisLabel(selectedViewDef) } },
-            } : {}),
-        },
-        plugins: {
-            legend: { display: true },
-            zoom: {
-                pan:  { enabled: true, mode: 'xy' as const },
+    const chartOptions = useMemo(() => {
+        const isTrace = selectedViewDef?.type === 'raw_trace';
+        return {
+            responsive: true,
+            maintainAspectRatio: false,
+            // raw_trace datasets are pre-built `{x, y}` points so
+            // chart.js shouldn't try to parse them; cycle_scatter uses
+            // the `labels` + per-dataset `data: number[]` shape and
+            // needs default parsing on.
+            parsing: isTrace ? (false as const) : undefined,
+            scales: {
+                x: isTrace
+                    ? { type: 'linear' as const,
+                        title: { display: !!selectedViewDef?.x.label, text: selectedViewDef?.x.label } }
+                    : { title: { display: !!selectedViewDef?.x.label, text: selectedViewDef?.x.label } },
+                y: { position: 'left' as const,
+                     title: { display: true, text: leftAxisLabel(selectedViewDef) } },
+                ...(usesRightAxis ? {
+                    y1: { position: 'right' as const,
+                          grid: { drawOnChartArea: false },
+                          title: { display: true, text: rightAxisLabel(selectedViewDef) } },
+                } : {}),
+            },
+            plugins: {
+                legend: { display: true },
                 zoom: {
-                    wheel: { enabled: true },
-                    pinch: { enabled: true },
-                    mode:  'xy' as const,
+                    pan:  { enabled: true, mode: 'xy' as const },
+                    zoom: {
+                        wheel: { enabled: true },
+                        pinch: { enabled: true },
+                        mode:  'xy' as const,
+                    },
                 },
             },
-        },
-    }), [selectedViewDef, usesRightAxis]);
+        };
+    }, [selectedViewDef, usesRightAxis]);
 
     // -----------------------------------------------------------------
     // View Raw Data dialog: lazy-fetch raw + filtered blobs the first
@@ -439,17 +508,41 @@ export const TestDataView: React.FC<TestDataViewProps> = (props) => {
                 affordance instead of silence. The dropdown is disabled
                 in that case; the chart area renders empty. */}
             <div className="p-card" style={{ padding: '1rem' }}>
-                <div className="flex" style={{ gap: '1rem', alignItems: 'center', marginBottom: '0.5rem' }}>
+                <div className="flex" style={{ gap: '1rem', alignItems: 'center', marginBottom: '0.5rem', flexWrap: 'wrap' }}>
                     <Dropdown
                         value={selectedView}
-                        options={scatterViews.map(v => ({ label: v.view.title ?? v.name, value: v.name }))}
+                        options={allViews.map(v => ({ label: v.view.title ?? v.name, value: v.name }))}
                         onChange={(e) => setSelectedView(e.value)}
-                        placeholder={scatterViews.length === 0 ? 'No view defined' : 'Select a view'}
-                        disabled={scatterViews.length === 0}
+                        placeholder={allViews.length === 0 ? 'No view defined' : 'Select a view'}
+                        disabled={allViews.length === 0}
                     />
                     <h3 style={{ margin: 0 }}>{selectedViewDef?.title ?? ''}</h3>
+                    {/* Cycle picker — only visible for raw_trace views
+                        AND when more than one cycle exists. The hook
+                        handles the cycle-list discovery and "default
+                        to latest" behaviour so this stays declarative. */}
+                    {isRawTraceView && traceFetch.cycles.length > 1 && (
+                        <>
+                            <label htmlFor="chart-cycle-picker"
+                                   style={{ color: 'var(--text-secondary-color)' }}>Cycle:</label>
+                            <Dropdown
+                                inputId="chart-cycle-picker"
+                                value={traceFetch.selectedCycle}
+                                options={traceFetch.cycles.map(c => ({ label: `Cycle ${c}`, value: c }))}
+                                onChange={(e) => traceFetch.setSelectedCycle(Number(e.value))}
+                                style={{ minWidth: '8rem' }}
+                            />
+                            <span style={{ color: 'var(--text-secondary-color)' }}>
+                                of {traceFetch.cycles.length}
+                            </span>
+                        </>
+                    )}
                 </div>
-                <div style={{ height: 320 }}>
+                <div style={{ height: chartHeight, position: 'relative' }}>
+                    {isRawTraceView && traceFetch.loading &&
+                        <ChartOverlay>Loading raw data…</ChartOverlay>}
+                    {isRawTraceView && traceFetch.error &&
+                        <ChartOverlay>{traceFetch.error}</ChartOverlay>}
                     {chartData && <Line data={chartData} options={chartOptions} />}
                 </div>
             </div>
@@ -864,10 +957,25 @@ const CHART_COLORS = [
 ];
 const palette = (i: number) => CHART_COLORS[i % CHART_COLORS.length];
 
+// Loading / error wash drawn over the chart area while a raw_trace
+// fetch is in flight. Centered, pointer-events-none so the operator
+// can still interact with the dropdown above.
+const ChartOverlay: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+    <div style={{ position: 'absolute', inset: 0, display: 'flex',
+                  alignItems: 'center', justifyContent: 'center',
+                  color: 'var(--text-secondary-color)', pointerEvents: 'none' }}>
+        {children}
+    </div>
+);
+
+// Axis labels work for both scatter (s.field) and raw_trace (s.column)
+// series. Whichever the view declared, that's what's used as a label
+// fallback when the explicit `label` is absent.
+const seriesLabel = (s: ChartSeries) => s.label ?? s.field ?? s.column ?? '';
 const leftAxisLabel = (v?: ChartView) =>
-    v?.y.filter(s => s.y_axis !== 'right').map(s => s.label ?? s.field).join(' / ') ?? '';
+    v?.y.filter(s => s.y_axis !== 'right').map(seriesLabel).join(' / ') ?? '';
 const rightAxisLabel = (v?: ChartView) =>
-    v?.y.filter(s => s.y_axis === 'right').map(s => s.label ?? s.field).join(' / ') ?? '';
+    v?.y.filter(s => s.y_axis === 'right').map(seriesLabel).join(' / ') ?? '';
 
 const formatCell = (v: any, type: string): string => {
     if (v === null || v === undefined) return '';