feat(data-modeling): open diagram COMPASS-9546 #7127

mabaasit · 2025-07-21T14:52:22Z

In this PR, I added an option to open (import) a data modeling diagram.

Preview

Screen.Recording.2025-07-21.at.17.19.16.mov

Description

Checklist

New tests and/or benchmarks are included
Documentation is changed or added
If this change updates the UI, screenshots/videos are added and a design review is requested
I have signed the MongoDB Contributor License Agreement (https://www.mongodb.com/legal/contributor-agreement)

Motivation and Context

Bugfix
New feature
Dependency update
Misc

Open Questions

Dependents

Types of changes

Backport Needed
Patch (non-breaking change which fixes an issue)
Minor (non-breaking change which adds functionality)
Major (fix or feature that would cause existing functionality to change)

…PASS-9546-open-diagram

Copilot

Pull Request Overview

This PR implements functionality to open diagram files in Compass Data Modeling by adding file import capabilities and comprehensive test coverage. The feature allows users to select a local .compass file and load it as a new diagram with automatic name deduplication.

Adds a new "Open Diagram" button with file selection functionality across the data modeling interface
Implements file parsing, validation, and diagram loading with proper error handling
Extends existing e2e tests to verify the complete save/open workflow

Reviewed Changes

Copilot reviewed 12 out of 12 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
`packages/compass-e2e-tests/tests/data-modeling-tab.test.ts`	Extends test to verify diagram opening functionality after download
`packages/compass-e2e-tests/helpers/selectors.ts`	Adds selectors for file input and updates diagram list item selector
`packages/compass-data-modeling/src/store/diagram.ts`	Implements openDiagramFromFile action with file parsing and storage
`packages/compass-data-modeling/src/services/open-and-download-diagram.ts`	Adds file parsing and diagram name generation utilities
`packages/compass-data-modeling/src/services/open-and-download-diagram.spec.ts`	Comprehensive tests for file parsing and name generation functions
`packages/compass-data-modeling/src/services/data-model-storage.ts`	Refactors schema validation for reuse in file parsing
`packages/compass-data-modeling/src/components/saved-diagrams-list.tsx`	Integrates import functionality into diagram list UI
`packages/compass-data-modeling/src/components/open-diagram-button.tsx`	New reusable component for file selection
`packages/compass-data-modeling/src/components/diagram-list-toolbar.tsx`	Adds import button to toolbar
`packages/compass-components/src/index.ts`	Exports new FileSelector component
`packages/compass-components/src/components/file-selector.tsx`	New generic file selection component
`configs/mocha-config-compass/register/jsdom-extra-mocks-register.js`	Adds File and Blob mocks for testing

Copilot · 2025-07-21T14:52:49Z

packages/compass-data-modeling/src/services/open-and-download-diagram.ts

+        const parsedContent = JSON.parse(content);
+
+        if (
+          parsedContent.version !== kCurrentVersion &&


The logical operator should be OR (||) instead of AND (&&). The current condition will only reject files if BOTH version and type are incorrect, but it should reject if EITHER is incorrect.

Suggested change

parsedContent.version !== kCurrentVersion &&

parsedContent.version !== kCurrentVersion ||

nice catch!

…PASS-9546-open-diagram

gribnoysup · 2025-07-22T09:18:09Z

packages/compass-components/src/components/file-selector.tsx

+  onSelect: (files: File[]) => void;
+};
+
+export function FileSelector({


Not necessarily completely your problem to solve, but the fact that we now expose two file inputs from compass-components is very confusing. In the spirit of trying to make code universal, maybe we should rename the other one to make it clear that it's electron only and mark it as deprecated with a JSDoc annotation?

Renaming it makes sense, but why deprecation?

Universal code should be the default almost always, everything else should be an exception, we call this out often in a lot of places, but something that highlights component as "do not use unless you're really truly sure about it" seems to be a useful mechanism, @deprecated is just a tool to achieve that if people just pick up components automatically based on import suggestions

done in ad151ea. let me know if it looks good, especially the name :)

gribnoysup · 2025-07-22T09:51:55Z

packages/compass-data-modeling/src/services/open-and-download-diagram.ts

+          parsedContent.version !== kCurrentVersion ||
+          parsedContent.type !== kFileTypeDescription
+        ) {
+          return reject(new Error('Unsupported diagram file format'));


Nit: I think makes more sense to just throw here so that the same error message adjustments can be applied to all errors that parsing the file contents can produce

Suggested change

return reject(new Error('Unsupported diagram file format'));

throw new Error('Unsupported diagram file format');

cleaned in fc64ffb

gribnoysup · 2025-07-22T09:52:35Z

packages/compass-data-modeling/src/services/open-and-download-diagram.ts

+        const { name, edits } = parsedContent;
+
+        if (!name || !edits || typeof edits !== 'string') {
+          return reject(new Error('Diagram file is missing required fields'));


Same as above

Suggested change

return reject(new Error('Diagram file is missing required fields'));

throw new Error('Diagram file is missing required fields')

gribnoysup · 2025-07-22T09:55:20Z

packages/compass-data-modeling/test/fixtures/flights-diagram.json

Whoops, have I added the same fixture file you already had there? Sorry!

gribnoysup

Two small notes, otherwise LGTM

paula-stacho · 2025-07-22T11:29:23Z

packages/compass-data-modeling/src/services/open-and-download-diagram.ts

+  expectedName: string
+): string {
+  let name = expectedName;
+  let index = 1;


Instead of starting with 1 always, we can check if there's already an index, so that re-importing diagram (1) doesn't resolve in diagram (1) (1). Not a big deal, but this would be consistent with the connection copies naming logic.

fixed in 88744b5

paula-stacho · 2025-07-22T13:31:17Z

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

+      dispatch(openDiagram(diagram));
+      void dataModelStorage.save(diagram);
+    } catch (error) {
+      openToast('data-modeling-file-read-error', {


nit: we could add filename to the id and maybe to the title as well

although with the current flow it's unlikely someone would not notice failed imports immediately, as we open the diagram after import. but this could change later.

Chances of ending up in error block will be mostly due to a rejection when reading file and in such cases, we will not have the name property yet available.

gribnoysup · 2025-07-23T08:06:25Z

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

@@ -242,6 +254,27 @@ const DiagramEditor: React.FunctionComponent<{
    });
  }, [model?.relationships, selectedItems]);

+  const selectedFields = useMemo<Record<string, string[]>>(() => {


Was this pushed by accident?

Yes, I forgot which branch I was on yesterday :D

Good thing Basit didn't accidentally merge this 🙈

gribnoysup · 2025-07-23T11:22:08Z

packages/compass-components/src/components/file-picker-dialog.tsx

+ * to be used in environments like Electron where you have access to nodes fs module
+ * to read/write files.
+ *
+ * For browser environments, you should use the `FileSelector` component instead.


I just really want to make this point clear, browser environment shouldn't be an exception, it should be a default

Suggested change

* For browser environments, you should use the `FileSelector` component instead.

* Always use `FileSelector` component, only use `FilePickerDialog` if you absolutely know what you're doing

…b-js/compass into COMPASS-9546-open-diagram

mabaasit added 7 commits July 16, 2025 14:09

add import file button

8db037e

import diagram

26ac7b8

Merge branch 'main' of https://github.com/mongodb-js/compass into COM…

b285178

…PASS-9546-open-diagram

open diagram back

d76618c

e2e tests

bd331ea

clean up

8a87bcc

make ts happy

f64c626

Copilot AI review requested due to automatic review settings July 21, 2025 14:52

mabaasit requested a review from a team as a code owner July 21, 2025 14:52

Copilot AI reviewed Jul 21, 2025

View reviewed changes

mabaasit added 2 commits July 21, 2025 17:05

bot review

92ba8c2

Merge branch 'main' of https://github.com/mongodb-js/compass into COM…

79c97b1

…PASS-9546-open-diagram

github-actions bot added the feat label Jul 21, 2025

use existing diagram

bea3e3d

mabaasit added feature flagged PRs labeled with this label will not be included in the release notes of the next release no release notes Fix or feature not for release notes labels Jul 21, 2025

change text to import

9db4b8e

gribnoysup reviewed Jul 22, 2025

View reviewed changes

gribnoysup approved these changes Jul 22, 2025

View reviewed changes

paula-stacho reviewed Jul 22, 2025

View reviewed changes

mabaasit added 2 commits July 22, 2025 13:33

cleaner error handling

fc64ffb

better names for import

88744b5

paula-stacho reviewed Jul 22, 2025

View reviewed changes

paula-stacho approved these changes Jul 22, 2025

View reviewed changes

gribnoysup reviewed Jul 23, 2025

View reviewed changes

rename filinput

ad151ea

mabaasit force-pushed the COMPASS-9546-open-diagram branch from 2234438 to ad151ea Compare July 23, 2025 08:19

Merge branch 'main' into COMPASS-9546-open-diagram

7e6a8a4

gribnoysup reviewed Jul 23, 2025

View reviewed changes

mabaasit added 2 commits July 23, 2025 13:30

rephrase

f658ed2

Merge branch 'COMPASS-9546-open-diagram' of https://github.com/mongod…

dfd34ad

…b-js/compass into COMPASS-9546-open-diagram

gribnoysup approved these changes Jul 23, 2025

View reviewed changes

mabaasit merged commit ef66a03 into main Jul 23, 2025
28 of 29 checks passed

mabaasit deleted the COMPASS-9546-open-diagram branch July 23, 2025 12:52

	parsedContent.version !== kCurrentVersion &&
	parsedContent.version !== kCurrentVersion \|\|

	return reject(new Error('Unsupported diagram file format'));
	throw new Error('Unsupported diagram file format');

	return reject(new Error('Diagram file is missing required fields'));
	throw new Error('Diagram file is missing required fields')

	* For browser environments, you should use the `FileSelector` component instead.
	* Always use `FileSelector` component, only use `FilePickerDialog` if you absolutely know what you're doing

feat(data-modeling): open diagram COMPASS-9546 #7127

feat(data-modeling): open diagram COMPASS-9546 #7127

Uh oh!

Conversation

mabaasit commented Jul 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Checklist

Motivation and Context

Open Questions

Dependents

Types of changes

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Jul 21, 2025

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

gribnoysup Jul 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

gribnoysup left a comment

Choose a reason for hiding this comment

Uh oh!

paula-stacho Jul 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

paula-stacho Jul 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

mabaasit commented Jul 21, 2025 •

edited

Loading

gribnoysup Jul 22, 2025 •

edited

Loading

paula-stacho Jul 22, 2025 •

edited

Loading

paula-stacho Jul 23, 2025 •

edited

Loading