fix(compass-data-modeling): visualise nested fields COMPASS-9488

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

@@ -4,8 +4,10 @@ import {
   createPluginTestHelpers,
   screen,
   waitFor,
+  render,
+  userEvent,
 } from '@mongodb-js/testing-library-compass';
-import DiagramEditor from './diagram-editor';
+import DiagramEditor, { getFieldsFromSchema } from './diagram-editor';
 import type { DataModelingStore } from '../../test/setup-store';
 import type {
   Edit,
@@ -229,3 +231,181 @@ describe('DiagramEditor', function () {
     });
   });
 });
+
+describe('getFieldsFromSchema', function () {
+  const validateMixedType = async (
+    type: React.ReactNode,
+    expectedTooltip: RegExp
+  ) => {
+    render(<>{type}</>);
+    const mixed = screen.getByText('(mixed)');
+    expect(mixed).to.be.visible;
+    userEvent.hover(mixed);
+    await waitFor(() => {
+      expect(screen.getByText(expectedTooltip)).to.be.visible;
+    });
+  };
+
+  describe('flat schema', function () {
+    it('return empty array for empty schema', function () {
+      const result = getFieldsFromSchema({});
+      expect(result).to.deep.equal([]);
+    });
+
+    it('returns fields for a simple schema', function () {
+      const result = getFieldsFromSchema({
+        bsonType: 'object',
+        properties: {
+          name: { bsonType: 'string' },
+          age: { bsonType: 'int' },
+        },
+      });
+      expect(result).to.deep.equal([
+        { name: 'name', type: 'string', depth: 0, glyphs: [] },
+        { name: 'age', type: 'int', depth: 0, glyphs: [] },
+      ]);
+    });
+
+    it('returns mixed fields with tooltip on hover', async function () {
+      const result = getFieldsFromSchema({
+        bsonType: 'object',
+        properties: {
+          age: { bsonType: ['int', 'string'] },
+        },
+      });
+      expect(result[0]).to.deep.include({ name: 'age', depth: 0, glyphs: [] });
+      await validateMixedType(result[0].type, /int, string/);
+    });
+  });
+
+  describe('nested schema', function () {
+    it('returns fields for a nested schema', function () {
+      const result = getFieldsFromSchema({
+        bsonType: 'object',
+        properties: {
+          person: {
+            bsonType: 'object',
+            properties: {
+              name: { bsonType: 'string' },
+              address: {
+                bsonType: 'object',
+                properties: {
+                  street: { bsonType: 'string' },
+                  city: { bsonType: 'string' },
+                },
+              },
+            },
+          },
+        },
+      });
+      expect(result).to.deep.equal([
+        { name: 'person', type: 'object', depth: 0, glyphs: [] },
+        { name: 'name', type: 'string', depth: 1, glyphs: [] },
+        { name: 'address', type: 'object', depth: 1, glyphs: [] },
+        { name: 'street', type: 'string', depth: 2, glyphs: [] },
+        { name: 'city', type: 'string', depth: 2, glyphs: [] },
+      ]);
+    });
+
+    it('returns [] for array', function () {
+      const result = getFieldsFromSchema({
+        bsonType: 'object',
+        properties: {
+          tags: {
+            bsonType: 'array',
+            items: { bsonType: 'string' },
+          },
+        },
+      });
+      expect(result).to.deep.equal([
+        { name: 'tags', type: '[]', depth: 0, glyphs: [] },
+      ]);
+    });
+
+    it('returns fields for an array of objects', function () {
+      const result = getFieldsFromSchema({
+        bsonType: 'object',
+        properties: {
+          todos: {
+            bsonType: 'array',
+            items: {
+              bsonType: 'object',
+              properties: {
+                title: { bsonType: 'string' },
+                completed: { bsonType: 'boolean' },
+              },
+            },
+          },
+        },
+      });
+      expect(result).to.deep.equal([
+        { name: 'todos', type: '[]', depth: 0, glyphs: [] },
+        { name: 'title', type: 'string', depth: 1, glyphs: [] },
+        { name: 'completed', type: 'boolean', depth: 1, glyphs: [] },
+      ]);
+    });
+
+    it('returns fields for a mixed schema with objects', async function () {
+      const result = getFieldsFromSchema({
+        bsonType: 'object',
+        properties: {
+          name: {
+            anyOf: [
+              { bsonType: 'string' },
+              {
+                bsonType: 'object',
+                properties: {
+                  first: { bsonType: 'string' },
+                  last: { bsonType: 'string' },
+                },
+              },
+            ],
+          },
+        },
+      });
+      expect(result).to.have.lengthOf(3);
+      expect(result[0]).to.deep.include({ name: 'name', depth: 0, glyphs: [] });
+      await validateMixedType(result[0].type, /string, object/);
+      expect(result[1]).to.deep.equal({
+        name: 'first',
+        type: 'string',
+        depth: 1,
+        glyphs: [],
+      });
+      expect(result[2]).to.deep.equal({
+        name: 'last',
+        type: 'string',
+        depth: 1,
+        glyphs: [],
+      });
+    });
+
+    it('returns fields for an array of mixed (including objects)', function () {
+      const result = getFieldsFromSchema({
+        bsonType: 'object',
+        properties: {
+          todos: {
+            bsonType: 'array',
+            items: {
+              anyOf: [
+                {
+                  bsonType: 'object',
+                  properties: {
+                    title: { bsonType: 'string' },
+                    completed: { bsonType: 'boolean' },
+                  },
+                },
+                { bsonType: 'string' },
+              ],
+            },
+          },
+        },
+      });
+      expect(result).to.deep.equal([
+        { name: 'todos', type: '[]', depth: 0, glyphs: [] },
+        { name: 'title', type: 'string', depth: 1, glyphs: [] },
+        { name: 'completed', type: 'boolean', depth: 1, glyphs: [] },
+      ]);
+    });
+  });
+});

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

