fitView, deps

Author: paula-stacho

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

@@ -39,6 +39,7 @@ import {
 } from '@mongodb-js/diagramming';
 import type { Edit, StaticModel } from '../services/data-model-storage';
 import { UUID } from 'bson';
+import { useLogger } from '@mongodb-js/compass-logging/provider';
 
 const loadingContainerStyles = css({
   width: '100%',
@@ -142,6 +143,7 @@ const DiagramEditor: React.FunctionComponent<{
   onApplyClick,
   onApplyInitialLayout,
 }) => {
+  const { log, mongoLogId } = useLogger('COMPASS-DATA-MODELING-DIAGRAM-EDITOR');
   const isDarkMode = useDarkMode();
   const diagramContainerRef = useRef<HTMLDivElement | null>(null);
   const diagram = useDiagram();
@@ -227,19 +229,22 @@ const DiagramEditor: React.FunctionComponent<{
           edges,
           'LEFT_RIGHT'
         );
-        setNodes(positionedNodes);
         onApplyInitialLayout(
           positionedNodes.reduce((obj, node) => {
             obj[node.id] = [node.position.x, node.position.y];
             return obj;
           }, {} as Record<string, [number, number]>)
         );
       } catch (err) {
-        // eslint-disable-next-line no-console
-        console.error('Error applying layout:', err);
+        log.error(
+          mongoLogId(1_001_000_001),
+          'DiagramEditor',
+          'Error applying layout:',
+          err
+        );
       }
     },
-    [setNodes]
+    [edges, log, mongoLogId, onApplyInitialLayout]
   );
 
   useEffect(() => {
@@ -278,7 +283,16 @@ const DiagramEditor: React.FunctionComponent<{
       return;
     }
     setNodes(storedNodes);
-  }, [model?.collections]);
+  }, [model?.collections, edges, diagram, applyInitialLayout]);
+
+  const nodesLoaded = useRef(false);
+  useEffect(() => {
+    // call fitView once the nodes are ready
+    if (!nodesLoaded.current && nodes.length > 0) {
+      void diagram.fitView();
+      nodesLoaded.current = true;
+    }
+  }, [nodesLoaded, nodes, diagram]);
 
   let content;
 
@@ -328,6 +342,10 @@ const DiagramEditor: React.FunctionComponent<{
             title={diagramLabel}
             edges={edges}
             nodes={nodes}
+            fitViewOptions={{
+              maxZoom: 1,
+              minZoom: 0.25,
+            }}
             onEdgeClick={(evt, edge) => {
               setApplyInput(
                 JSON.stringify(