diff --git a/Data/Server/WebUI/src/Flow_Editor.jsx b/Data/Server/WebUI/src/Flow_Editor.jsx
index 21a0225..b37f479 100644
--- a/Data/Server/WebUI/src/Flow_Editor.jsx
+++ b/Data/Server/WebUI/src/Flow_Editor.jsx
@@ -352,23 +352,31 @@ export default function FlowEditor({
if (nodeCountEl) nodeCountEl.innerText = nodes.length;
}, [nodes]);
- const selectedNode = nodes.find((n) => n.data?.label === selectedNodeLabel);
- const nodeTypeMeta = selectedNode
- ? Object.values(categorizedNodes).flat().find((def) => def.type === selectedNode.type)
- : null;
+ const selectedNode = nodes.find((n) => n.data?.label === selectedNodeLabel);
+ const nodeDef = selectedNode
+ ? Object.values(categorizedNodes).flat().find((def) => def.type === selectedNode.type)
+ : null;
- return (
-
+ return (
+
diff --git a/Data/Server/WebUI/src/Node_Configuration_Sidebar.jsx b/Data/Server/WebUI/src/Node_Configuration_Sidebar.jsx
index f23a7cd..34e55e7 100644
--- a/Data/Server/WebUI/src/Node_Configuration_Sidebar.jsx
+++ b/Data/Server/WebUI/src/Node_Configuration_Sidebar.jsx
@@ -1,13 +1,17 @@
////////// PROJECT FILE SEPARATION LINE ////////// CODE AFTER THIS LINE ARE FROM:
/Data/WebUI/src/Node_Configuration_Sidebar.jsx
import { Box, Typography, Tabs, Tab, TextField } from "@mui/material";
import React, { useState } from "react";
+import { useReactFlow } from "reactflow";
export default function NodeConfigurationSidebar({ drawerOpen, setDrawerOpen, title, nodeData }) {
const [activeTab, setActiveTab] = useState(0);
+ const { setNodes } = useReactFlow();
const handleTabChange = (_, newValue) => setActiveTab(newValue);
const renderConfigFields = () => {
const config = nodeData?.config || [];
+ const nodeId = nodeData?.nodeId;
+
return config.map((field, index) => (
@@ -18,6 +22,18 @@ export default function NodeConfigurationSidebar({ drawerOpen, setDrawerOpen, ti
size="small"
fullWidth
value={nodeData?.[field.key] || ""}
+ onChange={(e) => {
+ const newValue = e.target.value;
+ if (!nodeId) return;
+ setNodes((nds) =>
+ nds.map((n) =>
+ n.id === nodeId
+ ? { ...n, data: { ...n.data, [field.key]: newValue } }
+ : n
+ )
+ );
+ window.BorealisValueBus[nodeId] = newValue;
+ }}
InputProps={{
sx: {
backgroundColor: "#1e1e1e",
@@ -90,7 +106,7 @@ export default function NodeConfigurationSidebar({ drawerOpen, setDrawerOpen, ti
{activeTab === 0 && renderConfigFields()}
{activeTab === 1 && (
- {nodeData?.usage_documentation || "No documentation provided for this node."}
+ {nodeData?.usage_documentation || "No usage documentation provided for this node."}
)}
diff --git a/Data/Server/WebUI/src/nodes/General Purpose/Node_Data.jsx b/Data/Server/WebUI/src/nodes/General Purpose/Node_Data.jsx
index 77156b3..2c94ed0 100644
--- a/Data/Server/WebUI/src/nodes/General Purpose/Node_Data.jsx
+++ b/Data/Server/WebUI/src/nodes/General Purpose/Node_Data.jsx
@@ -1,6 +1,5 @@
////////// PROJECT FILE SEPARATION LINE ////////// CODE AFTER THIS LINE ARE FROM: /Data/WebUI/src/nodes/General Purpose/Node_Data.jsx
-
-import React, { useEffect, useRef, useState } from "react";
+import React, { useEffect, useRef } from "react";
import { Handle, Position, useReactFlow, useStore } from "reactflow";
import { IconButton } from "@mui/material";
import { Settings as SettingsIcon } from "@mui/icons-material";
@@ -11,20 +10,12 @@ if (!window.BorealisUpdateRate) window.BorealisUpdateRate = 100;
const DataNode = ({ id, data }) => {
const { setNodes } = useReactFlow();
const edges = useStore((state) => state.edges);
- const [renderValue, setRenderValue] = useState(data?.value || "");
- const valueRef = useRef(renderValue);
+ const valueRef = useRef(data?.value || "");
- const handleManualInput = (e) => {
- const newValue = e.target.value;
- valueRef.current = newValue;
- setRenderValue(newValue);
- window.BorealisValueBus[id] = newValue;
- setNodes((nds) =>
- nds.map((n) =>
- n.id === id ? { ...n, data: { ...n.data, value: newValue } } : n
- )
- );
- };
+ useEffect(() => {
+ valueRef.current = data?.value || "";
+ window.BorealisValueBus[id] = valueRef.current;
+ }, [data?.value, id]);
useEffect(() => {
let currentRate = window.BorealisUpdateRate || 100;
@@ -38,7 +29,6 @@ const DataNode = ({ id, data }) => {
const upstreamValue = window.BorealisValueBus[inputEdge.source] ?? "";
if (upstreamValue !== valueRef.current) {
valueRef.current = upstreamValue;
- setRenderValue(upstreamValue);
window.BorealisValueBus[id] = upstreamValue;
setNodes((nds) =>
nds.map((n) =>
@@ -67,9 +57,6 @@ const DataNode = ({ id, data }) => {
};
}, [id, setNodes, edges]);
- const inputEdge = edges.find((e) => e?.target === id);
- const hasInput = Boolean(inputEdge);
-
return (
@@ -79,32 +66,13 @@ const DataNode = ({ id, data }) => {
size="small"
onClick={() =>
window.BorealisOpenDrawer &&
- window.BorealisOpenDrawer(data?.label || "Unknown Node", data)
+ window.BorealisOpenDrawer(data?.label || "Unknown Node", { ...data, nodeId: id })
}
sx={{ padding: 0, marginRight: "-3px", color: "#58a6ff", width: "20px", height: "20px" }}
>
-
-
{data?.content}
-
-
-
);
@@ -117,7 +85,7 @@ export default {
content: "Store a String or Number",
component: DataNode,
config: [
- { key: "value", label: "Initial Value", type: "text" }
+ { key: "value", label: "Value", type: "text" }
],
usage_documentation: `
### DataNode Usage