@adcops/autocore-react 3.0.16 → 3.0.18

package/dist/components/ValueInput.d.ts

@@ -152,6 +152,7 @@ export declare class ValueInput extends React.Component<ValueInputProps, ValueIn
      * The component has been loaded into the DOM.
      */
     componentDidMount(): void;
+    componentDidUpdate(prevProps: ValueInputProps): void;
     private onBufferValue;
     /**
      * The user has elected to accept the input value. Validate and store, if valid.

package/dist/components/ValueInput.js

@@ -1 +1 @@
-import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import React,{createRef}from"react";import{InputNumber}from"primereact/inputnumber";import{Button}from"primereact/button";import{EventEmitterContext}from"../core/EventEmitterContext";export class ValueInput extends React.Component{constructor(t){super(t),Object.defineProperty(this,"inputRef",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),this.state={entryValue:t.value,currentValue:t.value,editing:!1},this.inputRef=createRef()}componentDidMount(){}onBufferValue(t){null!==t&&(this.state.editing?this.setState({entryValue:t}):this.setState({entryValue:this.state.currentValue,editing:!0},(()=>{setTimeout((()=>{this.inputRef.current&&this.inputRef.current.focus()}),0)})))}onAcceptValue(){null!==this.state.entryValue&&(this.setState({editing:!1,currentValue:this.state.entryValue}),this.props.onValueChanged&&this.props.onValueChanged(this.state.entryValue),void 0!==this.props.dispatchTopic&&this.context.dispatch({topic:this.props.dispatchTopic,payload:this.state.entryValue}))}onResetValue(){this.state.editing&&this.setState({currentValue:this.state.currentValue,entryValue:this.state.currentValue,editing:!1})}render(){return _jsxs("div",{children:[_jsxs("div",{className:"p-inputgroup flex-1",children:[_jsx("span",{className:"p-inputgroup-addon",children:this.props.label}),_jsx(InputNumber,{inputRef:this.inputRef,min:this.props.min,max:this.props.max,minFractionDigits:this.props.minPrecision,maxFractionDigits:this.props.maxPrecision,mode:this.props.mode,prefix:this.props.prefix,suffix:this.props.suffix,showButtons:this.props.showButtons,step:this.props.step,placeholder:this.props.placeholder,value:this.state.currentValue,onChange:t=>{this.onBufferValue(t.value)},buttonLayout:"horizontal",decrementButtonClassName:"p-button-danger",incrementButtonClassName:"p-button-success",incrementButtonIcon:"pi pi-plus",decrementButtonIcon:"pi pi-minus",locale:"en-US",currency:this.props.currency,onKeyDown:t=>{"Enter"===t.key?this.onAcceptValue():"Escape"===t.key&&this.onResetValue()},disabled:this.props.disabled,autoFocus:!1},this.state.editing?"editing":"not-editing"),_jsx(Button,{icon:"pi pi-check",disabled:this.props.disabled||!this.state.editing,className:"p-button-success",onClick:()=>this.onAcceptValue(),visible:this.state.editing,size:"small",autoFocus:!1}),_jsx(Button,{icon:"pi pi-times",disabled:this.props.disabled||!this.state.editing,className:"p-button-danger",onClickCapture:()=>this.onResetValue(),visible:this.state.editing,size:"small",autoFocus:!1})]}),void 0!==this.props.description&&_jsx("small",{children:this.props.description})]})}}Object.defineProperty(ValueInput,"contextType",{enumerable:!0,configurable:!0,writable:!0,value:EventEmitterContext}),Object.defineProperty(ValueInput,"defaultProps",{enumerable:!0,configurable:!0,writable:!0,value:{label:"",value:void 0,keyFilter:void 0,writeTopic:void 0,onValueChanged:void 0,description:void 0,prefix:void 0,suffix:void 0,disabled:!1,dispatchTopic:void 0,placeholder:void 0,validator:void 0,min:void 0,max:void 0,minPrecision:0,maxPrecision:3,mode:"decimal",showButtons:!1,step:1,locale:"en-US",currency:"USD"}});
+import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import React,{createRef}from"react";import{InputNumber}from"primereact/inputnumber";import{Button}from"primereact/button";import{EventEmitterContext}from"../core/EventEmitterContext";export class ValueInput extends React.Component{constructor(e){super(e),Object.defineProperty(this,"inputRef",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),this.state={entryValue:e.value,currentValue:e.value,editing:!1},this.inputRef=createRef()}componentDidMount(){}componentDidUpdate(e){e.value!==this.props.value&&this.setState({currentValue:this.props.value,entryValue:this.props.value,editing:!1})}onBufferValue(e){null!==e&&(this.state.editing?this.setState({entryValue:e}):this.setState({entryValue:e,editing:!0},(()=>{setTimeout((()=>{this.inputRef.current&&this.inputRef.current.focus()}),0)})))}onAcceptValue(){null!==this.state.entryValue&&(this.setState({editing:!1,currentValue:this.state.entryValue}),this.props.onValueChanged&&this.props.onValueChanged(this.state.entryValue),void 0!==this.props.dispatchTopic&&this.context.dispatch({topic:this.props.dispatchTopic,payload:this.state.entryValue}))}onResetValue(){this.state.editing&&this.setState({currentValue:this.state.currentValue,entryValue:this.state.currentValue,editing:!1})}render(){return _jsxs("div",{children:[_jsxs("div",{className:"p-inputgroup flex-1",children:[_jsx("span",{className:"p-inputgroup-addon",children:this.props.label}),_jsx(InputNumber,{inputRef:this.inputRef,min:this.props.min,max:this.props.max,minFractionDigits:this.props.minPrecision,maxFractionDigits:this.props.maxPrecision,mode:this.props.mode,prefix:this.props.prefix,suffix:this.props.suffix,showButtons:this.props.showButtons,step:this.props.step,placeholder:this.props.placeholder,value:this.state.currentValue,onChange:e=>{this.onBufferValue(e.value)},buttonLayout:"horizontal",decrementButtonClassName:"p-button-danger",incrementButtonClassName:"p-button-success",incrementButtonIcon:"pi pi-plus",decrementButtonIcon:"pi pi-minus",locale:"en-US",currency:this.props.currency,onKeyDown:e=>{"Enter"===e.key?this.onAcceptValue():"Escape"===e.key&&this.onResetValue()},disabled:this.props.disabled,autoFocus:!1},this.state.editing?"editing":"not-editing"),_jsx(Button,{icon:"pi pi-check",disabled:this.props.disabled||!this.state.editing,className:"p-button-success",onClick:()=>this.onAcceptValue(),visible:this.state.editing,size:"small",autoFocus:!1}),_jsx(Button,{icon:"pi pi-times",disabled:this.props.disabled||!this.state.editing,className:"p-button-danger",onClickCapture:()=>this.onResetValue(),visible:this.state.editing,size:"small",autoFocus:!1})]}),void 0!==this.props.description&&_jsx("small",{children:this.props.description})]})}}Object.defineProperty(ValueInput,"contextType",{enumerable:!0,configurable:!0,writable:!0,value:EventEmitterContext}),Object.defineProperty(ValueInput,"defaultProps",{enumerable:!0,configurable:!0,writable:!0,value:{label:"",value:void 0,keyFilter:void 0,writeTopic:void 0,onValueChanged:void 0,description:void 0,prefix:void 0,suffix:void 0,disabled:!1,dispatchTopic:void 0,placeholder:void 0,validator:void 0,min:void 0,max:void 0,minPrecision:0,maxPrecision:3,mode:"decimal",showButtons:!1,step:1,locale:"en-US",currency:"USD"}});

package/dist/core/EventEmitterContext.d.ts

@@ -102,6 +102,11 @@ export interface EventEmitterContextType {
      * @returns An object containing the current subscriptions, optionally filtered by topic.
      */
     getSubscriptions: (topic?: string) => Record<string, Subscription[]> | Subscription[];
