@adcops/autocore-react 3.3.85 → 3.3.87

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>
+    );
+};

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

@@ -0,0 +1,176 @@
+/**
+ * MethodFormEditor — tabbed shell that composes the per-section subforms
+ * for a single TestMethod. The JSON tab is always available as an escape
+ * hatch for power users.
+ *
+ * Owns the local working copy of the method. Hands the changed copy back
+ * to the parent via onChange — the parent decides when to call put_method.
+ */
+
+import { useEffect, useMemo, useState } from 'react';
+import { TabView, TabPanel } from 'primereact/tabview';
+import { Button } from 'primereact/button';
+import { CodeEditor } from '../../CodeEditor';
+import { IdentitySection } from './IdentitySection';
+import { FieldArrayEditor } from './FieldArrayEditor';
+import { ViewsEditor } from './ViewsEditor';
+import { RawDataEditor } from './RawDataEditor';
+import { AssetRefsEditor } from './AssetRefsEditor';
+import { AnalysisEditor } from './AnalysisEditor';
+import { validateMethod } from '../validation';
+import type { TestMethod } from '../types';
+
+export interface MethodFormEditorProps {
+    methodId: string;
+    method: TestMethod;
+    /** Called on Apply with the working copy — parent forwards to put_method. */
+    onApply: (next: TestMethod) => Promise<void> | void;
+    /** AMS asset types — passed through to AssetRefsEditor for the dropdown. */
+    knownAssetTypes?: string[];
+    busy?: boolean;
+}
+
+export const MethodFormEditor: React.FC<MethodFormEditorProps> = ({
+    methodId, method, onApply, knownAssetTypes = [], busy,
+}) => {
+    const [draft, setDraft] = useState<TestMethod>(method);
+    const [jsonText, setJsonText] = useState<string>('');
+    const [jsonError, setJsonError] = useState<string | null>(null);
+    const [activeTab, setActiveTab] = useState<number>(0);
+
+    // Reset the working copy whenever the incoming method changes — i.e.
+    // the user selected a different method, or the server returned a fresh
+    // version after a save. Unapplied tab edits are discarded.
+    useEffect(() => {
+        setDraft(method);
+        setJsonText(JSON.stringify(method, null, 2));
+        setJsonError(null);
+    }, [method, methodId]);
+
+    const dirty = useMemo(() => {
+        try {
+            return JSON.stringify(draft) !== JSON.stringify(method);
+        } catch {
+            return true;
+        }
+    }, [draft, method]);
+
+    // Live cross-field validation. Mirrors the server's validate_method —
+    // gives the operator immediate feedback in the form, not just after Apply.
+    const validationErrors = useMemo(() => validateMethod(methodId, draft), [draft, methodId]);
+
+    const handleFormChange = (next: TestMethod) => {
+        setDraft(next);
+        // Keep the JSON tab's text in sync so switching tabs doesn't show
+        // stale JSON. This is one-way (form → JSON); the reverse happens
+        // only when the user explicitly types in the JSON tab.
+        setJsonText(JSON.stringify(next, null, 2));
+    };
+
+    const handleJsonChange = (v: string | undefined) => {
+        const text = v ?? '';
+        setJsonText(text);
+        try {
+            const parsed = JSON.parse(text);
+            setDraft(parsed);
+            setJsonError(null);
+        } catch (e: any) {
+            setJsonError(String(e?.message ?? e));
+            // Don't update draft on parse error — form tabs stay valid.
+        }
+    };
+
+    const handleApply = async () => {
+        // If the JSON tab is active and has a parse error, refuse.
+        if (jsonError) return;
+        await onApply(draft);
+    };
+
+    return (
+        <div style={{ display: 'flex', flexDirection: 'column', height: '100%', minHeight: 0 }}>
+            <div
+                style={{
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    alignItems: 'center',
+                    padding: '0.5rem 1rem',
+                    borderBottom: '1px solid var(--surface-d, #e2e8f0)',
+                    background: 'var(--surface-b, #f8fafc)',
+                }}
+            >
+                <strong>
+                    {methodId}
+                    {dirty && <span style={{ marginLeft: '0.5rem', color: '#ea580c' }}>•</span>}
+                    {validationErrors.length > 0 && (
+                        <span
+                            title={validationErrors.map(e => e.message).join('\n')}
+                            style={{
+                                marginLeft: '0.5rem',
+                                background: '#fef2f2',
+                                color: '#991b1b',
+                                padding: '0.1rem 0.5rem',
+                                borderRadius: 4,
+                                fontSize: '0.75rem',
+                                fontWeight: 600,
+                                cursor: 'help',
+                            }}
+                        >
+                            {validationErrors.length} issue{validationErrors.length === 1 ? '' : 's'}
+                        </span>
+                    )}
+                </strong>
+                <div style={{ display: 'flex', gap: '0.5rem' }}>
+                    <Button
+                        label="Apply"
+                        icon="pi pi-check"
+                        disabled={busy || !dirty || !!jsonError || validationErrors.length > 0}
+                        onClick={handleApply}
+                    />
+                </div>
+            </div>
+
+            <div style={{ flex: 1, minHeight: 0, overflow: 'auto' }}>
+                <TabView activeIndex={activeTab} onTabChange={(e) => setActiveTab(e.index)}>
+                    <TabPanel header="Identity">
+                        <IdentitySection method={draft} onChange={handleFormChange} />
+                    </TabPanel>
+                    <TabPanel header="Fields">
+                        <FieldArrayEditor arrayKey="project_fields" method={draft} onChange={handleFormChange} />
+                        <FieldArrayEditor arrayKey="config_fields"  method={draft} onChange={handleFormChange} />
+                        <FieldArrayEditor arrayKey="cycle_fields"   method={draft} onChange={handleFormChange} />
+                        <FieldArrayEditor arrayKey="results_fields" method={draft} onChange={handleFormChange} />
+                    </TabPanel>
+                    <TabPanel header="Views">
+                        <ViewsEditor method={draft} onChange={handleFormChange} />
+                    </TabPanel>
+                    <TabPanel header="Raw Data">
+                        <RawDataEditor method={draft} onChange={handleFormChange} />
+                    </TabPanel>
+                    <TabPanel header="Assets">
+                        <AssetRefsEditor method={draft} onChange={handleFormChange} knownAssetTypes={knownAssetTypes} />
+                    </TabPanel>
+                    <TabPanel header="Analysis">
+                        <AnalysisEditor method={draft} onChange={handleFormChange} />
+                    </TabPanel>
+                    <TabPanel header="JSON">
+                        {jsonError && (
+                            <div style={{ color: '#dc2626', marginBottom: '0.5rem', fontFamily: 'monospace' }}>
+                                {jsonError}
+                            </div>
+                        )}
+                        <div style={{ height: '60vh' }}>
+                            <CodeEditor
+                                code={jsonText}
+                                language="json"
+                                theme="vs-dark"
+                                readOnly={false}
+                                cursorStyle="line"
+                                onCodeChanged={handleJsonChange}
+                            />
+                        </div>
+                    </TabPanel>
+                </TabView>
+            </div>
+        </div>
+    );
+};

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

