reference external nodes instead of converting and hasChildren

Author: paula-stacho

src/components/canvas/canvas.tsx

@@ -20,7 +20,7 @@ import { SelfReferencingEdge } from '@/components/edge/self-referencing-edge';
 import { FieldEdge } from '@/components/edge/field-edge';
 import { MarkerList } from '@/components/markers/marker-list';
 import { ConnectionLine } from '@/components/line/connection-line';
-import { convertToExternalNode, convertToExternalNodes, convertToInternalNodes } from '@/utilities/convert-nodes';
+import { getExternalNode, convertToInternalNodes } from '@/utilities/convert-nodes';
 import { convertToExternalEdge, convertToExternalEdges, convertToInternalEdges } from '@/utilities/convert-edges';
 import { EditableDiagramInteractionsProvider } from '@/hooks/use-editable-diagram-interactions';
 
@@ -95,28 +95,28 @@ export const Canvas = ({
 
   const _onNodeContextMenu = useCallback(
     (event: MouseEvent, node: InternalNode) => {
-      onNodeContextMenu?.(event, convertToExternalNode(node));
+      onNodeContextMenu?.(event, getExternalNode(node));
     },
     [onNodeContextMenu],
   );
 
   const _onNodeDrag = useCallback(
     (event: MouseEvent, node: InternalNode, nodes: InternalNode[]) => {
-      onNodeDrag?.(event, convertToExternalNode(node), convertToExternalNodes(nodes));
+      onNodeDrag?.(event, getExternalNode(node), nodes.map(getExternalNode));
     },
     [onNodeDrag],
   );
 
   const _onNodeDragStop = useCallback(
     (event: MouseEvent, node: InternalNode, nodes: InternalNode[]) => {
-      onNodeDragStop?.(event, convertToExternalNode(node), convertToExternalNodes(nodes));
+      onNodeDragStop?.(event, getExternalNode(node), nodes.map(getExternalNode));
     },
     [onNodeDragStop],
   );
 
   const _onSelectionDragStop = useCallback(
     (event: MouseEvent, nodes: InternalNode[]) => {
-      onSelectionDragStop?.(event, convertToExternalNodes(nodes));
+      onSelectionDragStop?.(event, nodes.map(getExternalNode));
     },
     [onSelectionDragStop],
   );
@@ -130,21 +130,21 @@ export const Canvas = ({
 
   const _onNodeClick = useCallback(
     (event: MouseEvent, node: InternalNode) => {
-      onNodeClick?.(event, convertToExternalNode(node));
+      onNodeClick?.(event, getExternalNode(node));
     },
     [onNodeClick],
   );
 
   const _onSelectionContextMenu = useCallback(
     (event: MouseEvent, nodes: InternalNode[]) => {
-      onSelectionContextMenu?.(event, convertToExternalNodes(nodes));
+      onSelectionContextMenu?.(event, nodes.map(getExternalNode));
     },
     [onSelectionContextMenu],
   );
 
   const _onSelectionChange = useCallback(
     ({ nodes, edges }: { nodes: InternalNode[]; edges: InternalEdge[] }) => {
-      onSelectionChange?.({ nodes: convertToExternalNodes(nodes), edges: convertToExternalEdges(edges) });
+      onSelectionChange?.({ nodes: nodes.map(getExternalNode), edges: convertToExternalEdges(edges) });
     },
     [onSelectionChange],
   );

src/components/field/field-list.test.tsx

@@ -35,8 +35,8 @@ describe('field-list', () => {
       <FieldWithEditableInteractions
         onFieldClick={onFieldClick}
         fields={[
-          { name: 'field-with-just-name', selectable: true, expandable: false },
-          { id: ['field', 'with', 'id'], name: 'and-custom-name', selectable: true, expandable: false },
+          { name: 'field-with-just-name', selectable: true, hasChildren: false },
+          { id: ['field', 'with', 'id'], name: 'and-custom-name', selectable: true, hasChildren: false },
         ]}
       />,
     );
@@ -58,16 +58,16 @@ describe('field-list', () => {
     });
   });
 
-  it('should ensure that items that are expandable have the toggle', () => {
+  it('should ensure that items that are hasChildren have the toggle', () => {
     const onFieldExpandToggle = vi.fn();
     render(
       <FieldWithEditableInteractions
         onFieldExpandToggle={onFieldExpandToggle}
         fields={[
-          { id: ['other'], name: 'other', expandable: false },
-          { id: ['parent'], name: 'parent', expanded: true, expandable: true },
-          { id: ['parent', 'child1'], name: 'child1', depth: 1, expandable: false },
-          { id: ['parent', 'child2'], name: 'child2', depth: 1, expandable: false },
+          { id: ['other'], name: 'other', hasChildren: false },
+          { id: ['parent'], name: 'parent', expanded: true, hasChildren: true },
+          { id: ['parent', 'child1'], name: 'child1', depth: 1, hasChildren: false },
+          { id: ['parent', 'child2'], name: 'child2', depth: 1, hasChildren: false },
         ]}
       />,
     );

src/components/field/field-list.tsx

@@ -2,11 +2,12 @@ import { useMemo } from 'react';
 import styled from '@emotion/styled';
 
 import { Field } from '@/components/field/field';
-import { NodeField, NodeType } from '@/types';
+import { NodeType } from '@/types/node';
 import { DEFAULT_PREVIEW_GROUP_AREA, getPreviewGroupArea, getPreviewId } from '@/utilities/get-preview-group-area';
 import { DEFAULT_FIELD_PADDING } from '@/utilities/constants';
 import { getSelectedFieldGroupHeight, getSelectedId } from '@/utilities/get-selected-field-group-height';
 import { useEditableDiagramInteractions } from '@/hooks/use-editable-diagram-interactions';
+import { InternalNodeField } from '@/types/internal';
 
 const NodeFieldWrapper = styled.div`
   padding: ${DEFAULT_FIELD_PADDING}px;
@@ -17,7 +18,7 @@ interface Props {
   nodeType: NodeType;
   isHovering?: boolean;
   nodeId: string;
-  fields: (NodeField & { expandable: boolean })[];
+  fields: InternalNodeField[];
 }
 
 export const FieldList = ({ fields, nodeId, nodeType, isHovering }: Props) => {

src/components/field/field.test.tsx

@@ -345,47 +345,47 @@ describe('field', () => {
   });
 
   describe('Expand/Collapse', () => {
-    describe('When the field is expandable', () => {
-      const expandableProps = {
+    describe('When the field has children', () => {
+      const hasChildrenProps = {
         ...DEFAULT_PROPS,
         onFieldExpandToggle: vi.fn(),
-        expandable: true,
+        hasChildren: true,
       };
       beforeEach(() => {
-        expandableProps.onFieldExpandToggle.mockClear();
+        hasChildrenProps.onFieldExpandToggle.mockClear();
       });
       it('Shows collapse icon by default', async () => {
-        render(<FieldWithEditableInteractions {...expandableProps} expandable={true} />);
+        render(<FieldWithEditableInteractions {...hasChildrenProps} hasChildren={true} />);
         const toggle = screen.getByRole('button', { name: 'Collapse Field' });
         expect(toggle).toBeInTheDocument();
         await userEvent.click(toggle);
-        expect(expandableProps.onFieldExpandToggle).toHaveBeenCalled();
+        expect(hasChildrenProps.onFieldExpandToggle).toHaveBeenCalled();
       });
 
       it('Shows expand icon for a collapsed field', async () => {
-        render(<FieldWithEditableInteractions {...expandableProps} expanded={false} />);
+        render(<FieldWithEditableInteractions {...hasChildrenProps} expanded={false} />);
         const toggle = screen.getByRole('button', { name: 'Expand Field' });
         expect(toggle).toBeInTheDocument();
         await userEvent.click(toggle);
-        expect(expandableProps.onFieldExpandToggle).toHaveBeenCalled();
+        expect(hasChildrenProps.onFieldExpandToggle).toHaveBeenCalled();
       });
 
       it('Shows collapse icon for an expanded field', async () => {
-        render(<FieldWithEditableInteractions {...expandableProps} expanded={true} />);
+        render(<FieldWithEditableInteractions {...hasChildrenProps} expanded={true} />);
         const toggle = screen.getByRole('button', { name: 'Collapse Field' });
         expect(toggle).toBeInTheDocument();
         await userEvent.click(toggle);
-        expect(expandableProps.onFieldExpandToggle).toHaveBeenCalled();
+        expect(hasChildrenProps.onFieldExpandToggle).toHaveBeenCalled();
       });
     });
 
-    describe('When the field is not expandable', () => {
+    describe('When the field is not hasChildren', () => {
       it('Does not show the collapse/expand toggle', () => {
         render(
           <FieldWithEditableInteractions
             {...DEFAULT_PROPS}
             onFieldExpandToggle={vi.fn()}
-            expandable={false}
+            hasChildren={false}
             expanded={true}
           />,
         );
@@ -400,7 +400,7 @@ describe('field', () => {
           <FieldWithEditableInteractions
             {...DEFAULT_PROPS}
             onFieldExpandToggle={undefined}
-            expandable={true}
+            hasChildren={true}
             expanded={true}
           />,
         );

src/components/field/field.tsx

@@ -111,7 +111,7 @@ interface Props extends NodeField {
   isHovering?: boolean;
   previewGroupArea: PreviewGroupArea;
   selectedGroupHeight?: number;
-  expandable?: boolean;
+  hasChildren?: boolean;
 }
 
 export const Field = ({
@@ -130,7 +130,7 @@ export const Field = ({
   spacing = 0,
   selectable = false,
   selected = false,
-  expandable = false,
+  hasChildren = false,
   expanded = true,
   editable = false,
   variant,
@@ -192,7 +192,7 @@ export const Field = ({
       isDisabled={isDisabled}
       depth={depth}
       isEditable={selected && editable && !isDisabled}
-      isExpandable={expandable}
+      isExpandable={hasChildren}
       name={name}
       type={type}
       id={id}