@adcops/autocore-react 3.3.84 → 3.3.87

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

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

@@ -0,0 +1,101 @@
+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 { ChartViewDialog } from './ChartViewDialog';
+import type { ChartView, TestField, TestMethod } from '../types';
+
+export interface ViewsEditorProps {
+    method: TestMethod;
+    onChange: (next: TestMethod) => void;
+}
+
+interface ViewRow {
+    id: string;
+    title: string;
+    type: string;
+}
+
+export const ViewsEditor: React.FC<ViewsEditorProps> = ({ method, onChange }) => {
+    const views = (method.views as Record<string, ChartView>) ?? {};
+    const rows: ViewRow[] = Object.entries(views).map(([id, v]) => ({
+        id, title: v.title ?? '', type: v.type ?? '',
+    }));
+
+    const [dialogOpen, setDialogOpen] = useState(false);
+    const [editingId, setEditingId] = useState<string | null>(null);
+
+    // Known field + column names get offered as datalist suggestions to the
+    // dialog, so chart axes pick from real values rather than typos.
+    const knownKeys: string[] = [
+        ...((method.project_fields ?? []) as TestField[]).map(f => f.name),
+        ...((method.config_fields  ?? []) as TestField[]).map(f => f.name),
+        ...((method.cycle_fields   ?? []) as TestField[]).map(f => f.name),
+        ...((method.results_fields ?? []) as TestField[]).map(f => f.name),
+        ...Object.keys((method.raw_data as any)?.columns ?? {}),
+    ];
+
+    const openNew = () => { setEditingId(null); setDialogOpen(true); };
+    const openEdit = (id: string) => { setEditingId(id); setDialogOpen(true); };
+
+    const handleSave = (newId: string, view: ChartView) => {
+        const next = { ...views };
+        // If editing an existing view and the user changed the id, drop the old key.
+        if (editingId && editingId !== newId) {
+            delete next[editingId];
+        }
+        next[newId] = view;
+        onChange({ ...method, views: next });
+        setDialogOpen(false);
+    };
+
+    const handleRemove = (id: string) => {
+        if (!window.confirm(`Remove view "${id}"?`)) return;
+        const next = { ...views };
+        delete next[id];
+        onChange({ ...method, views: next });
+    };
+
+    const rowActions = (r: ViewRow) => (
+        <div style={{ display: 'flex', gap: '0.25rem' }}>
+            <Button
+                icon="pi pi-pencil"
+                className="p-button-text p-button-sm"
+                onClick={() => openEdit(r.id)}
+                aria-label="Edit"
+            />
+            <Button
+                icon="pi pi-trash"
+                className="p-button-text p-button-danger p-button-sm"
+                onClick={() => handleRemove(r.id)}
+                aria-label="Remove"
+            />
+        </div>
+    );
+
+    return (
+        <>
+            <FormSection
+                title="Views"
+                description="Named chart definitions rendered by <TestDataView> (cycle_scatter) and <TestRawDataView> (raw_trace)."
+                actions={<Button label="Add view" icon="pi pi-plus" size="small" onClick={openNew} />}
+            >
+                <DataTable value={rows} dataKey="id" emptyMessage="No views defined.">
+                    <Column field="id" header="View ID" />
+                    <Column field="title" header="Title" />
+                    <Column field="type" header="Type" style={{ width: '8rem' }} />
+                    <Column header="" body={rowActions} style={{ width: '6rem' }} />
+                </DataTable>
+            </FormSection>
+            <ChartViewDialog
+                visible={dialogOpen}
+                initial={editingId ? { viewId: editingId, view: views[editingId] } : null}
+                knownKeys={knownKeys}
+                siblingIds={Object.keys(views)}
+                onCancel={() => setDialogOpen(false)}
+                onSave={handleSave}
+            />
+        </>
+    );
+};

package/src/components/tis-editor/types.ts

