feat: Add show/hide VSCODE-746 by tculig · Pull Request #1253 · mongodb-js/vscode

tculig · 2026-02-23T08:30:12Z

Description

https://jira.mongodb.org/browse/VSCODE-746

Checklist

New tests and/or benchmarks are included
Documentation is changed or added
I have signed the MongoDB Contributor License Agreement (https://www.mongodb.com/legal/contributor-agreement)

Motivation and Context

Bugfix
New feature
Dependency update
Misc

Open Questions

Dependents

Types of changes

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

This keeps the show/hide more button in the same place in the vieweport when clicking hide. This is to avoid the user getting lost in long documents.

lerouxb · 2026-03-02T13:15:55Z

src/views/data-browsing-app/monaco-viewer.tsx

+  // Find the line where field MAX_INITIAL_FIELDS+1 starts
+  const collapseAtLine = useMemo(
+    () =>
+      findCollapseLineNumber(


This has to execute after the arrays/objects get folded otherwise it seems to be taking them into account.

Repro:

use('test'); db.test.insertOne({ foo: { a: 1, b: 2, c: 3, d: 4, e: 5, f: 6, g: 7, h: 8, i: 9, j: 10, k: 11, l: 12, m: 13, n: 14, o: 15, p: 16, q: 17, r: 18, s: 19, t: 20, u: 21, v: 22, w: 23, x: 24, y: 25, z: 26 }, bar: { a: 1, b: 2, c: 3, d: 4, e: 5, f: 6, g: 7, h: 8, i: 9, j: 10, k: 11, l: 12, m: 13, n: 14, o: 15, p: 16, q: 17, r: 18, s: 19, t: 20, u: 21, v: 22, w: 23, x: 24, y: 25, z: 26 }, a: 1, b: 2, c: 3, d: 4, e: 5, f: 6, g: 7, h: 8, i: 9, j: 10, k: 11, l: 12, m: 13, n: 14, o: 15, p: 16, q: 17, r: 18, s: 19, t: 20, u: 21, v: 22, w: 23, x: 24, y: 25, z: 26 });

lerouxb · 2026-03-02T13:18:05Z

src/views/data-browsing-app/monaco-viewer.tsx

+  const lines = text.split('\n');
+  let keyIndex = 0;
+
+  for (let i = 0; i < lines.length; i++) {


I'm not really following why you're looping through the lines rather than the top-level keys. The editor folds all nested things by default so do you even have to look at the lines to determine how many lines down an object key+value is?

Copilot

Pull request overview

Adds a “Show more / Show less” affordance to the data-browsing Monaco document viewer so large documents can be initially collapsed and expanded on demand (VSCODE-746).

Changes:

Introduces initial field-collapsing logic and a show more/less toggle UI in MonacoViewer.
Adds unit tests covering the show more/less behavior and scroll restoration on collapse.
Adds a JSDOM polyfill for requestAnimationFrame to support the new behavior in tests.

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 3 comments.

File	Description
`src/views/data-browsing-app/monaco-viewer.tsx`	Adds collapse-height calculations, show more/less buttons, and scroll-position restoration when collapsing.
`src/test/suite/views/data-browsing-app/monaco-viewer.test.tsx`	Adds test coverage for show more/less toggle text, behavior, and scrollBy usage.
`src/test/setup-webview.ts`	Polyfills `requestAnimationFrame` / `cancelAnimationFrame` for the test environment.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-03-02T21:33:19Z

src/views/data-browsing-app/monaco-viewer.tsx

+const MAX_INITIAL_FIELDS_SHOWING = 15;
+
+function isExpandedValue(value: unknown): boolean {
+  if (Array.isArray(value)) return true;
+  if (value === null || typeof value !== 'object') return false;


MAX_INITIAL_FIELDS_SHOWING is set to 15, but the new test cases in this PR assume the toggle only appears when there are more than 25 fields. As written, documents with 25 fields will still be treated as having “more fields”, causing the UI behavior (and tests) to be inconsistent. Align the threshold used by the component and the tests (ideally reuse a single constant/shared source of truth).

Copilot · 2026-03-02T21:33:19Z

src/views/data-browsing-app/monaco-viewer.tsx

+        void editorInstance
+          .getAction('editor.foldLevel2')
+          ?.run()
+          .then(() => {
+            updateCollapsedHeight();
+            prevContentHeightRef.current = editorInstance.getContentHeight();
+            collapsedHeightInitializedRef.current = true;
+          });


The fold initialization chain can throw at runtime: getAction('editor.foldLevel2')?.run().then(...) will still call .then even if the action is missing (optional chaining only covers getAction), and will also fail if run() returns undefined. Update this to safely handle a missing action and optional/promise return so the viewer doesn’t crash in environments where the action isn’t available (this also makes tests/mocks safer).

Suggested change

void editorInstance

.getAction('editor.foldLevel2')

?.run()

.then(() => {

updateCollapsedHeight();

prevContentHeightRef.current = editorInstance.getContentHeight();

collapsedHeightInitializedRef.current = true;

});

const finalizeInitialization = () => {

updateCollapsedHeight();

prevContentHeightRef.current = editorInstance.getContentHeight();

collapsedHeightInitializedRef.current = true;

};

try {

const foldAction = editorInstance.getAction('editor.foldLevel2');

const maybePromise = foldAction?.run();

if (

maybePromise &&

typeof (maybePromise as unknown as { then?: unknown }).then ===

'function'

) {

void (maybePromise as Promise<unknown>).then(

() => {

finalizeInitialization();

},

() => {

finalizeInitialization();

},

);

} else {

// Action missing or ran synchronously without a promise.

finalizeInitialization();

}

} catch {

// If folding fails for any reason, still complete initialization so

// the viewer remains usable.

finalizeInitialization();

}

Copilot · 2026-03-02T21:33:19Z

src/test/suite/views/data-browsing-app/monaco-viewer.test.tsx

+    it('should not show toggle buttons for documents with ≤ 25 fields', function () {
+      render(<MonacoViewer document={makeDocument(25)} themeKind="vs-dark" />);
+
+      expect(screen.queryByText(/Show .* more field/)).to.not.exist;
+      expect(screen.queryByText('Show less')).to.not.exist;
+    });
+
+    it('should show "Show N more fields" button for documents with > 25 fields', function () {
+      render(<MonacoViewer document={makeDocument(30)} themeKind="vs-dark" />);
+
+      const btn = screen.getByText(/Show 5 more fields/);
+      expect(btn).to.exist;
+      expect(btn.getAttribute('data-expanded')).to.equal('false');


These tests assert the show/hide toggle threshold at 25 fields (e.g., 30 fields → “Show 5 more fields”). In the component, MAX_INITIAL_FIELDS_SHOWING is currently 15, which would make the expected hidden count and threshold different and will cause this suite to fail. Either update the component threshold or adjust the test expectations to match the intended UX.

lerouxb · 2026-03-03T10:54:34Z

src/views/data-browsing-app/monaco-viewer.tsx

+  return proto === Object.prototype || proto === null;
+}
+
+function findCollapseLineNumber(


It now has a new problem where you count fields but it collapses at that many lines.

It is making me think that maybe we should change the problem so that it only displays N number of lines and then the text doesn't say "Show X more fields", it says "Show X more lines".

So forget about counting fields maybe? See this now tried to count fields but it collapsed at that many lines:

And I'm going to guess that 24 is wrong. So we can do fields or lines but not both. At least.. it will be a lot simpler if we stick to just one.

Add show/hide

ae838a3

tculig changed the title ~~Add show/hide~~ feat: Add show/hide VSCODE-746 Feb 23, 2026

tculig and others added 7 commits March 1, 2026 22:06

Fix eqeqeq

841a1d5

Merge branch 'main' into VSCODE-746-show-more-mode

54e6aa1

lint

71943be

Simplify the line count logic

7142034

Prevent jerky content movement

cf42be1

This keeps the show/hide more button in the same place in the vieweport when clicking hide. This is to avoid the user getting lost in long documents.

add unit tests

cf85565

lint

3766207

tculig marked this pull request as ready for review March 1, 2026 22:30

tculig requested a review from a team as a code owner March 1, 2026 22:30

lerouxb reviewed Mar 2, 2026

View reviewed changes

Merge branch 'main' into VSCODE-746-show-more-mode

c75bc10

Copilot AI review requested due to automatic review settings March 2, 2026 21:28

Fix show/hide issues

fd4ce45

tculig force-pushed the VSCODE-746-show-more-mode branch from 46317b3 to fd4ce45 Compare March 2, 2026 21:29

Copilot started reviewing on behalf of tculig March 2, 2026 21:29 View session

Copilot AI reviewed Mar 2, 2026

View reviewed changes

tculig and others added 2 commits March 2, 2026 22:46

Update monaco-viewer.test.tsx

8902eca

Merge branch 'main' into VSCODE-746-show-more-mode

4430019

lerouxb reviewed Mar 3, 2026

View reviewed changes

tculig added 3 commits March 3, 2026 15:08

Merge branch 'main' into VSCODE-746-show-more-mode

13e1215

Update monaco-viewer.tsx

6f56c7e

Update monaco-viewer.tsx

453b5f7

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Add show/hide VSCODE-746#1253

feat: Add show/hide VSCODE-746#1253
tculig wants to merge 15 commits intomongodb-js:mainfrom
tculig:VSCODE-746-show-more-mode

tculig commented Feb 23, 2026 •

edited

Loading

Uh oh!

lerouxb Mar 2, 2026

Uh oh!

lerouxb Mar 2, 2026

Uh oh!

lerouxb Mar 2, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Mar 2, 2026

Uh oh!

Copilot AI Mar 2, 2026

Uh oh!

Copilot AI Mar 2, 2026

Uh oh!

lerouxb Mar 3, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

-        void editorInstance
-          .getAction('editor.foldLevel2')
-          ?.run()
-          .then(() => {
-            updateCollapsedHeight();
-            prevContentHeightRef.current = editorInstance.getContentHeight();
-            collapsedHeightInitializedRef.current = true;
-          });
+        const finalizeInitialization = () => {
+          updateCollapsedHeight();
+          prevContentHeightRef.current = editorInstance.getContentHeight();
+          collapsedHeightInitializedRef.current = true;
+        };
+        try {
+          const foldAction = editorInstance.getAction('editor.foldLevel2');
+          const maybePromise = foldAction?.run();
+          if (
+            maybePromise &&
+            typeof (maybePromise as unknown as { then?: unknown }).then ===
+              'function'
+          ) {
+            void (maybePromise as Promise<unknown>).then(
+              () => {
+                finalizeInitialization();
+              },
+              () => {
+                finalizeInitialization();
+              },
+            );
+          } else {
+            // Action missing or ran synchronously without a promise.
+            finalizeInitialization();
+          }
+        } catch {
+          // If folding fails for any reason, still complete initialization so
+          // the viewer remains usable.
+          finalizeInitialization();
+        }

Conversation

tculig commented Feb 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Checklist

Motivation and Context

Open Questions

Dependents

Types of changes

Uh oh!

lerouxb Mar 2, 2026

Choose a reason for hiding this comment

Uh oh!

lerouxb Mar 2, 2026

Choose a reason for hiding this comment

Uh oh!

lerouxb Mar 2, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Mar 2, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 2, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 2, 2026

Choose a reason for hiding this comment

Uh oh!

lerouxb Mar 3, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

tculig commented Feb 23, 2026 •

edited

Loading