From b2000d4616422f8c9e48cfa3dd07890ca1ee4da0 Mon Sep 17 00:00:00 2001
From: Himanshu Singh <himanshu.singhs@outlook.in>
Date: Wed, 10 Jul 2024 12:39:47 +0200
Subject: [PATCH 01/10] feat: allows nested elements to also expand in steps

---
 .../document-fields-toggle-group.tsx          |   4 +-
 .../document-list/document.spec.tsx           |  55 ++++-
 .../src/components/document-list/document.tsx |  41 ++--
 .../src/components/document-list/element.tsx  |  96 ++++++--
 packages/hadron-document/src/document.ts      |  22 ++
 .../hadron-document/src/element-events.ts     |   1 +
 packages/hadron-document/src/element.ts       |  36 ++-
 packages/hadron-document/src/index.ts         |   8 +-
 .../hadron-document/test/document.test.ts     | 101 ++++++++
 packages/hadron-document/test/element.test.ts | 218 +++++++++++++++++-
 10 files changed, 541 insertions(+), 41 deletions(-)

diff --git a/packages/compass-components/src/components/document-list/document-fields-toggle-group.tsx b/packages/compass-components/src/components/document-list/document-fields-toggle-group.tsx
index b51ba530577..eef91d156ee 100644
--- a/packages/compass-components/src/components/document-list/document-fields-toggle-group.tsx
+++ b/packages/compass-components/src/components/document-list/document-fields-toggle-group.tsx
@@ -21,6 +21,7 @@ const DocumentFieldsToggleGroup: React.FunctionComponent<{
   totalSize: number;
   minSize?: number;
   step?: number;
+  style?: React.CSSProperties;
   onSizeChange(newSize: number): void;
 }> = ({
   showHideButton = true,
@@ -28,6 +29,7 @@ const DocumentFieldsToggleGroup: React.FunctionComponent<{
   totalSize,
   minSize = 25,
   step = 1000,
+  style,
   onSizeChange,
 }) => {
   const showSizeDiff = useMemo(() => {
@@ -59,7 +61,7 @@ const DocumentFieldsToggleGroup: React.FunctionComponent<{
   }
 
   return (
-    <div className={container}>
+    <div className={container} style={style}>
       {isShowButtonVisible && (
         <Button
           size="xsmall"
diff --git a/packages/compass-components/src/components/document-list/document.spec.tsx b/packages/compass-components/src/components/document-list/document.spec.tsx
index 65222644681..aed851fb941 100644
--- a/packages/compass-components/src/components/document-list/document.spec.tsx
+++ b/packages/compass-components/src/components/document-list/document.spec.tsx
@@ -1,6 +1,12 @@
 import React, { useState } from 'react';
 import { expect } from 'chai';
-import { render, cleanup, screen, within } from '@testing-library/react';
+import {
+  render,
+  cleanup,
+  screen,
+  within,
+  waitFor,
+} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import HadronDocument from 'hadron-document';
 import Document from './document';
@@ -244,4 +250,51 @@ describe('Document', function () {
     expect(() => screen.getByText('firstName')).to.throw;
     expect(() => screen.getByText('lastName')).to.throw;
   });
+
+  it('should render "Show more" toggle when number of fields are more than allowed visible fields', async function () {
+    const hadronDoc = new HadronDocument({
+      prop1: 'prop1',
+      prop2: 'prop2',
+      prop3: 'prop3',
+      prop4: 'prop4',
+    });
+    hadronDoc.setVisibleElementsCount(2);
+    render(<Document value={hadronDoc}></Document>);
+    expect(screen.getByText('prop1')).to.exist;
+    expect(screen.getByText('prop2')).to.exist;
+    expect(() => screen.getByText('prop3')).to.throw;
+    expect(() => screen.getByText('prop4')).to.throw;
+    expect(screen.getByText('Show 2 more fields')).to.exist;
+
+    hadronDoc.setVisibleElementsCount(25);
+    await waitFor(() => {
+      expect(screen.getByText('prop3')).to.exist;
+      expect(screen.getByText('prop4')).to.exist;
+    });
+  });
+
+  it('should render "Show more" toggle on element when its nested fields are more than allowed visible fields', async function () {
+    const hadronDoc = new HadronDocument({
+      nested: {
+        prop1: 'prop1',
+        prop2: 'prop2',
+        prop3: 'prop3',
+        prop4: 'prop4',
+      },
+    });
+    const [nestedElement] = [...hadronDoc.elements];
+    hadronDoc.expand();
+    render(<Document value={hadronDoc}></Document>);
+    expect(screen.getByText('nested')).to.exist;
+    expect(screen.getByText('prop1')).to.exist;
+    expect(screen.getByText('prop2')).to.exist;
+    expect(screen.getByText('prop3')).to.exist;
+    expect(screen.getByText('prop4')).to.exist;
+
+    nestedElement.setVisibleElementsCount(2);
+    await waitFor(() => {
+      expect(() => screen.getByText('prop3')).to.throw;
+      expect(() => screen.getByText('prop4')).to.throw;
+    });
+  });
 });
diff --git a/packages/compass-components/src/components/document-list/document.tsx b/packages/compass-components/src/components/document-list/document.tsx
index 8e0619e8378..cdba0f6dcfe 100644
--- a/packages/compass-components/src/components/document-list/document.tsx
+++ b/packages/compass-components/src/components/document-list/document.tsx
@@ -1,10 +1,14 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { css } from '@leafygreen-ui/emotion';
 import type {
   default as HadronDocumentType,
   Element as HadronElementType,
 } from 'hadron-document';
-import { ElementEvents } from 'hadron-document';
+import {
+  DEFAULT_VISIBLE_DOCUMENT_ELEMENTS,
+  DocumentEvents,
+  ElementEvents,
+} from 'hadron-document';
 import { AutoFocusContext } from './auto-focus-context';
 import { useForceUpdate } from './use-force-update';
 import { HadronElement } from './element';
@@ -16,6 +20,10 @@ function useHadronDocument(doc: HadronDocumentType) {
   const prevDoc = usePrevious(doc);
   const forceUpdate = useForceUpdate();
 
+  const onVisibleElementsChanged = useCallback(() => {
+    forceUpdate();
+  }, [forceUpdate]);
+
   const onDocumentFieldsAddedOrRemoved = useCallback(
     (
       _el: HadronElementType,
@@ -39,17 +47,22 @@ function useHadronDocument(doc: HadronDocumentType) {
   }, [prevDoc, doc, forceUpdate]);
 
   useEffect(() => {
+    doc.on(DocumentEvents.VisibleElementsChanged, onVisibleElementsChanged);
+    doc.on(ElementEvents.VisibleElementsChanged, onVisibleElementsChanged);
     doc.on(ElementEvents.Added, onDocumentFieldsAddedOrRemoved);
     doc.on(ElementEvents.Removed, onDocumentFieldsAddedOrRemoved);
 
     return () => {
+      doc.off(DocumentEvents.VisibleElementsChanged, onVisibleElementsChanged);
+      doc.off(ElementEvents.VisibleElementsChanged, onVisibleElementsChanged);
       doc.off(ElementEvents.Added, onDocumentFieldsAddedOrRemoved);
       doc.off(ElementEvents.Removed, onDocumentFieldsAddedOrRemoved);
     };
-  }, [doc, onDocumentFieldsAddedOrRemoved]);
+  }, [doc, onDocumentFieldsAddedOrRemoved, onVisibleElementsChanged]);
 
   return {
     elements: [...doc.elements],
+    visibleElements: doc.getVisibleElements(),
   };
 }
 
@@ -61,8 +74,6 @@ const hadronDocument = css({
   counterReset: 'line-number',
 });
 
-const INITIAL_FIELD_LIMIT = 25;
-
 // TODO: This element should implement treegrid aria role to be accessible
 // https://www.w3.org/TR/wai-aria-practices/examples/treegrid/treegrid-1.html
 // https://jira.mongodb.org/browse/COMPASS-5614
@@ -72,12 +83,7 @@ const HadronDocument: React.FunctionComponent<{
   editing?: boolean;
   onEditStart?: () => void;
 }> = ({ value: document, editable = false, editing = false, onEditStart }) => {
-  const { elements } = useHadronDocument(document);
-  const [visibleFieldsCount, setVisibleFieldsCount] =
-    useState(INITIAL_FIELD_LIMIT);
-  const visibleElements = useMemo(() => {
-    return elements.filter(Boolean).slice(0, visibleFieldsCount);
-  }, [elements, visibleFieldsCount]);
+  const { elements, visibleElements } = useHadronDocument(document);
   const [autoFocus, setAutoFocus] = useState<{
     id: string;
     type: 'key' | 'value' | 'type';
@@ -89,6 +95,13 @@ const HadronDocument: React.FunctionComponent<{
     }
   }, [editing]);
 
+  const handleVisibleFieldsChanged = useCallback(
+    (totalVisibleFields: number) => {
+      document.setVisibleElementsCount(totalVisibleFields);
+    },
+    [document]
+  );
+
   return (
     <div>
       <div
@@ -130,13 +143,13 @@ const HadronDocument: React.FunctionComponent<{
         // that are changed but then hidden
         // https://jira.mongodb.org/browse/COMPASS-5587
         showHideButton={!editing}
-        currentSize={visibleFieldsCount}
+        currentSize={document.visibleElementsCount}
         totalSize={elements.length}
-        minSize={INITIAL_FIELD_LIMIT}
+        minSize={DEFAULT_VISIBLE_DOCUMENT_ELEMENTS}
         // In the editing mode we allow to show / hide less fields because
         // historically Compass was doing this for "performance" reasons
         step={editing ? 100 : 1000}
-        onSizeChange={setVisibleFieldsCount}
+        onSizeChange={handleVisibleFieldsChanged}
       ></DocumentFieldsToggleGroup>
     </div>
   );
diff --git a/packages/compass-components/src/components/document-list/element.tsx b/packages/compass-components/src/components/document-list/element.tsx
index 86ccae0e2b1..13114d0ddc9 100644
--- a/packages/compass-components/src/components/document-list/element.tsx
+++ b/packages/compass-components/src/components/document-list/element.tsx
@@ -11,7 +11,11 @@ import type {
   Element as HadronElementType,
   Editor as EditorType,
 } from 'hadron-document';
-import { ElementEvents, ElementEditor } from 'hadron-document';
+import {
+  ElementEvents,
+  ElementEditor,
+  DEFAULT_VISIBLE_ELEMENTS,
+} from 'hadron-document';
 import BSONValue from '../bson-value';
 import { spacing } from '@leafygreen-ui/tokens';
 import { KeyEditor, ValueEditor, TypeEditor } from './element-editors';
@@ -23,6 +27,7 @@ import { css, cx } from '@leafygreen-ui/emotion';
 import { palette } from '@leafygreen-ui/palette';
 import { Icon } from '../leafygreen';
 import { useDarkMode } from '../../hooks/use-theme';
+import DocumentFieldsToggleGroup from './document-fields-toggle-group';
 
 function getEditorByType(type: HadronElementType['type']) {
   switch (type) {
@@ -103,6 +108,7 @@ function useHadronElement(el: HadronElementType) {
     el.on(ElementEvents.Removed, onElementAddedOrRemoved);
     el.on(ElementEvents.Expanded, onElementChanged);
     el.on(ElementEvents.Collapsed, onElementChanged);
+    el.on(ElementEvents.VisibleElementsChanged, onElementChanged);
 
     return () => {
       el.off(ElementEvents.Converted, onElementChanged);
@@ -113,6 +119,7 @@ function useHadronElement(el: HadronElementType) {
       el.off(ElementEvents.Removed, onElementAddedOrRemoved);
       el.off(ElementEvents.Expanded, onElementChanged);
       el.off(ElementEvents.Collapsed, onElementChanged);
+      el.off(ElementEvents.VisibleElementsChanged, onElementChanged);
     };
   }, [el, onElementChanged, onElementAddedOrRemoved]);
 
@@ -162,6 +169,7 @@ function useHadronElement(el: HadronElementType) {
     remove: el.isNotActionable() ? null : el.remove.bind(el),
     expandable: Boolean(el.elements),
     children: el.elements ? [...el.elements] : [],
+    visibleChildren: el.getVisibleElements(),
     level: el.level,
     parentType: el.parent?.currentType,
     removed: el.isRemoved(),
@@ -381,6 +389,7 @@ export const HadronElement: React.FunctionComponent<{
     remove,
     expandable,
     children,
+    visibleChildren,
     level,
     parentType,
     removed,
@@ -400,9 +409,31 @@ export const HadronElement: React.FunctionComponent<{
       const charCount = String(lineNumberSize).length;
       return charCount > 2 ? `${charCount}.5ch` : spacing[3];
     }
-    return spacing[3];
+    return spacing[400];
   }, [lineNumberSize, editingEnabled]);
 
+  const elementSpacerWidth = useMemo(() => {
+    return (editable ? spacing[200] : 0) + spacing[400] * level;
+  }, [editable, level]);
+
+  // To render the "Show more" toggle for the nested expandable elements we need
+  // to calculate a proper offset so that it aligns with the nesting level
+  const nestedElementsVisibilityToggleOffset = useMemo(() => {
+    // the base padding that we have on all elements rendered in the document
+    const BASE_PADDING_LEFT = spacing[200];
+    const OFFSET_WHEN_EDITABLE = editable
+      ? // space taken by element actions
+        spacing[400] +
+        // space and margin taken by line number element
+        spacing[400] +
+        spacing[100] +
+        // element spacer width that we render
+        elementSpacerWidth
+      : 0;
+    const EXPAND_ICON_SIZE = spacing[400];
+    return BASE_PADDING_LEFT + OFFSET_WHEN_EDITABLE + EXPAND_ICON_SIZE;
+  }, [editable, elementSpacerWidth]);
+
   const isValid = key.valid && value.valid;
   const shouldShowActions = editingEnabled;
 
@@ -436,6 +467,14 @@ export const HadronElement: React.FunctionComponent<{
   const lineNumberInvalid = darkMode
     ? lineNumberInvalidDarkMode
     : lineNumberInvalidLightMode;
+
+  const handleVisibleElementsChanged = useCallback(
+    (totalVisibleFields: number) => {
+      element.setVisibleElementsCount(totalVisibleFields);
+    },
+    [element]
+  );
+
   return (
     <>
       <div
@@ -501,10 +540,7 @@ export const HadronElement: React.FunctionComponent<{
             </div>
           </div>
         )}
-        <div
-          className={elementSpacer}
-          style={{ width: (editable ? spacing[2] : 0) + spacing[3] * level }}
-        >
+        <div className={elementSpacer} style={{ width: elementSpacerWidth }}>
           {/* spacer for nested documents */}
         </div>
         <div className={elementExpand}>
@@ -636,21 +672,39 @@ export const HadronElement: React.FunctionComponent<{
           </div>
         )}
       </div>
-      {expandable &&
-        expanded &&
-        children.map((el, idx) => {
-          return (
-            <HadronElement
-              key={idx}
-              value={el}
-              editable={editable}
-              editingEnabled={editingEnabled}
-              onEditStart={onEditStart}
-              lineNumberSize={lineNumberSize}
-              onAddElement={onAddElement}
-            ></HadronElement>
-          );
-        })}
+      {expandable && expanded && (
+        <>
+          {visibleChildren.map((el, idx) => {
+            return (
+              <HadronElement
+                key={idx}
+                value={el}
+                editable={editable}
+                editingEnabled={editingEnabled}
+                onEditStart={onEditStart}
+                lineNumberSize={lineNumberSize}
+                onAddElement={onAddElement}
+              ></HadronElement>
+            );
+          })}
+          <DocumentFieldsToggleGroup
+            // TODO: (Same as that for Document) "Hide items" button will only
+            // be shown when document is not edited because it's not decided how
+            // to handle changes to the fields that are changed but then hidden
+            // https://jira.mongodb.org/browse/COMPASS-5587
+            showHideButton={!editingEnabled}
+            currentSize={element.visibleElementsCount}
+            totalSize={children.length}
+            minSize={DEFAULT_VISIBLE_ELEMENTS}
+            // Same as that for Document renderer, in the editing mode we allow
+            // to show / hide less fields because historically Compass was doing
+            // this for "performance" reasons
+            step={editingEnabled ? DEFAULT_VISIBLE_ELEMENTS : 1000}
+            onSizeChange={handleVisibleElementsChanged}
+            style={{ paddingLeft: nestedElementsVisibilityToggleOffset }}
+          ></DocumentFieldsToggleGroup>
+        </>
+      )}
     </>
   );
 };
diff --git a/packages/hadron-document/src/document.ts b/packages/hadron-document/src/document.ts
index 54842157350..30ea5c07c3a 100644
--- a/packages/hadron-document/src/document.ts
+++ b/packages/hadron-document/src/document.ts
@@ -19,6 +19,7 @@ export const Events = {
   Cancel: 'Document::Cancel',
   Expanded: 'Document::Expanded',
   Collapsed: 'Document::Collapsed',
+  VisibleElementsChanged: 'Document::VisibleElementsChanged',
 };
 
 /**
@@ -26,6 +27,8 @@ export const Events = {
  */
 const ID = '_id';
 
+export const DEFAULT_VISIBLE_ELEMENTS = 25;
+
 /**
  * Represents a document.
  */
@@ -39,6 +42,7 @@ export class Document extends EventEmitter {
   currentType: 'Document';
   size: number | null = null;
   expanded = false;
+  visibleElementsCount = DEFAULT_VISIBLE_ELEMENTS;
 
   /**
    * Send cancel event.
@@ -411,6 +415,24 @@ export class Document extends EventEmitter {
     }
     this.emit(Events.Collapsed);
   }
+
+  getVisibleElements() {
+    return [...this.elements].slice(0, this.visibleElementsCount);
+  }
+
+  setVisibleElementsCount(newCount: number) {
+    this.visibleElementsCount = newCount;
+    this.emit(Events.VisibleElementsChanged, this);
+  }
+
+  getTotalVisibleElementsCount() {
+    const visibleElements = this.getVisibleElements();
+    return visibleElements.reduce((totalVisibleChildElements, element) => {
+      return (
+        totalVisibleChildElements + 1 + element.getTotalVisibleElementsCount()
+      );
+    }, 0);
+  }
 }
 
 export default Document;
diff --git a/packages/hadron-document/src/element-events.ts b/packages/hadron-document/src/element-events.ts
index 7584a6b132f..0bba0d3d342 100644
--- a/packages/hadron-document/src/element-events.ts
+++ b/packages/hadron-document/src/element-events.ts
@@ -11,4 +11,5 @@ export default {
   Valid: 'Element::Valid',
   Expanded: 'Element::Expanded',
   Collapsed: 'Element::Collapsed',
+  VisibleElementsChanged: 'Element::VisibleElementsChanged',
 } as const;
diff --git a/packages/hadron-document/src/element.ts b/packages/hadron-document/src/element.ts
index bcb79bed419..4189455d850 100644
--- a/packages/hadron-document/src/element.ts
+++ b/packages/hadron-document/src/element.ts
@@ -46,6 +46,8 @@ const UNEDITABLE_TYPES = [
   'DBRef',
 ];
 
+export const DEFAULT_VISIBLE_ELEMENTS = 25;
+
 /**
  * Represents an element in a document.
  */
@@ -67,6 +69,7 @@ export class Element extends EventEmitter {
   invalidTypeMessage?: string;
   decrypted: boolean;
   expanded = false;
+  visibleElementsCount = DEFAULT_VISIBLE_ELEMENTS;
 
   /**
    * Cancel any modifications to the element.
@@ -736,7 +739,7 @@ export class Element extends EventEmitter {
         element.expand(expandChildren);
       }
     }
-    this.emit(ElementEvents.Expanded, this);
+    this._bubbleUp(ElementEvents.Expanded, this);
   }
 
   /**
@@ -753,7 +756,7 @@ export class Element extends EventEmitter {
         element.collapse();
       }
     }
-    this.emit(ElementEvents.Collapsed, this);
+    this._bubbleUp(ElementEvents.Collapsed, this);
   }
 
   /**
@@ -836,6 +839,35 @@ export class Element extends EventEmitter {
     }
   }
 
+  getVisibleElements() {
+    if (!this.elements) {
+      return [];
+    }
+    return [...this.elements].slice(0, this.visibleElementsCount);
+  }
+
+  setVisibleElementsCount(newCount: number) {
+    if (!this._isExpandable(this.originalExpandableValue)) {
+      return;
+    }
+    this.visibleElementsCount = newCount;
+    this._bubbleUp(Events.VisibleElementsChanged, this, this.getRoot());
+  }
+
+  getTotalVisibleElementsCount(): number {
+    if (!this.elements || !this.expanded) {
+      return 0;
+    }
+    return this.getVisibleElements().reduce(
+      (totalVisibleChildElements, element) => {
+        return (
+          totalVisibleChildElements + 1 + element.getTotalVisibleElementsCount()
+        );
+      },
+      0
+    );
+  }
+
   /**
    * @deprecated Use ElementEvents import instead
    */
diff --git a/packages/hadron-document/src/index.ts b/packages/hadron-document/src/index.ts
index f90392e4039..73c7c9bd48e 100644
--- a/packages/hadron-document/src/index.ts
+++ b/packages/hadron-document/src/index.ts
@@ -1,7 +1,11 @@
-import Document, { Events as DocumentEvents } from './document';
+import Document, {
+  Events as DocumentEvents,
+  DEFAULT_VISIBLE_ELEMENTS as DEFAULT_VISIBLE_DOCUMENT_ELEMENTS,
+} from './document';
 import Element, {
   Events as ElementEvents,
   isInternalFieldPath,
+  DEFAULT_VISIBLE_ELEMENTS,
 } from './element';
 import ElementEditor from './editor';
 import type { Editor } from './editor';
@@ -12,8 +16,10 @@ export type { Editor };
 export {
   Document,
   DocumentEvents,
+  DEFAULT_VISIBLE_DOCUMENT_ELEMENTS,
   Element,
   ElementEvents,
+  DEFAULT_VISIBLE_ELEMENTS,
   ElementEditor,
   isInternalFieldPath,
   getDefaultValueForType,
diff --git a/packages/hadron-document/test/document.test.ts b/packages/hadron-document/test/document.test.ts
index ac7b7260f62..905be30a83a 100644
--- a/packages/hadron-document/test/document.test.ts
+++ b/packages/hadron-document/test/document.test.ts
@@ -2419,4 +2419,105 @@ describe('Document', function () {
       expect(collapsedSpy).to.be.calledOnce;
     });
   });
+
+  describe('#getVisibleElements', function () {
+    const doc = {
+      a1: 'a1',
+      b1: {
+        b11: 'b1.1',
+        b12: 'b1.2',
+      },
+    };
+
+    it("should return total elements if the elements are less than document's visible element count", function () {
+      expect(new Document(doc).getVisibleElements()).to.have.lengthOf(2);
+    });
+
+    it("should return sliced list of nested elements if nested elements are more than element's visible element count", function () {
+      const document = new Document(doc);
+      document.setVisibleElementsCount(1);
+      const visibleElements = document.getVisibleElements();
+      expect(visibleElements).to.have.lengthOf(1);
+      expect(visibleElements.map((element) => element.value)).to.deep.equal([
+        'a1',
+      ]);
+
+      document.setVisibleElementsCount(10);
+      expect(document.getVisibleElements()).to.have.lengthOf(2);
+    });
+  });
+
+  describe('#setVisibleElementsCount', function () {
+    it('should update the visible count and emit an event', function () {
+      const spy = Sinon.spy();
+      const document = new Document({
+        a1: 'a1',
+        b1: {
+          b11: 'b1.1',
+          b12: 'b1.2',
+        },
+      });
+      document.on(DocumentEvents.VisibleElementsChanged, spy);
+      document.setVisibleElementsCount(10);
+      expect(document.visibleElementsCount).to.equal(10);
+      expect(spy).to.be.calledWithExactly(document);
+    });
+  });
+
+  describe('#getTotalVisibleElementsCount', function () {
+    it('should return the count of top level fields only if none of the fields are expanded', function () {
+      const document = new Document({
+        a1: 'a1',
+        b1: {
+          b11: 'b1.1',
+          b12: 'b1.2',
+        },
+      });
+      expect(document.getTotalVisibleElementsCount()).to.equal(2);
+    });
+    it('should do a recursive tree traversal for providing the total visible elements count', function () {
+      const document = new Document({
+        a1: 'a1',
+        b1: {
+          b11: 'b1.1',
+          b12: 'b1.2',
+        },
+      });
+      // we need to expand the element all the way to its children to make it
+      // visible
+      document.expand();
+      expect(document.getTotalVisibleElementsCount()).to.equal(4);
+    });
+    context(
+      'and total elements are less than the allowed visible elements',
+      function () {
+        it('should return the count for number of elements', function () {
+          const document = new Document({
+            a1: 'a1',
+            b1: {
+              b11: 'b1.1',
+              b12: 'b1.2',
+            },
+          });
+          expect(document.getTotalVisibleElementsCount()).to.equal(2);
+        });
+      }
+    );
+    context(
+      'and total child elements are more than the allowed visible elements',
+      function () {
+        it('should return the count for allowed visible elements', function () {
+          const document = new Document({
+            a1: 'a1',
+            b1: {
+              b11: 'b1.1',
+              b12: 'b1.2',
+            },
+          });
+          document.setVisibleElementsCount(1);
+          expect(document.getTotalVisibleElementsCount()).to.equal(1);
+        });
+      }
+    );
+  });
 });
diff --git a/packages/hadron-document/test/element.test.ts b/packages/hadron-document/test/element.test.ts
index 5a08d1f65fe..9fce15ce807 100644
--- a/packages/hadron-document/test/element.test.ts
+++ b/packages/hadron-document/test/element.test.ts
@@ -12,7 +12,8 @@ import {
 } from 'bson';
 import { expect } from 'chai';
 import { Document, Element, ElementEvents } from '../src/';
-import { DATE_FORMAT } from '../src/element';
+import type { ElementList } from '../src/element';
+import { DATE_FORMAT, DEFAULT_VISIBLE_ELEMENTS } from '../src/element';
 import moment from 'moment';
 import Sinon from 'sinon';
 
@@ -2779,4 +2780,219 @@ describe('Element', function () {
       }
     });
   });
+
+  describe('#getVisibleElements', function () {
+    context('when element is not expandable', function () {
+      it('should return an empty list', function () {
+        expect(new Element('name', 'A').getVisibleElements()).to.have.lengthOf(
+          0
+        );
+        expect(new Element('count', 1).getVisibleElements()).to.have.lengthOf(
+          0
+        );
+        expect(
+          new Element('_id', new ObjectId()).getVisibleElements()
+        ).to.have.lengthOf(0);
+        expect(
+          new Element('_id', new Binary()).getVisibleElements()
+        ).to.have.lengthOf(0);
+        expect(
+          new Element('x', new Code('')).getVisibleElements()
+        ).to.have.lengthOf(0);
+        expect(
+          new Element('x', new MaxKey()).getVisibleElements()
+        ).to.have.lengthOf(0);
+        expect(
+          new Element('x', new MinKey()).getVisibleElements()
+        ).to.have.lengthOf(0);
+        expect(
+          new Element('x', new Timestamp({ t: 1, i: 1 })).getVisibleElements()
+        ).to.have.lengthOf(0);
+        expect(
+          new Element('x', new Int32(32)).getVisibleElements()
+        ).to.have.lengthOf(0);
+        expect(
+          new Element('x', new Long(32)).getVisibleElements()
+        ).to.have.lengthOf(0);
+        expect(
+          new Element('x', new Double(0.2)).getVisibleElements()
+        ).to.have.lengthOf(0);
+        expect(
+          new Element('x', new Decimal128('0.2')).getVisibleElements()
+        ).to.have.lengthOf(0);
+      });
+    });
+
+    context('when element is expandable', function () {
+      it("should return total nested elements if nested elements are less than element's visible element count", function () {
+        expect(
+          new Element('list', [1, 2, 3]).getVisibleElements()
+        ).to.have.lengthOf(3);
+        expect(
+          new Element('ob', { prop1: '1', prop2: '2' }).getVisibleElements()
+        ).to.have.lengthOf(2);
+      });
+
+      it("should return sliced list of nested elements if nested elements are more than element's visible element count", function () {
+        const listElement = new Element('list', [1, 2, 3]);
+        listElement.setVisibleElementsCount(1);
+        const listVisibleElements = listElement.getVisibleElements();
+        expect(listVisibleElements).to.have.lengthOf(1);
+        expect(
+          listVisibleElements.map((element) => element.value)
+        ).to.deep.equal([{ value: 1 }]);
+        listElement.setVisibleElementsCount(25);
+        expect(listElement.getVisibleElements()).to.have.lengthOf(3);
+
+        const obElement = new Element('ob', {
+          prop1: '1',
+          prop2: '2',
+          prop3: '3',
+        });
+        obElement.setVisibleElementsCount(1);
+        const obVisibleElement = obElement.getVisibleElements();
+        expect(obVisibleElement).to.have.lengthOf(1);
+        expect(obVisibleElement.map((element) => element.value)).to.deep.equal([
+          '1',
+        ]);
+        obElement.setVisibleElementsCount(25);
+        expect(obElement.getVisibleElements()).to.have.lengthOf(3);
+      });
+    });
+  });
+
+  describe('#setVisibleElementsCount', function () {
+    context('when element is not expandable', function () {
+      it('should not do anything', function () {
+        const element = new Element('name', 'string');
+        const spy = Sinon.spy();
+        element.on(ElementEvents.VisibleElementsChanged, spy);
+        element.setVisibleElementsCount(10);
+        expect(element.visibleElementsCount).to.equal(DEFAULT_VISIBLE_ELEMENTS);
+        expect(spy).to.not.be.called;
+      });
+    });
+
+    context('when element is expandable', function () {
+      it('should update the visible count and bubble up the event', function () {
+        const spy = Sinon.spy();
+        const rootElement = new Element('nestedOb', {
+          address: {
+            zip: '111111',
+          },
+        });
+        const [addressElement] = [...(rootElement.elements as ElementList)];
+        rootElement.on(ElementEvents.VisibleElementsChanged, spy);
+        addressElement.setVisibleElementsCount(10);
+        expect(addressElement.visibleElementsCount).to.equal(10);
+        expect(spy).to.be.calledWithExactly(addressElement, rootElement);
+      });
+    });
+  });
+
+  describe('#getTotalVisibleElementsCount', function () {
+    context('if the element is not expandable', function () {
+      it('should return 0', function () {
+        expect(
+          new Element('name', 'A').getTotalVisibleElementsCount()
+        ).to.equal(0);
+        expect(new Element('count', 1).getTotalVisibleElementsCount()).to.equal(
+          0
+        );
+        expect(
+          new Element('_id', new ObjectId()).getTotalVisibleElementsCount()
+        ).to.equal(0);
+        expect(
+          new Element('_id', new Binary()).getTotalVisibleElementsCount()
+        ).to.equal(0);
+        expect(
+          new Element('x', new Code('')).getTotalVisibleElementsCount()
+        ).to.equal(0);
+        expect(
+          new Element('x', new MaxKey()).getTotalVisibleElementsCount()
+        ).to.equal(0);
+        expect(
+          new Element('x', new MinKey()).getTotalVisibleElementsCount()
+        ).to.equal(0);
+        expect(
+          new Element(
+            'x',
+            new Timestamp({ t: 1, i: 1 })
+          ).getTotalVisibleElementsCount()
+        ).to.equal(0);
+        expect(
+          new Element('x', new Int32(32)).getTotalVisibleElementsCount()
+        ).to.equal(0);
+        expect(
+          new Element('x', new Long(32)).getTotalVisibleElementsCount()
+        ).to.equal(0);
+        expect(
+          new Element('x', new Double(0.2)).getTotalVisibleElementsCount()
+        ).to.equal(0);
+        expect(
+          new Element('x', new Decimal128('0.2')).getTotalVisibleElementsCount()
+        ).to.equal(0);
+      });
+    });
+    context('if element is expandable', function () {
+      it('should still return 0 if the item is not expanded', function () {
+        const nestedObElement = new Element('nestedOb', {
+          prop1: {
+            prop2: {
+              prop3: {
+                prop4: {
+                  prop5: 'Yup',
+                },
+              },
+            },
+          },
+        });
+        expect(nestedObElement.getTotalVisibleElementsCount()).to.equal(0);
+      });
+      it('should do a recursive tree traversal for providing the total visible elements count', function () {
+        const nestedObElement = new Element('nestedOb', {
+          prop1: {
+            prop2: {
+              prop3: {
+                prop4: {
+                  prop5: 'Yup',
+                },
+              },
+            },
+          },
+        });
+        // we need to expand the element all the way to its children to make it
+        // visible
+        nestedObElement.expand(true);
+        expect(nestedObElement.getTotalVisibleElementsCount()).to.equal(5);
+      });
+      context(
+        'and total child elements are less than the allowed visible elements',
+        function () {
+          it('should return the count for number of child elements', function () {
+            const nestedObElement = new Element('nestedOb', {
+              prop1: 'x',
+              prop2: 'y',
+            });
+            nestedObElement.expand();
+            expect(nestedObElement.getTotalVisibleElementsCount()).to.equal(2);
+          });
+        }
+      );
+      context(
+        'and total child elements are more than the allowed visible elements',
+        function () {
+          it('should return the count for allowed visible elements', function () {
+            const nestedObElement = new Element('nestedOb', {
+              prop1: 'x',
+              prop2: 'y',
+            });
+            nestedObElement.expand();
+            nestedObElement.setVisibleElementsCount(1);
+            expect(nestedObElement.getTotalVisibleElementsCount()).to.equal(1);
+          });
+        }
+      );
+    });
+  });
 });

