sync function name with definition block

src/renderer/src/components/blocks/flow/FunctionDefinitionBlock.tsx

@@ -1,20 +1,30 @@
 import { Handle, Position } from 'reactflow';
 import { BlockProps } from '@/types/block';
 import { Input } from '@/components/ui/Input';
-import { useBlockUpdate } from '@/stores/flowchart';
+import { useBlockUpdate, useFlowchartStore } from '@/stores/flowchart';
 
 const FunctionDefinitionBlock = ({ id, data }: BlockProps) => {
   const ins = Object.entries(data.inputs);
   const outs = Object.entries(data.outputs);
 
   const updateBlock = useBlockUpdate(id);
 
+  const { saveDefinition, functionDefinitions } = useFlowchartStore((state) => ({
+    saveDefinition: state.saveDefinition,
+    functionDefinitions: state.functionDefinitionBlocks
+  }));
+
   return (
     <>
       <div className="relative h-64 w-[512px] border">
         <Input
           className="mx-auto w-fit"
           value={data.label}
+          onBlur={() => {
+            if (data.label !== functionDefinitions[id].data.label) {
+              saveDefinition(id);
+            }
+          }}
           onChange={(e) =>
             updateBlock((block) => {
               block.data.label = e.target.value;

src/renderer/src/components/flow/BlockFunctionCard.tsx

@@ -1,16 +1,17 @@
-import { BlockAddPayload } from '@/types/block';
+import { BlockAddPayload, BlockData } from '@/types/block';
 import { Button } from '../ui/Button';
 import { DragEventHandler } from 'react';
+import { Node } from 'reactflow';
 
 type Props = {
-  name: string;
+  definitionBlock: Node<BlockData>;
 };
 
-const BlockFunctionCard = ({ name }: Props): JSX.Element => {
+const BlockFunctionCard = ({ definitionBlock }: Props): JSX.Element => {
   const onDragStart: DragEventHandler<HTMLButtonElement> = (event) => {
     const payload: BlockAddPayload = {
       variant: 'function_instance',
-      name
+      definition_block_id: definitionBlock.id
     };
 
     event.dataTransfer.setData('application/reactflow', JSON.stringify(payload));
@@ -19,10 +20,11 @@ const BlockFunctionCard = ({ name }: Props): JSX.Element => {
     // actual block is going to look like!
     event.dataTransfer.setDragImage(event.target as HTMLButtonElement, 0, 0);
   };
+  console.log(definitionBlock);
 
   return (
     <Button variant="secondary" draggable onDragStart={onDragStart}>
-      <div>{name}</div>
+      <div>{definitionBlock.data.label}</div>
     </Button>
   );
 };

src/renderer/src/components/flow/BlocksLibrary.tsx

@@ -10,6 +10,8 @@ const BlocksLibrary = () => {
     removeDefinition: state.removeDefinition
   }));
 
+  console.log(functionDefinitions);
+
   return (
     <div className="grow flex-col rounded-lg bg-background p-4">
       <div className="flex items-center">
@@ -69,13 +71,13 @@ const BlocksLibrary = () => {
             Custom functions are listed here. Try defining one using the &quot;Function
             definition&quot; block.
           </div>
-          {Object.keys(functionDefinitions).map((functionName) => (
-            <div key={functionName} className="flex items-center gap-2">
-              <BlockFunctionCard name={functionName} />
+          {Object.entries(functionDefinitions).map(([blockId, block]) => (
+            <div key={blockId} className="flex items-center gap-2">
+              <BlockFunctionCard definitionBlock={block} />
               <X
                 className="cursor-pointer duration-200 hover:text-muted-foreground"
                 size={20}
-                onClick={() => removeDefinition(functionName)}
+                onClick={() => removeDefinition(blockId)}
               />
             </div>
           ))}

src/renderer/src/stores/flowchart.ts

@@ -13,7 +13,7 @@ import {
   applyEdgeChanges,
   XYPosition
 } from 'reactflow';
-import { BlockData, Name } from '@/types/block';
+import { BlockData, BlockId } from '@/types/block';
 
 import { v4 as uuidv4 } from 'uuid';
 import { createJSONStorage, persist } from 'zustand/middleware';
@@ -31,7 +31,7 @@ interface FlowchartState {
   edges: Edge[];
   controls: Node[];
 
-  functionDefinitionBlocks: Record<Name, Node<BlockData>>;
+  functionDefinitionBlocks: Record<BlockId, Node<BlockData>>;
 
   setNodes: (nodes: Node<BlockData>[]) => void;
   setEdges: (edges: Edge[]) => void;
@@ -77,20 +77,20 @@ export const useFlowchartStore = create<FlowchartState>()(
           });
         },
 
-        saveDefinition: (definitionBlockId: string) => {
+        saveDefinition: (definitionBlockId: BlockId) => {
           set((state) => {
             const node = state.nodes.find((n) => n.id === definitionBlockId);
             if (node?.data.block_type !== 'flojoy.intrinsics.function') {
               return;
             }
 
-            state.functionDefinitionBlocks[node.data.label] = node;
+            state.functionDefinitionBlocks[node.id] = node;
           });
         },
 
-        removeDefinition: (name: string) => {
+        removeDefinition: (definitionBlockId: BlockId) => {
           set((state) => {
-            delete state.functionDefinitionBlocks[name];
+            delete state.functionDefinitionBlocks[definitionBlockId];
           });
         },
 
@@ -160,15 +160,15 @@ export const useFlowchartStore = create<FlowchartState>()(
               break;
             case 'function_instance': {
               const definitions = get().functionDefinitionBlocks;
-              if (!(payload.name in definitions)) {
-                throw new Error(`Undefined function block ${payload.name}`);
+              if (!(payload.definition_block_id in definitions)) {
+                throw new Error(`Undefined function block ${payload.definition_block_id}`);
               }
 
-              const definition = definitions[payload.name];
+              const definition = definitions[payload.definition_block_id];
 
               data = {
                 block_type: 'function_instance',
-                label: payload.name,
+                label: definition.data.label,
                 intrinsic_parameters: {},
                 inputs: definition.data.inputs,
                 outputs: definition.data.outputs

src/renderer/src/types/block.ts

@@ -22,6 +22,7 @@ export type BlockType =
 export type IntrinsicParameterValue = number | string;
 
 export type Name = string;
+export type BlockId = string;
 type FlojoyType = 'str' | 'int' | 'bool';
 
 export type BlockData = {
@@ -41,7 +42,7 @@ type RegularBlockAddPayload = {
 
 type FunctionBlockAddPayload = {
   variant: 'function_instance';
-  name: string;
+  definition_block_id: string;
 };
 
 export type BlockAddPayload = RegularBlockAddPayload | FunctionBlockAddPayload;