@adcops/autocore-react 3.0.40 → 3.3.2

package/src/components/AutoCoreDevPanel.tsx

@@ -0,0 +1,414 @@
+/*
+ * Copyright (C) 2025 Automated Design Corp.. All Rights Reserved.
+ * Created Date: 2025-09-05 08:06:09
+ * -----
+ * Last Modified: 2026-01-20 06:09:05
+ * -----
+ * 
+ */
+
+/**
+ * @module components/AutoCoreDevPanel
+ * 
+ * @summary
+ * 
+ * A development and debugging panel for monitoring and manually interacting with AutoCore tags.
+ * This component provides real-time visibility into tag values and allows direct manipulation
+ * for testing and debugging purposes.
+ * 
+ * @remarks
+ * 
+ * The AutoCoreDevPanel is designed to be used during development to:
+ * - Monitor live tag values in real-time
+ * - Test write operations manually 
+ * - Debug tag behavior and connectivity
+ * - Perform tap operations on boolean tags
+ * - Validate tag configurations
+ * 
+ * The panel automatically connects to the global AutoCoreTagContext and displays all
+ * tags passed to it. No additional setup or factory functions are required.
+ * 
+ * @example Basic Usage
+ * ```tsx
+ * import React from 'react';
+ * import { AutoCoreDevPanel } from "@adcops/autocore-react/components/AutoCoreDevPanel";
+ * import { acTagSpec } from "./AutoCoreTags";
+ * 
+ * function App() {
+ *   return (
+ *     <div>
+ *       <main>
+ *         <YourMainContent />
+ *       </main>
+ *       
+ *       {process.env.NODE_ENV === 'development' && (
+ *         <AutoCoreDevPanel 
+ *           tags={acTagSpec} 
+ *           className="fixed bottom-4 right-4 bg-white shadow-lg" 
+ *         />
+ *       )}
+ *     </div>
+ *   );
+ * }
+ * ```
+ * 
+ * @example Styled Panel
+ * ```tsx
+ * import { AutoCoreDevPanel } from "@adcops/autocore-react/components/AutoCoreDevPanel";
+ * import { acTagSpec } from "./AutoCoreTags";
+ * 
+ * // Custom styled panel
+ * <AutoCoreDevPanel 
+ *   tags={acTagSpec}
+ *   title="Machine Status Monitor"
+ *   className="
+ *     fixed top-4 left-4 
+ *     bg-gray-900 text-white 
+ *     border border-gray-700 
+ *     shadow-2xl rounded-lg
+ *     max-w-md
+ *   "
+ * />
+ * ```
+ * 
+ * @example Filtered Tags
+ * ```tsx
+ * import { AutoCoreDevPanel } from "@adcops/autocore-react/components/AutoCoreDevPanel";
+ * import { acTagSpec } from "./AutoCoreTags";
+ * 
+ * // Show only specific tags for focused debugging
+ * const motorTags = acTagSpec.filter(tag => 
+ *   tag.tagName.includes('motor') || tag.tagName.includes('axis')
+ * );
+ * 
+ * <AutoCoreDevPanel 
+ *   tags={motorTags}
+ *   title="Motor Control Debug"
+ *   className="debug-panel"
+ * />
+ * ```
+ */
+
+import React, { useContext, useMemo, useState, useCallback } from "react";
+import type { TagConfig } from "../core/AutoCoreTagTypes";
+import { AutoCoreTagContext } from "../core/AutoCoreTagContext";
+
+/** Extract domain (first segment) from FQDN */
+const getDomain = (fqdn: string): string => fqdn.split('.')[0];
+
+/**
+ * Props for the AutoCoreDevPanel component.
+ */
+interface AutoCoreDevPanelProps {
+  /** 
+   * Array of tag configurations to display in the panel.
+   * Each tag will show its current value and provide controls for writing new values.
+   */
+  tags: readonly TagConfig[];
+  
+  /** 
+   * Optional title for the panel header. 
+   * @defaultValue "AutoCore Dev Panel"
+   */
+  title?: string;
+  
+  /** 
+   * Optional CSS class names for custom styling.
+   * The panel has default styling but can be customized with Tailwind or custom CSS.
+   */
+  className?: string;
+}
+
+/**
+ * AutoCoreDevPanel - Development and debugging panel for AutoCore tags.
+ * 
+ * This component provides a real-time debugging interface for monitoring and manipulating
+ * AutoCore tags during development. It displays current tag values, provides input controls
+ * for writing new values, and includes tap functionality for boolean tags.
+ * 
+ * ## Features
+ * 
+ * - **Real-time monitoring**: Shows live tag values as they update from the server
+ * - **Direct writes**: Input controls to write new values directly to tags
+ * - **Type-aware inputs**: Automatically provides appropriate input types (checkbox for boolean, number input for numeric, etc.)
+ * - **Tap functionality**: Special "TAP" buttons for boolean tags that send momentary true→false signals
+ * - **Error handling**: Visual feedback for write failures and validation errors
+ * - **Live status**: Indicator showing whether the system is loading or live
+ * - **JSON support**: Proper formatting and editing for JSON-type tags
+ * 
+ * ## Input Types
+ * 
+ * - **Boolean tags**: Checkbox for direct true/false setting + TAP button for momentary signals
+ * - **Number tags**: Number input with validation
+ * - **String tags**: Text input
+ * - **JSON tags**: Text input with JSON validation and pretty-printing
+ * 
+ * ## Keyboard Shortcuts
+ * 
+ * - **Enter key**: In text/number inputs, immediately sends the value to the server
+ * - **Tab navigation**: Navigate between inputs using standard keyboard navigation
+ * 
+ * ## Error Handling
+ * 
+ * Write operations that fail will show error messages below the input field.
+ * Common errors include:
+ * - Invalid number formats
+ * - Malformed JSON
+ * - Network/server errors
+ * - Tag not found errors
+ */
+export const AutoCoreDevPanel: React.FC<AutoCoreDevPanelProps> = ({
+  tags,
+  title = "AutoCore Dev Panel",
+  className = "",
+}) => {
+  const { values, rawValues, isLoading, write, tap, scales } = useContext(AutoCoreTagContext);
+
+  /** Local editable buffers & errors keyed by tagName */
+  const [editBuf, setEditBuf] = useState<Record<string, string>>({});
+  const [errors, setErrors] = useState<Record<string, string>>({});
+
+  const rows = useMemo(() => {
+    return tags.map((tag) => {
+      const display = values[tag.fqdn];
+      const raw = rawValues[tag.fqdn];
+      const scaleName = tag.scale ?? "";
+      const s = scaleName ? scales[scaleName] : undefined;
+      return {
+        tag,
+        display,
+        raw,
+        scaleName,
+        factor: s?.scale,
+        label: s?.label,
+      };
+    });
+  }, [tags, values, rawValues, scales]);
+
+  const setBuf = useCallback((tagName: string, v: string) => {
+    setEditBuf((prev) => ({ ...prev, [tagName]: v }));
+    setErrors((prev) => ({ ...prev, [tagName]: "" }));
+  }, []);
+
+  const setErr = useCallback((tagName: string, msg: string) => {
+    setErrors((prev) => ({ ...prev, [tagName]: msg }));
+  }, []);
+
+  const commit = useCallback(async (tag: TagConfig) => {
+    const tagName = tag.fqdn;
+    const buf = editBuf[tagName];
+
+    try {
+      if (tag.valueType === "boolean") {
+        // Toggle to the buffer value if explicitly provided, else flip current
+        const desired =
+          buf === "true" ? true :
+          buf === "false" ? false :
+          !(values[tagName] as boolean);
+        await write(tagName as any, desired as any);
+        setBuf(tagName, "");
+        return;
+      }
+
+      if (tag.valueType === "number") {
+        if (buf == null || buf.trim() === "") {
+          setErr(tagName, "Enter a number.");
+          return;
+        }
+        const n = Number(buf);
+        if (Number.isNaN(n)) {
+          setErr(tagName, "Invalid number.");
+          return;
+        }
+        await write(tagName as any, n as any);
+        setBuf(tagName, "");
+        return;
+      }
+
+      if (tag.valueType === "string") {
+        await write(tagName as any, (buf ?? "") as any);
+        setBuf(tagName, "");
+        return;
+      }
+
+      // json
+      try {
+        const parsed = buf?.trim() ? JSON.parse(buf) : null;
+        await write(tagName as any, parsed as any);
+        setBuf(tagName, "");
+      } catch (e: any) {
+        setErr(tagName, "Invalid JSON.");
+      }
+    } catch (e: any) {
+      setErr(tagName, e?.message ?? String(e));
+    }
+  }, [editBuf, setBuf, setErr, write, values]);
+
+  const onKeyDownCommit = (ev: React.KeyboardEvent, tag: TagConfig) => {
+    if (ev.key === "Enter" && !ev.shiftKey) {
+      ev.preventDefault();
+      void commit(tag);
+    }
+  };
+
+  return (
+    <div className={`rounded-md border border-gray-200 bg-white text-sm ${className}`} style={{ minWidth: 680 }}>
+      <div className="flex items-center justify-between px-3 py-2" style={{ borderBottom: "1px solid #eee" }}>
+        <div className="flex items-center gap-2">
+          <strong>{title}</strong>
+          <span
+            title={isLoading ? "Loading" : "Live"}
+            style={{
+              width: 8, height: 8, borderRadius: 999,
+              background: isLoading ? "#aaa" : "#22c55e",
+              display: "inline-block"
+            }}
+          />
+        </div>
+      </div>
+
+      <div style={{ overflowX: "auto" }}>
+        <table style={{ borderCollapse: "collapse", width: "100%" }}>
+          <thead>
+            <tr>
+              <Th>Tag</Th>
+              <Th>Kind</Th>
+              <Th>Domain</Th>
+              <Th>Symbol</Th>
+              <Th>Display</Th>
+              <Th>Raw</Th>
+              <Th>Scale</Th>
+              <Th>Units</Th>
+              <Th>Input</Th>
+              <Th>Actions</Th>
+            </tr>
+          </thead>
+          <tbody>
+            {rows.map(({ tag, display, raw, scaleName, factor, label }) => {
+              const buf = editBuf[tag.fqdn] ?? "";
+              const err = errors[tag.fqdn];
+
+              return (
+                <tr key={tag.fqdn}>
+                  <Td mono>{tag.tagName}</Td>
+                  <Td mono>{tag.valueType}</Td>
+                  <Td mono>{getDomain(tag.fqdn)}</Td>
+                  <Td mono>{tag.fqdn}</Td>
+                  <Td mono>{fmt(display)}</Td>
+                  <Td mono>{fmt(raw)}</Td>
+                  <Td mono>{scaleName ? `${scaleName} ×${factor ?? 1}` : "—"}</Td>
+                  <Td mono>{scaleName ? (label ?? "") : "—"}</Td>
+                  <Td>
+                    <InputForTag
+                      tag={tag}
+                      buf={buf}
+                      setBuf={(v) => setBuf(tag.fqdn, v)}
+                      onKeyDown={(e) => onKeyDownCommit(e, tag)}
+                    />
+                    {err && <div style={{ color: "#dc2626", marginTop: 4 }}>{err}</div>}
+                  </Td>
+                  <Td>
+                    <div style={{ display: "flex", gap: 6 }}>
+                      <button onClick={() => commit(tag)}>Write</button>
+                      {tag.valueType === "boolean" && (
+                        <button onClick={() => tap(tag.fqdn as any)}>TAP</button>
+                      )}
+                    </div>
+                  </Td>
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+};
+
+/** ---------- helpers ---------- */
+
+const Th: React.FC<React.PropsWithChildren<{}>> = ({ children }) => (
+  <th style={{
+    textAlign: "left",
+    borderBottom: "1px solid #ddd",
+    padding: "6px 8px",
+    fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace"
+  }}>{children}</th>
+);
+
+const Td: React.FC<React.PropsWithChildren<{ mono?: boolean }>> = ({ children, mono }) => (
+  <td style={{
+    borderBottom: "1px solid #eee",
+    padding: "6px 8px",
+    whiteSpace: "nowrap",
+    fontFamily: mono ? "ui-monospace, SFMono-Regular, Menlo, monospace" : "inherit"
+  }}>{children}</td>
+);
+
+const InputForTag: React.FC<{
+  tag: TagConfig;
+  buf: string;
+  setBuf: (v: string) => void;
+  onKeyDown: (e: React.KeyboardEvent) => void;
+}> = ({ tag, buf, setBuf, onKeyDown }) => {
+  if (tag.valueType === "boolean") {
+    // Boolean: checkbox controls direct true/false (buffer mirrors state as string)
+    return (
+      <label style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
+        <input
+          type="checkbox"
+          checked={buf ? buf === "true" : (Boolean as any)}
+          onChange={(e) => setBuf(e.target.checked ? "true" : "false")}
+          onKeyDown={onKeyDown}
+        />
+        <span>set</span>
+      </label>
+    );
+  }
+
+  if (tag.valueType === "number") {
+    return (
+      <input
+        type="number"
+        step="any"
+        value={buf}
+        onChange={(e) => setBuf(e.target.value)}
+        onKeyDown={onKeyDown}
+        style={{ width: 140 }}
+        placeholder="number…"
+      />
+    );
+  }
+
+  if (tag.valueType === "string") {
+    return (
+      <input
+        type="text"
+        value={buf}
+        onChange={(e) => setBuf(e.target.value)}
+        onKeyDown={onKeyDown}
+        style={{ width: 180 }}
+        placeholder="text…"
+      />
+    );
+  }
+
+  // json
+  return (
+    <textarea
+      value={buf}
+      onChange={(e) => setBuf(e.target.value)}
+      onKeyDown={onKeyDown}
+      rows={2}
+      style={{ width: 260, fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace" }}
+      placeholder='{"foo": 42}'
+    />
+  );
+};
+
+function fmt(v: unknown) {
+  if (v === null || v === undefined) return "—";
+  if (typeof v === "number") return Number.isFinite(v) ? v.toString() : String(v);
+  if (typeof v === "string") return v;
+  try { return JSON.stringify(v); } catch { return String(v); }
+}

package/src/components/CodeEditor.tsx

@@ -2,7 +2,7 @@
  * Copyright (C) 2024 Automated Design Corp.. All Rights Reserved.
  * Created Date: 2024-03-17 08:43:02
  * -----
- * Last Modified: 2024-03-18 11:29:08
+ * Last Modified: 2025-09-05 14:52:18
  * -----
  * 
  */
@@ -12,7 +12,7 @@
 import * as React from 'react';
 import { editor } from 'monaco-editor';
 //import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
-import Editor, { Monaco } from '@monaco-editor/react';
+import Editor, { type Monaco } from '@monaco-editor/react';
 
 
 interface CodeEditorProps {

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: 2025-01-20 19:15:50
+ * Last Modified: 2025-09-05 14:53:22
  * -----
  * 
  */
@@ -21,9 +21,10 @@ import { Column } from 'primereact/column';
 import { Toolbar } from 'primereact/toolbar';
 import { Button } from 'primereact/button';
 import { confirmPopup } from 'primereact/confirmpopup';
-import { FileUpload, FileUploadHandlerEvent} from 'primereact/fileupload';
+import { FileUpload, type FileUploadHandlerEvent} from 'primereact/fileupload';
 
 import { EventEmitterContext } from '../core/EventEmitterContext';
+import { MessageType } from '../hub/CommandMessage';
 
 
 /**
@@ -148,7 +149,7 @@ export const FileList: React.FC<FileListProps> = ({
     const listFiles = async () => {
         try {
             const args = subdir !== undefined ? { "subdir": subdir } : {};
-            let res = await invoke(domain, "list_files", args);
+            let res = await invoke(`${domain}.list_files`, MessageType.Request, args);
 
             let items = [];
             for (let i = 0; i < res.data.length; ++i) {
@@ -179,7 +180,7 @@ export const FileList: React.FC<FileListProps> = ({
         let target = makeTargetName(file.name);
 
         try {
-            await invoke(domain, "download_file", { file_name: target });
+            await invoke(`${domain}.download_file`, MessageType.Request, { file_name: target });
             if (onSuccess)
                 onSuccess(`Downloaded file: ${file.name}`);
         } catch (error) {
@@ -199,7 +200,7 @@ export const FileList: React.FC<FileListProps> = ({
         let target = makeTargetName(file_name);
 
         try {
-            await invoke(domain, "delete_file", { file_name: target });
+            await invoke(`${domain}.delete_file`, MessageType.Request, { file_name: target });
             if (onSuccess)
                 onSuccess(`Deleted file: ${file_name}`);
 
@@ -253,7 +254,7 @@ export const FileList: React.FC<FileListProps> = ({
             const base64String = arrayBufferToBase64(arrayBuffer);            
     
             try {
-                await invoke(domain, "write_file", { file_name: target, value: base64String, options :{"base64" : true} });
+                await invoke(`${domain}.write_file`, MessageType.Request, { file_name: target, value: base64String, options: { "base64": true } });
 
                 if (onSuccess)
                     onSuccess(`Uploaded file ${file.name}`);

package/src/components/FileSelect.tsx

@@ -14,6 +14,7 @@ import { Column } from 'primereact/column';
 import { Button } from 'primereact/button';
 
 import { EventEmitterContext } from "../core/EventEmitterContext";
+import { MessageType } from '../hub/CommandMessage';
 
 type FileSelectProps = {
     domain?: string,
@@ -54,7 +55,7 @@ export const FileSelect: React.FC<FileSelectProps> = ({
                 args = subdir ? { "subdir": subdir } : {};
             }
 
-            const res = await invoke(domain, "list_files", args);
+            const res = await invoke(`${domain}.list_files`, MessageType.Request, args);
             const items = res.data.map((item: string, index: number) => ({
                 id: index + 1,
                 name: item

package/src/components/Indicator.tsx

@@ -2,7 +2,7 @@
  * Copyright (C) 2024 Automated Design Corp. All Rights Reserved.
  * Created Date: 2024-01-16 14:39:41
  * -----
- * Last Modified: 2024-03-12 21:53:48
+ * Last Modified: 2025-09-05 14:52:12
  * -----
  * 
  */
@@ -10,7 +10,7 @@
 
 import React, { Component } from 'react';
 //import clsx from 'clsx';
-import { EventEmitterContext, EventEmitterContextType } from '../core/EventEmitterContext';
+import { EventEmitterContext, type EventEmitterContextType } from '../core/EventEmitterContext';
 //import { IPositionContext } from '../core/PositionContext';
 import {IndicatorColor} from "../core/IndicatorColor";
 export {IndicatorColor}

package/src/components/IndicatorButton.tsx

@@ -1,8 +1,8 @@
 import React, { useCallback, useContext, useEffect, useState } from "react";
-import { Button, ButtonProps } from "primereact/button";
+import { Button, type ButtonProps } from "primereact/button";
 import {
   EventEmitterContext,
-  EventEmitterContextType,
+  type EventEmitterContextType,
 } from "../core/EventEmitterContext";
 import { IndicatorColor } from "../core/IndicatorColor";
 export { IndicatorColor };

package/src/components/IndicatorRect.tsx

@@ -2,13 +2,13 @@
  * Copyright (C) 2025 Automated Design Corp.. All Rights Reserved.
  * Created Date: 2025-01-20 15:09:55
  * -----
- * Last Modified: 2025-01-20 15:10:06
+ * Last Modified: 2025-09-05 14:51:58
  * -----
  * 
  */
 
 import { Component } from 'react';
-import { EventEmitterContext, EventEmitterContextType } from '../core/EventEmitterContext';
+import { EventEmitterContext, type EventEmitterContextType } from '../core/EventEmitterContext';
 import { IndicatorColor } from "../core/IndicatorColor";
 export { IndicatorColor };
 

package/src/components/Lamp.tsx

@@ -2,7 +2,7 @@
  * Copyright (C) 2024 Automated Design Corp. All Rights Reserved.
  * Created Date: 2024-01-16 14:39:41
  * -----
- * Last Modified: 2024-03-12 21:12:29
+ * Last Modified: 2025-09-05 14:51:51
  * -----
  * 
  */
@@ -73,8 +73,8 @@
 
 import React, { Component } from 'react';
 import clsx from 'clsx';
-import { EventEmitterContext, EventEmitterContextType } from '../core/EventEmitterContext';
-import { IPositionContext } from '../core/PositionContext';
+import { EventEmitterContext, type EventEmitterContextType } from '../core/EventEmitterContext';
+import type { IPositionContext } from '../core/PositionContext';
 import {IndicatorColor} from "../core/IndicatorColor";
 export {IndicatorColor}