@adcops/autocore-react 3.3.85 → 3.3.89

package/src/components/tis-editor/editor/AssetRefsEditor.tsx

@@ -0,0 +1,187 @@
+import { useState } from 'react';
+import { Dialog } from 'primereact/dialog';
+import { Button } from 'primereact/button';
+import { InputText } from 'primereact/inputtext';
+import { InputTextarea } from 'primereact/inputtextarea';
+import { Dropdown } from 'primereact/dropdown';
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { FormSection } from '../../forms/FormSection';
+import { FormRow } from '../../forms/FormRow';
+import type { AssetRef, TestMethod } from '../types';
+
+const SELECT_OPTIONS = [
+    { label: 'By location', value: 'by_location' },
+    { label: 'By id field', value: 'by_id_field' },
+];
+
+const CALIBRATION_OPTIONS = [
+    { label: 'Ignore', value: 'ignore' },
+    { label: 'Warn (default)', value: 'warn' },
+    { label: 'Require', value: 'require' },
+];
+
+export interface AssetRefsEditorProps {
+    method: TestMethod;
+    onChange: (next: TestMethod) => void;
+    /** Asset types known to AMS, supplied by the host. Empty array = use a
+     *  free-form text field. Phase 3 wires this up to ams.list_schemas. */
+    knownAssetTypes?: string[];
+}
+
+const blank = (): AssetRef => ({
+    field: '', asset_type: '', select: 'by_location',
+    calibration_required: 'warn',
+});
+
+export const AssetRefsEditor: React.FC<AssetRefsEditorProps> = ({ method, onChange, knownAssetTypes = [] }) => {
+    const refs: AssetRef[] = (method.asset_refs as AssetRef[]) ?? [];
+    const [dialogOpen, setDialogOpen] = useState(false);
+    const [editingIdx, setEditingIdx] = useState<number | null>(null);
+    const [draft, setDraft] = useState<AssetRef>(blank());
+    const [error, setError] = useState<string | null>(null);
+
+    const openNew = () => {
+        setEditingIdx(null);
+        setDraft(blank());
+        setError(null);
+        setDialogOpen(true);
+    };
+    const openEdit = (i: number) => {
+        setEditingIdx(i);
+        setDraft({ ...refs[i] });
+        setError(null);
+        setDialogOpen(true);
+    };
+
+    const validate = (a: AssetRef): string | null => {
+        if (!a.field.trim()) return 'Field name is required.';
+        if (!a.asset_type.trim()) return 'Asset type is required.';
+        if (a.select === 'by_location' && !a.location?.trim()) {
+            return 'Location is required when select=by_location.';
+        }
+        if (a.select === 'by_id_field' && !a.from?.trim()) {
+            return 'From-path is required when select=by_id_field.';
+        }
+        const dupOfOther = refs.some((r, i) => r.field === a.field && i !== editingIdx);
+        if (dupOfOther) return `An asset_ref for field "${a.field}" already exists.`;
+        return null;
+    };
+
+    const handleSave = () => {
+        const err = validate(draft);
+        if (err) { setError(err); return; }
+        const next = [...refs];
+        if (editingIdx === null) next.push(draft);
+        else next[editingIdx] = draft;
+        onChange({ ...method, asset_refs: next });
+        setDialogOpen(false);
+    };
+
+    const handleRemove = (i: number) => {
+        if (!window.confirm(`Remove asset_ref "${refs[i].field}"?`)) return;
+        onChange({ ...method, asset_refs: refs.filter((_, idx) => idx !== i) });
+    };
+
+    const rowActions = (_r: AssetRef, opts: { rowIndex: number }) => (
+        <div style={{ display: 'flex', gap: '0.25rem' }}>
+            <Button icon="pi pi-pencil" className="p-button-text p-button-sm" onClick={() => openEdit(opts.rowIndex)} />
+            <Button icon="pi pi-trash" className="p-button-text p-button-danger p-button-sm" onClick={() => handleRemove(opts.rowIndex)} />
+        </div>
+    );
+
+    const assetTypeOptions = knownAssetTypes.length > 0
+        ? knownAssetTypes.map(t => ({ label: t, value: t }))
+        : null;
+
+    return (
+        <>
+            <FormSection
+                title="Asset References"
+                description="AMS dependencies resolved at start_test time and snapshotted into test.json."
+                actions={<Button label="Add asset_ref" icon="pi pi-plus" size="small" onClick={openNew} />}
+            >
+                <DataTable value={refs} dataKey="field" emptyMessage="No asset_refs declared.">
+                    <Column field="field" header="Field" />
+                    <Column field="asset_type" header="Asset type" />
+                    <Column field="select" header="Select" style={{ width: '7rem' }} />
+                    <Column
+                        header="Locator"
+                        body={(r: AssetRef) => r.select === 'by_location' ? r.location : r.from}
+                    />
+                    <Column field="calibration_required" header="Calibration" style={{ width: '7rem' }} />
+                    <Column header="" body={rowActions} style={{ width: '6rem' }} />
+                </DataTable>
+            </FormSection>
+
+            <Dialog
+                header={editingIdx === null ? 'New asset_ref' : `Edit asset_ref: ${refs[editingIdx ?? 0]?.field}`}
+                visible={dialogOpen}
+                onHide={() => setDialogOpen(false)}
+                style={{ width: '40rem' }}
+            >
+                {error && <div style={{ color: '#dc2626', marginBottom: '0.5rem' }}>{error}</div>}
+                <FormRow label="Field" required hint="Key under test.json::asset_snapshot.">
+                    <InputText value={draft.field} onChange={(e) => setDraft({ ...draft, field: e.target.value })} />
+                </FormRow>
+                <FormRow label="Asset type" required>
+                    {assetTypeOptions ? (
+                        <Dropdown
+                            value={draft.asset_type}
+                            options={assetTypeOptions}
+                            onChange={(e) => setDraft({ ...draft, asset_type: e.value })}
+                            editable
+                        />
+                    ) : (
+                        <InputText
+                            value={draft.asset_type}
+                            onChange={(e) => setDraft({ ...draft, asset_type: e.target.value })}
+                            placeholder="e.g. load_cell"
+                        />
+                    )}
+                </FormRow>
+                <FormRow label="Select" required>
+                    <Dropdown
+                        value={draft.select}
+                        options={SELECT_OPTIONS}
+                        onChange={(e) => setDraft({ ...draft, select: e.value })}
+                    />
+                </FormRow>
+                {draft.select === 'by_location' && (
+                    <FormRow label="Location" required hint="AMS location key (e.g. tsdr).">
+                        <InputText value={draft.location ?? ''} onChange={(e) => setDraft({ ...draft, location: e.target.value })} />
+                    </FormRow>
+                )}
+                {draft.select === 'by_id_field' && (
+                    <FormRow label="From" required hint="Dotted config path (e.g. config.surface_asset_id).">
+                        <InputText value={draft.from ?? ''} onChange={(e) => setDraft({ ...draft, from: e.target.value })} />
+                    </FormRow>
+                )}
+                <FormRow label="Calibration policy">
+                    <Dropdown
+                        value={draft.calibration_required ?? 'warn'}
+                        options={CALIBRATION_OPTIONS}
+                        onChange={(e) => setDraft({ ...draft, calibration_required: e.value })}
+                    />
+                </FormRow>
+                <FormRow label="Label">
+                    <InputText
+                        value={draft.label ?? ''}
+                        onChange={(e) => setDraft({ ...draft, label: e.target.value || undefined })}
+                    />
+                </FormRow>
+                <FormRow label="Description">
+                    <InputTextarea
+                        rows={2}
+                        value={draft.description ?? ''}
+                        onChange={(e) => setDraft({ ...draft, description: e.target.value || undefined })}
+                    />
+                </FormRow>
+                <div style={{ display: 'flex', justifyContent: 'flex-end', gap: '0.5rem', marginTop: '1rem' }}>
+                    <Button label="Cancel" className="p-button-text" onClick={() => setDialogOpen(false)} />
+                    <Button label="Save" onClick={handleSave} />
+                </div>
+            </Dialog>
+        </>
+    );
+};

