@adcops/autocore-react 3.3.73 → 3.3.77

package/src/components/Indicator.tsx

@@ -1,194 +1,198 @@
 /*
  * Copyright (C) 2024 Automated Design Corp. All Rights Reserved.
- * Created Date: 2024-01-16 14:39:41
- * -----
- * Last Modified: 2025-09-05 14:52:12
- * -----
- * 
+ *
+ * <Indicator> — non-interactive visual state lamp.
+ *
+ * Two usage shapes are supported:
+ *
+ *   1. Icon / children mode (matches <IndicatorButton>):
+ *
+ *        <Indicator
+ *          className="ac-toolbar-icon-btn"
+ *          onColor={IndicatorColor.IndicatorGreen}
+ *          offColor={IndicatorColor.IndicatorRed}
+ *          value={controlPowerOk}
+ *        >
+ *          <i className="pi pi-power-off" />
+ *        </Indicator>
+ *
+ *      Renders a square (non-rounded) box whose background is driven by
+ *      `value` (and `onColor` / `offColor`). The children are layered on
+ *      top — typically an icon — and the box gets a subtle inset shadow
+ *      so it visually reads as a passive indicator rather than a button.
+ *
+ *   2. Legacy label mode:
+ *
+ *        <Indicator label="Pump Running" value={pumpOk} />
+ *
+ *      A small color swatch followed by a text label. Kept for callers
+ *      that pre-date the icon form.
+ *
+ * State source priority: explicit `value` prop > subscribed `topic` value.
+ * `undefined` displays as `invalidColor` (default black) — meaning "not
+ * available," not "off."
  */
 
-
-import React, { Component } from 'react';
-//import clsx from 'clsx';
+import React, { useContext, useEffect, useState } from 'react';
+import clsx from 'clsx';
 import { EventEmitterContext, type EventEmitterContextType } from '../core/EventEmitterContext';
