@mongoosejs/studio 0.1.6 → 0.1.7

package/frontend/public/app.js

@@ -148,6 +148,9 @@ var map = {
 	"./modal/modal.css": "./frontend/src/modal/modal.css",
 	"./modal/modal.html": "./frontend/src/modal/modal.html",
 	"./modal/modal.js": "./frontend/src/modal/modal.js",
+	"./models/document-search/document-search": "./frontend/src/models/document-search/document-search.js",
+	"./models/document-search/document-search.html": "./frontend/src/models/document-search/document-search.html",
+	"./models/document-search/document-search.js": "./frontend/src/models/document-search/document-search.js",
 	"./models/models": "./frontend/src/models/models.js",
 	"./models/models.css": "./frontend/src/models/models.css",
 	"./models/models.html": "./frontend/src/models/models.html",
@@ -4524,43 +4527,28 @@ module.exports = app => app.component('modal', {
 
 /***/ }),
 
-/***/ "./frontend/src/models/models.css":
-/*!****************************************!*\
-  !*** ./frontend/src/models/models.css ***!
-  \****************************************/
-/***/ ((module) => {
-
-"use strict";
-module.exports = ".models {\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  min-height: calc(100% - 56px);\n}\n\n.models button.gray {\n  color: black;\n  background-color: #eee;\n}\n\n.models .model-selector {\n  background-color: #eee;\n  flex-grow: 0;\n  padding: 15px;\n  padding-top: 0px;\n}\n\n.models h1 {\n  margin-top: 0px;\n}\n\n.models .documents {\n  flex-grow: 1;\n  overflow: scroll;\n  max-height: calc(100vh - 56px);\n}\n\n.models .documents table {\n  /* max-width: -moz-fit-content;\n  max-width: fit-content; */\n  width: 100%;\n  table-layout: auto;\n  font-size: small;\n  padding: 0;\n  margin-right: 1em;\n  white-space: nowrap;\n  z-index: -1;\n  border-collapse: collapse;\n  line-height: 1.5em;\n}\n\n.models .documents table th {\n  position: sticky;\n  top: 42px;\n  background-color: white;\n  z-index: 1;\n}\n\n.models .documents table th:after {\n  content: \"\";\n  position: absolute;\n  left: 0;\n  width: 100%;\n  bottom: -1px;\n  border-bottom: thin solid rgba(0, 0, 0, 0.12);\n}\n\n.models .documents table tr {\n  color: black;\n  border-spacing: 0px 0px;\n  background-color: white;\n  cursor: pointer;\n}\n\n.models .documents table tr:nth-child(even) {\n  background-color: #f5f5f5;\n}\n\n.models .documents table tr:hover {\n  background-color: #a7b9ff;\n}\n\n.models .documents table th,\ntd {\n  border-bottom: thin solid rgba(0, 0, 0, 0.12);\n  text-align: left;\n  padding: 0 16px;\n  height: 48px;\n}\n\n.models textarea {\n  font-size: 1.2em;\n}\n\n.models .path-type {\n  color: rgba(0, 0, 0, 0.36);\n  font-size: 0.8em;\n}\n\n.models .documents-menu {\n  position: fixed;\n  background-color: white;\n  z-index: 1;\n  padding: 4px;\n  display: flex;\n  width: 100vw;\n}\n\n@media (min-width: 1024px) {\n  .models .documents-menu {\n    width: calc(100vw - 12rem);\n  }\n}\n\n.models .documents-menu .search-input {\n  flex-grow: 1;\n  align-items: center;\n}\n\n.models .search-input input {\n  padding: 0.25em 0.5em;\n  font-size: 1.1em;\n  border: 1px solid #ddd;\n  border-radius: 3px;\n  width: calc(100% - 1em);\n}\n\n.models .sort-arrow {\n  padding-left: 10px;\n  padding-right: 10px;\n}\n\n.models .loader {\n  width: 100%;\n  text-align: center;\n}\n\n.models .loader img {\n  height: 4em;\n}\n\n.models .documents .buttons {\n  display: inline-flex;\n  justify-content: space-around;\n  align-items: center;\n}\n\n";
-
-/***/ }),
-
-/***/ "./frontend/src/models/models.html":
-/*!*****************************************!*\
-  !*** ./frontend/src/models/models.html ***!
-  \*****************************************/
+/***/ "./frontend/src/models/document-search/document-search.html":
+/*!******************************************************************!*\
+  !*** ./frontend/src/models/document-search/document-search.html ***!
+  \******************************************************************/
 /***/ ((module) => {
 
 "use strict";
-module.exports = "<div class=\"models flex\" style=\"height: calc(100vh - 55px); height: calc(100dvh - 55px)\">\n  <div class=\"fixed top-[65px] cursor-pointer bg-gray-100 rounded-r-md z-10\" @click=\"hideSidebar = false\">\n    <svg xmlns=\"http://www.w3.org/2000/svg\" style=\"h-5 w-5\" viewBox=\"0 -960 960 960\" class=\"w-5\" fill=\"#5f6368\"><path d=\"M360-120v-720h80v720h-80Zm160-160v-400l200 200-200 200Z\"/></svg>\n  </div>\n  <aside class=\"bg-white border-r overflow-y-auto overflow-x-hidden h-full transition-all duration-300 ease-in-out z-20 w-0 lg:w-48 fixed lg:relative shrink-0\" :class=\"hideSidebar === true ? '!w-0' : hideSidebar === false ? '!w-48' : ''\">\n    <div class=\"flex items-center border-b border-gray-100 w-48 overflow-x-hidden\">\n      <div class=\"p-4 font-bold text-lg\">Models</div>\n      <button\n        @click=\"hideSidebar = true\"\n        class=\"ml-auto mr-2 p-2 rounded hover:bg-gray-200 focus:outline-none\"\n        aria-label=\"Close sidebar\"\n      >\n        <svg xmlns=\"http://www.w3.org/2000/svg\" style=\"h-5 w-5\" viewBox=\"0 -960 960 960\" class=\"w-5\" fill=\"currentColor\"><path d=\"M660-320v-320L500-480l160 160ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm120-80v-560H200v560h120Zm80 0h360v-560H400v560Zm-80 0H200h120Z\"/></svg>\n      </button>\n    </div>\n    <nav class=\"flex flex-1 flex-col\">\n      <ul role=\"list\" class=\"flex flex-1 flex-col gap-y-7\">\n        <li>\n          <ul role=\"list\">\n            <li v-for=\"model in models\">\n              <router-link\n                :to=\"'/model/' + model\"\n                class=\"block truncate rounded-md py-2 pr-2 pl-2 text-sm font-semibold text-gray-700\"\n                :class=\"model === currentModel ? 'bg-ultramarine-100 font-bold' : 'hover:bg-ultramarine-100'\">\n                {{model}}\n              </router-link>\n            </li>\n          </ul>\n        </li>\n      </ul>\n      <div v-if=\"models.length === 0 && status === 'loaded'\" class=\"p-2 bg-red-100\">\n        No models found\n      </div>\n    </nav>\n  </aside>\n  <div class=\"documents\" ref=\"documentsList\">\n    <div class=\"relative h-[42px] z-10\">\n      <div class=\"documents-menu\">\n        <div class=\"flex flex-row items-center w-full gap-2\">\n          <form @submit.prevent=\"search\" class=\"relative flex-grow m-0\">\n            <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\" />\n            <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\">\n              <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>\n            </ul>\n          </form>\n          <div>\n            <span v-if=\"numDocuments == null\">Loading ...</span>\n            <span v-else-if=\"typeof numDocuments === 'number'\">{{numDocuments === 1 ? numDocuments+ ' document' : numDocuments + ' documents'}}</span>\n          </div>\n          <button\n            @click=\"shouldShowExportModal = true\"\n            type=\"button\"\n            v-show=\"!selectMultiple\"\n            class=\"rounded bg-ultramarine-600 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-ultramarine-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-600\">\n            Export\n          </button>\n          <button\n            @click=\"stagingSelect\"\n            type=\"button\"\n            :class=\"{ 'bg-gray-500 ring-inset ring-2 ring-gray-300 hover:bg-gray-600': selectMultiple, 'bg-ultramarine-600 hover:bg-ultramarine-500' : !selectMultiple }\"\n            class=\"rounded px-2 py-2 text-sm font-semibold text-white shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-600\"\n          >\n            {{ selectMultiple ? 'Cancel' : 'Select' }}\n          </button>\n          <button\n            v-show=\"selectMultiple\"\n            @click=\"shouldShowUpdateMultipleModal=true;\"\n            type=\"button\"\n            class=\"rounded bg-green-600 px-2 py-2 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\"\n            >\n            Update\n          </button>\n          <button\n            @click=\"shouldShowDeleteMultipleModal=true;\"\n            type=\"button\"\n            v-show=\"selectMultiple\"\n            class=\"rounded bg-red-600 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-500\"\n            >\n            Delete\n          </button>\n          <button\n            @click=\"openIndexModal\"\n            type=\"button\"\n            v-show=\"!selectMultiple\"\n            class=\"rounded bg-ultramarine-600 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-ultramarine-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-600\">\n            Indexes\n          </button>\n          <button\n            @click=\"shouldShowCreateModal = true;\"\n            type=\"button\"\n            v-show=\"!selectMultiple\"\n            class=\"rounded bg-ultramarine-600 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-ultramarine-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-600\">\n            Create\n          </button>\n          <button\n            @click=\"openFieldSelection\"\n            type=\"button\"\n            v-show=\"!selectMultiple\"\n            class=\"rounded bg-ultramarine-600 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-ultramarine-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-600\">\n            Fields\n          </button>\n          <span class=\"isolate inline-flex rounded-md shadow-sm\">\n            <button\n              @click=\"setOutputType('table')\"\n              type=\"button\"\n              class=\"relative inline-flex items-center rounded-none rounded-l-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10\"\n              :class=\"outputType === 'table' ? 'bg-gray-200' : 'bg-white'\">\n              <img class=\"h-5 w-5\" src=\"images/table.svg\">\n            </button>\n            <button\n              @click=\"setOutputType('json')\"\n              type=\"button\"\n              class=\"relative -ml-px inline-flex items-center rounded-none rounded-r-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10\"\n              :class=\"outputType === 'json' ? 'bg-gray-200' : 'bg-white'\">\n              <img class=\"h-5 w-5\" src=\"images/json.svg\">\n            </button>\n          </span>\n        </div>\n      </div>\n    </div>\n    <div class=\"documents-container relative\">\n      <div v-if=\"error\">\n        <div class=\"bg-red-100 border border-red-400 text-red-700 px-4 py-3 relative m-4 rounded-md\" role=\"alert\">\n          <span class=\"block font-bold\">Error</span>\n          <span class=\"block\">{{ error }}</span>\n        </div>\n      </div>\n      <table v-else-if=\"outputType === 'table'\">\n        <thead>\n          <th v-for=\"path in filteredPaths\" @click=\"clickFilter(path.path)\" class=\"cursor-pointer\">\n            {{path.path}}\n            <span class=\"path-type\">\n              ({{(path.instance || 'unknown')}})\n            </span>\n            <span class=\"sort-arrow\" @click=\"sortDocs(1, path.path)\">{{sortBy[path.path] == 1 ? 'X' : '↑'}}</span>\n            <span class=\"sort-arrow\" @click=\"sortDocs(-1, path.path)\">{{sortBy[path.path] == -1 ? 'X' : '↓'}}</span>\n          </th>\n        </thead>\n        <tbody>\n          <tr v-for=\"document in documents\" @click=\"handleDocumentClick(document, $event)\" :key=\"document._id\">\n            <td v-for=\"schemaPath in filteredPaths\" :class=\"{ 'bg-blue-200': selectedDocuments.some(x => x._id.toString() === document._id.toString()) }\">\n              <component\n                :is=\"getComponentForPath(schemaPath)\"\n                :value=\"getValueForPath(document, schemaPath.path)\"\n                :allude=\"getReferenceModel(schemaPath)\">\n              </component>\n            </td>\n          </tr>\n        </tbody>\n      </table>\n      <div v-else-if=\"outputType === 'json'\" class=\"flex flex-col space-y-6\">\n        <div\n          v-for=\"document in documents\"\n          :key=\"document._id\"\n          @click=\"handleDocumentContainerClick(document, $event)\"\n          :class=\"[\n            'group relative transition-colors',\n            selectedDocuments.some(x => x._id.toString() === document._id.toString()) ? 'bg-blue-200' : 'hover:bg-slate-100'\n          ]\"\n        >\n          <button\n            type=\"button\"\n            class=\"absolute top-2 right-2 z-10 inline-flex items-center rounded bg-ultramarine-600 px-2 py-1 text-xs font-semibold text-white shadow-sm transition-opacity duration-150 opacity-0 group-hover:opacity-100 focus-visible:opacity-100 hover:bg-ultramarine-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-600\"\n            @click.stop=\"openDocument(document)\"\n          >\n            Open this Document\n          </button>\n          <list-json :value=\"filterDocument(document)\" :references=\"referenceMap\">\n          </list-json>\n        </div>\n      </div>\n      <div v-if=\"status === 'loading'\" class=\"loader\">\n        <img src=\"images/loader.gif\">\n      </div>\n    </div>\n  </div>\n  <modal v-if=\"shouldShowExportModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"shouldShowExportModal = false\">&times;</div>\n      <export-query-results\n        :schemaPaths=\"schemaPaths\"\n        :search-text=\"searchText\"\n        :currentModel=\"currentModel\"\n        @done=\"shouldShowExportModal = false\">\n      </export-query-results>\n    </template>\n  </modal>\n  <modal v-if=\"shouldShowIndexModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"shouldShowIndexModal = false\">&times;</div>\n      <div class=\"text-xl font-bold mb-2\">Indexes</div>\n      <div v-for=\"index in mongoDBIndexes\" class=\"w-full flex items-center\">\n        <div class=\"grow shrink text-left flex justify-between items-center\" v-if=\"index.name != '_id_'\">\n          <div>\n            <div class=\"font-bold\">{{ index.name }}</div>\n            <div class=\"text-sm font-mono\">{{ JSON.stringify(index.key) }}</div>\n          </div>\n          <div>\n            <async-button\n              type=\"button\"\n              @click=\"dropIndex(index.name)\"\n              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 disabled:bg-gray-400 disabled:cursor-not-allowed\">\n              Drop\n            </async-button>\n          </div>\n        </div>\n      </div>\n    </template>\n  </modal>\n  <modal v-if=\"shouldShowFieldModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"shouldShowFieldModal = false; selectedPaths = [...filteredPaths];\">&times;</div>\n      <div v-for=\"(path, index) in schemaPaths\" :key=\"index\" class=\"w-5 flex items-center\">\n        <input  class=\"mt-0 h-4 w-4 rounded border-gray-300 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)\" />\n        <div class=\"ml-2 text-gray-700 grow shrink text-left\">\n          <label :for=\"'path.path' + index\">{{path.path}}</label>\n        </div>\n      </div>\n      <div class=\"mt-4 flex gap-2\">\n        <button type=\"button\" @click=\"filterDocuments()\" class=\"rounded-md bg-ultramarine-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-ultramarine-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-teal-600\">Filter Selection</button>\n        <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>\n        <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>\n        <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-gray-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600\" >Cancel</button>\n      </div>\n    </template>\n  </modal>\n  <modal v-if=\"shouldShowCreateModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"shouldShowCreateModal = false;\">&times;</div>\n      <create-document :currentModel=\"currentModel\" :paths=\"schemaPaths\" @close=\"closeCreationModal\"></create-document>\n    </template>\n  </modal>\n  <modal v-if=\"shouldShowUpdateMultipleModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"shouldShowUpdateMultipleModal = false;\">&times;</div>\n      <update-document :currentModel=\"currentModel\" :document=\"selectedDocuments\" :multiple=\"true\" @update=\"updateDocuments\" @close=\"shouldShowUpdateMultipleModal=false;\"></update-document>\n    </template>\n  </modal>\n  <modal v-if=\"shouldShowDeleteMultipleModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"shouldShowDeleteMultipleModal = false;\">&times;</div>\n      <h2>Are you sure you want to delete {{selectedDocuments.length}} documents?</h2>\n      <div>\n        <list-json :value=\"selectedDocuments\"></list-json>\n      </div>\n      <div class=\"flex gap-4\">\n        <async-button @click=\"deleteDocuments\" class=\"rounded bg-red-500 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600\">\n          Confirm\n        </async-button>\n        <button @click=\"shouldShowDeleteMultipleModal = false;\" class=\"rounded bg-gray-400 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-gray-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500\">\n          Cancel\n        </button>\n      </div>\n    </template>\n  </modal>\n</div>\n";
+module.exports = "<form @submit.prevent=\"emitSearch\" class=\"relative flex-grow m-0\">\n  <input\n    ref=\"searchInput\"\n    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\"\n    type=\"text\"\n    placeholder=\"Filter\"\n    v-model=\"searchText\"\n    @click=\"initFilter\"\n    @input=\"updateAutocomplete\"\n    @keydown=\"handleKeyDown\"\n  />\n  <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\">\n    <li\n      v-for=\"(suggestion, index) in autocompleteSuggestions\"\n      :key=\"suggestion\"\n      class=\"px-2 py-1 cursor-pointer\"\n      :class=\"{ 'bg-ultramarine-100': index === autocompleteIndex }\"\n      @mousedown.prevent=\"applySuggestion(index)\"\n    >\n      {{ suggestion }}\n    </li>\n  </ul>\n</form>\n";
 
 /***/ }),
 
-/***/ "./frontend/src/models/models.js":
-/*!***************************************!*\
-  !*** ./frontend/src/models/models.js ***!
-  \***************************************/
+/***/ "./frontend/src/models/document-search/document-search.js":
+/*!****************************************************************!*\
+  !*** ./frontend/src/models/document-search/document-search.js ***!
+  \****************************************************************/
 /***/ ((module, __unused_webpack_exports, __webpack_require__) => {
 
 "use strict";
 
 
-const api = __webpack_require__(/*! ../api */ "./frontend/src/api.js");
-const template = __webpack_require__(/*! ./models.html */ "./frontend/src/models/models.html");
-const mpath = __webpack_require__(/*! mpath */ "./node_modules/mpath/index.js");
-
-const appendCSS = __webpack_require__(/*! ../appendCSS */ "./frontend/src/appendCSS.js");
-const { Trie } = __webpack_require__(/*! ./trie */ "./frontend/src/models/trie.js");
+const template = __webpack_require__(/*! ./document-search.html */ "./frontend/src/models/document-search/document-search.html");
+const { Trie } = __webpack_require__(/*! ../trie */ "./frontend/src/models/trie.js");
 
 const QUERY_SELECTORS = [
   '$eq',
@@ -4589,7 +4577,241 @@ const QUERY_SELECTORS = [
   '$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);
+      });
+    }
+  }
+});
 