@@ -0,0 +1,95 @@
+/**
+ * Client-side mirror of the autocore-server TestMethod schema.
+ * Source of truth is autocore-server/src/project.rs.
+ *
+ * Kept loose — `unknown` for default values and pass-through fields — so
+ * unknown server-side extensions don't trip the editor at parse time.
+ */
+
+export type FieldType =
+    | 'string'
+    | 'i32' | 'i64' | 'u32' | 'u64'
+    | 'f32' | 'f64'
+    | 'bool';
+
+export interface TestField {
+    name: string;
+    type: FieldType | string;
+    units?: string;
+    required?: boolean;
+    source?: string;
+    label?: string;
+    description?: string;
+    default?: unknown;
+    scale?: number;
+}
+
+export interface ChartAxis {
+    field?: string;
+    column?: string;
+    label?: string;
+}
+
+export interface ChartSeries {
+    field?: string;
+    column?: string;
+    label?: string;
+    y_axis?: 'left' | 'right';
+}
+
+export type ChartViewType = 'cycle_scatter' | 'raw_trace';
+
+export interface ChartView {
+    title?: string;
+    type: ChartViewType | string;
+    x: ChartAxis;
+    y: ChartSeries[];
+}
+
+export type RawColumnSource = 'time' | 'derived' | string; // also `ni.<daq>.channels.<name>`
+
+export interface RawColumn {
+    source: RawColumnSource;
+    formula?: string;
+}
+
+export interface RawDataShape {
+    blob_name: string;
+    columns: Record<string, RawColumn>;
+    units?: Record<string, string>;
+}
+
+export type AssetRefSelect = 'by_location' | 'by_id_field';
+export type CalibrationPolicy = 'ignore' | 'warn' | 'require';
+
+export interface AssetRef {
+    field: string;
+    asset_type: string;
+    select: AssetRefSelect | string;
+    location?: string;
+    from?: string;
+    calibration_required?: CalibrationPolicy | string;
+    label?: string;
+    description?: string;
+}
+
+export interface AnalysisShape {
+    script: string;
+    function: string;
+}
+
+export interface TestMethod {
+    label?: string;
+    description?: string;
+    project_fields?: TestField[];
+    config_fields?: TestField[];
+    cycle_fields?: TestField[];
+    results_fields?: TestField[];
+    raw_data?: RawDataShape | null;
+    views?: Record<string, ChartView>;
+    asset_refs?: AssetRef[];
+    analysis?: AnalysisShape | null;
+    [key: string]: unknown; // tolerate unknown server-side fields
+}
+
+export type FieldArrayKey = 'project_fields' | 'config_fields' | 'cycle_fields' | 'results_fields';

package/src/components/tis-editor/validation.ts

@@ -0,0 +1,104 @@
+/**
+ * Client-side validation for TestMethod. Mirrors the cross-field checks
+ * in autocore-server/src/tis_servelet.rs `validate_method` so the operator
+ * sees the same errors instantly in the form, not only after Apply.
+ *
+ * Returns a flat array of error messages. Empty array = clean.
+ */
+
+import type {
+    TestField, TestMethod, ChartAxis, ChartSeries,
+} from './types';
+
+const FIELD_ARRAY_KEYS = ['project_fields', 'config_fields', 'cycle_fields', 'results_fields'] as const;
+
+export interface ValidationError {
+    /** Dotted path: "<arrayKey>.<index>.<sub>" or "views.<viewId>.x" etc. */
+    path: string;
+    message: string;
+}
+
+export function validateMethod(methodId: string, m: TestMethod): ValidationError[] {
+    const errs: ValidationError[] = [];
+
+    // Field-name uniqueness + non-empty within each array.
+    for (const key of FIELD_ARRAY_KEYS) {
+        const arr = (m[key] as TestField[] | undefined) ?? [];
+        const seen = new Set<string>();
+        arr.forEach((f, i) => {
+            if (!f.name || f.name.trim() === '') {
+                errs.push({ path: `${key}.${i}.name`, message: `${methodId}.${key}: empty field name` });
+            } else if (seen.has(f.name)) {
+                errs.push({ path: `${key}.${i}.name`, message: `${methodId}.${key}: duplicate field name "${f.name}"` });
+            } else {
+                seen.add(f.name);
+            }
+        });
+    }
+
+    // Build sets for axis-reference resolution.
+    const knownFields = new Set<string>();
+    for (const key of FIELD_ARRAY_KEYS) {
+        const arr = (m[key] as TestField[] | undefined) ?? [];
+        arr.forEach((f) => f.name && knownFields.add(f.name));
+    }
+    const knownColumns = new Set<string>(
+        Object.keys(((m.raw_data as any)?.columns ?? {}) as Record<string, unknown>)
+    );
+
+    const resolveRef = (a: ChartAxis | ChartSeries): { key: string; ok: boolean } | null => {
+        if (a.field && a.field.trim()) {
+            return { key: a.field, ok: knownFields.has(a.field) };
+        }
+        if (a.column && a.column.trim()) {
+            return { key: a.column, ok: knownColumns.has(a.column) };
+        }
+        return null;
+    };
+
+    const views = (m.views as Record<string, any>) ?? {};
+    for (const [viewId, view] of Object.entries(views)) {
+        if (view?.x) {
+            const ref = resolveRef(view.x);
+            if (ref && !ref.ok) {
+                errs.push({
+                    path: `views.${viewId}.x`,
+                    message: `${methodId}.views.${viewId}: x.field/column "${ref.key}" does not match any field or raw_data column`,
+                });
+            }
+        }
+        const ys: ChartSeries[] = view?.y ?? [];
+        ys.forEach((s, i) => {
+            const ref = resolveRef(s);
+            if (ref && !ref.ok) {
+                errs.push({
+                    path: `views.${viewId}.y.${i}`,
+                    message: `${methodId}.views.${viewId}.y[${i}]: field/column "${ref.key}" does not match any field or raw_data column`,
+                });
+            }
+        });
+    }
+
+    // Raw-data blob_name non-empty.
+    const rd = m.raw_data as any;
+    if (rd) {
+        if (!rd.blob_name || String(rd.blob_name).trim() === '') {
+            errs.push({ path: 'raw_data.blob_name', message: `${methodId}.raw_data: blob_name is empty` });
+        }
+    }
+
+    return errs;
+}
+
+/**
+ * Validate a whole methods map. Returns errors grouped by methodId.
+ * Useful for the master-detail sidebar (display an error count per row).
+ */
+export function validateMethods(methods: Record<string, TestMethod>): Record<string, ValidationError[]> {
+    const out: Record<string, ValidationError[]> = {};
+    for (const [id, m] of Object.entries(methods)) {
+        const errs = validateMethod(id, m);
+        if (errs.length > 0) out[id] = errs;
+    }
+    return out;
+}

