@adcops/autocore-react 3.3.59 → 3.3.63

package/src/components/tis/ProjectSelector.tsx

@@ -0,0 +1,190 @@
+/*
+ * Copyright (C) 2026 Automated Design Corp. All Rights Reserved.
+ *
+ * <ProjectSelector> — standalone Project ID picker, designed to live
+ * on a "Project" tab alongside <ResultHistoryTable>. Was previously
+ * the first row of <TestSetupForm>; lifted out so a user can browse a
+ * project's history without being forced through the full test-setup
+ * UI.
+ *
+ * The component is intentionally narrow:
+ *
+ *   - One AutoComplete bound to `useTisSelection().projectId`.
+ *   - A `+` button that opens the Create-Project dialog.
+ *   - A `✏️` button that opens the Edit-Project-Information dialog.
+ *
+ * State (the existing projects list, the just-created set, the
+ * project_fields cache) all lives in <TisProvider>, so the form on
+ * the Test tab and this picker on the Project tab agree on what's
+ * known.
+ */
+
+import React, { useContext, useState, useMemo } from 'react';
+import { AutoComplete } from 'primereact/autocomplete';
+import type { AutoCompleteCompleteEvent } from 'primereact/autocomplete';
+import { Button } from 'primereact/button';
+import { EventEmitterContext } from '../../core/EventEmitterContext';
+import { useTis } from './TisProvider';
+import { ProjectInfoDialog } from './ProjectInfoDialog';
+
+// Project IDs follow the same character class as the server's
+// `tis.create_project` validator. Keep these in sync — see
+// `src/tis_servelet.rs::create_project`.
+const PROJECT_ID_RE = /^[A-Za-z0-9_-]+$/;
+const isValidProjectIdFormat = (id: string) => PROJECT_ID_RE.test(id);
+
+export interface ProjectSelectorProps {
+    /**
+     * Optional override of the method whose `project_fields` are shown
+     * in the create / edit dialog. By default the dialog uses the
+     * provider's selected method (which is what you want — the
+     * project's metadata schema is per-method, and the form on the
+     * Test tab is going to use that same method anyway). Passing this
+     * is only useful if you have a "view-only" Project tab in a
+     * read-only HMI and want to lock the dialog to a specific method.
+     */
+    methodIdOverride?: string;
+}
+
+export const ProjectSelector: React.FC<ProjectSelectorProps> = ({ methodIdOverride }) => {
+    const tis = useTis();
+    const { invoke: _invoke } = useContext(EventEmitterContext);
+    void _invoke; // EventEmitterContext is consumed via ProjectInfoDialog; no direct call here.
+
+    const projectId = tis.selection.projectId;
+    const dialogMethodId =
+        methodIdOverride
+        ?? tis.selection.methodId
+        ?? tis.defaultMethodId
+        ?? Object.keys(tis.schemas)[0]
+        ?? '';
+    const dialogSchema = dialogMethodId ? tis.schemas[dialogMethodId] : undefined;
+    const projectFieldsSchema = dialogSchema?.project_fields ?? [];
+
+    const [filteredProjects, setFilteredProjects] = useState<string[]>([]);
+    const [newOpen, setNewOpen] = useState(false);
+    const [editOpen, setEditOpen] = useState(false);
+
+    const projectExists = projectId.trim() !== '' && tis.projectKnown(projectId.trim());
+    const projectIdFormatValid = isValidProjectIdFormat(projectId.trim());
+    const canCreateProject =
+        projectId.trim() !== ''
+        && projectIdFormatValid
+        && !tis.projectKnown(projectId.trim());
+
+    const search = (event: AutoCompleteCompleteEvent) => {
+        const q = event.query.toLowerCase();
+        setFilteredProjects(tis.existingProjects.filter(p => p.toLowerCase().includes(q)));
+    };
+
+    const handleChange = (value: string | null | undefined) => {
+        const sanitized = (value || '').replace(/[^a-zA-Z0-9_-]/g, '');
+        tis.setSelection({ projectId: sanitized });
+    };
+
+    // -----------------------------------------------------------------
+    // Plumbing for the create + edit dialogs. We treat the "create"
+    // result as authoritative for project_fields; the dialog sends
+    // them straight to `tis.create_project` so the persisted file
+    // already has the values. Stash them in the provider's cache so
+    // the form on the Test tab folds them into stage_test without an
+    // extra read_project round trip.
+    // -----------------------------------------------------------------
+    const handleSubmitted = (pid: string, fields: Record<string, any>) => {
+        tis.markProjectJustCreated(pid);
+        tis.setProjectFields(pid, fields);
+        // Refresh the dropdown so the new ID appears in future
+        // suggestions, and surface the new project as the current
+        // selection — operator's intent on `+` is "set up this
+        // project and start using it."
+        void tis.refreshProjects();
+        if (tis.selection.projectId !== pid) tis.setSelection({ projectId: pid });
+    };
+
+    const headerStatus = useMemo(() => {
+        if (projectExists) return { color: 'var(--green-500)', icon: 'pi-check-circle' };
+        if (projectId.trim() === '') return { color: 'var(--text-secondary-color)', icon: 'pi-info-circle' };
+        return { color: 'var(--red-500)', icon: 'pi-exclamation-circle' };
+    }, [projectExists, projectId]);
+
+    const gridStyle: React.CSSProperties = {
+        padding: '1.25rem',
+        gridTemplateColumns: 'auto 1fr 1.75rem 1.75rem',
+    };
+
+    return (
+        <div className="ac-form-grid" style={gridStyle}>
+            <h3 className="ac-form-section" style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
+                Project
+                <span style={{ color: headerStatus.color }}>
+                    <i className={`pi ${headerStatus.icon}`} />
+                </span>
+            </h3>
+
+            <span className="ac-form-label">Project ID</span>
+            <div className="p-inputgroup" style={{ flex: 1 }}>
+                <AutoComplete
+                    value={projectId}
+                    suggestions={filteredProjects}
+                    completeMethod={search}
+                    onChange={(e) => handleChange(e.value)}
+                    dropdown
+                    placeholder="Select an existing Project ID, or type a new one and click +"
+                    className={projectId.trim() && !projectExists ? 'p-invalid' : ''}
+                    style={{ flex: 1 }}
+                />
+                <Button
+                    icon="pi pi-plus"
+                    type="button"
+                    onClick={() => setNewOpen(true)}
+                    disabled={!canCreateProject}
+                    tooltip={
+                        !projectId.trim() ? 'Type a project ID first' :
+                        !projectIdFormatValid ? 'Letters, digits, _ and - only' :
+                        tis.projectKnown(projectId.trim()) ? 'Project already exists' :
+                        `Create project "${projectId.trim()}"`
+                    }
+                    tooltipOptions={{ position: 'top' }}
+                />
+                <Button
+                    icon="pi pi-pencil"
+                    type="button"
+                    onClick={() => setEditOpen(true)}
+                    disabled={!projectExists}
+                    tooltip={projectExists
+                        ? `Edit information for "${projectId.trim()}"`
+                        : 'Select an existing project to edit'}
+                    tooltipOptions={{ position: 'top' }}
+                />
+            </div>
+            <span aria-hidden="true" />
+            <span style={{
+                color: projectExists ? 'var(--green-500)' :
+                       projectId.trim() === '' ? 'var(--text-secondary-color)' : 'var(--red-500)',
+                display: 'flex', alignItems: 'center',
+            }}>
+                <i className={projectExists ? 'pi pi-check' : projectId.trim() === '' ? 'pi pi-minus' : 'pi pi-times'} />
+            </span>
+
+            {/* Both dialogs are mounted unconditionally and gated by
+                their own `visible` prop. Cheap, and lets PrimeReact's
+                portal layering manage its own lifecycle. */}
+            <ProjectInfoDialog
+                visible={newOpen}
+                onHide={() => setNewOpen(false)}
+                mode="create"
+                projectId={projectId.trim()}
+                projectFields={projectFieldsSchema}
+                onSubmitted={handleSubmitted}
+            />
+            <ProjectInfoDialog
+                visible={editOpen}
+                onHide={() => setEditOpen(false)}
+                mode="edit"
+                projectId={projectId.trim()}
+                projectFields={projectFieldsSchema}
+                onSubmitted={handleSubmitted}
+            />
+        </div>
+    );
+};

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