@adcops/autocore-react 3.3.59 → 3.3.63

package/src/components/tis/TisProvider.tsx

@@ -90,6 +90,45 @@ export interface TisContextValue {
     selection: TisSelection;
     setSelection: (patch: TisSelectionPatch) => void;
 
+    // -----------------------------------------------------------------
+    // Project management — used by both <ProjectSelector> (Project tab)
+    // and <TestSetupForm> (Test tab) so they share a single source of
+    // truth for "which projects are real" and "what fields does the
+    // current one have." Keeping this in the provider rather than in
+    // TestSetupForm lets the two components live in different tabs
+    // without prop-threading.
+    // -----------------------------------------------------------------
+
+    /** Project IDs returned by the server's `tis.list_projects`. */
+    existingProjects: string[];
+    /** True when the project either exists on disk OR was created in
+     *  this browser session via `<ProjectInfoDialog mode="create">`.
+     *  This is the gate for staging — typing an unknown name is
+     *  invalid until + creates the directory. */
+    projectKnown: (id: string) => boolean;
+    /** Refresh `existingProjects` from the server. Called automatically
+     *  on `tis.project_created` / `tis.project_updated` broadcasts. */
+    refreshProjects: () => Promise<void>;
+    /** Add a project ID to the in-session "just created" set so the
+     *  form is immediately valid for it without round-tripping to
+     *  list_projects. Idempotent. */
+    markProjectJustCreated: (id: string) => void;
+
+    /** `project_fields` blob for the currently-selected project,
+     *  fetched from project.json. `{}` when nothing is loaded yet
+     *  (use `projectFieldsLoaded` to disambiguate "empty project" vs
+     *  "still fetching"). */
+    projectFields: Record<string, any>;
+    projectFieldsLoaded: boolean;
+    /** Fetch and cache project_fields for one project. Returns the
+     *  fields on success, or null on error. The current selection's
+     *  fields are also re-loaded automatically when `selection.projectId`
+     *  changes. */
+    loadProjectFields: (id: string) => Promise<Record<string, any> | null>;
+    /** Stash freshly-known project_fields without a round trip — used
+     *  by the create / edit dialogs after a successful submit. */
+    setProjectFields: (id: string, fields: Record<string, any>) => void;
+
     /** Fetch the run list for a (project, method?) pair. Method may be
      *  omitted to aggregate runs across every method in the project —
      *  the History tab uses this. */
@@ -120,6 +159,14 @@ const TisContext = createContext<TisContextValue>({
     state: EMPTY_STATE,
     selection: EMPTY_SELECTION,
     setSelection: () => {},
+    existingProjects: [],
+    projectKnown: () => false,
+    refreshProjects: async () => {},
+    markProjectJustCreated: () => {},
+    projectFields: {},
+    projectFieldsLoaded: false,
+    loadProjectFields: async () => null,
+    setProjectFields: () => {},
     fetchRuns: async () => [],
     fetchRun: async () => null,
     runCache: {},
@@ -294,6 +341,33 @@ export const TisProvider: React.FC<TisProviderProps> = ({ children, defaultMetho
         }));
     }, []);
 
+    // -----------------------------------------------------------------
+    // Auto-clear pins on a new active run.
+    //
+    // The server broadcasts `tis.active_run_id` immediately at
+    // `start_test` (before any cycle is added). When that scalar
+    // transitions to a new, non-empty value, any pins the operator
+    // set — typically by clicking a row in <ResultHistoryTable> —
+    // would otherwise keep <TestDataView> stuck on the old run. We
+    // drop all four pins here so `selection` falls through to the
+    // active broadcast scalars and the Data view follows the live
+    // test automatically.
+    //
+    // Pins set *after* the new run begins (e.g., the operator opens
+    // History mid-test and clicks a historical row) are honoured —
+    // they're set after this effect runs and they win until the
+    // next Start. End-of-test (active flips false) doesn't clear
+    // either: active_run_id keeps the just-finished run's value, so
+    // the operator can still read its results.
+    const prevActiveRunRef = useRef('');
+    useEffect(() => {
+        const newRunId = state.activeRunId;
+        if (newRunId && newRunId !== prevActiveRunRef.current) {
+            prevActiveRunRef.current = newRunId;
+            setPins({ projectId: null, methodId: null, sampleId: null, runId: null });
+        }
+    }, [state.activeRunId]);
+
     // -----------------------------------------------------------------
     // Fetchers
     // -----------------------------------------------------------------
