@mongoosejs/studio 0.5.8 → 0.5.10

package/frontend/src/_util/document-search-autocomplete.js

@@ -220,6 +220,16 @@ function applySuggestion(searchText, cursorPos, suggestion) {
   return null;
 }
 
+function insertClosingBrace(searchText, selectionStart, selectionEnd) {
+  const start = typeof selectionStart === 'number' ? selectionStart : searchText.length;
+  const end = typeof selectionEnd === 'number' ? selectionEnd : start;
+  const selectedText = searchText.slice(start, end);
+  return {
+    text: searchText.slice(0, start) + `{${selectedText}}` + searchText.slice(end),
+    newCursorPos: start + 1 + selectedText.length
+  };
+}
+
 /**
  * When the cursor is inside a Date(…) or new Date(…) argument, returns the
  * slice indices of that argument so a picker can replace it with a quoted ISO string.
@@ -301,6 +311,7 @@ module.exports = {
   getAutocompleteContext,
   getAutocompleteSuggestions,
   applySuggestion,
+  insertClosingBrace,
   getDatePickerInsertionRange,
   dateArgumentSliceToDatetimeLocal,
   formatDateArgumentValue,

package/frontend/src/index.js

@@ -1,9 +1,5 @@
 'use strict';
 
-if (typeof process === 'undefined') {
-  global.process = { env: {} }; // To make `util` package work
-}
-
 const { version } = require('../../package.json');
 console.log(`Mongoose Studio Version ${version}`);
 
@@ -195,7 +191,7 @@ app.component('app-component', {
     <div v-else-if="!hasAPIKey || user">
       <navbar :user="user" :roles="roles" />
       <div class="view">
-        <router-view :key="$route.fullPath" :user="user" :roles="roles" :hasAPIKey="hasAPIKey" />
+        <router-view :key="$route.meta.preserveStateKey || $route.fullPath" :user="user" :roles="roles" :hasAPIKey="hasAPIKey" />
       </div>
     </div>
   </div>

package/frontend/src/models/document-search/document-search.js

@@ -5,6 +5,7 @@ const {
   buildAutocompleteTrie,
   getAutocompleteSuggestions,
   applySuggestion,
+  insertClosingBrace,
   getDatePickerInsertionRange,
   dateArgumentSliceToDatetimeLocal,
   insertDateInDateArgument
@@ -139,6 +140,21 @@ module.exports = app => app.component('document-search', {
       });
     },
     handleKeyDown(ev) {
+      if (ev.key === '{') {
+        ev.preventDefault();
+        const input = this.$refs.searchInput;
+        const selectionStart = input ? input.selectionStart : this.searchText.length;
+        const selectionEnd = input ? input.selectionEnd : selectionStart;
+        const result = insertClosingBrace(this.searchText, selectionStart, selectionEnd);
+        this.searchText = result.text;
+        this.$nextTick(() => {
+          if (input) {
+            input.setSelectionRange(result.newCursorPos, result.newCursorPos);
+          }
+          this.updateAutocomplete();
+        });
+        return;
+      }
       if (this.autocompleteSuggestions.length === 0) {
         return;
       }

package/frontend/src/models/models.js

@@ -146,6 +146,7 @@ module.exports = app => app.component('models', {
     currentModel: null,
     modelDocumentCounts: {},
     documents: [],
+    allSchemaPaths: null,
     schemaPaths: [],
     filteredPaths: [],
     selectedPaths: [],
@@ -263,8 +264,9 @@ module.exports = app => app.component('models', {
     this.query = Object.assign({}, this.$route.query);
     // Keep UI mode in sync with the URL on remounts.
     this.isProjectionMenuSelected = this.$route?.query?.[PROJECTION_MODE_QUERY_KEY] === '1';
-    const { models, readyState } = await api.Model.listModels();
+    const { models, modelSchemaPaths, readyState } = await api.Model.listModels();
     this.models = models;
+    this.allSchemaPaths = modelSchemaPaths;
     await this.loadModelCounts();
     if (this.currentModel == null && this.models.length > 0) {
       this.currentModel = this.models[0];
@@ -275,6 +277,29 @@ module.exports = app => app.component('models', {
       if (readyState === 0) {
         this.error = 'No models found and Mongoose is not connected. Check our documentation for more information.';
       }
+    } else {
+      this._refreshSidebar = setInterval(async() => {
+        try {
+          const { models, modelSchemaPaths, readyState } = await api.Model.listModels();
+          this.models = models;
+          this.allSchemaPaths = modelSchemaPaths;
+          await this.loadModelCounts();
+          if (this.currentModel) {
+            const schemaPaths = this.allSchemaPaths?.[this.currentModel] ?? {};
+            this.schemaPaths = Object.keys(schemaPaths).sort((k1, k2) => {
+              if (k1 === '_id' && k2 !== '_id') {
+                return -1;
+              }
+              if (k1 !== '_id' && k2 === '_id') {
+                return 1;
+              }
+              return 0;
+            }).map(key => schemaPaths[key]);
+          }
+        } catch (e) {
+          console.error(e);
+        }
+      }, 20000);
     }
 
     await this.initSearchFromUrl();
@@ -285,25 +310,33 @@ module.exports = app => app.component('models', {
     this.$nextTick(() => {
       const focusIntent = takeModelsRemountFocusIntent();
       if (focusIntent === 'documentSearch') {
-        const ds = this.$refs.documentSearch;
-        if (ds && typeof ds.focusInput === 'function') {
-          ds.focusInput();
-        }
+        this.$refs.documentSearch?.focusInput();
         return;
       }
       if (focusIntent === 'projection' && this.isProjectionMenuSelected) {
-        const projectionSearch = this.$refs.projectionSearch;
-        if (projectionSearch && typeof projectionSearch.focusInput === 'function') {
-          projectionSearch.focusInput();
-        }
+        this.$refs.projectionSearch?.focusInput();
       }
     });
   },
+  unmounted() {
+    clearInterval(this._refreshSidebar);
+  },
   watch: {
     model(newModel) {
       if (newModel !== this.currentModel) {
         this.currentModel = newModel;
         if (this.currentModel != null) {
+          this.$refs.documentSearch?.focusInput();
+          const schemaPaths = this.allSchemaPaths?.[newModel] ?? {};
+          this.schemaPaths = Object.keys(schemaPaths).sort((k1, k2) => {
+            if (k1 === '_id' && k2 !== '_id') {
+              return -1;
+            }
+            if (k1 !== '_id' && k2 === '_id') {
+              return 1;
+            }
+            return 0;
+          }).map(key => schemaPaths[key]);
           this.initSearchFromUrl();
         }
       }
@@ -747,6 +780,8 @@ module.exports = app => app.component('models', {
         this.query.sortKey = sortKey;
         this.query.sortDirection = sortDirection;
         delete this.query.sort;
+      } else {
+        this.sortBy = {};
       }
       if (this.currentModel != null) {
         await this.getDocuments();
@@ -762,6 +797,8 @@ module.exports = app => app.component('models', {
           this.selectedPaths = [...this.filteredPaths];
           this.syncProjectionInputFromQueryOrPaths();
         }
+      } else {
+        this.selectedPaths = [];
       }
       this.status = 'loaded';
 
@@ -1043,7 +1080,6 @@ module.exports = app => app.component('models', {
 
         // Clear previous data
         this.documents = [];
-        this.schemaPaths = [];
         this.numDocuments = null;
         this.loadedAllDocs = false;
         this.lastSelectedIndex = null;

package/frontend/src/routes.js

@@ -33,7 +33,8 @@ module.exports = {
       name: 'model',
       component: 'models',
       meta: {
-        authorized: false
+        authorized: false,
+        preserveStateKey: 'model'
       }
     },
     {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mongoosejs/studio",
-  "version": "0.5.8",
+  "version": "0.5.10",
   "description": "AI-Powered Data Workspace for MongoDB: Turn your MongoDB data into dashboards, maps, and interactive workflows - powered by your Mongoose models and AI.",
   "homepage": "https://mongoosestudio.app/",
   "repository": {