package/src/hooks/useAmsAssetTypes.ts

@@ -0,0 +1,70 @@
+/**
+ * useAmsAssetTypes — fetch the AMS asset-type catalog.
+ *
+ * Used by the TIS editor's AssetRefsEditor to populate the asset_type
+ * dropdown with real values instead of free-form text. Falls back to
+ * an empty array on error (the dropdown degrades gracefully to a text
+ * field).
+ *
+ * Wraps `ams.list_schemas`, which returns the merged catalog of
+ * built-in + project-declared asset types. Accepts an `invoker` override
+ * for the playground / tests.
+ */
+
+import { useCallback, useContext, useEffect, useState } from 'react';
+import { EventEmitterContext } from '../core/EventEmitterContext';
+import { MessageType } from '../hub/CommandMessage';
+import type { TisIpcInvoker } from './useTisConfig';
+
+export interface UseAmsAssetTypesResult {
+    types: string[];
+    loading: boolean;
+    error: string | null;
+    refresh: () => Promise<void>;
+}
+
+export function useAmsAssetTypes(options?: { invoker?: TisIpcInvoker }): UseAmsAssetTypesResult {
+    const ctx = useContext(EventEmitterContext);
+    const invoker: TisIpcInvoker = options?.invoker
+        ?? (async (topic, payload) => {
+            return await ctx.invoke(topic as any, MessageType.Request, payload as any);
+        });
+
+    const [types, setTypes] = useState<string[]>([]);
+    const [loading, setLoading] = useState<boolean>(true);
+    const [error, setError] = useState<string | null>(null);
+
+    const refresh = useCallback(async () => {
+        setLoading(true);
+        try {
+            const resp = await invoker('ams.list_schemas', {});
+            if (!resp.success) {
+                setError(resp.error_message ?? 'ams.list_schemas failed');
+                setTypes([]);
+                return;
+            }
+            // The wire shape carries asset types as a map keyed by type name.
+            // Be lenient about exact field names so we degrade gracefully if
+            // the server response evolves.
+            const d = resp.data ?? {};
+            const catalog =
+                (d.asset_types && typeof d.asset_types === 'object') ? d.asset_types :
+                (d.schemas && typeof d.schemas === 'object') ? d.schemas :
+                null;
+            setTypes(catalog ? Object.keys(catalog) : []);
+            setError(null);
+        } catch (e: any) {
+            setError(String(e?.message ?? e));
+            setTypes([]);
+        } finally {
+            setLoading(false);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [invoker]);
+
+    useEffect(() => {
+        void refresh();
+    }, [refresh]);
+
+    return { types, loading, error, refresh };
+}