@adcops/autocore-react 3.3.87 → 3.3.90

package/src/components/ams/AssetRegistryTable.tsx

@@ -15,6 +15,7 @@ import { Dialog } from 'primereact/dialog';
 import { EventEmitterContext } from '../../core/EventEmitterContext';
 import { MessageType } from '../../hub/CommandMessage';
 import { useAms, type AmsAssetEntry, type AmsRole } from './AmsProvider';
+import './AssetRegistryTable.css';
 
 // Sentinel value for the "Other..." dropdown option, which lets the
 // operator type a free-form role for the rare case (custom builds,
@@ -111,6 +112,32 @@ function subLocationsFor(schemas: any, assetType: string): SubLocationsSchema |
     return sl as SubLocationsSchema;
 }
 
+/** Build a fresh `customFields` seed from a role's `defaults` map,
+ *  narrowed to fields the asset_type schema actually declares. Server
+ *  validation rejects unknown default keys at project load, so in
+ *  normal operation every key will match a declared field; the
+ *  narrowing here just protects against schema/defaults drift while a
+ *  project is being edited.
+ *
+ *  Returns string-typed values because the dialog's inputs are text-
+ *  based; the existing `coerceField` helper converts back on submit.
+ *  Empty / missing defaults are skipped (rather than emitting `""`) so
+ *  required-field gating still fires for fields the role didn't seed. */
+function seedCustomFromRoleDefaults(
+    role: AmsRole | undefined,
+    fields: SchemaField[],
+): Record<string, string> {
+    const out: Record<string, string> = {};
+    if (!role || !role.defaults) return out;
+    const declared = new Set(fields.map(f => f.name));
+    for (const [k, v] of Object.entries(role.defaults)) {
+        if (!declared.has(k)) continue;
+        if (v === undefined || v === null) continue;
+        out[k] = String(v);
+    }
+    return out;
+}
+
 /** Coerce a per-cell string from the matrix input back to its declared
  *  type. Numeric strings → JSON numbers; booleans → bool; everything
  *  else stays as a string. Matches the top-level fields coercion. */