+    /**
+     * Returns true if the Hub in use is connected to its source.
+     * @returns boolean
+     */
+    isConnected: () => boolean;
 }
 /**
  * A global context for managing event emission and subscription.

package/dist/core/EventEmitterContext.js

@@ -1 +1 @@
-import{jsx as _jsx}from"react/jsx-runtime";import{createContext,useState,useMemo}from"react";import{createHub,Hub}from"../hub";export{Hub};let globalSubscriptionId=1;export const EventEmitterContext=createContext({state:{subscriptions:{},nextSubscriptionId:1},dispatch:()=>{},subscribe:()=>0,invoke:async(t,s,e)=>Promise.resolve({data:{},success:!1,error_message:""}),unsubscribe:t=>{},hub:null,getSubscriptions:()=>[]});export const EventEmitterProvider=({children:t})=>{const[s,e]=useState({subscriptions:{},nextSubscriptionId:1}),i=useMemo((()=>createHub()),[]),r=t=>{const{topic:s,payload:i}=t;e((t=>(t.subscriptions[s]?.forEach((t=>t.callback(i))),{...t,eventData:i})))},o=(t,s)=>{globalSubscriptionId+=1;const i=globalSubscriptionId;return e((e=>({...e,subscriptions:{...e.subscriptions,[t]:[...e.subscriptions[t]||[],{id:i,callback:s}]},nextSubscriptionId:globalSubscriptionId+1}))),i},n=t=>{e((s=>{const e={...s.subscriptions};for(const s in e)e.hasOwnProperty(s)&&(e[s]=e[s].filter((s=>s.id!==t)),0===e[s].length&&delete e[s]);return{...s,subscriptions:e}}))},c=t=>t?s.subscriptions[t]||[]:s.subscriptions,u=useMemo((()=>({state:s,dispatch:r,subscribe:o,unsubscribe:n,invoke:i.invoke,hub:i,getSubscriptions:c})),[s,i]);return i.setContext(u),_jsx(EventEmitterContext.Provider,{value:u,children:t})};
+import{jsx as _jsx}from"react/jsx-runtime";import{createContext,useState,useMemo,useCallback}from"react";import{createHub,Hub}from"../hub";export{Hub};let globalSubscriptionId=1;export const EventEmitterContext=createContext({state:{subscriptions:{},nextSubscriptionId:1},dispatch:()=>{},subscribe:()=>0,invoke:async(t,s,e)=>Promise.resolve({data:{},success:!1,error_message:""}),unsubscribe:t=>{},hub:null,getSubscriptions:()=>[],isConnected:()=>!1});export const EventEmitterProvider=({children:t})=>{const[s,e]=useState({subscriptions:{},nextSubscriptionId:1}),i=useMemo((()=>createHub()),[]),r=useCallback((t=>{const{topic:s,payload:i}=t;e((t=>((t.subscriptions[s]||[]).forEach((t=>t.callback(i))),{...t,eventData:i})))}),[]),o=useCallback(((t,s)=>{globalSubscriptionId+=1;const i=globalSubscriptionId;return e((e=>({...e,subscriptions:{...e.subscriptions,[t]:[...e.subscriptions[t]||[],{id:i,callback:s}]},nextSubscriptionId:globalSubscriptionId+1}))),i}),[]),c=useCallback((t=>{e((s=>{const e={...s.subscriptions};return Object.keys(e).forEach((s=>{e[s]=e[s].filter((s=>s.id!==t)),0===e[s].length&&delete e[s]})),{...s,subscriptions:e}}))}),[]),n=useCallback((t=>t?s.subscriptions[t]||[]:s.subscriptions),[]),u=useMemo((()=>({state:s,dispatch:r,subscribe:o,unsubscribe:c,invoke:i.invoke,hub:i,getSubscriptions:n,isConnected:i.isConnected})),[s,i]);return i.setContext(u),_jsx(EventEmitterContext.Provider,{value:u,children:t})};

package/dist/hooks/useAdsRegisterSymbol.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Custom hook for registering symbols and subscribing to updates on the
+ * ADS domain via the EventEmitterContext.
+ * This hook abstracts the common pattern of registering symbols and handling subscriptions
+ * to updates in components that need real-time data from a backend service.
+ *
+ * @param setters A mapping of state setter functions, where each key corresponds to a piece of state
+ *                related to a symbol, and each value is the setter function for that state.
+ * @param symbols A mapping of state keys to their corresponding symbol names in the backend system.
+ *                Each key should match a key in the `setters` object, and each value should be a string
+ *                that represents the symbol name to register and subscribe to.
+ *
+ * ## Usage Example:
+ * ```typescript
+ * const setters = {
+ *     speed: setSpeed,
+ *     temperature: setTemperature
+ * };
+ *
+ * const symbols = {
+ *     speed: "Sensor.speed",
+ *     temperature: "Sensor.temperature"
+ * };
+ *
+ * useRegisterSymbols(setters, symbols);
+ * ```
+ *
+ * This will register and subscribe to updates for "Sensor.speed" and "Sensor.temperature",
+ * and update the `speed` and `temperature` states via `setSpeed` and `setTemperature` respectively
+ * whenever new data is received.
+ */
+export declare const useAdsRegisterSymbols: (setters: Record<string, (value: any) => void>, symbols: Record<string, string>) => null;

