feat(COMPASS-9432): apply initial layout

Author: paula-stacho

packages/compass-data-modeling/src/components/diagram-editor.tsx

@@ -1,4 +1,10 @@
-import React, { useCallback, useMemo, useRef, useState } from 'react';
+import React, {
+  useCallback,
+  useMemo,
+  useRef,
+  useEffect,
+  useState,
+} from 'react';
 import { connect } from 'react-redux';
 import type { DataModelingState } from '../store/reducer';
 import {
@@ -28,9 +34,11 @@ import {
   type NodeProps,
   type EdgeProps,
   useDiagram,
+  applyLayout,
 } from '@mongodb-js/diagramming';
 import type { Edit, StaticModel } from '../services/data-model-storage';
 import { UUID } from 'bson';
+import { initial } from 'lodash';
 
 const loadingContainerStyles = css({
   width: '100%',
@@ -135,6 +143,7 @@ const DiagramEditor: React.FunctionComponent<{
   const isDarkMode = useDarkMode();
   const diagramContainerRef = useRef<HTMLDivElement | null>(null);
   const diagram = useDiagram();
+  const [nodes, setNodes] = useState<NodeProps[]>([]);
 
   const setDiagramContainerRef = useCallback(
     (ref: HTMLDivElement | null) => {
@@ -208,8 +217,26 @@ const DiagramEditor: React.FunctionComponent<{
     });
   }, [model?.relationships]);
 
-  const nodes = useMemo(() => {
-    return (model?.collections ?? []).map(
+  const applyInitialLayout = useCallback(
+    async (storedNodes: NodeProps[]) => {
+      console.log('INITIAL STATE: applying layout');
+      try {
+        const { nodes: positionedNodes } = await applyLayout(
+          storedNodes,
+          edges,
+          'STAR'
+        );
+        // TODO: save the new positions to the model
+        setNodes(positionedNodes);
+      } catch (err) {
+        console.error('Error applying layout:', err);
+      }
+    },
+    [setNodes]
+  );
+
+  useEffect(() => {
+    const storedNodes = (model?.collections ?? []).map(
       (coll): NodeProps => ({
         id: coll.ns,
         type: 'collection',
@@ -234,12 +261,16 @@ const DiagramEditor: React.FunctionComponent<{
             };
           }
         ),
-        measured: {
-          width: 100,
-          height: 200,
-        },
       })
     );
+    const isInitialState = storedNodes.every(
+      (node) => node.position.x === -1 && node.position.y === -1
+    );
+    if (isInitialState) {
+      void applyInitialLayout(storedNodes);
+      return;
+    }
+    setNodes(storedNodes);
   }, [model?.collections]);
 
   let content;

packages/compass-data-modeling/src/store/diagram.ts

@@ -118,8 +118,7 @@ export const diagramReducer: Reducer<DiagramState> = (
                 // TODO
                 indexes: [],
                 shardKey: undefined,
-                // TODO: handle correct display position
-                displayPosition: [Math.random() * 1000, Math.random() * 1000],
+                displayPosition: [-1, -1],
               })),
               relationships: action.relations,
             },