fix/COMPASS-9944 alternative applyLayout for no edges (#151)

Author: paula-stacho

package.json

@@ -59,7 +59,7 @@
     "@leafygreen-ui/typography": "^22.1.0",
     "@xyflow/react": "12.5.1",
     "d3-path": "^3.1.0",
-    "elkjs": "^0.10.0",
+    "elkjs": "^0.11.0",
     "react": "17.0.2",
     "react-dom": "17.0.2"
   },

src/mocks/decorators/diagram-stress-test.decorator.tsx

@@ -77,7 +77,7 @@ export const useStressTestNodesAndEdges = (nodeCount: number) => {
     }));
 
     let applyUpdate = true;
-    applyLayout<NodeProps, EdgeProps>(newNodes, newEdges, 'STAR').then(result => {
+    applyLayout<NodeProps, EdgeProps>({ nodes: newNodes, edges: newEdges, direction: 'STAR' }).then(result => {
       if (!applyUpdate) return;
       setNodes(result.nodes);
       setEdges(result.edges);

src/types/layout.ts

@@ -3,7 +3,7 @@ import { Measured, Position } from '@/types/node';
 /**
  * Defines the available layout directions for a diagram.
  */
-export type LayoutDirection = 'LEFT_RIGHT' | 'TOP_BOTTOM' | 'STAR';
+export type LayoutDirection = 'LEFT_RIGHT' | 'TOP_BOTTOM' | 'STAR' | 'RECTANGLE';
 
 /**
  * A minimal representation of a node used during layout calculation.

src/utilities/apply-layout.test.ts

@@ -34,7 +34,7 @@ describe('apply-layout', () => {
       },
     },
   ];
-  const edges: EdgeProps[] = [
+  const edges: [EdgeProps, ...EdgeProps[]] = [
     {
       id: '1',
       source: '3',
@@ -44,34 +44,34 @@ describe('apply-layout', () => {
     },
   ];
   it('With no nodes or edges', async () => {
-    const result = await applyLayout<NodeProps, EdgeProps>([], [], 'TOP_BOTTOM');
+    const result = await applyLayout<NodeProps>({ nodes: [] });
     expect(result).toEqual({
       nodes: [],
       edges: [],
     });
   });
   it('With nodes (not measured, 0 fields)', async () => {
-    const result = await applyLayout<NodeProps, EdgeProps>(nodes, [], 'TOP_BOTTOM');
+    const result = await applyLayout<NodeProps>({ nodes });
     expect(result.nodes).toEqual([
       expect.objectContaining({
         ...nodes[0],
         position: {
-          x: 12,
-          y: 12,
+          x: 15,
+          y: 15,
         },
       }),
       expect.objectContaining({
         ...nodes[1],
         position: {
-          x: 12,
-          y: 78, // 12 + 44 (0 fields height) + 2*10 (padding) + 2 (extra padding)
+          x: 15,
+          y: 161, // 15 + 44 (0 fields height) + 100 (spacing) + 2 (extra padding)
         },
       }),
       expect.objectContaining({
         ...nodes[2],
         position: {
-          x: 12,
-          y: 144, // 86 + 44 (0 fields height) + 2*10 (padding) + 2 (extra padding)
+          x: 15,
+          y: 307, // 161 + 44 (0 fields height) + 100 (spacing) + 2 (extra padding)
         },
       }),
     ]);
@@ -81,27 +81,27 @@ describe('apply-layout', () => {
       ...node,
       fields: [{ name: 'field1', type: 'string' }],
     }));
-    const result = await applyLayout<NodeProps, EdgeProps>(nodesWithOneField, [], 'TOP_BOTTOM');
+    const result = await applyLayout<NodeProps>({ nodes: nodesWithOneField });
     expect(result.nodes).toEqual([
       expect.objectContaining({
         ...nodesWithOneField[0],
         position: {
-          x: 12,
-          y: 12,
+          x: 15,
+          y: 15,
         },
       }),
       expect.objectContaining({
         ...nodesWithOneField[1],
         position: {
-          x: 12,
-          y: 96, // 12 + 62 (1 field height) + 2*10 (padding) + 2 (extra padding)
+          x: 15,
+          y: 179, // 15 + 62 (1 field height) + 100 (spacing) + 2 (extra padding)
         },
       }),
       expect.objectContaining({
         ...nodesWithOneField[2],
         position: {
-          x: 12,
-          y: 180, // 96 + 62 (1 field height) + 2*10 (padding) + 2 (extra padding)
+          x: 15,
+          y: 343, // 179 + 62 (1 field height) + 100 (spacing) + 2 (extra padding)
         },
       }),
     ]);
@@ -111,27 +111,27 @@ describe('apply-layout', () => {
       ...node,
       fields: undefined,
     }));
-    const result = await applyLayout<BaseNode, EdgeProps>(baseNodes, [], 'TOP_BOTTOM');
+    const result = await applyLayout<BaseNode>({ nodes: baseNodes });
     expect(result.nodes).toEqual([
       expect.objectContaining({
         ...baseNodes[0],
         position: {
-          x: 12,
-          y: 12,
+          x: 15,
+          y: 15,
         },
       }),
       expect.objectContaining({
         ...baseNodes[1],
         position: {
-          x: 12,
-          y: 96, // 12 + 62 (default height) + 2*10 (padding) + 2 (extra padding)
+          x: 15,
+          y: 179, // 15 + 62 (default height) + 100 (spacing) + 2 (extra padding)
         },
       }),
       expect.objectContaining({
         ...baseNodes[2],
         position: {
-          x: 12,
-          y: 180, // 96 + 62 (default height) + 2*10 (padding) + 2 (extra padding)
+          x: 15,
+          y: 343, // 179 + 62 (default height) + 100 (spacing) + 2 (extra padding)
         },
       }),
     ]);
@@ -140,37 +140,37 @@ describe('apply-layout', () => {
     const measuredNodes = nodes.map(node => ({
       ...node,
       measured: {
-        width: 100,
+        width: 200,
         height: 50,
       },
     }));
-    const result = await applyLayout<NodeProps, EdgeProps>(measuredNodes, [], 'TOP_BOTTOM');
+    const result = await applyLayout<NodeProps>({ nodes: measuredNodes });
     expect(result.nodes).toEqual([
       expect.objectContaining({
         ...measuredNodes[0],
         position: {
-          x: 12,
-          y: 12,
+          x: 15,
+          y: 15,
         },
       }),
       expect.objectContaining({
         ...measuredNodes[1],
         position: {
-          x: 12,
-          y: 82, // 12 + 50 (measured node height) + 2*10 (padding)
+          x: 15,
+          y: 165, // 15 + 50 (measured node height) + 100 (spacing)
         },
       }),
       expect.objectContaining({
         ...measuredNodes[2],
         position: {
-          x: 12,
-          y: 152, // 82 + 50 (measured node height) + 2*10 (padding)
+          x: 15,
+          y: 315, // 165 + 50 (measured node height) + 100 (spacing)
         },
       }),
     ]);
   });
   it('With nodes and edges', async () => {
-    const result = await applyLayout<NodeProps, EdgeProps>(nodes, edges, 'TOP_BOTTOM');
+    const result = await applyLayout<NodeProps, EdgeProps>({ nodes, edges, direction: 'TOP_BOTTOM' });
     expect(result.edges).toEqual([
       expect.objectContaining({
         id: '1',

src/utilities/apply-layout.ts

@@ -24,58 +24,112 @@ const STAR = {
   'spacing.nodeNode': `${DEFAULT_NODE_STAR_SPACING}`,
 };
 
-const getLayoutOptions = (direction: LayoutDirection) => {
+const RECTANGLE = {
+  'elk.algorithm': 'rectpacking',
+  'spacing.nodeNode': `${DEFAULT_NODE_SPACING}`,
+};
+
+const getLayoutOptions = (
+  direction: LayoutDirection,
+  options: Partial<Record<LayoutOptions, string>>,
+): Record<string, string> => {
+  let elkLayoutOptions: Record<string, string> = {};
   switch (direction) {
     case 'LEFT_RIGHT':
-      return LEFT_RIGHT;
+      elkLayoutOptions = LEFT_RIGHT;
+      break;
     case 'TOP_BOTTOM':
-      return TOP_BOTTOM;
+      elkLayoutOptions = TOP_BOTTOM;
+      break;
     case 'STAR':
-      return STAR;
-    default:
-      return {};
+      elkLayoutOptions = STAR;
+      break;
+    case 'RECTANGLE':
+      elkLayoutOptions = RECTANGLE;
+      break;
+  }
+  if (options.aspectRatio) {
+    elkLayoutOptions['elk.aspectRatio'] = options.aspectRatio;
   }
+  return elkLayoutOptions;
 };
 
+type LayoutOptions = 'aspectRatio';
+
 /**
- * Applies a layout to a graph of nodes and edges using the ELK layout engine.
- *
- * This function transforms the provided nodes and edges into a format suitable for the ELK layout algorithm,
- * applies the layout based on the specified direction, and then returns a promise that resolves
- * to the nodes and edges with updated positions.
+ * Applies a layout to a graph of nodes using the ELK layout engine.
+ * When no edges are provided, defaults to RECTANGLE layout for grid arrangement.
  *
  * @param nodes A list of nodes.
+ */
+export function applyLayout<N extends BaseNode>({
+  nodes,
+  options,
+}: {
+  nodes: N[];
+  options?: Partial<Record<LayoutOptions, string>>;
+}): Promise<ApplyLayout<N, never>>;
+
+/**
+ * Applies a layout to a graph of nodes and edges using the ELK layout engine.
+ * Use LEFT_RIGHT, TOP_BOTTOM, STAR layout for diagrams with edges,
+ * and RECTANGLE for grid arrangement of unconnected nodes.
+ * @param nodes A list of nodes.
  * @param edges A list of edges.
- * @param direction The layout direction to use, either "LEFT_RIGHT", "TOP_BOTTOM" or "STAR".
+ * @param direction The layout direction to use.
  */
-export const applyLayout = <N extends BaseNode, E extends BaseEdge>(
-  nodes: N[],
-  edges: E[],
-  direction: LayoutDirection = 'TOP_BOTTOM',
-): Promise<ApplyLayout<N, E>> => {
+export function applyLayout<N extends BaseNode, E extends BaseEdge>({
+  nodes,
+  edges,
+  direction,
+  options,
+}: {
+  nodes: N[];
+  edges: E[];
+  direction?: LayoutDirection;
+  options?: Partial<Record<LayoutOptions, string>>;
+}): Promise<ApplyLayout<N, E>>;
+
+export function applyLayout<N extends BaseNode, E extends BaseEdge>({
+  nodes,
+  edges,
+  direction,
+  options = {},
+}: {
+  nodes: N[];
+  edges?: E[];
+  direction?: LayoutDirection;
+  options?: Partial<Record<LayoutOptions, string>>;
+}): Promise<ApplyLayout<N, E>> {
+  // If no edges are provided, use RECTANGLE layout for grid arrangement
+  // Otherwise, use the specified direction or default to TOP_BOTTOM
+  const layoutType = typeof edges === 'undefined' ? 'RECTANGLE' : (direction ?? 'TOP_BOTTOM');
+  const layoutOptions = {
+    ...getLayoutOptions(layoutType, options),
+  };
   const transformedNodes = nodes.map<N>(node => ({
     ...node,
     height: getNodeHeight(node),
     width: getNodeWidth(node),
   }));
 
-  const transformedEdges = edges.map<ElkExtendedEdge>(edge => ({
+  const transformedEdges = (edges ?? []).map<ElkExtendedEdge>(edge => ({
     ...edge,
     id: edge.id,
     sources: [edge.source],
     targets: [edge.target],
   }));
 
   const existingNodes: Record<string, N> = nodes.reduce((prev, curr) => ({ ...prev, [curr.id]: curr }), {});
-  const existingEdges: Record<string, E> = edges.reduce((prev, curr) => ({ ...prev, [curr.id]: curr }), {});
+  const existingEdges: Record<string, E> = (edges || []).reduce((prev, curr) => ({ ...prev, [curr.id]: curr }), {});
 
   const elk = new ELK({});
 
   return elk
     .layout({
       id: 'root',
       children: transformedNodes,
-      layoutOptions: getLayoutOptions(direction),
+      layoutOptions,
       edges: transformedEdges,
     })
     .then(g => {
@@ -97,4 +151,4 @@ export const applyLayout = <N extends BaseNode, E extends BaseEdge>(
         })),
       };
     });
-};
+}

yarn.lock

@@ -1430,7 +1430,7 @@ __metadata:
     "@vitest/ui": "npm:3.2.4"
     "@xyflow/react": "npm:12.5.1"
     d3-path: "npm:^3.1.0"
-    elkjs: "npm:^0.10.0"
+    elkjs: "npm:^0.11.0"
     eslint: "npm:^9.24.0"
     eslint-config-prettier: "npm:10.1.5"
     eslint-import-resolver-typescript: "npm:^4.3.1"
@@ -4538,10 +4538,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"elkjs@npm:^0.10.0":
-  version: 0.10.0
-  resolution: "elkjs@npm:0.10.0"
-  checksum: 10c0/f04662fe5a972ab1fb62f698cd53ba8d5806a27ec07fd056e79a2dc89c158e63210636ce7e5dac7913967670b5f2b7c2db091f23746fea11a5ca751327ee3abc
+"elkjs@npm:^0.11.0":
+  version: 0.11.0
+  resolution: "elkjs@npm:0.11.0"
+  checksum: 10c0/e3515eab869facd8c7acbb1d7d8a0f61686ec7ec4b42fd5c86b864216ee48a47f85376565d06f3f18d73b5a2c5de47aec7a4126ff059235d2a90099aee481b21
   languageName: node
   linkType: hard