@adcops/autocore-react 3.5.7 → 3.5.11

package/dist/hooks/index.d.ts

@@ -1,4 +1,8 @@
 export { useAdsRegisterSymbols, useAdsWriteValue, useAdsTapValue } from "./adsHooks";
 export { useScaledValue, kMillimeters2Inches } from './useScaledValue';
 export * from './useServeletData';
+export { useGmVariables } from './useGmVariables';
+export type { UseGmVariablesResult, UseGmVariablesOptions, GmIpcInvoker } from './useGmVariables';
+export { useSequenceProducers, collectStoredNames } from './useSequenceProducers';
+export type { UseSequenceProducersResult, UseSequenceProducersOptions } from './useSequenceProducers';
 //# sourceMappingURL=index.d.ts.map

package/dist/hooks/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAUA,OAAO,EAAC,qBAAqB,EAAE,gBAAgB,EAAE,cAAc,EAAC,MAAM,YAAY,CAAC;AACnF,OAAO,EAAC,cAAc,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AACtE,cAAc,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAUA,OAAO,EAAC,qBAAqB,EAAE,gBAAgB,EAAE,cAAc,EAAC,MAAM,YAAY,CAAC;AACnF,OAAO,EAAC,cAAc,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AACtE,cAAc,mBAAmB,CAAC;AAKlC,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,YAAY,EAAE,oBAAoB,EAAE,qBAAqB,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAIlG,OAAO,EAAE,oBAAoB,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAClF,YAAY,EAAE,0BAA0B,EAAE,2BAA2B,EAAE,MAAM,wBAAwB,CAAC"}

package/dist/hooks/index.js

@@ -1 +1 @@
-export{useAdsRegisterSymbols,useAdsWriteValue,useAdsTapValue}from"./adsHooks";export{useScaledValue,kMillimeters2Inches}from"./useScaledValue";export*from"./useServeletData";
+export{useAdsRegisterSymbols,useAdsWriteValue,useAdsTapValue}from"./adsHooks";export{useScaledValue,kMillimeters2Inches}from"./useScaledValue";export*from"./useServeletData";export{useGmVariables}from"./useGmVariables";export{useSequenceProducers,collectStoredNames}from"./useSequenceProducers";

package/dist/hooks/useGmVariables.d.ts

@@ -0,0 +1,57 @@
+/**
+ * useGmVariables — the machine's GM variable table, for the variable picker.
+ *
+ * Reads `gm.get_variables`: `gm.get_catalog` with the metadata attached — type,
+ * description, quantity, and whether a UI may write the variable. Everything it
+ * returns already lives in project.json; the verb exists because a catalog of
+ * bare FQDN strings cannot tell an author what a name means, which is why every
+ * field that asks for one has been a text box.
+ *
+ * ## Degrading on an older server
+ *
+ * `gm.get_variables` was added alongside the picker, so a machine running an
+ * older `autocore_server` answers with an error. That is not a failure worth
+ * showing an operator: the picker still works, it just lists names without
+ * descriptions. So the hook falls back to the generated tag spec the HMI
+ * already has (`acTagSpec`), which carries FQDN, type and quantity but no prose,
+ * and reports the degradation through `partial` rather than through `error`.
+ *
+ * The fallback covers strictly less: `acctl codegen-tags` only emits variables
+ * marked `ux: true`, and a `${gm.…}` bound may legitimately name one that is
+ * not. Hence `partial` — a caller can say so on screen instead of quietly
+ * offering an incomplete list.
+ */
+import type { GmVariable } from '@adcops/autocore-varpick';
+import type { TagConfig } from '../core/AutoCoreTagTypes';
+export interface GmIpcInvoker {
+    (topic: string, payload: object): Promise<{
+        success: boolean;
+        data?: any;
+        error_message?: string;
+    }>;
+}
+export interface UseGmVariablesOptions {
+    invoker?: GmIpcInvoker;
+    /**
+     * The HMI's generated tag spec, used when the server cannot describe its
+     * own variables. Without it, an old server yields an empty picker.
+     */
+    fallbackTags?: readonly TagConfig[];
+    /** Skip the read entirely (e.g. while a dialog is closed). */
+    enabled?: boolean;
+}
+export interface UseGmVariablesResult {
+    variables: GmVariable[];
+    loading: boolean;
+    /**
+     * True when the list came from the generated tag spec rather than the
+     * server — names and types, no descriptions, and `ux: true` variables only.
+     */
+    partial: boolean;
+    /** Set only when there is nothing to show at all. */
+    error: string | null;
+    refresh: () => Promise<void>;
+}
+export declare function useGmVariables(options?: UseGmVariablesOptions): UseGmVariablesResult;
+export default useGmVariables;
+//# sourceMappingURL=useGmVariables.d.ts.map

