alignments (#633)

src/components/code-snippet/code-editor.ts

@@ -1,2 +1,3 @@
 import './config.ts';
 export { Editor } from '@monaco-editor/react';
+export { DiffEditor } from '@monaco-editor/react';

src/components/code-snippet/code-snippet.tsx

@@ -18,6 +18,12 @@ export const Editor = lazy(() =>
     }))
 );
 
+export const DiffEditor = lazy(() =>
+    import('./code-editor').then((module) => ({
+        default: module.DiffEditor,
+    }))
+);
+
 type EditorType = typeof Editor;
 
 export interface CodeSnippetProps {

src/context/diff-context/diff-check/diff-check.ts

@@ -117,7 +117,7 @@ function compareTables({
                     object: 'table',
                     type: 'changed',
                     tableId: oldTable.id,
-                    attributes: 'name',
+                    attribute: 'name',
                     newValue: newTable.name,
                     oldValue: oldTable.name,
                 }
@@ -126,7 +126,10 @@ function compareTables({
             changedTables.set(oldTable.id, true);
         }
 
-        if (oldTable.comments !== newTable.comments) {
+        if (
+            (oldTable.comments || newTable.comments) &&
+            oldTable.comments !== newTable.comments
+        ) {
             diffMap.set(
                 getDiffMapKey({
                     diffObject: 'table',
@@ -137,7 +140,7 @@ function compareTables({
                     object: 'table',
                     type: 'changed',
                     tableId: oldTable.id,
-                    attributes: 'comments',
+                    attribute: 'comments',
                     newValue: newTable.comments,
                     oldValue: oldTable.comments,
                 }
@@ -303,7 +306,10 @@ function compareFieldProperties({
         changedAttributes.push('nullable');
     }
 
-    if (oldField.comments !== newField.comments) {
+    if (
+        (newField.comments || oldField.comments) &&
+        oldField.comments !== newField.comments
+    ) {
         changedAttributes.push('comments');
     }
 
@@ -313,14 +319,14 @@ function compareFieldProperties({
                 getDiffMapKey({
                     diffObject: 'field',
                     objectId: oldField.id,
-                    attribute: attribute,
+                    attribute,
                 }),
                 {
                     object: 'field',
                     type: 'changed',
                     fieldId: oldField.id,
                     tableId,
-                    attributes: attribute,
+                    attribute,
                     oldValue: oldField[attribute],
                     newValue: newField[attribute],
                 }

src/context/diff-context/diff-context.tsx

@@ -14,19 +14,22 @@ export type DiffEventBase<T extends DiffEventType, D> = {
     data: D;
 };
 
+export type DiffCalculatedData = {
+    tablesAdded: DBTable[];
+    fieldsAdded: Map<string, DBField[]>;
+    relationshipsAdded: DBRelationship[];
+};
+
 export type DiffCalculatedEvent = DiffEventBase<
     'diff_calculated',
-    {
-        tablesAdded: DBTable[];
-        fieldsAdded: Map<string, DBField[]>;
-        relationshipsAdded: DBRelationship[];
-    }
+    DiffCalculatedData
 >;
 
 export type DiffEvent = DiffCalculatedEvent;
 
 export interface DiffContext {
     newDiagram: Diagram | null;
+    originalDiagram: Diagram | null;
     diffMap: DiffMap;
     hasDiff: boolean;
 

src/context/diff-context/diff-provider.tsx

@@ -1,5 +1,9 @@
 import React, { useCallback } from 'react';
-import type { DiffContext, DiffEvent } from './diff-context';
+import type {
+    DiffCalculatedData,
+    DiffContext,
+    DiffEvent,
+} from './diff-context';
 import { diffContext } from './diff-context';
 import type { ChartDBDiff, DiffMap } from './types';
 import { generateDiff, getDiffMapKey } from './diff-check/diff-check';
@@ -13,6 +17,8 @@ export const DiffProvider: React.FC<React.PropsWithChildren> = ({
     children,
 }) => {
     const [newDiagram, setNewDiagram] = React.useState<Diagram | null>(null);
+    const [originalDiagram, setOriginalDiagram] =
+        React.useState<Diagram | null>(null);
     const [diffMap, setDiffMap] = React.useState<DiffMap>(
         new Map<string, ChartDBDiff>()
     );
@@ -81,6 +87,41 @@ export const DiffProvider: React.FC<React.PropsWithChildren> = ({
         []
     );
 
+    const generateDiffCalculatedData = useCallback(
+        ({
+            newDiagram,
+            diffMap,
+        }: {
+            newDiagram: Diagram;
+            diffMap: DiffMap;
+        }): DiffCalculatedData => {
+            return {
+                tablesAdded:
+                    newDiagram?.tables?.filter((table) => {
+                        const tableKey = getDiffMapKey({
+                            diffObject: 'table',
+                            objectId: table.id,
+                        });
+
+                        return (
+                            diffMap.has(tableKey) &&
+                            diffMap.get(tableKey)?.type === 'added'
+                        );
+                    }) ?? [],
+
+                fieldsAdded: generateNewFieldsMap({
+                    diffMap: diffMap,
+                    newDiagram: newDiagram,
+                }),
+                relationshipsAdded: findNewRelationships({
+                    diffMap: diffMap,
+                    newDiagram: newDiagram,
+                }),
+            };
+        },
+        [findNewRelationships, generateNewFieldsMap]
+    );
+
     const calculateDiff: DiffContext['calculateDiff'] = useCallback(
         ({ diagram, newDiagram: newDiagramArg }) => {
             const {
@@ -93,35 +134,17 @@ export const DiffProvider: React.FC<React.PropsWithChildren> = ({
             setTablesChanged(newChangedTables);
             setFieldsChanged(newChangedFields);
             setNewDiagram(newDiagramArg);
+            setOriginalDiagram(diagram);
 
             events.emit({
                 action: 'diff_calculated',
-                data: {
-                    tablesAdded:
-                        newDiagramArg?.tables?.filter((table) => {
-                            const tableKey = getDiffMapKey({
-                                diffObject: 'table',
-                                objectId: table.id,
-                            });
-
-                            return (
-                                newDiffs.has(tableKey) &&
-                                newDiffs.get(tableKey)?.type === 'added'
-                            );
-                        }) ?? [],
-
-                    fieldsAdded: generateNewFieldsMap({
-                        diffMap: newDiffs,
-                        newDiagram: newDiagramArg,
-                    }),
-                    relationshipsAdded: findNewRelationships({
-                        diffMap: newDiffs,
-                        newDiagram: newDiagramArg,
-                    }),
-                },
+                data: generateDiffCalculatedData({
+                    diffMap: newDiffs,
+                    newDiagram: newDiagramArg,
+                }),
             });
         },
-        [setDiffMap, events, generateNewFieldsMap, findNewRelationships]
+        [setDiffMap, events, generateDiffCalculatedData]
     );
 
     const getTableNewName = useCallback<DiffContext['getTableNewName']>(
@@ -296,6 +319,7 @@ export const DiffProvider: React.FC<React.PropsWithChildren> = ({
         <diffContext.Provider
             value={{
                 newDiagram,
+                originalDiagram,
                 diffMap,
                 hasDiff: diffMap.size > 0,
 

src/context/diff-context/types.ts

@@ -6,7 +6,7 @@ export interface TableDiff {
     object: 'table';
     type: 'added' | 'removed' | 'changed';
     tableId: string;
-    attributes?: TableDiffAttribute;
+    attribute?: TableDiffAttribute;
     oldValue?: string;
     newValue?: string;
 }
@@ -30,7 +30,7 @@ export interface FieldDiff {
     type: 'added' | 'removed' | 'changed';
     fieldId: string;
     tableId: string;
-    attributes?: FieldDiffAttribute;
+    attribute?: FieldDiffAttribute;
     oldValue?: string | boolean | DataType;
     newValue?: string | boolean | DataType;
 }

src/pages/editor-page/canvas/relationship-edge.tsx

@@ -182,8 +182,10 @@ export const RelationshipEdge: React.FC<EdgeProps<RelationshipEdgeType>> = ({
                     'react-flow__edge-path',
                     `!stroke-2 ${selected ? '!stroke-pink-600' : '!stroke-slate-400'}`,
                     {
-                        '!stroke-green-500': isDiffNewRelationship,
-                        '!stroke-red-500': isDiffRelationshipRemoved,
+                        '!stroke-green-500 !stroke-[3px]':
+                            isDiffNewRelationship,
+                        '!stroke-red-500 !stroke-[3px]':
+                            isDiffRelationshipRemoved,
                     },
                 ])}
                 onClick={(e) => {