@adcops/autocore-react 3.3.61 → 3.3.63

package/src/components/ams/SubLocationPicker.tsx

@@ -0,0 +1,146 @@
+/*
+ * <SubLocationPicker> — grid view for an asset's sub_locations
+ * (typically surface lanes). Each cell shows the sub_location's status
+ * and lets the operator click to mark it in_use / worn / available, or
+ * select it for the active test.
+ *
+ * Pure context-driven: reads selection.assetId from <AmsProvider>.
+ */
+
+import React, { useContext, useEffect, useState } from 'react';
+import { Button } from 'primereact/button';
+import { Dialog } from 'primereact/dialog';
+import { Dropdown } from 'primereact/dropdown';
+import { EventEmitterContext } from '../../core/EventEmitterContext';
+import { MessageType } from '../../hub/CommandMessage';
+import { useAms } from './AmsProvider';
+
+interface SubLocationItem {
+    id: string;
+    [k: string]: any;
+}
+
+interface SubLocations {
+    name: string;
+    items: SubLocationItem[];
+}
+
+export const SubLocationPicker: React.FC = () => {
+    const { selection } = useAms();
+    const { invoke } = useContext(EventEmitterContext);
+    const [subs, setSubs] = useState<SubLocations | null>(null);
+    const [editing, setEditing] = useState<{ id: string; status: string } | null>(null);
+
+    const refresh = async () => {
+        if (!selection.assetId) {
+            setSubs(null);
+            return;
+        }
+        try {
+            const resp: any = await invoke('ams.list_sub_locations' as any, MessageType.Request, {
+                asset_id: selection.assetId,
+            } as any);
+            if (resp?.success) {
+                const sl = resp.data?.sub_locations;
+                if (sl && Array.isArray(sl.items)) {
+                    setSubs(sl as SubLocations);
+                } else {
+                    setSubs(null);
+                }
+            }
+        } catch (e) {
+            console.error('[SubLocationPicker] list_sub_locations:', e);
+        }
+    };
+    useEffect(() => { refresh(); /* eslint-disable-next-line react-hooks/exhaustive-deps */ }, [selection.assetId]);
+
+    if (!selection.assetId) {
+        return null;
+    }
+    if (!subs) {
+        return null;
+    }
+
+    const onSave = async () => {
+        if (!editing) return;
+        try {
+            await invoke('ams.update_sub_location' as any, MessageType.Request, {
+                asset_id:    selection.assetId!,
+                location_id: editing.id,
+                partial:     { status: editing.status },
+            } as any);
+            setEditing(null);
+            await refresh();
+        } catch (e) {
+            console.error('[SubLocationPicker] update:', e);
+        }
+    };
+
+    const colorFor = (status: string): string => {
+        switch (status) {
+            case 'available': return '#22c55e';
+            case 'in_use':    return '#3b82f6';
+            case 'worn':      return '#f59e0b';
+            case 'retired':   return '#6b7280';
+            default:          return '#9ca3af';
+        }
+    };
+
+    return (
+        <div>
+            <h4 style={{ marginBottom: '0.5rem', textTransform: 'capitalize' }}>{subs.name}</h4>
+            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(7rem, 1fr))', gap: '0.5rem' }}>
+                {subs.items.map(item => {
+                    const status = String(item.status ?? '');
+                    return (
+                        <button
+                            key={item.id}
+                            onClick={() => setEditing({ id: item.id, status })}
+                            style={{
+                                padding: '0.75rem',
+                                border: `2px solid ${colorFor(status)}`,
+                                borderRadius: 6,
+                                background: 'transparent',
+                                color: 'inherit',
+                                cursor: 'pointer',
+                                textAlign: 'left',
+                            }}
+                        >
+                            <div style={{ fontWeight: 700 }}>{item.id}</div>
+                            <div style={{ fontSize: '0.875rem', color: colorFor(status) }}>{status}</div>
+                            {item.cycles_used !== undefined && (
+                                <div style={{ fontSize: '0.75rem', color: '#9ca3af' }}>
+                                    {Number(item.cycles_used).toLocaleString()} cycles
+                                </div>
+                            )}
+                        </button>
+                    );
+                })}
+            </div>
+
+            <Dialog
+                header={editing ? `Edit ${editing.id}` : 'Edit'}
+                visible={!!editing}
+                onHide={() => setEditing(null)}
+                style={{ width: '24rem' }}
+                footer={
+                    <>
+                        <Button label="Cancel" severity="secondary" onClick={() => setEditing(null)} />
+                        <Button label="Save" icon="pi pi-check" onClick={onSave} />
+                    </>
+                }
+            >
+                {editing && (
+                    <div style={{ display: 'grid', gridTemplateColumns: 'auto 1fr', gap: '0.5rem 1rem' }}>
+                        <label>Status</label>
+                        <Dropdown
+                            value={editing.status}
+                            options={['available', 'in_use', 'worn', 'retired'].map(v => ({ label: v, value: v }))}
+                            onChange={(e) => setEditing(s => s ? { ...s, status: e.value } : s)}
+                        />
+                    </div>
+                )}
+            </Dialog>
+        </div>
+    );
+};

