@adcops/autocore-react 3.3.89 → 3.3.90

package/src/components/JogPanel.tsx

@@ -19,6 +19,7 @@ import { Distance, JogShort, JogMedium, JogLong } from '../assets';
 import { Speed, SpeedSlow, SpeedMedium, SpeedFast } from '../assets';
 import { RotationCcwA, RotationCcwB, RotationCcwC } from '../assets';
 import { RotationCwA, RotationCwB, RotationCwC  } from '../assets';
+import { JogXPos, JogXNeg, JogYPos, JogYNeg, JogZPos, JogZNeg } from '../assets';
 
 /**
  * Enumerates the source button or action when an event occurs.
@@ -125,9 +126,9 @@ interface JogPanelState {
  * A default jog button configuration for linear 3D motion.
  */
 export const DefaultLinearJogButtons : (JogPanelButtonDefinition | undefined)[][] = [
-    [{ icon: "pi pi-arrow-up-left", action: JogPanelAction.yPositive, alt: "Y Positive" }, { icon: "pi pi-arrow-up", action: JogPanelAction.zPositive, alt: "Z Positive" }, undefined],
+    [undefined, { icon: "pi pi-arrow-up", action: JogPanelAction.zPositive, alt: "Z Positive" }, { icon: "pi pi-arrow-down-left", action: JogPanelAction.yNegative, alt: "Y Negative" }],
     [{ icon: "pi pi-arrow-left", action: JogPanelAction.xNegative, alt: "X Negative" }, undefined, { icon: "pi pi-arrow-right", action: JogPanelAction.xPositive, alt: "X Positive" }],
-    [undefined, { icon: "pi pi-arrow-down", action: JogPanelAction.zNegative, alt: "Z Negative" }, { icon: "pi pi-arrow-down-right", action: JogPanelAction.yNegative, alt: "Y Negative" }],
+    [{ icon: "pi pi-arrow-up-right", action: JogPanelAction.yPositive, alt: "Y Positive" }, { icon: "pi pi-arrow-down", action: JogPanelAction.zNegative, alt: "Z Negative" }, undefined],
 ];
 
 /**
@@ -156,9 +157,9 @@ export const DefaultRotationJogButtons : (JogPanelButtonDefinition | undefined)[
  * Example:
  * ```
  * export const kDefaultButtonDefinitions : (JogPanelButtonDefinition | undefined)[][] = [
- *    [{ icon: "pi pi-arrow-up-left", action: JogPanelAction.yPositive, alt: "Y Positive" }, { icon: "pi pi-arrow-up", action: JogPanelAction.zPositive, alt: "Z Positive" }, undefined],
+ *    [undefined, { icon: "pi pi-arrow-up", action: JogPanelAction.zPositive, alt: "Z Positive" }, { icon: "pi pi-arrow-down-left", action: JogPanelAction.yNegative, alt: "Y Negative" }],
  *    [{ icon: "pi pi-arrow-left", action: JogPanelAction.xNegative, alt: "X Negative" }, undefined, { icon: "pi pi-arrow-right", action: JogPanelAction.xPositive, alt: "X Positive" }],
- *    [undefined, { icon: "pi pi-arrow-down", action: JogPanelAction.zNegative, alt: "Z Negative" }, { icon: "pi pi-arrow-down-right", action: JogPanelAction.yNegative, alt: "Y Negative" }],
+ *    [{ icon: "pi pi-arrow-up-right", action: JogPanelAction.yPositive, alt: "Y Positive" }, { icon: "pi pi-arrow-down", action: JogPanelAction.zNegative, alt: "Z Negative" }, undefined],
  * ];
  * ```
  * 
@@ -249,22 +250,22 @@ export class JogPanel extends React.Component<JogPanelProps, JogPanelState> {
             return <i/>
         }
         else if (action == JogPanelAction.xNegative) {
-            return <i className="pi pi-arrow-left" />
+            return <JogXNeg />
         }
         else if (action == JogPanelAction.xPositive) {
-            return <i className="pi pi-arrow-right" />
+            return <JogXPos />
         }
         else if (action == JogPanelAction.yNegative) {
-            return <i className="pi pi-arrow-up-left" />
+            return <JogYNeg />
         }
         else if (action == JogPanelAction.yPositive) {
-            return <i className="pi pi-arrow-down-right" />
+            return <JogYPos />
         }
         else if (action == JogPanelAction.zNegative) {
-            return <i className="pi pi-up" />
+            return <JogZNeg />
         }
         else if (action == JogPanelAction.zPositive) {
-            return <i className="pi pi-down" />
+            return <JogZPos />
         }
         else if (action == JogPanelAction.aNegative) {
             return <RotationCcwA />
@@ -299,24 +300,13 @@ export class JogPanel extends React.Component<JogPanelProps, JogPanelState> {
 
             const action = this.props.buttonDefinitions[row][col]?.action;
 
-            if (action !== undefined && action < JogPanelAction.aPositive ) {
-                return <Button 
-                    key={`${row}-${col}`}
-                    icon={this.props.buttonDefinitions[row][col]?.icon} 
-                    tooltip={this.props.buttonDefinitions[row][col]?.alt} 
-                    onClick={() => this.handleClicked(action)}
-                    className="button-item" 
-                />        
-            }
-            else {
-                return <Button 
-                    key={`${row}-${col}`}                     
-                    tooltip={this.props.buttonDefinitions[row][col]?.alt} 
-                    onClick={() => this.handleClicked(action)}
-                    className="button-item" 
-                    icon={() => this.actionToIcon(action)}/>
-            }
-            
+            return <Button
+                key={`${row}-${col}`}
+                tooltip={this.props.buttonDefinitions[row][col]?.alt}
+                onClick={() => this.handleClicked(action)}
+                className="button-item"
+                icon={() => this.actionToIcon(action)}/>
+
         }
         else {
             return <Button icon="pi" key={`${row}-${col}`} disabled={true} className="button-item empty-slot" />

package/src/components/ams/AssetDetailView.tsx

@@ -235,7 +235,7 @@ export const AssetDetailView: React.FC = () => {
                     <Button label="Edit" icon="pi pi-pencil"
                         outlined
                         onClick={() => setEditDialogOpen(true)}
-                        tooltip="Edit role, nameplate, and per-axis values. Type, serial, and install date are immutable."
+                        tooltip="Edit serial, role, nameplate, and per-axis values. Type and install date are immutable."
                         tooltipOptions={{ position: 'left' }}
                     />
                     {asset.status === 'active' && (

package/src/components/ams/AssetEditDialog.tsx

@@ -9,12 +9,13 @@
  *      `asset.current_calibration_id` is non-null. Posts via
  *      `ams.update_calibration` (server enforces "current only"). Tab
  *      is hidden entirely for assets that never had a calibration —
- *      "+ Calibration" on <AssetDetailView> is the path to add one.
+ *      "Calibration" on <AssetDetailView> is the path to add one.
  *
- * The server treats `asset_id`, `asset_type`, `serial`, and
- * `install_date` as immutable; the read-only header strip mirrors
- * that. Status stays out of this dialog because the Retire button on
- * <AssetDetailView> already owns that transition.
+ * The server treats `asset_id`, `asset_type`, and `install_date` as
+ * immutable; the read-only header strip mirrors that. `serial` is
+ * editable (free-form traceability metadata) so a mis-keyed serial can
+ * be corrected here. Status stays out of this dialog because the Retire
+ * button on <AssetDetailView> already owns that transition.
  *
  * Save commits the Asset tab first, then (if a calibration is loaded)
  * the Calibration tab. Either failure surfaces inline and stops; the
@@ -175,6 +176,7 @@ export const AssetEditDialog: React.FC<AssetEditDialogProps> = ({
     // effect below.
     const [roleSelection, setRoleSelection] = useState<string>('');
     const [location, setLocation] = useState<string>('');
+    const [serial, setSerial] = useState<string>('');
     const [customFields, setCustomFields] =
         useState<Record<string, string>>({});
     const [subLocationFields, setSubLocationFields] =
@@ -215,6 +217,9 @@ export const AssetEditDialog: React.FC<AssetEditDialogProps> = ({
         setSubmitting(false);
         setActiveTab(0);
 
+        // Serial: free-form, editable so operators can correct a typo.
+        setSerial(typeof asset.serial === 'string' ? asset.serial : '');
+
         // Role: pick the dropdown option when the asset's location
         // matches a declared role; otherwise route into ROLE_OTHER so
         // the operator can keep the current custom string.
@@ -365,6 +370,7 @@ export const AssetEditDialog: React.FC<AssetEditDialogProps> = ({
         const payload: any = {
             asset_id: asset.asset_id,
             location,
+            serial,
             custom,
         };
         if (subLocations) payload.sub_locations = subLocations;
@@ -481,10 +487,11 @@ export const AssetEditDialog: React.FC<AssetEditDialogProps> = ({
                 </>
             }
         >
-            {/* Read-only context strip — type, serial, install_date.
-                The server treats these as immutable; surfacing them
-                here keeps the operator oriented without inviting an
-                edit that would silently no-op. */}
+            {/* Read-only context strip — type, install_date. The server
+                treats these as immutable; surfacing them here keeps the
+                operator oriented without inviting an edit that would
+                silently no-op. Serial moved into the editable Asset tab
+                below so operators can correct a mis-entered serial. */}
             <div style={{ display: 'grid',
                           gridTemplateColumns: 'auto 1fr',
                           gap: '0.25rem 1rem',
@@ -492,7 +499,6 @@ export const AssetEditDialog: React.FC<AssetEditDialogProps> = ({
                           color: 'var(--text-secondary-color)',
                           marginBottom: '0.75rem' }}>
                 <span>Type</span>          <span>{typeLabel}</span>
-                <span>Serial</span>        <span>{asset.serial || <em>(none)</em>}</span>
                 {asset.install_date && (
                     <>
                         <span>Installed</span>
@@ -507,6 +513,15 @@ export const AssetEditDialog: React.FC<AssetEditDialogProps> = ({
                           gridTemplateColumns: 'auto 1fr',
                           gap: '0.5rem 1rem',
                           alignItems: 'center' }}>
+                {/* Serial — free-form manufacturer metadata. Editable so
+                    a mis-entered serial can be corrected after the fact. */}
+                <label>Serial</label>
+                <InputText
+                    value={serial}
+                    placeholder="(none)"
+                    onChange={(e) => setSerial(e.target.value)}
+                />
+
                 {/* Role field. Asset types referenced only by_id_field
                     (no by_location asset_ref) come back with an empty
                     role list — we hide the row entirely so the operator

package/src/components/ams/AssetRegistryTable.css

@@ -0,0 +1,12 @@
+/*
+ * Touch-friendly row sizing for the AMS asset list.
+ *
+ * The shop-floor HMI is a touchscreen and operators were mis-tapping
+ * the dense default DataTable rows. Adding vertical padding to each
+ * body cell enlarges the per-row touch target without changing the
+ * column layout or text size.
+ */
+.ams-asset-table .p-datatable-tbody > tr > td {
+    padding-top: 0.9rem;
+    padding-bottom: 0.9rem;
+}

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,
@@ -433,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"
@@ -481,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/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.