@adcops/autocore-react 3.3.61 → 3.3.64

package/src/components/tis/TisProvider.tsx

@@ -341,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
     // -----------------------------------------------------------------
@@ -503,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,29 @@
         gap: 2px;
     }
 
+    /* ---- ac-toolbar-tool-list: stacked text buttons in an OverlayPanel ---- */
+    /*
+     * Spacing between buttons uses `gap` on the flex parent rather than
+     * `margin` on the buttons. PrimeReact's `.p-button` rules carry their
+     * own margin reset and tie our `.ac-toolbar-tool-item` on specificity;
+     * because PrimeReact's CSS loads later, its margin wins. Flex `gap`
+     * has no PrimeReact equivalent to fight.
+     */
+    .ac-toolbar-tool-list {
+        display: flex;
+        flex-direction: column;
+        min-width: 16rem;
+        padding: 2mm;
+        gap: 2mm;
+    }
+
+    /* `gap: 0.75rem` here is the *intra-button* spacing — between the
+     * leading icon and the text label — not between buttons. */
+    .ac-toolbar-tool-item {
+        justify-content: flex-start;
+        gap: 0.75rem;
+    }
+
     /* ---- 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 {