fix/COMPASS-9664 Do not require measured heights for relationships (#104)

Author: paula-stacho

src/components/edge/floating-edge.test.tsx

@@ -1,9 +1,10 @@
-import { Position, useNodes } from '@xyflow/react';
+import { Node, Position, useNodes } from '@xyflow/react';
 import { ComponentProps } from 'react';
 
 import { EMPLOYEES_NODE, ORDERS_NODE } from '@/mocks/datasets/nodes';
 import { render, screen } from '@/mocks/testing-utils';
 import { FloatingEdge } from '@/components/edge/floating-edge';
+import { DEFAULT_FIELD_HEIGHT, DEFAULT_NODE_WIDTH } from '@/utilities/constants';
 
 vi.mock('@xyflow/react', async () => {
   const actual = await vi.importActual<typeof import('@xyflow/react')>('@xyflow/react');
@@ -13,14 +14,23 @@ vi.mock('@xyflow/react', async () => {
   };
 });
 
+function mockNodes(nodes: Node[]) {
+  const mockedNodes = vi.mocked(useNodes);
+  mockedNodes.mockReturnValue(nodes);
+}
+
 describe('floating-edge', () => {
+  const nodes = [
+    { ...ORDERS_NODE, data: { title: ORDERS_NODE.title, fields: ORDERS_NODE.fields } },
+    { ...EMPLOYEES_NODE, data: { title: EMPLOYEES_NODE.title, fields: EMPLOYEES_NODE.fields } },
+  ];
+
   beforeEach(() => {
-    const nodes = [
-      { ...ORDERS_NODE, data: { title: ORDERS_NODE.title, fields: ORDERS_NODE.fields } },
-      { ...EMPLOYEES_NODE, data: { title: EMPLOYEES_NODE.title, fields: EMPLOYEES_NODE.fields } },
-    ];
-    const mockedNodes = vi.mocked(useNodes);
-    mockedNodes.mockReturnValue(nodes);
+    mockNodes(nodes);
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
   });
 
   const renderComponent = (props?: Partial<ComponentProps<typeof FloatingEdge>>) => {
@@ -40,14 +50,44 @@ describe('floating-edge', () => {
     );
   };
 
-  it('Should render edge', () => {
-    renderComponent();
-    const path = screen.getByTestId('floating-edge-orders-to-employees');
-    expect(path).toHaveAttribute('id', 'orders-to-employees');
-    expect(path).toHaveAttribute(
-      'd',
-      'M240 143.5L240 163.5L 240,213Q 240,218 245,218L 381,218Q 386,218 386,223L386 272.5L386 292.5',
-    );
+  describe('Without measured heights', () => {
+    it('Should render edge', () => {
+      renderComponent();
+      const path = screen.getByTestId('floating-edge-orders-to-employees');
+      expect(path).toHaveAttribute('id', 'orders-to-employees');
+      expect(path).toHaveAttribute(
+        'd',
+        'M269.5 180L289.5 180L 386.5,180Q 391.5,180 391.5,185L 391.5,295Q 391.5,300 386.5,300L371.5 300',
+      );
+    });
+  });
+
+  describe('With measured heights', () => {
+    it('Should render edge', () => {
+      mockNodes([
+        {
+          ...nodes[0],
+          measured: {
+            width: DEFAULT_NODE_WIDTH,
+            height: DEFAULT_FIELD_HEIGHT * 2,
+          },
+        },
+        {
+          ...nodes[1],
+          measured: {
+            width: DEFAULT_NODE_WIDTH,
+            height: DEFAULT_FIELD_HEIGHT * 4,
+          },
+        },
+      ]);
+      renderComponent();
+      const path = screen.getByTestId('floating-edge-orders-to-employees');
+      expect(path).toHaveAttribute('id', 'orders-to-employees');
+      expect(path).toHaveAttribute(
+        'd',
+        'M240 143.5L240 163.5L 240,213Q 240,218 245,218L 381,218Q 386,218 386,223L386 272.5L386 292.5',
+      );
+    });
   });
 
   it('Should not render edge if source does not exist', () => {

src/components/edge/self-referencing-edge.test.tsx

@@ -1,10 +1,11 @@
-import { Position, useNodes } from '@xyflow/react';
+import { Node, Position, useNodes } from '@xyflow/react';
 import { ComponentProps } from 'react';
 
 import { EMPLOYEES_NODE } from '@/mocks/datasets/nodes';
 import { render, screen } from '@/mocks/testing-utils';
 import { FloatingEdge } from '@/components/edge/floating-edge';
 import { SelfReferencingEdge } from '@/components/edge/self-referencing-edge';
+import { DEFAULT_FIELD_HEIGHT, DEFAULT_NODE_WIDTH } from '@/utilities/constants';
 
 vi.mock('@xyflow/react', async () => {
   const actual = await vi.importActual<typeof import('@xyflow/react')>('@xyflow/react');
@@ -14,11 +15,20 @@ vi.mock('@xyflow/react', async () => {
   };
 });
 
+function mockNodes(nodes: Node[]) {
+  const mockedNodes = vi.mocked(useNodes);
+  mockedNodes.mockReturnValue(nodes);
+}
+
 describe('self-referencing-edge', () => {
+  const nodes = [{ ...EMPLOYEES_NODE, data: { title: EMPLOYEES_NODE.title, fields: EMPLOYEES_NODE.fields } }];
+
   beforeEach(() => {
-    const nodes = [{ ...EMPLOYEES_NODE, data: { title: EMPLOYEES_NODE.title, fields: EMPLOYEES_NODE.fields } }];
-    const mockedNodes = vi.mocked(useNodes);
-    mockedNodes.mockReturnValue(nodes);
+    mockNodes(nodes);
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
   });
 
   const renderComponent = (props?: Partial<ComponentProps<typeof FloatingEdge>>) => {
@@ -38,11 +48,31 @@ describe('self-referencing-edge', () => {
     );
   };
 
-  it('Should render edge', () => {
-    renderComponent();
-    const path = screen.getByTestId('self-referencing-edge-employees-to-employees');
-    expect(path).toHaveAttribute('id', 'employees-to-employees');
-    expect(path).toHaveAttribute('d', 'M422,292.5L422,262.5L584,262.5L584,328.5L551.5,328.5');
+  describe('Without measured heights', () => {
+    it('Should render edge', () => {
+      renderComponent();
+      const path = screen.getByTestId('self-referencing-edge-employees-to-employees');
+      expect(path).toHaveAttribute('id', 'employees-to-employees');
+      expect(path).toHaveAttribute('d', 'M422,292.5L422,262.5L584,262.5L584,350.5L551.5,350.5');
+    });
+  });
+
+  describe('With measured heights', () => {
+    it('Should render edge', () => {
+      mockNodes([
+        {
+          ...nodes[0],
+          measured: {
+            width: DEFAULT_NODE_WIDTH,
+            height: DEFAULT_FIELD_HEIGHT * 4,
+          },
+        },
+      ]);
+      renderComponent();
+      const path = screen.getByTestId('self-referencing-edge-employees-to-employees');
+      expect(path).toHaveAttribute('id', 'employees-to-employees');
+      expect(path).toHaveAttribute('d', 'M422,292.5L422,262.5L584,262.5L584,328.5L551.5,328.5');
+    });
   });
 
   it('Should not render edge if source does not exist', () => {

src/components/edge/self-referencing-edge.tsx

@@ -5,6 +5,7 @@ import { path } from 'd3-path';
 import { InternalNode } from '@/types/internal';
 import { DEFAULT_MARKER_SIZE } from '@/utilities/constants';
 import { Edge } from '@/components/edge/edge';
+import { getNodeWidth, getNodeHeight } from '@/utilities/node-dimensions';
 
 export const SelfReferencingEdge = ({ id, source, markerEnd, markerStart, selected }: EdgeProps) => {
   const nodes = useNodes<InternalNode>();
@@ -18,8 +19,8 @@ export const SelfReferencingEdge = ({ id, source, markerEnd, markerStart, select
     return null;
   }
 
-  const centerX = (sourceNode.measured?.width || 0) / 2;
-  const centerY = (sourceNode.measured?.height || 0) / 2;
+  const centerX = getNodeWidth(sourceNode) / 2;
+  const centerY = getNodeHeight(sourceNode) / 2;
 
   const width = centerX + 40;
   const leftHeight = 30;

src/mocks/datasets/nodes.tsx

@@ -1,5 +1,4 @@
 import { NodeProps } from '@/types';
-import { DEFAULT_FIELD_HEIGHT, DEFAULT_NODE_WIDTH } from '@/utilities/constants';
 
 export const ORDERS_NODE: NodeProps = {
   id: 'orders',
@@ -8,10 +7,6 @@ export const ORDERS_NODE: NodeProps = {
     x: 100,
     y: 100,
   },
-  measured: {
-    width: DEFAULT_NODE_WIDTH,
-    height: DEFAULT_FIELD_HEIGHT * 2,
-  },
   title: 'orders',
   fields: [
     { name: 'ORDER_ID', type: 'varchar', glyphs: ['key'] },
@@ -26,10 +21,6 @@ export const EMPLOYEES_NODE: NodeProps = {
     x: 300,
     y: 300,
   },
-  measured: {
-    width: DEFAULT_NODE_WIDTH,
-    height: DEFAULT_FIELD_HEIGHT * 4,
-  },
   title: 'employees',
   fields: [
     { name: 'employeeId', type: 'objectId', glyphs: ['key'] },
@@ -46,10 +37,6 @@ export const EMPLOYEE_TERRITORIES_NODE: NodeProps = {
     x: 400,
     y: 100,
   },
-  measured: {
-    width: DEFAULT_NODE_WIDTH,
-    height: DEFAULT_FIELD_HEIGHT * 4,
-  },
   title: 'employee_territories',
   fields: [
     { name: 'employeeId', type: 'string', glyphs: ['key'] },

src/utilities/apply-layout.ts

@@ -1,16 +1,11 @@
 import { ElkExtendedEdge } from 'elkjs';
 import ELK from 'elkjs/lib/elk.bundled';
 
-import {
-  DEFAULT_FIELD_HEIGHT,
-  DEFAULT_FIELD_PADDING,
-  DEFAULT_NODE_HEADER_HEIGHT,
-  DEFAULT_NODE_SPACING,
-  DEFAULT_NODE_STAR_SPACING,
-  DEFAULT_NODE_WIDTH,
-} from '@/utilities/constants';
+import { DEFAULT_NODE_SPACING, DEFAULT_NODE_STAR_SPACING } from '@/utilities/constants';
 import { ApplyLayout, BaseEdge, BaseNode, LayoutDirection } from '@/types/layout';
 
+import { getNodeHeight, getNodeWidth } from './node-dimensions';
+
 const TOP_BOTTOM = {
   'elk.algorithm': 'layered',
   'elk.direction': 'UP',
@@ -42,11 +37,6 @@ const getLayoutOptions = (direction: LayoutDirection) => {
   }
 };
 
-const getNodeHeight = <N extends BaseNode>(node: N) => {
-  const fieldCount = !('fields' in node) || !Array.isArray(node.fields) ? 1 : node.fields.length;
-  return DEFAULT_NODE_HEADER_HEIGHT + DEFAULT_FIELD_PADDING * 2 + fieldCount * DEFAULT_FIELD_HEIGHT;
-};
-
 /**
  * Applies a layout to a graph of nodes and edges using the ELK layout engine.
  *
@@ -65,12 +55,8 @@ export const applyLayout = <N extends BaseNode, E extends BaseEdge>(
 ): Promise<ApplyLayout<N, E>> => {
   const transformedNodes = nodes.map<N>(node => ({
     ...node,
-    height:
-      'height' in node && typeof node.height === 'number'
-        ? node.height
-        : (node.measured?.height ?? getNodeHeight(node)),
-    width:
-      'width' in node && typeof node.width === 'number' ? node.width : (node.measured?.width ?? DEFAULT_NODE_WIDTH),
+    height: getNodeHeight(node),
+    width: getNodeWidth(node),
   }));
 
   const transformedEdges = edges.map<ElkExtendedEdge>(edge => ({

src/utilities/convert-nodes.test.ts

@@ -7,6 +7,7 @@ import {
   convertToInternalNodes,
 } from '@/utilities/convert-nodes';
 import { EMPLOYEES_NODE, ORDERS_NODE } from '@/mocks/datasets/nodes';
+import { DEFAULT_FIELD_HEIGHT, DEFAULT_NODE_WIDTH } from '@/utilities/constants';
 
 describe('convert-nodes', () => {
   describe('convertToExternalNode', () => {
@@ -144,7 +145,17 @@ describe('convert-nodes', () => {
 
   describe('convertToInternalNodes', () => {
     it('Should convert node props to internal node', () => {
-      const internalNodes = convertToInternalNodes([{ ...ORDERS_NODE, disabled: true }, EMPLOYEES_NODE]);
+      const internalNodes = convertToInternalNodes([
+        {
+          ...ORDERS_NODE,
+          measured: {
+            width: DEFAULT_NODE_WIDTH,
+            height: DEFAULT_FIELD_HEIGHT * 2,
+          },
+          disabled: true,
+        },
+        EMPLOYEES_NODE,
+      ]);
       expect(internalNodes).toEqual([
         {
           id: 'orders',
@@ -174,10 +185,6 @@ describe('convert-nodes', () => {
             x: 300,
             y: 300,
           },
-          measured: {
-            height: 72,
-            width: 244,
-          },
           connectable: false,
           data: {
             fields: [

src/utilities/get-edge-params.test.ts

@@ -1,19 +1,53 @@
 import { getEdgeParams } from '@/utilities/get-edge-params';
 import { EMPLOYEES_NODE, ORDERS_NODE } from '@/mocks/datasets/nodes';
+import { DEFAULT_FIELD_HEIGHT, DEFAULT_NODE_WIDTH } from '@/utilities/constants';
 
 describe('get-edge-params', () => {
-  it('Should get parameters', () => {
-    const result = getEdgeParams(
-      { ...ORDERS_NODE, data: { title: ORDERS_NODE.title, fields: ORDERS_NODE.fields } },
-      { ...EMPLOYEES_NODE, data: { title: EMPLOYEES_NODE.title, fields: EMPLOYEES_NODE.fields } },
-    );
-    expect(result).toEqual({
-      sourcePos: 'bottom',
-      sx: 240,
-      sy: 143.5,
-      targetPos: 'top',
-      tx: 386,
-      ty: 292.5,
+  describe('Without measured heights', () => {
+    it('Should get parameters', () => {
+      const result = getEdgeParams(
+        { ...ORDERS_NODE, data: { title: ORDERS_NODE.title, fields: ORDERS_NODE.fields } },
+        { ...EMPLOYEES_NODE, data: { title: EMPLOYEES_NODE.title, fields: EMPLOYEES_NODE.fields } },
+      );
+      expect(result).toEqual({
+        sourcePos: 'right',
+        sx: 269.5,
+        sy: 180,
+        targetPos: 'right',
+        tx: 371.5,
+        ty: 300,
+      });
+    });
+  });
+
+  describe('With measured heights', () => {
+    it('Should get parameters', () => {
+      const result = getEdgeParams(
+        {
+          ...ORDERS_NODE,
+          data: { title: ORDERS_NODE.title, fields: ORDERS_NODE.fields },
+          measured: {
+            width: DEFAULT_NODE_WIDTH,
+            height: DEFAULT_FIELD_HEIGHT * 2,
+          },
+        },
+        {
+          ...EMPLOYEES_NODE,
+          data: { title: EMPLOYEES_NODE.title, fields: EMPLOYEES_NODE.fields },
+          measured: {
+            width: DEFAULT_NODE_WIDTH,
+            height: DEFAULT_FIELD_HEIGHT * 4,
+          },
+        },
+      );
+      expect(result).toEqual({
+        sourcePos: 'bottom',
+        sx: 240,
+        sy: 143.5,
+        targetPos: 'top',
+        tx: 386,
+        ty: 292.5,
+      });
     });
   });
 });