@mongoosejs/studio 0.5.4 → 0.5.5

package/frontend/src/models/analyze-schema-modal/analyze-schema-modal.js

@@ -0,0 +1,149 @@
+'use strict';
+
+const api = require('../../api');
+const template = require('./analyze-schema-modal.html');
+const xss = require('xss');
+
+const TYPE_COLORS = {
+  string: '#315f5b',
+  number: '#465b86',
+  objectid: '#2f6381',
+  boolean: '#5b6540',
+  date: '#5a5278',
+  array: '#6b573d',
+  object: '#3f6648',
+  mixed: '#62546a',
+  buffer: '#5a5f50',
+  decimal128: '#4a6474',
+  map: '#4e665d',
+  null: '#3f4650',
+  undefined: '#5b626b'
+};
+
+const FALLBACK_TYPE_COLORS = [
+  '#315f5b',
+  '#465b86',
+  '#2f6381',
+  '#5b6540',
+  '#5a5278',
+  '#6b573d',
+  '#3f6648',
+  '#62546a'
+];
+
+module.exports = app => app.component('analyze-schema-modal', {
+  template,
+  props: ['currentModel'],
+  emits: ['close'],
+  data: () => ({
+    schemaAnalysis: null,
+    fieldSearch: '',
+    showInvalidDocuments: false,
+    typeDisplayMode: 'bars'
+  }),
+  computed: {
+    filteredPaths() {
+      if (!this.schemaAnalysis) {
+        return [];
+      }
+      const search = this.fieldSearch.trim().toLowerCase();
+      if (!search) {
+        return this.schemaAnalysis.paths;
+      }
+      return this.schemaAnalysis.paths.filter(path => path.path.toLowerCase().includes(search));
+    }
+  },
+  async mounted() {
+    window.analyzeSchemaModal = this;
+    const { analysis } = await api.Model.analyzeSchema({ model: this.currentModel });
+    this.schemaAnalysis = analysis;
+    this.$nextTick(() => {
+      this.$refs.fieldSearch?.focus();
+    });
+  },
+  unmounted() {
+    window.analyzeSchemaModal = null;
+  },
+  methods: {
+    close() {
+      this.$emit('close');
+    },
+    formatNumber(value) {
+      if (typeof value !== 'number') {
+        return 'Unknown';
+      }
+
+      return value.toLocaleString();
+    },
+    formatPercent(value, total) {
+      if (!total) {
+        return '0%';
+      }
+      return `${Math.round((value / total) * 1000) / 10}%`;
+    },
+    typePercentValue(value, total) {
+      if (!total) {
+        return 0;
+      }
+      return Math.round((value / total) * 1000) / 10;
+    },
+    pathValueCount(path) {
+      return typeof path?.valueCount === 'number' && path.valueCount > 0 ?
+        path.valueCount :
+        this.schemaAnalysis.sampleSize;
+    },
+    primaryType(path) {
+      if (!path || !Array.isArray(path.types) || path.types.length === 0) {
+        return null;
+      }
+
+      return path.types.find(typeInfo => typeInfo.type !== 'null' && typeInfo.type !== 'undefined') || path.types[0];
+    },
+    typeColor(type) {
+      const normalizedType = String(type || '').toLowerCase();
+      if (TYPE_COLORS[normalizedType]) {
+        return TYPE_COLORS[normalizedType];
+      }
+
+      let hash = 0;
+      for (let i = 0; i < normalizedType.length; ++i) {
+        hash = ((hash << 5) - hash) + normalizedType.charCodeAt(i);
+        hash |= 0;
+      }
+      const index = Math.abs(hash) % FALLBACK_TYPE_COLORS.length;
+      return FALLBACK_TYPE_COLORS[index % FALLBACK_TYPE_COLORS.length];
+    },
+    typeBadgeStyle(type) {
+      return {
+        backgroundColor: this.typeColor(type),
+        color: '#fff'
+      };
+    },
+    typeSegmentStyle(type, count, total) {
+      return {
+        width: `${this.typePercentValue(count, total)}%`,
+        backgroundColor: this.typeColor(type),
+        color: '#fff'
+      };
+    },
+    documentRoute(documentId) {
+      return `/model/${this.currentModel}/document/${documentId}`;
+    },
+    highlightPath(path) {
+      const search = this.fieldSearch.trim();
+      if (!search) {
+        return xss(path);
+      }
+
+      const index = path.toLowerCase().indexOf(search.toLowerCase());
+      if (index === -1) {
+        return xss(path);
+      }
+
+      const before = path.slice(0, index);
+      const match = path.slice(index, index + search.length);
+      const after = path.slice(index + search.length);
+      return `${xss(before)}<strong>${xss(match)}</strong>${xss(after)}`;
+    }
+  }
+});

package/frontend/src/models/models.html