@@ -142,6 +169,8 @@ export const AssetRegistryTable: React.FC = () => {
     // when an operator clicks Register on one of its rows. Catch it
     // here and open the Add dialog pre-populated with the asset_type
     // and role — the operator just fills in the nameplate values.
+    // If the matching role declares `defaults`, those seed the
+    // nameplate inputs too (same path as onRoleChange).
     useEffect(() => {
         const handler = (e: Event) => {
             const detail = (e as CustomEvent).detail as
@@ -149,17 +178,20 @@ export const AssetRegistryTable: React.FC = () => {
             const assetType = detail?.assetType ?? '';
             const location  = detail?.location ?? '';
             if (!assetType) return;
+            const role = (roles[assetType] ?? []).find(r => r.location === location);
+            const declaredFields = fieldsFor(schemas, assetType);
             setAddState({
                 ...EMPTY_ADD,
                 open: true,
                 assetType,
                 roleSelection: location,
                 location,
+                customFields: seedCustomFromRoleDefaults(role, declaredFields),
             });
         };
         window.addEventListener('ams:prefill-add', handler);
         return () => window.removeEventListener('ams:prefill-add', handler);
-    }, []);
+    }, [roles, schemas]);
 
     const typeOptions = useMemo(
         () => Object.keys(schemas).map(k => ({ label: schemas[k]?.label ?? k, value: k })),
@@ -285,15 +317,20 @@ export const AssetRegistryTable: React.FC = () => {
      *  hardware), or leave it empty so they make an explicit choice
      *  when there are multiple. Hide the field entirely when none.
      *  Also resets the nameplate-field map — fields are type-specific
-     *  and the previous type's inputs would not be relevant. */
+     *  and the previous type's inputs would not be relevant. When the
+     *  auto-selected role declares `defaults`, seed those into the
+     *  nameplate inputs so the operator only has to confirm or edit. */
     const onAssetTypeChange = (newType: string) => {
         const list = roles[newType] ?? [];
-        const base = list.length === 1
-            ? { roleSelection: list[0].location, location: list[0].location }
+        const autoRole = list.length === 1 ? list[0] : undefined;
+        const base = autoRole
+            ? { roleSelection: autoRole.location, location: autoRole.location }
             : { roleSelection: '', location: '' };
+        const newFields = fieldsFor(schemas, newType);
         setAddState(s => ({
             ...s, assetType: newType, ...base,
-            customFields: {}, subLocationFields: {},
+            customFields: seedCustomFromRoleDefaults(autoRole, newFields),
+            subLocationFields: {},
         }));
     };
 
@@ -315,13 +352,22 @@ export const AssetRegistryTable: React.FC = () => {
     );
 
     /** Role dropdown change handler. ROLE_OTHER puts us into free-form
-     *  mode where the operator types into a text field. */
+     *  mode where the operator types into a text field. When picking a
+     *  known role with declared `defaults`, seed the nameplate inputs
+     *  from those values so the operator only has to confirm or edit.
+     *  Switching role is treated as an explicit reseed; values typed
+     *  into the previous role's inputs are replaced — switching role
+     *  is a discrete intent, not a continuous edit. */
     const onRoleChange = (value: string) => {
         if (value === ROLE_OTHER) {
             setAddState(s => ({ ...s, roleSelection: ROLE_OTHER, location: '' }));
-        } else {
-            setAddState(s => ({ ...s, roleSelection: value, location: value }));
+            return;
         }
+        const role = rolesForType.find(r => r.location === value);
+        setAddState(s => ({
+            ...s, roleSelection: value, location: value,
+            customFields: seedCustomFromRoleDefaults(role, fieldsForType),
+        }));
     };
 
     /** Disable Create until the operator has picked a role (or supplied
@@ -388,8 +434,11 @@ export const AssetRegistryTable: React.FC = () => {
                         ? 'AMS not enabled in this project (no asset_types declared).'
                         : 'No assets registered yet.'
                 }
-                size="small"
                 stripedRows
+                /* Extra vertical padding on body cells (see the CSS) enlarges
+                   the touch target for each row — operators on the shop-floor
+                   touchscreen were mis-tapping the dense default rows. */
+                className="ams-asset-table"
             >
                 <Column field="asset_id"   header="Asset ID" />
                 <Column field="asset_type" header="Type"
@@ -436,9 +485,16 @@ export const AssetRegistryTable: React.FC = () => {
                         onChange={(e) => onAssetTypeChange(e.value)}
                         placeholder="Choose asset type"
                     />
-                    <label>Serial</label>
-                    <InputText value={addState.serial}
-                        onChange={(e) => setAddState(s => ({ ...s, serial: e.target.value }))} />
+                    {/* Serial: hidden until a type is chosen. Showing it
+                        before the type led operators to fill it in for a
+                        not-yet-selected asset, which read as confusing. */}
+                    {addState.assetType && (
+                        <>
+                            <label>Serial</label>
+                            <InputText value={addState.serial}
+                                onChange={(e) => setAddState(s => ({ ...s, serial: e.target.value }))} />
+                        </>
+                    )}
 
                     {/* Role field: only shown when this asset_type has at
                         least one declared role in project.json. Asset

package/src/components/forms/FormRow.tsx

@@ -20,15 +20,15 @@ export interface FormRowProps {
 
 export const FormRow: React.FC<FormRowProps> = ({ label, required, hint, error, htmlFor, children }) => {
     return (
-        <div className={`ac-form-row${error ? ' ac-form-row--error' : ''}`}>
-            <label className="ac-form-row__label" htmlFor={htmlFor}>
+        <div className={`ac-formrow${error ? ' ac-formrow--error' : ''}`}>
+            <label className="ac-formrow__label" htmlFor={htmlFor}>
                 {label}
-                {required && <span className="ac-form-row__required" aria-hidden> *</span>}
-                {hint && <small className="ac-form-row__hint">{hint}</small>}
+                {required && <span className="ac-formrow__required" aria-hidden> *</span>}
+                {hint && <small className="ac-formrow__hint">{hint}</small>}
             </label>
-            <div className="ac-form-row__field">
+            <div className="ac-formrow__field">
                 {children}
-                {error && <small className="ac-form-row__error">{error}</small>}
+                {error && <small className="ac-formrow__error">{error}</small>}
             </div>
         </div>
     );

package/src/components/forms/FormSection.tsx

@@ -19,17 +19,17 @@ export interface FormSectionProps {
 
 export const FormSection: React.FC<FormSectionProps> = ({ title, description, actions, children }) => {
     return (
-        <section className="ac-form-section">
+        <section className="ac-formsection">
             {(title || actions) && (
-                <header className="ac-form-section__header">
+                <header className="ac-formsection__header">
                     <div>
-                        {title && <h3 className="ac-form-section__title">{title}</h3>}
-                        {description && <small className="ac-form-section__desc">{description}</small>}
+                        {title && <h3 className="ac-formsection__title">{title}</h3>}
+                        {description && <small className="ac-formsection__desc">{description}</small>}
                     </div>
-                    {actions && <div className="ac-form-section__actions">{actions}</div>}
+                    {actions && <div className="ac-formsection__actions">{actions}</div>}
                 </header>
             )}
-            <div className="ac-form-section__body">
+            <div className="ac-formsection__body">
                 {children}
             </div>
         </section>

package/src/components/forms/forms.css

@@ -1,11 +1,11 @@
-.ac-form-section {
+.ac-formsection {
     border: 1px solid var(--surface-d, #e2e8f0);
     border-radius: 6px;
     background: var(--surface-card, #fff);
     margin-bottom: 1rem;
 }
 
-.ac-form-section__header {
+.ac-formsection__header {
     display: flex;
     align-items: flex-start;
     justify-content: space-between;
@@ -16,74 +16,74 @@
     border-top-right-radius: 6px;
 }
 
-.ac-form-section__title {
+.ac-formsection__title {
     margin: 0;
     font-size: 0.95rem;
     font-weight: 600;
 }
 
-.ac-form-section__desc {
+.ac-formsection__desc {
     color: var(--text-color-secondary, #64748b);
     display: block;
     margin-top: 0.15rem;
 }
 
-.ac-form-section__actions {
+.ac-formsection__actions {
     display: flex;
     gap: 0.5rem;
 }
 
-.ac-form-section__body {
+.ac-formsection__body {
     padding: 0.75rem 1rem;
     display: flex;
     flex-direction: column;
     gap: 0.5rem;
 }
 
-.ac-form-row {
+.ac-formrow {
     display: grid;
     grid-template-columns: minmax(8rem, 14rem) 1fr;
     gap: 0.5rem 1rem;
     align-items: start;
 }
 
-.ac-form-row--error .ac-form-row__field input,
-.ac-form-row--error .ac-form-row__field .p-inputtext {
+.ac-formrow--error .ac-formrow__field input,
+.ac-formrow--error .ac-formrow__field .p-inputtext {
     border-color: #dc2626;
 }
 
-.ac-form-row__label {
+.ac-formrow__label {
     font-weight: 500;
     padding-top: 0.4rem;
     display: flex;
     flex-direction: column;
 }
 
-.ac-form-row__required {
+.ac-formrow__required {
     color: #dc2626;
 }
 
-.ac-form-row__hint {
+.ac-formrow__hint {
     color: var(--text-color-secondary, #64748b);
     font-weight: 400;
     font-size: 0.75rem;
     margin-top: 0.15rem;
 }
 
-.ac-form-row__field {
+.ac-formrow__field {
     display: flex;
     flex-direction: column;
     gap: 0.25rem;
 }
 
-.ac-form-row__field > input,
-.ac-form-row__field > .p-inputtext,
-.ac-form-row__field > .p-dropdown,
-.ac-form-row__field > .p-inputtextarea {
+.ac-formrow__field > input,
+.ac-formrow__field > .p-inputtext,
+.ac-formrow__field > .p-dropdown,
+.ac-formrow__field > .p-inputtextarea {
     width: 100%;
 }
 
-.ac-form-row__error {
+.ac-formrow__error {
     color: #dc2626;
     font-size: 0.75rem;
 }

package/src/components/tis/ConfigurationDialog.tsx

@@ -0,0 +1,128 @@
+/*
+ * Copyright (C) 2026 Automated Design Corp. All Rights Reserved.
+ *
+ * <ConfigurationDialog> — picker UI for choosing a method's named
+ * configuration (see `TestMethod.configurations`). Mirrors
+ * <TestMethodDialog>: a dropdown of the configurations declared on the
+ * active method plus the long-form description for whichever entry is
+ * highlighted. OK applies the choice via the supplied callback (which
+ * writes the configuration's `defaults` into the config_fields); Cancel
+ * discards.
+ *
+ * Only mounted by <TestSetupForm> when the active method declares one or
+ * more configurations, so the empty case is informational only.
+ */
+
+import React, { useEffect, useMemo, useState } from 'react';
+import { Button } from 'primereact/button';
+import { Dialog } from 'primereact/dialog';
+import { Dropdown } from 'primereact/dropdown';
+import type { TestConfiguration } from './TestSetupForm';
+
+/** Display name for one configuration: prefer `label`, fall back to `name`. */
+export const configLabelOf = (cfg: TestConfiguration | undefined): string =>
+    (cfg?.label && cfg.label.length > 0) ? cfg.label : (cfg?.name ?? '');
+
+export interface ConfigurationDialogProps {
+    visible: boolean;
+    onHide: () => void;
+    /** Configurations declared on the active method. */
+    configurations: TestConfiguration[];
+    /** `name` of the configuration currently applied on the form. The
+     *  dropdown opens pointing at this so the dialog reflects state. */
+    currentConfigName: string;
+    /**
+     * Called with the chosen configuration `name` when the operator
+     * clicks OK. Cancel does not fire this. The parent applies the
+     * configuration's defaults to the fields.
+     */
+    onSelected: (configName: string) => void;
+}
+
+export const ConfigurationDialog: React.FC<ConfigurationDialogProps> = ({
+    visible, onHide, configurations, currentConfigName, onSelected,
+}) => {
+    // Local "draft" selection — the dropdown writes here; OK applies it,
+    // so a Cancel really cancels (matches <TestMethodDialog>).
+    const [draftName, setDraftName] = useState<string>(currentConfigName);
+
+    useEffect(() => {
+        if (visible) setDraftName(currentConfigName);
+    }, [visible, currentConfigName]);
+
+    const options = useMemo(
+        () => configurations.map(cfg => ({ label: configLabelOf(cfg), value: cfg.name })),
+        [configurations],
+    );
+
+    const draftCfg = configurations.find(c => c.name === draftName);
+    const draftDescription =
+        (draftCfg?.description && draftCfg.description.length > 0)
+            ? draftCfg.description
+            : null;
+
+    const handleOk = () => {
+        if (draftName && draftName !== currentConfigName) {
+            onSelected(draftName);
+        }
+        onHide();
+    };
+
+    const footer = (
+        <div style={{ display: 'flex', justifyContent: 'flex-end', gap: '0.5rem' }}>
+            <Button label="Cancel" icon="pi pi-times" onClick={onHide} text />
+            <Button label="OK" icon="pi pi-check" onClick={handleOk} disabled={!draftName} />
+        </div>
+    );
+
+    return (
+        <Dialog
+            header="Select Configuration"
+            visible={visible}
+            onHide={onHide}
+            footer={footer}
+            modal
+            style={{ width: 'min(560px, 90vw)' }}
+        >
+            {options.length === 0 ? (
+                <p style={{ color: 'var(--text-secondary-color)' }}>
+                    This test method declares no configurations.
+                </p>
+            ) : (
+                <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+                    <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
+                        <label htmlFor="acConfigurationDropdown" style={{ flexShrink: 0 }}>
+                            Configuration:
+                        </label>
+                        <Dropdown
+                            inputId="acConfigurationDropdown"
+                            value={draftName}
+                            options={options}
+                            onChange={(e) => setDraftName(e.value)}
+                            placeholder="Select a configuration"
+                            style={{ flex: 1 }}
+                        />
+                    </div>
+                    {/* Stable-height description region, matching
+                        <TestMethodDialog>: render a muted placeholder
+                        rather than collapsing the dialog. */}
+                    <div
+                        style={{
+                            padding: '0.75rem 1rem',
+                            background: 'var(--surface-100)',
+                            borderRadius: '6px',
+                            minHeight: '4.5rem',
+                            color: draftDescription
+                                ? 'var(--text-color)'
+                                : 'var(--text-secondary-color)',
+                            fontStyle: draftDescription ? 'normal' : 'italic',
+                            whiteSpace: 'pre-wrap',
+                        }}
+                    >
+                        {draftDescription ?? 'No description provided for this configuration.'}
+                    </div>
+                </div>
+            )}
+        </Dialog>
+    );
+};

package/src/components/tis/ResultHistoryTable.tsx

@@ -300,7 +300,7 @@ export const ResultHistoryTable: React.FC<ResultHistoryTableProps> = (props) =>
                             <div style={{ display: 'flex', gap: '0.4rem' }}>
                                 <Button
                                     icon={isDataBusy ? 'pi pi-spin pi-spinner' : 'pi pi-download'}
-                                    label="Data"
+                                    label="Raw"
                                     size="small"
                                     outlined
                                     disabled={anyBusy}
@@ -310,7 +310,7 @@ export const ResultHistoryTable: React.FC<ResultHistoryTableProps> = (props) =>
                                 />
                                 <Button
                                     icon={isReportBusy ? 'pi pi-spin pi-spinner' : 'pi pi-file'}
-                                    label="Report"
+                                    label="Results"
                                     size="small"
                                     outlined
                                     disabled={anyBusy}

package/src/components/tis/TestDataView.tsx

@@ -37,6 +37,7 @@ import { Chart as ChartJS,
     Title, Tooltip, Legend,
 } from 'chart.js';
 import zoomPlugin from 'chartjs-plugin-zoom';
+import annotationPlugin from 'chartjs-plugin-annotation';
 import { Line } from 'react-chartjs-2';
 
 import { EventEmitterContext } from '../../core/EventEmitterContext';
@@ -46,7 +47,7 @@ import { useRawCycleData } from './useRawCycleData';
 
 ChartJS.register(
     CategoryScale, LinearScale, PointElement, LineElement,
-    Title, Tooltip, Legend, zoomPlugin,
+    Title, Tooltip, Legend, zoomPlugin, annotationPlugin,
 );
 
 // -------------------------------------------------------------------------
@@ -69,11 +70,38 @@ export interface TestFieldDef {
 
 export interface ChartAxis  { field?: string; column?: string; label?: string; }
 export interface ChartSeries { field?: string; column?: string; label?: string; y_axis?: 'left' | 'right'; }
+/**
+ * A shaded X-range band drawn over the plot (rendered as a
+ * chartjs-plugin-annotation `box` annotation spanning the full Y height).
+ * `xMin`/`xMax` are in the same units as the view's x data — for a
+ * `raw_trace` that's the x column's value, for a `cycle_scatter` it's the
+ * category index. Used to indicate a processed / region-of-interest span.
+ */
+export interface ChartRegion {
+    /** Start of the band on the X axis. */
+    xMin: number;
+    /** End of the band on the X axis. */
+    xMax: number;
+    /** Optional caption drawn at the top-center of the band. */
+    label?: string;
+    /** Fill color (any CSS color). Default: translucent theme accent. */
+    color?: string;
+    /** Optional band-edge border color. Default: no border. */
+    borderColor?: string;
+}
 export interface ChartView  {
     title?: string;
     type: 'cycle_scatter' | 'raw_trace';
     x: ChartAxis;
     y: ChartSeries[];
+    /**
+     * Optional shaded X-range bands drawn over the plot. Declared per view
+     * in project.json (static). The dynamic case — bands computed at
+     * runtime from processed/results data — would feed the same
+     * `buildRegionAnnotations()` helper via a future prop; see its seam in
+     * the `chartOptions` memo.
+     */
+    regions?: ChartRegion[];
 }
 export interface RawColumn { source: string; }
 export interface RawDataShape {
@@ -375,6 +403,12 @@ export const TestDataView: React.FC<TestDataViewProps> = (props) => {
                         mode:  'xy' as const,
                     },
                 },
+                // Region bands. Today these come from the view's static
+                // `regions` declaration; a future dynamic source (processed
+                // data) can merge its own annotations into this same map.
+                annotation: {
+                    annotations: buildRegionAnnotations(selectedViewDef?.regions),
+                },
             },
         };
     }, [selectedViewDef, usesRightAxis]);
