remove relationship

Author: mabaasit

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';
 type DataModelingPluginInitialProps = {
   showList: boolean;
 };
@@ -17,7 +17,9 @@ const DataModeling: React.FunctionComponent<DataModelingPluginInitialProps> = ({
       {showList ? (
         <SavedDiagramsList></SavedDiagramsList>
       ) : (
-        <DiagramEditor></DiagramEditor>
+        <DiagramProvider>
+          <DiagramEditor />
+        </DiagramProvider>
       )}
       <NewDiagramFormModal></NewDiagramFormModal>
     </>

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

@@ -19,13 +19,14 @@ import {
   Button,
   palette,
   ErrorSummary,
+  useDarkMode,
 } from '@mongodb-js/compass-components';
 import { CodemirrorMultilineEditor } from '@mongodb-js/compass-editor';
 import { cancelAnalysis, retryAnalysis } from '../store/analysis-process';
 import {
   Diagram,
-  DiagramProvider,
   type NodeProps,
+  type EdgeProps,
 } from '@mongodb-js/diagramming';
 import type { Edit, StaticModel } from '../services/data-model-storage';
 import { UUID } from 'bson';
@@ -88,13 +89,12 @@ const editorContainerStyles = css({
 });
 
 const editorContainerApplyContainerStyles = css({
-  paddingLeft: 8,
-  paddingRight: 8,
+  padding: spacing[200],
   justifyContent: 'flex-end',
   gap: spacing[200],
   display: 'flex',
   width: '100%',
-  height: spacing[100],
+  alignItems: 'center',
 });
 
 const editorContainerPlaceholderButtonStyles = css({
@@ -107,6 +107,7 @@ const editorContainerPlaceholderButtonStyles = css({
 });
 
 const DiagramEditor: React.FunctionComponent<{
+  diagramLabel: string;
   step: DataModelingState['step'];
   hasUndo: boolean;
   onUndoClick: () => void;
@@ -118,6 +119,7 @@ const DiagramEditor: React.FunctionComponent<{
   onCancelClick: () => void;
   onApplyClick: (edit: Omit<Edit, 'id' | 'timestamp'>) => void;
 }> = ({
+  diagramLabel,
   step,
   hasUndo,
   onUndoClick,
@@ -129,6 +131,7 @@ const DiagramEditor: React.FunctionComponent<{
   onCancelClick,
   onApplyClick,
 }) => {
+  const isDarkMode = useDarkMode();
   const [applyInput, setApplyInput] = useState('{}');
   const isEditValid = useMemo(() => {
     try {
@@ -176,9 +179,47 @@ const DiagramEditor: React.FunctionComponent<{
       setApplyInput(JSON.stringify(placeholder, null, 2));
     };
 
-  const modelStr = useMemo(() => {
-    return JSON.stringify(model, null, 2);
-  }, [model]);
+  const edges = useMemo(() => {
+    return (model?.relationships ?? []).map((relationship): EdgeProps => {
+      const [source, target] = relationship.relationship;
+      return {
+        id: relationship.id,
+        source: source.ns,
+        target: target.ns,
+        markerStart: 'one',
+        markerEnd: 'many',
+      };
+    });
+  }, [model?.relationships]);
+
+  const nodes = useMemo(() => {
+    return (model?.collections ?? []).map(
+      (coll): NodeProps => ({
+        id: coll.ns,
+        type: 'collection',
+        position: {
+          x: Math.floor(Math.random() * 1000),
+          y: Math.floor(Math.random() * 1000),
+        },
+        title: coll.ns,
+        fields: Object.entries(coll.jsonSchema.properties ?? {}).map(
+          ([name, field]) => {
+            const type =
+              field.bsonType === undefined
+                ? 'Unknown'
+                : typeof field.bsonType === 'string'
+                ? field.bsonType
+                : field.bsonType[0];
+            return {
+              name: name,
+              type,
+              glyphs: type === 'objectId' ? ['key'] : [],
+            };
+          }
+        ),
+      })
+    );
+  }, [model?.collections]);
 
   let content;
 
@@ -222,12 +263,24 @@ const DiagramEditor: React.FunctionComponent<{
         data-testid="diagram-editor-container"
       >
         <div className={modelPreviewStyles} data-testid="model-preview">
-          <CodemirrorMultilineEditor
-            language="json"
-            text={modelStr}
-            readOnly
-            initialJSONFoldAll={false}
-          ></CodemirrorMultilineEditor>
+          <Diagram
+            isDarkMode={isDarkMode}
+            title={diagramLabel}
+            edges={edges}
+            nodes={nodes}
+            onEdgeClick={(evt, edge) => {
+              setApplyInput(
+                JSON.stringify(
+                  {
+                    type: 'RemoveRelationship',
+                    relationshipId: edge.id,
+                  },
+                  null,
+                  2
+                )
+              );
+            }}
+          />
         </div>
         <div className={editorContainerStyles} data-testid="apply-editor">
           <div className={editorContainerPlaceholderButtonStyles}>
@@ -296,7 +349,7 @@ const DiagramEditor: React.FunctionComponent<{
         );
       }}
     >
-      <DiagramProvider>{content}</DiagramProvider>
+      {content}
     </WorkspaceContainer>
   );
 };
@@ -312,6 +365,7 @@ export default connect(
         ? selectCurrentModel(getCurrentDiagramFromState(state))
         : null,
       editErrors: diagram?.editErrors,
+      diagramLabel: diagram?.name || 'Schema Preview',
     };
   },
   {