package/dist/hooks/useAdsRegisterSymbol.js

@@ -0,0 +1 @@
+import{useEffect,useContext,useRef}from"react";import{EventEmitterContext}from"../core/EventEmitterContext";export const useAdsRegisterSymbols=(e,t)=>{const{invoke:r,subscribe:n,unsubscribe:s,isConnected:c}=useContext(EventEmitterContext),o=useRef([]),u=useRef(!0);return useEffect((()=>{u.current=!0;const i=async()=>{for(const[s,c]of Object.entries(t))try{await r("ADS","register_symbol",{symbol_name:c});const t=n(`ADS/${c}`,(t=>{if(u.current){const r=e[s];r&&r(t.value)}}));o.current.push(t)}catch(e){}await r("ADS","refresh",{})};if(c())i();else{let e=n("HUB/connected",(()=>{i(),s(e)}));o.current.push(e)}return()=>{u.current=!1,o.current.forEach((e=>s(e))),o.current=[]}}),[]),null};

package/dist/hub/HubBase.d.ts

@@ -79,6 +79,7 @@ export declare abstract class HubBase {
     protected localFNameToBackendFNameMap: Map<string, string>;
     protected backendFNameToLocalFNameMap: Map<string, string>;
     protected context: EventEmitterContextType | null;
+    protected isConnected_: boolean;
     /**
      * Constructor
      */
@@ -100,6 +101,15 @@ export declare abstract class HubBase {
      * This does NOT get published to the front end.
      */
     abstract invoke(domain: string, fname: string, payload?: object): Promise<CommandMessageResult>;
+    /**
+     * Allos the derived class to set whether the hub is connected to its source.
+     * @param s boolean
+     */
+    protected setIsConnected: (s: boolean) => void;
+    /**
+     * Returns true if the Hub is connected to its source.
+     */
+    isConnected: () => boolean;
     /**
      * Convenience function to invoke a command with an optional topic and optional value.
      * This will invoke the specified command in the backend. It does not broadcast the

package/dist/hub/HubBase.js

@@ -1 +1 @@
-export class HubBase{constructor(){Object.defineProperty(this,"localTopicToBackendTopicMap",{enumerable:!0,configurable:!0,writable:!0,value:new Map}),Object.defineProperty(this,"backendTopicToLocalMap",{enumerable:!0,configurable:!0,writable:!0,value:new Map}),Object.defineProperty(this,"localFNameToBackendFNameMap",{enumerable:!0,configurable:!0,writable:!0,value:new Map}),Object.defineProperty(this,"backendFNameToLocalFNameMap",{enumerable:!0,configurable:!0,writable:!0,value:new Map}),Object.defineProperty(this,"context",{enumerable:!0,configurable:!0,writable:!0,value:null})}setContext(a){this.context=a}invokeTopic(a,e,o,c){const t={topic:o,data:c};return this.invoke(a,e,t)}publish(a,e){const o=this.toLocalTopic(a);this.context?.dispatch({topic:o,payload:e})}mapTopic(a,e){this.localTopicToBackendTopicMap.set(a,e),this.backendTopicToLocalMap.set(e,a)}unmapTopic(a){if(this.localTopicToBackendTopicMap.has(a)){const e=this.localTopicToBackendTopicMap.get(a);this.localTopicToBackendTopicMap.delete(a),null!=e&&this.backendTopicToLocalMap.has(e)&&this.backendTopicToLocalMap.delete(e)}}mapFName(a,e){this.localFNameToBackendFNameMap.set(a,e),this.backendFNameToLocalFNameMap.set(e,a)}unmapFName(a){if(this.localFNameToBackendFNameMap.has(a)){const e=this.localFNameToBackendFNameMap.get(a);this.localFNameToBackendFNameMap.delete(a),null!=e&&this.backendFNameToLocalFNameMap.has(e)&&this.backendFNameToLocalFNameMap.delete(e)}}toBackendTopic(a){if(this.localTopicToBackendTopicMap.has(a)){const e=this.localTopicToBackendTopicMap.get(a);return null!=e?e:a}return a}toBackendFName(a){if(this.localFNameToBackendFNameMap.has(a)){const e=this.localFNameToBackendFNameMap.get(a);return null!=e?e:a}return a}toLocalTopic(a){if(this.backendTopicToLocalMap.has(a)){const e=this.backendTopicToLocalMap.get(a);return null!=e?e:a}return a}toLocalFName(a){if(this.backendFNameToLocalFNameMap.has(a)){const e=this.backendFNameToLocalFNameMap.get(a);return null!=e?e:a}return a}}export default HubBase;
+export class HubBase{constructor(){Object.defineProperty(this,"localTopicToBackendTopicMap",{enumerable:!0,configurable:!0,writable:!0,value:new Map}),Object.defineProperty(this,"backendTopicToLocalMap",{enumerable:!0,configurable:!0,writable:!0,value:new Map}),Object.defineProperty(this,"localFNameToBackendFNameMap",{enumerable:!0,configurable:!0,writable:!0,value:new Map}),Object.defineProperty(this,"backendFNameToLocalFNameMap",{enumerable:!0,configurable:!0,writable:!0,value:new Map}),Object.defineProperty(this,"context",{enumerable:!0,configurable:!0,writable:!0,value:null}),Object.defineProperty(this,"isConnected_",{enumerable:!0,configurable:!0,writable:!0,value:!1}),Object.defineProperty(this,"setIsConnected",{enumerable:!0,configurable:!0,writable:!0,value:e=>{this.isConnected_=e}}),Object.defineProperty(this,"isConnected",{enumerable:!0,configurable:!0,writable:!0,value:()=>this.isConnected_})}setContext(e){this.context=e}invokeTopic(e,a,o,c){const t={topic:o,data:c};return this.invoke(e,a,t)}publish(e,a){const o=this.toLocalTopic(e);this.context?.dispatch({topic:o,payload:a})}mapTopic(e,a){this.localTopicToBackendTopicMap.set(e,a),this.backendTopicToLocalMap.set(a,e)}unmapTopic(e){if(this.localTopicToBackendTopicMap.has(e)){const a=this.localTopicToBackendTopicMap.get(e);this.localTopicToBackendTopicMap.delete(e),null!=a&&this.backendTopicToLocalMap.has(a)&&this.backendTopicToLocalMap.delete(a)}}mapFName(e,a){this.localFNameToBackendFNameMap.set(e,a),this.backendFNameToLocalFNameMap.set(a,e)}unmapFName(e){if(this.localFNameToBackendFNameMap.has(e)){const a=this.localFNameToBackendFNameMap.get(e);this.localFNameToBackendFNameMap.delete(e),null!=a&&this.backendFNameToLocalFNameMap.has(a)&&this.backendFNameToLocalFNameMap.delete(a)}}toBackendTopic(e){if(this.localTopicToBackendTopicMap.has(e)){const a=this.localTopicToBackendTopicMap.get(e);return null!=a?a:e}return e}toBackendFName(e){if(this.localFNameToBackendFNameMap.has(e)){const a=this.localFNameToBackendFNameMap.get(e);return null!=a?a:e}return e}toLocalTopic(e){if(this.backendTopicToLocalMap.has(e)){const a=this.backendTopicToLocalMap.get(e);return null!=a?a:e}return e}toLocalFName(e){if(this.backendFNameToLocalFNameMap.has(e)){const a=this.backendFNameToLocalFNameMap.get(e);return null!=a?a:e}return e}}export default HubBase;

package/dist/hub/HubWebSocket.js

@@ -1 +1 @@
-import{HubBase}from"./HubBase";function b64toBlob(e,t="application/octet-stream",s=512){const n=atob(e),o=[];for(let e=0;e<n.length;e+=s){const t=n.slice(e,e+s),r=new Array(t.length);for(let e=0;e<t.length;e++)r[e]=t.charCodeAt(e);const i=new Uint8Array(r);o.push(i)}return new Blob(o,{type:t})}function downloadBlob(e,t){const s=window.URL.createObjectURL(e),n=document.createElement("a");n.href=s,n.download=t,document.body.appendChild(n),n.click(),document.body.removeChild(n),window.URL.revokeObjectURL(s)}export class HubWebSocket extends HubBase{constructor(){super(),Object.defineProperty(this,"socket",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"requestId",{enumerable:!0,configurable:!0,writable:!0,value:0}),Object.defineProperty(this,"pendingRequests",{enumerable:!0,configurable:!0,writable:!0,value:new Map}),Object.defineProperty(this,"invoke",{enumerable:!0,configurable:!0,writable:!0,value:(e,t,s)=>new Promise(((n,o)=>{const r=++this.requestId;this.pendingRequests.set(r,{resolve:n,reject:o});let i={request_id:r,domain:e,fname:t,args:s,result:void 0};this.socket.send(JSON.stringify(i))}))}),Object.defineProperty(this,"handleUnsolicitedMessage",{enumerable:!0,configurable:!0,writable:!0,value:e=>{if("BROADCAST"===e.fname&&e.domain.length>=1&&void 0!==e.result&&null!==e.result&&void 0!==e.result.data&&null!==e.result.data){let t=`${e.domain}/${e.result.data.topic}`;this.publish(t,e.result.data)}}}),Object.defineProperty(this,"disconnect",{enumerable:!0,configurable:!0,writable:!0,value:()=>{this.socket.close()}}),Object.defineProperty(this,"emit",{enumerable:!0,configurable:!0,writable:!0,value:(e,t)=>{this.socket.send(JSON.stringify({eventName:e,payload:t}))}});const e=window.location.hostname;let t;const s=`${"https:"===window.location.protocol?"wss://":"ws://"}${e}${t?":"+t:""}/ws/`;this.socket=new WebSocket(s);let n=this;this.socket.onopen=function(){n.publish("HUB/connected",!0)},this.socket.onmessage=e=>{const t=JSON.parse(e.data);if(t.request_id&&this.pendingRequests.has(t.request_id)){const{resolve:e,reject:s}=this.pendingRequests.get(t.request_id);if("FILE_DOWNLOAD"===t.fname&&void 0!==t.args.file_name&&null!==t.args.file_name&&t.args.file_name.length>0){let n=t.args.file_name.split("/");const o=n[n.length-1];if(t.result&&t.result.success){downloadBlob(b64toBlob(t.result.data),o),t.result.data=o,e(t.result)}else s(new Error(t.result?.error_message))}else t.result?.success?e(t.result):s(new Error(t.result?.error_message));this.pendingRequests.delete(t.request_id)}else this.handleUnsolicitedMessage(t)},this.socket.onerror=e=>{},this.socket.onclose=()=>{}}}
+import{HubBase}from"./HubBase";function b64toBlob(e,t="application/octet-stream",s=512){const n=atob(e),o=[];for(let e=0;e<n.length;e+=s){const t=n.slice(e,e+s),r=new Array(t.length);for(let e=0;e<t.length;e++)r[e]=t.charCodeAt(e);const i=new Uint8Array(r);o.push(i)}return new Blob(o,{type:t})}function downloadBlob(e,t){const s=window.URL.createObjectURL(e),n=document.createElement("a");n.href=s,n.download=t,document.body.appendChild(n),n.click(),document.body.removeChild(n),window.URL.revokeObjectURL(s)}export class HubWebSocket extends HubBase{constructor(){super(),Object.defineProperty(this,"socket",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"requestId",{enumerable:!0,configurable:!0,writable:!0,value:0}),Object.defineProperty(this,"pendingRequests",{enumerable:!0,configurable:!0,writable:!0,value:new Map}),Object.defineProperty(this,"invoke",{enumerable:!0,configurable:!0,writable:!0,value:(e,t,s)=>new Promise(((n,o)=>{const r=++this.requestId;this.pendingRequests.set(r,{resolve:n,reject:o});let i={request_id:r,domain:e,fname:t,args:s,result:void 0};this.socket.send(JSON.stringify(i))}))}),Object.defineProperty(this,"handleUnsolicitedMessage",{enumerable:!0,configurable:!0,writable:!0,value:e=>{if("BROADCAST"===e.fname&&e.domain.length>=1&&void 0!==e.result&&null!==e.result&&void 0!==e.result.data&&null!==e.result.data){let t=`${e.domain}/${e.result.data.topic}`;this.publish(t,e.result.data)}}}),Object.defineProperty(this,"disconnect",{enumerable:!0,configurable:!0,writable:!0,value:()=>{this.socket.close()}}),Object.defineProperty(this,"emit",{enumerable:!0,configurable:!0,writable:!0,value:(e,t)=>{this.socket.send(JSON.stringify({eventName:e,payload:t}))}});const e=window.location.hostname;let t;const s=`${"https:"===window.location.protocol?"wss://":"ws://"}${e}${t?":"+t:""}/ws/`;this.socket=new WebSocket(s);let n=this;this.socket.onopen=function(){n.publish("HUB/connected",!0),n.setIsConnected(!0)},this.socket.onmessage=e=>{const t=JSON.parse(e.data);if(t.request_id&&this.pendingRequests.has(t.request_id)){const{resolve:e,reject:s}=this.pendingRequests.get(t.request_id);if("FILE_DOWNLOAD"===t.fname&&void 0!==t.args.file_name&&null!==t.args.file_name&&t.args.file_name.length>0){let n=t.args.file_name.split("/");const o=n[n.length-1];if(t.result&&t.result.success){downloadBlob(b64toBlob(t.result.data),o),t.result.data=o,e(t.result)}else s(new Error(t.result?.error_message))}else t.result?.success?e(t.result):s(new Error(t.result?.error_message));this.pendingRequests.delete(t.request_id)}else this.handleUnsolicitedMessage(t)},this.socket.onerror=e=>{},this.socket.onclose=()=>{n.setIsConnected(!1)}}}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@adcops/autocore-react",
-    "version": "3.0.16",
+    "version": "3.0.18",
     "description": "A React component library for industrial user interfaces.",
     "private": false,
     "type": "module",
@@ -78,6 +78,10 @@
         "./components/*": {
             "import": "./dist/components/*",
             "types": "./dist/components/*.d.js"
+        },
+        "./hooks/*": {
+            "import": "./dist/hooks/*",
+            "types": "./dist/hooks/*.d.js"
         }
     }
 }

package/src/components/FileList.tsx

@@ -2,7 +2,7 @@
  * Copyright (C) 2024 Automated Design Corp.. All Rights Reserved.
  * Created Date: 2024-04-24 16:01:53
  * -----
- * Last Modified: 2024-04-25 06:40:11
+ * Last Modified: 2024-04-25 18:57:03
  * -----
  * 
  */

package/src/components/ValueInput.tsx

@@ -2,7 +2,7 @@
  * Copyright (C) 2024 Automated Design Corp.. All Rights Reserved.
  * Created Date: 2024-03-20 13:05:42
  * -----
- * Last Modified: 2024-04-16 19:06:17
+ * Last Modified: 2024-04-25 16:40:53
  * -----
  * 
  */
@@ -217,6 +217,17 @@ export class ValueInput extends React.Component<ValueInputProps, ValueInputState
     componentDidMount() {
     }
 
+    componentDidUpdate(prevProps: ValueInputProps) {
+        // Check if the value prop has changed
+        if (prevProps.value !== this.props.value) {
+            this.setState({
+                currentValue: this.props.value,
+                entryValue: this.props.value,
+                editing: false  // Consider whether you want to reset editing state here
+            });
+        }
+    }    
+
 
     private onBufferValue(val: number | null) {
         if (val === null)
@@ -224,7 +235,7 @@ export class ValueInput extends React.Component<ValueInputProps, ValueInputState
 
         if (!this.state.editing) {
             this.setState({
-                entryValue: this.state.currentValue,
+                entryValue: val, //this.state.currentValue,
                 editing: true
             }, () => {
 

package/src/core/EventEmitterContext.tsx

@@ -2,18 +2,18 @@
  * Copyright (C) 2024 Automated Design Corp. All Rights Reserved.
  * Created Date: 2024-01-17 11:45:10
  * -----
- * Last Modified: 2024-04-24 12:11:16
+ * Last Modified: 2024-04-25 15:24:53
  * Modified By: ADC
  * -----
  * 
  */
 
 
-import React, { createContext, ReactNode, useState, useMemo } from 'react';
-import {createHub, Hub} from "../hub";
-import {CommandMessageResult} from "../hub/CommandMessage";
+import React, { createContext, ReactNode, useState, useMemo, useCallback } from 'react';
+import { createHub, Hub } from "../hub";
+import { CommandMessageResult } from "../hub/CommandMessage";
 
-export {Hub};
+export { Hub };
 
 /**
  * Represents an event subsription.
@@ -38,7 +38,7 @@ export interface State {
     subscriptions: Record<string, Subscription[]>;
 
     /** Tracks the next subscription ID that will be assigned. */
-    nextSubscriptionId: number; 
+    nextSubscriptionId: number;
 }
 
 /**
@@ -104,7 +104,7 @@ export interface EventEmitterContextType {
      * Invoke/send a message to the back end. 
      * This does NOT get published to the front end.
      */
-    invoke( domain: string, fname: string, payload? : object) : Promise<CommandMessageResult>;
+    invoke(domain: string, fname: string, payload?: object): Promise<CommandMessageResult>;
 
     /**
      * Subscribe to events identified by the topic.
@@ -119,25 +119,32 @@ export interface EventEmitterContextType {
      * @param subscriptionId The id of the subscription returned by the subscribe method.
      * @returns 
      */
-    unsubscribe: (subscriptionId : number) => void;    
+    unsubscribe: (subscriptionId: number) => void;
 
 
     /**
      * Global hub for publishing and receiving events throughout the interface, and for exchanging
      * data with the backend.
      */
-    hub : Hub | null;
+    hub: Hub | null;
 
     /**
      * Retrieves the current subscriptions. Used for debugging purposes.
      * @param topic Optional. The topic to retrieve subscriptions for. If omitted, returns all subscriptions.
      * @returns An object containing the current subscriptions, optionally filtered by topic.
      */
-    getSubscriptions: (topic?: string) => Record<string, Subscription[]> | Subscription[];    
+    getSubscriptions: (topic?: string) => Record<string, Subscription[]> | Subscription[];
+
+
+    /**
+     * Returns true if the Hub in use is connected to its source.
+     * @returns boolean
+     */
+    isConnected: () => boolean;
 }
 
 
-let globalSubscriptionId = 1; 
+let globalSubscriptionId = 1;
 
 /**
  * A global context for managing event emission and subscription.
@@ -262,25 +269,27 @@ let globalSubscriptionId = 1;
  * 
  */
 export const EventEmitterContext = createContext<EventEmitterContextType>({
-    state: { subscriptions: {}, nextSubscriptionId : 1 },
+    state: { subscriptions: {}, nextSubscriptionId: 1 },
     dispatch: () => { },
     subscribe: () => { return 0; }, // Placeholder for subscription logic
-    invoke: async (domain: string, fname: string, payload?: object) => { 
+    invoke: async (domain: string, fname: string, payload?: object) => {
         domain;
         fname;
         payload;
-        let ret :CommandMessageResult = {
+        let ret: CommandMessageResult = {
             data: {},
             success: false,
-            error_message : ""            
+            error_message: ""
         };
         // Placeholder for invoke logic
         // Implement the logic to send a message to the backend and return a promise
         return Promise.resolve(ret); // Example placeholder, replace with actual implementation
     },
-    unsubscribe: (subscriptionId: number) => { subscriptionId;}, // Placeholder for unsubscription logic    
+    unsubscribe: (subscriptionId: number) => { subscriptionId; }, // Placeholder for unsubscription logic    
     hub: null,
-    getSubscriptions: () => { return []; } 
+    getSubscriptions: () => { return []; },
+    isConnected: () => { return false }
+
 });
 
 
@@ -318,21 +327,23 @@ export const EventEmitterContext = createContext<EventEmitterContextType>({
  * ``` 
  */
 export const EventEmitterProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
-    const [state, setState] = useState<State>({ subscriptions: {}, nextSubscriptionId : 1 });
+    const [state, setState] = useState<State>({ subscriptions: {}, nextSubscriptionId: 1 });
 
     // Memoize the hub instance so it's only created once
     const hub = useMemo(() => createHub(), []);
 
-    const dispatch = (action: Action) => {
+    const dispatch = useCallback((action: Action) => {
         const { topic, payload } = action;
 
         setState(prevState => {
-            prevState.subscriptions[topic]?.forEach(sub => sub.callback(payload));
+            const callbacks = prevState.subscriptions[topic] || [];
+            callbacks.forEach(sub => sub.callback(payload));
             return { ...prevState, eventData: payload };
-          });
-    };
+        });
+
+    }, []);
 
-    const subscribe = (topic: string, callback: React.Dispatch<any>) : number => {
+    const subscribe = useCallback((topic: string, callback: React.Dispatch<any>): number => {
 
         globalSubscriptionId += 1;
         const subscriptionId = globalSubscriptionId; // state.nextSubscriptionId;
@@ -340,39 +351,31 @@ export const EventEmitterProvider: React.FC<{ children: ReactNode }> = ({ childr
         setState(prevState => ({
             ...prevState,
             subscriptions: {
-              ...prevState.subscriptions,
-              [topic]: [...(prevState.subscriptions[topic] || []), { id: subscriptionId, callback }]
+                ...prevState.subscriptions,
+                [topic]: [...(prevState.subscriptions[topic] || []), { id: subscriptionId, callback }]
             },
             nextSubscriptionId: globalSubscriptionId + 1 // prevState.nextSubscriptionId + 1
-          }));
-        
-          return subscriptionId;
-    };
+        }));
+
+        return subscriptionId;
+    }, []);
 
 
-    const unsubscribe = (subscriptionId: number) => {
+    const unsubscribe = useCallback((subscriptionId: number) => {
         setState(prevState => {
             const newSubscriptions = { ...prevState.subscriptions };
-    
-            // Iterate through all topics
-            for (const topic in newSubscriptions) {
-                if (newSubscriptions.hasOwnProperty(topic)) {
-                    // Filter out the subscription with the given ID
-                    newSubscriptions[topic] = newSubscriptions[topic].filter(sub => sub.id !== subscriptionId);
-    
-                    // If the topic now has no subscriptions, you can optionally delete the topic key
-                    if (newSubscriptions[topic].length === 0) {
-                        delete newSubscriptions[topic];
-                    }
+            Object.keys(newSubscriptions).forEach(topic => {
+                newSubscriptions[topic] = newSubscriptions[topic].filter(sub => sub.id !== subscriptionId);
+                if (newSubscriptions[topic].length === 0) {
+                    delete newSubscriptions[topic];
                 }
-            }
-    
+            });
             return { ...prevState, subscriptions: newSubscriptions };
-        }); 
-    };
+        });
+    }, []);
 
 
-    const getSubscriptions = (topic?: string): Record<string, Subscription[]> | Subscription[] => {
+    const getSubscriptions = useCallback((topic?: string): Record<string, Subscription[]> | Subscription[] => {
         if (topic) {
             // Return subscriptions for the provided topic, or an empty array if the topic doesn't exist
             return state.subscriptions[topic] || [];
@@ -380,18 +383,19 @@ export const EventEmitterProvider: React.FC<{ children: ReactNode }> = ({ childr
             // Return all subscriptions
             return state.subscriptions;
         }
-    };    
+    }, []);
 
     // Provide the memoized hub instance in the context value
     const contextValue = useMemo(() => ({
-        state, 
-        dispatch, 
-        subscribe, 
-        unsubscribe, 
+        state,
+        dispatch,
+        subscribe,
+        unsubscribe,
         invoke: hub.invoke,
         hub,
-        getSubscriptions
-    }), [state, hub]);    
+        getSubscriptions,
+        isConnected: hub.isConnected
+    }), [state, hub]);
 
 
     hub.setContext(contextValue);

package/src/hooks/useAdsRegisterSymbol.ts

@@ -0,0 +1,97 @@
+/*
+ * Copyright (C) 2024 Automated Design Corp.. All Rights Reserved.
+ * Created Date: 2024-04-25 09:17:05
+ * -----
+ * Last Modified: 2024-04-25 16:03:15
+ * -----
+ * 
+ */
+
+
+import { useEffect, useContext, useRef } from 'react';
+import {EventEmitterContext} from "../core/EventEmitterContext";
+
+/**
+ * Custom hook for registering symbols and subscribing to updates on the 
+ * ADS domain via the EventEmitterContext.
+ * This hook abstracts the common pattern of registering symbols and handling subscriptions
+ * to updates in components that need real-time data from a backend service.
+ *
+ * @param setters A mapping of state setter functions, where each key corresponds to a piece of state
+ *                related to a symbol, and each value is the setter function for that state.
+ * @param symbols A mapping of state keys to their corresponding symbol names in the backend system.
+ *                Each key should match a key in the `setters` object, and each value should be a string
+ *                that represents the symbol name to register and subscribe to.
+ *
+ * ## Usage Example:
+ * ```typescript
+ * const setters = {
+ *     speed: setSpeed,
+ *     temperature: setTemperature
+ * };
+ *
+ * const symbols = {
+ *     speed: "Sensor.speed",
+ *     temperature: "Sensor.temperature"
+ * };
+ *
+ * useRegisterSymbols(setters, symbols);
+ * ```
+ *
+ * This will register and subscribe to updates for "Sensor.speed" and "Sensor.temperature",
+ * and update the `speed` and `temperature` states via `setSpeed` and `setTemperature` respectively
+ * whenever new data is received.
+ */
+export const useAdsRegisterSymbols = (setters: Record<string, (value: any) => void>, symbols: Record<string, string>) => {
+    const { invoke, subscribe, unsubscribe, isConnected } = useContext(EventEmitterContext);
+    const subscriptions = useRef<number[]>([]);
+    const isMounted = useRef(true);
+
+    useEffect(() => {
+        isMounted.current = true;
+
+        const registerAndSubscribe = async () => {
+            for (const [key, symbolName] of Object.entries(symbols)) {
+                try {
+                    await invoke("ADS", "register_symbol", { symbol_name: symbolName });
+                    //console.log(`Subscribe... ADS/${symbolName}`);
+                    const subscriptionId = subscribe(`ADS/${symbolName}`, (data) => {
+                        if (isMounted.current) {
+                            const setter = setters[key];
+                            if (setter) {
+                                setter(data.value);
+                            }
+                        }
+                    });
+                    subscriptions.current.push(subscriptionId);
+                } catch (err) {
+                    console.error(`Failed to register symbol ${symbolName}: ${err}`);
+                }
+            }
+            await invoke("ADS", "refresh", {});
+        };
+        
+        if (!isConnected() ) {
+            //console.log("SCHEDULE LATER...");
+            let connectionSubId = subscribe("HUB/connected", () => {
+                registerAndSubscribe();
+                unsubscribe(connectionSubId);
+            });
+            subscriptions.current.push(connectionSubId);
+        }
+        else {
+            //console.log("ALREADY CONNECTED...");
+            registerAndSubscribe();
+        }
+        
+
+        return () => {
+            //console.log("UNSUBSCRIBE");
+            isMounted.current = false;
+            subscriptions.current.forEach(subscriptionId => unsubscribe(subscriptionId));
+            subscriptions.current = [];
+        };
+    }, []); // Ensure setters and symbols are included if they can change
+
+    return null; // This hook does not render anything
+};

package/src/hub/HubBase.ts

@@ -3,7 +3,7 @@
  * Created Date: 2023-12-15 14:21:33
  * Author: Thomas C. Bitsky Jr.
  * -----
- * Last Modified: 2024-04-24 11:56:16
+ * Last Modified: 2024-04-25 14:44:14
  * Modified By: ADC
  * -----
  * 
@@ -95,6 +95,8 @@ export abstract class HubBase {
 
     protected context : EventEmitterContextType | null = null;
 
+    protected isConnected_ : boolean = false;
+
 
     /**
      * Constructor
@@ -125,6 +127,21 @@ export abstract class HubBase {
     abstract invoke(domain: string, fname: string, payload? : object) : Promise<CommandMessageResult>;
 
 
+    /**
+     * Allos the derived class to set whether the hub is connected to its source.
+     * @param s boolean
+     */
+    protected setIsConnected = (s : boolean) => {
+        this.isConnected_ = s;
+    }
+
+    /**
+     * Returns true if the Hub is connected to its source.
+     */
+    isConnected = () : boolean => {
+        return this.isConnected_;
+    }
+
     /**
      * Convenience function to invoke a command with an optional topic and optional value.
      * This will invoke the specified command in the backend. It does not broadcast the

package/src/hub/HubWebSocket.ts

@@ -2,7 +2,7 @@
  * Copyright (C) 2024 Automated Design Corp.. All Rights Reserved.
  * Created Date: 2024-04-17 09:13:07
  * -----
- * Last Modified: 2024-04-25 07:21:33
+ * Last Modified: 2024-04-25 14:42:02
  * -----
  * 
  */
@@ -149,7 +149,7 @@ export class HubWebSocket extends HubBase {
         this.socket.onopen = function() {
             console.log("WebSocket connection established.");
             self.publish("HUB/connected", true);
-            //ws.send("Hello, server!"); // Send a message to the server
+            self.setIsConnected(true);
         };
         
                 
@@ -214,7 +214,8 @@ export class HubWebSocket extends HubBase {
         // The Websocket connection has closed.
         //
         this.socket.onclose = () => {
-            console.log('WebSocket connection closed.');
+            self.setIsConnected(false);
+            console.log('WebSocket connection closed.');            
         };
     }