-//import { IPositionContext } from '../core/PositionContext';
-import {IndicatorColor} from "../core/IndicatorColor";
-export {IndicatorColor}
-
-//import {Lamp} from "./Lamp";
-
-
-
-
-interface IndicatorProps {
-
+import { IndicatorColor } from '../core/IndicatorColor';
+export { IndicatorColor };
 
+export interface IndicatorProps {
     /**
-     * Label of the group/row. Can be any element.
-     * 
-     * ## Examples
-     * ```
-     * <Indicator label="Simple Text" />
-     * <Indicator label={<span><i className="pi pi-check"></i> Icon and Text</span>} />
-     * <Indicator label={<YourCustomIconComponent />} />
-     * ```
-     */
-    label? : React.ReactNode;
-
-
-    /**
-     * State to be displayed<br/>
-     *
-     * Available states: **on**, **off** and **not available**:
+     * State to be displayed.
      *
-     * * `true` is treated as **on**
-     * * `false` is treated as **off**
-     * * `undefined` is treated as **not available**
-     */
-    value?: boolean | undefined;
-    /**
-     * CSS color for **enabled** state
+     *   * `true`      → on
+     *   * `false`     → off
+     *   * `undefined` → not available (invalid color)
      */
+    value?: boolean;
+
+    /** CSS color when value is true. Defaults to IndicatorColor.IndicatorGreen. */
     onColor?: string;
-    /**
-     * CSS color for **disabled** state
-     */
+    /** CSS color when value is false. Defaults to IndicatorColor.IndicatorOff (gray). */
     offColor?: string;
-    /**
-     * CSS color for **not available** state
-     */
+    /** CSS color when value is undefined. Defaults to IndicatorColor.IndicatorInvalid (black). */
     invalidColor?: string;
-    /**
-     * Custom class name to be attached
-     */
-    className?: string;
 
     /**
-     * The topic to monitor to display. Optional. 
+     * Optional broadcast topic to subscribe to. The latest broadcast value
+     * is used when `value` is left undefined; an explicit `value` always
+     * wins so callers can drive the indicator from React state instead.
      */
     topic?: string;
 
+    /** Additional CSS class names applied to the outer box. */
+    className?: string;
 
-}
+    /** Inline style overrides for the outer box. */
+    style?: React.CSSProperties;
 
+    /**
+     * Legacy text label rendered next to a small color swatch. Mutually
+     * exclusive with `children` — pass one or the other. Plain strings or
+     * React nodes both work.
+     */
+    label?: React.ReactNode;
 
-interface IndicatorState {
-    subscribedValue?: boolean | null;
-    fontSize?: string;
+    /**
+     * Icon (or any node) to display on top of the colored backdrop.
+     * Use this for the modern square-button-shaped indicator, e.g.
+     * `<Indicator ...><i className="pi pi-power-off" /></Indicator>`.
+     */
+    children?: React.ReactNode;
 }
 
-
-export class Indicator extends Component<IndicatorProps, IndicatorState> {
-    static contextType = EventEmitterContext;
-    protected unsubscribeTopicId: number | null = null;
-
-    // Define default properties
-    static defaultProps = {
-        onColor: "green",
-        offColor: "gray",
-        invalidColor: "black"
-    };
-
-    constructor(props: IndicatorProps) {
-        super(props);
-        this.state = {
-            subscribedValue: props.value,
-            fontSize: "100%"
+/**
+ * Pick the color to paint based on the displayed state. Kept outside the
+ * component so the rendering logic is trivial to read.
+ */
+const pickColor = (
+    displayValue: boolean | undefined,
+    onColor: string,
+    offColor: string,
+    invalidColor: string,
+): string => {
+    if (displayValue === true) return onColor;
+    if (displayValue === false) return offColor;
+    return invalidColor;
+};
+
+export const Indicator: React.FC<IndicatorProps> = ({
+    value,
+    onColor = IndicatorColor.IndicatorGreen,
+    offColor = IndicatorColor.IndicatorOff,
+    invalidColor = IndicatorColor.IndicatorInvalid,
+    topic,
+    className,
+    style,
+    label,
+    children,
+}) => {
+    const { subscribe, unsubscribe } = useContext(EventEmitterContext) as EventEmitterContextType;
+
+    const [subscribedValue, setSubscribedValue] = useState<boolean | undefined>(undefined);
+
+    useEffect(() => {
+        if (!topic || !subscribe) return;
+        const token = subscribe(topic, (v: any) => {
+            // The Hub publishes any payload; coerce to boolean for boolean
+            // indicators. Non-boolean topics should use IndicatorRect instead.
+            setSubscribedValue(v === undefined || v === null ? undefined : !!v);
+        });
+        return () => {
+            try {
+                if (unsubscribe && token !== undefined) unsubscribe(token);
+            } catch {
+                /* no-op */
+            }
         };
-    }
-
-    componentDidMount() {
-        const { topic } = this.props;
-        if (topic && this.unsubscribeTopicId === null) {
-            const { subscribe } = this.context as EventEmitterContextType;
-            this.unsubscribeTopicId = subscribe(topic, (value: any) => {
-                this.setState({ subscribedValue: value });
-            });
-        }
-    }
-
-    componentDidUpdate(prevProps: IndicatorProps) {
-        if (prevProps.value !== this.props.value) {
-            this.setState({ subscribedValue: this.props.value });
-        }
-    }
-
-    componentWillUnmount() {
-        if (this.unsubscribeTopicId !== null) {
-            const { unsubscribe } = this.context as EventEmitterContextType;
-            unsubscribe(this.unsubscribeTopicId);
-            this.unsubscribeTopicId = null;
-        }
-    }
+    }, [topic, subscribe, unsubscribe]);
 
-    render() {
-        const { label, value, onColor, offColor, invalidColor } = this.props;
-        const { subscribedValue } = this.state;
-
-        //
-        // Load the value from the proper source.
-        // If the `value` property is undefined, that takes precedence.
-        // 
-        let displayValue = subscribedValue;
-        if (value !== undefined) {
-            displayValue = value;
-        }      
-
-        let color;
-        switch (displayValue) {
-            case true:
-                color = onColor;
-                break;
-            case false:
-                color = offColor;
-                break;
-            default:
-                color = invalidColor;
-                break;
-        }
-
-        // const style: React.CSSProperties = {
-        //     position: useAbsolutePositioning ? 'absolute' : 'relative',
-        //     display: useAbsolutePositioning ? "" : "inline-block",
-        //     verticalAlign: 'middle',
-        //     top: useAbsolutePositioning && y ? `${yOffset + adjScale * y}px` : undefined,
-        //     left: useAbsolutePositioning && x ? `${xOffset + adjScale * x}px` : undefined,
-        //     width: adjWidth ? `${adjWidth * adjScale}px` : undefined,
-        //     height: adjHeight ? `${adjHeight * adjScale}px` : undefined,
-        //     lineHeight: adjHeight ? `${adjHeight * adjScale}px` : undefined,
-        //     backgroundColor: color,
-        //     borderRadius: "20px"
-        // };
-
-
-        const groupStyle : React.CSSProperties = {
-            alignItems: "center",
-            // PrimeReact injects `.p-inputgroup { width: 100% }`, which makes
-            // this Indicator hog its parent flex row and squeeze siblings
-            // (e.g. an adjacent ToggleGroup's buttons wrap vertically).
-            // Size to content instead.
-            width: "auto",
-            flex: "0 0 auto",
-        };
+    // Explicit value prop wins over the subscription.
+    const displayValue = value !== undefined ? value : subscribedValue;
+    const color = pickColor(displayValue, onColor, offColor, invalidColor);
 
-        const lampDivStyle : React.CSSProperties = {
+    // Children mode: square, filled, inset look. Sized by the caller's
+    // className (e.g. `ac-toolbar-icon-btn`) so it lines up with sibling
+    // IndicatorButtons in the same toolbar.
+    if (children !== undefined && children !== null) {
+        const boxStyle: React.CSSProperties = {
             backgroundColor: color,
-            width: "22px"
+            color: 'white',
+            display: 'inline-flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            // Square corners distinguish a passive indicator from an
+            // interactive button (PrimeReact buttons round to ~6px).
+            borderRadius: 0,
+            // Subtle inset shadow reinforces "this is a readout, not a
+            // control." Light enough to stay readable against any of the
+            // IndicatorColor palette.
+            boxShadow: 'inset 0 1px 3px rgba(0, 0, 0, 0.45)',
+            boxSizing: 'border-box',
+            ...style,
         };
-
         return (
-
-            <div className="p-inputgroup" style={groupStyle} >
-                <span className="p-inputgroup-addon" style={lampDivStyle} >
-                    &nbsp;
-                </span>
-                <span className="p-inputgroup-addon">
-                    {label}
-                </span>
-            </div>
-
+            <span
+                className={clsx('indicator', className)}
+                style={boxStyle}
+                role="status"
+                aria-label={typeof label === 'string' ? label : undefined}
+            >
+                {children}
+            </span>
         );
     }
-}
+
+    // Legacy label mode: small color swatch + text. Kept so existing
+    // <Indicator label="..." /> callers don't have to migrate. The
+    // `p-inputgroup` width:auto guard prevents PrimeReact from stretching
+    // this to fill its parent flex row.
+    const groupStyle: React.CSSProperties = {
+        alignItems: 'center',
+        width: 'auto',
+        flex: '0 0 auto',
+        ...style,
+    };
+    const lampStyle: React.CSSProperties = {
+        backgroundColor: color,
+        width: '22px',
+        borderRadius: 0,
+        boxShadow: 'inset 0 1px 2px rgba(0, 0, 0, 0.4)',
+    };
+
+    return (
+        <div className={clsx('p-inputgroup indicator', className)} style={groupStyle} role="status">
+            <span className="p-inputgroup-addon" style={lampStyle}>
+                &nbsp;
+            </span>
+            {label !== undefined && (
+                <span className="p-inputgroup-addon">{label}</span>
+            )}
+        </div>
+    );
+};
 
 export default Indicator;

package/src/components/ValueInput.tsx

@@ -75,7 +75,7 @@ interface ValueInputProps extends Omit<InputNumberProps, 'value' | 'size'>  {
     /**
      * The label for the ValueInput field.
      */
-    label: React.ReactNode | undefined;
+    label: React.ReactNode | undefined | null;
 
 
     /**
@@ -205,7 +205,7 @@ interface ValueInputProps extends Omit<InputNumberProps, 'value' | 'size'>  {
  * accepting and rejecting values and keyboard management.
  */
 export const ValueInput: React.FC<ValueInputProps> = ({
-    label,
+    label = undefined,
     value = null,
     min = undefined,
     max = undefined,

package/src/components/ams/AmsProvider.tsx

@@ -48,6 +48,13 @@ export interface AmsRole {
     description: string | null;
     /** Test method IDs whose start_test will pick up an asset in this role. */
     used_by: string[];
+    /** Module names whose configs reference this role via
+     *  `${ams.by_location.<location>.*}` placeholders. Surfaces in the
+     *  AIS Role dropdown so the operator can see *why* a role exists
+     *  even when no test method directly resolves it (e.g., a load_cell
+     *  feeding NI bridge channel calibration). Empty for purely
+     *  test-method-driven roles. */
+    used_by_modules: string[];
 }
 export type AmsRoleRegistry = { [assetType: string]: AmsRole[] };