Upgraded Regex Replace Node

Data/Server/WebUI/src/nodes/Data Analysis & Manipulation/Node_Regex_Replace.jsx

@@ -2,30 +2,20 @@
 import React, { useEffect, useRef, useState } from "react";
 import { Handle, Position, useReactFlow, useStore } from "reactflow";
 
+// Shared memory bus setup
 if (!window.BorealisValueBus) window.BorealisValueBus = {};
 if (!window.BorealisUpdateRate) window.BorealisUpdateRate = 100;
 
+// -- Modern Regex Replace Node -- //
 const RegexReplaceNode = ({ id, data }) => {
     const edges = useStore((state) => state.edges);
     const { setNodes } = useReactFlow();
 
-    const [pattern, setPattern] = useState(data?.pattern || "");
+    // Maintain output live value
-    const [replacement, setReplacement] = useState(data?.replacement || "");
-    const [flags, setFlags] = useState(data?.flags || "g");
-    const [enabled, setEnabled] = useState(data?.enabled ?? true);
     const [result, setResult] = useState("");
     const [original, setOriginal] = useState("");
-
     const valueRef = useRef("");
 
-    const updateNodeData = (key, val) => {
-        setNodes(nds =>
-            nds.map(n =>
-                n.id === id ? { ...n, data: { ...n.data, [key]: val } } : n
-            )
-        );
-    };
-
     useEffect(() => {
         let intervalId = null;
         let currentRate = window.BorealisUpdateRate;
@@ -39,11 +29,11 @@ const RegexReplaceNode = ({ id, data }) => {
             setOriginal(inputValue);
 
             let newVal = inputValue;
-
             try {
-                if (enabled && pattern) {
+                if ((data?.enabled ?? true) && data?.pattern) {
-                    const regex = new RegExp(pattern, flags);
+                    const regex = new RegExp(data.pattern, data.flags || "g");
-                    let safeReplacement = replacement.trim();
+                    let safeReplacement = (data.replacement ?? "").trim();
+                    // Remove quotes if user adds them
                     if (
                         safeReplacement.startsWith('"') &&
                         safeReplacement.endsWith('"')
@@ -65,6 +55,7 @@ const RegexReplaceNode = ({ id, data }) => {
 
         intervalId = setInterval(runNodeLogic, currentRate);
 
+        // Monitor update rate changes
         const monitor = setInterval(() => {
             const newRate = window.BorealisUpdateRate;
             if (newRate !== currentRate) {
@@ -78,84 +69,57 @@ const RegexReplaceNode = ({ id, data }) => {
             clearInterval(intervalId);
             clearInterval(monitor);
         };
-    }, [id, edges, pattern, replacement, flags, enabled]);
+    }, [id, edges, data?.pattern, data?.replacement, data?.flags, data?.enabled]);
 
     return (
         <div className="borealis-node">
             <Handle type="target" position={Position.Left} className="borealis-handle" />
 
-            <div className="borealis-node-header">Regex Replace</div>
+            <div className="borealis-node-header">
+                {data?.label || "Regex Replace"}
+            </div>
 
             <div className="borealis-node-content">
                 <div style={{ marginBottom: "6px", fontSize: "9px", color: "#ccc" }}>
-                    Perform regex replacement on upstream string
+                    Performs live regex-based find/replace on incoming string value.
                 </div>
-
+                <div style={{ fontSize: "9px", color: "#ccc", marginBottom: 2 }}>
-                <label>Regex Pattern:</label>
+                    <b>Pattern:</b> {data?.pattern || <i>(not set)</i>}<br />
-                <input
+                    <b>Flags:</b> {data?.flags || "g"}<br />
-                    type="text"
+                    <b>Enabled:</b> {(data?.enabled ?? true) ? "Yes" : "No"}
-                    value={pattern}
-                    onChange={(e) => {
-                        setPattern(e.target.value);
-                        updateNodeData("pattern", e.target.value);
-                    }}
-                    placeholder="e.g. \\d+"
-                    style={inputStyle}
-                />
-
-                <label>Replacement:</label>
-                <input
-                    type="text"
-                    value={replacement}
-                    onChange={(e) => {
-                        setReplacement(e.target.value);
-                        updateNodeData("replacement", e.target.value);
-                    }}
-                    placeholder="e.g. $1"
-                    style={inputStyle}
-                />
-
-                <label>Regex Flags:</label>
-                <input
-                    type="text"
-                    value={flags}
-                    onChange={(e) => {
-                        setFlags(e.target.value);
-                        updateNodeData("flags", e.target.value);
-                    }}
-                    placeholder="e.g. gi"
-                    style={inputStyle}
-                />
-
-                <div style={{ margin: "6px 0" }}>
-                    <label>
-                        <input
-                            type="checkbox"
-                            checked={enabled}
-                            onChange={(e) => {
-                                setEnabled(e.target.checked);
-                                updateNodeData("enabled", e.target.checked);
-                            }}
-                            style={{ marginRight: "6px" }}
-                        />
-                        Enable Replacement
-                    </label>
                 </div>
-
+                <label style={{ fontSize: "8px", color: "#888" }}>Original:</label>
-                <label>Original Input:</label>
                 <textarea
                     readOnly
                     value={original}
                     rows={2}
-                    style={textAreaStyle}
+                    style={{
+                        width: "100%",
+                        fontSize: "9px",
+                        background: "#222",
+                        color: "#ccc",
+                        border: "1px solid #444",
+                        borderRadius: "2px",
+                        padding: "3px",
+                        resize: "vertical",
+                        marginBottom: "6px"
+                    }}
                 />
-
+                <label style={{ fontSize: "8px", color: "#888" }}>Output:</label>
-                <label>Output:</label>
                 <textarea
                     readOnly
                     value={result}
                     rows={2}
-                    style={textAreaStyle}
+                    style={{
+                        width: "100%",
+                        fontSize: "9px",
+                        background: "#2a2a2a",
+                        color: "#ccc",
+                        border: "1px solid #444",
+                        borderRadius: "2px",
+                        padding: "3px",
+                        resize: "vertical"
+                    }}
                 />
             </div>
 
@@ -164,38 +128,84 @@ const RegexReplaceNode = ({ id, data }) => {
     );
 };
 
-const inputStyle = {
+// Modern Node Export: Sidebar config, usage docs, sensible defaults
-    width: "100%",
-    fontSize: "9px",
-    background: "#1e1e1e",
-    color: "#ccc",
-    border: "1px solid #444",
-    borderRadius: "2px",
-    padding: "3px",
-    marginBottom: "6px"
-};
-
-const textAreaStyle = {
-    width: "100%",
-    fontSize: "9px",
-    background: "#2a2a2a",
-    color: "#ccc",
-    border: "1px solid #444",
-    borderRadius: "2px",
-    padding: "3px",
-    resize: "vertical",
-    marginBottom: "6px"
-};
-
 export default {
     type: "RegexReplace",
-    label: "Regex Replacer",
+    label: "Regex Replace",
     description: `
-Enhanced Regex Replacer:
+Live regex-based string find/replace node.
-- Add regex flags (g, i, m, etc)
+
-- Live preview of input vs output
+- Runs a JavaScript regular expression on every input update.
-- Optional enable toggle for replacement logic
+- Useful for cleanup, format fixes, redacting, token extraction.
+- Configurable flags, replacement text, and enable toggle.
+- Handles errors gracefully, shows live preview in the sidebar.
 `.trim(),
-    content: "Perform regex replacement on upstream string",
+    content: "Perform regex replacement on incoming string",
-    component: RegexReplaceNode
+    component: RegexReplaceNode,
+    config: [
+        {
+            key: "pattern",
+            label: "Regex Pattern",
+            type: "text",
+            defaultValue: "\\d+"
+        },
+        {
+            key: "replacement",
+            label: "Replacement",
+            type: "text",
+            defaultValue: ""
+        },
+        {
+            key: "flags",
+            label: "Regex Flags",
+            type: "text",
+            defaultValue: "g"
+        },
+        {
+            key: "enabled",
+            label: "Enable Replacement",
+            type: "select",
+            options: ["true", "false"],
+            defaultValue: "true"
+        }
+    ],
+    usage_documentation: `
+### Regex Replace Node
+
+**Purpose:**  
+Perform flexible find-and-replace on strings using JavaScript-style regular expressions.
+
+#### Typical Use Cases
+- Clean up text, numbers, or IDs in a data stream
+- Mask or redact sensitive info (emails, credit cards, etc)
+- Extract tokens, words, or reformat content
+
+#### Configuration (see "Config" tab):
+- **Regex Pattern**: The search pattern (supports capture groups)
+- **Replacement**: The replacement string. You can use \`$1, $2\` for capture groups.
+- **Regex Flags**: Default \`g\` (global). Add \`i\` (case-insensitive), \`m\` (multiline), etc.
+- **Enable Replacement**: On/Off toggle (for easy debugging)
+
+#### Behavior
+- Upstream value is live-updated.
+- When enabled, node applies the regex and emits the result downstream.
+- Shows both input and output in the sidebar for debugging.
+- If the regex is invalid, error is displayed as output.
+
+#### Output
+- Emits the transformed string to all downstream nodes.
+- Updates in real time at the global Borealis update rate.
+
+#### Example
+Pattern: \`(\\d+)\`  
+Replacement: \`[number:$1]\`  
+Input: \`abc 123 def 456\`  
+Output: \`abc [number:123] def [number:456]\`
+
+---
+**Tips:**  
+- Use double backslashes (\\) in patterns when needed (e.g. \`\\\\d+\`).
+- Flags can be any combination (e.g. \`gi\`).
+
+  `.trim()
 };