feat(data-modeling): node selection and relationship editing store and actions COMPASS-9476 #7118

gribnoysup · 2025-07-17T10:13:35Z

This patch adds all required item selection state and actions, including relationship editing, UI is just a rough functional version to validate that it works, this is not in scope for this this ticket and will be addressed in the followups.

Kapture.2025-07-17.at.12.09.05.mp4

I'm adding some tests, but this is ready foe review more or less, store changes are as always the most interesting part here, UI will be changed later

COMPASS-9476

…d actions

gribnoysup · 2025-07-17T10:14:52Z

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

@@ -24,6 +27,7 @@ export type DiagramState =
        next: Edit[][];
      };
      editErrors?: string[];
+      selectedItems: { type: 'collection' | 'relationship'; id: string } | null;


The root state here is what is actually being selected by the user, sidebar is just driven by this value

gribnoysup · 2025-07-17T10:15:54Z

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

+    if (
+      sidePanel.viewType === 'relationship-editing' &&
+      sidePanel.relationshipFormState.modified
+    ) {
+      const allowSelect = await showConfirmation({
+        title: 'You have unsaved chages',
+        description:
+          'You are currently editing a relationship. Are you sure you want to select a different collection?',
+      });
+      if (!allowSelect) {
+        return;
+      }
+    }


I'm not sure this behavior is needed, but when playing around with the feature it seemed like a good idea to add it, otherwise it's easy to lose your form state by clicking around (not sure many people will do this though)