package/src/components/tis-editor/editor/ChartViewDialog.tsx

@@ -0,0 +1,170 @@
+import { useEffect, useState } from 'react';
+import { Dialog } from 'primereact/dialog';
+import { Button } from 'primereact/button';
+import { InputText } from 'primereact/inputtext';
+import { Dropdown } from 'primereact/dropdown';
+import { FormRow } from '../../forms/FormRow';
+import type { ChartAxis, ChartSeries, ChartView } from '../types';
+
+const VIEW_TYPES = [
+    { label: 'Cycle scatter', value: 'cycle_scatter' },
+    { label: 'Raw trace',     value: 'raw_trace' },
+];
+
+const Y_AXES = [
+    { label: 'Left', value: 'left' },
+    { label: 'Right', value: 'right' },
+];
+
+export interface ChartViewDialogProps {
+    visible: boolean;
+    initial: { viewId: string; view: ChartView } | null;
+    onCancel: () => void;
+    onSave: (viewId: string, view: ChartView) => void;
+    /** Known field/column names; offered as datalist suggestions. */
+    knownKeys: string[];
+    /** Other view ids already in use — for uniqueness validation. */
+    siblingIds: string[];
+}
+
+const blank = (): ChartView => ({
+    title: '', type: 'cycle_scatter',
+    x: { field: '', label: '' },
+    y: [],
+});
+
+export const ChartViewDialog: React.FC<ChartViewDialogProps> = ({
+    visible, initial, onCancel, onSave, knownKeys, siblingIds,
+}) => {
+    const [viewId, setViewId] = useState<string>('');
+    const [draft, setDraft] = useState<ChartView>(blank());
+    const [error, setError] = useState<string | null>(null);
+
+    useEffect(() => {
+        if (visible) {
+            setViewId(initial?.viewId ?? '');
+            setDraft(initial ? JSON.parse(JSON.stringify(initial.view)) : blank());
+            setError(null);
+        }
+    }, [visible, initial]);
+
+    const validate = (): string | null => {
+        if (!viewId.trim()) return 'View ID is required.';
+        if (siblingIds.includes(viewId) && viewId !== initial?.viewId) {
+            return `A view named "${viewId}" already exists.`;
+        }
+        return null;
+    };
+
+    const handleSave = () => {
+        const err = validate();
+        if (err) { setError(err); return; }
+        onSave(viewId, draft);
+    };
+
+    // Choose which axis property to bind to based on view type.
+    const isRawTrace = draft.type === 'raw_trace';
+    const axisKey: 'column' | 'field' = isRawTrace ? 'column' : 'field';
+
+    const setAxis = (patch: Partial<ChartAxis>) => {
+        setDraft({ ...draft, x: { ...draft.x, ...patch } });
+    };
+    const setSeries = (i: number, patch: Partial<ChartSeries>) => {
+        const next = [...draft.y];
+        next[i] = { ...next[i], ...patch };
+        setDraft({ ...draft, y: next });
+    };
+    const addSeries = () => {
+        setDraft({ ...draft, y: [...draft.y, { [axisKey]: '', label: '', y_axis: 'left' } as ChartSeries] });
+    };
+    const removeSeries = (i: number) => {
+        setDraft({ ...draft, y: draft.y.filter((_, idx) => idx !== i) });
+    };
+
+    return (
+        <Dialog
+            header={initial ? `Edit view: ${initial.viewId}` : 'New chart view'}
+            visible={visible}
+            onHide={onCancel}
+            style={{ width: '42rem' }}
+        >
+            {error && <div style={{ color: '#dc2626', marginBottom: '0.5rem' }}>{error}</div>}
+            <FormRow label="View ID" required hint="Stable key (e.g. cof_scatter). Cannot collide with other views.">
+                <InputText value={viewId} onChange={(e) => setViewId(e.target.value)} />
+            </FormRow>
+            <FormRow label="Title">
+                <InputText value={draft.title ?? ''} onChange={(e) => setDraft({ ...draft, title: e.target.value })} />
+            </FormRow>
+            <FormRow label="Type" required>
+                <Dropdown
+                    value={draft.type}
+                    options={VIEW_TYPES}
+                    onChange={(e) => setDraft({ ...draft, type: e.value })}
+                />
+            </FormRow>
+            <FormRow label={isRawTrace ? 'X column' : 'X field'} required>
+                <InputText
+                    value={(draft.x[axisKey] as string) ?? ''}
+                    onChange={(e) => setAxis({ [axisKey]: e.target.value } as ChartAxis)}
+                    list="known-keys"
+                />
+            </FormRow>
+            <FormRow label="X label">
+                <InputText
+                    value={draft.x.label ?? ''}
+                    onChange={(e) => setAxis({ label: e.target.value })}
+                />
+            </FormRow>
+
+            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', margin: '1rem 0 0.5rem' }}>
+                <strong>Y series</strong>
+                <Button label="Add series" icon="pi pi-plus" size="small" onClick={addSeries} />
+            </div>
+            {draft.y.length === 0 && <small>No series — add at least one.</small>}
+            {draft.y.map((s, i) => (
+                <div
+                    key={i}
+                    style={{
+                        display: 'grid',
+                        gridTemplateColumns: '1fr 1fr 6rem 2rem',
+                        gap: '0.5rem',
+                        marginBottom: '0.25rem',
+                        alignItems: 'center',
+                    }}
+                >
+                    <InputText
+                        placeholder={isRawTrace ? 'column' : 'field'}
+                        value={(s[axisKey] as string) ?? ''}
+                        onChange={(e) => setSeries(i, { [axisKey]: e.target.value } as ChartSeries)}
+                        list="known-keys"
+                    />
+                    <InputText
+                        placeholder="label"
+                        value={s.label ?? ''}
+                        onChange={(e) => setSeries(i, { label: e.target.value })}
+                    />
+                    <Dropdown
+                        value={s.y_axis ?? 'left'}
+                        options={Y_AXES}
+                        onChange={(e) => setSeries(i, { y_axis: e.value })}
+                    />
+                    <Button
+                        icon="pi pi-trash"
+                        className="p-button-text p-button-danger p-button-sm"
+                        onClick={() => removeSeries(i)}
+                        aria-label="Remove series"
+                    />
+                </div>
+            ))}
+
+            <datalist id="known-keys">
+                {knownKeys.map((k) => <option key={k} value={k} />)}
+            </datalist>
+
+            <div style={{ display: 'flex', justifyContent: 'flex-end', gap: '0.5rem', marginTop: '1rem' }}>
+                <Button label="Cancel" className="p-button-text" onClick={onCancel} />
+                <Button label="Save" onClick={handleSave} />
+            </div>
+        </Dialog>
+    );
+};