@@ -340,11 +414,111 @@ export const TisProvider: React.FC<TisProviderProps> = ({ children, defaultMetho
 
     const runCache = useMemo(() => ({ ...cacheRef.current }), [cacheVersion]);
 
+    // -----------------------------------------------------------------
+    // Project management state
+    //
+    // Mirrors what TestSetupForm used to track locally, but lifted up
+    // here so <ProjectSelector> on the Project tab and <TestSetupForm>
+    // on the Test tab share a single source of truth. Without this
+    // lift, the two tabs would each fire their own list_projects and
+    // disagree on which IDs are valid.
+    // -----------------------------------------------------------------
+    const [existingProjects, setExistingProjects] = useState<string[]>([]);
+    const justCreatedRef = useRef<Set<string>>(new Set());
+    const [projectsTick, setProjectsTick] = useState(0); // bumps on Set mutation
+    const [projectFieldsCache, setProjectFieldsCache] = useState<Record<string, Record<string, any>>>({});
+
+    const refreshProjects = useCallback(async () => {
+        try {
+            const resp: any = await invoke('tis.list_projects' as any, MessageType.Request, {} as any);
+            if (resp?.success && resp.data?.projects) {
+                setExistingProjects(resp.data.projects as string[]);
+            }
+        } catch (e) {
+            console.error('[TisProvider] tis.list_projects failed:', e);
+        }
+    }, [invoke]);
+
+    const markProjectJustCreated = useCallback((id: string) => {
+        if (!id) return;
+        if (justCreatedRef.current.has(id)) return;
+        justCreatedRef.current.add(id);
+        setProjectsTick(t => t + 1);
+    }, []);
+
+    const projectKnown = useCallback((id: string) => {
+        if (!id) return false;
+        if (justCreatedRef.current.has(id)) return true;
+        return existingProjects.includes(id);
+        // existingProjects + projectsTick are deps but useCallback
+        // closes over them; consumers read current values fine.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [existingProjects, projectsTick]);
+
+    const setProjectFields = useCallback((id: string, fields: Record<string, any>) => {
+        if (!id) return;
+        setProjectFieldsCache(prev => ({ ...prev, [id]: fields }));
+    }, []);
+
+    const loadProjectFields = useCallback(async (id: string): Promise<Record<string, any> | null> => {
+        if (!id) return null;
+        try {
+            const resp: any = await invoke('tis.read_project' as any, MessageType.Request, { project_id: id } as any);
+            if (resp?.success) {
+                const fields = (resp.data?.project_fields ?? {}) as Record<string, any>;
+                setProjectFieldsCache(prev => ({ ...prev, [id]: fields }));
+                return fields;
+            }
+        } catch (e) {
+            console.warn('[TisProvider] tis.read_project failed:', e);
+        }
+        return null;
+    }, [invoke]);
+
+    // Initial project list load + refresh on server-side mutation
+    // broadcasts. Mark-just-created is purely local; the server
+    // broadcasts kick the persisted list back into sync if a project
+    // was added by another client (or the next time `acctl` writes a
+    // new directory).
+    useEffect(() => { void refreshProjects(); }, [refreshProjects]);
+
+    useEffect(() => {
+        const onCreated = () => { void refreshProjects(); };
+        const onUpdated = (payload: any) => {
+            const pid = typeof payload?.project_id === 'string' ? payload.project_id : '';
+            if (pid) void loadProjectFields(pid);
+        };
+        const id1 = subscribe('tis.project_created', onCreated);
+        const id2 = subscribe('tis.project_updated', onUpdated);
+        return () => { unsubscribe(id1); unsubscribe(id2); };
+    }, [subscribe, unsubscribe, refreshProjects, loadProjectFields]);
+
+    // Auto-fetch project_fields whenever the selection lands on a
+    // known project we don't yet have cached. The Test tab's stage
+    // payload depends on this.
+    useEffect(() => {
+        const pid = selection.projectId;
+        if (!pid || !projectKnown(pid)) return;
+        if (projectFieldsCache[pid] !== undefined) return;
+        void loadProjectFields(pid);
+    }, [selection.projectId, projectKnown, projectFieldsCache, loadProjectFields]);
+
+    const projectFields = projectFieldsCache[selection.projectId] ?? {};
+    const projectFieldsLoaded = projectFieldsCache[selection.projectId] !== undefined;
+
     const value: TisContextValue = useMemo(() => ({
         schemas, defaultMethodId, schemasLoaded,
         state, selection, setSelection,
+        existingProjects, projectKnown, refreshProjects, markProjectJustCreated,
+        projectFields, projectFieldsLoaded, loadProjectFields, setProjectFields,
         fetchRuns, fetchRun, runCache,
-    }), [schemas, defaultMethodId, schemasLoaded, state, selection, setSelection, fetchRuns, fetchRun, runCache]);
+    }), [
+        schemas, defaultMethodId, schemasLoaded,
+        state, selection, setSelection,
+        existingProjects, projectKnown, refreshProjects, markProjectJustCreated,
+        projectFields, projectFieldsLoaded, loadProjectFields, setProjectFields,
+        fetchRuns, fetchRun, runCache,
+    ]);
 
     return <TisContext.Provider value={value}>{children}</TisContext.Provider>;
 };