gribnoysup · 2025-07-17T10:18:15Z

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

    const { result: isValid, errors } = validateEdit(edit);
    if (!isValid) {
      dispatch({
        type: DiagramActionTypes.APPLY_EDIT_FAILED,
        errors,
      });
-      return;
+      return isValid;


Returning the value from action so that other actions using it can adjust their behavior if needed, otherwise there's no indication that the action failed. There is currently no validation in the form and strictly speaking we are fully in control there so we can't actually fail this validation, but it might be useful in the future

gribnoysup · 2025-07-18T08:01:26Z

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

+            // With threshold too low clicking sometimes gets confused with
+            // dragging
+            // @ts-expect-error expose this prop from the component
+            nodeDragThreshold={3}
+            // @ts-expect-error expose this prop from the component
+            onNodeClick={(_evt, node) => {
+              if (node.type !== 'collection') {
+                return;
+              }
+              onCollectionSelect(node.id);
+            }}


Note to self: don't forget to open tickets for those changes in diagramming package

paula-stacho · 2025-07-18T12:15:50Z

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

+      return r.id === rId;
+    });
+
+    if (relationship) {


Can we add something for the other case (throw or log)?

paula-stacho · 2025-07-18T13:37:06Z

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

      ...state,
      edits: {
        prev: [...state.edits.prev, state.edits.current],
-        current: [...state.edits.current, action.edit],
+        current: [...state.edits.current, action.edit] as [Edit, ...Edit[]],


ah.. that's unfortunate that TS doesn't understand this

Yeah 😞 It's like obviously not empty even if edits.current would be, but alas. I decided to assert instead of adding an assertion method, but tell me if you'd prefer that

paula-stacho · 2025-07-18T13:52:46Z

I think the selection in the diagram and side drawer should go both ways - e.g. Entering a relationship mode will highlight the relationship and the fields in the diagram (same will go for the field level later on). I think Ben had envisioned it like this as well but I can double check with him today.

gribnoysup · 2025-07-18T14:47:22Z

Yep, I think I have a better picture after the meeting today and will update the code accordingly, should actually make the state even a bit simpler I think?

mabaasit · 2025-07-21T07:56:54Z

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

+  }
+
+  it('should not render if no items are selected', function () {
+    renderDrawer();


no assertions here?

Totally forgot, added something!

… directly

gribnoysup · 2025-07-21T11:40:50Z

@mabaasit @paula-stacho I updated PR based on the discussion we had on Friday, please take a look!

Things I'm leaving for follow-ups to allow to merge this and allow working on other things in parallel.

Add name to relationship schema, add name editing
Annotate schema types to clarify a few expectations for the field values
Filter out "unfinished" relationships from export (I'm actually thinking that maybe it's even okay not to do? Diagramming package handles their rendering just fine and it's probably okay to have them in export, just doesn't sound like something we need to spend much time handling)

gribnoysup · 2025-07-21T11:43:15Z

packages/compass-data-modeling/src/components/relationship-drawer-content.tsx

+  foreignCardinality: string;
+};
+
+const FIELD_DIVIDER = '~~##$$##~~';


There's always a chance someone will have a field like that, but that's probably rare enough?

paula-stacho · 2025-07-21T12:14:17Z

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

+  );
+}
+
+export const selectRelationshipForCurrentModel = memoize(


I keep seeing the same relationship in the drawer. I'm pretty sure it's because, weirdly, lodash's memoize only uses the first argument as cache key by default! https://lodash.info/doc/memoize.
We can either provide our own cache function to memoize, or maybe look into reselect instead? https://redux.js.org/usage/deriving-data-selectors#writing-memoized-selectors-with-reselect.

Ah, whoops, that's on me for checking on a diagram with only one relationship 😆 I'll fix and add a test, good catch

Updated in fad816b, compiling a cache key there is probably pricier than just doing filtering every time, so I just dropped the memo part there

paula-stacho · 2025-07-21T12:41:24Z

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

        markerStart: source.cardinality === 1 ? 'one' : 'many',
        markerEnd: target.cardinality === 1 ? 'one' : 'many',
+        selected: selectedItem === relationship.id,


I know the odds are slim but should we check for the type as well?

Updated in a2967fd

paula-stacho · 2025-07-21T12:46:45Z

I still find it kinda weird that there's no option to go back, but we can add it later.

gribnoysup · 2025-07-21T12:51:09Z

If we ever need it, this would basically be just adding a history to the selectedItem state, so easy enough if we decided to do that, but FWIW none of the tools that have similar context sidebars (I'm mostly familiar with CAD stuff) have navigation like that in drawers

paula-stacho

neat, thank you! 🎉

feat(data-modeling): node selection and relationship editing store an…

0eaeb31

…d actions

gribnoysup requested a review from a team as a code owner July 17, 2025 10:13

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

gribnoysup commented Jul 17, 2025

View reviewed changes

gribnoysup changed the title ~~feat(data-modeling): node selection and relationship editing store and actions~~ feat(data-modeling): node selection and relationship editing store and actions COMPASS-9476 Jul 17, 2025

gribnoysup added the feature flagged PRs labeled with this label will not be included in the release notes of the next release label Jul 17, 2025

gribnoysup added 3 commits July 17, 2025 18:10

chore(data-modeling): add tests

eb5d54d

Merge remote-tracking branch 'origin/main' into COMPASS-9476

f31e384

fix(data-modeling): un-only the test and fix types

b3b435b

gribnoysup commented Jul 18, 2025

View reviewed changes

paula-stacho reviewed Jul 18, 2025

View reviewed changes

mabaasit approved these changes Jul 21, 2025

View reviewed changes

gribnoysup added 3 commits July 21, 2025 13:24

chore(data-modeling): remove sidebar state; connect form to the edits…

4bd103f

… directly

Merge remote-tracking branch 'origin/main' into COMPASS-9476

c6e540e

chore(data-modeling): fix tests

cf8a623

gribnoysup commented Jul 21, 2025

View reviewed changes

paula-stacho reviewed Jul 21, 2025

View reviewed changes

gribnoysup added 3 commits July 21, 2025 15:10

chore(data-modeling): stricter check for diagram item selection

a2967fd

fix(data-modeling): do not use memoize for relationship filter

fad816b

chore(data-modeling): add more tests

7bc8a93

gribnoysup requested a review from paula-stacho July 21, 2025 13:12

paula-stacho approved these changes Jul 21, 2025

View reviewed changes

gribnoysup merged commit 20cb662 into main Jul 21, 2025
55 of 57 checks passed

gribnoysup deleted the COMPASS-9476 branch July 21, 2025 14:23

feat(data-modeling): node selection and relationship editing store and actions COMPASS-9476 #7118

feat(data-modeling): node selection and relationship editing store and actions COMPASS-9476 #7118

Uh oh!

Conversation

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

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

gribnoysup Jul 17, 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 commented Jul 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

gribnoysup commented Jul 18, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

gribnoysup commented Jul 21, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

paula-stacho Jul 21, 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!

paula-stacho commented Jul 21, 2025

Uh oh!

gribnoysup commented Jul 21, 2025

Uh oh!

paula-stacho left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

gribnoysup commented Jul 17, 2025 •

edited

Loading

gribnoysup Jul 17, 2025 •

edited

Loading

paula-stacho commented Jul 18, 2025 •

edited

Loading

paula-stacho Jul 21, 2025 •

edited

Loading