package/src/components/tis-editor/editor/FieldArrayEditor.tsx

@@ -0,0 +1,131 @@
+import { useState } from 'react';
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { Button } from 'primereact/button';
+import { FormSection } from '../../forms/FormSection';
+import { TestFieldDialog } from './TestFieldDialog';
+import type { TestField, TestMethod, FieldArrayKey } from '../types';
+
+const TITLES: Record<FieldArrayKey, string> = {
+    project_fields: 'Project Fields',
+    config_fields: 'Config Fields',
+    cycle_fields: 'Cycle Fields',
+    results_fields: 'Results Fields',
+};
+
+const DESCRIPTIONS: Record<FieldArrayKey, string> = {
+    project_fields: 'System-level fields (operator, station). Filled by the HMI but not cycled.',
+    config_fields:  'Operator-input config (speeds, loads). Snapshotted into test.json on start.',
+    cycle_fields:   'Per-cycle capture. One row appended to cycles.jsonl per cycle.',
+    results_fields: 'Post-test summary (min/max/avg, pass/fail). Written once at finish.',
+};
+
+export interface FieldArrayEditorProps {
+    arrayKey: FieldArrayKey;
+    method: TestMethod;
+    onChange: (next: TestMethod) => void;
+}
+
+export const FieldArrayEditor: React.FC<FieldArrayEditorProps> = ({ arrayKey, method, onChange }) => {
+    const fields: TestField[] = (method[arrayKey] as TestField[]) ?? [];
+    const [dialogOpen, setDialogOpen] = useState(false);
+    const [editingIdx, setEditingIdx] = useState<number | null>(null);
+
+    const handleAdd = () => {
+        setEditingIdx(null);
+        setDialogOpen(true);
+    };
+
+    const handleEdit = (idx: number) => {
+        setEditingIdx(idx);
+        setDialogOpen(true);
+    };
+
+    const handleSaveField = (f: TestField) => {
+        const next = [...fields];
+        if (editingIdx === null) {
+            next.push(f);
+        } else {
+            next[editingIdx] = f;
+        }
+        onChange({ ...method, [arrayKey]: next });
+        setDialogOpen(false);
+    };
+
+    const handleRemove = (idx: number) => {
+        const target = fields[idx];
+        if (!target) return;
+        if (!window.confirm(`Remove field "${target.name}"?`)) return;
+        const next = fields.filter((_, i) => i !== idx);
+        onChange({ ...method, [arrayKey]: next });
+    };
+
+    const handleMove = (idx: number, dir: -1 | 1) => {
+        const j = idx + dir;
+        if (j < 0 || j >= fields.length) return;
+        const next = [...fields];
+        [next[idx], next[j]] = [next[j], next[idx]];
+        onChange({ ...method, [arrayKey]: next });
+    };
+
+    const rowActions = (_row: TestField, opts: { rowIndex: number }) => (
+        <div style={{ display: 'flex', gap: '0.25rem' }}>
+            <Button
+                icon="pi pi-arrow-up"
+                className="p-button-text p-button-sm"
+                disabled={opts.rowIndex === 0}
+                onClick={() => handleMove(opts.rowIndex, -1)}
+                aria-label="Move up"
+            />
+            <Button
+                icon="pi pi-arrow-down"
+                className="p-button-text p-button-sm"
+                disabled={opts.rowIndex === fields.length - 1}
+                onClick={() => handleMove(opts.rowIndex, 1)}
+                aria-label="Move down"
+            />
+            <Button
+                icon="pi pi-pencil"
+                className="p-button-text p-button-sm"
+                onClick={() => handleEdit(opts.rowIndex)}
+                aria-label="Edit"
+            />
+            <Button
+                icon="pi pi-trash"
+                className="p-button-text p-button-danger p-button-sm"
+                onClick={() => handleRemove(opts.rowIndex)}
+                aria-label="Remove"
+            />
+        </div>
+    );
+
+    return (
+        <>
+            <FormSection
+                title={TITLES[arrayKey]}
+                description={DESCRIPTIONS[arrayKey]}
+                actions={<Button label="Add field" icon="pi pi-plus" size="small" onClick={handleAdd} />}
+            >
+                <DataTable value={fields} dataKey="name" emptyMessage="No fields defined.">
+                    <Column field="name" header="Name" />
+                    <Column field="type" header="Type" style={{ width: '6rem' }} />
+                    <Column field="units" header="Units" style={{ width: '6rem' }} />
+                    <Column
+                        header="Req"
+                        body={(r: TestField) => r.required ? '✓' : ''}
+                        style={{ width: '4rem' }}
+                    />
+                    <Column field="label" header="Label" />
+                    <Column header="" body={rowActions} style={{ width: '10rem' }} />
+                </DataTable>
+            </FormSection>
+            <TestFieldDialog
+                visible={dialogOpen}
+                initial={editingIdx !== null ? (fields[editingIdx] ?? null) : null}
+                siblingNames={fields.map(f => f.name)}
+                onCancel={() => setDialogOpen(false)}
+                onSave={handleSaveField}
+            />
+        </>
+    );
+};

