Island rhythms/projection redesign by IslandRhythms · Pull Request #166 · mongoosejs/studio

IslandRhythms · 2026-02-13T23:17:31Z

No description provided.

vercel · 2026-02-13T23:17:35Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
studio	Ready	Preview, Comment	Mar 13, 2026 10:03pm

Copilot

Pull request overview

Redesigns the Models “table” view projection UX to be inline (projection text input + add/remove columns) and persists projection selections per model, along with associated layout/styling updates.

Changes:

Add per-model projection persistence and new projection manipulation methods (add/remove/reset/all, parse projection input).
Replace the old projection modal/table header UI with an inline projection bar + add-field dropdown.
Refactor layout/CSS for the table/json views and the documents header area.

Reviewed changes

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

File	Description
frontend/src/models/models.js	Adds projection persistence/parsing and new projection UI state/handlers; updates URL sync behavior.
frontend/src/models/models.html	Replaces projection modal with inline projection controls and add-field dropdown; adjusts table/json rendering.
frontend/src/models/models.css	Introduces new projection/table/dropdown styling and layout changes for documents area.

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

frontend/src/models/models.js

frontend/src/models/models.css

Copilot · 2026-02-13T23:22:53Z

frontend/src/models/models.html

            Open this Document
          </button>
-          <list-json :value="filterDocument(document)" :references="referenceMap">
+          <list-json :value="document" :references="referenceMap">


JSON view now passes the full document to <list-json>, but referenceMap is built from filteredPaths and will be incomplete for fields not in the current projection (and it also ignores the projection entirely). Either pass filterDocument(document) again, or update referenceMap/JSON rendering to be based on schemaPaths (or the active projection) so references and projection behavior are consistent.

Suggested change

<list-json :value="document" :references="referenceMap">

<list-json :value="filterDocument(document)" :references="referenceMap">

Copilot · 2026-02-13T23:22:53Z

frontend/src/models/models.css

+
+.models .projection-tab .remove-field {
+  flex-shrink: 0;
+}
+
+.models .projection-tab-add .add-field-btn {
+  min-width: 100px;
+}


The .projection-tab / .projection-tab-add rules appear unused by the updated markup (no matching classes in models.html). If they’re leftovers from the previous projection UI, consider removing them to keep the stylesheet aligned with the new structure.

Suggested change

.models .projection-tab .remove-field {

flex-shrink: 0;

}

.models .projection-tab-add .add-field-btn {

min-width: 100px;

}

Copilot · 2026-02-13T23:22:54Z

frontend/src/models/models.html

+                          class="add-field-option"
+                          @click="addField(path)"


The add-field dropdown options are rendered as clickable <li> elements without keyboard focus/interaction support (no tabindex, no role, no @keydown). This makes the field picker hard/impossible to use without a mouse. Consider rendering each option as a <button type="button"> (or add appropriate ARIA roles + keyboard handlers) so the dropdown is accessible.

Suggested change

class="add-field-option"

@click="addField(path)"

class="add-field-option"

role="button"

tabindex="0"

@click="addField(path)"

@keydown.enter.space="addField(path)"

Copilot · 2026-02-13T23:22:54Z

frontend/src/models/models.js

