feat(data-modeling): allow to expand collapse all fields in the node COMPASS-9504 (#7455)

* feat(data-modeling): allow to expand collapse all fields in the node

* fix(data-modeling): correctly handle field id type variation

* chore(data-modeling): update types and add a comment

* chore(data-modeling, components): update diagramming to latest

Author: gribnoysup

package-lock.json

@@ -98,7 +98,7 @@
     "@lg-chat/suggestions": "^0.2.3",
     "@lg-chat/title-bar": "^4.0.7",
     "@mongodb-js/compass-context-menu": "^0.2.13",
-    "@mongodb-js/diagramming": "^1.8.0",
+    "@mongodb-js/diagramming": "^2.1.0",
     "@react-aria/interactions": "^3.9.1",
     "@react-aria/utils": "^3.13.1",
     "@react-aria/visually-hidden": "^3.3.1",

packages/compass-components/package.json

@@ -241,6 +241,7 @@ export {
 export type {
   EdgeProps,
   NodeProps,
+  FieldId,
   DiagramInstance,
   NodeField,
   NodeGlyph,

packages/compass-components/src/index.ts

@@ -25,6 +25,7 @@ describe('DiagramCard', () => {
                 displayPosition: [0, 0],
                 shardKey: {},
                 jsonSchema: { bsonType: 'object' },
+                isExpanded: true,
               },
             ],
             relationships: [],

packages/compass-data-modeling/src/components/diagram-card.spec.tsx

@@ -44,13 +44,15 @@ const storageItems: MongoDBDataModelDescription[] = [
               displayPosition: [50, 50],
               shardKey: {},
               jsonSchema: { bsonType: 'object' },
+              isExpanded: true,
             },
             {
               ns: 'db1.collection2',
               indexes: [],
               displayPosition: [150, 150],
               shardKey: {},
               jsonSchema: { bsonType: 'object' },
+              isExpanded: true,
             },
           ],
           relationships: [],
@@ -77,13 +79,15 @@ const storageItems: MongoDBDataModelDescription[] = [
               displayPosition: [0, 0],
               shardKey: {},
               jsonSchema: { bsonType: 'object' },
+              isExpanded: true,
             },
             {
               ns: 'db1.collection2',
               indexes: [],
               displayPosition: [0, 0],
               shardKey: {},
               jsonSchema: { bsonType: 'object' },
+              isExpanded: true,
             },
           ],
           relationships: [],

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

@@ -19,8 +19,13 @@ import {
   createNewRelationship,
   addCollection,
   selectField,
+  toggleCollectionExpanded,
 } from '../store/diagram';
-import type { EdgeProps, NodeProps } from '@mongodb-js/compass-components';
+import type {
+  EdgeProps,
+  NodeProps,
+  FieldId,
+} from '@mongodb-js/compass-components';
 import {
   Banner,
   CancelLoader,
@@ -147,6 +152,7 @@ const DiagramContent: React.FunctionComponent<{
   }) => void;
   onRelationshipDrawn: () => void;
   DiagramComponent?: typeof Diagram;
+  onToggleCollectionExpanded: (namespace: string) => void;
 }> = ({
   diagramLabel,
   database,
@@ -165,6 +171,7 @@ const DiagramContent: React.FunctionComponent<{
   onRelationshipDrawn,
   selectedItems,
   DiagramComponent = Diagram,
+  onToggleCollectionExpanded,
 }) => {
   const isDarkMode = useDarkMode();
   const diagram = useRef(useDiagram());
@@ -210,6 +217,7 @@ const DiagramContent: React.FunctionComponent<{
             : undefined,
         selected,
         isInRelationshipDrawingMode,
+        isExpanded: coll.isExpanded,
       });
     });
   }, [
@@ -292,9 +300,24 @@ const DiagramContent: React.FunctionComponent<{
   );
 
   const onFieldClick = useCallback(
-    (_evt: React.MouseEvent, { id: fieldPath, nodeId: namespace }) => {
+    (
+      _evt: React.MouseEvent,
+      { id, nodeId: namespace }: { id: FieldId; nodeId: string }
+    ) => {
+      // Diagramming package accepts both string ids and array of string ids for
+      // fields (to represent the field path better). While all current code in
+      // compass always uses array of strings as field id, some older saved
+      // diagrams might not. Also handling this explicitly is sort of needed
+      // anyway to convinve typescript that we're doing the right thing
+      const fieldPath = Array.isArray(id)
+        ? id
+        : typeof id === 'string'
+        ? [id]
+        : undefined;
+      if (!fieldPath) {
+        return;
+      }
       _evt.stopPropagation(); // TODO(COMPASS-9659): should this be handled by the diagramming package?
-      if (!Array.isArray(fieldPath)) return; // TODO(COMPASS-9659): could be avoided with generics in the diagramming package
       onFieldSelect(namespace, fieldPath);
       openDrawer(DATA_MODELING_DRAWER_ID);
     },
@@ -334,6 +357,15 @@ const DiagramContent: React.FunctionComponent<{
     [onAddFieldToObjectField]
   );
 
+  const handleNodeExpandedToggle = useCallback(
+    (evt: React.MouseEvent, nodeId: string) => {
+      evt.preventDefault();
+      evt.stopPropagation();
+      onToggleCollectionExpanded(nodeId);
+    },
+    [onToggleCollectionExpanded]
+  );
+
   const diagramProps = useMemo(
     () => ({
       isDarkMode,
@@ -348,6 +380,7 @@ const DiagramContent: React.FunctionComponent<{
       onFieldClick,
       onNodeDragStop,
       onConnect,
+      onNodeExpandToggle: handleNodeExpandedToggle,
     }),
     [
       isDarkMode,
@@ -362,6 +395,7 @@ const DiagramContent: React.FunctionComponent<{
       onFieldClick,
       onNodeDragStop,
       onConnect,
+      handleNodeExpandedToggle,
     ]
   );
 
@@ -424,6 +458,7 @@ const ConnectedDiagramContent = connect(
     onFieldSelect: selectField,
     onDiagramBackgroundClicked: selectBackground,
     onCreateNewRelationship: createNewRelationship,
+    onToggleCollectionExpanded: toggleCollectionExpanded,
   }
 )(DiagramContent);
 

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

@@ -30,6 +30,7 @@ const storageItems: MongoDBDataModelDescription[] = [
               displayPosition: [1, 1],
               shardKey: {},
               jsonSchema: { bsonType: 'object' },
+              isExpanded: true,
             },
           ],
           relationships: [],
@@ -56,6 +57,7 @@ const storageItems: MongoDBDataModelDescription[] = [
               displayPosition: [2, 2],
               shardKey: {},
               jsonSchema: { bsonType: 'object' },
+              isExpanded: true,
             },
           ],
           relationships: [],
@@ -82,6 +84,7 @@ const storageItems: MongoDBDataModelDescription[] = [
               displayPosition: [3, 3],
               shardKey: {},
               jsonSchema: { bsonType: 'object' },
+              isExpanded: true,
             },
           ],
           relationships: [],

packages/compass-data-modeling/src/components/saved-diagrams-list.spec.tsx

@@ -36,6 +36,7 @@ const CollectionSchema = z.object({
   shardKey: z.record(z.unknown()).optional(),
   displayPosition: z.tuple([z.number(), z.number()]),
   note: z.string().optional(),
+  isExpanded: z.boolean().default(false),
 });
 
 export type DataModelCollection = z.output<typeof CollectionSchema>;
@@ -132,6 +133,10 @@ const EditSchemaVariants = z.discriminatedUnion('type', [
     field: FieldPathSchema,
     jsonSchema: z.custom<MongoDBJSONSchema>(),
   }),
+  z.object({
+    type: z.literal('ToggleExpandCollection'),
+    ns: z.string(),
+  }),
 ]);
 
 export const EditSchema = z.intersection(EditSchemaBase, EditSchemaVariants);

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

