improvements

src/components/graph/FunctionNode.tsx

@@ -1,4 +1,4 @@
-import React, { memo, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react'
+import React, { memo, useCallback, useContext, useMemo } from 'react'
 import CodeMirror from '@uiw/react-codemirror'
 import { javascript } from '@codemirror/lang-javascript'
 import FlowContext from '../../lib/flowContext'
@@ -12,6 +12,7 @@ import {
     BaseNodeHeaderRow,
 } from './BaseNode'
 import { InputHandle, OutputHandle } from './NodeHandles'
+import { NodeHeaderTitle } from './NodeHeaderTitle'
 import { NodeMenubar } from './NodeMenubar'
 import { Code2 } from 'lucide-react'
 
@@ -22,28 +23,14 @@ type Props = {
     height?: number
 }
 
-const DEFAULT_BODY = `// args[0], args[1], ... are the variable values (in order)
-return args[0];
-`
-
 export const FunctionNode = memo(function FunctionNode({ id, data, width, height }: Props) {
-    const [value, setValue] = useState<string>(data?.body ?? DEFAULT_BODY)
+    const bodyValue = data?.body ?? ''
     const { theme } = useTheme()
     const ctx = useContext(FlowContext)
     const setNodes = ctx?.setNodes
 
-    useEffect(() => {
-        if (setNodes) {
-            setNodes((nds: any[]) =>
-                nds.map((n) => (n.id === id ? { ...n, data: { ...n.data, body: value } } : n))
-            )
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [])
-
     const onChange = useCallback(
         (val: string) => {
-            setValue(val)
             if (setNodes) {
                 setNodes((nds: any[]) =>
                     nds.map((n) => (n.id === id ? { ...n, data: { ...n.data, body: val } } : n))
@@ -53,8 +40,6 @@ export const FunctionNode = memo(function FunctionNode({ id, data, width, height
         [id, setNodes]
     )
 
-    const storedBody = ctx?.nodes?.find((n: any) => n.id === id)?.data?.body ?? ''
-
     const extensions = useMemo(() => [javascript()], [])
     const [editorHeight, editorContainerRef] = useResizeHeight(120)
     const dimensions =
@@ -64,7 +49,7 @@ export const FunctionNode = memo(function FunctionNode({ id, data, width, height
 
     return (
         <BaseNode className="min-w-72 min-h-[260px]" dimensions={dimensions} resizable nodeId={id} handles={<><InputHandle id="in" /><OutputHandle id="out" /></>}>
-            <BaseNodeHeaderRow icon={<Code2 className="size-4" />} title={id} />
+            <BaseNodeHeaderRow icon={<Code2 className="size-4" />} title={<NodeHeaderTitle nodeId={id} displayTitle={id} />} />
 
             <BaseNodeContent>
                 <div className="shrink-0 w-full mb-1">
@@ -75,7 +60,7 @@ export const FunctionNode = memo(function FunctionNode({ id, data, width, height
                 </p>
                 <div ref={editorContainerRef} className="min-h-0 flex-1 w-full nodrag nopan overflow-hidden rounded border border-input">
                     <CodeMirror
-                        value={value}
+                        value={bodyValue}
                         height={`${editorHeight}px`}
                         theme={theme}
                         extensions={extensions}
@@ -87,7 +72,7 @@ export const FunctionNode = memo(function FunctionNode({ id, data, width, height
             </BaseNodeContent>
 
             <BaseNodeFooter>
-                <BaseNodeFooterText>Body: {storedBody ? `${storedBody.length} chars` : 'none'}</BaseNodeFooterText>
+                <BaseNodeFooterText>Body: {bodyValue ? `${bodyValue.length} chars` : 'none'}</BaseNodeFooterText>
             </BaseNodeFooter>
         </BaseNode>
     )