@mongoosejs/studio 0.1.6 → 0.1.8

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

@@ -0,0 +1,23 @@
+<form @submit.prevent="emitSearch" class="relative flex-grow m-0">
+  <input
+    ref="searchInput"
+    class="w-full font-mono rounded-md p-1 border border-gray-300 outline-gray-300 text-lg focus:ring-1 focus:ring-ultramarine-200 focus:ring-offset-0 focus:outline-none"
+    type="text"
+    placeholder="Filter"
+    v-model="searchText"
+    @click="initFilter"
+    @input="updateAutocomplete"
+    @keydown="handleKeyDown"
+  />
+  <ul v-if="autocompleteSuggestions.length" class="absolute z-[9999] bg-white border border-gray-300 rounded mt-1 w-full max-h-40 overflow-y-auto shadow">
+    <li
+      v-for="(suggestion, index) in autocompleteSuggestions"
+      :key="suggestion"
+      class="px-2 py-1 cursor-pointer"
+      :class="{ 'bg-ultramarine-100': index === autocompleteIndex }"
+      @mousedown.prevent="applySuggestion(index)"
+    >
+      {{ suggestion }}
+    </li>
+  </ul>
+</form>

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

@@ -0,0 +1,227 @@
+'use strict';
+
+const template = require('./document-search.html');
+const { Trie } = require('../trie');
+
+const QUERY_SELECTORS = [
+  '$eq',
+  '$ne',
+  '$gt',
+  '$gte',
+  '$lt',
+  '$lte',
+  '$in',
+  '$nin',
+  '$exists',
+  '$regex',
+  '$options',
+  '$text',
+  '$search',
+  '$and',
+  '$or',
+  '$nor',
+  '$not',
+  '$elemMatch',
+  '$size',
+  '$all',
+  '$type',
+  '$expr',
+  '$jsonSchema',
+  '$mod'
+];
+
+module.exports = app => app.component('document-search', {
+  template,
+  props: {
+    value: {
+      type: String,
+      default: ''
+    },
+    schemaPaths: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      autocompleteSuggestions: [],
+      autocompleteIndex: 0,
+      autocompleteTrie: null,
+      searchText: this.value || ''
+    };
+  },
+  watch: {
+    value(val) {
+      this.searchText = val || '';
+    },
+    schemaPaths: {
+      handler() {
+        this.buildAutocompleteTrie();
+      },
+      deep: true
+    }
+  },
+  created() {
+    this.buildAutocompleteTrie();
+  },
+  methods: {
+    emitSearch() {
+      this.$emit('input', this.searchText);
+      this.$emit('search', this.searchText);
+    },
+    buildAutocompleteTrie() {
+      this.autocompleteTrie = new Trie();
+      this.autocompleteTrie.bulkInsert(QUERY_SELECTORS, 5, 'operator');
+      if (Array.isArray(this.schemaPaths) && this.schemaPaths.length > 0) {
+        const paths = this.schemaPaths
+          .map(path => path?.path)
+          .filter(path => typeof path === 'string' && path.length > 0);
+        for (const path of this.schemaPaths) {
+          if (path.schema) {
+            paths.push(...Object.keys(path.schema).map(subpath => `${path.path}.${subpath}`));
+          }
+        }
+        this.autocompleteTrie.bulkInsert(paths, 10, 'fieldName');
+      }
+    },
+    initFilter(ev) {
+      if (!this.searchText) {
+        this.searchText = '{}';
+        this.$nextTick(() => {
+          ev.target.setSelectionRange(1, 1);
+        });
+      }
+    },
+    updateAutocomplete() {
+      const input = this.$refs.searchInput;
+      const cursorPos = input ? input.selectionStart : 0;
+      const before = this.searchText.slice(0, cursorPos);
+      const match = before.match(/(?:\{|,)\s*([^:\s]*)$/);
+      if (match && match[1]) {
+        const token = match[1];
+        const leadingQuoteMatch = token.match(/^["']/);
+        const trailingQuoteMatch = token.length > 1 && /["']$/.test(token)
+          ? token[token.length - 1]
+          : '';
+        const term = token
+          .replace(/^["']/, '')
+          .replace(trailingQuoteMatch ? new RegExp(`[${trailingQuoteMatch}]$`) : '', '')
+          .trim();
+        if (!term) {
+          this.autocompleteSuggestions = [];
+          return;
+        }
+
+        const colonMatch = before.match(/:\s*([^,\}\]]*)$/);
+        const role = colonMatch ? 'operator' : 'fieldName';
+
+        if (this.autocompleteTrie) {
+          const primarySuggestions = this.autocompleteTrie.getSuggestions(term, 10, role);
+          const suggestionsSet = new Set(primarySuggestions);
+          if (Array.isArray(this.schemaPaths) && this.schemaPaths.length > 0) {
+            for (const schemaPath of this.schemaPaths) {
+              const path = schemaPath?.path;
+              if (
+                typeof path === 'string' &&
+                path.startsWith(`${term}.`) &&
+                !suggestionsSet.has(path)
+              ) {
+                suggestionsSet.add(path);
+                if (suggestionsSet.size >= 10) {
+                  break;
+                }
+              }
+            }
+          }
+          let suggestions = Array.from(suggestionsSet);
+          if (leadingQuoteMatch) {
+            const leadingQuote = leadingQuoteMatch[0];
+            suggestions = suggestions.map(suggestion => `${leadingQuote}${suggestion}`);
+          }
+          if (trailingQuoteMatch) {
+            suggestions = suggestions.map(suggestion =>
+              suggestion.endsWith(trailingQuoteMatch) ? suggestion : `${suggestion}${trailingQuoteMatch}`
+            );
+          }
+          this.autocompleteSuggestions = suggestions;
+          this.autocompleteIndex = 0;
+          return;
+        }
+      }
+      this.autocompleteSuggestions = [];
+    },
+    handleKeyDown(ev) {
+      if (this.autocompleteSuggestions.length === 0) {
+        return;
+      }
+      if (ev.key === 'Tab' || ev.key === 'Enter') {
+        ev.preventDefault();
+        this.applySuggestion(this.autocompleteIndex);
+      } else if (ev.key === 'ArrowDown') {
+        ev.preventDefault();
+        this.autocompleteIndex = (this.autocompleteIndex + 1) % this.autocompleteSuggestions.length;
+      } else if (ev.key === 'ArrowUp') {
+        ev.preventDefault();
+        this.autocompleteIndex = (this.autocompleteIndex + this.autocompleteSuggestions.length - 1) % this.autocompleteSuggestions.length;
+      }
+    },
+    applySuggestion(index) {
+      const suggestion = this.autocompleteSuggestions[index];
+      if (!suggestion) {
+        return;
+      }
+      const input = this.$refs.searchInput;
+      const cursorPos = input.selectionStart;
+      const before = this.searchText.slice(0, cursorPos);
+      const after = this.searchText.slice(cursorPos);
+      const match = before.match(/(?:\{|,)\s*([^:\s]*)$/);
+      const colonNeeded = !/^\s*:/.test(after);
+      if (!match) {
+        return;
+      }
+      const token = match[1];
+      const start = cursorPos - token.length;
+      let replacement = suggestion;
+      const leadingQuote = token.startsWith('"') || token.startsWith('\'') ? token[0] : '';
+      const trailingQuote = token.length > 1 && (token.endsWith('"') || token.endsWith('\'')) ? token[token.length - 1] : '';
+      if (leadingQuote && !replacement.startsWith(leadingQuote)) {
+        replacement = `${leadingQuote}${replacement}`;
+      }
+      if (trailingQuote && !replacement.endsWith(trailingQuote)) {
+        replacement = `${replacement}${trailingQuote}`;
+      }
+      // Only insert : if we know the user isn't entering in a nested path
+      if (colonNeeded && (!leadingQuote || trailingQuote)) {
+        replacement = `${replacement}:`;
+      }
+      this.searchText = this.searchText.slice(0, start) + replacement + after;
+      this.$nextTick(() => {
+        const pos = start + replacement.length;
+        input.setSelectionRange(pos, pos);
+      });
+      this.autocompleteSuggestions = [];
+    },
+    addPathFilter(path) {
+      if (this.searchText) {
+        if (this.searchText.endsWith('}')) {
+          this.searchText = this.searchText.slice(0, -1) + `, ${path}:  }`;
+        } else {
+          this.searchText += `, ${path}:  }`;
+        }
+
+      } else {
+        // If this.searchText is empty or undefined, initialize it with a new object
+        this.searchText = `{ ${path}:  }`;
+      }
+
+
+      this.$nextTick(() => {
+        const input = this.$refs.searchInput;
+        const cursorIndex = this.searchText.lastIndexOf(':') + 2; // Move cursor after ": "
+
+        input.focus();
+        input.setSelectionRange(cursorIndex, cursorIndex);
+      });
+    }
+  }
+});

package/frontend/src/models/models.html

@@ -37,12 +37,13 @@
     <div class="relative h-[42px] z-10">
       <div class="documents-menu">
         <div class="flex flex-row items-center w-full gap-2">
-          <form @submit.prevent="search" class="relative flex-grow m-0">
-            <input ref="searchInput" class="w-full font-mono rounded-md p-1 border border-gray-300 outline-gray-300 text-lg focus:ring-1 focus:ring-ultramarine-200 focus:ring-offset-0 focus:outline-none" type="text" placeholder="Filter" v-model="searchText" @click="initFilter" @input="updateAutocomplete" @keydown="handleKeyDown" />
-            <ul v-if="autocompleteSuggestions.length" class="absolute z-[9999] bg-white border border-gray-300 rounded mt-1 w-full max-h-40 overflow-y-auto shadow">
-              <li v-for="(suggestion, index) in autocompleteSuggestions" :key="suggestion" class="px-2 py-1 cursor-pointer" :class="{ 'bg-ultramarine-100': index === autocompleteIndex }" @mousedown.prevent="applySuggestion(index)">{{ suggestion }}</li>
-            </ul>
-          </form>
+          <document-search
+            ref="documentSearch"
+            :value="searchText"
+            :schema-paths="schemaPaths"
+            @search="search"
+          >
+          </document-search>
           <div>
             <span v-if="numDocuments == null">Loading ...</span>
             <span v-else-if="typeof numDocuments === 'number'">{{numDocuments === 1 ? numDocuments+ ' document' : numDocuments + ' documents'}}</span>
@@ -127,7 +128,7 @@
       </div>
       <table v-else-if="outputType === 'table'">
         <thead>
-          <th v-for="path in filteredPaths" @click="clickFilter(path.path)" class="cursor-pointer">
+          <th v-for="path in filteredPaths" @click="addPathFilter(path.path)" class="cursor-pointer">
             {{path.path}}
             <span class="path-type">
               ({{(path.instance || 'unknown')}})

package/frontend/src/models/models.js

@@ -5,36 +5,6 @@ const template = require('./models.html');
 const mpath = require('mpath');
 
 const appendCSS = require('../appendCSS');
-const { Trie } = require('./trie');
-
-const QUERY_SELECTORS = [
-  '$eq',
-  '$ne',
-  '$gt',
-  '$gte',
-  '$lt',
-  '$lte',
-  '$in',
-  '$nin',
-  '$exists',
-  '$regex',
-  '$options',
-  '$text',
-  '$search',
-  '$and',
-  '$or',
-  '$nor',
-  '$not',
-  '$elemMatch',
-  '$size',
-  '$all',
-  '$type',
-  '$expr',
-  '$jsonSchema',
-  '$mod'
-];
-
-
 appendCSS(require('./models.css'));
 
 const limit = 20;
@@ -60,9 +30,6 @@ module.exports = app => app.component('models', {
     selectMultiple: false,
     selectedDocuments: [],
     searchText: '',
-    autocompleteSuggestions: [],
-    autocompleteIndex: 0,
-    autocompleteTrie: null,
     shouldShowExportModal: false,
     shouldShowCreateModal: false,
     shouldShowFieldModal: false,
@@ -81,7 +48,6 @@ module.exports = app => app.component('models', {
   }),
   created() {
     this.currentModel = this.model;
-    this.buildAutocompleteTrie();
     this.loadOutputPreference();
   },
   beforeDestroy() {
@@ -120,16 +86,6 @@ module.exports = app => app.component('models', {
     }
   },
   methods: {
-    buildAutocompleteTrie() {
-      this.autocompleteTrie = new Trie();
-      this.autocompleteTrie.bulkInsert(QUERY_SELECTORS, 5);
-      if (Array.isArray(this.schemaPaths) && this.schemaPaths.length > 0) {
-        const paths = this.schemaPaths
-          .map(path => path?.path)
-          .filter(path => typeof path === 'string' && path.length > 0);
-        this.autocompleteTrie.bulkInsert(paths, 10);
-      }
-    },
     loadOutputPreference() {
       if (typeof window === 'undefined' || !window.localStorage) {
         return;
@@ -205,141 +161,6 @@ module.exports = app => app.component('models', {
       const { mongoDBIndexes } = await api.Model.dropIndex({ model: this.currentModel, name });
       this.mongoDBIndexes = mongoDBIndexes;
     },
-    initFilter(ev) {
-      if (!this.searchText) {
-        this.searchText = '{}';
-        this.$nextTick(() => {
-          ev.target.setSelectionRange(1, 1);
-        });
-      }
-    },
-    updateAutocomplete() {
-      const input = this.$refs.searchInput;
-      const cursorPos = input ? input.selectionStart : 0;
-      const before = this.searchText.slice(0, cursorPos);
-      const match = before.match(/(?:\{|,)\s*([^:\s]*)$/);
-      if (match && match[1]) {
-        const token = match[1];
-        const leadingQuoteMatch = token.match(/^["']/);
-        const trailingQuoteMatch = token.length > 1 && /["']$/.test(token)
-          ? token[token.length - 1]
-          : '';
-        const term = token
-          .replace(/^["']/, '')
-          .replace(trailingQuoteMatch ? new RegExp(`[${trailingQuoteMatch}]$`) : '', '')
-          .trim();
-        if (!term) {
-          this.autocompleteSuggestions = [];
-          return;
-        }
-        if (this.autocompleteTrie) {
-          const primarySuggestions = this.autocompleteTrie.getSuggestions(term, 10);
-          const suggestionsSet = new Set(primarySuggestions);
-          if (Array.isArray(this.schemaPaths) && this.schemaPaths.length > 0) {
-            for (const schemaPath of this.schemaPaths) {
-              const path = schemaPath?.path;
-              if (
-                typeof path === 'string' &&
-                path.startsWith(`${term}.`) &&
-                !suggestionsSet.has(path)
-              ) {
-                suggestionsSet.add(path);
-                if (suggestionsSet.size >= 10) {
-                  break;
-                }
-              }
-            }
-          }
-          let suggestions = Array.from(suggestionsSet);
-          if (leadingQuoteMatch) {
-            const leadingQuote = leadingQuoteMatch[0];
-            suggestions = suggestions.map(suggestion => `${leadingQuote}${suggestion}`);
-          }
-          if (trailingQuoteMatch) {
-            suggestions = suggestions.map(suggestion =>
-              suggestion.endsWith(trailingQuoteMatch) ? suggestion : `${suggestion}${trailingQuoteMatch}`
-            );
-          }
-          this.autocompleteSuggestions = suggestions;
-          this.autocompleteIndex = 0;
-          return;
-        }
-      }
-      this.autocompleteSuggestions = [];
-    },
-    handleKeyDown(ev) {
-      if (this.autocompleteSuggestions.length === 0) {
-        return;
-      }
-      if (ev.key === 'Tab' || ev.key === 'Enter') {
-        ev.preventDefault();
-        this.applySuggestion(this.autocompleteIndex);
-      } else if (ev.key === 'ArrowDown') {
-        ev.preventDefault();
-        this.autocompleteIndex = (this.autocompleteIndex + 1) % this.autocompleteSuggestions.length;
-      } else if (ev.key === 'ArrowUp') {
-        ev.preventDefault();
-        this.autocompleteIndex = (this.autocompleteIndex + this.autocompleteSuggestions.length - 1) % this.autocompleteSuggestions.length;
-      }
-    },
-    applySuggestion(index) {
-      const suggestion = this.autocompleteSuggestions[index];
-      if (!suggestion) {
-        return;
-      }
-      const input = this.$refs.searchInput;
-      const cursorPos = input.selectionStart;
-      const before = this.searchText.slice(0, cursorPos);
-      const after = this.searchText.slice(cursorPos);
-      const match = before.match(/(?:\{|,)\s*([^:\s]*)$/);
-      const colonNeeded = !/^\s*:/.test(after);
-      if (!match) {
-        return;
-      }
-      const token = match[1];
-      const start = cursorPos - token.length;
-      let replacement = suggestion;
-      const leadingQuote = token.startsWith('"') || token.startsWith('\'') ? token[0] : '';
-      const trailingQuote = token.length > 1 && (token.endsWith('"') || token.endsWith('\'')) ? token[token.length - 1] : '';
-      if (leadingQuote && !replacement.startsWith(leadingQuote)) {
-        replacement = `${leadingQuote}${replacement}`;
-      }
-      if (trailingQuote && !replacement.endsWith(trailingQuote)) {
-        replacement = `${replacement}${trailingQuote}`;
-      }
-      // Only insert : if we know the user isn't entering in a nested path
-      if (colonNeeded && (!leadingQuote || trailingQuote)) {
-        replacement = `${replacement}:`;
-      }
-      this.searchText = this.searchText.slice(0, start) + replacement + after;
-      this.$nextTick(() => {
-        const pos = start + replacement.length;
-        input.setSelectionRange(pos, pos);
-      });
-      this.autocompleteSuggestions = [];
-    },
-    clickFilter(path) {
-      if (this.searchText) {
-        if (this.searchText.endsWith('}')) {
-          this.searchText = this.searchText.slice(0, -1) + `, ${path}:  }`;
-        } else {
-          this.searchText += `, ${path}:  }`;
-        }
-
-      } else {
-        // If this.searchText is empty or undefined, initialize it with a new object
-        this.searchText = `{ ${path}:  }`;
-      }
-
-
-      this.$nextTick(() => {
-        const input = this.$refs.searchInput;
-        const cursorIndex = this.searchText.lastIndexOf(':') + 2; // Move cursor after ": "
-
-        input.focus();
-        input.setSelectionRange(cursorIndex, cursorIndex);
-      });
-    },
     async closeCreationModal() {
       this.shouldShowCreateModal = false;
       await this.getDocuments();
@@ -389,7 +210,8 @@ module.exports = app => app.component('models', {
       }
       await this.loadMoreDocuments();
     },
-    async search() {
+    async search(searchText) {
+      this.searchText = searchText;
       const hasSearch = typeof this.searchText === 'string' && this.searchText.trim().length > 0;
       if (hasSearch) {
         this.query.search = this.searchText;
@@ -404,6 +226,11 @@ module.exports = app => app.component('models', {
       await this.loadMoreDocuments();
       this.status = 'loaded';
     },
+    addPathFilter(path) {
+      if (this.$refs.documentSearch?.addPathFilter) {
+        this.$refs.documentSearch.addPathFilter(path);
+      }
+    },
     async openIndexModal() {
       this.shouldShowIndexModal = true;
       const { mongoDBIndexes, schemaIndexes } = await api.Model.getIndexes({ model: this.currentModel });
@@ -423,7 +250,6 @@ module.exports = app => app.component('models', {
       // Clear previous data
       this.documents = [];
       this.schemaPaths = [];
-      this.buildAutocompleteTrie();
       this.numDocuments = null;
       this.loadedAllDocs = false;
       this.lastSelectedIndex = null;
@@ -451,7 +277,6 @@ module.exports = app => app.component('models', {
           }
           this.filteredPaths = [...this.schemaPaths];
           this.selectedPaths = [...this.schemaPaths];
-          this.buildAutocompleteTrie();
           schemaPathsReceived = true;
         }
         if (event.numDocs !== undefined) {

package/frontend/src/models/trie.js

@@ -5,6 +5,7 @@ class TrieNode {
     this.children = Object.create(null);
     this.isEnd = false;
     this.freq = 0;
+    this.roles = new Set(); // semantic roles like 'fieldName', 'operator'
   }
 }
 
@@ -13,7 +14,7 @@ class Trie {
     this.root = new TrieNode();
   }
 
-  insert(word, freq = 1) {
+  insert(word, freq = 1, role = null) {
     if (!word) {
       return;
     }
@@ -26,27 +27,25 @@ class Trie {
     }
     node.isEnd = true;
     node.freq += freq;
+    if (role) {
+      node.roles.add(role);
+    }
   }
 
-  bulkInsert(words, freq = 1) {
-    if (!Array.isArray(words)) {
-      return;
-    }
-    for (const word of words) {
-      this.insert(word, freq);
-    }
+  bulkInsert(words, freq = 1, role = null) {
+    for (const word of words) this.insert(word, freq, role);
   }
 
-  collect(node, prefix, out) {
-    if (node.isEnd) {
+  collect(node, prefix, out, role) {
+    if (node.isEnd && (role == null || node.roles.has(role))) {
       out.push([prefix, node.freq]);
     }
     for (const [ch, child] of Object.entries(node.children)) {
-      this.collect(child, prefix + ch, out);
+      this.collect(child, prefix + ch, out, role);
     }
   }
 
-  suggest(prefix, limit = 10) {
+  suggest(prefix, limit = 10, role = null) {
     let node = this.root;
     for (const ch of prefix) {
       if (!node.children[ch]) {
@@ -55,19 +54,19 @@ class Trie {
       node = node.children[ch];
     }
     const results = [];
-    this.collect(node, prefix, results);
+    this.collect(node, prefix, results, role);
     results.sort((a, b) => b[1] - a[1]);
     return results.slice(0, limit).map(([word]) => word);
   }
 
-  fuzzySuggest(prefix, limit = 10) {
+  fuzzySuggest(prefix, limit = 10, role = null) {
     const results = new Set();
 
     const dfs = (node, path, edits) => {
       if (edits > 1) {
         return;
       }
-      if (node.isEnd && Math.abs(path.length - prefix.length) <= 1) {
+      if (node.isEnd && Math.abs(path.length - prefix.length) <= 1 && (role == null || node.roles.has(role))) {
         const dist = levenshtein(prefix, path);
         if (dist <= 1) {
           results.add(path);
@@ -83,17 +82,44 @@ class Trie {
     return Array.from(results).slice(0, limit);
   }
 
-  getSuggestions(prefix, limit = 10) {
+  getSuggestions(prefix, limit = 10, role = null) {
     if (!prefix) {
       return [];
     }
-    const exact = this.suggest(prefix, limit);
+    const exact = this.suggest(prefix, limit, role);
     if (exact.length >= limit) {
       return exact;
     }
-    const fuzzy = this.fuzzySuggest(prefix, limit - exact.length);
+    const fuzzy = this.fuzzySuggest(prefix, limit - exact.length, role);
     return [...exact, ...fuzzy];
   }
+
+  toString() {
+    const lines = [];
+    function dfs(node, prefix, depth) {
+      let line = '  '.repeat(depth);
+      if (prefix.length > 0) {
+        line += prefix[prefix.length - 1];
+      } else {
+        line += '(root)';
+      }
+      if (node.isEnd) {
+        line += ' *';
+      }
+      if (node.roles.size > 0) {
+        line += ' [' + Array.from(node.roles).join(',') + ']';
+      }
+      if (node.freq > 0) {
+        line += ` {freq:${node.freq}}`;
+      }
+      lines.push(line);
+      for (const ch of Object.keys(node.children).sort()) {
+        dfs(node.children[ch], prefix + ch, depth + 1);
+      }
+    }
+    dfs(this.root, '', 0);
+    return lines.join('\n');
+  }
 }
 
 function levenshtein(a, b) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mongoosejs/studio",
-  "version": "0.1.6",
+  "version": "0.1.8",
   "description": "A sleek, powerful MongoDB UI with built-in dashboarding and auth, seamlessly integrated with your Express, Vercel, or Netlify app.",
   "homepage": "https://studio.mongoosejs.io/",
   "repository": {
@@ -9,6 +9,9 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
+    "@ai-sdk/openai": "2.x",
+    "@ai-sdk/anthropic": "2.x",
+    "ai": "5.x",
     "archetype": "0.13.1",
     "csv-stringify": "6.3.0",
     "ejson": "^2.2.3",