From b4b77195f1abfeeafa624721be7d5b286e0ee41f Mon Sep 17 00:00:00 2001
From: Himanshu Singh <himanshu.singhs@outlook.in>
Date: Wed, 10 Jul 2024 13:12:06 +0200
Subject: [PATCH 02/10] chore: reduces paddingTop on 'Show more' toggle for
 nested elements

---
 .../src/components/document-list/element.tsx                 | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/compass-components/src/components/document-list/element.tsx b/packages/compass-components/src/components/document-list/element.tsx
index 13114d0ddc9..6e06e22c5d7 100644
--- a/packages/compass-components/src/components/document-list/element.tsx
+++ b/packages/compass-components/src/components/document-list/element.tsx
@@ -701,7 +701,10 @@ export const HadronElement: React.FunctionComponent<{
             // this for "performance" reasons
             step={editingEnabled ? DEFAULT_VISIBLE_ELEMENTS : 1000}
             onSizeChange={handleVisibleElementsChanged}
-            style={{ paddingLeft: nestedElementsVisibilityToggleOffset }}
+            style={{
+              paddingLeft: nestedElementsVisibilityToggleOffset,
+              paddingTop: spacing[200],
+            }}
           ></DocumentFieldsToggleGroup>
         </>
       )}

From cb4f544566e6886552b1dc1265005e0a81e3b47c Mon Sep 17 00:00:00 2001
From: Himanshu Singh <himanshu.singhs@outlook.in>
Date: Wed, 10 Jul 2024 13:35:22 +0200
Subject: [PATCH 03/10] chore: removes ElementEvents listener from Document
 renderer