@@ -0,0 +1,117 @@
+import { InputText } from 'primereact/inputtext';
+import { Button } from 'primereact/button';
+import { Checkbox } from 'primereact/checkbox';
+import { FormSection } from '../../forms/FormSection';
+import { FormRow } from '../../forms/FormRow';
+import type { RawColumn, RawDataShape, TestMethod } from '../types';
+
+export interface RawDataEditorProps {
+    method: TestMethod;
+    onChange: (next: TestMethod) => void;
+}
+
+const emptyRawData = (): RawDataShape => ({ blob_name: 'trace', columns: {} });
+
+export const RawDataEditor: React.FC<RawDataEditorProps> = ({ method, onChange }) => {
+    const rd = method.raw_data as RawDataShape | null | undefined;
+    const enabled = !!rd;
+
+    const setRawData = (next: RawDataShape | null) => {
+        onChange({ ...method, raw_data: next });
+    };
+
+    const updateColumn = (name: string, col: RawColumn) => {
+        if (!rd) return;
+        setRawData({ ...rd, columns: { ...rd.columns, [name]: col } });
+    };
+    const renameColumn = (oldName: string, newName: string) => {
+        if (!rd || !newName.trim() || newName === oldName) return;
+        if (rd.columns[newName]) return;
+        const cols = { ...rd.columns };
+        cols[newName] = cols[oldName];
+        delete cols[oldName];
+        setRawData({ ...rd, columns: cols });
+    };
+    const removeColumn = (name: string) => {
+        if (!rd) return;
+        if (!window.confirm(`Remove column "${name}"?`)) return;
+        const cols = { ...rd.columns };
+        delete cols[name];
+        setRawData({ ...rd, columns: cols });
+    };
+    const addColumn = () => {
+        if (!rd) return;
+        let base = 'column';
+        let n = 1;
+        while (rd.columns[`${base}${n}`]) n++;
+        setRawData({ ...rd, columns: { ...rd.columns, [`${base}${n}`]: { source: 'time' } } });
+    };
+
+    return (
+        <FormSection
+            title="Raw Data"
+            description="Columnar blob shape captured per cycle under raw_data/. Required only when the method records DAQ traces."
+            actions={
+                <Checkbox
+                    checked={enabled}
+                    onChange={(e) => setRawData(e.checked ? emptyRawData() : null)}
+                />
+            }
+        >
+            {!enabled && <small>Raw data capture disabled. Tick the box above to enable.</small>}
+            {enabled && rd && (
+                <>
+                    <FormRow label="Blob name" required hint="Base filename under raw_data/, no extension.">
+                        <InputText
+                            value={rd.blob_name}
+                            onChange={(e) => setRawData({ ...rd, blob_name: e.target.value })}
+                        />
+                    </FormRow>
+
+                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: '0.75rem' }}>
+                        <strong>Columns</strong>
+                        <Button label="Add column" icon="pi pi-plus" size="small" onClick={addColumn} />
+                    </div>
+                    {Object.keys(rd.columns).length === 0 && <small>No columns defined.</small>}
+                    {Object.entries(rd.columns).map(([name, col]) => (
+                        <div
+                            key={name}
+                            style={{
+                                display: 'grid',
+                                gridTemplateColumns: '1fr 1.5fr 1.5fr 2rem',
+                                gap: '0.5rem',
+                                marginTop: '0.25rem',
+                                alignItems: 'center',
+                            }}
+                        >
+                            <InputText
+                                placeholder="column name"
+                                defaultValue={name}
+                                onBlur={(e) => renameColumn(name, e.target.value.trim())}
+                            />
+                            <InputText
+                                placeholder="source (time / ni.<daq>.channels.<name> / derived)"
+                                value={col.source}
+                                onChange={(e) => updateColumn(name, { ...col, source: e.target.value })}
+                            />
+                            <InputText
+                                placeholder="formula (only when source=derived)"
+                                value={col.formula ?? ''}
+                                onChange={(e) =>
+                                    updateColumn(name, { ...col, formula: e.target.value || undefined })
+                                }
+                                disabled={col.source !== 'derived'}
+                            />
+                            <Button
+                                icon="pi pi-trash"
+                                className="p-button-text p-button-danger p-button-sm"
+                                onClick={() => removeColumn(name)}
+                                aria-label="Remove column"
+                            />
+                        </div>
+                    ))}
+                </>
+            )}
+        </FormSection>
+    );
+};