From d3b3258dbf107351598a8489a67137cc185cda5d Mon Sep 17 00:00:00 2001
From: Nicole Rappe <nicole.rappe@bunny-lab.io>
Date: Mon, 5 May 2025 06:02:45 -0600
Subject: [PATCH] Added Text Upload & Display Nodes

---
 .../nodes/Data Analysis/Node_Regex_Search.jsx |   1 -
 .../Data Analysis/Node_TextArray_Display.jsx  | 190 ++++++++++++++++++
 .../Data Processing/Node_Upload_Text.jsx      | 123 ++++++++++++
 .../src/nodes/Templates/Node_Template.jsx     |  10 -
 4 files changed, 313 insertions(+), 11 deletions(-)
 create mode 100644 Data/Server/WebUI/src/nodes/Data Analysis/Node_TextArray_Display.jsx
 create mode 100644 Data/Server/WebUI/src/nodes/Data Processing/Node_Upload_Text.jsx

diff --git a/Data/Server/WebUI/src/nodes/Data Analysis/Node_Regex_Search.jsx b/Data/Server/WebUI/src/nodes/Data Analysis/Node_Regex_Search.jsx
index 10fd2d1..6fdf1db 100644
--- a/Data/Server/WebUI/src/nodes/Data Analysis/Node_Regex_Search.jsx	
+++ b/Data/Server/WebUI/src/nodes/Data Analysis/Node_Regex_Search.jsx	
@@ -1,5 +1,4 @@
 ////////// PROJECT FILE SEPARATION LINE ////////// CODE AFTER THIS LINE ARE FROM: <ProjectRoot>/Data/WebUI/src/nodes/Data Analysis/Node_Regex_Search.jsx
-////////// PROJECT FILE SEPARATION LINE ////////// CODE AFTER THIS LINE ARE FROM: <ProjectRoot>/Data/WebUI/src/nodes/Data Manipulation/Node_Regex_Search.jsx
 import React, { useEffect, useState, useRef } from "react";
 import { Handle, Position, useReactFlow, useStore } from "reactflow";
 
