Upgraded Array Index Extractor Node

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

@@ -1,31 +1,18 @@
-////////// 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 { setNodes } = useReactFlow();
-
-    const [lineNumber, setLineNumber] = useState(data?.lineNumber || 1);
   const [result, setResult] = useState("Line Does Not Exist");
-
   const valueRef = useRef(result);
 
-    const handleLineNumberChange = (e) => {
-        const num = parseInt(e.target.value, 10);
-        const clamped = isNaN(num) ? 1 : Math.max(1, num);
-        setLineNumber(clamped);
-
-        setNodes((nds) =>
-            nds.map((n) =>
-                n.id === id ? { ...n, data: { ...n.data, lineNumber: clamped } } : n
-            )
-        );
-    };
+  // Use config field, always 1-based for UX, fallback to 1
+  const lineNumber = parseInt(data?.lineNumber, 10) || 1;
 
   useEffect(() => {
     let intervalId = null;
@@ -48,7 +35,7 @@ const ArrayIndexExtractorNode = ({ id, data }) => {
         return;
       }
 
-            const index = Math.max(0, lineNumber - 1); // Convert 1-based input to 0-based
+      const index = Math.max(0, lineNumber - 1); // 1-based to 0-based
       const selected = upstreamValue[index] ?? "Line Does Not Exist";
 
       if (selected !== valueRef.current) {
@@ -60,6 +47,7 @@ const ArrayIndexExtractorNode = ({ id, data }) => {
 
     intervalId = setInterval(runNodeLogic, currentRate);
 
+    // Monitor update rate live
     const monitor = setInterval(() => {
       const newRate = window.BorealisUpdateRate;
       if (newRate !== currentRate) {
@@ -78,36 +66,17 @@ const ArrayIndexExtractorNode = ({ id, data }) => {
   return (
     <div className="borealis-node">
       <Handle type="target" position={Position.Left} className="borealis-handle" />
-            <div className="borealis-node-header">Array Index Extractor</div>
+      <div className="borealis-node-header">
+        {data?.label || "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
+          Output a specific line from an upstream array.
         </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>
+        <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}
@@ -128,16 +97,46 @@ const ArrayIndexExtractorNode = ({ id, data }) => {
   );
 };
 
+// ---- Node Registration Object with Sidebar Config & Markdown Docs ----
 export default {
   type: "ArrayIndexExtractor",
   label: "Array Index Extractor",
   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)
-- Outputs the value from that line if it exists
-- If the index is out of bounds, outputs "Line Does Not Exist"
+- Specify the **line number** (1 = first line)
+- Outputs the value at that index if present
+- If index is out of bounds, outputs "Line Does Not Exist"
 `.trim(),
   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()
 };