@adcops/autocore-react 3.5.7 → 3.5.9

package/src/components/tis/TestRawDataView.tsx

@@ -24,6 +24,7 @@ import { Line } from 'react-chartjs-2';
 import type { ChartView, TestMethod } from './TestDataView';
 import { useTis } from './TisProvider';
 import { useRawCycleData } from './useRawCycleData';
+import { orderedViews } from './chartViews';
 
 ChartJS.register(
     CategoryScale, LinearScale, PointElement, LineElement,
@@ -55,13 +56,11 @@ export const TestRawDataView: React.FC<TestRawDataViewProps> = (props) => {
     const chartRef              = useRef<any>(null);
 
     // raw_trace-capable views only — cycle scatter lives in <TestDataView>.
-    const traceViews = useMemo(() => {
-        const out: { name: string; view: ChartView }[] = [];
-        for (const [name, v] of Object.entries(schema?.views ?? {})) {
-            if ((v as ChartView).type === 'raw_trace') out.push({ name, view: v as ChartView });
-        }
-        return out;
-    }, [schema]);
+    // In the author's order, same as the unified panel's picker.
+    const traceViews = useMemo(
+        () => orderedViews(schema?.views as Record<string, ChartView> | undefined, 'raw_trace'),
+        [schema],
+    );
 
     const [selectedView, setSelectedView] = useState<string | null>(
         traceViews.length > 0 ? traceViews[0].name : null,

package/src/components/tis/chartViews.ts

@@ -0,0 +1,104 @@
+/**
+ * Chart-view ordering.
+ *
+ * `views` is a JSON object and the server holds it in a `BTreeMap`, so what
+ * reaches the HMI is sorted by view id — never by the order anyone chose. That
+ * order is a real setting: the Data tab opens on the FIRST view, so whichever
+ * id happens to sort first becomes the default chart. Renaming views to spell
+ * an order is not an option (the id is the wire key, and codegen emits it).
+ *
+ * So the order is carried explicitly, per view, as `order`: an integer,
+ * ascending, renumbered densely by the editor's Move up / Move down.
+ *
+ * `order` is deliberately NOT modelled by the Rust `ChartView`. It rides in
+ * that struct's flattened `extra` map, the way `x_decimals`, `smooth` and
+ * `regions` already do, so a `tis.put_method` → `tis.save_config` round-trip
+ * preserves it with no server-side change to deploy.
+ *
+ * A view with no `order` sorts after every ordered one, by id — so a method
+ * that has never been through the editor keeps exactly the order it shows
+ * today, and a newly added view lands last instead of jumping to the front.
+ */
+
+/** Minimal shape this module needs; both the editor's and the runtime's
+ *  `ChartView` satisfy it. */
+export interface OrderableView {
+    order?: number;
+    type?: string;
+}
+
+/** A view together with its id — the id is the wire key, not a field. */
+export interface NamedView<V> {
+    name: string;
+    view: V;
+}
+
+/** Sort key for a view that declares no `order`: after all ordered views. */
+const UNORDERED = Number.MAX_SAFE_INTEGER;
+
+const orderOf = (v: OrderableView | undefined): number =>
+    typeof v?.order === 'number' && Number.isFinite(v.order) ? v.order : UNORDERED;
+
+/**
+ * The method's views in display order: by `order` ascending, then by id.
+ *
+ * @param views    The method's `views` map, as received from the server.
+ * @param ofType   Optional `type` filter (e.g. `'raw_trace'`).
+ */
+export function orderedViews<V extends OrderableView>(
+    views?: Record<string, V> | null,
+    ofType?: string,
+): NamedView<V>[] {
+    const out: NamedView<V>[] = [];
+    for (const [name, view] of Object.entries(views ?? {})) {
+        if (ofType && view?.type !== ofType) continue;
+        out.push({ name, view });
+    }
+    out.sort((a, b) => {
+        const d = orderOf(a.view) - orderOf(b.view);
+        return d !== 0 ? d : a.name.localeCompare(b.name);
+    });
+    return out;
+}
+
+/**
+ * Stamp `order` 0..n-1 onto `views` following `orderedIds`.
+ *
+ * Every view is renumbered, not just the moved one: dense integers mean the
+ * next move is a swap of two adjacent numbers, and a method that was
+ * previously unordered comes out fully ordered after one Move rather than
+ * half-and-half.
+ *
+ * Ids in `views` but missing from `orderedIds` keep their existing `order`
+ * and land after the renumbered ones.
+ */
+export function renumberViews<V extends OrderableView>(
+    views: Record<string, V>,
+    orderedIds: string[],
+): Record<string, V> {
+    const out: Record<string, V> = {};
+    orderedIds.forEach((id, i) => {
+        const v = views[id];
+        if (v) out[id] = { ...v, order: i };
+    });
+    for (const [id, v] of Object.entries(views)) {
+        if (!(id in out)) out[id] = v;
+    }
+    return out;
+}
+
+/**
+ * Move the view at `index` by `dir` (-1 up, +1 down) and renumber.
+ * Out-of-range moves return the map unchanged.
+ */
+export function moveView<V extends OrderableView>(
+    views: Record<string, V>,
+    index: number,
+    dir: -1 | 1,
+): Record<string, V> {
+    const ids = orderedViews(views).map(v => v.name);
+    const j = index + dir;
+    if (index < 0 || index >= ids.length || j < 0 || j >= ids.length) return views;
+    [ids[index], ids[j]] = [ids[j], ids[index]];
+    return renumberViews(views, ids);
+}

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

@@ -5,6 +5,7 @@ import { InputText } from 'primereact/inputtext';
 import { Dropdown } from 'primereact/dropdown';
 import { InputNumber } from 'primereact/inputnumber';
 import { FormRow } from '../../forms/FormRow';
+import { useEditDraft } from '../../forms/useEditDraft';
 import { DEFAULT_X_DECIMALS } from '../../tis/TestDataView';
 import type { ChartAxis, ChartSeries, ChartView } from '../types';
 
@@ -43,17 +44,30 @@ const blank = (): ChartView => ({
 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);
+    // One draft covering both edited values (the id is editable too), seeded
+    // once per open. Keyed on the view id rather than on `initial` — the
+    // parent rebuilds that object on every render of its own, and this editor
+    // re-renders with the live tag traffic underneath it, so an identity-keyed
+    // reseed threw away every keystroke as it was typed.
+    const { draft: form, setDraft: setForm, token } = useEditDraft(
+        visible,
+        initial?.viewId ?? '',
+        () => ({
+            viewId: initial?.viewId ?? '',
+            view: initial
+                ? (JSON.parse(JSON.stringify(initial.view)) as ChartView)
+                : blank(),
+        }),
+    );
+    const viewId = form.viewId;
+    const draft  = form.view;
+    const setViewId = (id: string) => setForm(f => ({ ...f, viewId: id }));
+    const setDraft  = (view: ChartView) => setForm(f => ({ ...f, view }));
 
-    useEffect(() => {
-        if (visible) {
-            setViewId(initial?.viewId ?? '');
-            setDraft(initial ? JSON.parse(JSON.stringify(initial.view)) : blank());
-            setError(null);
-        }
-    }, [visible, initial]);
+    const [error, setError] = useState<string | null>(null);
+    // Clears on open and on a switch to another view — `token` changes on
+    // exactly those transitions and on no other render.
+    useEffect(() => { setError(null); }, [token]);
 
     const validate = (): string | null => {
         if (!viewId.trim()) return 'View ID is required.';

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

@@ -7,6 +7,7 @@ import { Dropdown } from 'primereact/dropdown';
 import { Checkbox } from 'primereact/checkbox';
 import { InputNumber } from 'primereact/inputnumber';
 import { FormRow } from '../../forms/FormRow';
+import { useEditDraft } from '../../forms/useEditDraft';
 import type { TestField, AggFn, AggFrom, AggScope, AggregateSpec } from '../types';
 // One home for bound parsing/formatting — shared with the operator-facing
 // form so the editor and the runtime can never disagree on what a bound is.
@@ -82,11 +83,31 @@ export const TestFieldDialog: React.FC<TestFieldDialogProps> = ({
     isResultsField = false, isCycleConfigField = false,
     cycleFieldNames = [], resultsFieldNames = [],
 }) => {
-    const [draft, setDraft] = useState<TestField>(blank);
-    // `default` is edited as free text so a numeric literal, a string, or an
-    // `${fqdn}` token can all be entered in one field; it's coerced on save.
-    const [defaultText, setDefaultText] = useState<string>('');
+    // The field under edit plus its free-text Default, as one draft seeded
+    // once per open. `default` is edited as free text so a numeric literal, a
+    // string, or an `${fqdn}` token can all be entered in one field; it's
+    // coerced on save.
+    //
+    // Keyed on the field NAME, not on the `initial` object: this editor
+    // re-renders with the live tag traffic underneath it, and an
+    // identity-keyed reseed discards the operator's typing (see
+    // useEditDraft).
+    const { draft: form, setDraft: setForm, token } = useEditDraft(
+        visible,
+        initial?.name ?? '',
+        () => ({
+            field: initial ? { ...initial } : { ...blank },
+            defaultText: initial?.default == null ? '' : String(initial.default),
+        }),
+    );
+    const draft       = form.field;
+    const defaultText = form.defaultText;
+    const setDraft       = (field: TestField) => setForm(f => ({ ...f, field }));
+    const setDefaultText = (defaultText: string) => setForm(f => ({ ...f, defaultText }));
+
     const [error, setError] = useState<string | null>(null);
+    // Clears on open and on a switch to another field, and on no other render.
+    useEffect(() => { setError(null); }, [token]);
 
     // The quantity names this machine actually declares, from the resolved
     // units table. Offered as a dropdown so an author picks a row that exists
@@ -99,14 +120,6 @@ export const TestFieldDialog: React.FC<TestFieldDialogProps> = ({
         [scales],
     );
 
-    useEffect(() => {
-        if (visible) {
-            setDraft(initial ? { ...initial } : { ...blank });
-            setDefaultText(initial?.default == null ? '' : String(initial.default));
-            setError(null);
-        }
-    }, [visible, initial]);
-
     // Turn the free-text Default into its stored form: an `${fqdn}` token and
     // other non-numerics stay strings; numeric/bool literals are stored typed.
     const coerceDefault = (s: string): unknown => {

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

@@ -3,6 +3,7 @@ import { DataTable } from 'primereact/datatable';
 import { Column } from 'primereact/column';
 import { Button } from 'primereact/button';
 import { FormSection } from '../../forms/FormSection';
+import { moveView, orderedViews } from '../../tis/chartViews';
 import { ChartViewDialog } from './ChartViewDialog';
 import type { ChartView, TestField, TestMethod } from '../types';
 
@@ -19,8 +20,11 @@ interface ViewRow {
 
 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 ?? '',
+    // Display order, not id order — the operator sets it with the arrows and
+    // the runtime reads the same `order` key. The first row is the view the
+    // Data tab opens on.
+    const rows: ViewRow[] = orderedViews(views).map(({ name, view }) => ({
+        id: name, title: view.title ?? '', type: view.type ?? '',
     }));
 
     const [dialogOpen, setDialogOpen] = useState(false);
@@ -57,6 +61,14 @@ export const ViewsEditor: React.FC<ViewsEditorProps> = ({ method, onChange }) =>
         setDialogOpen(false);
     };
 
+    // Move up / down renumbers `order` densely across every view, so the next
+    // move is a swap of adjacent integers whatever the method started as.
+    const handleMove = (idx: number, dir: -1 | 1) => {
+        const next = moveView(views, idx, dir);
+        if (next === views) return;
+        onChange({ ...method, views: next });
+    };
+
     const handleRemove = (id: string) => {
         if (!window.confirm(`Remove view "${id}"?`)) return;
         const next = { ...views };
@@ -64,8 +76,22 @@ export const ViewsEditor: React.FC<ViewsEditorProps> = ({ method, onChange }) =>
         onChange({ ...method, views: next });
     };
 
-    const rowActions = (r: ViewRow) => (
+    const rowActions = (r: ViewRow, 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 === rows.length - 1}
+                onClick={() => handleMove(opts.rowIndex, 1)}
+                aria-label="Move down"
+            />
             <Button
                 icon="pi pi-pencil"
                 className="p-button-text p-button-sm"
@@ -85,14 +111,14 @@ export const ViewsEditor: React.FC<ViewsEditorProps> = ({ method, onChange }) =>
         <>
             <FormSection
                 title="Views"
-                description="Named chart definitions rendered by <TestDataView> (cycle_scatter) and <TestRawDataView> (raw_trace)."
+                description="Named chart definitions rendered by <TestDataView> (cycle_scatter) and <TestRawDataView> (raw_trace). Top to bottom is the order the operator sees in the view picker, and the first one is the chart the Data tab opens on."
                 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' }} />
+                    <Column header="" body={rowActions} style={{ width: '10rem' }} />
                 </DataTable>
             </FormSection>
             <ChartViewDialog

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

@@ -104,6 +104,12 @@ export interface ChartView {
      * prints 17-digit ticks.
      */
     x_decimals?: number;
+    /**
+     * Position in the view picker, ascending. Set by the editor's Move
+     * up / Move down; see `components/tis/chartViews.ts` for why the order
+     * cannot just be the order of the keys.
+     */
+    order?: number;
 }
 
 export type RawColumnSource = 'time' | 'derived' | string; // also `ni.<daq>.channels.<name>`

package/tools/tests/dist/tis-editor.entry.css

@@ -0,0 +1,90 @@
+.ac-formsection {
+    border: 1px solid var(--surface-d, #e2e8f0);
+    border-radius: 6px;
+    background: var(--surface-card, #fff);
+    margin-bottom: 1rem;
+}
+
+.ac-formsection__header {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    padding: 0.5rem 1rem;
+    border-bottom: 1px solid var(--surface-d, #e2e8f0);
+    background: var(--surface-b, #f8fafc);
+    border-top-left-radius: 6px;
+    border-top-right-radius: 6px;
+}
+
+.ac-formsection__title {
+    margin: 0;
+    font-size: 0.95rem;
+    font-weight: 600;
+}
+
+.ac-formsection__desc {
+    color: var(--text-color-secondary, #64748b);
+    display: block;
+    margin-top: 0.15rem;
+}
+
+.ac-formsection__actions {
+    display: flex;
+    gap: 0.5rem;
+}
+
+.ac-formsection__body {
+    padding: 0.75rem 1rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.ac-formrow {
+    display: grid;
+    grid-template-columns: minmax(8rem, 14rem) 1fr;
+    gap: 0.5rem 1rem;
+    align-items: start;
+}
+
+.ac-formrow--error .ac-formrow__field input,
+.ac-formrow--error .ac-formrow__field .p-inputtext {
+    border-color: #dc2626;
+}
+
+.ac-formrow__label {
+    font-weight: 500;
+    padding-top: 0.4rem;
+    display: flex;
+    flex-direction: column;
+}
+
+.ac-formrow__required {
+    color: #dc2626;
+}
+
+.ac-formrow__hint {
+    color: var(--text-color-secondary, #64748b);
+    font-weight: 400;
+    font-size: 0.75rem;
+    margin-top: 0.15rem;
+}
+
+.ac-formrow__field {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+}
+
+.ac-formrow__field > input,
+.ac-formrow__field > .p-inputtext,
+.ac-formrow__field > .p-dropdown,
+.ac-formrow__field > .p-inputtextarea {
+    width: 100%;
+}
+
+.ac-formrow__error {
+    color: #dc2626;
+    font-size: 0.75rem;
+}
+/*$vite$:1*/