package/dist/hooks/useGmVariables.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useGmVariables.d.ts","sourceRoot":"","sources":["../../src/hooks/useGmVariables.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAGH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAG3D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAE1D,MAAM,WAAW,YAAY;IACzB,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,OAAO,CAAC;QACtC,OAAO,EAAE,OAAO,CAAC;QACjB,IAAI,CAAC,EAAE,GAAG,CAAC;QACX,aAAa,CAAC,EAAE,MAAM,CAAC;KAC1B,CAAC,CAAC;CACN;AAED,MAAM,WAAW,qBAAqB;IAClC,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB;;;OAGG;IACH,YAAY,CAAC,EAAE,SAAS,SAAS,EAAE,CAAC;IACpC,8DAA8D;IAC9D,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,oBAAoB;IACjC,SAAS,EAAE,UAAU,EAAE,CAAC;IACxB,OAAO,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,OAAO,EAAE,OAAO,CAAC;IACjB,qDAAqD;IACrD,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,OAAO,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CAChC;AAyBD,wBAAgB,cAAc,CAAC,OAAO,CAAC,EAAE,qBAAqB,GAAG,oBAAoB,CAsDpF;AAED,eAAe,cAAc,CAAC"}

package/dist/hooks/useGmVariables.js

@@ -0,0 +1 @@
+import{useCallback,useContext,useEffect,useRef,useState}from"react";import{EventEmitterContext}from"../core/EventEmitterContext";import{MessageType}from"../hub/CommandMessage";function fromTagSpec(e){return e.filter(e=>"string"==typeof e.fqdn&&e.fqdn.toLowerCase().startsWith("gm.")).map(e=>({fqdn:e.fqdn,name:e.fqdn.slice(3),type:String(e.valueType??""),description:"",quantity:e.quantity??e.scale,ux:!0,nonvolatile:!1,writable:!0,is_signal:!1})).sort((e,t)=>e.name.localeCompare(t.name))}export function useGmVariables(e){const t=useContext(EventEmitterContext),a=!1!==e?.enabled,r=e?.invoker??(async(e,a)=>await t.invoke(e,MessageType.Request,a)),s=useRef(r);s.current=r;const n=useRef(e?.fallbackTags);n.current=e?.fallbackTags;const[o,i]=useState([]),[l,u]=useState(a),[c,f]=useState(!1),[m,g]=useState(null),p=useCallback(async()=>{u(!0);try{const e=await s.current("gm.get_variables",{}),t=e?.data?.variables;if(e?.success&&Array.isArray(t))return i(t),f(!1),void g(null);throw new Error(e?.error_message||"gm.get_variables returned no variables")}catch(e){const t=n.current;t&&t.length>0?(i(fromTagSpec(t)),f(!0),g(null)):(i([]),f(!1),g(String(e?.message??e)))}finally{u(!1)}},[]);return useEffect(()=>{a?p():u(!1)},[a,p]),{variables:o,loading:l,partial:c,error:m,refresh:p}}export default useGmVariables;

package/dist/hooks/useSequenceProducers.d.ts

