@adcops/autocore-react 3.3.85 → 3.3.89

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

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

@@ -0,0 +1,160 @@
+/**
+ * SaveDiffDialog — shows what's about to land on disk before save_config.
+ *
+ * Fetches a fresh disk-state via `tis.list_schemas` (the existing read
+ * endpoint that bypasses staging) and diffs against the current staged
+ * methods. Operator confirms or cancels.
+ *
+ * The diff is intentionally simple: added / removed / modified method IDs,
+ * plus a JSON before/after for each modified method. Adding a full
+ * line-level differ would mean another dep — not worth it for an HMI.
+ */
+
+import { useEffect, useState } from 'react';
+import { Dialog } from 'primereact/dialog';
+import { Button } from 'primereact/button';
+import type { TisIpcInvoker } from '../../../hooks/useTisConfig';
+import type { TestMethod } from '../types';
+
+export interface SaveDiffDialogProps {
+    visible: boolean;
+    staged: Record<string, TestMethod>;
+    invoker: TisIpcInvoker;
+    onConfirm: () => Promise<void> | void;
+    onCancel: () => void;
+}
+
+interface DiffSummary {
+    added: string[];
+    removed: string[];
+    modified: { id: string; before: TestMethod; after: TestMethod }[];
+}
+
+export const SaveDiffDialog: React.FC<SaveDiffDialogProps> = ({
+    visible, staged, invoker, onConfirm, onCancel,
+}) => {
+    const [diff, setDiff] = useState<DiffSummary | null>(null);
+    const [error, setError] = useState<string | null>(null);
+    const [busy, setBusy] = useState<boolean>(false);
+
+    useEffect(() => {
+        if (!visible) return;
+        let cancelled = false;
+        (async () => {
+            setError(null);
+            try {
+                const resp = await invoker('tis.list_schemas', {});
+                if (cancelled) return;
+                if (!resp.success) {
+                    setError(resp.error_message ?? 'tis.list_schemas failed');
+                    return;
+                }
+                const disk = (resp.data?.test_methods ?? {}) as Record<string, TestMethod>;
+                setDiff(buildDiff(disk, staged));
+            } catch (e: any) {
+                setError(String(e?.message ?? e));
+            }
+        })();
+        return () => { cancelled = true; };
+    }, [visible, staged, invoker]);
+
+    const handleConfirm = async () => {
+        setBusy(true);
+        try {
+            await onConfirm();
+        } finally {
+            setBusy(false);
+        }
+    };
+
+    return (
+        <Dialog
+            header="Save Test Methods to Disk"
+            visible={visible}
+            onHide={onCancel}
+            style={{ width: '60rem', maxWidth: '90vw' }}
+        >
+            {error && <div style={{ color: '#dc2626', marginBottom: '0.5rem' }}>{error}</div>}
+            {!diff && !error && <small>Computing diff…</small>}
+            {diff && (
+                <div>
+                    <p>
+                        About to overwrite <code>project.json</code>. A backup
+                        of the previous file will be written to{' '}
+                        <code>project.json.bak</code>.
+                    </p>
+                    {diff.added.length === 0 && diff.removed.length === 0 && diff.modified.length === 0 && (
+                        <p><em>No changes detected.</em></p>
+                    )}
+                    {diff.added.length > 0 && (
+                        <p><strong>Added:</strong> {diff.added.join(', ')}</p>
+                    )}
+                    {diff.removed.length > 0 && (
+                        <p><strong>Removed:</strong> {diff.removed.join(', ')}</p>
+                    )}
+                    {diff.modified.length > 0 && (
+                        <>
+                            <p><strong>Modified:</strong> {diff.modified.map(m => m.id).join(', ')}</p>
+                            <details>
+                                <summary>Show before / after</summary>
+                                {diff.modified.map((m) => (
+                                    <div key={m.id} style={{ marginTop: '0.75rem' }}>
+                                        <strong>{m.id}</strong>
+                                        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '0.5rem', marginTop: '0.25rem' }}>
+                                            <pre style={preStyle('before')}>
+                                                {JSON.stringify(m.before, null, 2)}
+                                            </pre>
+                                            <pre style={preStyle('after')}>
+                                                {JSON.stringify(m.after, null, 2)}
+                                            </pre>
+                                        </div>
+                                    </div>
+                                ))}
+                            </details>
+                        </>
+                    )}
+                </div>
+            )}
+            <div style={{ display: 'flex', justifyContent: 'flex-end', gap: '0.5rem', marginTop: '1rem' }}>
+                <Button label="Cancel" className="p-button-text" onClick={onCancel} disabled={busy} />
+                <Button
+                    label="Save"
+                    icon="pi pi-save"
+                    disabled={busy || !diff}
+                    onClick={handleConfirm}
+                />
+            </div>
+        </Dialog>
+    );
+};
+
+function preStyle(kind: 'before' | 'after'): React.CSSProperties {
+    return {
+        background: kind === 'before' ? '#fef2f2' : '#f0fdf4',
+        color: '#0f172a',
+        padding: '0.5rem',
+        fontSize: '0.75rem',
+        margin: 0,
+        maxHeight: '20rem',
+        overflow: 'auto',
+        border: `1px solid ${kind === 'before' ? '#fecaca' : '#bbf7d0'}`,
+        borderRadius: 4,
+    };
+}
+
+function buildDiff(disk: Record<string, TestMethod>, staged: Record<string, TestMethod>): DiffSummary {
+    const out: DiffSummary = { added: [], removed: [], modified: [] };
+    const allKeys = new Set<string>([...Object.keys(disk), ...Object.keys(staged)]);
+    for (const k of allKeys) {
+        const d = disk[k];
+        const s = staged[k];
+        if (d === undefined && s !== undefined) out.added.push(k);
+        else if (d !== undefined && s === undefined) out.removed.push(k);
+        else if (d !== undefined && s !== undefined) {
+            if (JSON.stringify(d) !== JSON.stringify(s)) {
+                out.modified.push({ id: k, before: d, after: s });
+            }
+        }
+    }
+    return out;
+}

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