@@ -18,14 +18,14 @@ import {
   Banner,
   Body,
   CancelLoader,
-  Tooltip,
   WorkspaceContainer,
   css,
   spacing,
   Button,
   palette,
   ErrorSummary,
   useDarkMode,
+  InlineDefinition,
 } from '@mongodb-js/compass-components';
 import { CodemirrorMultilineEditor } from '@mongodb-js/compass-editor';
 import { cancelAnalysis, retryAnalysis } from '../store/analysis-process';
@@ -86,27 +86,90 @@ const ErrorBannerWithRetry: React.FunctionComponent<{
   );
 };
 
-function getFieldTypeDisplay(field: MongoDBJSONSchema) {
-  if (field.bsonType === undefined) {
+function getBsonTypeName(bsonType: string) {
+  switch (bsonType) {
+    case 'array':
+      return '[]';
+    default:
+      return bsonType;
+  }
+}
+
+function getFieldTypeDisplay(bsonTypes: string[]) {
+  if (bsonTypes.length === 0) {
     return 'unknown';
   }
 
-  if (typeof field.bsonType === 'string') {
-    return field.bsonType;
+  if (bsonTypes.length === 1) {
+    return getBsonTypeName(bsonTypes[0]);
   }
 
-  const typesString = field.bsonType.join(', ');
+  const typesString = bsonTypes
+    .map((bsonType) => getBsonTypeName(bsonType))
+    .join(', ');
 
   // We show `mixed` with a tooltip when multiple bsonTypes were found.
   return (
-    <Tooltip justify="end" spacing={5} trigger={<div>(mixed)</div>}>
-      <Body className={mixedTypeTooltipContentStyles}>
-        Multiple types found in sample: {typesString}
-      </Body>
-    </Tooltip>
+    <InlineDefinition
+      definition={
+        <Body className={mixedTypeTooltipContentStyles}>
+          Multiple types found in sample: {typesString}
+        </Body>
+      }
+    >
+      <div>(mixed)</div>
+    </InlineDefinition>
   );
 }
 
+export const getFieldsFromSchema = (
+  jsonSchema: MongoDBJSONSchema,
+  depth = 0
+): NodeProps['fields'] => {
+  if (!jsonSchema || !jsonSchema.properties) {
+    return [];
+  }
+  let fields: NodeProps['fields'] = [];
+  for (const [name, field] of Object.entries(jsonSchema.properties)) {
+    // field has types, properties and (optional) children
+    // types are either direct, or from anyof
+    // children are either direct (properties), from anyOf, items or items.anyOf
+    const types: (string | string[])[] = [];
+    const children = [];
+    if (field.bsonType) types.push(field.bsonType);
+    if (field.properties) children.push(field);
+    if (field.items)
+      children.push((field.items as MongoDBJSONSchema).anyOf || field.items);
+    if (field.anyOf) {
+      for (const variant of field.anyOf) {
+        if (variant.bsonType) types.push(variant.bsonType);
+        if (variant.properties) {
+          children.push(variant);
+        }
+        if (variant.items) children.push(variant.items);
+      }
+    }
+
+    fields.push({
+      name,
+      type: getFieldTypeDisplay(types.flat()),
+      depth: depth,
+      glyphs: types.length === 1 && types[0] === 'objectId' ? ['key'] : [],
+    });
+
+    if (children.length > 0) {
+      fields = [
+        ...fields,
+        ...children
+          .flat()
+          .flatMap((child) => getFieldsFromSchema(child, depth + 1)),
+      ];
+    }
+  }
+
+  return fields;
+};
+
 const modelPreviewContainerStyles = css({
   display: 'grid',
   gridTemplateColumns: '100%',
@@ -276,16 +339,7 @@ const DiagramEditor: React.FunctionComponent<{
           y: coll.displayPosition[1],
         },
         title: coll.ns,
-        fields: Object.entries(coll.jsonSchema.properties ?? {}).map(
-          ([name, field]) => {
-            const type = getFieldTypeDisplay(field);
-            return {
-              name,
-              type,
-              glyphs: type === 'objectId' ? ['key'] : [],
-            };
-          }
-        ),
+        fields: getFieldsFromSchema(coll.jsonSchema),
       })
     );
   }, [model?.collections]);