@@ -0,0 +1,38 @@
+/**
+ * useSequenceProducers — the names a method's sequence actually records.
+ *
+ * A TIS cycle field has two possible producers and the method editor could only
+ * ever see one of them:
+ *
+ *  1. `source: "gm.<var>"` — the generated `add_cycle()` reads the tag.
+ *  2. `source: null` — the value arrives with the row, matched by NAME. On
+ *     gen4_ac that is the sequencer: `store_value` steps fill a row buffer and
+ *     `tis.add_cycle` writes `cycle_data` verbatim, without checking it against
+ *     `cycle_fields`.
+ *
+ * Because nothing checks the second one, both of its failure modes are silent:
+ * a declared column nothing stores is blank on every row forever, and a stored
+ * name with no column is recorded where nothing displays it. This hook reads
+ * the `.seq.json` so the editor can say so.
+ *
+ * The method id IS the sequence filename and the TIS method id — one name, set
+ * by the sequence workbench's New / Save As / Open. A product with no sequencer
+ * simply has no such file, which is why "could not read it" resolves to
+ * `undefined` and never to `[]`: an empty list would claim every cycle field
+ * has no producer.
+ */
+export interface UseSequenceProducersOptions {
+    /** Override the IPC layer (tests, playground). */
+    invoker?: (topic: string, messageType: number, payload: object) => Promise<any>;
+}
+export interface UseSequenceProducersResult {
+    /** `store_value` names, or `undefined` when there is no sequence to read. */
+    producedNames: string[] | undefined;
+    loading: boolean;
+    refresh: () => Promise<void>;
+}
+/** Every `store_value` name in a method, `cycle` bodies included. */
+export declare function collectStoredNames(method: any): string[];
+export declare function useSequenceProducers(methodId: string | null, options?: UseSequenceProducersOptions): UseSequenceProducersResult;
+export default useSequenceProducers;
+//# sourceMappingURL=useSequenceProducers.d.ts.map

package/dist/hooks/useSequenceProducers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSequenceProducers.d.ts","sourceRoot":"","sources":["../../src/hooks/useSequenceProducers.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAUH,MAAM,WAAW,2BAA2B;IACxC,kDAAkD;IAClD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,OAAO,CAAC,GAAG,CAAC,CAAC;CACnF;AAED,MAAM,WAAW,0BAA0B;IACvC,6EAA6E;IAC7E,aAAa,EAAE,MAAM,EAAE,GAAG,SAAS,CAAC;IACpC,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CAChC;AAED,qEAAqE;AACrE,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,GAAG,GAAG,MAAM,EAAE,CAiBxD;AAED,wBAAgB,oBAAoB,CAChC,QAAQ,EAAE,MAAM,GAAG,IAAI,EACvB,OAAO,CAAC,EAAE,2BAA2B,GACtC,0BAA0B,CAkC5B;AAED,eAAe,oBAAoB,CAAC"}

package/dist/hooks/useSequenceProducers.js

@@ -0,0 +1 @@
+import{useCallback,useContext,useEffect,useRef,useState}from"react";import{EventEmitterContext}from"../core/EventEmitterContext";import{MessageType}from"../hub/CommandMessage";const METHOD_DIR="methods",METHOD_EXT=".seq.json";export function collectStoredNames(e){const t=[],o=e=>{if(Array.isArray(e))for(const s of e)s&&"object"==typeof s&&("cycle"===s.type&&o(s.body),"store_value"===s.type&&"string"==typeof s.name&&""!==s.name.trim()&&(t.includes(s.name)||t.push(s.name)))};return o(e?.steps),t}export function useSequenceProducers(e,t){const o=useContext(EventEmitterContext),s=t?.invoker??((e,t,s)=>o.invoke(e,t,s)),r=useRef(s);r.current=s;const[n,a]=useState(void 0),[c,u]=useState(!1),i=useCallback(async()=>{if(e){u(!0);try{const t=`datastore.methods/${e}${METHOD_EXT}`,o=await r.current(t,MessageType.Read,{});if(!1===o?.success)return void a(void 0);const s=o?.data??o;if(!s||!Array.isArray(s.steps))return void a(void 0);a(collectStoredNames(s))}catch{a(void 0)}finally{u(!1)}}else a(void 0)},[e]);return useEffect(()=>{i()},[i]),{producedNames:n,loading:c,refresh:i}}export default useSequenceProducers;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adcops/autocore-react",
-  "version": "3.5.7",
+  "version": "3.5.11",
   "description": "A React component library for industrial user interfaces.",
   "private": false,
   "type": "module",