@@ -0,0 +1,134 @@
+import { useEffect, 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 { Checkbox } from 'primereact/checkbox';
+import { InputNumber } from 'primereact/inputnumber';
+import { FormRow } from '../../forms/FormRow';
+import type { TestField } from '../types';
+
+const FIELD_TYPES: { label: string; value: string }[] = [
+    { label: 'string', value: 'string' },
+    { label: 'i32', value: 'i32' },
+    { label: 'i64', value: 'i64' },
+    { label: 'u32', value: 'u32' },
+    { label: 'u64', value: 'u64' },
+    { label: 'f32', value: 'f32' },
+    { label: 'f64', value: 'f64' },
+    { label: 'bool', value: 'bool' },
+];
+
+export interface TestFieldDialogProps {
+    visible: boolean;
+    initial: TestField | null;
+    onCancel: () => void;
+    onSave: (field: TestField) => void;
+    /** Names already in use within the same array — for uniqueness validation. */
+    siblingNames: string[];
+}
+
+const blank: TestField = { name: '', type: 'f32' };
+
+export const TestFieldDialog: React.FC<TestFieldDialogProps> = ({
+    visible, initial, onCancel, onSave, siblingNames,
+}) => {
+    const [draft, setDraft] = useState<TestField>(blank);
+    const [error, setError] = useState<string | null>(null);
+
+    useEffect(() => {
+        if (visible) {
+            setDraft(initial ? { ...initial } : { ...blank });
+            setError(null);
+        }
+    }, [visible, initial]);
+
+    const validate = (f: TestField): string | null => {
+        if (!f.name.trim()) return 'Field name is required.';
+        if (!/^[a-zA-Z_][a-zA-Z0-9_]*$/.test(f.name)) {
+            return 'Name must be a valid identifier (letters, digits, underscore; cannot start with a digit).';
+        }
+        const dupOfOther = siblingNames.some(n => n === f.name && n !== initial?.name);
+        if (dupOfOther) return `A field named "${f.name}" already exists in this array.`;
+        return null;
+    };
+
+    const handleSave = () => {
+        const err = validate(draft);
+        if (err) { setError(err); return; }
+        onSave(draft);
+    };
+
+    return (
+        <Dialog
+            header={initial ? `Edit field: ${initial.name}` : 'New field'}
+            visible={visible}
+            onHide={onCancel}
+            style={{ width: '36rem' }}
+        >
+            {error && <div style={{ color: '#dc2626', marginBottom: '0.75rem' }}>{error}</div>}
+            <FormRow label="Name" required hint="Wire-format key. Also the column name in CSV exports.">
+                <InputText
+                    value={draft.name}
+                    onChange={(e) => setDraft({ ...draft, name: e.target.value })}
+                />
+            </FormRow>
+            <FormRow label="Type" required>
+                <Dropdown
+                    value={draft.type}
+                    options={FIELD_TYPES}
+                    onChange={(e) => setDraft({ ...draft, type: e.value })}
+                    editable
+                />
+            </FormRow>
+            <FormRow label="Units" hint="Display label, appended to form labels (e.g. m/s).">
+                <InputText
+                    value={draft.units ?? ''}
+                    onChange={(e) => setDraft({ ...draft, units: e.target.value || undefined })}
+                />
+            </FormRow>
+            <FormRow label="Label" hint="Pretty form label. Falls back to name when empty.">
+                <InputText
+                    value={draft.label ?? ''}
+                    onChange={(e) => setDraft({ ...draft, label: e.target.value || undefined })}
+                />
+            </FormRow>
+            <FormRow label="Required">
+                <Checkbox
+                    checked={!!draft.required}
+                    onChange={(e) => setDraft({ ...draft, required: !!e.checked })}
+                />
+            </FormRow>
+            <FormRow label="Source" hint="Optional gm.* variable to bind this field to.">
+                <InputText
+                    value={draft.source ?? ''}
+                    onChange={(e) => setDraft({ ...draft, source: e.target.value || undefined })}
+                    placeholder="gm.<variable_name>"
+                />
+            </FormRow>
+            <FormRow label="Scale" hint="display = raw × scale. Leave blank for 1.0 (no conversion).">
+                <InputNumber
+                    value={draft.scale ?? null}
+                    onValueChange={(e) =>
+                        setDraft({ ...draft, scale: typeof e.value === 'number' ? e.value : undefined })
+                    }
+                    mode="decimal"
+                    minFractionDigits={0}
+                    maxFractionDigits={9}
+                />
+            </FormRow>
+            <FormRow label="Description" hint="Hover tooltip in the form.">
+                <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={onCancel} />
+                <Button label="Save" onClick={handleSave} />
+            </div>
+        </Dialog>
+    );
+};