@adcops/autocore-react 3.0.40 → 3.3.2

package/src/hub/HubTauri.ts

@@ -3,87 +3,49 @@
  * Created Date: 2023-12-17 09:50:23
  * Author: Thomas C. Bitsky Jr.
  * -----
- * Last Modified: 2024-04-24 11:56:32
+ * Last Modified: 2026-01-29 09:34:21
  * Modified By: ADC
  * -----
- * 
+ *
  */
 
-import { InvokeArgs } from '@tauri-apps/api/tauri';
 import { HubBase } from './HubBase';
-import {event, invoke} from '@tauri-apps/api';
-import {CommandMessageResult} from "./CommandMessage";
+import { invoke as tauriInvoke } from '@tauri-apps/api/core';
+import { listen } from '@tauri-apps/api/event';
+import type { CommandMessage } from "./CommandMessage";
+import { MessageType } from "./CommandMessage";
+
+type InvokeArgs = Record<string, unknown>;
 
 /**
  * Hub for integrating with the Tauri backend.
- * 
- * The tauri backend is expected to broadcast messages on the event
+ *
+ * The Tauri backend is expected to broadcast messages on the event
  * name: 'autocore://broadcast_event'
- * 
- * This hub will capture those messages and dispatch them globally to any 
+ *
+ * This hub will capture those messages and dispatch them globally to any
  * listeners in the web app.
- * 
- * 
- * Example: Listen to an event 'xarm-position':
- * ```
- * const {subscribe, unsubscribe} = useContext(EventEmitterContext);
- * useEffect(() => {
- *         const unsubscripeMp = subscribe('xarm-position', (value) => {
- *            // The rust backend sent a JSON object of 3D position values. 
- *            setX(value.x);
- *            setY(value.y);
- *            setZ(value.z);
- *            setA(value.roll);
- *            setB(value.yaw);
- *            setC(value.pitch);
- *        });
- * 
- *    return () => {
- *        unsubscribe(unsubscripeMp);
- *    }
- * 
- * }, [] );
  *
+ * ## Usage Examples
+ *
+ * ```typescript
+ * const { hub } = useContext(EventEmitterContext);
+ *
+ * // Read a value
+ * const result = await hub.read("ads.plc1.gio.bControlPowerOk");
+ *
+ * // Write a value
+ * await hub.write("ads.plc1.gio.nSetpoint", 100);
+ *
+ * // Subscribe to changes
+ * await hub.subscribe("modbus.holding_registers.5");
  * ```
- * 
- * The hub should also be used for invoking events in the Tauri backend.
- * This example will call the function "update_count" in the rust backend, passing
- * the expected argument "count".
- * ```
- * const {invoke} = useContext(EventEmitterContext);
- * const incrementCount = () => {
- *    count += 1;
- *    invoke('update_count', {"count": count});        
- * };
- * ```
- * 
- * Of course, like any class derived from HubBase, the hub can be used to publish and subscribe to
- * topics in the front-end, without need of interacting with the Tauri backed.
- * 
- * ```
- * const {dispatch, subscribe, unsubscribe} = useContext(EventEmitterContext);
- * const [controlPower, setControlPower] = useState(false);
- * useEffect(() => {
- *      const unsubscribeControlPower = subscribe('value-simulator-bBit1', (value) => {
- *          setControlPower(value);
- *      });  
  *
+ * The hub can also publish/subscribe to frontend-only events:
  *
- *      return () => {
- *           unsubscribe(unsubscribeControlPower);
- *      }
- * }, [] );
- * 
- * const onPbPressed = () => {
- *      let count = 1;
- *      dispatch({
- *          topic: "my-awesome-topic",
- *          payload: count
- *      });
- * }
- * 
+ * ```typescript
+ * hub.publish("ui/panel-opened", { panelId: "settings" });
  * ```
- * 
  */
 export class HubTauri extends HubBase {
 
@@ -93,57 +55,86 @@ export class HubTauri extends HubBase {
     constructor() {
         super();
 
+        // Mark as connected since Tauri IPC is always available
+        this.setIsConnected(true);
 
         /**
          * Receive broadcasts from the Tauri backend. Data is received as a payload object,
          * {topic: string, payload: any | null}
          * From here, we extract into a form HubBase can use, then pass on to the
          * dispatcher.
-         * 
+         *
          * Events without a topic are ignored.
          */
-        event.listen('autocore://broadcast_event', (ev: any) => {
-
+        listen('autocore://broadcast_event', (ev: any) => {
             let objPayload = JSON.parse(ev.payload);
 
-            if (objPayload.topic !== undefined && objPayload.topic !== null ) {
-                
-                if ( objPayload.payload !== undefined && objPayload.payload !== null ) {
+            if (objPayload.topic !== undefined && objPayload.topic !== null) {
+                if (objPayload.payload !== undefined && objPayload.payload !== null) {
                     this.publish(objPayload.topic, objPayload.payload);
                 }
                 else {
                     this.publish(objPayload.topic, undefined);
                 }
-                                
             }
-            
         });
-
     }
 
     /**
-     * Invoke a method in the rust backend.
-     * 
-     * @param fname method name
-     * @param payload Optional data payload
-     * @returns The return value of the backend method.
+     * Send a message to the Tauri backend.
+     *
+     * The topic and messageType are passed to a generic Tauri command handler
+     * that routes the request appropriately.
+     *
+     * @param topic The FQDN of the resource (e.g., "ads.plc1.gio.bControlPowerOk")
+     * @param messageType The action to perform (Read, Write, Subscribe, etc.)
+     * @param payload Optional data payload (e.g., value to write)
+     * @returns Promise<CommandMessage> The response from the backend
      */
-    invoke(domain : string, fname: string, payload?: object | undefined): Promise<CommandMessageResult> {
-
-        console.log(JSON.stringify(event));
+    invoke(topic: string, messageType: MessageType, payload?: object): Promise<CommandMessage> {
+        console.log(`HubTauri.invoke: topic=${topic}, type=${MessageType[messageType]}`);
 
-        if (payload !== undefined && payload !== null) {
-            console.log(`Payload: ${JSON.stringify(payload)}`);
+        // Build the command arguments
+        const args: InvokeArgs = {
+            topic: topic,
+            message_type: messageType,
+            ...(payload ?? {})
+        };
 
-            // todo! This should probably always been the same function, and then that function
-            // in the backend routes the command.
-            let topic = `${domain}_${fname}`;
-            return invoke(topic, payload as InvokeArgs);
-        }            
-        else {
-            return invoke(fname);
-        }
-            
+        // Call the generic autocore handler in Tauri backend
+        return new Promise((resolve, reject) => {
+            tauriInvoke('autocore_invoke', args)
+                .then((result: any) => {
+                    // If the result is already a CommandMessage, use it directly
+                    if (result && typeof result === 'object' && 'topic' in result) {
+                        resolve(result as CommandMessage);
+                    } else {
+                        // Wrap raw result in CommandMessage
+                        const response: CommandMessage = {
+                            transaction_id: 0,
+                            timecode: Date.now(),
+                            topic: topic,
+                            message_type: MessageType.Response,
+                            data: result,
+                            success: true,
+                            error_message: ''
+                        };
+                        resolve(response);
+                    }
+                })
+                .catch((error: any) => {
+                    // Wrap error in CommandMessage
+                    const response: CommandMessage = {
+                        transaction_id: 0,
+                        timecode: Date.now(),
+                        topic: topic,
+                        message_type: MessageType.Response,
+                        data: null,
+                        success: false,
+                        error_message: error?.toString() || 'Unknown error'
+                    };
+                    reject(response);
+                });
+        });
     }
-
-}
+}

package/src/hub/HubWebSocket.ts

@@ -2,36 +2,40 @@
  * Copyright (C) 2024 Automated Design Corp.. All Rights Reserved.
  * Created Date: 2024-04-17 09:13:07
  * -----
- * Last Modified: 2025-03-31 08:35:12
+ * Last Modified: 2026-01-29 09:34:31
+ * Modified By: ADC
  * -----
  * 
  */
 
-/** @file
+/** 
+ * @module hub/HubWebSocket
  * 
- * ## broadcast messages
- * The result field of CommandMessages used for broadcast must have
- * success set to true, and must contain the field "topic." The topic field, along
- * with the domain field of the CommandMessage will be combined for the topic used
- * by the websocket client.
+ * Implementation of `HubBase` using standard WebSockets.
  * 
- * broadcast topic = `${CommandMessage.domain}/${CommandMessage.result["topic"]}
+ * ## Functionality
  * 
- * So, to subscribe to a broadcast topic for GM.fReal that is served by the ADS client, the
- * topic will be: "ADS/GM.fReal"
+ * - **Transport**: Connects to `ws://host:port/ws/` (or `wss://`).
+ * - **Request/Response**: Correlates requests to responses using `transaction_id`.
+ * - **Broadcasts**: Handles unsolicited messages (subscriptions) and routes them via `HubBase.publish`.
+ * - **Binary Data**: Handles `FILE_DOWNLOAD` events by decoding Base64 payloads into Blobs.
+ * 
+ * ## Protocol
+ * 
+ * Messages are JSON-serialized `CommandMessage` objects.
+ * - **Requests**: Client sends `message_type` (Read/Write/etc) + `transaction_id`.
+ * - **Responses**: Server replies with same `transaction_id` + `success`/`data`.
+ * - **Broadcasts**: Server sends `message_type: Broadcast` + `topic` (FQDN) + `data`.
  */
 
 import { HubBase } from './HubBase';
-import {CommandMessage, CommandMessageResult} from "./CommandMessage";
-
-// Function to parse the JSON string received from the server into a CommandMessage object
-// function parseCommandMessage(jsonString: string): CommandMessage {
-//     const parsed: CommandMessage = JSON.parse(jsonString);
-//     // Assuming the JSON structure directly matches the TypeScript interfaces
-//     return parsed;
-// }
-
+import { MessageType, type CommandMessage } from "./CommandMessage";
+import { getDebugPanel } from './DebugPanel';
 
+/**
+ * Internal tracking record for pending requests.
+ * Allows the `invoke` promise to be resolved/rejected when the response arrives.
+ */
 interface RequestRecord {
     resolve: (value?: any) => void;
     reject: (reason?: any) => void;
@@ -40,237 +44,208 @@ interface RequestRecord {
 
 /**
  * Converts a Base64 encoded string into a Blob object.
+ * Used for file downloads.
  *
- * This function is useful for handling binary data encoded in Base64 format,
- * especially when the data needs to be reconstructed into a binary format
- * such as when downloading files that were transferred as Base64 strings over
- * a network. The function slices the Base64 string, decodes it to binary,
- * and constructs a Blob from the resulting byte arrays.
- *
- * @param {string} b64Data The base64 encoded string you want to convert to a Blob.
- * @param {string} [contentType='application/octet-stream'] The MIME type of the Blob.
- *      This parameter is optional and defaults to 'application/octet-stream'.
- * @param {number} [sliceSize=512] The size of each chunk used to slice the Base64 string.
- *      Smaller slice sizes can improve the function's handling of large Base64 strings.
- *      This parameter is optional and defaults to 512.
- *
- * @returns {Blob} A Blob object representing the decoded binary data.
+ * @param {string} b64Data The base64 encoded string.
+ * @param {string} [contentType='application/octet-stream'] The MIME type.
+ * @param {number} [sliceSize=512] Chunk size for processing.
+ * @returns {Blob} The decoded binary blob.
  */
 function b64toBlob(
-    b64Data: string, 
-    contentType: string = 'application/octet-stream', 
+    b64Data: string,
+    contentType: string = "application/octet-stream",
     sliceSize: number = 512
 ): Blob {
-
     const byteCharacters = atob(b64Data);
-    const byteArrays: Uint8Array[] = [];
+    const buffers: ArrayBuffer[] = [];
 
     for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
         const slice = byteCharacters.slice(offset, offset + sliceSize);
 
-        const byteNumbers: number[] = new Array(slice.length);
-        for (let i = 0; i < slice.length; i++) {
-            byteNumbers[i] = slice.charCodeAt(i);
-        }
+        const byteNumbers = new Array<number>(slice.length);
+        for (let i = 0; i < slice.length; i++) byteNumbers[i] = slice.charCodeAt(i);
 
-        const byteArray = new Uint8Array(byteNumbers);
-        byteArrays.push(byteArray);
+        const uint8 = new Uint8Array(byteNumbers);
+        buffers.push(uint8.buffer as ArrayBuffer);
     }
 
-    const blob = new Blob(byteArrays, { type: contentType });
-    return blob;
+    return new Blob(buffers, { type: contentType });
 }
 
 
+
 /**
- * Creates a temporary hyperlink in the document and programmatically triggers a download of the Blob provided.
+ * Triggers a browser download for a Blob object.
  *
- * This function is useful for triggering downloads of binary data such as files, which are represented
- * by Blob objects in the browser. The function creates a URL from the Blob, sets it as the href of a
- * dynamically created anchor tag (`<a>`), sets the suggested filename, and then simulates a click on
- * this link to start the download. After the download is triggered, the link is removed and the URL
- * is revoked to free up memory.
- *
- * @param {Blob} blob The Blob object containing the data to be downloaded.
- * @param {string} filename The filename to be used for the downloaded file.
+ * @param {Blob} blob The binary data.
+ * @param {string} filename The suggested filename.
  */
 function downloadBlob(blob: Blob, filename: string): void {
-    // Create a URL for the blob object
     const url = window.URL.createObjectURL(blob);
-
-    // Create a temporary anchor tag (`<a>`) element
     const a = document.createElement('a');
-    a.href = url;           // Set the href to the blob URL
-    a.download = filename;  // Suggest a filename for the downloaded file
-
-    // Append the anchor tag to the body of the document
+    a.href = url;
+    a.download = filename;
     document.body.appendChild(a);
-
-    // Programmatically trigger a click on the anchor tag
     a.click();
-
-    // Remove the anchor tag from the document
     document.body.removeChild(a);
-
-    // Revoke the blob URL to free up resources
     window.URL.revokeObjectURL(url);
 }
 
 
-
-
+/**
+ * WebSocket implementation of the Hub communication layer.
+ */
 export class HubWebSocket extends HubBase {
     private socket: WebSocket;
     private requestId = 0;
+    
+    /** 
+     * Map of pending Transaction ID -> Promise Resolvers.
+     * Used to match asynchronous WebSocket responses to their original requests.
+     */
     private pendingRequests = new Map<number, RequestRecord>();
 
     /**
-     * Constructor. Creates and attempts to make the Websocket connection.
+     * Initializes the WebSocket connection immediately.
      */
     constructor() {
         super();
-        
-        const host = window.location.hostname; // Get the hostname from the address bar
-        
-        // Default to using autocore-server.
-        let port = undefined; // window.location.port; // Get the port from the address bar, if any
+        console.log("[HubWebSocket] Constructor called");
+        getDebugPanel().hubCreated();
 
-        const proto = window.location.protocol === 'https:' ? 'wss://' : 'ws://'; // Determine the protocol
-        const wsUrl = `${proto}${host}${port ? ':' + port : ''}/ws/`; // Construct WebSocket URL
-
-        this.socket = new WebSocket(wsUrl);
+        const host = window.location.hostname;
+        const port = window.location.port;
 
+        const proto = window.location.protocol === 'https:' ? 'wss://' : 'ws://';
+        const wsUrl = `${proto}${host}${port ? ':' + port : ''}/ws/`;
 
+        this.socket = new WebSocket(wsUrl);
         let self = this;
 
-        //
-        // Websocket connection established.
-        //
-        this.socket.onopen = function() {
+        // --- Connection Handlers ---
+
+        this.socket.onopen = function () {
             console.log("WebSocket connection established.");
+            getDebugPanel().wsOpened(wsUrl);
+            // Notify app that we are online
             self.publish("HUB/connected", true);
             self.setIsConnected(true);
         };
-        
-                
-        // Message recevied via the websocket connection.
-        //
-        this.socket.onmessage = (event) => {
-            const data: CommandMessage = JSON.parse(event.data);
 
-            // console.log(`MSG: ${JSON.stringify(data)}`);
+        // --- Message Handler ---
 
-            if (data.request_id && this.pendingRequests.has(data.request_id)) {
-
-                const { resolve, reject } = this.pendingRequests.get(data.request_id)!;
-
-                if (data.fname === "FILE_DOWNLOAD" 
-                    && data.args["file_name"] !== undefined && data.args["file_name"] !== null
-                    && data.args["file_name"].length > 0
+        this.socket.onmessage = (event) => {
+            const data: CommandMessage = JSON.parse(event.data);
+            getDebugPanel().messageReceived(
+                MessageType[data.message_type] || String(data.message_type),
+                data.topic,
+                data.transaction_id
+            );
+
+            console.log(`HUB MSG RX: ${JSON.stringify(data)}`);
+            
+            // Check if this message is a response to a pending request (has ID)
+            if (data.transaction_id && this.pendingRequests.has(data.transaction_id)) {
+                const { resolve, reject } = this.pendingRequests.get(data.transaction_id)!;
+
+                // SPECIAL CASE: File Download Response
+                if (data.topic === "FILE_DOWNLOAD"
+                    && data.data["file_name"] !== undefined && data.data["file_name"] !== null
+                    && data.data["file_name"].length > 0
                 ) {
-
-                    // The file name was supplied in the original request
-                    let tokens = data.args["file_name"].split("/");
+                    let tokens = data.data["file_name"].split("/");
+                    const filename = tokens[tokens.length - 1];
                     
-                    const filename = tokens[tokens.length - 1]; 
-                    if (data.result && data.result.success) {
-                        const blob = b64toBlob(data.result.data);
+                    if (data.success) {
+                        // Decode and trigger download
+                        const blob = b64toBlob(data.data);
                         downloadBlob(blob, filename);
-                        
-                        // Don't send the whole file through; that's crazy.
-                        data.result.data = filename;
-                        
-                        // Signal the function that initiated the download that all is well.
-                        resolve(data.result);
 
+                        // Clean up response data to avoid passing giant string to app
+                        data.data = filename;
+                        resolve(data);
                     } else {
-                        // Signal the function that initiated the download that it failed.
-                        reject(new Error(data.result?.error_message));
+                        reject(new Error(data.error_message));
                     }
-
                 }
+                // STANDARD CASE: Normal Command Response
                 else {
-                    
-                    if (!data.result?.success) {
-                        // Return the result to the function that initiated the request.
-                        reject(new Error(data.result?.error_message));
+                    if (!data.success) {
+                        reject(new Error(data.error_message));
                     } else {
-                        // Send the error to the function that intiated the request.
-                        resolve(data.result);
-                    }    
+                        // Success: resolve with the full message
+                        resolve(data);
+                    }
                 }
-                this.pendingRequests.delete(data.request_id);
+                // Cleanup request record
+                this.pendingRequests.delete(data.transaction_id);
             } else {
+                // No transaction ID means it's an unsolicited broadcast (subscription update)
+                console.log(`HUB BROADCAST: ${JSON.stringify(data)}`);
                 this.handleUnsolicitedMessage(data);
             }
         };
 
-        //
-        // Error occurred in the Websocket connection.
-        //
         this.socket.onerror = (error: Event) => {
             console.error('WebSocket error:', error);
+            getDebugPanel().wsError(String(error));
         };
 
-        //
-        // The Websocket connection has closed.
-        //
-        this.socket.onclose = () => {
+        this.socket.onclose = (event: CloseEvent) => {
             self.setIsConnected(false);
-            console.log('WebSocket connection closed.');            
+            console.log('WebSocket connection closed.');
+            getDebugPanel().wsClosed(event.code, event.reason || 'No reason');
         };
     }
 
 
     /**
-     * Invoke a command in the remote webserver. 
-     * @param domain The domain of the Servelet supplying the functionality.
-     * @param fname The name of the command to execute.
-     * @param payload The arguments of the command.
-     * @returns Promise<CommandMessageResult>
+     * Sends a command to the server via WebSocket.
+     * 
+     * Wraps the operation in a Promise that resolves when the server replies
+     * with a matching `transaction_id`.
      */
-    invoke = (domain : string, fname: string, payload?: object): Promise<CommandMessageResult> => {
+    invoke = (topic: string, messageType: MessageType, payload?: object): Promise<CommandMessage> => {
 
         return new Promise((resolve, reject) => {
-            const id = ++this.requestId; // Increment and use the request ID
+            const id = ++this.requestId; // Generate unique ID
             this.pendingRequests.set(id, { resolve, reject });
 
-            let cm : CommandMessage = {
-                request_id: id,
-                domain: domain,
-                fname: fname,
-                args: payload,
-                result: undefined
+            const data = payload ? payload : {};
+
+            const cm: CommandMessage = {
+                transaction_id: id,
+                topic: topic,
+                data: data,
+                timecode: Date.now(),
+                message_type: messageType,
+                success: false,
+                error_message: ''
             };
 
+            getDebugPanel().messageSent(MessageType[messageType], topic, id);
             this.socket.send(JSON.stringify(cm));
         });
     }
 
+    /**
+     * Processes messages that are not responses to a specific request.
+     * Usually these are subscription updates (Broadcasts).
+     */
     handleUnsolicitedMessage = (msg: CommandMessage) => {
-        // Handle messages that do not correspond to a pending request
-
-        if (msg.fname === "BROADCAST" 
-            && msg.domain.length >= 1
-            && msg.result !== undefined && msg.result !== null
-            && msg.result.data !== undefined && msg.result.data !== null            
-        ) {
-
-            let topic = `${msg.domain}/${msg.result.data["topic"]}`;
-
-            //console.log(`HUB PUBLISHING: ${topic} : ${JSON.stringify(msg.result.data)}`);
-            this.publish(topic, msg.result.data);
+        if (msg.message_type == MessageType.Broadcast && msg.topic.length > 1) {
+            console.log(`HUB PUBLISHING: ${msg.topic} : ${JSON.stringify(msg.data)}`);
+            
+            // Pass to HubBase to map the FQDN topic to a local tagName and dispatch
+            this.publish(msg.topic, msg.data);
         }
-        // else {
-        //     console.error("INVALID BROADCAST RECEIVED!");
-        // }
     }
 
-    disconnect= (): void => {
+    disconnect = (): void => {
         this.socket.close();
     }
 
     protected emit = (eventName: string, payload?: object): void => {
         this.socket.send(JSON.stringify({ eventName, payload }));
     }
-}
+}