feat: diagram edit handling COMPASS-9312

Author: paula-stacho

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

@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import { connect } from 'react-redux';
 import type { DataModelingState } from '../store/reducer';
 import { CodemirrorMultilineEditor } from '@mongodb-js/compass-editor';
@@ -19,6 +19,9 @@ import {
   spacing,
   Button,
   palette,
+  SplitButton,
+  RadioBoxGroup,
+  RadioBox,
 } from '@mongodb-js/compass-components';
 import { cancelAnalysis, retryAnalysis } from '../store/analysis-process';
 
@@ -73,7 +76,7 @@ const modelPreviewStyles = css({
 });
 
 const editorContainerStyles = css({
-  height: 160 + 34 + 16,
+  height: 46 + 160 + 34 + 16,
   display: 'flex',
   flexDirection: 'column',
   gap: 8,
@@ -86,6 +89,15 @@ const editorContainerApplyButtonStyles = css({
   alignSelf: 'flex-end',
 });
 
+const editorContainerPlaceholderButtonStyles = css({
+  paddingLeft: 8,
+  paddingRight: 8,
+  alignSelf: 'flex-start',
+  display: 'flex',
+  gap: spacing[200],
+  paddingTop: spacing[200],
+});
+
 const DiagramEditor: React.FunctionComponent<{
   step: DataModelingState['step'];
   hasUndo: boolean;
@@ -118,6 +130,44 @@ const DiagramEditor: React.FunctionComponent<{
     }
   }, [applyInput]);
 
+  const applyPlaceholder = useCallback(
+    (type: 'AddRelationship' | 'RemoveRelationship') => () => {
+      let placeholder = {};
+      switch (type) {
+        case 'AddRelationship':
+          placeholder = {
+            type: 'AddRelationship',
+            id: 'relationship1',
+            relationship: [
+              {
+                ns: 'db.sourceCollection',
+                cardinality: 1,
+                fields: ['field1'],
+              },
+              {
+                ns: 'db.targetCollection',
+                cardinality: 1,
+                fields: ['field2'],
+              },
+            ],
+            isInferred: false,
+          };
+          break;
+        case 'RemoveRelationship':
+          placeholder = {
+            type: 'RemoveRelationship',
+            id: 'relationship1',
+            relationshipId: 'relationship1',
+          };
+          break;
+        default:
+          throw new Error(`Unknown placeholder ${placeholder}`);
+      }
+      setApplyInput(JSON.stringify(placeholder, null, 2));
+    },
+    [setApplyInput]
+  );
+
   const modelStr = useMemo(() => {
     return JSON.stringify(model, null, 2);
   }, [model]);
@@ -172,6 +222,20 @@ const DiagramEditor: React.FunctionComponent<{
           ></CodemirrorMultilineEditor>
         </div>
         <div className={editorContainerStyles} data-testid="apply-editor">
+          <div className={editorContainerPlaceholderButtonStyles}>
+            <Button
+              onClick={applyPlaceholder('AddRelationship')}
+              data-testid="placeholder-addrelationship-button"
+            >
+              Add relationship
+            </Button>
+            <Button
+              onClick={applyPlaceholder('RemoveRelationship')}
+              data-testid="placeholder-removerelationship-button"
+            >
+              Remove relationship
+            </Button>
+          </div>
           <div>
             <CodemirrorMultilineEditor
               language="json"

packages/compass-data-modeling/src/services/data-model-storage.ts

@@ -48,6 +48,7 @@ export const EditSchema = z.discriminatedUnion('type', [
     type: z.literal('RemoveRelationship'),
     id: z.string(),
     timestamp: z.string(),
+    relationshipId: z.string(),
   }),
 ]);
 

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

@@ -128,7 +128,6 @@ export const diagramReducer: Reducer<DiagramState> = (
     };
   }
   if (isAction(action, DiagramActionTypes.APPLY_EDIT)) {
-    console.log('Applying edit', action.edit);
     return {
       ...state,
       edits: {
@@ -187,7 +186,14 @@ export function applyEdit(
   edit: Edit
 ): DataModelingThunkAction<void, ApplyEditAction> {
   return (dispatch, getState, { dataModelStorage }) => {
-    dispatch({ type: DiagramActionTypes.APPLY_EDIT, edit });
+    dispatch({
+      type: DiagramActionTypes.APPLY_EDIT,
+      edit: {
+        ...edit,
+        id: new UUID().toString(),
+        timestamp: new Date().toISOString(),
+      },
+    });
     void dataModelStorage.save(getCurrentDiagramFromState(getState()));
   };
 }
@@ -246,24 +252,57 @@ function _applyEdit(edit: Edit, model?: StaticModel): StaticModel {
   if (!model) {
     throw new Error('Editing a model that has not been initialized');
   }
-  if (edit.type === 'AddRelationship') {
-    return {
-      ...model,
-      relationships: [...model.relationships, edit.relationship],
-    };
+  switch (edit.type) {
+    case 'AddRelationship': {
+      return {
+        ...model,
+        relationships: [...model.relationships, edit.relationship],
+      };
+    }
+    case 'RemoveRelationship': {
+      return {
+        ...model,
+        relationships: model.relationships.filter(
+          (relationship) => relationship.id !== edit.relationshipId
+        ),
+      };
+    }
+    default: {
+      return model;
+    }
   }
-  return model;
 }
 
 export function getCurrentModel(
-  diagram: MongoDBDataModelDescription
+  description: MongoDBDataModelDescription
 ): StaticModel {
-  let model: StaticModel;
-  for (const edit of diagram.edits) {
-    console.log('Applying edit', edit, diagram);
-    model = _applyEdit(edit, model);
+  // Get the last 'SetModel' edit.
+  const reversedSetModelEditIndex = description.edits
+    .slice()
+    .reverse()
+    .findIndex((edit) => edit.type === 'SetModel');
+  if (reversedSetModelEditIndex === -1) {
+    throw new Error('No diagram model found.');
+  }
+
+  // Calculate the actual index in the original array.
+  const lastSetModelEditIndex =
+    description.edits.length - 1 - reversedSetModelEditIndex;
+
+  // Start with the StaticModel from the last `SetModel` edit.
+  if (description.edits[lastSetModelEditIndex].type !== 'SetModel') {
+    throw new Error('Something went wrong, last edit is not a SetModel');
   }
-  return model;
+  let currentModel: StaticModel =
+    description.edits[lastSetModelEditIndex].model;
+
+  // Apply all subsequent edits after the last `SetModel` edit.
+  for (let i = lastSetModelEditIndex + 1; i < description.edits.length; i++) {
+    const edit = description.edits[i];
+    currentModel = _applyEdit(edit, currentModel);
+  }
+
+  return currentModel;
 }
 
 export function getCurrentDiagramFromState(