@mongoosejs/studio 0.3.3 → 0.3.4

package/frontend/src/models/models.css

@@ -5,105 +5,30 @@
   min-height: calc(100% - 56px);
 }
 
-.models button.gray {
-  color: black;
-  background-color: #eee;
-}
-
-.models .model-selector {
-  flex-grow: 0;
-  padding: 15px;
-  padding-top: 0px;
-}
-
-.models h1 {
-  margin-top: 0px;
-}
-
 .models .documents {
   flex-grow: 1;
-  overflow: scroll;
+  overflow: visible;
   max-height: calc(100vh - 56px);
+  display: flex;
+  flex-direction: column;
 }
 
-.models .documents table {
-  /* max-width: -moz-fit-content;
-  max-width: fit-content; */
-  width: 100%;
-  table-layout: auto;
-  font-size: small;
-  padding: 0;
-  margin-right: 1em;
-  white-space: nowrap;
-  z-index: -1;
-  border-collapse: collapse;
-  line-height: 1.5em;
-}
-
-.models .documents table th {
-  position: sticky;
-  top: 42px;
-  z-index: 1;
-}
-
-.models .documents table th:after {
-  content: "";
-  position: absolute;
-  left: 0;
-  width: 100%;
-  bottom: -1px;
-  border-bottom: thin solid rgba(0, 0, 0, 0.12);
-}
-
-.models .documents table tr {
-  color: black;
-  border-spacing: 0px 0px;
-}
-
-.models .documents table th {
-  border-bottom: thin solid rgba(0, 0, 0, 0.12);
-  text-align: left;
-  height: 48px;
-}
-
-.models .documents table td {
-  border-bottom: thin solid rgba(0, 0, 0, 0.12);
-  text-align: left;
-}
-
-.models textarea {
-  font-size: 1.2em;
-}
-
-.models .path-type {
-  color: rgba(0, 0, 0, 0.36);
-  font-size: 0.8em;
+.models .documents-container {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
 }
 
 .models .documents-menu {
   position: sticky;
   top: 0;
-  z-index: 2;
+  z-index: 30;
   padding: 4px;
   display: flex;
-}
-
-.models .documents-menu .search-input {
-  flex-grow: 1;
-  align-items: center;
-}
-
-.models .search-input input {
-  padding: 0.25em 0.5em;
-  font-size: 1.1em;
-  border: 1px solid #ddd;
-  border-radius: 3px;
-  width: calc(100% - 1em);
-}
-
-.models .sort-arrow {
-  padding-left: 10px;
-  padding-right: 10px;
+  flex-direction: column;
+  flex-shrink: 0;
 }
 
 .models .loader {
@@ -115,8 +40,18 @@
   height: 4em;
 }
 
-.models .documents .buttons {
-  display: inline-flex;
-  justify-content: space-around;
+.models .loader-overlay {
+  position: absolute;
+  inset: 0;
+  z-index: 20;
+  display: flex;
   align-items: center;
+  justify-content: center;
+  background: var(--color-page);
+  opacity: 0.9;
+}
+
+/* Table cell: copy icon only copies; rest of cell opens document */
+.models .table-cell-copy {
+  cursor: pointer;
 }

package/frontend/src/models/models.html

@@ -116,8 +116,11 @@
           <button
             @click="stagingSelect"
             type="button"
-            :class="{ 'bg-page0 ring-inset ring-2 ring-gray-300 hover:bg-gray-600': selectMultiple, 'bg-primary hover:bg-primary-hover' : !selectMultiple }"
-            class="rounded px-2 py-2 text-sm font-semibold text-primary-text shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"
+            :class="{
+              'bg-page0 ring-inset ring-2 ring-gray-300 hover:bg-gray-200 text-content-secondary': selectMultiple,
+              'bg-primary hover:bg-primary-hover text-primary-text': !selectMultiple
+            }"
+            class="rounded px-2 py-2 text-sm font-semibold shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"
           >
             {{ selectMultiple ? 'Cancel' : 'Select' }}
           </button>
@@ -149,7 +152,7 @@
             </button>
             <div
               v-if="showActionsMenu"
-              class="absolute right-0 mt-2 w-48 origin-top-right rounded-md bg-surface shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none z-20"
+              class="absolute right-0 mt-2 w-48 origin-top-right rounded-md bg-surface shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none z-50"
             >
               <div class="py-1">
                 <button
@@ -166,13 +169,6 @@
                 >
                   Create
                 </button>
-                <button
-                  @click="openFieldSelection(); showActionsMenu = false"
-                  type="button"
-                  class="block w-full px-4 py-2 text-left text-sm text-content-secondary hover:bg-muted"
-                >
-                  Projection
-                </button>
                 <button
                   @click="openIndexModal"
                   type="button"
@@ -194,6 +190,44 @@
                 >
                   Find oldest document
                 </button>
+                <button
+                  @click="toggleRowNumbers()"
+                  type="button"
+                  class="block w-full px-4 py-2 text-left text-sm text-content-secondary hover:bg-muted"
+                >
+                  {{ showRowNumbers ? 'Hide row numbers' : 'Show row numbers' }}
+                </button>
+                <button
+                  @click="resetFilter()"
+                  type="button"
+                  class="block w-full px-4 py-2 text-left text-sm text-content-secondary hover:bg-muted"
+                >
+                  Reset Filter
+                </button>
+                <button
+                  @click="toggleProjectionMenu(); showActionsMenu = false"
+                  type="button"
+                  class="block w-full px-4 py-2 text-left text-sm hover:bg-muted"
+                  :class="isProjectionMenuSelected ? 'text-primary font-semibold' : 'text-content-secondary'"
+                >
+                  {{ isProjectionMenuSelected ? 'Projection (On)' : 'Projection' }}
+                </button>
+                <button
+                  v-if="isProjectionMenuSelected"
+                  @click="clearProjection()"
+                  type="button"
+                  class="block w-full px-4 py-2 text-left text-sm text-content-secondary hover:bg-muted"
+                >
+                  Reset Projection
+                </button>
+                <async-button
+                  v-if="isProjectionMenuSelected"
+                  type="button"
+                  @click="applyDefaultProjectionColumns()"
+                  class="block w-full px-4 py-2 text-left text-sm text-content-secondary hover:bg-muted"
+                >
+                  Default
+                </async-button>
               </div>
             </div>
           </div>
@@ -228,37 +262,176 @@
             </button>
           </span>
         </div>
+        <div v-if="isProjectionMenuSelected && (outputType === 'table' || outputType === 'json')" class="flex items-center gap-2 w-full mt-2 flex-shrink-0">
+          <input
+            ref="projectionInput"
+            v-model="projectionText"
+            type="text"
+            placeholder="Projection: name email, or -password"
+            class="flex-1 min-w-0 rounded border border-edge bg-surface px-2 py-1.5 text-sm font-mono placeholder:text-content-tertiary focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary"
+            @focus="initProjection($event)"
+            @keydown.enter="applyProjectionFromInput()"
+          />
+        </div>
       </div>
-    <div class="documents-container relative">
+    <!-- In JSON view, this container is the scrollable element used for infinite scroll. -->
+    <div class="documents-container relative" ref="documentsContainerScroll" @scroll="checkIfScrolledToBottom">
       <div v-if="error">
         <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 relative m-4 rounded-md" role="alert">
           <span class="block font-bold">Error</span>
           <span class="block">{{ error }}</span>
         </div>
       </div>
-      <table v-else-if="outputType === 'table'">
-        <thead class="bg-slate-50">
-          <th v-for="path in filteredPaths" @click="addPathFilter(path.path)" class="bg-slate-50 cursor-pointer p-3">
-            {{path.path}}
-            <span class="path-type">
-              ({{(path.instance || 'unknown')}})
-            </span>
-            <span class="sort-arrow" @click="sortDocs(1, path.path)">{{sortBy[path.path] == 1 ? 'X' : '↑'}}</span>
-            <span class="sort-arrow" @click="sortDocs(-1, path.path)">{{sortBy[path.path] == -1 ? 'X' : '↓'}}</span>
-          </th>
-        </thead>
-        <tbody>
-          <tr v-for="document in documents" @click="handleDocumentClick(document, $event)" :key="document._id" class="bg-surface hover:bg-slate-50">
-            <td v-for="schemaPath in filteredPaths" class="p-3 cursor-pointer" :class="{ 'bg-blue-200': selectedDocuments.some(x => x._id.toString() === document._id.toString()) }">
-              <component
-                :is="getComponentForPath(schemaPath)"
-                :value="getValueForPath(document, schemaPath.path)"
-                :allude="getReferenceModel(schemaPath)">
-              </component>
-            </td>
-          </tr>
-        </tbody>
-      </table>
+      <div v-else-if="outputType === 'table'" class="flex-1 min-h-0 flex flex-col overflow-hidden">
+        <div
+          ref="documentsScrollContainer"
+          class="overflow-x-auto overflow-y-auto flex-1 min-h-0 border border-edge rounded-lg bg-surface"
+          @scroll="checkIfScrolledToBottom"
+        >
+          <table class="min-w-full border-collapse text-sm">
+            <thead class="sticky top-0 z-10 bg-slate-100 dark:bg-shark-800 border-b border-edge">
+              <tr>
+                <th v-if="showRowNumbers" class="px-3 py-2.5 text-left font-medium text-content border-r border-edge whitespace-nowrap align-middle w-0">
+                  #
+                </th>
+                <th
+                  v-for="path in tableDisplayPaths"
+                  :key="path.path"
+                  class="px-3 py-2.5 text-left font-medium text-content border-r border-edge last:border-r-0 whitespace-nowrap align-middle"
+                >
+                  <div class="flex items-center gap-2">
+                    <span
+                      @click="addPathFilter(path.path)"
+                      class="cursor-pointer hover:text-primary truncate min-w-0"
+                      :title="path.path"
+                    >
+                      {{ path.path }}
+                    </span>
+                    <span class="text-xs text-content-tertiary shrink-0">({{ path.instance || 'unknown' }})</span>
+                    <span class="inline-flex shrink-0 gap-0.5 items-center">
+                      <button
+                        type="button"
+                        @click.stop="sortDocs(1, path.path)"
+                        class="p-0.5 rounded text-content-tertiary hover:text-content hover:bg-muted"
+                        :class="{ 'text-primary font-semibold': sortBy[path.path] === 1 }"
+                        :title="sortBy[path.path] === 1 ? 'Clear sort' : 'Sort ascending'"
+                      >
+                        ↑
+                      </button>
+                      <button
+                        type="button"
+                        @click.stop="sortDocs(-1, path.path)"
+                        class="p-0.5 rounded text-content-tertiary hover:text-content hover:bg-muted"
+                        :class="{ 'text-primary font-semibold': sortBy[path.path] === -1 }"
+                        :title="sortBy[path.path] === -1 ? 'Clear sort' : 'Sort descending'"
+                      >
+                        ↓
+                      </button>
+                      <button
+                        v-if="filteredPaths.length > 0"
+                        type="button"
+                        @click.stop="removeField(path)"
+                        class="p-1.5 rounded-md border border-transparent text-content-tertiary hover:text-valencia-600 hover:bg-valencia-50 hover:border-valencia-200 focus:outline-none focus:ring-2 focus:ring-valencia-500/30"
+                        title="Remove column"
+                        aria-label="Remove column"
+                      >
+                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
+                          <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
+                        </svg>
+                      </button>
+                    </span>
+                  </div>
+                </th>
+                <th v-if="filteredPaths.length > 0" class="px-2 py-2.5 border-r border-edge last:border-r-0 align-middle w-0 bg-slate-50 dark:bg-shark-800/80">
+                  <div class="relative" ref="addFieldContainer">
+                    <button
+                      type="button"
+                      @click="toggleAddFieldDropdown()"
+                      class="flex items-center justify-center w-8 h-8 rounded border border-dashed border-edge text-content-tertiary hover:border-primary hover:text-primary hover:bg-primary-subtle/30"
+                      title="Add column"
+                      aria-label="Add column"
+                    >
+                      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-5 h-5"> <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" /> </svg>
+                    </button>
+                    <div
+                      v-if="showAddFieldDropdown"
+                      class="absolute right-0 top-full mt-1 z-[100] min-w-[180px] max-w-[280px] rounded-md border border-edge bg-surface shadow-lg py-1 max-h-48 overflow-y-auto"
+                    >
+                      <input
+                        v-if="availablePathsToAdd.length > 5"
+                        ref="addFieldFilterInput"
+                        v-model="addFieldFilterText"
+                        type="text"
+                        placeholder="Filter fields..."
+                        class="mx-2 mb-1 w-[calc(100%-1rem)] rounded border border-edge px-2 py-1 text-sm"
+                        @click.stop
+                      />
+                      <button
+                        v-for="p in filteredPathsToAdd"
+                        :key="p.path"
+                        type="button"
+                        class="w-full px-3 py-1.5 text-left text-sm hover:bg-muted"
+                        @click.stop="addField(p)"
+                      >
+                        {{ p.path }}
+                      </button>
+                      <p v-if="filteredPathsToAdd.length === 0" class="px-3 py-2 text-sm text-content-tertiary">
+                        {{ addFieldFilterText.trim() ? 'No matching fields' : 'All fields added' }}
+                      </p>
+                    </div>
+                  </div>
+                </th>
+              </tr>
+            </thead>
+            <tbody class="bg-surface">
+              <tr
+                v-for="(document, docIndex) in documents"
+                :key="document._id"
+                @click="handleDocumentClick(document, $event)"
+                class="border-b border-edge cursor-pointer transition-colors hover:bg-muted/60"
+                :class="{ 'bg-primary-subtle/50 hover:bg-primary-subtle/70': selectedDocuments.some(x => x._id.toString() === document._id.toString()) }"
+              >
+                <td v-if="showRowNumbers" class="px-3 py-2 border-r border-edge align-top text-content-tertiary whitespace-nowrap">
+                  {{ docIndex + 1 }}
+                </td>
+                <td
+                  v-for="schemaPath in tableDisplayPaths"
+                  :key="schemaPath.path"
+                  class="px-3 py-2 border-r border-edge last:border-r-0 align-top max-w-[280px]"
+                >
+                  <div class="table-cell-content flex items-center gap-1.5 min-w-0 group">
+                    <span class="min-w-0 overflow-hidden text-ellipsis flex-1">
+                      <component
+                        :is="getComponentForPath(schemaPath)"
+                        :value="getValueForPath(document, schemaPath.path)"
+                        :allude="getReferenceModel(schemaPath)"
+                      />
+                    </span>
+                    <button
+                      type="button"
+                      class="table-cell-copy shrink-0 p-1 rounded text-content-tertiary hover:text-content hover:bg-muted focus:outline-none focus:ring-1 focus:ring-edge"
+                      aria-label="Copy cell value"
+                      @click.stop="copyCellValue(getValueForPath(document, schemaPath.path))"
+                    >
+                      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M8 5H6a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-1M8 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M8 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2m0 0h2a2 2 0 0 1 2 2v3m2 4H10m0 0l3-3m-3 3l3 3" />
+                      </svg>
+                    </button>
+                  </div>
+                </td>
+                <td v-if="filteredPaths.length > 0" class="w-0 px-0 py-0 border-r border-edge last:border-r-0 bg-slate-50/50 dark:bg-shark-800/30"></td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        <div v-if="outputType === 'table' && (loadingMore || (status === 'loading' && documents.length > 0))" class="flex items-center justify-center gap-2 py-3 text-sm text-content-tertiary border-t border-edge bg-surface">
+          <img src="images/loader.gif" alt="" class="h-5 w-5">
+          <span>Loading documents…</span>
+        </div>
+        <p v-if="outputType === 'table' && documents.length === 0 && status === 'loaded'" class="mt-2 text-sm text-content-tertiary px-1">
+          No documents to show. Use Projection in the menu to choose columns.
+        </p>
+      </div>
       <div v-else-if="outputType === 'json'" class="flex flex-col space-y-2 p-1 mt-1">
         <div
           v-for="document in documents"
@@ -279,6 +452,10 @@
           <list-json :value="filterDocument(document)" :references="referenceMap">
           </list-json>
         </div>
+        <div v-if="outputType === 'json' && (loadingMore || (status === 'loading' && documents.length > 0))" class="flex items-center justify-center gap-2 py-3 text-sm text-content-tertiary">
+          <img src="images/loader.gif" alt="" class="h-5 w-5">
+          <span>Loading documents…</span>
+        </div>
       </div>
       <div v-else-if="outputType === 'map'" class="flex flex-col h-full">
         <div class="p-2 bg-surface border-b flex items-center gap-2">
@@ -304,8 +481,8 @@
         </div>
         <div class="flex-1 min-h-[400px]" ref="modelsMap"></div>
       </div>
-      <div v-if="status === 'loading'" class="loader">
-        <img src="images/loader.gif">
+      <div v-if="status === 'loading' && !loadingMore && documents.length === 0" class="loader loader-overlay" aria-busy="true">
+        <img src="images/loader.gif" alt="Loading">
       </div>
     </div>
   </div>
@@ -385,23 +562,6 @@
       </div>
     </template>
   </modal>
-  <modal v-if="shouldShowFieldModal">
-    <template v-slot:body>
-      <div class="modal-exit" @click="shouldShowFieldModal = false; selectedPaths = [...filteredPaths];">&times;</div>
-      <div v-for="(path, index) in schemaPaths" :key="index" class="w-5 flex items-center">
-        <input  class="mt-0 h-4 w-4 rounded border-edge-strong text-sky-600 focus:ring-sky-600 accent-sky-600" type="checkbox" :id="'path.path'+index" @change="addOrRemove(path)" :value="path.path" :checked="isSelected(path.path)" />
-        <div class="ml-2 text-content-secondary grow shrink text-left">
-          <label :for="'path.path' + index">{{path.path}}</label>
-        </div>
-      </div>
-      <div class="mt-4 flex gap-2">
-        <button type="button" @click="filterDocuments()" class="rounded-md bg-primary px-2.5 py-1.5 text-sm font-semibold text-primary-text shadow-sm hover:bg-primary-hover focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-teal-600">Filter Selection</button>
-        <button type="button" @click="selectAll()" class="rounded-md bg-forest-green-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-green-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600">Select All</button>
-        <button type="button" @click="deselectAll()" class="rounded-md bg-valencia-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-valencia-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600">Deselect All</button>
-        <button type="button" @click="resetDocuments()" class="rounded-md bg-gray-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-page0 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600" >Cancel</button>
-      </div>
-    </template>
-  </modal>
   <modal v-if="shouldShowCreateModal">
     <template v-slot:body>
       <div class="modal-exit" @click="shouldShowCreateModal = false;">&times;</div>