@@ -281,17 +281,18 @@ export function startAnalysis(
         throw cancelController.signal.reason;
       }
 
-      const positioned = await applyLayout(
-        collections.map((coll) => {
+      const positioned = await applyLayout({
+        nodes: collections.map((coll) => {
           return collectionToBaseNodeForLayout({
             ns: coll.ns,
             jsonSchema: coll.schema,
             displayPosition: [0, 0],
+            isExpanded: false,
           });
         }),
-        [],
-        'LEFT_RIGHT'
-      );
+        edges: [],
+        direction: 'LEFT_RIGHT',
+      });
 
       dispatch({
         type: AnalysisProcessActionTypes.ANALYSIS_FINISHED,

packages/compass-data-modeling/src/store/analysis-process.ts

@@ -46,6 +46,7 @@ export function applyEdit(edit: Edit, model?: StaticModel): StaticModel {
         jsonSchema: edit.initialSchema,
         displayPosition: edit.position,
         indexes: [],
+        isExpanded: false,
       };
       return {
         ...model,
@@ -245,6 +246,20 @@ export function applyEdit(edit: Edit, model?: StaticModel): StaticModel {
         }),
       };
     }
+    case 'ToggleExpandCollection': {
+      return {
+        ...model,
+        collections: model.collections.map((collection) => {
+          if (collection.ns !== edit.ns) {
+            return collection;
+          }
+          return {
+            ...collection,
+            isExpanded: !collection.isExpanded,
+          };
+        }),
+      };
+    }
     default: {
       return model;
     }