---
 .../src/components/document-list/document.tsx       | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/packages/compass-components/src/components/document-list/document.tsx b/packages/compass-components/src/components/document-list/document.tsx
index cdba0f6dcfe..60e55891e03 100644
--- a/packages/compass-components/src/components/document-list/document.tsx
+++ b/packages/compass-components/src/components/document-list/document.tsx
@@ -20,9 +20,14 @@ function useHadronDocument(doc: HadronDocumentType) {
   const prevDoc = usePrevious(doc);
   const forceUpdate = useForceUpdate();
 
-  const onVisibleElementsChanged = useCallback(() => {
-    forceUpdate();
-  }, [forceUpdate]);
+  const onVisibleElementsChanged = useCallback(
+    (document: HadronDocumentType) => {
+      if (document === doc) {
+        forceUpdate();
+      }
+    },
+    [doc, forceUpdate]
+  );
 
   const onDocumentFieldsAddedOrRemoved = useCallback(
     (
@@ -48,13 +53,11 @@ function useHadronDocument(doc: HadronDocumentType) {
 
   useEffect(() => {
     doc.on(DocumentEvents.VisibleElementsChanged, onVisibleElementsChanged);
-    doc.on(ElementEvents.VisibleElementsChanged, onVisibleElementsChanged);
     doc.on(ElementEvents.Added, onDocumentFieldsAddedOrRemoved);
     doc.on(ElementEvents.Removed, onDocumentFieldsAddedOrRemoved);
 
     return () => {
       doc.off(DocumentEvents.VisibleElementsChanged, onVisibleElementsChanged);
-      doc.off(ElementEvents.VisibleElementsChanged, onVisibleElementsChanged);
       doc.off(ElementEvents.Added, onDocumentFieldsAddedOrRemoved);
       doc.off(ElementEvents.Removed, onDocumentFieldsAddedOrRemoved);
     };

From 4c916c72096ad1c89bcf69e5a449acf9132a5ae4 Mon Sep 17 00:00:00 2001
From: Himanshu Singh <himanshu.singhs@outlook.in>
Date: Wed, 10 Jul 2024 16:26:37 +0200
Subject: [PATCH 04/10] chore: take into account expanded state before emiting
 event

---
 .../src/components/document-list/document.tsx |  4 +-
 .../src/components/document-list/element.tsx  |  4 +-
 packages/hadron-document/src/document.ts      |  8 ++--
 packages/hadron-document/src/element.ts       | 15 ++++---
 .../hadron-document/test/document.test.ts     | 10 ++---
 packages/hadron-document/test/element.test.ts | 42 ++++++++++++-------
 6 files changed, 49 insertions(+), 34 deletions(-)

diff --git a/packages/compass-components/src/components/document-list/document.tsx b/packages/compass-components/src/components/document-list/document.tsx
index 60e55891e03..266ef4a1a35 100644
--- a/packages/compass-components/src/components/document-list/document.tsx
+++ b/packages/compass-components/src/components/document-list/document.tsx
@@ -100,7 +100,7 @@ const HadronDocument: React.FunctionComponent<{
 
   const handleVisibleFieldsChanged = useCallback(
     (totalVisibleFields: number) => {
-      document.setVisibleElementsCount(totalVisibleFields);
+      document.setMaxVisibleElementsCount(totalVisibleFields);
     },
     [document]
   );
@@ -146,7 +146,7 @@ const HadronDocument: React.FunctionComponent<{
         // that are changed but then hidden
         // https://jira.mongodb.org/browse/COMPASS-5587
         showHideButton={!editing}
-        currentSize={document.visibleElementsCount}
+        currentSize={document.maxVisibleElementsCount}
         totalSize={elements.length}
         minSize={DEFAULT_VISIBLE_DOCUMENT_ELEMENTS}
         // In the editing mode we allow to show / hide less fields because
diff --git a/packages/compass-components/src/components/document-list/element.tsx b/packages/compass-components/src/components/document-list/element.tsx
index 6e06e22c5d7..7b2502d79f0 100644
--- a/packages/compass-components/src/components/document-list/element.tsx
+++ b/packages/compass-components/src/components/document-list/element.tsx
@@ -470,7 +470,7 @@ export const HadronElement: React.FunctionComponent<{
 
   const handleVisibleElementsChanged = useCallback(
     (totalVisibleFields: number) => {
-      element.setVisibleElementsCount(totalVisibleFields);
+      element.setMaxVisibleElementsCount(totalVisibleFields);
     },
     [element]
   );
@@ -693,7 +693,7 @@ export const HadronElement: React.FunctionComponent<{
             // to handle changes to the fields that are changed but then hidden
             // https://jira.mongodb.org/browse/COMPASS-5587
             showHideButton={!editingEnabled}
-            currentSize={element.visibleElementsCount}
+            currentSize={element.maxVisibleElementsCount}
             totalSize={children.length}
             minSize={DEFAULT_VISIBLE_ELEMENTS}
             // Same as that for Document renderer, in the editing mode we allow
diff --git a/packages/hadron-document/src/document.ts b/packages/hadron-document/src/document.ts
index 30ea5c07c3a..4ea95373a02 100644
--- a/packages/hadron-document/src/document.ts
+++ b/packages/hadron-document/src/document.ts
@@ -42,7 +42,7 @@ export class Document extends EventEmitter {
   currentType: 'Document';
   size: number | null = null;
   expanded = false;
-  visibleElementsCount = DEFAULT_VISIBLE_ELEMENTS;
+  maxVisibleElementsCount = DEFAULT_VISIBLE_ELEMENTS;
 
   /**
    * Send cancel event.
@@ -417,11 +417,11 @@ export class Document extends EventEmitter {
   }
 
   getVisibleElements() {
-    return [...this.elements].slice(0, this.visibleElementsCount);
+    return [...this.elements].slice(0, this.maxVisibleElementsCount);
   }
 
-  setVisibleElementsCount(newCount: number) {
-    this.visibleElementsCount = newCount;
+  setMaxVisibleElementsCount(newCount: number) {
+    this.maxVisibleElementsCount = newCount;
     this.emit(Events.VisibleElementsChanged, this);
   }
 
diff --git a/packages/hadron-document/src/element.ts b/packages/hadron-document/src/element.ts
index 4189455d850..56bae0b9f3d 100644
--- a/packages/hadron-document/src/element.ts
+++ b/packages/hadron-document/src/element.ts
@@ -69,7 +69,7 @@ export class Element extends EventEmitter {
   invalidTypeMessage?: string;
   decrypted: boolean;
   expanded = false;
-  visibleElementsCount = DEFAULT_VISIBLE_ELEMENTS;
+  maxVisibleElementsCount = DEFAULT_VISIBLE_ELEMENTS;
 
   /**
    * Cancel any modifications to the element.
@@ -840,18 +840,21 @@ export class Element extends EventEmitter {
   }
 
   getVisibleElements() {
-    if (!this.elements) {
+    if (!this.elements || !this.expanded) {
       return [];
     }
-    return [...this.elements].slice(0, this.visibleElementsCount);
+    return [...this.elements].slice(0, this.maxVisibleElementsCount);
   }
 
-  setVisibleElementsCount(newCount: number) {
+  setMaxVisibleElementsCount(newCount: number) {
     if (!this._isExpandable(this.originalExpandableValue)) {
       return;
     }
-    this.visibleElementsCount = newCount;
-    this._bubbleUp(Events.VisibleElementsChanged, this, this.getRoot());
+    this.maxVisibleElementsCount = newCount;
+
+    if (this.expanded) {
+      this._bubbleUp(Events.VisibleElementsChanged, this, this.getRoot());
+    }
   }
 
   getTotalVisibleElementsCount(): number {
diff --git a/packages/hadron-document/test/document.test.ts b/packages/hadron-document/test/document.test.ts
index 905be30a83a..f2686b67c98 100644
--- a/packages/hadron-document/test/document.test.ts
+++ b/packages/hadron-document/test/document.test.ts
@@ -2435,14 +2435,14 @@ describe('Document', function () {
 
     it("should return sliced list of nested elements if nested elements are more than element's visible element count", function () {
       const document = new Document(doc);
-      document.setVisibleElementsCount(1);
+      document.setMaxVisibleElementsCount(1);
       const visibleElements = document.getVisibleElements();
       expect(visibleElements).to.have.lengthOf(1);
       expect(visibleElements.map((element) => element.value)).to.deep.equal([
         'a1',
       ]);
 
-      document.setVisibleElementsCount(10);
+      document.setMaxVisibleElementsCount(10);
       expect(document.getVisibleElements()).to.have.lengthOf(2);
     });
   });
@@ -2458,8 +2458,8 @@ describe('Document', function () {
         },
       });
       document.on(DocumentEvents.VisibleElementsChanged, spy);
-      document.setVisibleElementsCount(10);
-      expect(document.visibleElementsCount).to.equal(10);
+      document.setMaxVisibleElementsCount(10);
+      expect(document.maxVisibleElementsCount).to.equal(10);
       expect(spy).to.be.calledWithExactly(document);
     });
   });
@@ -2514,7 +2514,7 @@ describe('Document', function () {
               b12: 'b1.2',
             },
           });
-          document.setVisibleElementsCount(1);
+          document.setMaxVisibleElementsCount(1);
           expect(document.getTotalVisibleElementsCount()).to.equal(1);
         });
       }
diff --git a/packages/hadron-document/test/element.test.ts b/packages/hadron-document/test/element.test.ts
index 9fce15ce807..41163375963 100644
--- a/packages/hadron-document/test/element.test.ts
+++ b/packages/hadron-document/test/element.test.ts
@@ -2825,23 +2825,27 @@ describe('Element', function () {
 
     context('when element is expandable', function () {
       it("should return total nested elements if nested elements are less than element's visible element count", function () {
-        expect(
-          new Element('list', [1, 2, 3]).getVisibleElements()
-        ).to.have.lengthOf(3);
-        expect(
-          new Element('ob', { prop1: '1', prop2: '2' }).getVisibleElements()
-        ).to.have.lengthOf(2);
+        const listElement = new Element('list', [1, 2, 3]);
+        expect(listElement.getVisibleElements()).to.have.lengthOf(0); // because it is not expanded
+        listElement.expand();
+        expect(listElement.getVisibleElements()).to.have.lengthOf(3);
+
+        const obElement = new Element('ob', { prop1: '1', prop2: '2' });
+        expect(obElement.getVisibleElements()).to.have.lengthOf(0); // because it is not expanded
+        obElement.expand();
+        expect(obElement.getVisibleElements()).to.have.lengthOf(2);
       });
 
       it("should return sliced list of nested elements if nested elements are more than element's visible element count", function () {
         const listElement = new Element('list', [1, 2, 3]);
-        listElement.setVisibleElementsCount(1);
+        listElement.expand();
+        listElement.setMaxVisibleElementsCount(1);
         const listVisibleElements = listElement.getVisibleElements();
         expect(listVisibleElements).to.have.lengthOf(1);
         expect(
           listVisibleElements.map((element) => element.value)
         ).to.deep.equal([{ value: 1 }]);
-        listElement.setVisibleElementsCount(25);
+        listElement.setMaxVisibleElementsCount(25);
         expect(listElement.getVisibleElements()).to.have.lengthOf(3);
 
         const obElement = new Element('ob', {
@@ -2849,13 +2853,14 @@ describe('Element', function () {
           prop2: '2',
           prop3: '3',
         });
-        obElement.setVisibleElementsCount(1);
+        obElement.expand();
+        obElement.setMaxVisibleElementsCount(1);
         const obVisibleElement = obElement.getVisibleElements();
         expect(obVisibleElement).to.have.lengthOf(1);
         expect(obVisibleElement.map((element) => element.value)).to.deep.equal([
           '1',
         ]);
-        obElement.setVisibleElementsCount(25);
+        obElement.setMaxVisibleElementsCount(25);
         expect(obElement.getVisibleElements()).to.have.lengthOf(3);
       });
     });
@@ -2867,8 +2872,10 @@ describe('Element', function () {
         const element = new Element('name', 'string');
         const spy = Sinon.spy();
         element.on(ElementEvents.VisibleElementsChanged, spy);
-        element.setVisibleElementsCount(10);
-        expect(element.visibleElementsCount).to.equal(DEFAULT_VISIBLE_ELEMENTS);
+        element.setMaxVisibleElementsCount(10);
+        expect(element.maxVisibleElementsCount).to.equal(
+          DEFAULT_VISIBLE_ELEMENTS
+        );
         expect(spy).to.not.be.called;
       });
     });
@@ -2883,8 +2890,13 @@ describe('Element', function () {
         });
         const [addressElement] = [...(rootElement.elements as ElementList)];
         rootElement.on(ElementEvents.VisibleElementsChanged, spy);
-        addressElement.setVisibleElementsCount(10);
-        expect(addressElement.visibleElementsCount).to.equal(10);
+        addressElement.setMaxVisibleElementsCount(10);
+        expect(addressElement.maxVisibleElementsCount).to.equal(10);
+        expect(spy).to.not.be.called; // not called because the element was not expanded and hence no visible changes
+
+        rootElement.expand(true);
+        addressElement.setMaxVisibleElementsCount(11);
+        expect(addressElement.maxVisibleElementsCount).to.equal(11);
         expect(spy).to.be.calledWithExactly(addressElement, rootElement);
       });
     });
@@ -2988,7 +3000,7 @@ describe('Element', function () {
               prop2: 'y',
             });
             nestedObElement.expand();
-            nestedObElement.setVisibleElementsCount(1);
+            nestedObElement.setMaxVisibleElementsCount(1);
             expect(nestedObElement.getTotalVisibleElementsCount()).to.equal(1);
           });
         }

From 73506e19ea130a8411ffc9b2e98e184f77ce9e0d Mon Sep 17 00:00:00 2001
From: Himanshu Singh <himanshu.singhs@outlook.in>
Date: Wed, 10 Jul 2024 17:25:17 +0200
Subject: [PATCH 05/10] chore: emit VisibleElementsChanged whenever an action
 happens which changes the visible elements

---
 packages/hadron-document/src/document.ts |  5 ++++
 packages/hadron-document/src/element.ts  | 31 ++++++++++++++++++------
 2 files changed, 29 insertions(+), 7 deletions(-)

diff --git a/packages/hadron-document/src/document.ts b/packages/hadron-document/src/document.ts
index 4ea95373a02..844e7b2b6b4 100644
--- a/packages/hadron-document/src/document.ts
+++ b/packages/hadron-document/src/document.ts
@@ -266,6 +266,7 @@ export class Document extends EventEmitter {
   insertBeginning(key: string | number, value: BSONValue): Element {
     const newElement = this.elements.insertBeginning(key, value);
     newElement._bubbleUp(ElementEvents.Added, newElement, this);
+    this.emit(Events.VisibleElementsChanged, this);
     return newElement;
   }
 
@@ -280,6 +281,7 @@ export class Document extends EventEmitter {
   insertEnd(key: string | number, value: BSONValue): Element {
     const newElement = this.elements.insertEnd(key, value);
     newElement._bubbleUp(ElementEvents.Added, newElement, this);
+    this.emit(Events.VisibleElementsChanged, this);
     return newElement;
   }
 
@@ -299,6 +301,7 @@ export class Document extends EventEmitter {
   ): Element | undefined {
     const newElement = this.elements.insertAfter(element, key, value);
     newElement?._bubbleUp(ElementEvents.Added, newElement, this);
+    this.emit(Events.VisibleElementsChanged, this);
     return newElement;
   }
 
@@ -403,6 +406,7 @@ export class Document extends EventEmitter {
       element.expand(true);
     }
     this.emit(Events.Expanded);
+    this.emit(Events.VisibleElementsChanged, this);
   }
 
   /**
@@ -414,6 +418,7 @@ export class Document extends EventEmitter {
       element.collapse();
     }
     this.emit(Events.Collapsed);
+    this.emit(Events.VisibleElementsChanged, this);
   }
 
   getVisibleElements() {
diff --git a/packages/hadron-document/src/element.ts b/packages/hadron-document/src/element.ts
index 56bae0b9f3d..42550d758f3 100644
--- a/packages/hadron-document/src/element.ts
+++ b/packages/hadron-document/src/element.ts
@@ -13,7 +13,7 @@ import type { TypeCastTypes } from 'hadron-type-checker';
 import type { ObjectId } from 'bson';
 import type { BSONArray, BSONObject, BSONValue } from './utils';
 import { getDefaultValueForType } from './utils';
-import { ElementEvents } from '.';
+import { DocumentEvents, ElementEvents } from '.';
 
 export const DATE_FORMAT = 'YYYY-MM-DD HH:mm:ss.SSS';
 export { Events };
@@ -303,6 +303,7 @@ export class Element extends EventEmitter {
     }
     const newElement = this.elements.insertAfter(element, key, value);
     newElement!._bubbleUp(Events.Added, newElement, this);
+    this.emitVisibleElementsChanged();
     return newElement!;
   }
 
@@ -320,6 +321,7 @@ export class Element extends EventEmitter {
     }
     const newElement = this.elements.insertEnd(key, value, true);
     this._bubbleUp(Events.Added, newElement);
+    this.emitVisibleElementsChanged();
     return newElement;
   }
 
@@ -692,6 +694,7 @@ export class Element extends EventEmitter {
     this.removed = true;
     if (this.parent) {
       this._bubbleUp(Events.Removed, this, this.parent);
+      this.emitVisibleElementsChanged(this.parent);
     }
   }
 
@@ -702,6 +705,9 @@ export class Element extends EventEmitter {
     if (this.isAdded()) {
       this.parent?.elements?.remove(this);
       this._bubbleUp(Events.Removed, this, this.parent);
+      if (this.parent) {
+        this.emitVisibleElementsChanged(this.parent);
+      }
       delete (this as any).parent;
     } else {
       if (this.originalExpandableValue) {
@@ -739,7 +745,8 @@ export class Element extends EventEmitter {
         element.expand(expandChildren);
       }
     }
-    this._bubbleUp(ElementEvents.Expanded, this);
+    this.emit(ElementEvents.Expanded, this);
+    this.emitVisibleElementsChanged();
   }
 
   /**
@@ -756,7 +763,8 @@ export class Element extends EventEmitter {
         element.collapse();
       }
     }
-    this._bubbleUp(ElementEvents.Collapsed, this);
+    this.emit(ElementEvents.Collapsed, this);
+    this.emitVisibleElementsChanged();
   }
 
   /**
@@ -851,10 +859,7 @@ export class Element extends EventEmitter {
       return;
     }
     this.maxVisibleElementsCount = newCount;
-
-    if (this.expanded) {
-      this._bubbleUp(Events.VisibleElementsChanged, this, this.getRoot());
-    }
+    this.emitVisibleElementsChanged();
   }
 
   getTotalVisibleElementsCount(): number {
@@ -871,6 +876,18 @@ export class Element extends EventEmitter {
     );
   }
 
+  private emitVisibleElementsChanged(targetElement: Element | Document = this) {
+    if (targetElement.isRoot()) {
+      targetElement.emit(DocumentEvents.VisibleElementsChanged, targetElement);
+    } else if (targetElement.expanded) {
+      targetElement._bubbleUp(
+        Events.VisibleElementsChanged,
+        targetElement,
+        targetElement.getRoot()
+      );
+    }
+  }
+
   /**
    * @deprecated Use ElementEvents import instead
    */

From 0854af1052fd712b38f6431fa560163148d5241b Mon Sep 17 00:00:00 2001
From: Himanshu Singh <himanshu.singhs@outlook.in>
Date: Wed, 10 Jul 2024 17:57:50 +0200
Subject: [PATCH 06/10] chore: fix compass components tests

---
 .../src/components/document-list/document.spec.tsx          | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/compass-components/src/components/document-list/document.spec.tsx b/packages/compass-components/src/components/document-list/document.spec.tsx
index aed851fb941..813c8b0f6f6 100644
--- a/packages/compass-components/src/components/document-list/document.spec.tsx
+++ b/packages/compass-components/src/components/document-list/document.spec.tsx
@@ -258,7 +258,7 @@ describe('Document', function () {
       prop3: 'prop3',
       prop4: 'prop4',
     });
-    hadronDoc.setVisibleElementsCount(2);
+    hadronDoc.setMaxVisibleElementsCount(2);
     render(<Document value={hadronDoc}></Document>);
     expect(screen.getByText('prop1')).to.exist;
     expect(screen.getByText('prop2')).to.exist;
@@ -266,7 +266,7 @@ describe('Document', function () {
     expect(() => screen.getByText('prop4')).to.throw;
     expect(screen.getByText('Show 2 more fields')).to.exist;
 
-    hadronDoc.setVisibleElementsCount(25);
+    hadronDoc.setMaxVisibleElementsCount(25);
     await waitFor(() => {
       expect(screen.getByText('prop3')).to.exist;
       expect(screen.getByText('prop4')).to.exist;
@@ -291,7 +291,7 @@ describe('Document', function () {
     expect(screen.getByText('prop3')).to.exist;
     expect(screen.getByText('prop4')).to.exist;
 
-    nestedElement.setVisibleElementsCount(2);
+    nestedElement.setMaxVisibleElementsCount(2);
     await waitFor(() => {
       expect(() => screen.getByText('prop3')).to.throw;
       expect(() => screen.getByText('prop4')).to.throw;

From ea9877112b88c6fff44a8d839c7185aa915a4b3a Mon Sep 17 00:00:00 2001
From: Himanshu Singh <himanshu.singhs@outlook.in>
Date: Fri, 12 Jul 2024 09:34:47 +0200
Subject: [PATCH 07/10] chore: align design for show more toggle as per
 discussion

---
 .../document-list/document.spec.tsx           |  1 +
 .../src/components/document-list/document.tsx |  6 +-
 .../src/components/document-list/element.tsx  | 10 +--
 .../src/components/document-list/index.ts     |  2 +-
 ...gle-group.tsx => visible-field-toggle.tsx} | 64 +++++++++++++------
 ...pec.tsx => visible-fields-toggle.spec.tsx} | 26 +++++++-
 6 files changed, 78 insertions(+), 31 deletions(-)
 rename packages/compass-components/src/components/document-list/{document-fields-toggle-group.tsx => visible-field-toggle.tsx} (52%)
 rename packages/compass-components/src/components/document-list/{document-fields-toggle-group.spec.tsx => visible-fields-toggle.spec.tsx} (78%)

diff --git a/packages/compass-components/src/components/document-list/document.spec.tsx b/packages/compass-components/src/components/document-list/document.spec.tsx
index 813c8b0f6f6..90dcf9f1edf 100644
--- a/packages/compass-components/src/components/document-list/document.spec.tsx
+++ b/packages/compass-components/src/components/document-list/document.spec.tsx
@@ -296,5 +296,6 @@ describe('Document', function () {
       expect(() => screen.getByText('prop3')).to.throw;
       expect(() => screen.getByText('prop4')).to.throw;
     });
+    expect(screen.getByText('Show 2 more fields in nested')).to.exist;
   });
 });
diff --git a/packages/compass-components/src/components/document-list/document.tsx b/packages/compass-components/src/components/document-list/document.tsx
index 266ef4a1a35..2ae1eda6af0 100644
--- a/packages/compass-components/src/components/document-list/document.tsx
+++ b/packages/compass-components/src/components/document-list/document.tsx
@@ -13,7 +13,7 @@ import { AutoFocusContext } from './auto-focus-context';
 import { useForceUpdate } from './use-force-update';
 import { HadronElement } from './element';
 import { usePrevious } from './use-previous';
-import DocumentFieldsToggleGroup from './document-fields-toggle-group';
+import VisibleFieldsToggle from './visible-field-toggle';
 import { documentTypography } from './typography';
 
 function useHadronDocument(doc: HadronDocumentType) {
@@ -140,7 +140,7 @@ const HadronDocument: React.FunctionComponent<{
           })}
         </AutoFocusContext.Provider>
       </div>
-      <DocumentFieldsToggleGroup
+      <VisibleFieldsToggle
         // TODO: "Hide items" button will only be shown when document is not
         // edited because it's not decided how to handle changes to the fields
         // that are changed but then hidden
@@ -153,7 +153,7 @@ const HadronDocument: React.FunctionComponent<{
         // historically Compass was doing this for "performance" reasons
         step={editing ? 100 : 1000}
         onSizeChange={handleVisibleFieldsChanged}
-      ></DocumentFieldsToggleGroup>
+      ></VisibleFieldsToggle>
     </div>
   );
 };
diff --git a/packages/compass-components/src/components/document-list/element.tsx b/packages/compass-components/src/components/document-list/element.tsx
index 7b2502d79f0..c5b2ba51571 100644
--- a/packages/compass-components/src/components/document-list/element.tsx
+++ b/packages/compass-components/src/components/document-list/element.tsx
@@ -27,7 +27,7 @@ import { css, cx } from '@leafygreen-ui/emotion';
 import { palette } from '@leafygreen-ui/palette';
 import { Icon } from '../leafygreen';
 import { useDarkMode } from '../../hooks/use-theme';
-import DocumentFieldsToggleGroup from './document-fields-toggle-group';
+import VisibleFieldsToggle from './visible-field-toggle';
 
 function getEditorByType(type: HadronElementType['type']) {
   switch (type) {
@@ -687,7 +687,8 @@ export const HadronElement: React.FunctionComponent<{
               ></HadronElement>
             );
           })}
-          <DocumentFieldsToggleGroup
+          <VisibleFieldsToggle
+            parentFieldName={key.value}
             // TODO: (Same as that for Document) "Hide items" button will only
             // be shown when document is not edited because it's not decided how
             // to handle changes to the fields that are changed but then hidden
@@ -703,9 +704,10 @@ export const HadronElement: React.FunctionComponent<{
             onSizeChange={handleVisibleElementsChanged}
             style={{
               paddingLeft: nestedElementsVisibilityToggleOffset,
-              paddingTop: spacing[200],
+              paddingTop: spacing[100],
+              paddingBottom: spacing[100],
             }}
-          ></DocumentFieldsToggleGroup>
+          ></VisibleFieldsToggle>
         </>
       )}
     </>
diff --git a/packages/compass-components/src/components/document-list/index.ts b/packages/compass-components/src/components/document-list/index.ts
index cd11603f6b7..38b67e68498 100644
--- a/packages/compass-components/src/components/document-list/index.ts
+++ b/packages/compass-components/src/components/document-list/index.ts
@@ -1,4 +1,4 @@
 export { default as DocumentActionsGroup } from './document-actions-group';
-export { default as DocumentFieldsToggleGroup } from './document-fields-toggle-group';
+export { default as VisibleFieldsToggle } from './visible-field-toggle';
 export { default as Document } from './document';
 export { default as DocumentEditActionsFooter } from './document-edit-actions-footer';
diff --git a/packages/compass-components/src/components/document-list/document-fields-toggle-group.tsx b/packages/compass-components/src/components/document-list/visible-field-toggle.tsx
similarity index 52%
rename from packages/compass-components/src/components/document-list/document-fields-toggle-group.tsx
rename to packages/compass-components/src/components/document-list/visible-field-toggle.tsx
index eef91d156ee..b45dd1c19f2 100644
--- a/packages/compass-components/src/components/document-list/document-fields-toggle-group.tsx
+++ b/packages/compass-components/src/components/document-list/visible-field-toggle.tsx
@@ -1,7 +1,8 @@
 import React, { useCallback, useMemo } from 'react';
-import { css } from '@leafygreen-ui/emotion';
+import { css, cx } from '@leafygreen-ui/emotion';
 import { spacing } from '@leafygreen-ui/tokens';
-import { Button, Icon } from '../leafygreen';
+import { Icon, Link } from '../leafygreen';
+import { documentTypography } from './typography';
 
 const container = css({
   display: 'flex',
@@ -11,12 +12,24 @@ const container = css({
   paddingRight: spacing[3],
 });
 
-const button = css({
-  flex: 'none',
+const linkButtonStyles = css({
+  border: 'none',
+  background: 'none',
+  padding: 0,
+  fontFamily: documentTypography.fontFamily,
+  fontSize: `${documentTypography.fontSize}px`,
+  lineHeight: `${documentTypography.lineHeight}px`,
+  '& > span': {
+    display: 'inline-flex',
+    alignItems: 'center',
+    gap: spacing[100],
+  },
 });
 
-const DocumentFieldsToggleGroup: React.FunctionComponent<{
+const VisibleFieldsToggle: React.FunctionComponent<{
   showHideButton?: boolean;
+  buttonClassName?: string;
+  parentFieldName?: string;
   currentSize: number;
   totalSize: number;
   minSize?: number;
@@ -25,6 +38,8 @@ const DocumentFieldsToggleGroup: React.FunctionComponent<{
   onSizeChange(newSize: number): void;
 }> = ({
   showHideButton = true,
+  buttonClassName,
+  parentFieldName,
   currentSize,
   totalSize,
   minSize = 25,
@@ -60,32 +75,41 @@ const DocumentFieldsToggleGroup: React.FunctionComponent<{
     return null;
   }
 
+  const showButtonText = `Show ${showSizeDiff} more ${
+    showSizeDiff === 1 ? 'field' : 'fields'
+  }${parentFieldName ? ` in ${parentFieldName}` : ''}`;
+  const hideButtonText = `Hide ${hideSizeDiff} ${
+    hideSizeDiff === 1 ? 'field' : 'fields'
+  }${parentFieldName ? ` in ${parentFieldName}` : ''}`;
+
   return (
     <div className={container} style={style}>
       {isShowButtonVisible && (
-        <Button
-          size="xsmall"
-          leftGlyph={<Icon glyph="ArrowDown"></Icon>}
+        <Link
+          as="button"
+          hideExternalIcon={true}
+          className={cx(linkButtonStyles, buttonClassName)}
           onClick={onShowClick}
-          className={button}
-          data-testid="show-more-fields-button"
+          aria-label={showButtonText}
         >
-          Show {showSizeDiff} more fields
-        </Button>
+          <Icon size="xsmall" glyph="ArrowDown"></Icon>
+          {showButtonText}
+        </Link>
       )}
       {isHideButtonVisible && (
-        <Button
-          size="xsmall"
-          leftGlyph={<Icon glyph="ArrowUp"></Icon>}
+        <Link
+          as="button"
+          hideExternalIcon={true}
+          className={cx(linkButtonStyles, buttonClassName)}
           onClick={onHideClick}
-          className={button}
-          data-testid="hide-fields-button"
+          aria-label={hideButtonText}
         >
-          Hide {hideSizeDiff} fields
-        </Button>
+          <Icon size="xsmall" glyph="ArrowUp"></Icon>
+          {hideButtonText}
+        </Link>
       )}
     </div>
   );
 };
 
-export default DocumentFieldsToggleGroup;
+export default VisibleFieldsToggle;
diff --git a/packages/compass-components/src/components/document-list/document-fields-toggle-group.spec.tsx b/packages/compass-components/src/components/document-list/visible-fields-toggle.spec.tsx
similarity index 78%
rename from packages/compass-components/src/components/document-list/document-fields-toggle-group.spec.tsx
rename to packages/compass-components/src/components/document-list/visible-fields-toggle.spec.tsx
index 8538a9a5ee1..c66451ac6ab 100644
--- a/packages/compass-components/src/components/document-list/document-fields-toggle-group.spec.tsx
+++ b/packages/compass-components/src/components/document-list/visible-fields-toggle.spec.tsx
@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import { expect } from 'chai';
 import { cleanup, render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import DocumentFieldsToggleGroup from './document-fields-toggle-group';
+import VisibleFieldsToggle from './visible-field-toggle';
 
 function TestComponent({
   initialSize = 10,
@@ -10,20 +10,29 @@ function TestComponent({
   totalSize = Infinity,
   minSize = 10,
   step = 10,
+  parentFieldName,
+}: {
+  initialSize?: number;
+  showHideButton?: boolean;
+  totalSize?: number;
+  minSize?: number;
+  step?: number;
+  parentFieldName?: string;
 }) {
   const [size, setSize] = useState(initialSize);
 
   return (
     <div>
       <div>Showing {size} items</div>
-      <DocumentFieldsToggleGroup
+      <VisibleFieldsToggle
         currentSize={size}
         showHideButton={showHideButton}
         totalSize={totalSize}
         minSize={minSize}
         step={step}
         onSizeChange={setSize}
-      ></DocumentFieldsToggleGroup>
+        parentFieldName={parentFieldName}
+      ></VisibleFieldsToggle>
     </div>
   );
 }
@@ -41,6 +50,17 @@ describe('DocumentFieldsToggleGroup', function () {
     expect(screen.getByText('Hide 10 fields')).to.exist;
   });
 
+  it('should include parentFieldName in the label when provided', function () {
+    render(
+      <TestComponent
+        initialSize={10}
+        minSize={0}
+        parentFieldName="reviews"
+      ></TestComponent>
+    );
+    expect(screen.getByText('Hide 10 fields in reviews')).to.exist;
+  });
+
   it('should show more items when "Show items" is clicked', function () {
     render(<TestComponent></TestComponent>);
     expect(screen.getByText('Showing 10 items')).to.exist;

From c3199517cffdf075a6a5ade13e2eff9e9588a647 Mon Sep 17 00:00:00 2001
From: Himanshu Singh <himanshu.singhs@outlook.in>
Date: Fri, 12 Jul 2024 12:07:22 +0200
Subject: [PATCH 08/10] chore: restore test-id for e2e tests

---
 .../src/components/document-list/visible-field-toggle.tsx       | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/compass-components/src/components/document-list/visible-field-toggle.tsx b/packages/compass-components/src/components/document-list/visible-field-toggle.tsx
index b45dd1c19f2..0c21397299c 100644
--- a/packages/compass-components/src/components/document-list/visible-field-toggle.tsx
+++ b/packages/compass-components/src/components/document-list/visible-field-toggle.tsx
@@ -91,6 +91,7 @@ const VisibleFieldsToggle: React.FunctionComponent<{
           className={cx(linkButtonStyles, buttonClassName)}
           onClick={onShowClick}
           aria-label={showButtonText}
+          data-testid="show-more-fields-button"
         >
           <Icon size="xsmall" glyph="ArrowDown"></Icon>
           {showButtonText}
@@ -103,6 +104,7 @@ const VisibleFieldsToggle: React.FunctionComponent<{
           className={cx(linkButtonStyles, buttonClassName)}
           onClick={onHideClick}
           aria-label={hideButtonText}
+          data-testid="hide-fields-button"
         >
           <Icon size="xsmall" glyph="ArrowUp"></Icon>
           {hideButtonText}

From 04e716b2043d05030574b54a49b05e622b2e1f95 Mon Sep 17 00:00:00 2001
From: Himanshu Singh <himanshu.singhs@outlook.in>
Date: Fri, 19 Jul 2024 13:59:02 +0200
Subject: [PATCH 09/10] chore: addresses PR feedback about design and
 isExpandable

---
 .../src/components/document-list/document.tsx | 20 +++++-
 .../src/components/document-list/element.tsx  | 65 +++++++++++++------
 .../document-list/visible-field-toggle.tsx    | 10 ++-
 packages/hadron-document/src/element.ts       |  2 +-
 4 files changed, 68 insertions(+), 29 deletions(-)

diff --git a/packages/compass-components/src/components/document-list/document.tsx b/packages/compass-components/src/components/document-list/document.tsx
index 2ae1eda6af0..e1f42bc5e69 100644
--- a/packages/compass-components/src/components/document-list/document.tsx
+++ b/packages/compass-components/src/components/document-list/document.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { css } from '@leafygreen-ui/emotion';
 import type {
   default as HadronDocumentType,
@@ -11,7 +11,7 @@ import {
 } from 'hadron-document';
 import { AutoFocusContext } from './auto-focus-context';
 import { useForceUpdate } from './use-force-update';
-import { HadronElement } from './element';
+import { calculateShowMoreToggleOffset, HadronElement } from './element';
 import { usePrevious } from './use-previous';
 import VisibleFieldsToggle from './visible-field-toggle';
 import { documentTypography } from './typography';
@@ -105,6 +105,19 @@ const HadronDocument: React.FunctionComponent<{
     [document]
   );
 
+  // To render the "Show more" toggle for the document we need to calculate a
+  // proper offset so that it aligns with the expand icon of top level fields
+  // Note: We're not sharing the logic with element
+  const showMoreToggleOffset = useMemo(
+    () =>
+      calculateShowMoreToggleOffset({
+        editable,
+        level: 0,
+        alignWithNestedExpandIcon: false,
+      }),
+    [editable]
+  );
+
   return (
     <div>
       <div
@@ -153,6 +166,9 @@ const HadronDocument: React.FunctionComponent<{
         // historically Compass was doing this for "performance" reasons
         step={editing ? 100 : 1000}
         onSizeChange={handleVisibleFieldsChanged}
+        style={{
+          paddingLeft: showMoreToggleOffset,
+        }}
       ></VisibleFieldsToggle>
     </div>
   );
diff --git a/packages/compass-components/src/components/document-list/element.tsx b/packages/compass-components/src/components/document-list/element.tsx
index c5b2ba51571..de3e51e54c2 100644
--- a/packages/compass-components/src/components/document-list/element.tsx
+++ b/packages/compass-components/src/components/document-list/element.tsx
@@ -363,6 +363,38 @@ const elementKeyDarkMode = css({
   color: palette.gray.light2,
 });
 
+const calculateElementSpacerWidth = (editable: boolean, level: number) => {
+  return (editable ? spacing[200] : 0) + spacing[400] * level;
+};
+
+export const calculateShowMoreToggleOffset = ({
+  editable,
+  level,
+  alignWithNestedExpandIcon,
+}: {
+  editable: boolean;
+  level: number;
+  alignWithNestedExpandIcon: boolean;
+}) => {
+  // the base padding that we have on all elements rendered in the document
+  const BASE_PADDING_LEFT = spacing[200];
+  const OFFSET_WHEN_EDITABLE = editable
+    ? // space taken by element actions
+      spacing[400] +
+      // space and margin taken by line number element
+      spacing[400] +
+      spacing[100] +
+      // element spacer width that we render
+      calculateElementSpacerWidth(editable, level)
+    : 0;
+  const EXPAND_ICON_SIZE = spacing[400];
+  return (
+    BASE_PADDING_LEFT +
+    OFFSET_WHEN_EDITABLE +
+    (alignWithNestedExpandIcon ? EXPAND_ICON_SIZE : 0)
+  );
+};
+
 export const HadronElement: React.FunctionComponent<{
   value: HadronElementType;
   editable: boolean;
@@ -412,27 +444,22 @@ export const HadronElement: React.FunctionComponent<{
     return spacing[400];
   }, [lineNumberSize, editingEnabled]);
 
-  const elementSpacerWidth = useMemo(() => {
-    return (editable ? spacing[200] : 0) + spacing[400] * level;
-  }, [editable, level]);
+  const elementSpacerWidth = useMemo(
+    () => calculateElementSpacerWidth(editable, level),
+    [editable, level]
+  );
 
   // To render the "Show more" toggle for the nested expandable elements we need
   // to calculate a proper offset so that it aligns with the nesting level
-  const nestedElementsVisibilityToggleOffset = useMemo(() => {
-    // the base padding that we have on all elements rendered in the document
-    const BASE_PADDING_LEFT = spacing[200];
-    const OFFSET_WHEN_EDITABLE = editable
-      ? // space taken by element actions
-        spacing[400] +
-        // space and margin taken by line number element
-        spacing[400] +
-        spacing[100] +
-        // element spacer width that we render
-        elementSpacerWidth
-      : 0;
-    const EXPAND_ICON_SIZE = spacing[400];
-    return BASE_PADDING_LEFT + OFFSET_WHEN_EDITABLE + EXPAND_ICON_SIZE;
-  }, [editable, elementSpacerWidth]);
+  const nestedElementsVisibilityToggleOffset = useMemo(
+    () =>
+      calculateShowMoreToggleOffset({
+        editable,
+        level,
+        alignWithNestedExpandIcon: true,
+      }),
+    [editable, level]
+  );
 
   const isValid = key.valid && value.valid;
   const shouldShowActions = editingEnabled;
@@ -704,8 +731,6 @@ export const HadronElement: React.FunctionComponent<{
             onSizeChange={handleVisibleElementsChanged}
             style={{
               paddingLeft: nestedElementsVisibilityToggleOffset,
-              paddingTop: spacing[100],
-              paddingBottom: spacing[100],
             }}
           ></VisibleFieldsToggle>
         </>
diff --git a/packages/compass-components/src/components/document-list/visible-field-toggle.tsx b/packages/compass-components/src/components/document-list/visible-field-toggle.tsx
index 0c21397299c..a0ffcdccb49 100644
--- a/packages/compass-components/src/components/document-list/visible-field-toggle.tsx
+++ b/packages/compass-components/src/components/document-list/visible-field-toggle.tsx
@@ -6,10 +6,8 @@ import { documentTypography } from './typography';
 
 const container = css({
   display: 'flex',
-  gap: spacing[2],
-  paddingTop: spacing[3],
-  paddingLeft: spacing[3],
-  paddingRight: spacing[3],
+  gap: spacing[200],
+  paddingTop: spacing[200],
 });
 
 const linkButtonStyles = css({
@@ -93,7 +91,7 @@ const VisibleFieldsToggle: React.FunctionComponent<{
           aria-label={showButtonText}
           data-testid="show-more-fields-button"
         >
-          <Icon size="xsmall" glyph="ArrowDown"></Icon>
+          <Icon size="small" glyph="CaretDown"></Icon>
           {showButtonText}
         </Link>
       )}
@@ -106,7 +104,7 @@ const VisibleFieldsToggle: React.FunctionComponent<{
           aria-label={hideButtonText}
           data-testid="hide-fields-button"
         >
-          <Icon size="xsmall" glyph="ArrowUp"></Icon>
+          <Icon size="small" glyph="CaretUp"></Icon>
           {hideButtonText}
         </Link>
       )}
diff --git a/packages/hadron-document/src/element.ts b/packages/hadron-document/src/element.ts
index 9bbb52ef5bf..9898ed76bc6 100644
--- a/packages/hadron-document/src/element.ts
+++ b/packages/hadron-document/src/element.ts
@@ -858,7 +858,7 @@ export class Element extends EventEmitter {
   }
 
   setMaxVisibleElementsCount(newCount: number) {
-    if (!this._isExpandable(this.originalExpandableValue)) {
+    if (!this._isExpandable()) {
       return;
     }
     this.maxVisibleElementsCount = newCount;

From 69e779a57e1b4e5cd314159ca3505192aaa0dcf7 Mon Sep 17 00:00:00 2001
From: Himanshu Singh <himanshu.singhs@outlook.in>
Date: Fri, 19 Jul 2024 14:09:24 +0200
Subject: [PATCH 10/10] chore: fixes comment

---
 .../compass-components/src/components/document-list/document.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/compass-components/src/components/document-list/document.tsx b/packages/compass-components/src/components/document-list/document.tsx
index e1f42bc5e69..d7bef7101be 100644
--- a/packages/compass-components/src/components/document-list/document.tsx
+++ b/packages/compass-components/src/components/document-list/document.tsx
@@ -107,7 +107,6 @@ const HadronDocument: React.FunctionComponent<{
 
   // To render the "Show more" toggle for the document we need to calculate a
   // proper offset so that it aligns with the expand icon of top level fields
-  // Note: We're not sharing the logic with element
   const showMoreToggleOffset = useMemo(
     () =>
       calculateShowMoreToggleOffset({