@mongoosejs/studio 0.5.8 → 0.5.9

package/frontend/src/index.js

@@ -195,7 +195,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/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.9",
   "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": {