@mongoosejs/studio 0.0.118 → 0.0.120

package/backend/actions/Model/exportQueryResults.js

@@ -4,14 +4,15 @@ const Archetype = require('archetype');
 const mongoose = require('mongoose');
 const { stringify } = require('csv-stringify/sync');
 const authorize = require('../../authorize');
+const evaluateFilter = require('../../helpers/evaluateFilter');
 
 const GetDocumentsParams = new Archetype({
   model: {
     $type: 'string',
     $required: true
   },
-  filter: {
-    $type: Archetype.Any
+  searchText: {
+    $type: 'string'
   },
   propertiesToInclude: {
     $type: ['string'],
@@ -30,8 +31,7 @@ const GetDocumentsParams = new Archetype({
 
 module.exports = ({ db }) => async function exportQueryResults(params, req, res) {
   params = new GetDocumentsParams(params);
-  let { filter } = params;
-  const { model, propertiesToInclude, roles } = params;
+  const { model, propertiesToInclude, roles, searchText } = params;
 
   await authorize('Model.exportQueryResults', roles);
 
@@ -40,12 +40,11 @@ module.exports = ({ db }) => async function exportQueryResults(params, req, res)
     throw new Error(`Model ${model} not found`);
   }
 
-  if (typeof filter === 'string') {
-    filter = { '$**': filter };
-  }
+  const parsedFilter = evaluateFilter(searchText);
+  const filter = parsedFilter == null ? {} : parsedFilter;
 
   const docs = await Model.
-    find(filter == null ? {} : filter).
+    find(filter).
     setOptions({ sanitizeFilter: true }).
     sort({ _id: -1 });
 

package/backend/actions/Model/getDocuments.js

@@ -2,7 +2,7 @@
 
 const Archetype = require('archetype');
 const removeSpecifiedPaths = require('../../helpers/removeSpecifiedPaths');
-const { EJSON } = require('bson');
+const evaluateFilter = require('../../helpers/evaluateFilter');
 const authorize = require('../../authorize');
 
 const GetDocumentsParams = new Archetype({
@@ -20,8 +20,8 @@ const GetDocumentsParams = new Archetype({
     $required: true,
     $default: 0
   },
-  filter: {
-    $type: Archetype.Any
+  searchText: {
+    $type: 'string'
   },
   sort: {
     $type: Archetype.Any
@@ -36,20 +36,15 @@ module.exports = ({ db }) => async function getDocuments(params) {
   const { roles } = params;
   await authorize('Model.getDocuments', roles);
 
-  let { filter } = params;
-  if (filter != null && Object.keys(filter).length > 0) {
-    filter = EJSON.parse(filter);
-  }
-  const { model, limit, skip, sort } = params;
+  const { model, limit, skip, sort, searchText } = params;
 
   const Model = db.models[model];
   if (Model == null) {
     throw new Error(`Model ${model} not found`);
   }
 
-  if (typeof filter === 'string') {
-    filter = { '$**': filter };
-  }
+  const parsedFilter = evaluateFilter(searchText);
+  const filter = parsedFilter == null ? {} : parsedFilter;
 
   const hasSort = typeof sort === 'object' && sort != null && Object.keys(sort).length > 0;
   const sortObj = hasSort ? { ...sort } : {};
@@ -57,7 +52,7 @@ module.exports = ({ db }) => async function getDocuments(params) {
     sortObj._id = -1;
   }
   const cursor = await Model.
-    find(filter == null ? {} : filter).
+    find(filter).
     limit(limit).
     skip(skip).
     sort(sortObj).
@@ -78,7 +73,7 @@ module.exports = ({ db }) => async function getDocuments(params) {
   }
   removeSpecifiedPaths(schemaPaths, '.$*');
 
-  const numDocuments = filter == null ?
+  const numDocuments = parsedFilter == null ?
     await Model.estimatedDocumentCount() :
     await Model.countDocuments(filter);
 

package/backend/actions/Model/getDocumentsStream.js

@@ -0,0 +1,117 @@
+'use strict';
+
+const Archetype = require('archetype');
+const removeSpecifiedPaths = require('../../helpers/removeSpecifiedPaths');
+const evaluateFilter = require('../../helpers/evaluateFilter');
+const authorize = require('../../authorize');
+
+const GetDocumentsParams = new Archetype({
+  model: {
+    $type: 'string',
+    $required: true
+  },
+  limit: {
+    $type: 'number',
+    $required: true,
+    $default: 20
+  },
+  skip: {
+    $type: 'number',
+    $required: true,
+    $default: 0
+  },
+  searchText: {
+    $type: 'string'
+  },
+  sort: {
+    $type: Archetype.Any
+  },
+  roles: {
+    $type: ['string']
+  }
+}).compile('GetDocumentsParams');
+
+module.exports = ({ db }) => async function* getDocumentsStream(params) {
+  params = new GetDocumentsParams(params);
+  const { roles } = params;
+  await authorize('Model.getDocumentsStream', roles);
+
+  const { model, limit, skip, sort, searchText } = params;
+
+  const Model = db.models[model];
+  if (Model == null) {
+    throw new Error(`Model ${model} not found`);
+  }
+
+  const parsedFilter = evaluateFilter(searchText);
+  const filter = parsedFilter == null ? {} : parsedFilter;
+
+  const hasSort = typeof sort === 'object' && sort != null && Object.keys(sort).length > 0;
+  const sortObj = hasSort ? { ...sort } : {};
+  if (!sortObj.hasOwnProperty('_id')) {
+    sortObj._id = -1;
+  }
+
+  const schemaPaths = {};
+  for (const path of Object.keys(Model.schema.paths)) {
+    schemaPaths[path] = {
+      instance: Model.schema.paths[path].instance,
+      path,
+      ref: Model.schema.paths[path].options?.ref,
+      required: Model.schema.paths[path].options?.required
+    };
+  }
+  removeSpecifiedPaths(schemaPaths, '.$*');
+
+  yield { schemaPaths };
+
+  // Start counting documents in parallel with streaming documents
+  const numDocsPromise = (parsedFilter == null)
+    ? Model.estimatedDocumentCount().exec()
+    : Model.countDocuments(filter).exec();
+
+  const cursor = await Model.
+    find(filter).
+    limit(limit).
+    skip(skip).
+    sort(sortObj).
+    batchSize(1).
+    cursor();
+
+  let numDocsYielded = false;
+  let numDocumentsPromiseResolved = false;
+  let numDocumentsValue;
+  let numDocumentsError;
+
+  try {
+    // Start listening for numDocsPromise resolution
+    numDocsPromise.then(num => {
+      numDocumentsPromiseResolved = true;
+      numDocumentsValue = num;
+    }).catch(err => {
+      numDocumentsPromiseResolved = true;
+      numDocumentsError = err;
+    });
+
+    for (let doc = await cursor.next(); doc != null; doc = await cursor.next()) {
+      // If numDocsPromise has resolved and not yet yielded, yield it first
+      if (numDocumentsPromiseResolved && !numDocsYielded) {
+        if (numDocumentsError) {
+          yield { error: numDocumentsError };
+        } else {
+          yield { numDocs: numDocumentsValue };
+        }
+        numDocsYielded = true;
+      }
+      yield { document: doc.toJSON({ virtuals: false, getters: false, transform: false }) };
+    }
+
+    // If numDocsPromise hasn't resolved yet, wait for it and yield
+    if (!numDocsYielded) {
+      const numDocuments = await numDocsPromise;
+      yield { numDocs: numDocuments };
+    }
+  } finally {
+    await cursor.close();
+  }
+};

package/backend/actions/Model/index.js

@@ -7,6 +7,7 @@ exports.dropIndex = require('./dropIndex');
 exports.exportQueryResults = require('./exportQueryResults');
 exports.getDocument = require('./getDocument');
 exports.getDocuments = require('./getDocuments');
+exports.getDocumentsStream = require('./getDocumentsStream');
 exports.getIndexes = require('./getIndexes');
 exports.listModels = require('./listModels');
 exports.updateDocument = require('./updateDocument');

package/backend/authorize.js

@@ -20,6 +20,7 @@ const actionsToRequiredRoles = {
   'Model.exportQueryResults': ['owner', 'admin', 'member', 'readonly'],
   'Model.getDocument': ['owner', 'admin', 'member', 'readonly'],
   'Model.getDocuments': ['owner', 'admin', 'member', 'readonly'],
+  'Model.getDocumentsStream': ['owner', 'admin', 'member', 'readonly'],
   'Model.getIndexes': ['owner', 'admin', 'member', 'readonly'],
   'Model.listModels': ['owner', 'admin', 'member', 'readonly'],
   'Model.updateDocuments': ['owner', 'admin', 'member']

package/backend/helpers/evaluateFilter.js

@@ -0,0 +1,51 @@
+'use strict';
+
+const mongoose = require('mongoose');
+const vm = require('vm');
+
+const evaluate = typeof vm.evaluate === 'function' ?
+  vm.evaluate.bind(vm) :
+  (code, context) => {
+    const script = new vm.Script(code, { displayErrors: true });
+    return script.runInContext(context, { timeout: 1000 });
+  };
+
+const ObjectId = new Proxy(mongoose.Types.ObjectId, {
+  apply(target, thisArg, argumentsList) {
+    return new target(...argumentsList);
+  }
+});
+
+module.exports = function evaluateFilter(searchText) {
+  if (searchText == null) {
+    return null;
+  }
+
+  const normalized = String(searchText);
+  if (normalized.trim().length === 0) {
+    return null;
+  }
+
+  const context = vm.createContext({
+    ObjectId,
+    Date,
+    Math
+  });
+
+  let result;
+  try {
+    result = evaluate(`(${normalized})`, context);
+  } catch (err) {
+    throw new Error(`Invalid search filter: ${err.message}`);
+  }
+
+  if (result == null) {
+    return result;
+  }
+
+  if (typeof result === 'object') {
+    return result;
+  }
+
+  throw new Error('Invalid search filter: must evaluate to an object');
+};

package/eslint.config.js

@@ -37,7 +37,8 @@ module.exports = defineConfig([
         __dirname: true,
         process: true,
         setTimeout: true,
-        navigator: true
+        navigator: true,
+        TextDecoder: true
       },
       sourceType: 'commonjs'
     },

package/frontend/public/app.js

@@ -124,6 +124,9 @@ if (window.MONGOOSE_STUDIO_CONFIG.isLambda) {
     getDocuments: function getDocuments(params) {
       return client.post('', { action: 'Model.getDocuments', ...params }).then(res => res.data);
     },
+    getDocumentsStream: function getDocumentsStream(params) {
+      return client.post('', { action: 'Model.getDocumentsStream', ...params }).then(res => res.data);
+    },
     getIndexes: function getIndexes(params) {
       return client.post('', { action: 'Model.getIndexes', ...params }).then(res => res.data);
     },
@@ -229,6 +232,55 @@ if (window.MONGOOSE_STUDIO_CONFIG.isLambda) {
     getDocuments: function getDocuments(params) {
       return client.post('/Model/getDocuments', params).then(res => res.data);
     },
+    getDocumentsStream: async function* getDocumentsStream(params) {
+      const accessToken = window.localStorage.getItem('_mongooseStudioAccessToken') || null;
+      const url = window.MONGOOSE_STUDIO_CONFIG.baseURL + '/Model/getDocumentsStream?' + new URLSearchParams(params).toString();
+
+      const response = await fetch(url, {
+        method: 'GET',
+        headers: {
+          Authorization: `${accessToken}`,
+          Accept: 'text/event-stream'
+        }
+      });
+
+      if (!response.ok) {
+        throw new Error(`HTTP error! Status: ${response.status}`);
+      }
+
+      const reader = response.body.getReader();
+      const decoder = new TextDecoder('utf-8');
+      let buffer = '';
+
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+        buffer += decoder.decode(value, { stream: true });
+
+        let eventEnd;
+        while ((eventEnd = buffer.indexOf('\n\n')) !== -1) {
+          const eventStr = buffer.slice(0, eventEnd);
+          buffer = buffer.slice(eventEnd + 2);
+
+          // Parse SSE event
+          const lines = eventStr.split('\n');
+          let data = '';
+          for (const line of lines) {
+            if (line.startsWith('data:')) {
+              data += line.slice(5).trim();
+            }
+          }
+          if (data) {
+            try {
+              yield JSON.parse(data);
+            } catch (err) {
+              // If not JSON, yield as string
+              yield data;
+            }
+          }
+        }
+      }
+    },
     getIndexes: function getIndexes(params) {
       return client.post('/Model/getIndexes', params).then(res => res.data);
     },
@@ -1018,6 +1070,37 @@ module.exports = app => app.component('dashboard-document', {
 });
 
 
+/***/ }),
+
+/***/ "./frontend/src/dashboard-result/dashboard-grid/dashboard-grid.js":
+/*!************************************************************************!*\
+  !*** ./frontend/src/dashboard-result/dashboard-grid/dashboard-grid.js ***!
+  \************************************************************************/
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+"use strict";
+
+
+const template = __webpack_require__(/*! ./dashboard-grid.html */ "./frontend/src/dashboard-result/dashboard-grid/dashboard-grid.html");
+
+module.exports = app => app.component('dashboard-grid', {
+  template: template,
+  props: ['value'],
+  computed: {
+    columns() {
+      const grid = this.value && this.value.$grid;
+      if (!Array.isArray(grid) || grid.length === 0) {
+        return 1;
+      }
+      return Math.max(1, ...grid.map(row => Array.isArray(row) ? row.length : 0));
+    },
+    gridTemplateColumns() {
+      return `repeat(${this.columns}, minmax(0, 1fr))`;
+    }
+  }
+});
+
+
 /***/ }),
 
 /***/ "./frontend/src/dashboard-result/dashboard-map/dashboard-map.js":
@@ -1139,6 +1222,9 @@ module.exports = app => app.component('dashboard-result', {
       if (value.$text) {
         return 'dashboard-text';
       }
+      if (value.$grid) {
+        return 'dashboard-grid';
+      }
     }
   }
 });
@@ -1973,7 +2059,7 @@ appendCSS(__webpack_require__(/*! ./export-query-results.css */ "./frontend/src/
 
 module.exports = app => app.component('export-query-results', {
   template: template,
-  props: ['schemaPaths', 'filter', 'currentModel'],
+  props: ['schemaPaths', 'searchText', 'currentModel'],
   emits: ['done'],
   data: () => ({
     shouldExport: {}
@@ -1990,8 +2076,8 @@ module.exports = app => app.component('export-query-results', {
         model: this.currentModel,
         propertiesToInclude: Object.keys(this.shouldExport).filter(key => this.shouldExport[key])
       };
-      if (this.filter) {
-        params.filter = this.filter;
+      if (typeof this.searchText === 'string' && this.searchText.trim().length > 0) {
+        params.searchText = this.searchText;
       }
       await api.Model.exportQueryResults(params);
 
@@ -2514,15 +2600,6 @@ module.exports = app => app.component('modal', {
 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 { BSON, EJSON } = __webpack_require__(/*! bson */ "./node_modules/bson/lib/bson.mjs");
-
-
-
-const ObjectId = new Proxy(BSON.ObjectId, {
-  apply(target, thisArg, argumentsList) {
-    return new target(...argumentsList);
-  }
-});
 
 const appendCSS = __webpack_require__(/*! ../appendCSS */ "./frontend/src/appendCSS.js");
 
@@ -2541,14 +2618,13 @@ module.exports = app => app.component('models', {
     schemaPaths: [],
     filteredPaths: [],
     selectedPaths: [],
-    numDocuments: 0,
+    numDocuments: null,
     mongoDBIndexes: [],
     schemaIndexes: [],
     status: 'loading',
     loadedAllDocs: false,
     edittingDoc: null,
     docEdits: null,
-    filter: null,
     selectMultiple: false,
     selectedDocuments: [],
     searchText: '',
@@ -2591,8 +2667,8 @@ module.exports = app => app.component('models', {
       this.query = Object.assign({}, this.$route.query); // important that this is here before the if statements
       if (this.$route.query?.search) {
         this.searchText = this.$route.query.search;
-        this.filter = eval(`(${this.$route.query.search})`);
-        this.filter = EJSON.stringify(this.filter);
+      } else {
+        this.searchText = '';
       }
       if (this.$route.query?.sort) {
         const sort = eval(`(${this.$route.query.sort})`);
@@ -2667,13 +2743,16 @@ module.exports = app => app.component('models', {
       const container = this.$refs.documentsList;
       if (container.scrollHeight - container.clientHeight - 100 < container.scrollTop) {
         this.status = 'loading';
-        const { docs } = await api.Model.getDocuments({
+        const params = {
           model: this.currentModel,
-          filter: this.filter,
           sort: this.sortBy,
           skip: this.documents.length,
           limit
-        });
+        };
+        if (typeof this.searchText === 'string' && this.searchText.trim().length > 0) {
+          params.searchText = this.searchText;
+        }
+        const { docs } = await api.Model.getDocuments(params);
         if (docs.length < limit) {
           this.loadedAllDocs = true;
         }
@@ -2699,21 +2778,16 @@ module.exports = app => app.component('models', {
       await this.loadMoreDocuments();
     },
     async search() {
-      if (this.searchText && Object.keys(this.searchText).length) {
-        this.filter = eval(`(${this.searchText})`);
-        this.filter = EJSON.stringify(this.filter);
+      const hasSearch = typeof this.searchText === 'string' && this.searchText.trim().length > 0;
+      if (hasSearch) {
         this.query.search = this.searchText;
-        const query = this.query;
-        const newUrl = this.$router.resolve({ query }).href;
-        this.$router.push({ query });
       } else {
-        this.filter = {};
         delete this.query.search;
-        const query = this.query;
-        const newUrl = this.$router.resolve({ query }).href;
-        this.$router.push({ query });
       }
+      const query = this.query;
+      this.$router.push({ query });
       this.documents = [];
+      this.loadedAllDocs = false;
       this.status = 'loading';
       await this.loadMoreDocuments();
       this.status = 'loaded';
@@ -2734,44 +2808,91 @@ module.exports = app => app.component('models', {
       }
     },
     async getDocuments() {
-      const { docs, schemaPaths, numDocs } = await api.Model.getDocuments({
+      // Clear previous data
+      this.documents = [];
+      this.schemaPaths = [];
+      this.numDocuments = null;
+      this.loadedAllDocs = false;
+
+      let docsCount = 0;
+      let schemaPathsReceived = false;
+
+      // Use async generator to stream SSEs
+      const params = {
         model: this.currentModel,
-        filter: this.filter,
         sort: this.sortBy,
         limit
-      });
-      this.documents = docs;
-      if (docs.length < limit) {
-        this.loadedAllDocs = true;
+      };
+      if (typeof this.searchText === 'string' && this.searchText.trim().length > 0) {
+        params.searchText = this.searchText;
       }
-      this.schemaPaths = Object.keys(schemaPaths).sort((k1, k2) => {
-        if (k1 === '_id' && k2 !== '_id') {
-          return -1;
+      for await (const event of api.Model.getDocumentsStream(params)) {
+        if (event.schemaPaths && !schemaPathsReceived) {
+          // Sort schemaPaths with _id first
+          this.schemaPaths = Object.keys(event.schemaPaths).sort((k1, k2) => {
+            if (k1 === '_id' && k2 !== '_id') {
+              return -1;
+            }
+            if (k1 !== '_id' && k2 === '_id') {
+              return 1;
+            }
+            return 0;
+          }).map(key => event.schemaPaths[key]);
+          this.shouldExport = {};
+          for (const { path } of this.schemaPaths) {
+            this.shouldExport[path] = true;
+          }
+          this.filteredPaths = [...this.schemaPaths];
+          this.selectedPaths = [...this.schemaPaths];
+          schemaPathsReceived = true;
         }
-        if (k1 !== '_id' && k2 === '_id') {
-          return 1;
+        if (event.numDocs !== undefined) {
+          this.numDocuments = event.numDocs;
         }
-        return 0;
-      }).map(key => schemaPaths[key]);
-      this.numDocuments = numDocs;
+        if (event.document) {
+          this.documents.push(event.document);
+          docsCount++;
+        }
+        if (event.message) {
+          this.status = 'loaded';
+          throw new Error(event.message);
+        }
+      }
 
-      this.shouldExport = {};
-      for (const { path } of this.schemaPaths) {
-        this.shouldExport[path] = true;
+      if (docsCount < limit) {
+        this.loadedAllDocs = true;
       }
-      this.filteredPaths = [...this.schemaPaths];
-      this.selectedPaths = [...this.schemaPaths];
     },
     async loadMoreDocuments() {
-      const { docs, numDocs } = await api.Model.getDocuments({
+      let docsCount = 0;
+      let numDocsReceived = false;
+
+      // Use async generator to stream SSEs
+      const params = {
         model: this.currentModel,
-        filter: this.filter,
         sort: this.sortBy,
+        skip: this.documents.length,
         limit
-      });
-      this.documents = docs;
-      this.numDocuments = numDocs;
-      if (docs.length < limit) {
+      };
+      if (typeof this.searchText === 'string' && this.searchText.trim().length > 0) {
+        params.searchText = this.searchText;
+      }
+      for await (const event of api.Model.getDocumentsStream(params)) {
+        if (event.numDocs !== undefined && !numDocsReceived) {
+          this.numDocuments = event.numDocs;
+          numDocsReceived = true;
+        }
+        if (event.document) {
+          this.documents.push(event.document);
+          docsCount++;
+        }
+        if (event.message) {
+          this.status = 'loaded';
+          throw new Error(event.message);
+        }
+      }
+
+      if (docsCount < limit) {
         this.loadedAllDocs = true;
       }
     },
@@ -3439,6 +3560,9 @@ var map = {
 	"./dashboard-result/dashboard-document/dashboard-document": "./frontend/src/dashboard-result/dashboard-document/dashboard-document.js",
 	"./dashboard-result/dashboard-document/dashboard-document.html": "./frontend/src/dashboard-result/dashboard-document/dashboard-document.html",
 	"./dashboard-result/dashboard-document/dashboard-document.js": "./frontend/src/dashboard-result/dashboard-document/dashboard-document.js",
+	"./dashboard-result/dashboard-grid/dashboard-grid": "./frontend/src/dashboard-result/dashboard-grid/dashboard-grid.js",
+	"./dashboard-result/dashboard-grid/dashboard-grid.html": "./frontend/src/dashboard-result/dashboard-grid/dashboard-grid.html",
+	"./dashboard-result/dashboard-grid/dashboard-grid.js": "./frontend/src/dashboard-result/dashboard-grid/dashboard-grid.js",
 	"./dashboard-result/dashboard-map/dashboard-map": "./frontend/src/dashboard-result/dashboard-map/dashboard-map.js",
 	"./dashboard-result/dashboard-map/dashboard-map.html": "./frontend/src/dashboard-result/dashboard-map/dashboard-map.html",
 	"./dashboard-result/dashboard-map/dashboard-map.js": "./frontend/src/dashboard-result/dashboard-map/dashboard-map.js",
@@ -4306,6 +4430,17 @@ module.exports = "<div class=\"py-2\">\n  <div v-if=\"header\" class=\"border-b
 
 /***/ }),
 
+/***/ "./frontend/src/dashboard-result/dashboard-grid/dashboard-grid.html":
+/*!**************************************************************************!*\
+  !*** ./frontend/src/dashboard-result/dashboard-grid/dashboard-grid.html ***!
+  \**************************************************************************/
+/***/ ((module) => {
+
+"use strict";
+module.exports = "<div class=\"grid gap-2\" :style=\"{ gridTemplateColumns: gridTemplateColumns }\">\n  <template v-for=\"(row, rowIndex) in value.$grid\" :key=\"rowIndex\">\n    <dashboard-result\n      v-for=\"(cell, colIndex) in row\"\n      :key=\"rowIndex + '-' + colIndex\"\n      :result=\"cell\">\n    </dashboard-result>\n  </template>\n</div>\n";
+
+/***/ }),
+
 /***/ "./frontend/src/dashboard-result/dashboard-map/dashboard-map.html":
 /*!************************************************************************!*\
   !*** ./frontend/src/dashboard-result/dashboard-map/dashboard-map.html ***!
@@ -4753,7 +4888,7 @@ module.exports = ".models {\n  position: relative;\n  display: flex;\n  flex-dir
 /***/ ((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    </nav>\n  </aside>\n  <div class=\"documents\" ref=\"documentsList\">\n    <div class=\"relative h-[42px]\">\n      <div class=\"documents-menu\">\n        <div class=\"flex flex-row items-center w-full gap-2\">\n          <form @submit.prevent=\"search\" class=\"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\" />\n          </form>\n          <div>\n            <span v-if=\"status === 'loading'\">Loading ...</span>\n            <span v-if=\"status === 'loaded'\">{{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-ultramarine-500 ring-inset ring-2 ring-gray-300 hover:bg-ultramarine-600': 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          >\n            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=\"outputType = '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=\"outputType = '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      <table v-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)\" :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-if=\"outputType === 'json'\">\n        <div v-for=\"document in documents\" @click=\"handleDocumentClick(document)\" :key=\"document._id\" :class=\"{ 'bg-blue-200': selectedDocuments.some(x => x._id.toString() === document._id.toString()) }\">\n          <list-json :value=\"filterDocument(document)\">\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        :filter=\"filter\"\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 = "<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    </nav>\n  </aside>\n  <div class=\"documents\" ref=\"documentsList\">\n    <div class=\"relative h-[42px]\">\n      <div class=\"documents-menu\">\n        <div class=\"flex flex-row items-center w-full gap-2\">\n          <form @submit.prevent=\"search\" class=\"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\" />\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-ultramarine-500 ring-inset ring-2 ring-gray-300 hover:bg-ultramarine-600': 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          >\n            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=\"outputType = '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=\"outputType = '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      <table v-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)\" :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-if=\"outputType === 'json'\">\n        <div v-for=\"document in documents\" @click=\"handleDocumentClick(document)\" :key=\"document._id\" :class=\"{ 'bg-blue-200': selectedDocuments.some(x => x._id.toString() === document._id.toString()) }\">\n          <list-json :value=\"filterDocument(document)\">\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";
 
 /***/ }),
 
@@ -14871,7 +15006,7 @@ var bson = /*#__PURE__*/Object.freeze({
 /***/ ((module) => {
 
 "use strict";
-module.exports = /*#__PURE__*/JSON.parse('{"name":"@mongoosejs/studio","version":"0.0.118","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"},"dependencies":{"archetype":"0.13.1","csv-stringify":"6.3.0","ejson":"^2.2.3","extrovert":"0.0.26","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"},"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":"8.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.0.120","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"},"dependencies":{"archetype":"0.13.1","csv-stringify":"6.3.0","ejson":"^2.2.3","extrovert":"0.1.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"},"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":"8.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"}}');
 
 /***/ })
 

package/frontend/src/api.js

@@ -114,6 +114,9 @@ if (window.MONGOOSE_STUDIO_CONFIG.isLambda) {
     getDocuments: function getDocuments(params) {
       return client.post('', { action: 'Model.getDocuments', ...params }).then(res => res.data);
     },
+    getDocumentsStream: function getDocumentsStream(params) {
+      return client.post('', { action: 'Model.getDocumentsStream', ...params }).then(res => res.data);
+    },
     getIndexes: function getIndexes(params) {
       return client.post('', { action: 'Model.getIndexes', ...params }).then(res => res.data);
     },
@@ -219,6 +222,55 @@ if (window.MONGOOSE_STUDIO_CONFIG.isLambda) {
     getDocuments: function getDocuments(params) {
       return client.post('/Model/getDocuments', params).then(res => res.data);
     },
+    getDocumentsStream: async function* getDocumentsStream(params) {
+      const accessToken = window.localStorage.getItem('_mongooseStudioAccessToken') || null;
+      const url = window.MONGOOSE_STUDIO_CONFIG.baseURL + '/Model/getDocumentsStream?' + new URLSearchParams(params).toString();
+
+      const response = await fetch(url, {
+        method: 'GET',
+        headers: {
+          Authorization: `${accessToken}`,
+          Accept: 'text/event-stream'
+        }
+      });
+
+      if (!response.ok) {
+        throw new Error(`HTTP error! Status: ${response.status}`);
+      }
+
+      const reader = response.body.getReader();
+      const decoder = new TextDecoder('utf-8');
+      let buffer = '';
+
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+        buffer += decoder.decode(value, { stream: true });
+
+        let eventEnd;
+        while ((eventEnd = buffer.indexOf('\n\n')) !== -1) {
+          const eventStr = buffer.slice(0, eventEnd);
+          buffer = buffer.slice(eventEnd + 2);
+
+          // Parse SSE event
+          const lines = eventStr.split('\n');
+          let data = '';
+          for (const line of lines) {
+            if (line.startsWith('data:')) {
+              data += line.slice(5).trim();
+            }
+          }
+          if (data) {
+            try {
+              yield JSON.parse(data);
+            } catch (err) {
+              // If not JSON, yield as string
+              yield data;
+            }
+          }
+        }
+      }
+    },
     getIndexes: function getIndexes(params) {
       return client.post('/Model/getIndexes', params).then(res => res.data);
     },

package/frontend/src/dashboard-result/dashboard-grid/dashboard-grid.html

@@ -0,0 +1,9 @@
+<div class="grid gap-2" :style="{ gridTemplateColumns: gridTemplateColumns }">
+  <template v-for="(row, rowIndex) in value.$grid" :key="rowIndex">
+    <dashboard-result
+      v-for="(cell, colIndex) in row"
+      :key="rowIndex + '-' + colIndex"
+      :result="cell">
+    </dashboard-result>
+  </template>
+</div>

package/frontend/src/dashboard-result/dashboard-grid/dashboard-grid.js

@@ -0,0 +1,20 @@
+'use strict';
+
+const template = require('./dashboard-grid.html');
+
+module.exports = app => app.component('dashboard-grid', {
+  template: template,
+  props: ['value'],
+  computed: {
+    columns() {
+      const grid = this.value && this.value.$grid;
+      if (!Array.isArray(grid) || grid.length === 0) {
+        return 1;
+      }
+      return Math.max(1, ...grid.map(row => Array.isArray(row) ? row.length : 0));
+    },
+    gridTemplateColumns() {
+      return `repeat(${this.columns}, minmax(0, 1fr))`;
+    }
+  }
+});

package/frontend/src/dashboard-result/dashboard-result.js

@@ -31,6 +31,9 @@ module.exports = app => app.component('dashboard-result', {
       if (value.$text) {
         return 'dashboard-text';
       }
+      if (value.$grid) {
+        return 'dashboard-grid';
+      }
     }
   }
 });

package/frontend/src/export-query-results/export-query-results.js

@@ -9,7 +9,7 @@ appendCSS(require('./export-query-results.css'));
 
 module.exports = app => app.component('export-query-results', {
   template: template,
-  props: ['schemaPaths', 'filter', 'currentModel'],
+  props: ['schemaPaths', 'searchText', 'currentModel'],
   emits: ['done'],
   data: () => ({
     shouldExport: {}
@@ -26,8 +26,8 @@ module.exports = app => app.component('export-query-results', {
         model: this.currentModel,
         propertiesToInclude: Object.keys(this.shouldExport).filter(key => this.shouldExport[key])
       };
-      if (this.filter) {
-        params.filter = this.filter;
+      if (typeof this.searchText === 'string' && this.searchText.trim().length > 0) {
+        params.searchText = this.searchText;
       }
       await api.Model.exportQueryResults(params);
 

package/frontend/src/models/models.html

@@ -38,8 +38,8 @@
             <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" />
           </form>
           <div>
-            <span v-if="status === 'loading'">Loading ...</span>
-            <span v-if="status === 'loaded'">{{numDocuments === 1 ? numDocuments+ ' document' : numDocuments + ' documents'}}</span>
+            <span v-if="numDocuments == null">Loading ...</span>
+            <span v-else-if="typeof numDocuments === 'number'">{{numDocuments === 1 ? numDocuments+ ' document' : numDocuments + ' documents'}}</span>
           </div>
           <button
             @click="shouldShowExportModal = true"
@@ -152,7 +152,7 @@
       <div class="modal-exit" @click="shouldShowExportModal = false">&times;</div>
       <export-query-results
         :schemaPaths="schemaPaths"
-        :filter="filter"
+        :search-text="searchText"
         :currentModel="currentModel"
         @done="shouldShowExportModal = false">
       </export-query-results>

package/frontend/src/models/models.js

@@ -3,15 +3,6 @@
 const api = require('../api');
 const template = require('./models.html');
 const mpath = require('mpath');
-const { BSON, EJSON } = require('bson');
-
-
-
-const ObjectId = new Proxy(BSON.ObjectId, {
-  apply(target, thisArg, argumentsList) {
-    return new target(...argumentsList);
-  }
-});
 
 const appendCSS = require('../appendCSS');
 
@@ -30,14 +21,13 @@ module.exports = app => app.component('models', {
     schemaPaths: [],
     filteredPaths: [],
     selectedPaths: [],
-    numDocuments: 0,
+    numDocuments: null,
     mongoDBIndexes: [],
     schemaIndexes: [],
     status: 'loading',
     loadedAllDocs: false,
     edittingDoc: null,
     docEdits: null,
-    filter: null,
     selectMultiple: false,
     selectedDocuments: [],
     searchText: '',
@@ -80,8 +70,8 @@ module.exports = app => app.component('models', {
       this.query = Object.assign({}, this.$route.query); // important that this is here before the if statements
       if (this.$route.query?.search) {
         this.searchText = this.$route.query.search;
-        this.filter = eval(`(${this.$route.query.search})`);
-        this.filter = EJSON.stringify(this.filter);
+      } else {
+        this.searchText = '';
       }
       if (this.$route.query?.sort) {
         const sort = eval(`(${this.$route.query.sort})`);
@@ -156,13 +146,16 @@ module.exports = app => app.component('models', {
       const container = this.$refs.documentsList;
       if (container.scrollHeight - container.clientHeight - 100 < container.scrollTop) {
         this.status = 'loading';
-        const { docs } = await api.Model.getDocuments({
+        const params = {
           model: this.currentModel,
-          filter: this.filter,
           sort: this.sortBy,
           skip: this.documents.length,
           limit
-        });
+        };
+        if (typeof this.searchText === 'string' && this.searchText.trim().length > 0) {
+          params.searchText = this.searchText;
+        }
+        const { docs } = await api.Model.getDocuments(params);
         if (docs.length < limit) {
           this.loadedAllDocs = true;
         }
@@ -188,21 +181,16 @@ module.exports = app => app.component('models', {
       await this.loadMoreDocuments();
     },
     async search() {
-      if (this.searchText && Object.keys(this.searchText).length) {
-        this.filter = eval(`(${this.searchText})`);
-        this.filter = EJSON.stringify(this.filter);
+      const hasSearch = typeof this.searchText === 'string' && this.searchText.trim().length > 0;
+      if (hasSearch) {
         this.query.search = this.searchText;
-        const query = this.query;
-        const newUrl = this.$router.resolve({ query }).href;
-        this.$router.push({ query });
       } else {
-        this.filter = {};
         delete this.query.search;
-        const query = this.query;
-        const newUrl = this.$router.resolve({ query }).href;
-        this.$router.push({ query });
       }
+      const query = this.query;
+      this.$router.push({ query });
       this.documents = [];
+      this.loadedAllDocs = false;
       this.status = 'loading';
       await this.loadMoreDocuments();
       this.status = 'loaded';
@@ -223,44 +211,91 @@ module.exports = app => app.component('models', {
       }
     },
     async getDocuments() {
-      const { docs, schemaPaths, numDocs } = await api.Model.getDocuments({
+      // Clear previous data
+      this.documents = [];
+      this.schemaPaths = [];
+      this.numDocuments = null;
+      this.loadedAllDocs = false;
+
+      let docsCount = 0;
+      let schemaPathsReceived = false;
+
+      // Use async generator to stream SSEs
+      const params = {
         model: this.currentModel,
-        filter: this.filter,
         sort: this.sortBy,
         limit
-      });
-      this.documents = docs;
-      if (docs.length < limit) {
-        this.loadedAllDocs = true;
+      };
+      if (typeof this.searchText === 'string' && this.searchText.trim().length > 0) {
+        params.searchText = this.searchText;
       }
-      this.schemaPaths = Object.keys(schemaPaths).sort((k1, k2) => {
-        if (k1 === '_id' && k2 !== '_id') {
-          return -1;
+      for await (const event of api.Model.getDocumentsStream(params)) {
+        if (event.schemaPaths && !schemaPathsReceived) {
+          // Sort schemaPaths with _id first
+          this.schemaPaths = Object.keys(event.schemaPaths).sort((k1, k2) => {
+            if (k1 === '_id' && k2 !== '_id') {
+              return -1;
+            }
+            if (k1 !== '_id' && k2 === '_id') {
+              return 1;
+            }
+            return 0;
+          }).map(key => event.schemaPaths[key]);
+          this.shouldExport = {};
+          for (const { path } of this.schemaPaths) {
+            this.shouldExport[path] = true;
+          }
+          this.filteredPaths = [...this.schemaPaths];
+          this.selectedPaths = [...this.schemaPaths];
+          schemaPathsReceived = true;
         }
-        if (k1 !== '_id' && k2 === '_id') {
-          return 1;
+        if (event.numDocs !== undefined) {
+          this.numDocuments = event.numDocs;
         }
-        return 0;
-      }).map(key => schemaPaths[key]);
-      this.numDocuments = numDocs;
+        if (event.document) {
+          this.documents.push(event.document);
+          docsCount++;
+        }
+        if (event.message) {
+          this.status = 'loaded';
+          throw new Error(event.message);
+        }
+      }
 
-      this.shouldExport = {};
-      for (const { path } of this.schemaPaths) {
-        this.shouldExport[path] = true;
+      if (docsCount < limit) {
+        this.loadedAllDocs = true;
       }
-      this.filteredPaths = [...this.schemaPaths];
-      this.selectedPaths = [...this.schemaPaths];
     },
     async loadMoreDocuments() {
-      const { docs, numDocs } = await api.Model.getDocuments({
+      let docsCount = 0;
+      let numDocsReceived = false;
+
+      // Use async generator to stream SSEs
+      const params = {
         model: this.currentModel,
-        filter: this.filter,
         sort: this.sortBy,
+        skip: this.documents.length,
         limit
-      });
-      this.documents = docs;
-      this.numDocuments = numDocs;
-      if (docs.length < limit) {
+      };
+      if (typeof this.searchText === 'string' && this.searchText.trim().length > 0) {
+        params.searchText = this.searchText;
+      }
+      for await (const event of api.Model.getDocumentsStream(params)) {
+        if (event.numDocs !== undefined && !numDocsReceived) {
+          this.numDocuments = event.numDocs;
+          numDocsReceived = true;
+        }
+        if (event.document) {
+          this.documents.push(event.document);
+          docsCount++;
+        }
+        if (event.message) {
+          this.status = 'loaded';
+          throw new Error(event.message);
+        }
+      }
+
+      if (docsCount < limit) {
         this.loadedAllDocs = true;
       }
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mongoosejs/studio",
-  "version": "0.0.118",
+  "version": "0.0.120",
   "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": {
@@ -11,7 +11,7 @@
     "archetype": "0.13.1",
     "csv-stringify": "6.3.0",
     "ejson": "^2.2.3",
-    "extrovert": "0.0.26",
+    "extrovert": "0.1.0",
     "marked": "15.0.12",
     "node-inspect-extracted": "3.x",
     "tailwindcss": "3.4.0",