+    model(newModel) {
+      if (newModel !== this.currentModel) {
+        this.currentModel = newModel;
+        if (this.currentModel != null) {
+          this.initSearchFromUrl();


The new model watcher calls the async initSearchFromUrl() without awaiting or handling errors. Since initSearchFromUrl/getDocuments can throw, this can lead to unhandled promise rejections when the prop changes. Consider making the watcher async and await the call, or void this.initSearchFromUrl().catch(...) with appropriate user-facing error handling.

Suggested change

model(newModel) {

if (newModel !== this.currentModel) {

this.currentModel = newModel;

if (this.currentModel != null) {

this.initSearchFromUrl();

async model(newModel) {

if (newModel !== this.currentModel) {

this.currentModel = newModel;

if (this.currentModel != null) {

try {

await this.initSearchFromUrl();

} catch (err) {

this.error = err && err.message ? err.message : String(err);

}

Copilot · 2026-02-13T23:22:54Z

frontend/src/models/models.js

      if (this.$route.query?.sort) {
        const sort = eval(`(${this.$route.query.sort})`);
        const path = Object.keys(sort)[0];


initSearchFromUrl parses this.$route.query.sort via eval, so a crafted URL can execute arbitrary JS in the page. Consider encoding sort as JSON (quoted keys) and using JSON.parse with validation, or parsing a constrained field:direction format instead of evaluating code.

Copilot · 2026-02-13T23:22:54Z

frontend/src/models/models.js

+          } else {
+            this.filteredPaths = this.schemaPaths.filter(p => p.path === '_id');
+          }
+          this.selectedPaths = [...this.filteredPaths];


selectedPaths is still being maintained here, but after removing the projection modal it no longer appears to be read anywhere in the component/template. Consider deleting selectedPaths from state and removing these assignments to avoid confusing future maintenance.

Suggested change

this.selectedPaths = [...this.filteredPaths];

Copilot · 2026-02-13T23:22:54Z

frontend/src/models/models.css

+.models .projection-column-def:hover .column-remove {
+  opacity: 1;
+}
+


.column-remove is hidden via opacity: 0 unless the header is hovered, but there’s no corresponding :focus/:focus-visible rule to reveal it for keyboard users. This can make the remove button effectively invisible when tabbing through controls. Consider also showing it on focus (or not hiding it purely on hover).

Suggested change

.models .projection-column-def .column-remove:focus,

.models .projection-column-def .column-remove:focus-visible {

opacity: 1;

}

vkarpov15

The overflow behavior on this table needs some work: Horizontal scrollbar doesn't show up for large data sets because you can't scroll to the bottom (video 1)

Screencast.from.2026-02-25.21-34-58.mp4

Also the "copy" tooltip for individual fields gets clipped by overflow: hidden:

frontend/src/models/models.css

frontend/src/models/models.js

vkarpov15 · 2026-02-26T02:32:56Z

frontend/src/models/models.js

+          const obj = eval('(' + trimmed + ')');
+          const inclusionKeys = Object.keys(obj).filter(k => obj[k]);
+          const exclusionKeys = Object.keys(obj).filter(k => !obj[k]);
+          if (exclusionKeys.length > 0 && inclusionKeys.length === 0) {


Projections are a little more tricky than this, especially if you allow arbitrary input text. For example, there's things like $slice, $elemMatch, etc. https://www.mongodb.com/docs/manual/reference/operator/projection/slice/ . In the interest of keeping things clean, we may want to disallow using MongoDB projection syntax and instead support Mongoose's: name age is a projection that includes "name" and "age" and excludes everything else; -name -age is a projection that excludes name and age and includes everything else.

vkarpov15 · 2026-02-26T02:40:58Z

Oh and 1 more thing: also need projections for the JSON view

IslandRhythms · 2026-03-12T20:28:19Z

mongoosejs/studio: Field selection modal redesign

IslandRhythms · 2026-03-13T20:42:55Z

The merge from main undid a lot and the feedback here indicates that another swing needs to be taken so its just better to open a new PR at this point

IslandRhythms · 2026-03-13T20:43:56Z

Scratch that, its because of how it looks without a workspace

IslandRhythms added 3 commits February 13, 2026 18:04

new projection view

0329aaa

mongoose syntax

bfc8022

fix document duplication + dropdown input

d933d45

IslandRhythms requested review from Copilot and vkarpov15 February 13, 2026 23:17

Copilot started reviewing on behalf of IslandRhythms February 13, 2026 23:17 View session

Copilot AI reviewed Feb 13, 2026

View reviewed changes

vkarpov15 requested changes Feb 26, 2026

View reviewed changes

resolve conflicts

dbe4db2

vercel bot deployed to Preview March 13, 2026 20:39 View deployment

IslandRhythms closed this Mar 13, 2026

IslandRhythms reopened this Mar 13, 2026

projection scoring + UI updates

3de1e55

vercel bot deployed to Preview March 13, 2026 22:03 View deployment

	<list-json :value="document" :references="referenceMap">
	<list-json :value="filterDocument(document)" :references="referenceMap">

+.models .projection-column-def .column-remove:focus,
+.models .projection-column-def .column-remove:focus-visible {
+  opacity: 1;
+}

Conversation

IslandRhythms commented Feb 13, 2026

Uh oh!

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

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Copilot AI Feb 13, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 13, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 13, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 13, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 13, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 13, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 13, 2026

Choose a reason for hiding this comment

Uh oh!

vkarpov15 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

vkarpov15 Feb 26, 2026

Choose a reason for hiding this comment

Uh oh!

vkarpov15 commented Feb 26, 2026

Uh oh!

IslandRhythms commented Mar 12, 2026

Uh oh!

IslandRhythms commented Mar 13, 2026

Uh oh!

IslandRhythms commented Mar 13, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

vercel bot commented Feb 13, 2026 •

edited

Loading