@@ -12,6 +12,7 @@
     "generate-docs": "typedoc",
     "build": "npm run clean && tsc && node ./tools/copy-distribution-files.cjs && npm run build-themes && npm run minify",
     "build:dev": "npm run clean && tsc && node ./tools/copy-distribution-files.cjs",
+    "test:tis-editor": "vite build --config tools/tests/vite.config.mjs && node tools/tests/tis-editor.test.mjs",
     "dev": "vite",
     "playground": "vite",
     "playground:build": "vite build",
@@ -21,7 +22,9 @@
     "release:patch": "npm version patch && npm publish",
     "release:minor": "npm version minor && npm publish",
     "release:major": "npm version major && npm publish",
-    "convert-assets": "npx @svgr/cli --typescript --out-dir src/assets/ src/assets/svg/ --jsx-runtime automatic --ignore-existing"
+    "convert-assets": "npx @svgr/cli --typescript --out-dir src/assets/ src/assets/svg/ --jsx-runtime automatic --ignore-existing",
+    "test:varpick": "vite build --config tools/tests/vite.config.mjs && node tools/tests/varpick.test.mjs",
+    "probe:live": "node tools/tests/live-server.probe.mjs"
   },
   "repository": {
     "type": "git",
@@ -53,6 +56,7 @@
     }
   },
   "dependencies": {
+    "@adcops/autocore-varpick": "^1.0.0",
     "@monaco-editor/react": "^4.7.0",
     "@tauri-apps/api": "^2.9.1",
     "chart.js": "^4.5.1",
@@ -82,6 +86,7 @@
     "@types/react-dom": "^18.2.7",
     "@types/react-transition-group": "^4.4.12",
     "@vitejs/plugin-react": "^6.0.2",
+    "jsdom": "^22.1.0",
     "primereact": "^10.9.7",
     "rimraf": "^6.0.1",
     "terser": "^5.44.0",

package/src/components/index.ts

@@ -38,6 +38,9 @@ export type { TestSetupFormProps } from './tis/TestSetupForm';
 export { TestSetupView }       from './tis/TestSetupView';
 export type { TestSetupViewProps } from './tis/TestSetupView';
 
+export { orderedViews, renumberViews, moveView } from './tis/chartViews';
+export type { NamedView, OrderableView } from './tis/chartViews';
+
 export { TestFieldRow }        from './tis/TestFieldRow';
 export type { TestFieldRowProps, CycleConfigScope } from './tis/TestFieldRow';
 
@@ -124,3 +127,20 @@ export { NetworkPanel } from './network/NetworkPanel';
 export type { NetworkPanelProps } from './network/NetworkPanel';
 export { StagedChangeBanner } from './network/StagedChangeBanner';
 export type { StagedChangeBannerProps } from './network/StagedChangeBanner';
+
+// -----------------------------------------------------------------------
+// Variable picker — a field with a button that opens a searchable, described
+// list of the machine's variables, so nobody has to type `gm.<something>`
+// from memory. Used by the TIS method editor; exported for any other
+// authoring surface that asks for a machine value.
+// -----------------------------------------------------------------------
+export { VariablePicker, VariableInput } from './varpick';
+export type { VariablePickerProps, VariableInputProps } from './varpick';
+export {
+    boundCatalog,
+    chartFieldCatalog,
+    configSourceCatalog,
+    cycleSourceCatalog,
+    rawSourceCatalog,
+} from './varpick';
+export type { TisCatalogContext } from './varpick';

package/src/components/tis/TestDataView.tsx

@@ -47,6 +47,7 @@ import { AutoCoreTagContext } from '../../core/AutoCoreTagContext';
 import { formatScaled } from '../../core/formatScaled';
 import type { ScaleConfig } from '../../core/AutoCoreTagTypes';
 import { useRawCycleData } from './useRawCycleData';
+import { orderedViews } from './chartViews';
 import { ScienceTable } from './ScienceTable';
 import type { ScienceColumn } from './ScienceTable';
 
@@ -171,6 +172,14 @@ export interface ChartView  {
      * table, CSV export and every calculation still see the full value.
      */
     x_decimals?: number;
+    /**
+     * Position in the view picker, ascending — the view with the lowest
+     * `order` is the one this panel opens on. Written by the TIS editor's
+     * Move up / Move down. See `chartViews.ts`: the keys of `views` arrive
+     * sorted by id, so the order an author chose has to be carried
+     * explicitly.
+     */
+    order?: number;
     /**
      * Optional shaded X-range bands drawn over the plot, declared per view
      * in project.json (static). These are drawn on every cycle.
@@ -336,16 +345,13 @@ export const TestDataView: React.FC<TestDataViewProps> = (props) => {
     const [availableCycles, setAvailableCycles] = useState<number[]>([]);
     const [selectedCycle, setSelectedCycle]     = useState<number | null>(null);
 
-    // All views, any type, in declaration order. The dropdown lists
-    // every one; the chart area dispatches on `view.type` to render
-    // either a scatter or a raw_trace chart from the appropriate data.
-    const allViews = useMemo(() => {
-        const out: { name: string; view: ChartView }[] = [];
-        for (const [name, v] of Object.entries(schema?.views ?? {})) {
-            out.push({ name, view: v as ChartView });
-        }
-        return out;
-    }, [schema]);
+    // All views, any type, in the author's order (see `orderedViews`). The
+    // dropdown lists every one; the chart area dispatches on `view.type` to
+    // render either a scatter or a raw_trace chart from the appropriate data.
+    const allViews = useMemo(
+        () => orderedViews(schema?.views as Record<string, ChartView> | undefined),
+        [schema],
+    );
 
     const [selectedView, setSelectedView] = useState<string | null>(
         allViews.length > 0 ? allViews[0].name : null,

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/TisConfigEditor.css

@@ -105,6 +105,17 @@
     font-size: 0.8rem;
 }
 
+/* A degradation, not a failure: the editor works, it just knows less. Amber
+ * rather than the red used for a real error. */
+.tis-editor__notice {
+    background: #fffbeb;
+    color: #92400e;
+    border-left: 3px solid #d97706;
+    padding: 0.5rem 1rem;
+    margin: 0.5rem 1rem;
+    font-size: 0.875rem;
+}
+
 .tis-editor__empty {
     flex: 1;
     display: flex;

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

@@ -31,6 +31,10 @@ import { SaveDiffDialog } from './editor/SaveDiffDialog';
 import type { TestMethod } from './types';
 
 import './TisConfigEditor.css';
+import { useGmVariables } from '../../hooks/useGmVariables';
+import { useSequenceProducers } from '../../hooks/useSequenceProducers';
+import { AuthoringContext } from './editor/AuthoringContext';
+import { AutoCoreTagContext } from '../../core/AutoCoreTagContext';
 
 export interface TisConfigEditorProps {
     /** Project ID. Today this is informational (the server hosts one
@@ -70,6 +74,11 @@ export const TisConfigEditor: React.FC<TisConfigEditorProps> = ({ projectId, inv
     );
 
     const tis = useTisConfig(projectId, { invoker: effectiveInvoker });
+
+    // What the variable pickers offer. Read once for the editor rather than
+    // per dialog: the table is ~100 rows and every field dialog wants it.
+    const { tags } = useContext(AutoCoreTagContext);
+    const gm = useGmVariables({ invoker: effectiveInvoker, fallbackTags: tags });
     const ams = useAmsAssetTypes({ invoker: effectiveInvoker });
     const [selectedId, setSelectedId] = useState<string | null>(null);
     const [draftError, setDraftError] = useState<string | null>(null);
@@ -101,6 +110,15 @@ export const TisConfigEditor: React.FC<TisConfigEditorProps> = ({ projectId, inv
     // Clear errors whenever the selected method changes.
     useEffect(() => { setDraftError(null); }, [selectedId]);
 
+    // The sequence that fills this method's cycle columns, if it has one. Keyed
+    // on the selected method because the method id IS the sequence filename.
+    const { producedNames } = useSequenceProducers(selectedId);
+
+    const authoring = useMemo(
+        () => ({ variables: gm.variables, producedNames, partial: gm.partial }),
+        [gm.variables, producedNames, gm.partial],
+    );
+
     const onApply = async (next: TestMethod) => {
         if (!selectedId) return;
         setBusy(true);
@@ -197,6 +215,7 @@ export const TisConfigEditor: React.FC<TisConfigEditorProps> = ({ projectId, inv
     };
 
     return (
+        <AuthoringContext.Provider value={authoring}>
         <div className="tis-editor">
             <header className="tis-editor__header">
                 <h2>
@@ -228,6 +247,17 @@ export const TisConfigEditor: React.FC<TisConfigEditorProps> = ({ projectId, inv
                 </div>
             )}
 
+            {/* Said out loud rather than left implicit: a picker that silently
+                lists two thirds of the machine sends an author hunting for a
+                variable that is there, just not offered. */}
+            {gm.partial && (
+                <div className="tis-editor__notice">
+                    This server cannot describe its own variables, so the pickers are
+                    listing only the variables published to this HMI, without descriptions.
+                    Update autocore_server to get the full list.
+                </div>
+            )}
+
             <div className="tis-editor__body">
                 <aside className="tis-editor__sidebar">
                     <div className="tis-editor__sidebar-actions">
@@ -321,6 +351,7 @@ export const TisConfigEditor: React.FC<TisConfigEditorProps> = ({ projectId, inv
                 onCancel={() => setSaveDialogOpen(false)}
             />
         </div>
+        </AuthoringContext.Provider>
     );
 };
 

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

@@ -0,0 +1,43 @@
+/**
+ * What the method editor's pickers can offer.
+ *
+ * A context rather than props because the fields that need it — a field
+ * dialog's Source, a bound, a chart axis, a raw column — sit three and four
+ * levels below the editor that fetches it, and threading the same two values
+ * through every intermediate component is how a prop list becomes noise.
+ *
+ * Everything here is optional. With none of it the pickers still open; they just
+ * have nothing to list, which is exactly the state the editor was in before they
+ * existed.
+ */
+
+import { createContext, useContext } from 'react';
+import type { GmVariable } from '@adcops/autocore-varpick';
+
+export interface AuthoringCatalogs {
+    /** The machine's GM variable table, from `gm.get_variables`. */
+    variables: GmVariable[];
+
+    /**
+     * `store_value` names in the selected method's sequence.
+     *
+     * `undefined` means "not looked up" — the host could not read the
+     * `.seq.json`, or this product has no sequencer. That is deliberately
+     * different from `[]`, which means "read it, and it stores nothing": the
+     * first must not claim a cycle field has no producer.
+     */
+    producedNames?: string[];
+
+    /**
+     * True when `variables` came from the generated tag spec rather than the
+     * server — names and types, no descriptions, `ux: true` only.
+     *
+     * Worth surfacing: a picker that silently lists two thirds of the machine
+     * is worse than one that says it is listing two thirds of the machine.
+     */
+    partial?: boolean;
+}
+
+export const AuthoringContext = createContext<AuthoringCatalogs>({ variables: [] });
+
+export const useAuthoringCatalogs = (): AuthoringCatalogs => useContext(AuthoringContext);

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

@@ -5,8 +5,11 @@ 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';
+import { VariableInput } from '../../varpick';
+import type { Catalog } from '@adcops/autocore-varpick';
 
 /** Upper bound on the editor's X-decimals spinner. Past ~6 the tick labels
  *  are wider than the gap between them, which is the problem this setting
@@ -30,6 +33,16 @@ export interface ChartViewDialogProps {
     onSave: (viewId: string, view: ChartView) => void;
     /** Known field/column names; offered as datalist suggestions. */
     knownKeys: string[];
+    /**
+     * The same names, grouped and described, for the picker button.
+     *
+     * Takes the view TYPE because it decides which list is the likely answer:
+     * a `raw_trace` plots trace columns, a `cycle_scatter` plots cycle fields.
+     * A datalist alone was not enough — it only appears once you start typing,
+     * which is no help when you do not know what to type, and it does not open
+     * at all on a touchscreen.
+     */
+    fieldCatalog?: (viewType: string) => Catalog;
     /** Other view ids already in use — for uniqueness validation. */
     siblingIds: string[];
 }
@@ -41,19 +54,32 @@ const blank = (): ChartView => ({
 });
 
 export const ChartViewDialog: React.FC<ChartViewDialogProps> = ({
-    visible, initial, onCancel, onSave, knownKeys, siblingIds,
+    visible, initial, onCancel, onSave, knownKeys, siblingIds, fieldCatalog,
 }) => {
-    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.';
@@ -110,10 +136,13 @@ export const ChartViewDialog: React.FC<ChartViewDialogProps> = ({
                 />
             </FormRow>
             <FormRow label={isRawTrace ? 'X column' : 'X field'} required>
-                <InputText
+                <VariableInput
                     value={(draft.x[axisKey] as string) ?? ''}
-                    onChange={(e) => setAxis({ [axisKey]: e.target.value } as ChartAxis)}
-                    list="known-keys"
+                    onChange={(v) => setAxis({ [axisKey]: v } as ChartAxis)}
+                    catalog={() => fieldCatalog?.(draft.type) ?? []}
+                    ariaLabel="Choose the X axis column"
+                    pickerTitle="X axis"
+                    pickerHint="A chart naming a column that does not exist draws an empty plot with no error, which reads as “the machine recorded nothing”."
                 />
             </FormRow>
             <FormRow label="X label">
@@ -159,11 +188,13 @@ export const ChartViewDialog: React.FC<ChartViewDialogProps> = ({
                         alignItems: 'center',
                     }}
                 >
-                    <InputText
+                    <VariableInput
                         placeholder={isRawTrace ? 'column' : 'field'}
                         value={(s[axisKey] as string) ?? ''}
-                        onChange={(e) => setSeries(i, { [axisKey]: e.target.value } as ChartSeries)}
-                        list="known-keys"
+                        onChange={(v) => setSeries(i, { [axisKey]: v } as ChartSeries)}
+                        catalog={() => fieldCatalog?.(draft.type) ?? []}
+                        ariaLabel={`Choose the column for series ${i + 1}`}
+                        pickerTitle="Y series"
                     />
                     <InputText
                         placeholder="label"

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

@@ -148,6 +148,7 @@ export const FieldArrayEditor: React.FC<FieldArrayEditorProps> = ({ arrayKey, me
                 siblingNames={fields.map(f => f.name)}
                 isResultsField={arrayKey === 'results_fields'}
                 isCycleConfigField={arrayKey === 'cycle_config_fields'}
+                isCycleField={arrayKey === 'cycle_fields'}
                 cycleFieldNames={(method.cycle_fields ?? []).map(f => f.name).filter(Boolean)}
                 resultsFieldNames={(method.results_fields ?? []).map(f => f.name).filter(Boolean)}
                 onCancel={() => setDialogOpen(false)}