chore: move diagramming dependency to compass-components COMPASS-9902

packages/compass-components/package.json

@@ -78,6 +78,7 @@
     "@leafygreen-ui/tooltip": "^13.0.13",
     "@leafygreen-ui/typography": "^20.0.2",
     "@mongodb-js/compass-context-menu": "^0.2.5",
+    "@mongodb-js/diagramming": "^1.3.3",
     "@react-aria/interactions": "^3.9.1",
     "@react-aria/utils": "^3.13.1",
     "@react-aria/visually-hidden": "^3.3.1",

packages/compass-components/src/components/diagramming.tsx

@@ -0,0 +1,13 @@
+export {
+  Diagram,
+  DiagramProvider,
+  applyLayout,
+  getNodesBounds,
+  getViewportForBounds,
+  useDiagram,
+} from '@mongodb-js/diagramming';
+export type {
+  EdgeProps,
+  DiagramInstance,
+  NodeProps,
+} from '@mongodb-js/diagramming';

packages/compass-components/src/index.ts

@@ -1,3 +1,4 @@
+export * from './components/diagramming';
 export * from './components/leafygreen';
 
 export {

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

@@ -4,7 +4,7 @@ import DiagramEditor from './diagram-editor';
 import SavedDiagramsList from './saved-diagrams-list';
 import NewDiagramFormModal from './new-diagram-form';
 import type { DataModelingState } from '../store/reducer';
-import { DiagramProvider } from '@mongodb-js/diagramming';
+import { DiagramProvider } from '@mongodb-js/compass-components';
 import DiagramEditorSidePanel from './drawer/diagram-editor-side-panel';
 
 type DataModelingProps = {

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

@@ -11,9 +11,9 @@ import type {
   Edit,
   MongoDBDataModelDescription,
 } from '../services/data-model-storage';
-import diagramming from '@mongodb-js/diagramming';
+import compassComponents from '@mongodb-js/compass-components';
 import sinon from 'sinon';
-import { DiagramProvider } from '@mongodb-js/diagramming';
+import { DiagramProvider } from '@mongodb-js/compass-components';
 import { DataModelingWorkspaceTab } from '..';
 import { openDiagram } from '../store/diagram';
 
@@ -157,9 +157,9 @@ describe('DiagramEditor', function () {
 
   before(function () {
     // We need to tub the Diagram import because it has problems with ESM/CJS interop
-    sinon.stub(diagramming, 'Diagram').callsFake(mockDiagramming.Diagram);
+    sinon.stub(compassComponents, 'Diagram').callsFake(mockDiagramming.Diagram);
     sinon
-      .stub(diagramming, 'applyLayout')
+      .stub(compassComponents, 'applyLayout')
       .callsFake(mockDiagramming.applyLayout as any);
   });
 

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

@@ -19,21 +19,18 @@ import {
 import {
   Banner,
   CancelLoader,
+  Diagram,
   WorkspaceContainer,
   css,
   spacing,
   Button,
   useDarkMode,
+  useDiagram,
   useDrawerActions,
   rafraf,
 } from '@mongodb-js/compass-components';
 import { cancelAnalysis, retryAnalysis } from '../store/analysis-process';
-import {
-  Diagram,
-  type NodeProps,
-  type EdgeProps,
-  useDiagram,
-} from '@mongodb-js/diagramming';
+import type { NodeProps, EdgeProps } from '@mongodb-js/compass-components';
 import type { StaticModel } from '../services/data-model-storage';
 import DiagramEditorToolbar from './diagram-editor-toolbar';
 import ExportDiagramModal from './export-diagram-modal';

packages/compass-data-modeling/src/components/export-diagram-modal.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import {
   Button,
-  css,
   Icon,
   Label,
   Modal,
@@ -13,7 +12,10 @@ import {
   spacing,
   SpinLoader,
   PngIcon,
+  css,
+  useDiagram,
 } from '@mongodb-js/compass-components';
+import type { DiagramInstance } from '@mongodb-js/compass-components';
 import type { ExportDiagramFormat } from '../store/export-diagram';
 import {
   closeExportModal,
@@ -22,8 +24,6 @@ import {
 } from '../store/export-diagram';
 import { connect } from 'react-redux';
 import type { DataModelingState } from '../store/reducer';
-import { useDiagram } from '@mongodb-js/diagramming';
-import type { DiagramInstance } from '@mongodb-js/diagramming';
 
 const modelBodyStyles = css({
   paddingTop: spacing[600],

packages/compass-data-modeling/src/services/export-diagram.tsx

@@ -1,15 +1,16 @@
 import React from 'react';
 import {
-  getNodesBounds,
-  getViewportForBounds,
   DiagramProvider,
   Diagram,
-} from '@mongodb-js/diagramming';
-import type { DiagramInstance } from '@mongodb-js/diagramming';
+  getNodesBounds,
+  getViewportForBounds,
+  rafraf,
+  spacing,
+} from '@mongodb-js/compass-components';
+import type { DiagramInstance } from '@mongodb-js/compass-components';
 import type { StaticModel } from './data-model-storage';
 import ReactDOM from 'react-dom';
 import { toPng } from 'html-to-image';
-import { rafraf, spacing } from '@mongodb-js/compass-components';
 import { raceWithAbort } from '@mongodb-js/compass-utils';
 
 function moveSvgDefsToViewportElement(

packages/compass-data-modeling/src/store/analysis-process.ts

@@ -6,7 +6,7 @@ import { getCurrentDiagramFromState } from './diagram';
 import type { Document } from 'bson';
 import type { AggregationCursor } from 'mongodb';
 import type { Relationship } from '../services/data-model-storage';
-import { applyLayout } from '@mongodb-js/diagramming';
+import { applyLayout } from '@mongodb-js/compass-components';
 import { collectionToDiagramNode } from '../utils/nodes-and-edges';
 
 export type AnalysisProcessState = {

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

@@ -5,7 +5,7 @@ import { exportToJson, exportToPng } from '../services/export-diagram';
 import { selectCurrentModelFromState } from './diagram';
 import { openToast } from '@mongodb-js/compass-components';
 import { isCancelError } from '@mongodb-js/compass-utils';
-import type { DiagramInstance } from '@mongodb-js/diagramming';
+import type { DiagramInstance } from '@mongodb-js/compass-components';
 import { downloadDiagram } from '../services/open-and-download-diagram';
 
 export type ExportDiagramFormat = 'png' | 'json' | 'diagram';