From 06aacb7196d9edcc3e6febcd2b260ee6791932b7 Mon Sep 17 00:00:00 2001
From: Lavender <lavender.chan@mongodb.com>
Date: Wed, 28 May 2025 14:08:40 +1000
Subject: [PATCH 1/3] bugfix/MIG-6835 Fix hover states

---
 src/components/canvas/canvas.tsx  |  1 -
 src/components/node/node.test.tsx | 17 ++++++++++++++++
 src/components/node/node.tsx      | 34 +++++++++++++++++--------------
 3 files changed, 36 insertions(+), 16 deletions(-)

diff --git a/src/components/canvas/canvas.tsx b/src/components/canvas/canvas.tsx
index 0d6a127..527a23f 100644
--- a/src/components/canvas/canvas.tsx
+++ b/src/components/canvas/canvas.tsx
@@ -67,7 +67,6 @@ export const Canvas = ({ title, nodes: externalNodes, edges: externalEdges, onCo
       <ReactFlow
         id={id}
         deleteKeyCode={null}
-        title={title}
         proOptions={PRO_OPTIONS}
         maxZoom={MAX_ZOOM}
         minZoom={MIN_ZOOM}
diff --git a/src/components/node/node.test.tsx b/src/components/node/node.test.tsx
index 76cc53f..df78c97 100644
--- a/src/components/node/node.test.tsx
+++ b/src/components/node/node.test.tsx
@@ -46,6 +46,8 @@ describe('node', () => {
     expect(screen.getByText('orders')).toBeInTheDocument();
     expect(screen.getByText('orderId')).toBeInTheDocument();
     expect(screen.getByText('varchar')).toBeInTheDocument();
+    expect(screen.queryByTestId('node-handle-source-orders')).not.toBeInTheDocument();
+    expect(screen.queryByTestId('node-handle-target-orders')).not.toBeInTheDocument();
   });
 
   it('Should show collection node', () => {
@@ -60,6 +62,8 @@ describe('node', () => {
     expect(screen.getByText('employees')).toBeInTheDocument();
     expect(screen.getByText('employeeId')).toBeInTheDocument();
     expect(screen.getByText('string')).toBeInTheDocument();
+    expect(screen.queryByTestId('node-handle-source-employees')).not.toBeInTheDocument();
+    expect(screen.queryByTestId('node-handle-target-employees')).not.toBeInTheDocument();
   });
 
   it('Should show contextual zoom', () => {
@@ -77,4 +81,17 @@ describe('node', () => {
     expect(screen.queryByText('employeeId')).not.toBeInTheDocument();
     expect(screen.queryByText('string')).not.toBeInTheDocument();
   });
+
+  it('Should have handles if connected', () => {
+    render(
+      <Node
+        {...DEFAULT_PROPS}
+        type="collection"
+        isConnectable={true}
+        data={{ title: 'employees', fields: [{ name: 'employeeId', type: 'string' }] }}
+      />,
+    );
+    expect(screen.getByTestId('node-handle-source-employees')).toBeInTheDocument();
+    expect(screen.getByTestId('node-handle-target-employees')).toBeInTheDocument();
+  });
 });
diff --git a/src/components/node/node.tsx b/src/components/node/node.tsx
index 6e3c59c..d57e97e 100644
--- a/src/components/node/node.tsx
+++ b/src/components/node/node.tsx
@@ -139,22 +139,26 @@ export const Node = ({
   };
 
   return (
-    <div onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
+    <div title={title} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
       <NodeBorder variant={selected ? 'selected' : borderVariant}>
-        <NodeHandle
-          id="source"
-          isConnectable={isConnectable}
-          position={Position.Right}
-          type="source"
-          zIndex={fromHandle ? 0 : 1}
-        />
-        <NodeHandle
-          id="target"
-          isConnectable={isConnectable}
-          position={Position.Left}
-          type="target"
-          zIndex={fromHandle ? 1 : 0}
-        />
+        {isConnectable && (
+          <>
+            <NodeHandle
+              id={'source'}
+              data-testid={`node-handle-source-${title}`}
+              position={Position.Right}
+              type="source"
+              zIndex={fromHandle ? 0 : 1}
+            />
+            <NodeHandle
+              id={'target'}
+              data-testid={`node-handle-target-${title}`}
+              position={Position.Left}
+              type="target"
+              zIndex={fromHandle ? 1 : 0}
+            />
+          </>
+        )}
         <NodeWrapper accent={getAccent()} color={getNodeColor()}>
           <NodeHeader background={getHeaderBackground()}>
             {!isContextualZoom && (

From 20a4d3c841a9c90abe5b5432a930808a7c9d8b0c Mon Sep 17 00:00:00 2001
From: Lavender <lavender.chan@mongodb.com>
Date: Wed, 28 May 2025 14:35:18 +1000
Subject: [PATCH 2/3] bugfix/MIG-6835 Fix edge rendering, add more tests

---
 src/components/diagram.test.tsx   | 13 ++++++++---
 src/components/node/node.test.tsx | 17 --------------
 src/components/node/node.tsx      | 38 +++++++++++++++----------------
 3 files changed, 28 insertions(+), 40 deletions(-)

diff --git a/src/components/diagram.test.tsx b/src/components/diagram.test.tsx
index bf547f6..c919fbe 100644
--- a/src/components/diagram.test.tsx
+++ b/src/components/diagram.test.tsx
@@ -1,15 +1,22 @@
-import { render, screen } from '@testing-library/react';
+import { render, screen, within } from '@testing-library/react';
 import { ReactFlowProvider } from '@xyflow/react';
 
 import { Diagram } from '@/components/diagram';
+import { EMPLOYEES_NODE } from '@/mocks/datasets/nodes';
+import { EMPLOYEES_TO_EMPLOYEES_EDGE } from '@/mocks/datasets/edges';
 
 describe('Diagram', () => {
   it('Should render diagram', () => {
     render(
       <ReactFlowProvider>
-        <Diagram title={'MongoDB Diagram'} nodes={[]} edges={[]} />
+        <Diagram title={'MongoDB Diagram'} nodes={[EMPLOYEES_NODE]} edges={[EMPLOYEES_TO_EMPLOYEES_EDGE]} />
       </ReactFlowProvider>,
     );
-    expect(screen.getByTitle('MongoDB Diagram')).toBeInTheDocument();
+    const controls = screen.getByTestId('rf__controls');
+    expect(within(controls).getByRole('button', { name: /Plus/ })).toBeInTheDocument();
+    expect(within(controls).getByRole('button', { name: /Minus/ })).toBeInTheDocument();
+    expect(within(controls).getByRole('button', { name: /Full Screen/ })).toBeInTheDocument();
+    expect(screen.getByTestId('rf__minimap')).toBeInTheDocument();
+    expect(screen.getByTestId('rf__node-employees')).toBeInTheDocument();
   });
 });
diff --git a/src/components/node/node.test.tsx b/src/components/node/node.test.tsx
index df78c97..76cc53f 100644
--- a/src/components/node/node.test.tsx
+++ b/src/components/node/node.test.tsx
@@ -46,8 +46,6 @@ describe('node', () => {
     expect(screen.getByText('orders')).toBeInTheDocument();
     expect(screen.getByText('orderId')).toBeInTheDocument();
     expect(screen.getByText('varchar')).toBeInTheDocument();
-    expect(screen.queryByTestId('node-handle-source-orders')).not.toBeInTheDocument();
-    expect(screen.queryByTestId('node-handle-target-orders')).not.toBeInTheDocument();
   });
 
   it('Should show collection node', () => {
@@ -62,8 +60,6 @@ describe('node', () => {
     expect(screen.getByText('employees')).toBeInTheDocument();
     expect(screen.getByText('employeeId')).toBeInTheDocument();
     expect(screen.getByText('string')).toBeInTheDocument();
-    expect(screen.queryByTestId('node-handle-source-employees')).not.toBeInTheDocument();
-    expect(screen.queryByTestId('node-handle-target-employees')).not.toBeInTheDocument();
   });
 
   it('Should show contextual zoom', () => {
@@ -81,17 +77,4 @@ describe('node', () => {
     expect(screen.queryByText('employeeId')).not.toBeInTheDocument();
     expect(screen.queryByText('string')).not.toBeInTheDocument();
   });
-
-  it('Should have handles if connected', () => {
-    render(
-      <Node
-        {...DEFAULT_PROPS}
-        type="collection"
-        isConnectable={true}
-        data={{ title: 'employees', fields: [{ name: 'employeeId', type: 'string' }] }}
-      />,
-    );
-    expect(screen.getByTestId('node-handle-source-employees')).toBeInTheDocument();
-    expect(screen.getByTestId('node-handle-target-employees')).toBeInTheDocument();
-  });
 });
diff --git a/src/components/node/node.tsx b/src/components/node/node.tsx
index d57e97e..75a92ff 100644
--- a/src/components/node/node.tsx
+++ b/src/components/node/node.tsx
@@ -78,7 +78,7 @@ const NodeHeaderTitle = styled.div`
   ${ellipsisTruncation}
 `;
 
-const NodeHandle = styled(Handle)<{ zIndex?: number }>`
+const NodeHandle = styled(Handle)<{ ['z-index']?: number }>`
   width: 100%;
   height: 100%;
   position: absolute;
@@ -87,7 +87,7 @@ const NodeHandle = styled(Handle)<{ zIndex?: number }>`
   border-radius: 0;
   transform: none;
   opacity: 0;
-  z-index: ${props => props.zIndex};
+  z-index: ${props => props['z-index']};
 `;
 
 export const Node = ({
@@ -141,24 +141,22 @@ export const Node = ({
   return (
     <div title={title} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
       <NodeBorder variant={selected ? 'selected' : borderVariant}>
-        {isConnectable && (
-          <>
-            <NodeHandle
-              id={'source'}
-              data-testid={`node-handle-source-${title}`}
-              position={Position.Right}
-              type="source"
-              zIndex={fromHandle ? 0 : 1}
-            />
-            <NodeHandle
-              id={'target'}
-              data-testid={`node-handle-target-${title}`}
-              position={Position.Left}
-              type="target"
-              zIndex={fromHandle ? 1 : 0}
-            />
-          </>
-        )}
+        <NodeHandle
+          id={'source'}
+          data-testid={`node-handle-source-${title}`}
+          position={Position.Right}
+          type="source"
+          isConnectable={isConnectable ?? false}
+          z-index={fromHandle ? 0 : 1}
+        />
+        <NodeHandle
+          id={'target'}
+          data-testid={`node-handle-target-${title}`}
+          position={Position.Left}
+          type="target"
+          isConnectable={isConnectable ?? false}
+          z-index={fromHandle ? 1 : 0}
+        />
         <NodeWrapper accent={getAccent()} color={getNodeColor()}>
           <NodeHeader background={getHeaderBackground()}>
             {!isContextualZoom && (

From c8d86b1110fd00e237e5bcb990617a4ccdbdf3b0 Mon Sep 17 00:00:00 2001
From: Lavender <lavender.chan@mongodb.com>
Date: Wed, 28 May 2025 14:37:10 +1000
Subject: [PATCH 3/3] bugfix/MIG-6835 Add linting fixes

---
 src/components/node/node.tsx | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/components/node/node.tsx b/src/components/node/node.tsx
index 75a92ff..ae76143 100644
--- a/src/components/node/node.tsx
+++ b/src/components/node/node.tsx
@@ -142,16 +142,14 @@ export const Node = ({
     <div title={title} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
       <NodeBorder variant={selected ? 'selected' : borderVariant}>
         <NodeHandle
-          id={'source'}
-          data-testid={`node-handle-source-${title}`}
+          id="source"
           position={Position.Right}
           type="source"
           isConnectable={isConnectable ?? false}
           z-index={fromHandle ? 0 : 1}
         />
         <NodeHandle
-          id={'target'}
-          data-testid={`node-handle-target-${title}`}
+          id="target"
           position={Position.Left}
           type="target"
           isConnectable={isConnectable ?? false}