package/src/components/tis-editor/editor/IdentitySection.tsx

@@ -0,0 +1,36 @@
+import { InputText } from 'primereact/inputtext';
+import { InputTextarea } from 'primereact/inputtextarea';
+import { FormSection } from '../../forms/FormSection';
+import { FormRow } from '../../forms/FormRow';
+import type { TestMethod } from '../types';
+
+export interface IdentitySectionProps {
+    method: TestMethod;
+    onChange: (next: TestMethod) => void;
+}
+
+export const IdentitySection: React.FC<IdentitySectionProps> = ({ method, onChange }) => {
+    return (
+        <FormSection
+            title="Identity"
+            description="Display label and operator-facing description for this method."
+        >
+            <FormRow label="Label" hint="Pretty name shown in the Test Method picker.">
+                <InputText
+                    value={(method.label as string) ?? ''}
+                    onChange={(e) => onChange({ ...method, label: e.target.value })}
+                />
+            </FormRow>
+            <FormRow
+                label="Description"
+                hint="Long-form guidance shown beneath the picker when this method is selected."
+            >
+                <InputTextarea
+                    rows={3}
+                    value={(method.description as string) ?? ''}
+                    onChange={(e) => onChange({ ...method, description: e.target.value })}
+                />
+            </FormRow>
+        </FormSection>
+    );
+};