@@ -177,37 +177,34 @@
                   Indexes
                 </button>
                 <button
-                  @click="openCollectionInfo"
+                  @click="openAnalyzeSchemaModal"
                   type="button"
                   class="block w-full px-4 py-2 text-left text-sm text-content-secondary hover:bg-muted"
                 >
-                  Collection Info
+                  Analyze Schema
                 </button>
                 <button
-                  @click="findOldestDocument"
+                  @click="openCollectionInfo"
                   type="button"
                   class="block w-full px-4 py-2 text-left text-sm text-content-secondary hover:bg-muted"
                 >
-                  Find oldest document
-                </button>
-                <button
-                  @click="openDropCollectionModal"
-                  type="button"
-                  class="block w-full px-4 py-2 text-left text-sm text-red-700 hover:bg-red-50"
-                >
-                  Drop Collection
+                  Collection Info
                 </button>
                 <button
                   @click="toggleRowNumbers()"
+                  :disabled="outputType !== 'table'"
                   type="button"
-                  class="block w-full px-4 py-2 text-left text-sm text-content-secondary hover:bg-muted"
+                  class="block w-full px-4 py-2 text-left text-sm"
+                  :class="outputType === 'table' ? 'text-content-secondary hover:bg-muted' : 'text-content-tertiary cursor-not-allowed opacity-50'"
                 >
                   {{ showRowNumbers ? 'Hide row numbers' : 'Show row numbers' }}
                 </button>
                 <button
                   @click="resetFilter()"
+                  :disabled="searchText.trim().length === 0"
                   type="button"
-                  class="block w-full px-4 py-2 text-left text-sm text-content-secondary hover:bg-muted"
+                  class="block w-full px-4 py-2 text-left text-sm"
+                  :class="searchText.trim().length > 0 ? 'text-content-secondary hover:bg-muted' : 'text-content-tertiary cursor-not-allowed opacity-50'"
                 >
                   Reset Filter
                 </button>
@@ -235,6 +232,13 @@
                 >
                   Default Projection
                 </async-button>
+                <button
+                  @click="openDropCollectionModal"
+                  type="button"
+                  class="block w-full px-4 py-2 text-left text-sm text-red-700 hover:bg-red-50"
+                >
+                  Drop Collection
+                </button>
               </div>
             </div>
           </div>
@@ -551,6 +555,14 @@
       </div>
     </template>
   </modal>
+  <modal v-if="shouldShowAnalyzeSchemaModal" containerClass="md:!w-[70vw]">
+    <template v-slot:body>
+      <analyze-schema-modal
+        :current-model="currentModel"
+        @close="shouldShowAnalyzeSchemaModal = false"
+      ></analyze-schema-modal>
+    </template>
+  </modal>
   <modal v-if="shouldShowCollectionInfoModal">
     <template v-slot:body>
       <div class="modal-exit" @click="shouldShowCollectionInfoModal = false">&times;</div>

package/frontend/src/models/models.js

@@ -167,6 +167,7 @@ module.exports = app => app.component('models', {
     addFieldFilterText: '',
     showAddFieldDropdown: false,
     shouldShowIndexModal: false,
+    shouldShowAnalyzeSchemaModal: false,
     shouldShowCollectionInfoModal: false,
     shouldShowDropCollectionModal: false,
     dropCollectionConfirmName: '',
@@ -889,6 +890,10 @@ module.exports = app => app.component('models', {
       this.mongoDBIndexes = mongoDBIndexes;
       this.schemaIndexes = schemaIndexes;
     },
+    openAnalyzeSchemaModal() {
+      this.closeActionsMenu();
+      this.shouldShowAnalyzeSchemaModal = true;
+    },
     toggleActionsMenu() {
       this.showActionsMenu = !this.showActionsMenu;
     },
@@ -949,19 +954,6 @@ module.exports = app => app.component('models', {
       this.$toast.success(`Collection ${this.currentModel} dropped.`);
       await this.getDocuments();
     },
-    async findOldestDocument() {
-      this.closeActionsMenu();
-      const { docs } = await api.Model.getDocuments({
-        model: this.currentModel,
-        limit: 1,
-        sortKey: '_id',
-        sortDirection: 1
-      });
-      if (!Array.isArray(docs) || docs.length === 0) {
-        throw new Error('No documents found');
-      }
-      this.openDocument(docs[0]);
-    },
     isTTLIndex(index) {
       return index != null && index.expireAfterSeconds != null;
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mongoosejs/studio",
-  "version": "0.5.4",
+  "version": "0.5.5",
   "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": {
@@ -19,6 +19,7 @@
     "ejson": "^2.2.3",
     "extrovert": "^0.2.0",
     "marked": "15.0.12",
+    "mpath": "^0.9.0",
     "node-inspect-extracted": "3.x",
     "regexp.escape": "^2.0.1",
     "tailwindcss": "3.4.0",