@mongoosejs/studio 0.1.20 → 0.2.1

package/frontend/src/list-json/list-json.js

@@ -2,8 +2,6 @@
 
 const template = require('./list-json.html');
 
-const JsonNodeTemplate = require('./json-node.html');
-
 module.exports = app => app.component('list-json', {
   template: template,
   props: {
@@ -13,13 +11,20 @@ module.exports = app => app.component('list-json', {
     references: {
       type: Object,
       default: () => ({})
+    },
+    maxTopLevelFields: {
+      type: Number,
+      default: 15
+    },
+    expandedFields: {
+      type: Array,
+      default: () => []
     }
   },
   data() {
     return {
       collapsedMap: {},
       indentSize: 16,
-      maxTopLevelFields: 15,
       topLevelExpanded: false
     };
   },
@@ -32,6 +37,9 @@ module.exports = app => app.component('list-json', {
   },
   created() {
     this.resetCollapse();
+    for (const field of this.expandedFields) {
+      this.toggleCollapse(field);
+    }
   },
   methods: {
     resetCollapse() {
@@ -66,275 +74,5 @@ module.exports = app => app.component('list-json', {
     expandTopLevel() {
       this.topLevelExpanded = true;
     }
-  },
-  components: {
-    JsonNode: {
-      name: 'JsonNode',
-      template: JsonNodeTemplate,
-      props: {
-        nodeKey: {
-          type: [String, Number],
-          default: null
-        },
-        value: {
-          required: true
-        },
-        level: {
-          type: Number,
-          required: true
-        },
-        isLast: {
-          type: Boolean,
-          default: false
-        },
-        path: {
-          type: String,
-          required: true
-        },
-        toggleCollapse: {
-          type: Function,
-          required: true
-        },
-        isCollapsed: {
-          type: Function,
-          required: true
-        },
-        createChildPath: {
-          type: Function,
-          required: true
-        },
-        indentSize: {
-          type: Number,
-          required: true
-        },
-        maxTopLevelFields: {
-          type: Number,
-          default: null
-        },
-        topLevelExpanded: {
-          type: Boolean,
-          default: false
-        },
-        expandTopLevel: {
-          type: Function,
-          default: null
-        },
-        references: {
-          type: Object,
-          default: () => ({})
-        }
-      },
-      computed: {
-        hasKey() {
-          return this.nodeKey !== null && this.nodeKey !== undefined;
-        },
-        isRoot() {
-          return this.path === 'root';
-        },
-        isArray() {
-          return Array.isArray(this.value);
-        },
-        isObject() {
-          if (this.value === null || this.isArray) {
-            return false;
-          }
-          return Object.prototype.toString.call(this.value) === '[object Object]';
-        },
-        isComplex() {
-          return this.isArray || this.isObject;
-        },
-        children() {
-          if (!this.isComplex) {
-            return [];
-          }
-          if (this.isArray) {
-            return this.value.map((childValue, index) => ({
-              displayKey: null,
-              value: childValue,
-              isLast: index === this.value.length - 1,
-              path: this.createChildPath(this.path, index, true)
-            }));
-          }
-          const keys = Object.keys(this.value);
-          const visibleKeys = this.visibleObjectKeys(keys);
-          const hasHidden = this.hasHiddenRootChildren;
-          return visibleKeys.map((key, index) => ({
-            displayKey: key,
-            value: this.value[key],
-            isLast: !hasHidden && index === visibleKeys.length - 1,
-            path: this.createChildPath(this.path, key, false)
-          }));
-        },
-        hasChildren() {
-          return this.children.length > 0;
-        },
-        totalObjectChildCount() {
-          if (!this.isObject) {
-            return 0;
-          }
-          return Object.keys(this.value).length;
-        },
-        hasHiddenRootChildren() {
-          if (!this.isRoot || !this.isObject) {
-            return false;
-          }
-          if (this.topLevelExpanded) {
-            return false;
-          }
-          if (typeof this.maxTopLevelFields !== 'number') {
-            return false;
-          }
-          return this.totalObjectChildCount > this.maxTopLevelFields;
-        },
-        hiddenRootChildrenCount() {
-          if (!this.hasHiddenRootChildren) {
-            return 0;
-          }
-          return this.totalObjectChildCount - this.maxTopLevelFields;
-        },
-        showToggle() {
-          return this.hasChildren && !this.isRoot;
-        },
-        openingBracket() {
-          return this.isArray ? '[' : '{';
-        },
-        closingBracket() {
-          return this.isArray ? ']' : '}';
-        },
-        isCollapsedNode() {
-          return this.isCollapsed(this.path);
-        },
-        formattedValue() {
-          if (typeof this.value === 'bigint') {
-            return `${this.value.toString()}n`;
-          }
-          const stringified = JSON.stringify(this.value);
-          if (stringified === undefined) {
-            if (typeof this.value === 'symbol') {
-              return this.value.toString();
-            }
-            return String(this.value);
-          }
-          return stringified;
-        },
-        valueClasses() {
-          const classes = ['text-slate-700'];
-          if (this.value === null) {
-            classes.push('text-gray-500', 'italic');
-            return classes;
-          }
-          const type = typeof this.value;
-          if (type === 'string') {
-            classes.push('text-emerald-600');
-            return classes;
-          }
-          if (type === 'number' || type === 'bigint') {
-            classes.push('text-amber-600');
-            return classes;
-          }
-          if (type === 'boolean') {
-            classes.push('text-violet-600');
-            return classes;
-          }
-          if (type === 'undefined') {
-            classes.push('text-gray-500');
-            return classes;
-          }
-          return classes;
-        },
-        comma() {
-          return this.isLast ? '' : ',';
-        },
-        indentStyle() {
-          return {
-            paddingLeft: `${this.level * this.indentSize}px`
-          };
-        },
-        hiddenChildrenLabel() {
-          if (!this.hasHiddenRootChildren) {
-            return '';
-          }
-          const count = this.hiddenRootChildrenCount;
-          const suffix = count === 1 ? 'field' : 'fields';
-          return `${count} more ${suffix}`;
-        },
-        hiddenChildrenTooltip() {
-          return this.hiddenChildrenLabel;
-        },
-        normalizedPath() {
-          if (typeof this.path !== 'string') {
-            return '';
-          }
-          return this.path
-            .replace(/^root\.?/, '')
-            .replace(/\[\d+\]/g, '')
-            .replace(/^\./, '');
-        },
-        referenceModel() {
-          if (!this.normalizedPath || !this.references) {
-            return null;
-          }
-          return this.references[this.normalizedPath] || null;
-        },
-        shouldShowReferenceLink() {
-          return this.referenceId != null;
-        },
-        referenceId() {
-          if (!this.referenceModel) {
-            return null;
-          }
-          if (this.value == null) {
-            return null;
-          }
-          const type = typeof this.value;
-          if (type === 'string' || type === 'number' || type === 'bigint') {
-            return String(this.value);
-          }
-          if (type === 'object') {
-            if (this.value._id != null) {
-              return String(this.value._id);
-            }
-            if (typeof this.value.toString === 'function') {
-              const stringified = this.value.toString();
-              if (typeof stringified === 'string' && stringified !== '[object Object]') {
-                return stringified;
-              }
-            }
-          }
-          return null;
-        }
-      },
-      methods: {
-        visibleObjectKeys(keys) {
-          if (!this.isRoot || this.topLevelExpanded) {
-            return keys;
-          }
-          if (typeof this.maxTopLevelFields !== 'number') {
-            return keys;
-          }
-          if (keys.length <= this.maxTopLevelFields) {
-            return keys;
-          }
-          return keys.slice(0, this.maxTopLevelFields);
-        },
-        handleToggle() {
-          if (!this.isRoot) {
-            this.toggleCollapse(this.path);
-          }
-        },
-        handleExpandTopLevel() {
-          if (this.isRoot && typeof this.expandTopLevel === 'function') {
-            this.expandTopLevel();
-          }
-        },
-        goToReference() {
-          const id = this.referenceId;
-          if (!this.referenceModel || id == null) {
-            return;
-          }
-          this.$router.push({ path: `/model/${this.referenceModel}/document/${id}` });
-        }
-      }
-    }
   }
 });

package/frontend/src/list-subdocument/list-subdocument.html

@@ -1,6 +1,15 @@
 <div class="list-subdocument tooltip">
-  <pre>
-    <code ref="SubDocCode" class="language-javascript">{{shortenValue}}</code>
-    <span class="tooltiptext" @click.stop="copyText(value)">copy &#x1F4CB;</span>
-  </pre>
+  <div>{{shortenValue}}</div>
+  <div class="tooltiptext" style="display:flex; width: 100%; justify-content: space-around; align-items: center; min-width: 180px;">
+    <div class="tooltiptextchild" @click.stop="showViewDataModal = true">View data</div>
+    <div class="tooltiptextchild" @click.stop="copyText(value)">Copy &#x1F4CB;</div>
+  </div>
+  <modal ref="viewDataModal" v-if="showViewDataModal" containerClass="!h-[90vh] !w-[90vw]">
+    <template #body>
+      <div @click.stop class="w-full h-full cursor-auto">
+        <div class="modal-exit" @click="showViewDataModal = false">&times;</div>
+        <list-json :value="value" :maxTopLevelFields="null" />
+      </div>
+    </template>
+  </modal>
 </div>

package/frontend/src/list-subdocument/list-subdocument.js

@@ -8,16 +8,24 @@ require('../appendCSS')(require('./list-subdocument.css'));
 module.exports = app => app.component('list-subdocument', {
   template: template,
   props: ['value'],
+  data: () => ({ showViewDataModal: false }),
   computed: {
     shortenValue() {
-      return this.value;
+      if (this.value == null) {
+        return this.value;
+      }
+      const value = JSON.stringify(this.value);
+      if (value.length > 50) {
+        return `${value.slice(0, 50)}…`;
+      }
+      return value;
     }
   },
   methods: {
     copyText(value) {
       const storage = document.createElement('textarea');
       storage.value = JSON.stringify(value);
-      const elem = this.$refs.SubDocCode;
+      const elem = this.$el;
       elem.appendChild(storage);
       storage.select();
       storage.setSelectionRange(0, 99999);
@@ -25,8 +33,5 @@ module.exports = app => app.component('list-subdocument', {
       elem.removeChild(storage);
       this.$toast.success('Text copied!');
     }
-  },
-  mounted: function() {
-    Prism.highlightElement(this.$refs.SubDocCode);
   }
-});
+});

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

@@ -3,7 +3,7 @@
     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"
+    placeholder="Filter (supports JS, dates, ObjectIds, and more)"
     v-model="searchText"
     @click="initFilter"
     @input="updateAutocomplete"

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

@@ -1,34 +1,11 @@
 'use strict';
 
 const template = require('./document-search.html');
-const { Trie } = require('../trie');
-
-const QUERY_SELECTORS = [
-  '$eq',
-  '$ne',
-  '$gt',
-  '$gte',
-  '$lt',
-  '$lte',
-  '$in',
-  '$nin',
-  '$exists',
-  '$regex',
-  '$options',
-  '$text',
-  '$search',
-  '$and',
-  '$or',
-  '$nor',
-  '$not',
-  '$elemMatch',
-  '$size',
-  '$all',
-  '$type',
-  '$expr',
-  '$jsonSchema',
-  '$mod'
-];
+const {
+  buildAutocompleteTrie,
+  getAutocompleteSuggestions,
+  applySuggestion
+} = require('../../_util/document-search-autocomplete');
 
 module.exports = app => app.component('document-search', {
   template,
@@ -70,19 +47,7 @@ module.exports = app => app.component('document-search', {
       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');
-      }
+      this.autocompleteTrie = buildAutocompleteTrie(this.schemaPaths);
     },
     initFilter(ev) {
       if (!this.searchText) {
@@ -95,60 +60,18 @@ module.exports = app => app.component('document-search', {
     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;
-        }
+      if (this.autocompleteTrie) {
+        this.autocompleteSuggestions = getAutocompleteSuggestions(
+          this.autocompleteTrie,
+          this.searchText,
+          cursorPos,
+          this.schemaPaths
+        );
+        this.autocompleteIndex = 0;
+      } else {
+        this.autocompleteSuggestions = [];
       }
-      this.autocompleteSuggestions = [];
     },
     handleKeyDown(ev) {
       if (this.autocompleteSuggestions.length === 0) {
@@ -172,32 +95,15 @@ module.exports = app => app.component('document-search', {
       }
       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) {
+
+      const result = applySuggestion(this.searchText, cursorPos, suggestion);
+      if (!result) {
         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.searchText = result.text;
       this.$nextTick(() => {
-        const pos = start + replacement.length;
-        input.setSelectionRange(pos, pos);
+        input.setSelectionRange(result.newCursorPos, result.newCursorPos);
       });
       this.autocompleteSuggestions = [];
     },

package/frontend/src/models/models.css

@@ -44,7 +44,6 @@
 .models .documents table th {
   position: sticky;
   top: 42px;
-  background-color: white;
   z-index: 1;
 }
 
@@ -60,24 +59,17 @@
 .models .documents table tr {
   color: black;
   border-spacing: 0px 0px;
-  background-color: white;
-  cursor: pointer;
 }
 
-.models .documents table tr:nth-child(even) {
-  background-color: #f5f5f5;
-}
-
-.models .documents table tr:hover {
-  background-color: #a7b9ff;
+.models .documents table th {
+  border-bottom: thin solid rgba(0, 0, 0, 0.12);
+  text-align: left;
+  height: 48px;
 }
 
-.models .documents table th,
-td {
+.models .documents table td {
   border-bottom: thin solid rgba(0, 0, 0, 0.12);
   text-align: left;
-  padding: 0 16px;
-  height: 48px;
 }
 
 .models textarea {
@@ -91,7 +83,6 @@ td {
 
 .models .documents-menu {
   position: fixed;
-  background-color: white;
   z-index: 1;
   padding: 4px;
   display: flex;
@@ -136,4 +127,3 @@ td {
   justify-content: space-around;
   align-items: center;
 }
-