package/src/components/ams/index.ts

@@ -0,0 +1,12 @@
+/*
+ * Public surface of the AMS component family. Drop <AmsProvider> at
+ * the top of your HMI; the rest are zero-prop and read from context.
+ *
+ * See autocore-server/doc/ams_product_plan.md for the full design.
+ */
+
+export { AmsProvider, useAms, useAmsSchemas, useAmsAlerts, useAmsAssets, useAmsSelection } from './AmsProvider';
+export { AssetRegistryTable } from './AssetRegistryTable';
+export { AssetDetailView } from './AssetDetailView';
+export { CalibrationEntryDialog } from './CalibrationEntryDialog';
+export { SubLocationPicker } from './SubLocationPicker';

package/src/components/index.ts

@@ -47,3 +47,30 @@ export type { TestDataViewProps, ChartAxis, ChartSeries, ChartView, RawDataShape
 
 export { TestRawDataView }     from './tis/TestRawDataView';
 export type { TestRawDataViewProps } from './tis/TestRawDataView';
+
+// -----------------------------------------------------------------------
+// Asset Management System — see autocore-server/doc/ams_product_plan.md
+// Drop <AmsProvider> at the top of your HMI; the rest are zero-prop.
+// -----------------------------------------------------------------------
+export {
+    AmsProvider,
+    useAms,
+    useAmsSchemas,
+    useAmsAlerts,
+    useAmsAssets,
+    useAmsSelection,
+} from './ams/AmsProvider';
+export type {
+    AmsProviderProps,
+    AmsContextValue,
+    AmsAlerts,
+    AmsAssetEntry,
+    AmsSelection,
+    AmsSchemaRegistry,
+    AmsTypeSchema,
+} from './ams/AmsProvider';
+export { AssetRegistryTable }    from './ams/AssetRegistryTable';
+export { AssetDetailView }       from './ams/AssetDetailView';
+export { CalibrationEntryDialog } from './ams/CalibrationEntryDialog';
+export type { CalibrationEntryDialogProps } from './ams/CalibrationEntryDialog';
+export { SubLocationPicker }     from './ams/SubLocationPicker';

package/src/components/tis/TestDataView.tsx

@@ -8,12 +8,13 @@
  * control program appends cycles.
  */
 
-import React, { useContext, useEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { Button } from 'primereact/button';
 import { Column } from 'primereact/column';
 import { DataTable } from 'primereact/datatable';
 import { Dialog } from 'primereact/dialog';
 import { Dropdown } from 'primereact/dropdown';
+import { TabView, TabPanel } from 'primereact/tabview';
 
 import { Chart as ChartJS,
     CategoryScale, LinearScale, PointElement, LineElement,
@@ -24,7 +25,6 @@ import { Line } from 'react-chartjs-2';
 
 import { EventEmitterContext } from '../../core/EventEmitterContext';
 import { MessageType } from '../../hub/CommandMessage';
-import { TestRawDataView } from './TestRawDataView';
 import { useTis } from './TisProvider';
 
 ChartJS.register(
@@ -53,9 +53,13 @@ export interface ChartView  {
     x: ChartAxis;
     y: ChartSeries[];
 }
+export interface RawColumn { source: string; }
 export interface RawDataShape {
     blob_name: string;
-    columns: string[];
+    /** Map of column name → declared source. Iteration order over the
+     *  keys defines the column order in the View Raw Data dialog's
+     *  tables and in the raw_trace charts. */
+    columns: { [col: string]: RawColumn };
     units?: { [col: string]: string };
 }
 export interface TestMethod {
@@ -101,6 +105,17 @@ export const TestDataView: React.FC<TestDataViewProps> = (props) => {
     const [cycles, setCycles]   = useState<any[]>([]);
     const [results, setResults] = useState<any>({});
     const [rawOpen, setRawOpen] = useState(false);
+    const [configOpen, setConfigOpen] = useState(false);
+
+    // Lazy-loaded blobs for the View Raw Data dialog. Fetched only
+    // when the dialog opens, and re-fetched if the operator pins a
+    // different run while the dialog is closed.
+    const [rawBlob, setRawBlob]           = useState<any | null>(null);
+    const [rawError, setRawError]         = useState<string | null>(null);
+    const [rawLoading, setRawLoading]     = useState(false);
+    const [filteredBlob, setFilteredBlob] = useState<any | null>(null);
+    const [filteredError, setFilteredError] = useState<string | null>(null);
+    const [filteredLoading, setFilteredLoading] = useState(false);
 
     // Scatter-capable views only — raw_trace lives in <TestRawDataView>.
     const scatterViews = useMemo(() => {
@@ -253,6 +268,78 @@ export const TestDataView: React.FC<TestDataViewProps> = (props) => {
         },
     }), [selectedViewDef, usesRightAxis]);
 
+    // -----------------------------------------------------------------
+    // View Raw Data dialog: lazy-fetch raw + filtered blobs the first
+    // time the dialog opens (and re-fetch if the operator switches
+    // runs while it's closed). The blob shape is `{ col: number[] }`,
+    // streamed in full — these are the same files the per-row CSV
+    // download in <ResultHistoryTable> pulls.
+    // -----------------------------------------------------------------
+    const blobName = schema?.raw_data?.blob_name ?? 'trace';
+    const fetchKeyRef = useRef<string>(''); // last (project, method, run, blob) we fetched
+
+    const loadBlobs = useCallback(async () => {
+        if (!projectId || !methodId || !runId) return;
+        const key = `${projectId}|${methodId}|${runId}|${blobName}`;
+        if (fetchKeyRef.current === key) return; // already loaded for this run
+        fetchKeyRef.current = key;
+
+        // Raw — must succeed for the dialog to be useful, but a
+        // missing file is logged and surfaced rather than aborted.
+        setRawLoading(true);
+        setRawError(null);
+        setRawBlob(null);
+        try {
+            const resp: any = await invoke(
+                'tis.read_raw' as any, MessageType.Request,
+                { project_id: projectId, method_id: methodId, run_id: runId, name: blobName } as any,
+            );
+            if (resp?.success) {
+                setRawBlob(resp.data ?? {});
+            } else {
+                setRawError(resp?.error_message ?? 'No raw data on disk for this run.');
+            }
+        } catch (e: any) {
+            setRawError(String(e?.message ?? e));
+        } finally {
+            setRawLoading(false);
+        }
+
+        // Filtered is optional. The 'no filtered data' case is the
+        // common one (only the post-processing pipeline writes it),
+        // and we render a friendly message rather than an error tone.
+        setFilteredLoading(true);
+        setFilteredError(null);
+        setFilteredBlob(null);
+        try {
+            const resp: any = await invoke(
+                'tis.read_filtered' as any, MessageType.Request,
+                { project_id: projectId, method_id: methodId, run_id: runId, name: blobName } as any,
+            );
+            if (resp?.success) {
+                setFilteredBlob(resp.data ?? {});
+            } else {
+                setFilteredError(resp?.error_message ?? 'No filtered data on disk for this run.');
+            }
+        } catch (e: any) {
+            setFilteredError(String(e?.message ?? e));
+        } finally {
+            setFilteredLoading(false);
+        }
+    }, [projectId, methodId, runId, blobName, invoke]);
+
+    // When the run changes, drop the cache key so the next dialog
+    // open refetches. Don't auto-fetch — that's wasteful if the
+    // operator never opens the dialog.
+    useEffect(() => {
+        fetchKeyRef.current = '';
+    }, [projectId, methodId, runId, blobName]);
+
+    const openRawDialog = () => {
+        setRawOpen(true);
+        void loadBlobs();
+    };
+
     // -----------------------------------------------------------------
     // Render
     // -----------------------------------------------------------------
@@ -269,7 +356,8 @@ export const TestDataView: React.FC<TestDataViewProps> = (props) => {
             <Header meta={meta} config={meta?.config} runId={runId}
                     projectId={projectId} methodId={methodId}
                     canViewRaw={!!schema.raw_data}
-                    onViewRaw={() => setRawOpen(true)} />
+                    onViewRaw={openRawDialog}
+                    onShowConfig={() => setConfigOpen(true)} />
 
             {scatterViews.length > 0 && (
                 <div className="p-card" style={{ padding: '1rem' }}>
@@ -310,22 +398,62 @@ export const TestDataView: React.FC<TestDataViewProps> = (props) => {
                 <ResultsGrid schema={schema.results_fields} values={results} />
             </div>
 
+            {/*
+             * View Raw Data dialog — tabular listing of the raw and
+             * filtered columnar blobs. Charts of cycle data are
+             * already shown in the main view above; this dialog is
+             * specifically the per-sample numerical view that the
+             * operator needs for spot-checking, copy/paste, or
+             * confirming a post-processing pipeline ran.
+             */}
             {schema.raw_data && (
                 <Dialog
                     visible={rawOpen}
                     onHide={() => setRawOpen(false)}
-                    header="Raw Data"
+                    header={`Run Data — ${runId}`}
                     style={{ width: '90vw', height: '80vh' }}
                     maximizable
                 >
-                    <TestRawDataView
-                        projectId={projectId}
-                        methodId={methodId}
-                        runId={runId}
-                        schema={schema}
-                    />
+                    <TabView style={{ height: '100%' }}>
+                        <TabPanel header="Raw Data">
+                            <DataBlobTable
+                                blob={rawBlob}
+                                loading={rawLoading}
+                                error={rawError}
+                                rawData={schema.raw_data}
+                            />
+                        </TabPanel>
+                        <TabPanel header="Filtered Data">
+                            <DataBlobTable
+                                blob={filteredBlob}
+                                loading={filteredLoading}
+                                error={filteredError}
+                                rawData={schema.raw_data}
+                                emptyMessage="Filtered data is written by post-processing — none on disk for this run yet."
+                            />
+                        </TabPanel>
+                    </TabView>
                 </Dialog>
             )}
+
+            {/*
+             * Test Configuration dialog — surfaces the staged config
+             * map (everything the operator typed into the Setup tab,
+             * plus any project_fields the manager attached). Was
+             * previously inline under the header; moved into a dialog
+             * because it's reference material the operator only
+             * occasionally needs to consult, and inline space is at
+             * a premium on the run-data view.
+             */}
+            <Dialog
+                visible={configOpen}
+                onHide={() => setConfigOpen(false)}
+                header="Test Configuration"
+                style={{ width: 'min(640px, 90vw)' }}
+                modal
+            >
+                <ConfigList config={meta?.config} />
+            </Dialog>
         </div>
     );
 };
@@ -338,7 +466,8 @@ const Header: React.FC<{
     meta: any; config: any; runId: string;
     projectId: string; methodId: string;
     canViewRaw: boolean; onViewRaw: () => void;
-}> = ({ meta, config, runId, projectId, methodId, canViewRaw, onViewRaw }) => {
+    onShowConfig: () => void;
+}> = ({ meta, config, runId, projectId, methodId, canViewRaw, onViewRaw, onShowConfig }) => {
     // Sample ID is the field operators look for first; pull it from the
     // top-level test.json field, falling back to the legacy nested location.
     const sampleId =
@@ -346,39 +475,203 @@ const Header: React.FC<{
         (typeof meta?.config?.sample_id === 'string' && meta.config.sample_id) ||
         '';
 
-    // The body of the user-facing config grid should not surface the
-    // sample_id again — it's already in the header.
-    const configWithoutSampleId = config && typeof config === 'object'
-        ? Object.fromEntries(Object.entries(config).filter(([k]) => k !== 'sample_id'))
-        : {};
+    // Config detail moved into its own dialog (operator only occasionally
+    // needs to consult it). The Info button only renders when there's
+    // something to show — keeps the header tight on runs whose config
+    // is empty.
+    const hasConfigDetail = config && typeof config === 'object'
+        && Object.entries(config).some(([k]) => k !== 'sample_id');
 
     return (
     <div className="p-card" style={{ padding: '1rem' }}>
         <div className="flex" style={{ justifyContent: 'space-between', alignItems: 'flex-start', gap: '1rem' }}>
             <div>
-                <h2 style={{ margin: 0 }}>{sampleId || runId}</h2>
+                <h2 style={{ margin: 0, display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+                    {sampleId || runId}
+                    {hasConfigDetail && (
+                        <Button
+                            icon="pi pi-info-circle"
+                            type="button"
+                            rounded
+                            text
+                            onClick={onShowConfig}
+                            tooltip="Show test configuration"
+                            tooltipOptions={{ position: 'top' }}
+                            style={{ width: '2rem', height: '2rem', padding: 0 }}
+                            aria-label="Show test configuration"
+                        />
+                    )}
+                </h2>
                 <div style={{ color: 'var(--text-secondary-color)', fontSize: '0.85em' }}>
                     project: {projectId} · method: {methodId} · run: {runId}
                     {meta?.start_time && <> · started: {new Date(meta.start_time).toLocaleString()}</>}
                 </div>
             </div>
             {canViewRaw && (
-                <Button icon="pi pi-chart-line" label="View Raw Data" onClick={onViewRaw} outlined />
+                <Button icon="pi pi-table" label="View Raw Data" onClick={onViewRaw} outlined />
             )}
         </div>
-        {Object.keys(configWithoutSampleId).length > 0 && (
-            <div style={{ marginTop: '0.75rem', display: 'grid',
-                          gridTemplateColumns: 'repeat(auto-fill, minmax(220px, 1fr))',
-                          gap: '0.25rem 1rem', fontSize: '0.9em' }}>
-                {Object.entries(configWithoutSampleId).map(([k, v]) => (
-                    <div key={k}><strong>{k}:</strong> {formatCell(v, 'string')}</div>
-                ))}
-            </div>
-        )}
     </div>
     );
 };
 
+// -------------------------------------------------------------------------
+// ConfigList — flat key/value listing for the Test Configuration dialog.
+// Same data the inline grid used to show, just inside its own modal.
+// -------------------------------------------------------------------------
+const ConfigList: React.FC<{ config: any }> = ({ config }) => {
+    const entries = config && typeof config === 'object'
+        ? Object.entries(config).filter(([k]) => k !== 'sample_id')
+        : [];
+    if (entries.length === 0) {
+        return (
+            <div style={{ color: 'var(--text-secondary-color)' }}>
+                No configuration recorded for this run.
+            </div>
+        );
+    }
+    return (
+        <div style={{ display: 'grid',
+                      gridTemplateColumns: 'auto 1fr',
+                      gap: '0.5rem 1rem',
+                      fontSize: '0.95em' }}>
+            {entries.map(([k, v]) => (
+                <React.Fragment key={k}>
+                    <div style={{ color: 'var(--text-secondary-color)' }}>{k}</div>
+                    <div>{formatCell(v, 'string')}</div>
+                </React.Fragment>
+            ))}
+        </div>
+    );
+};
+
+// -------------------------------------------------------------------------
+// DataBlobTable — tabular display of a columnar JSON blob
+// (`{ col_name: number[] }`). Used by the View Raw Data dialog for both
+// the Raw Data and Filtered Data tabs. Schema's `raw_data.columns` is
+// consulted for column ordering and unit labels; columns present in the
+// blob but not in the schema are still rendered (degrades gracefully if
+// the blob carries extra channels). Rendered with virtual scrolling so
+// 5000-sample captures don't blow up the DOM.
+// -------------------------------------------------------------------------
+const DataBlobTable: React.FC<{
+    blob: any | null;
+    loading: boolean;
+    error: string | null;
+    rawData: RawDataShape;
+    emptyMessage?: string;
+}> = ({ blob, loading, error, rawData, emptyMessage }) => {
+    if (loading) {
+        return (
+            <div style={{ padding: '1rem', color: 'var(--text-secondary-color)' }}>
+                Loading…
+            </div>
+        );
+    }
+    if (error) {
+        return (
+            <div style={{ padding: '1rem', color: 'var(--text-secondary-color)' }}>
+                {emptyMessage ?? error}
+            </div>
+        );
+    }
+    if (!blob || typeof blob !== 'object') {
+        return (
+            <div style={{ padding: '1rem', color: 'var(--text-secondary-color)' }}>
+                No data.
+            </div>
+        );
+    }
+
+    // Schema-declared columns first, in declaration order; then any
+    // extras present in the blob that the schema didn't mention.
+    // Filter to columns that are actually array-valued in the blob —
+    // scalar fields (e.g., a top-level "checksum") shouldn't get a
+    // table column.
+    const schemaCols = Object.keys(rawData.columns ?? {});
+    const blobArrayCols = Object.keys(blob).filter(k => Array.isArray(blob[k]));
+    const orderedCols: string[] = [];
+    for (const c of schemaCols) {
+        if (Array.isArray(blob[c])) orderedCols.push(c);
+    }
+    for (const c of blobArrayCols) {
+        if (!orderedCols.includes(c)) orderedCols.push(c);
+    }
+
+    if (orderedCols.length === 0) {
+        return (
+            <div style={{ padding: '1rem', color: 'var(--text-secondary-color)' }}>
+                {emptyMessage ?? 'No columnar data in this blob.'}
+            </div>
+        );
+    }
+
+    // Row count is the shortest array — keeps the table rectangular
+    // even when columns disagree (rare, but the post-processing
+    // pipeline could produce truncated columns).
+    const nRows = orderedCols.reduce(
+        (min, c) => Math.min(min, blob[c].length),
+        Number.POSITIVE_INFINITY,
+    );
+    const finiteRows = Number.isFinite(nRows) ? (nRows as number) : 0;
+
+    // Materialise rows on-demand. With virtual scrolling, only the
+    // visible window is in the DOM, but PrimeReact's virtualScroller
+    // wants an array — building it lazily with `Array.from` is
+    // O(n_visible) per render.
+    const rows = Array.from({ length: finiteRows }, (_, i) => {
+        const row: Record<string, any> = { __i: i };
+        for (const c of orderedCols) row[c] = blob[c][i];
+        return row;
+    });
+
+    const headerFor = (col: string) => {
+        const u = rawData.units?.[col];
+        return u ? `${col} [${u}]` : col;
+    };
+
+    return (
+        <DataTable
+            value={rows}
+            scrollable
+            scrollHeight="60vh"
+            virtualScrollerOptions={{ itemSize: 32 }}
+            emptyMessage={emptyMessage ?? 'No data.'}
+            size="small"
+            stripedRows
+        >
+            <Column
+                field="__i"
+                header="#"
+                style={{ width: '5rem', textAlign: 'right' }}
+                bodyStyle={{ fontVariantNumeric: 'tabular-nums', textAlign: 'right' }}
+            />
+            {orderedCols.map(c => (
+                <Column
+                    key={c}
+                    field={c}
+                    header={headerFor(c)}
+                    style={{ minWidth: '8rem' }}
+                    bodyStyle={{ fontVariantNumeric: 'tabular-nums', textAlign: 'right' }}
+                    body={(row) => formatNumeric(row[c])}
+                />
+            ))}
+        </DataTable>
+    );
+};
+
+const formatNumeric = (v: any): string => {
+    if (v === null || v === undefined) return '';
+    if (typeof v === 'number') {
+        if (!Number.isFinite(v)) return String(v);
+        // 6 sig figs strikes a balance: enough precision for most
+        // engineering signals, narrow enough that columns don't grow
+        // wildly for nice round numbers like 0.001.
+        return Number.parseFloat(v.toPrecision(6)).toString();
+    }
+    return String(v);
+};
+
 const ResultsGrid: React.FC<{ schema: TestFieldDef[]; values: any }> = ({ schema, values }) => {
     if (!values || Object.keys(values).length === 0) {
         return <div style={{ color: 'var(--text-secondary-color)' }}>No results yet.</div>;