Refactor add new feature

packages/core/src/index.ts

@@ -10,6 +10,7 @@ export type { ServiceProvider } from './types/ServiceProvider'
 export { DiagramBuilder } from './DiagramBuilder'
 export { ComputerFactory } from './ComputerFactory'
 export { Diagram } from './Diagram'
+export type { Node } from './types/Node'
 export type { Link } from './types/Link'
 export { PositionGuesser } from './PositionGuesser'
 export { LinkGuesser } from './LinkGuesser'

packages/ui/src/components/DataStory/hooks/toJson.ts

@@ -7,7 +7,7 @@ export const toJson = (rfInstance: ReactFlowInstance) => {
     navigator.clipboard.writeText(JSON.stringify(flow, null, 2))
       .then(() => {
         console.log('Text copied to clipboard');
-        alert("Copied diagram as JSON!")
+        alert('Copied diagram as JSON!')
       }).catch(e => {
         console.log('Error', e);
         alert(e)

packages/ui/src/components/DataStory/modals/addNodeModal.tsx

@@ -1,7 +1,6 @@
 import { useEffect, useRef, useState } from 'react';
 import { shallow } from 'zustand/shallow';
 import { NodeDescription } from '@data-story/core';
-import { makeNodeAndConnection } from '../hooks/makeNodeAndConnection';
 import { Modal } from '../modal';
 import { StoreSchema, useStore } from '../store/store';
 import clsx from 'clsx';
@@ -15,24 +14,14 @@ export const AddNodeModal = ({ setShowModal }: { setShowModal: (show: boolean) =
   }, []);
 
   const selector = (state: StoreSchema) => ({
-    toDiagram: state.toDiagram,
-    nodes: state.nodes,
-    edges: state.edges,
-    addNode: state.addNode,
-    connect: state.connect,
+    addNodeFromDescription: state.addNodeFromDescription,
     availableNodes: state.availableNodes,
   });
 
-  const { toDiagram, nodes, edges, addNode, connect, availableNodes } = useStore(selector, shallow);
+  const { addNodeFromDescription, availableNodes } = useStore(selector, shallow);
 
   const doAddNode = (nodeDescription: NodeDescription) => {
-    const [node, connection] = makeNodeAndConnection(toDiagram(), nodeDescription);
-
-    // Call React Flow hooks to add node and link to store
-    addNode(node);
-    if (connection) connect(connection);
-
-    // Close modal
+    addNodeFromDescription(nodeDescription);
     setShowModal(false);
   };
 

packages/ui/src/components/DataStory/store/store.tsx

@@ -16,14 +16,15 @@ import {
 } from 'reactflow';
 
 import { SocketClient } from '../clients/SocketClient';
-import { Diagram, NodeDescription } from '@data-story/core';
+import { AbstractPort, Diagram, Node, LinkGuesser, NodeDescription, PositionGuesser } from '@data-story/core';
 import { DataStoryNode } from '../../Node/DataStoryNode';
 import { ServerClient } from '../clients/ServerClient';
 import { JsClient } from '../clients/JsClient';
 import { ServerConfig } from '../clients/ServerConfig';
-import { reactFlowToDiagram } from '../../../reactFlowToDiagram';
+import { reactFlowNodeToDiagramNode, reactFlowToDiagram } from '../../../reactFlowToDiagram';
 import { reactFlowFromDiagram } from '../../../reactFlowFromDiagram';
 import React, { useState } from 'react';
+import { SerializedReactFlowNode } from '../../../SerializedReactFlow';
 
 export type StoreSchema = {
   /** The main reactflow instance */
@@ -39,6 +40,7 @@ export type StoreSchema = {
   updateNode: (node: DataStoryNode) => void;
   refreshNodes: () => void;
   addNode: (node: DataStoryNode) => void;
+  addNodeFromDescription: (nodeDescription: NodeDescription) => void;
   onNodesChange: OnNodesChange;
   setNodes: (nodes: DataStoryNode[]) => void;
   traverseNodes: (direction: 'up' | 'down' | 'left' | 'right') => void;
@@ -148,6 +150,69 @@ export const createStore = () => createWithEqualityFn<StoreSchema>((set, get) =>
       get().rfInstance?.fitView();
     }, 1);
   },
+  addNodeFromDescription: (nodeDescription: NodeDescription) => {
+    const diagram = get().toDiagram()
+
+    const scopedId = (name: string) => {
+      const max = diagram.nodes
+        .filter((node) => node.type === name)
+        .map((node) => node.id)
+        .map((id) => id.split('.')[1])
+        .map((id) => parseInt(id))
+        .reduce((max, id) => Math.max(max, id), 0)
+
+      return max + 1      
+    }
+
+    const counter = scopedId(nodeDescription.name)
+    const id = `${nodeDescription.name}.${counter}`;
+
+    const flowNode: DataStoryNode = {
+      id,
+      position: new PositionGuesser(diagram).guess(nodeDescription),
+      data: {
+        computer: nodeDescription.name,
+        docs: nodeDescription.docs,
+        // Ensure two nodes of same type don't share the same params object
+        params: structuredClone(nodeDescription.params),
+        color: nodeDescription.color,
+        label: nodeDescription.label ?? nodeDescription.name,
+        inputs: nodeDescription.inputs.map((input: AbstractPort) => {
+          return {
+            id: `${id}.${input.name}`,
+            ...input
+          }
+        }),
+        outputs: nodeDescription.outputs.map((output: AbstractPort) => {
+          return {
+            id: `${id}.${output.name}`,
+            ...output
+          }
+        }),
+      },
+      selected: true,
+      type: {
+        Comment: 'dataStoryCommentNodeComponent',
+        //Input: 'dataStoryInputNodeComponent',
+        //Output: 'dataStoryOutputNodeComponent',
+      }[nodeDescription.name] ?? 'dataStoryNodeComponent',
+    }
+
+    const node: Node = reactFlowNodeToDiagramNode(flowNode)
+
+    const link = new LinkGuesser(diagram).guess(node)
+
+    const connection = link ? {
+      source: diagram.nodeWithOutputPortId(link.sourcePortId)!.id,
+      target: id,
+      sourceHandle: link.sourcePortId,
+      targetHandle: link.targetPortId,
+    } : null;
+
+    get().addNode(flowNode);
+
+    if (connection) get().connect(connection);
+  },
   updateNode: (node: DataStoryNode) => {
     set({
       nodes: get().nodes.map(existingNode => {

packages/ui/src/reactFlowToDiagram.ts

@@ -1,7 +1,7 @@
-import { Diagram, Link } from '@data-story/core'
+import { Diagram, Node, Link } from '@data-story/core'
 import { SerializedReactFlow, SerializedReactFlowNode } from './SerializedReactFlow'
 
-export const reactFlowNodeToDiagramNode = (flowNode: SerializedReactFlowNode) => {
+export const reactFlowNodeToDiagramNode = (flowNode: SerializedReactFlowNode): Node => {
   return {
     id: flowNode.id,        
     type: flowNode.data.computer,