@@ -356,6 +530,23 @@ export const TisProvider: React.FC<TisProviderProps> = ({ children, defaultMetho
 export const useTis           = () => useContext(TisContext);
 export const useTisSchemas    = () => useContext(TisContext).schemas;
 export const useTisState      = () => useContext(TisContext).state;
+/**
+ * Tuple of `[selection, setSelection]`.
+ *
+ * `selection` has four fields — `projectId`, `methodId`, `sampleId`,
+ * `runId`. Each one falls through to the matching `tis.active_*`
+ * broadcast scalar when no pin is set. Pins are set by passing a
+ * concrete value to `setSelection`; pass `null` to clear a pin and
+ * resume auto-following.
+ *
+ * **Auto-clear on Start:** when a new test becomes active (the
+ * `tis.active_run_id` scalar transitions to a new non-empty value),
+ * the provider drops all four pins automatically. This is what makes
+ * `<TestDataView>` follow the live run after an operator has been
+ * browsing history — they don't have to click anything to "switch
+ * to the live test." Pins set *after* the new run begins (mid-test
+ * History click) are honoured until the next Start.
+ */
 export const useTisSelection  = () => {
     const { selection, setSelection } = useContext(TisContext);
     return [selection, setSelection] as const;

package/src/core/AutoCoreTagContext.tsx

@@ -151,13 +151,29 @@ const sleep = (ms: number) => new Promise(resolve => setTimeout(resolve, ms));
  * @param props.tags - List of tag configurations (tagName, fqdn, etc.)
  * @param props.scales - Map of scale definitions (name, factor, label)
  * @param props.eagerRead - If true, automatically fetches initial values on mount
+ * @param props.flushIntervalMs - Maximum rate at which broadcast updates trigger
+ *   React state changes. Broadcasts arriving faster than this are coalesced
+ *   per-tag (latest-value-wins) and flushed in a single batched render at most
+ *   once per interval.
+ *
+ *   Default `33` (≈30 FPS) keeps Firefox smooth even when the controller scan
+ *   rate is 2–4 kHz. The wire still carries every change-of-value broadcast —
+ *   this only paces the React reconciliation cost, which dominates render
+ *   budget. To also reduce wire bandwidth (relevant on poor links / Tailscale
+ *   over slow WiFi), see the connection-level rate cap (server-side).
+ *
+ *   Set to `0` to disable throttling and apply every broadcast immediately
+ *   (matches pre-throttle behaviour). Initial-load `eagerRead` values are
+ *   never throttled — they bypass this path entirely so the page renders
+ *   fully populated on mount.
  */
 export const AutoCoreTagProvider: React.FC<{
     children: ReactNode;
     tags: readonly TagConfig[];
     scales?: Record<string, ScaleConfig>;
     eagerRead?: boolean;
-}> = ({ children, tags, scales, eagerRead = true }) => {
+    flushIntervalMs?: number;
+}> = ({ children, tags, scales, eagerRead = true, flushIntervalMs = 33 }) => {
     const startedRef = useRef(false);
 
     // PERFORMANCE: Memoize default scales to ensure reference stability.
@@ -281,25 +297,107 @@ export const AutoCoreTagProvider: React.FC<{
         });
     }, [tags, toDisplay]);
 
+    // -----------------------------------------------------------------
+    // Throttle: broadcast updates are coalesced per tag and flushed in
+    // a single batched setState at most once per `flushIntervalMs`. This
+    // exists because every broadcast that lands in `setRawValues` triggers
+    // a context-wide React reconciliation. With high-rate scan loops
+    // (3830 runs at 4 kHz) and ~10 fast-changing tags, that's tens of
+    // thousands of reconciliations per second — Firefox in particular
+    // stalls visibly. The batched flush keeps reconciliation at the
+    // `flushIntervalMs` rate (~30 FPS by default), regardless of how
+    // many broadcasts the wire delivers in between.
+    //
+    // Latest-value-wins: each tag keeps only its most recent raw + display
+    // value in the pending maps; intermediate values within a window are
+    // dropped. This is the right semantic for status indicators — the
+    // operator wants "where is X right now," not the path it took to get
+    // there. Event broadcasts (e.g., tis.cycle_added) don't go through
+    // this path; they're consumed by their own subscribers.
+    //
+    // The eagerRead path on mount writes directly to setRawValues (see
+    // `eagerPullNonADS` etc. above) and bypasses this throttle, so the
+    // initial render is fully populated.
+    // -----------------------------------------------------------------
+    const pendingRawRef     = useRef<Map<string, unknown>>(new Map());
+    const pendingDisplayRef = useRef<Map<string, unknown>>(new Map());
+    const flushTimerRef     = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+    const flushPending = useCallback(() => {
+        flushTimerRef.current = null;
+        const r = pendingRawRef.current;
+        const d = pendingDisplayRef.current;
+        if (r.size === 0 && d.size === 0) return;
+        pendingRawRef.current = new Map();
+        pendingDisplayRef.current = new Map();
+        setRawValues(prev => {
+            let next = prev;
+            r.forEach((v, k) => {
+                if (next[k] !== v) {
+                    if (next === prev) next = { ...prev };
+                    next[k] = v;
+                }
+            });
+            return next;
+        });
+        setValues(prev => {
+            let next = prev;
+            d.forEach((v, k) => {
+                if (next[k] !== v) {
+                    if (next === prev) next = { ...prev };
+                    next[k] = v;
+                }
+            });
+            return next;
+        });
+    }, []);
+
     /**
-     * Handles incoming value updates from the server.
-     * 
-     * 1. Updates `rawValues` (Source of Truth).
-     * 2. Computes and updates `values` (Display).
-     * 3. Uses functional state updates to ensure atomicity.
-     * 4. Keys by `tagName` for consistent access by hooks.
+     * Handles incoming broadcast value updates from the server.
+     *
+     * 1. Stages the raw and display values in per-tag pending maps
+     *    (latest-value-wins; intermediate values inside a window are
+     *    dropped).
+     * 2. Schedules (or piggybacks on) a flush timer that batches every
+     *    accumulated tag into a single setRawValues + setValues pass at
+     *    most once per `flushIntervalMs`.
+     * 3. When `flushIntervalMs === 0`, flushes synchronously — same as
+     *    the pre-throttle path.
      */
     const handleTagUpdate = useCallback((tag: TagConfig, raw: unknown) => {
-        // Store the raw controller value (source of truth for scaling)
-        setRawValues(prev =>
-            prev[tag.tagName] === raw ? prev : { ...prev, [tag.tagName]: raw }
-        );
-        // Compute and store the display value (with scaling/codecs applied)
         const display = toDisplay(tag, raw);
-        setValues(prev =>
-            prev[tag.tagName] === display ? prev : { ...prev, [tag.tagName]: display }
-        );
-    }, [toDisplay]);
+
+        if (flushIntervalMs <= 0) {
+            // Throttle disabled — preserve the original synchronous shape.
+            setRawValues(prev =>
+                prev[tag.tagName] === raw ? prev : { ...prev, [tag.tagName]: raw }
+            );
+            setValues(prev =>
+                prev[tag.tagName] === display ? prev : { ...prev, [tag.tagName]: display }
+            );
+            return;
+        }
+
+        pendingRawRef.current.set(tag.tagName, raw);
+        pendingDisplayRef.current.set(tag.tagName, display);
+        if (flushTimerRef.current === null) {
+            flushTimerRef.current = setTimeout(flushPending, flushIntervalMs);
+        }
+    }, [toDisplay, flushIntervalMs, flushPending]);
+
+    // Drain any pending updates on unmount so we don't leak the timer
+    // reference and so a late-arriving setState doesn't fire on a
+    // dead component during dev-mode StrictMode double-mounts.
+    useEffect(() => {
+        return () => {
+            if (flushTimerRef.current !== null) {
+                clearTimeout(flushTimerRef.current);
+                flushTimerRef.current = null;
+            }
+            pendingRawRef.current = new Map();
+            pendingDisplayRef.current = new Map();
+        };
+    }, []);
 
     /**
      * Eagerly fetches initial values for non-ADS domains (e.g., MODBUS).

package/src/themes/adc-dark/_extensions.scss

@@ -175,6 +175,21 @@
         gap: 2px;
     }
 
+    /* ---- ac-toolbar-tool-list: stacked text buttons in an OverlayPanel ---- */
+
+    .ac-toolbar-tool-list {
+        display: flex;
+        flex-direction: column;
+        min-width: 16rem;
+        padding: 2mm;
+    }
+
+    .ac-toolbar-tool-item {
+        justify-content: flex-start;
+        gap: 0.75rem;
+        margin: 2mm;
+    }
+
     /* ---- ac-form: content page form layout ---- */
 
     .ac-form {

package/src/themes/adc-dark/blue/adc_theme.scss

@@ -14,8 +14,15 @@
 // General Padding & Sizing
 $panelContentPadding: 0.5rem 0.75rem !default; // Affects panels, cards, dialogs, etc.
 $inputPadding: 0.5rem 0.75rem !default; // Affects all input fields
-$buttonPadding: 0.5rem 0.75rem !default; // Affects buttons
-$buttonIconOnlyPadding: 0.5rem 0 !default;
+// Buttons run one size class larger than the original lara baseline:
+// the previous "medium" was too small for our 1080p kiosk targets and
+// the workstation operators leaning on touchscreens. Each of small /
+// medium / large was bumped up one tier (+0.125rem on font and on each
+// padding axis), so the new "small" is the size the old "medium" was.
+// `.p-button-sm` and `.p-button-lg` overrides below carry the matching
+// numbers for the other two tiers.
+$buttonPadding: 0.625rem 0.875rem !default; // Affects buttons (medium/default)
+$buttonIconOnlyPadding: 0.625rem 0 !default;
 $inlineSpacing: 0.25rem !default; // Space between items like icons and text
 $borderRadius: 3px !default; // Sharper corners for a more "desktop" feel
 
@@ -24,8 +31,16 @@ $tableHeaderCellPadding: 0.5rem 0.75rem !default;
 $tableBodyCellPadding: 0.5rem 0.75rem !default;
 
 // Menu Sizing
-$menuitemPadding: 0.5rem 0.75rem !default;
-$horizontalMenuRootMenuitemPadding: 0.5rem 0.75rem !default;
+//
+// Bumped past the medium-button padding because menu items are
+// usually selected in a single tap on a touchscreen with imprecise
+// aim — slightly more vertical breathing room than a button gives a
+// touch target close to the 44 px iOS-HIG / WCAG 2.5.5 minimum at
+// our 1.125rem (~18 px) menu-item font-size: 18 + 2×12 = 42 px.
+// `.p-menuitem-link` font-size and `.p-menuitem-icon` size below
+// finish the picture (icons scale up alongside the text).
+$menuitemPadding: 0.75rem 1rem !default;
+$horizontalMenuRootMenuitemPadding: 0.75rem 1rem !default;
 
 
 // 2. Import the original lara-dark-blue theme
@@ -49,7 +64,7 @@ textarea {
 
 .p-button {
     padding: $buttonPadding;
-    font-size: 1rem;
+    font-size: 1.125rem;
     font-family: inherit;
     border-radius: $borderRadius;
     cursor: pointer;
@@ -61,7 +76,7 @@ textarea {
 
 .p-button.p-button-icon-only {
     padding: $buttonIconOnlyPadding;
-    width: 2.5rem;
+    width: 2.75rem;
 }
 
 // PrimeReact always renders a `<span class="p-button-label">&nbsp;</span>`
@@ -72,14 +87,16 @@ textarea {
     display: none;
 }
 
+// `.p-button-sm` lands at what used to be the medium baseline.
 .p-button.p-button-sm {
-    font-size: 0.875rem;
-    padding: 0.375rem 0.625rem;
+    font-size: 1rem;
+    padding: 0.5rem 0.75rem;
 }
 
+// `.p-button-lg` extends the same +0.125rem step past the new medium.
 .p-button.p-button-lg {
-    font-size: 1.125rem;
-    padding: 0.625rem 0.875rem;
+    font-size: 1.25rem;
+    padding: 0.75rem 1rem;
 }
 
 .p-inputtext {
@@ -133,6 +150,35 @@ textarea {
     border-bottom-right-radius: $borderRadius;
 }
 
+// Menu items (TieredMenu / Menu / SplitButton dropdown / ContextMenu).
+// Match the new medium-button font-size so SplitButton dropdowns don't
+// look noticeably smaller than the button that opened them, and bump
+// the leading icon a touch larger than the text so radio/check glyphs
+// read clearly on a touchscreen.
+.p-menuitem-link {
+    font-size: 1.125rem;
+}
+.p-menuitem-link .p-menuitem-icon {
+    font-size: 1.25rem;
+    width: 1.25rem;
+    height: 1.25rem;
+}
+
+// Input-list popup items (Dropdown / AutoComplete / MultiSelect /
+// CascadeSelect / TreeSelect / picklist filters). Vertical padding
+// for these is already at the touch-friendly lara default
+// (`$inputListItemPadding: 0.75rem 1.25rem`); we just bump the
+// font-size to the medium-button scale so options read at the same
+// visual weight as the button / menu items around them. Net target
+// height ≈ 18 px font + 24 px padding = 42 px, same as the menus.
+.p-dropdown-item,
+.p-autocomplete-item,
+.p-multiselect-item,
+.p-cascadeselect-item,
+.p-treeselect-item {
+    font-size: 1.125rem;
+}
+
 // TabView: ensure tabs are visibly tab-shaped with padding and spacing,
 // regardless of @layer cascade resolution.
 .p-tabview .p-tabview-nav {