@@ -1010,6 +1044,54 @@ const CHART_COLORS = [
 ];
 const palette = (i: number) => CHART_COLORS[i % CHART_COLORS.length];
 
+// Default translucent fill for region bands (theme accent at low alpha).
+const DEFAULT_REGION_FILL = 'rgba(78, 168, 222, 0.15)';
+// Label color must be a concrete canvas color — CSS variables don't
+// resolve when chart.js paints to the 2D context.
+const REGION_LABEL_COLOR = 'rgba(226, 232, 240, 0.85)';
+
+/**
+ * Translate the view's `regions` into chartjs-plugin-annotation `box`
+ * annotations keyed by a stable id. Each band spans the full Y height
+ * (yMin/yMax left unset) between `xMin` and `xMax` on the x scale.
+ * Returns an empty map when there are no regions, which the plugin
+ * treats as "draw nothing".
+ *
+ * This is the single seam through which both the static schema path and a
+ * future dynamic (processed-data) path produce annotations.
+ */
+function buildRegionAnnotations(regions?: ChartRegion[]): Record<string, any> {
+    if (!regions || regions.length === 0) return {};
+    const out: Record<string, any> = {};
+    regions.forEach((r, i) => {
+        const hasBorder = !!r.borderColor;
+        out[`region-${i}`] = {
+            type: 'box',
+            xScaleID: 'x',
+            xMin: r.xMin,
+            xMax: r.xMax,
+            // yMin/yMax intentionally omitted → band spans the plot height.
+            backgroundColor: r.color ?? DEFAULT_REGION_FILL,
+            borderColor: hasBorder ? r.borderColor : 'transparent',
+            borderWidth: hasBorder ? 1 : 0,
+            // Sit behind the data line so the trace stays readable.
+            drawTime: 'beforeDatasetsDraw' as const,
+            ...(r.label
+                ? {
+                    label: {
+                        display: true,
+                        content: r.label,
+                        position: { x: 'center' as const, y: 'start' as const },
+                        color: REGION_LABEL_COLOR,
+                        font: { size: 11 },
+                    },
+                }
+                : {}),
+        };
+    });
+    return out;
+}
+
 // 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.