+
+/***/ }),
+
+/***/ "./frontend/src/models/models.css":
+/*!****************************************!*\
+  !*** ./frontend/src/models/models.css ***!
+  \****************************************/
+/***/ ((module) => {
+
+"use strict";
+module.exports = ".models {\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  min-height: calc(100% - 56px);\n}\n\n.models button.gray {\n  color: black;\n  background-color: #eee;\n}\n\n.models .model-selector {\n  background-color: #eee;\n  flex-grow: 0;\n  padding: 15px;\n  padding-top: 0px;\n}\n\n.models h1 {\n  margin-top: 0px;\n}\n\n.models .documents {\n  flex-grow: 1;\n  overflow: scroll;\n  max-height: calc(100vh - 56px);\n}\n\n.models .documents table {\n  /* max-width: -moz-fit-content;\n  max-width: fit-content; */\n  width: 100%;\n  table-layout: auto;\n  font-size: small;\n  padding: 0;\n  margin-right: 1em;\n  white-space: nowrap;\n  z-index: -1;\n  border-collapse: collapse;\n  line-height: 1.5em;\n}\n\n.models .documents table th {\n  position: sticky;\n  top: 42px;\n  background-color: white;\n  z-index: 1;\n}\n\n.models .documents table th:after {\n  content: \"\";\n  position: absolute;\n  left: 0;\n  width: 100%;\n  bottom: -1px;\n  border-bottom: thin solid rgba(0, 0, 0, 0.12);\n}\n\n.models .documents table tr {\n  color: black;\n  border-spacing: 0px 0px;\n  background-color: white;\n  cursor: pointer;\n}\n\n.models .documents table tr:nth-child(even) {\n  background-color: #f5f5f5;\n}\n\n.models .documents table tr:hover {\n  background-color: #a7b9ff;\n}\n\n.models .documents table th,\ntd {\n  border-bottom: thin solid rgba(0, 0, 0, 0.12);\n  text-align: left;\n  padding: 0 16px;\n  height: 48px;\n}\n\n.models textarea {\n  font-size: 1.2em;\n}\n\n.models .path-type {\n  color: rgba(0, 0, 0, 0.36);\n  font-size: 0.8em;\n}\n\n.models .documents-menu {\n  position: fixed;\n  background-color: white;\n  z-index: 1;\n  padding: 4px;\n  display: flex;\n  width: 100vw;\n}\n\n@media (min-width: 1024px) {\n  .models .documents-menu {\n    width: calc(100vw - 12rem);\n  }\n}\n\n.models .documents-menu .search-input {\n  flex-grow: 1;\n  align-items: center;\n}\n\n.models .search-input input {\n  padding: 0.25em 0.5em;\n  font-size: 1.1em;\n  border: 1px solid #ddd;\n  border-radius: 3px;\n  width: calc(100% - 1em);\n}\n\n.models .sort-arrow {\n  padding-left: 10px;\n  padding-right: 10px;\n}\n\n.models .loader {\n  width: 100%;\n  text-align: center;\n}\n\n.models .loader img {\n  height: 4em;\n}\n\n.models .documents .buttons {\n  display: inline-flex;\n  justify-content: space-around;\n  align-items: center;\n}\n\n";
+
+/***/ }),
+
+/***/ "./frontend/src/models/models.html":
+/*!*****************************************!*\
+  !*** ./frontend/src/models/models.html ***!
+  \*****************************************/
+/***/ ((module) => {
+
+"use strict";
+module.exports = "<div class=\"models flex\" style=\"height: calc(100vh - 55px); height: calc(100dvh - 55px)\">\n  <div class=\"fixed top-[65px] cursor-pointer bg-gray-100 rounded-r-md z-10\" @click=\"hideSidebar = false\">\n    <svg xmlns=\"http://www.w3.org/2000/svg\" style=\"h-5 w-5\" viewBox=\"0 -960 960 960\" class=\"w-5\" fill=\"#5f6368\"><path d=\"M360-120v-720h80v720h-80Zm160-160v-400l200 200-200 200Z\"/></svg>\n  </div>\n  <aside class=\"bg-white border-r overflow-y-auto overflow-x-hidden h-full transition-all duration-300 ease-in-out z-20 w-0 lg:w-48 fixed lg:relative shrink-0\" :class=\"hideSidebar === true ? '!w-0' : hideSidebar === false ? '!w-48' : ''\">\n    <div class=\"flex items-center border-b border-gray-100 w-48 overflow-x-hidden\">\n      <div class=\"p-4 font-bold text-lg\">Models</div>\n      <button\n        @click=\"hideSidebar = true\"\n        class=\"ml-auto mr-2 p-2 rounded hover:bg-gray-200 focus:outline-none\"\n        aria-label=\"Close sidebar\"\n      >\n        <svg xmlns=\"http://www.w3.org/2000/svg\" style=\"h-5 w-5\" viewBox=\"0 -960 960 960\" class=\"w-5\" fill=\"currentColor\"><path d=\"M660-320v-320L500-480l160 160ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm120-80v-560H200v560h120Zm80 0h360v-560H400v560Zm-80 0H200h120Z\"/></svg>\n      </button>\n    </div>\n    <nav class=\"flex flex-1 flex-col\">\n      <ul role=\"list\" class=\"flex flex-1 flex-col gap-y-7\">\n        <li>\n          <ul role=\"list\">\n            <li v-for=\"model in models\">\n              <router-link\n                :to=\"'/model/' + model\"\n                class=\"block truncate rounded-md py-2 pr-2 pl-2 text-sm font-semibold text-gray-700\"\n                :class=\"model === currentModel ? 'bg-ultramarine-100 font-bold' : 'hover:bg-ultramarine-100'\">\n                {{model}}\n              </router-link>\n            </li>\n          </ul>\n        </li>\n      </ul>\n      <div v-if=\"models.length === 0 && status === 'loaded'\" class=\"p-2 bg-red-100\">\n        No models found\n      </div>\n    </nav>\n  </aside>\n  <div class=\"documents\" ref=\"documentsList\">\n    <div class=\"relative h-[42px] z-10\">\n      <div class=\"documents-menu\">\n        <div class=\"flex flex-row items-center w-full gap-2\">\n          <document-search\n            ref=\"documentSearch\"\n            :value=\"searchText\"\n            :schema-paths=\"schemaPaths\"\n            @search=\"search\"\n          >\n          </document-search>\n          <div>\n            <span v-if=\"numDocuments == null\">Loading ...</span>\n            <span v-else-if=\"typeof numDocuments === 'number'\">{{numDocuments === 1 ? numDocuments+ ' document' : numDocuments + ' documents'}}</span>\n          </div>\n          <button\n            @click=\"shouldShowExportModal = true\"\n            type=\"button\"\n            v-show=\"!selectMultiple\"\n            class=\"rounded bg-ultramarine-600 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-ultramarine-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-600\">\n            Export\n          </button>\n          <button\n            @click=\"stagingSelect\"\n            type=\"button\"\n            :class=\"{ 'bg-gray-500 ring-inset ring-2 ring-gray-300 hover:bg-gray-600': selectMultiple, 'bg-ultramarine-600 hover:bg-ultramarine-500' : !selectMultiple }\"\n            class=\"rounded px-2 py-2 text-sm font-semibold text-white shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-600\"\n          >\n            {{ selectMultiple ? 'Cancel' : 'Select' }}\n          </button>\n          <button\n            v-show=\"selectMultiple\"\n            @click=\"shouldShowUpdateMultipleModal=true;\"\n            type=\"button\"\n            class=\"rounded bg-green-600 px-2 py-2 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\"\n            >\n            Update\n          </button>\n          <button\n            @click=\"shouldShowDeleteMultipleModal=true;\"\n            type=\"button\"\n            v-show=\"selectMultiple\"\n            class=\"rounded bg-red-600 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-500\"\n            >\n            Delete\n          </button>\n          <button\n            @click=\"openIndexModal\"\n            type=\"button\"\n            v-show=\"!selectMultiple\"\n            class=\"rounded bg-ultramarine-600 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-ultramarine-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-600\">\n            Indexes\n          </button>\n          <button\n            @click=\"shouldShowCreateModal = true;\"\n            type=\"button\"\n            v-show=\"!selectMultiple\"\n            class=\"rounded bg-ultramarine-600 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-ultramarine-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-600\">\n            Create\n          </button>\n          <button\n            @click=\"openFieldSelection\"\n            type=\"button\"\n            v-show=\"!selectMultiple\"\n            class=\"rounded bg-ultramarine-600 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-ultramarine-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-600\">\n            Fields\n          </button>\n          <span class=\"isolate inline-flex rounded-md shadow-sm\">\n            <button\n              @click=\"setOutputType('table')\"\n              type=\"button\"\n              class=\"relative inline-flex items-center rounded-none rounded-l-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10\"\n              :class=\"outputType === 'table' ? 'bg-gray-200' : 'bg-white'\">\n              <img class=\"h-5 w-5\" src=\"images/table.svg\">\n            </button>\n            <button\n              @click=\"setOutputType('json')\"\n              type=\"button\"\n              class=\"relative -ml-px inline-flex items-center rounded-none rounded-r-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10\"\n              :class=\"outputType === 'json' ? 'bg-gray-200' : 'bg-white'\">\n              <img class=\"h-5 w-5\" src=\"images/json.svg\">\n            </button>\n          </span>\n        </div>\n      </div>\n    </div>\n    <div class=\"documents-container relative\">\n      <div v-if=\"error\">\n        <div class=\"bg-red-100 border border-red-400 text-red-700 px-4 py-3 relative m-4 rounded-md\" role=\"alert\">\n          <span class=\"block font-bold\">Error</span>\n          <span class=\"block\">{{ error }}</span>\n        </div>\n      </div>\n      <table v-else-if=\"outputType === 'table'\">\n        <thead>\n          <th v-for=\"path in filteredPaths\" @click=\"addPathFilter(path.path)\" class=\"cursor-pointer\">\n            {{path.path}}\n            <span class=\"path-type\">\n              ({{(path.instance || 'unknown')}})\n            </span>\n            <span class=\"sort-arrow\" @click=\"sortDocs(1, path.path)\">{{sortBy[path.path] == 1 ? 'X' : '↑'}}</span>\n            <span class=\"sort-arrow\" @click=\"sortDocs(-1, path.path)\">{{sortBy[path.path] == -1 ? 'X' : '↓'}}</span>\n          </th>\n        </thead>\n        <tbody>\n          <tr v-for=\"document in documents\" @click=\"handleDocumentClick(document, $event)\" :key=\"document._id\">\n            <td v-for=\"schemaPath in filteredPaths\" :class=\"{ 'bg-blue-200': selectedDocuments.some(x => x._id.toString() === document._id.toString()) }\">\n              <component\n                :is=\"getComponentForPath(schemaPath)\"\n                :value=\"getValueForPath(document, schemaPath.path)\"\n                :allude=\"getReferenceModel(schemaPath)\">\n              </component>\n            </td>\n          </tr>\n        </tbody>\n      </table>\n      <div v-else-if=\"outputType === 'json'\" class=\"flex flex-col space-y-6\">\n        <div\n          v-for=\"document in documents\"\n          :key=\"document._id\"\n          @click=\"handleDocumentContainerClick(document, $event)\"\n          :class=\"[\n            'group relative transition-colors',\n            selectedDocuments.some(x => x._id.toString() === document._id.toString()) ? 'bg-blue-200' : 'hover:bg-slate-100'\n          ]\"\n        >\n          <button\n            type=\"button\"\n            class=\"absolute top-2 right-2 z-10 inline-flex items-center rounded bg-ultramarine-600 px-2 py-1 text-xs font-semibold text-white shadow-sm transition-opacity duration-150 opacity-0 group-hover:opacity-100 focus-visible:opacity-100 hover:bg-ultramarine-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-600\"\n            @click.stop=\"openDocument(document)\"\n          >\n            Open this Document\n          </button>\n          <list-json :value=\"filterDocument(document)\" :references=\"referenceMap\">\n          </list-json>\n        </div>\n      </div>\n      <div v-if=\"status === 'loading'\" class=\"loader\">\n        <img src=\"images/loader.gif\">\n      </div>\n    </div>\n  </div>\n  <modal v-if=\"shouldShowExportModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"shouldShowExportModal = false\">&times;</div>\n      <export-query-results\n        :schemaPaths=\"schemaPaths\"\n        :search-text=\"searchText\"\n        :currentModel=\"currentModel\"\n        @done=\"shouldShowExportModal = false\">\n      </export-query-results>\n    </template>\n  </modal>\n  <modal v-if=\"shouldShowIndexModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"shouldShowIndexModal = false\">&times;</div>\n      <div class=\"text-xl font-bold mb-2\">Indexes</div>\n      <div v-for=\"index in mongoDBIndexes\" class=\"w-full flex items-center\">\n        <div class=\"grow shrink text-left flex justify-between items-center\" v-if=\"index.name != '_id_'\">\n          <div>\n            <div class=\"font-bold\">{{ index.name }}</div>\n            <div class=\"text-sm font-mono\">{{ JSON.stringify(index.key) }}</div>\n          </div>\n          <div>\n            <async-button\n              type=\"button\"\n              @click=\"dropIndex(index.name)\"\n              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 disabled:bg-gray-400 disabled:cursor-not-allowed\">\n              Drop\n            </async-button>\n          </div>\n        </div>\n      </div>\n    </template>\n  </modal>\n  <modal v-if=\"shouldShowFieldModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"shouldShowFieldModal = false; selectedPaths = [...filteredPaths];\">&times;</div>\n      <div v-for=\"(path, index) in schemaPaths\" :key=\"index\" class=\"w-5 flex items-center\">\n        <input  class=\"mt-0 h-4 w-4 rounded border-gray-300 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)\" />\n        <div class=\"ml-2 text-gray-700 grow shrink text-left\">\n          <label :for=\"'path.path' + index\">{{path.path}}</label>\n        </div>\n      </div>\n      <div class=\"mt-4 flex gap-2\">\n        <button type=\"button\" @click=\"filterDocuments()\" class=\"rounded-md bg-ultramarine-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-ultramarine-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-teal-600\">Filter Selection</button>\n        <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>\n        <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>\n        <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-gray-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600\" >Cancel</button>\n      </div>\n    </template>\n  </modal>\n  <modal v-if=\"shouldShowCreateModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"shouldShowCreateModal = false;\">&times;</div>\n      <create-document :currentModel=\"currentModel\" :paths=\"schemaPaths\" @close=\"closeCreationModal\"></create-document>\n    </template>\n  </modal>\n  <modal v-if=\"shouldShowUpdateMultipleModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"shouldShowUpdateMultipleModal = false;\">&times;</div>\n      <update-document :currentModel=\"currentModel\" :document=\"selectedDocuments\" :multiple=\"true\" @update=\"updateDocuments\" @close=\"shouldShowUpdateMultipleModal=false;\"></update-document>\n    </template>\n  </modal>\n  <modal v-if=\"shouldShowDeleteMultipleModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"shouldShowDeleteMultipleModal = false;\">&times;</div>\n      <h2>Are you sure you want to delete {{selectedDocuments.length}} documents?</h2>\n      <div>\n        <list-json :value=\"selectedDocuments\"></list-json>\n      </div>\n      <div class=\"flex gap-4\">\n        <async-button @click=\"deleteDocuments\" class=\"rounded bg-red-500 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600\">\n          Confirm\n        </async-button>\n        <button @click=\"shouldShowDeleteMultipleModal = false;\" class=\"rounded bg-gray-400 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-gray-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500\">\n          Cancel\n        </button>\n      </div>\n    </template>\n  </modal>\n</div>\n";
+
+/***/ }),
+
+/***/ "./frontend/src/models/models.js":
+/*!***************************************!*\
+  !*** ./frontend/src/models/models.js ***!
+  \***************************************/
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+"use strict";
+
+
+const api = __webpack_require__(/*! ../api */ "./frontend/src/api.js");
+const template = __webpack_require__(/*! ./models.html */ "./frontend/src/models/models.html");
+const mpath = __webpack_require__(/*! mpath */ "./node_modules/mpath/index.js");
+
+const appendCSS = __webpack_require__(/*! ../appendCSS */ "./frontend/src/appendCSS.js");
 appendCSS(__webpack_require__(/*! ./models.css */ "./frontend/src/models/models.css"));
 
 const limit = 20;
