fix/COMPASS-9664 Do not require measured heights for relationships

Author: paula-stacho

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) || 0) / 2;
+  const centerY = (getNodeHeight(sourceNode) || 0) / 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/get-edge-params.ts

@@ -3,6 +3,8 @@ import { Position, XYPosition } from '@xyflow/react';
 import { InternalNode } from '@/types/internal';
 import { DEFAULT_MARKER_SIZE } from '@/utilities/constants';
 
+import { getNodeHeight, getNodeWidth } from './node-dimensions';
+
 /**
  * Returns the coordinates where a line connecting the centers of the source and target nodes intersects
  * the edges of those nodes. This implementation is copied from:
@@ -12,10 +14,8 @@ import { DEFAULT_MARKER_SIZE } from '@/utilities/constants';
  * @param targetNode The target node
  */
 const getNodeIntersection = (intersectionNode: InternalNode, targetNode: InternalNode): XYPosition => {
-  const { width: intersectionNodeWidth, height: intersectionNodeHeight } = intersectionNode.measured ?? {
-    width: 0,
-    height: 0,
-  };
+  const intersectionNodeWidth = getNodeWidth(intersectionNode);
+  const intersectionNodeHeight = getNodeHeight(intersectionNode);
   const targetPosition = targetNode.position;
 
   const w = (intersectionNodeWidth ?? 0) / 2;

src/utilities/node-dimensions.ts

@@ -0,0 +1,21 @@
+import type { BaseNode } from '@/types';
+
+import {
+  DEFAULT_FIELD_HEIGHT,
+  DEFAULT_FIELD_PADDING,
+  DEFAULT_NODE_HEADER_HEIGHT,
+  DEFAULT_NODE_WIDTH,
+} from './constants';
+
+export const getNodeHeight = <N extends BaseNode>(node: N) => {
+  if ('height' in node && typeof node.height === 'number') return node.height;
+  if ('measured' in node && node.measured?.height) return node.measured.height;
+  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;
+};
+
+export const getNodeWidth = <N extends BaseNode>(node: N) => {
+  if ('width' in node && typeof node.width === 'number') return node.width;
+  if ('measured' in node && node.measured?.width) return node.measured.width;
+  return DEFAULT_NODE_WIDTH;
+};