Upgraded Array Index Extractor Node

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

@@ -1,143 +1,142 @@
-////////// PROJECT FILE SEPARATION LINE ////////// CODE AFTER THIS LINE ARE FROM: Node_Array_Index_Extractor.jsx
-
 import React, { useEffect, useRef, useState } from "react";
 import { Handle, Position, useReactFlow, useStore } from "reactflow";
 
+// Ensure Borealis shared memory exists
 if (!window.BorealisValueBus) window.BorealisValueBus = {};
 if (!window.BorealisUpdateRate) window.BorealisUpdateRate = 100;
 
 const ArrayIndexExtractorNode = ({ id, data }) => {
-    const edges = useStore((state) => state.edges);
+  const edges = useStore((state) => state.edges);
-    const { setNodes } = useReactFlow();
+  const { setNodes } = useReactFlow();
+  const [result, setResult] = useState("Line Does Not Exist");
+  const valueRef = useRef(result);
 
-    const [lineNumber, setLineNumber] = useState(data?.lineNumber || 1);
+  // Use config field, always 1-based for UX, fallback to 1
-    const [result, setResult] = useState("Line Does Not Exist");
+  const lineNumber = parseInt(data?.lineNumber, 10) || 1;
 
-    const valueRef = useRef(result);
+  useEffect(() => {
+    let intervalId = null;
+    let currentRate = window.BorealisUpdateRate;
 
-    const handleLineNumberChange = (e) => {
+    const runNodeLogic = () => {
-        const num = parseInt(e.target.value, 10);
+      const inputEdge = edges.find((e) => e.target === id);
-        const clamped = isNaN(num) ? 1 : Math.max(1, num);
+      if (!inputEdge) {
-        setLineNumber(clamped);
+        valueRef.current = "Line Does Not Exist";
+        setResult("Line Does Not Exist");
+        window.BorealisValueBus[id] = "Line Does Not Exist";
+        return;
+      }
 
-        setNodes((nds) =>
+      const upstreamValue = window.BorealisValueBus[inputEdge.source];
-            nds.map((n) =>
+      if (!Array.isArray(upstreamValue)) {
-                n.id === id ? { ...n, data: { ...n.data, lineNumber: clamped } } : n
+        valueRef.current = "Line Does Not Exist";
-            )
+        setResult("Line Does Not Exist");
-        );
+        window.BorealisValueBus[id] = "Line Does Not Exist";
+        return;
+      }
+
+      const index = Math.max(0, lineNumber - 1); // 1-based to 0-based
+      const selected = upstreamValue[index] ?? "Line Does Not Exist";
+
+      if (selected !== valueRef.current) {
+        valueRef.current = selected;
+        setResult(selected);
+        window.BorealisValueBus[id] = selected;
+      }
     };
 
-    useEffect(() => {
+    intervalId = setInterval(runNodeLogic, currentRate);
-        let intervalId = null;
-        let currentRate = window.BorealisUpdateRate;
-
-        const runNodeLogic = () => {
-            const inputEdge = edges.find((e) => e.target === id);
-            if (!inputEdge) {
-                valueRef.current = "Line Does Not Exist";
-                setResult("Line Does Not Exist");
-                window.BorealisValueBus[id] = "Line Does Not Exist";
-                return;
-            }
-
-            const upstreamValue = window.BorealisValueBus[inputEdge.source];
-            if (!Array.isArray(upstreamValue)) {
-                valueRef.current = "Line Does Not Exist";
-                setResult("Line Does Not Exist");
-                window.BorealisValueBus[id] = "Line Does Not Exist";
-                return;
-            }
-
-            const index = Math.max(0, lineNumber - 1); // Convert 1-based input to 0-based
-            const selected = upstreamValue[index] ?? "Line Does Not Exist";
-
-            if (selected !== valueRef.current) {
-                valueRef.current = selected;
-                setResult(selected);
-                window.BorealisValueBus[id] = selected;
-            }
-        };
 
+    // Monitor update rate live
+    const monitor = setInterval(() => {
+      const newRate = window.BorealisUpdateRate;
+      if (newRate !== currentRate) {
+        clearInterval(intervalId);
+        currentRate = newRate;
         intervalId = setInterval(runNodeLogic, currentRate);
+      }
+    }, 300);
 
-        const monitor = setInterval(() => {
+    return () => {
-            const newRate = window.BorealisUpdateRate;
+      clearInterval(intervalId);
-            if (newRate !== currentRate) {
+      clearInterval(monitor);
-                clearInterval(intervalId);
+    };
-                currentRate = newRate;
+  }, [id, edges, lineNumber]);
-                intervalId = setInterval(runNodeLogic, currentRate);
-            }
-        }, 300);
 
-        return () => {
+  return (
-            clearInterval(intervalId);
+    <div className="borealis-node">
-            clearInterval(monitor);
+      <Handle type="target" position={Position.Left} className="borealis-handle" />
-        };
+      <div className="borealis-node-header">
-    }, [id, edges, lineNumber]);
+        {data?.label || "Array Index Extractor"}
-
+      </div>
-    return (
+      <div className="borealis-node-content" style={{ fontSize: "9px" }}>
-        <div className="borealis-node">
+        <div style={{ marginBottom: "6px", color: "#ccc" }}>
-            <Handle type="target" position={Position.Left} className="borealis-handle" />
+          Output a specific line from an upstream array.
-            <div className="borealis-node-header">Array Index Extractor</div>
-            <div className="borealis-node-content" style={{ fontSize: "9px" }}>
-                <div style={{ marginBottom: "6px", color: "#ccc" }}>
-                    Output a Specific Array Index's Value
-                </div>
-
-                <label style={{ display: "block", marginBottom: "2px" }}>
-                    Line Number (1 = First Line):
-                </label>
-                <input
-                    type="number"
-                    min="1"
-                    step="1"
-                    value={lineNumber}
-                    onChange={handleLineNumberChange}
-                    style={{
-                        width: "100%",
-                        fontSize: "9px",
-                        background: "#1e1e1e",
-                        color: "#ccc",
-                        border: "1px solid #444",
-                        borderRadius: "2px",
-                        padding: "3px",
-                        marginBottom: "6px"
-                    }}
-                />
-
-                <label style={{ display: "block", marginBottom: "2px" }}>
-                    Output:
-                </label>
-                <input
-                    type="text"
-                    value={result}
-                    disabled
-                    style={{
-                        width: "100%",
-                        fontSize: "9px",
-                        background: "#2a2a2a",
-                        color: "#ccc",
-                        border: "1px solid #444",
-                        borderRadius: "2px",
-                        padding: "3px"
-                    }}
-                />
-            </div>
-            <Handle type="source" position={Position.Right} className="borealis-handle" />
         </div>
-    );
+        <div style={{ color: "#888", marginBottom: 4 }}>
+          Line Number: <b>{lineNumber}</b>
+        </div>
+        <label style={{ display: "block", marginBottom: "2px" }}>Output:</label>
+        <input
+          type="text"
+          value={result}
+          disabled
+          style={{
+            width: "100%",
+            fontSize: "9px",
+            background: "#2a2a2a",
+            color: "#ccc",
+            border: "1px solid #444",
+            borderRadius: "2px",
+            padding: "3px"
+          }}
+        />
+      </div>
+      <Handle type="source" position={Position.Right} className="borealis-handle" />
+    </div>
+  );
 };
 
+// ---- Node Registration Object with Sidebar Config & Markdown Docs ----
 export default {
-    type: "ArrayIndexExtractor",
+  type: "ArrayIndexExtractor",
-    label: "Array Index Extractor",
+  label: "Array Index Extractor",
-    description: `
+  description: `
-Outputs a specific line from an upstream array (e.g., OCR multi-line output).
+Outputs a specific line from an upstream array, such as the result of OCR multi-line extraction.
 
-- User specifies the line number (1-based index)
+- Specify the **line number** (1 = first line)
-- Outputs the value from that line if it exists
+- Outputs the value at that index if present
-- If the index is out of bounds, outputs "Line Does Not Exist"
+- If index is out of bounds, outputs "Line Does Not Exist"
 `.trim(),
-    content: "Output a Specific Array Index's Value",
+  content: "Output a Specific Array Index's Value",
-    component: ArrayIndexExtractorNode
+  component: ArrayIndexExtractorNode,
+  config: [
+    {
+      key: "lineNumber",
+      label: "Line Number (1 = First Line)",
+      type: "text",
+      defaultValue: "1"
+    }
+  ],
+  usage_documentation: `
+### Array Index Extractor Node
+
+This node allows you to extract a specific line or item from an upstream array value.
+
+**Typical Use:**
+- Used after OCR or any node that outputs an array of lines or items.
+- Set the **Line Number** (1-based, so "1" = first line).
+
+**Behavior:**
+- If the line exists, outputs the value at that position.
+- If not, outputs: \`Line Does Not Exist\`.
+
+**Input:**
+- Connect an upstream node that outputs an array (such as OCR Text Extraction).
+
+**Sidebar Config:**
+- Set the desired line number from the configuration sidebar for live updates.
+
+---
+`.trim()
 };