@@ -4615,9 +4837,6 @@ module.exports = app => app.component('models', {
     selectMultiple: false,
     selectedDocuments: [],
     searchText: '',
-    autocompleteSuggestions: [],
-    autocompleteIndex: 0,
-    autocompleteTrie: null,
     shouldShowExportModal: false,
     shouldShowCreateModal: false,
     shouldShowFieldModal: false,
@@ -4636,7 +4855,6 @@ module.exports = app => app.component('models', {
   }),
   created() {
     this.currentModel = this.model;
-    this.buildAutocompleteTrie();
     this.loadOutputPreference();
   },
   beforeDestroy() {
@@ -4675,16 +4893,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;
@@ -4760,141 +4968,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();
@@ -4944,7 +5017,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;
@@ -4959,6 +5033,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 });
@@ -4978,7 +5057,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;
@@ -5006,7 +5084,6 @@ module.exports = app => app.component('models', {
           }
           this.filteredPaths = [...this.schemaPaths];
           this.selectedPaths = [...this.schemaPaths];
-          this.buildAutocompleteTrie();
           schemaPathsReceived = true;
         }
         if (event.numDocs !== undefined) {
@@ -5236,6 +5313,7 @@ class TrieNode {
     this.children = Object.create(null);
     this.isEnd = false;
     this.freq = 0;
+    this.roles = new Set(); // semantic roles like 'fieldName', 'operator'
   }
 }
 
@@ -5244,7 +5322,7 @@ class Trie {
     this.root = new TrieNode();
   }
 
-  insert(word, freq = 1) {
+  insert(word, freq = 1, role = null) {
     if (!word) {
       return;
     }
@@ -5257,27 +5335,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]) {
@@ -5286,19 +5362,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);
@@ -5314,17 +5390,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) {
@@ -16606,7 +16709,7 @@ module.exports = function stringToParts(str) {
 /***/ ((module) => {
 
 "use strict";
-module.exports = /*#__PURE__*/JSON.parse('{"name":"@mongoosejs/studio","version":"0.1.6","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":{"type":"git","url":"https://github.com/mongoosejs/studio"},"license":"Apache-2.0","dependencies":{"archetype":"0.13.1","csv-stringify":"6.3.0","ejson":"^2.2.3","extrovert":"^0.2.0","marked":"15.0.12","node-inspect-extracted":"3.x","tailwindcss":"3.4.0","vanillatoasts":"^1.6.0","vue":"3.x","webpack":"5.x"},"peerDependencies":{"bson":"^5.5.1 || 6.x","express":"4.x","mongoose":"7.x || 8.x || ^9.0.0-0"},"devDependencies":{"@masteringjs/eslint-config":"0.1.1","axios":"1.2.2","dedent":"^1.6.0","eslint":"9.30.0","express":"4.x","mocha":"10.2.0","mongoose":"9.x"},"scripts":{"lint":"eslint .","tailwind":"tailwindcss -o ./frontend/public/tw.css","tailwind:watch":"tailwindcss -o ./frontend/public/tw.css --watch","test":"mocha test/*.test.js"}}');
+module.exports = /*#__PURE__*/JSON.parse('{"name":"@mongoosejs/studio","version":"0.1.7","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":{"type":"git","url":"https://github.com/mongoosejs/studio"},"license":"Apache-2.0","dependencies":{"archetype":"0.13.1","csv-stringify":"6.3.0","ejson":"^2.2.3","extrovert":"^0.2.0","marked":"15.0.12","node-inspect-extracted":"3.x","tailwindcss":"3.4.0","vanillatoasts":"^1.6.0","vue":"3.x","webpack":"5.x"},"peerDependencies":{"bson":"^5.5.1 || 6.x","express":"4.x","mongoose":"7.x || 8.x || ^9.0.0-0"},"devDependencies":{"@masteringjs/eslint-config":"0.1.1","axios":"1.2.2","dedent":"^1.6.0","eslint":"9.30.0","express":"4.x","mocha":"10.2.0","mongoose":"9.x"},"scripts":{"lint":"eslint .","tailwind":"tailwindcss -o ./frontend/public/tw.css","tailwind:watch":"tailwindcss -o ./frontend/public/tw.css --watch","test":"mocha test/*.test.js"}}');
 
 /***/ })