diff --git a/Data/Server/WebUI/src/nodes/Data Analysis/Node_TextArray_Display.jsx b/Data/Server/WebUI/src/nodes/Data Analysis/Node_TextArray_Display.jsx
new file mode 100644
index 0000000..ecab13e
--- /dev/null
+++ b/Data/Server/WebUI/src/nodes/Data Analysis/Node_TextArray_Display.jsx	
@@ -0,0 +1,190 @@
+////////// PROJECT FILE SEPARATION LINE ////////// CODE AFTER THIS LINE ARE FROM: <ProjectRoot>/nodes/Data Analysis/Node_TextArray_Display.jsx
+
+/**
+ * Display Multi-Line Array Node
+ * --------------------------------------------------
+ * A node to display upstream multi-line text arrays.
+ * Has one input edge on left and passthrough output on right.
+ * Custom drag-resize handle for width & height adjustments.
+ * Inner textarea scrolls vertically; container overflow visible.
+ */
+import React, { useEffect, useState, useRef, useCallback } from "react";
+import { Handle, Position, useReactFlow, useStore } from "reactflow";
+
+const TextArrayDisplayNode = ({ id, data }) => {
+  const { setNodes } = useReactFlow();
+  const edges = useStore((state) => state.edges);
+  const containerRef = useRef(null);
+  const resizingRef = useRef(false);
+  const startPosRef = useRef({ x: 0, y: 0 });
+  const startDimRef = useRef({ width: 0, height: 0 });
+
+  // Initialize lines and dimensions
+  const [lines, setLines] = useState(data?.lines || []);
+  const linesRef = useRef(lines);
+  const initW = parseInt(data?.width || "300", 10);
+  const initH = parseInt(data?.height || "150", 10);
+  const [dimensions, setDimensions] = useState({ width: initW, height: initH });
+
+  // Persist dimensions to node data
+  const persistDimensions = useCallback(() => {
+    const w = `${Math.round(dimensions.width)}px`;
+    const h = `${Math.round(dimensions.height)}px`;
+    setNodes((nds) =>
+      nds.map((n) =>
+        n.id === id
+          ? { ...n, data: { ...n.data, width: w, height: h } }
+          : n
+      )
+    );
+  }, [dimensions, id, setNodes]);
+
+  // Mouse handlers for custom resize
+  useEffect(() => {
+    const onMouseMove = (e) => {
+      if (!resizingRef.current) return;
+      const dx = e.clientX - startPosRef.current.x;
+      const dy = e.clientY - startPosRef.current.y;
+      setDimensions({
+        width: Math.max(100, startDimRef.current.width + dx),
+        height: Math.max(60, startDimRef.current.height + dy)
+      });
+    };
+    const onMouseUp = () => {
+      if (resizingRef.current) {
+        resizingRef.current = false;
+        persistDimensions();
+      }
+    };
+    window.addEventListener("mousemove", onMouseMove);
+    window.addEventListener("mouseup", onMouseUp);
+    return () => {
+      window.removeEventListener("mousemove", onMouseMove);
+      window.removeEventListener("mouseup", onMouseUp);
+    };
+  }, [persistDimensions]);
+
+  // Start drag
+  const onResizeMouseDown = (e) => {
+    e.stopPropagation();
+    resizingRef.current = true;
+    startPosRef.current = { x: e.clientX, y: e.clientY };
+    startDimRef.current = { ...dimensions };
+  };
+
+  // Polling for upstream data
+  useEffect(() => {
+    let rate = window.BorealisUpdateRate;
+    const tick = () => {
+      const edge = edges.find((e) => e.target === id);
+      if (edge && edge.source) {
+        const arr = window.BorealisValueBus[edge.source] || [];
+        if (JSON.stringify(arr) !== JSON.stringify(linesRef.current)) {
+          linesRef.current = arr;
+          setLines(arr);
+          window.BorealisValueBus[id] = arr;
+          setNodes((nds) =>
+            nds.map((n) =>
+              n.id === id ? { ...n, data: { ...n.data, lines: arr } } : n
+            )
+          );
+        }
+      } else {
+        window.BorealisValueBus[id] = linesRef.current;
+      }
+    };
+    const iv = setInterval(tick, rate);
+    const monitor = setInterval(() => {
+      if (window.BorealisUpdateRate !== rate) {
+        clearInterval(iv);
+        clearInterval(monitor);
+      }
+    }, 200);
+    return () => { clearInterval(iv); clearInterval(monitor); };
+  }, [id, edges, setNodes]);
+
+  return (
+    <div
+      ref={containerRef}
+      className="borealis-node"
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        width: dimensions.width,
+        height: dimensions.height,
+        overflow: "visible",
+        position: "relative",
+        boxSizing: "border-box"
+      }}
+    >
+      {/* Connectors */}
+      <Handle type="target" position={Position.Left} className="borealis-handle" />
+      <Handle type="source" position={Position.Right} className="borealis-handle" />
+
+      {/* Header */}
+      <div className="borealis-node-header">
+        {data?.label || "Display Multi-Line Array"}
+      </div>
+
+      {/* Content */}
+      <div
+        className="borealis-node-content"
+        style={{
+          flex: 1,
+          padding: "4px",
+          fontSize: "9px",
+          color: "#ccc",
+          display: "flex",
+          flexDirection: "column",
+          overflow: "hidden"
+        }}
+      >
+        <div style={{ marginBottom: "4px" }}>
+          {data?.content || "Display upstream multi-line text arrays."}
+        </div>
+        <label style={{ marginBottom: "4px" }}>Upstream Text Data:</label>
+        <textarea
+          value={lines.join("\n")}
+          readOnly
+          style={{
+            flex: 1,
+            width: "100%",
+            fontSize: "9px",
+            background: "#1e1e1e",
+            color: "#ccc",
+            border: "1px solid #444",
+            borderRadius: "2px",
+            padding: "4px",
+            resize: "none",
+            overflowY: "auto",
+            boxSizing: "border-box"
+          }}
+        />
+      </div>
+
+      {/* Invisible drag-resize handle */}
+      <div
+        onMouseDown={onResizeMouseDown}
+        style={{
+          position: "absolute",
+          width: "20px",
+          height: "20px",
+          right: "-4px",
+          bottom: "-4px",
+          cursor: "nwse-resize",
+          background: "transparent",
+          zIndex: 10
+        }}
+      />
+    </div>
+  );
+};
+
+// Export node metadata
+export default {
+  type: "Node_TextArray_Display",
+  label: "Display Multi-Line Array",
+  description: "Display upstream multi-line text arrays.",
+  content: "Display upstream multi-line text arrays.",
+  component: TextArrayDisplayNode
+};
diff --git a/Data/Server/WebUI/src/nodes/Data Processing/Node_Upload_Text.jsx b/Data/Server/WebUI/src/nodes/Data Processing/Node_Upload_Text.jsx
new file mode 100644
index 0000000..be757b5
--- /dev/null
+++ b/Data/Server/WebUI/src/nodes/Data Processing/Node_Upload_Text.jsx	
@@ -0,0 +1,123 @@
+////////// PROJECT FILE SEPARATION LINE ////////// CODE AFTER THIS LINE ARE FROM: <ProjectRoot>/Data/WebUI/src/nodes/Data/Node_Upload_Text.jsx
+
+/**
+ * Upload Text File Node
+ * --------------------------------------------------
+ * A node to upload a text file (TXT/LOG/INI/ETC) and store it as a multi-line text array.
+ * No input edges. Outputs an array of text lines via the shared value bus.
+ */
+import React, { useEffect, useState, useRef } from "react";
+import { Handle, Position, useReactFlow, useStore } from "reactflow";
+
+const UploadTextFileNode = ({ id, data }) => {
+  const { setNodes } = useReactFlow();
+  const edges = useStore((state) => state.edges);
+
+  // Initialize lines from persisted data or empty
+  const initialLines = data?.lines || [];
+  const [lines, setLines] = useState(initialLines);
+  const linesRef = useRef(initialLines);
+
+  const fileInputRef = useRef(null);
+
+  // Handle file selection and reading
+  const handleFileChange = (e) => {
+    const file = e.target.files && e.target.files[0];
+    if (!file) return;
+    file.text().then((text) => {
+      const arr = text.split(/\r\n|\n/);
+      linesRef.current = arr;
+      setLines(arr);
+      // Broadcast to shared bus
+      window.BorealisValueBus[id] = arr;
+      // Persist data for workflow serialization
+      setNodes((nds) =>
+        nds.map((n) =>
+          n.id === id
+            ? { ...n, data: { ...n.data, lines: arr } }
+            : n
+        )
+      );
+    });
+  };
+
+  // Trigger file input click
+  const handleUploadClick = () => {
+    fileInputRef.current?.click();
+  };
+
+  // Periodically broadcast current lines to bus
+  useEffect(() => {
+    let currentRate = window.BorealisUpdateRate;
+    const intervalId = setInterval(() => {
+      window.BorealisValueBus[id] = linesRef.current;
+    }, currentRate);
+
+    // Monitor for rate changes
+    const monitorId = setInterval(() => {
+      const newRate = window.BorealisUpdateRate;
+      if (newRate !== currentRate) {
+        clearInterval(intervalId);
+        clearInterval(monitorId);
+      }
+    }, 250);
+
+    return () => {
+      clearInterval(intervalId);
+      clearInterval(monitorId);
+    };
+  }, [id]);
+
+  return (
+    <div className="borealis-node">
+      {/* No input handle for this node */}
+      <div className="borealis-node-header">
+        {data?.label || "Upload Text File"}
+      </div>
+      <div className="borealis-node-content">
+        <div style={{ marginBottom: "8px", fontSize: "9px", color: "#ccc" }}>
+          {data?.content ||
+            "Upload a text-based file, output a multi-line string array."}
+        </div>
+        <button
+          onClick={handleUploadClick}
+          style={{
+            width: "100%",
+            padding: "6px",
+            fontSize: "9px",
+            background: "#1e1e1e",
+            color: "#ccc",
+            border: "1px solid #444",
+            borderRadius: "2px",
+            cursor: "pointer"
+          }}
+        >
+          Select File...
+        </button>
+        <input
+          type="file"
+          accept=".txt,.log,.ini,text/*"
+          style={{ display: "none" }}
+          ref={fileInputRef}
+          onChange={handleFileChange}
+        />
+      </div>
+
+      {/* Output connector on right */}
+      <Handle
+        type="source"
+        position={Position.Right}
+        className="borealis-handle"
+      />
+    </div>
+  );
+};
+
+// Export node metadata for Borealis
+export default {
+  type: "Upload_Text_File",
+  label: "Upload Text File",
+  description: "A node to upload a text file (TXT/LOG/INI/ETC) and store it as a multi-line text array.",
+  content: "Upload a text-based file, output a multi-line string array.",
+  component: UploadTextFileNode
+};
diff --git a/Data/Server/WebUI/src/nodes/Templates/Node_Template.jsx b/Data/Server/WebUI/src/nodes/Templates/Node_Template.jsx
index 85cdf1a..99e6a61 100644
--- a/Data/Server/WebUI/src/nodes/Templates/Node_Template.jsx
+++ b/Data/Server/WebUI/src/nodes/Templates/Node_Template.jsx
@@ -26,16 +26,6 @@
 import React, { useEffect, useState, useRef } from "react";
 import { Handle, Position, useReactFlow, useStore } from "reactflow";
 
-// Ensure the global shared bus exists for inter-node communication
-if (!window.BorealisValueBus) {
-  window.BorealisValueBus = {};
-}
-
-// Ensure a default global update rate (ms) for polling loops
-if (!window.BorealisUpdateRate) {
-  window.BorealisUpdateRate = 100;
-}
-
 /**
  * TemplateNode Component
  * ----------------------