@mongoosejs/studio 0.1.5 → 0.1.7

package/frontend/public/tw.css

@@ -2041,6 +2041,11 @@ video {
   color: rgb(2 132 199 / var(--tw-text-opacity));
 }
 
+.text-sky-700 {
+  --tw-text-opacity: 1;
+  color: rgb(3 105 161 / var(--tw-text-opacity));
+}
+
 .text-sky-800 {
   --tw-text-opacity: 1;
   color: rgb(7 89 133 / var(--tw-text-opacity));
@@ -2086,6 +2091,18 @@ video {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
+.underline {
+  text-decoration-line: underline;
+}
+
+.decoration-dotted {
+  text-decoration-style: dotted;
+}
+
+.underline-offset-2 {
+  text-underline-offset: 2px;
+}
+
 .accent-sky-600 {
   accent-color: #0284c7;
 }
@@ -2469,6 +2486,10 @@ video {
   border-color: transparent;
 }
 
+.focus\:opacity-100:focus {
+  opacity: 1;
+}
+
 .focus\:outline-none:focus {
   outline: 2px solid transparent;
   outline-offset: 2px;

package/frontend/src/dashboard/dashboard.js

@@ -44,6 +44,25 @@ module.exports = app => app.component('dashboard', {
       } finally {
         this.status = 'loaded';
       }
+    },
+    shouldEvaluateDashboard() {
+      if (this.dashboardResults.length === 0) {
+        return true;
+      }
+
+      const finishedEvaluatingAt = this.dashboardResults[0].finishedEvaluatingAt;
+      if (!finishedEvaluatingAt) {
+        return true;
+      }
+
+      const sixHoursAgo = Date.now() - 6 * 60 * 60 * 1000;
+      const finishedAt = new Date(finishedEvaluatingAt).getTime();
+
+      if (Number.isNaN(finishedAt)) {
+        return true;
+      }
+
+      return finishedAt < sixHoursAgo;
     }
   },
   computed: {
@@ -62,6 +81,10 @@ module.exports = app => app.component('dashboard', {
     this.title = this.dashboard.title;
     this.description = this.dashboard.description ?? '';
     this.dashboardResults = dashboardResults;
+    if (this.shouldEvaluateDashboard()) {
+      await this.evaluateDashboard();
+      return;
+    }
     this.status = 'loaded';
   }
 });

package/frontend/src/list-json/json-node.html

@@ -0,0 +1,118 @@
+<div>
+  <div class="flex items-baseline whitespace-pre" :style="indentStyle">
+    <button
+      v-if="showToggle"
+      type="button"
+      class="w-4 h-4 mr-1 inline-flex items-center justify-center leading-none text-gray-500 hover:text-gray-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-slate-400 cursor-pointer"
+      @click.stop="handleToggle"
+    >
+      {{ isCollapsedNode ? '+' : '-' }}
+    </button>
+    <span v-else class="w-4 h-4 mr-1 inline-flex items-center justify-center invisible flex-shrink-0"></span>
+    <template v-if="hasKey">
+      <span class="text-blue-600">"{{ nodeKey }}"</span><span>: </span>
+    </template>
+    <template v-if="isComplex">
+      <template v-if="hasChildren">
+        <span>{{ openingBracket }}</span>
+        <span v-if="isCollapsedNode" class="mx-1">…</span>
+        <span v-if="isCollapsedNode">{{ closingBracket }}{{ comma }}</span>
+      </template>
+      <template v-else>
+        <span>{{ openingBracket }}{{ closingBracket }}{{ comma }}</span>
+      </template>
+    </template>
+    <template v-else>
+      <!--
+        If value is a string and overflows its container (i.e. goes over one line), show an ellipsis.
+        This is done via CSS ellipsis strategy.
+      -->
+      <span
+        v-if="shouldShowReferenceLink"
+        class="inline-flex items-baseline group"
+      >
+        <span
+          :class="[...valueClasses, 'underline', 'decoration-dotted', 'underline-offset-2']"
+          :style="typeof value === 'string'
+            ? {
+                display: 'inline-block',
+                maxWidth: '100%',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                whiteSpace: 'nowrap',
+                verticalAlign: 'bottom'
+              }
+            : {}"
+          :title="typeof value === 'string' && $el && $el.scrollWidth > $el.clientWidth ? value : undefined"
+        >
+          {{ formattedValue }}
+        </span>
+        <span>
+          {{ comma }}
+        </span>
+        <a
+          href="#"
+          class="ml-1 text-sm text-sky-700 opacity-0 group-hover:opacity-100 focus:opacity-100 transition-opacity"
+          @click.stop.prevent="goToReference(value)"
+        >
+          View Document
+        </a>
+      </span>
+      <span
+        v-else
+        :class="valueClasses"
+        :style="typeof value === 'string'
+          ? {
+              display: 'inline-block',
+              maxWidth: '100%',
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              whiteSpace: 'nowrap',
+              verticalAlign: 'bottom'
+            }
+          : {}"
+        :title="typeof value === 'string' && $el && $el.scrollWidth > $el.clientWidth ? value : undefined"
+      >
+        {{ formattedValue }}{{ comma }}
+      </span>
+    </template>
+  </div>
+  <template v-if="isComplex && hasChildren && !isCollapsedNode">
+    <json-node
+      v-for="child in children"
+      :key="child.path"
+      :node-key="child.displayKey"
+      :value="child.value"
+      :level="level + 1"
+      :is-last="child.isLast"
+      :path="child.path"
+      :toggle-collapse="toggleCollapse"
+      :is-collapsed="isCollapsed"
+      :create-child-path="createChildPath"
+      :indent-size="indentSize"
+      :max-top-level-fields="maxTopLevelFields"
+      :top-level-expanded="topLevelExpanded"
+      :expand-top-level="expandTopLevel"
+      :references="references"
+    ></json-node>
+    <div
+      v-if="hasHiddenRootChildren"
+      class="flex items-baseline whitespace-pre"
+      :style="indentStyle"
+    >
+      <span class="w-4 h-4 mr-1 inline-flex items-center justify-center invisible"></span>
+      <button
+        type="button"
+        class="text-xs inline-flex items-center gap-1 ml-4 text-slate-500 hover:text-slate-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-slate-400"
+        :title="hiddenChildrenTooltip"
+        @click.stop="handleExpandTopLevel"
+      >
+        <span aria-hidden="true">{{hiddenChildrenLabel}}…</span>
+      </button>
+    </div>
+    <div class="flex items-baseline whitespace-pre" :style="indentStyle">
+      <span class="w-4 h-4 mr-1 inline-flex items-center justify-center invisible"></span>
+      <span>{{ closingBracket }}{{ comma }}</span>
+    </div>
+  </template>
+</div>

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

@@ -13,6 +13,7 @@
       :max-top-level-fields="maxTopLevelFields"
       :top-level-expanded="topLevelExpanded"
       :expand-top-level="expandTopLevel"
+      :references="references"
     ></json-node>
   </div>
 </div>

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

@@ -2,97 +2,19 @@
 
 const template = require('./list-json.html');
 
-const JsonNodeTemplate = `
-  <div>
-    <div class="flex items-baseline whitespace-pre" :style="indentStyle">
-      <button
-        v-if="showToggle"
-        type="button"
-        class="w-4 h-4 mr-1 inline-flex items-center justify-center leading-none text-gray-500 hover:text-gray-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-slate-400 cursor-pointer"
-        @click.stop="handleToggle"
-      >
-        {{ isCollapsedNode ? '+' : '-' }}
-      </button>
-      <span v-else class="w-4 h-4 mr-1 inline-flex items-center justify-center invisible flex-shrink-0"></span>
-      <template v-if="hasKey">
-        <span class="text-blue-600">"{{ nodeKey }}"</span><span>: </span>
-      </template>
-      <template v-if="isComplex">
-        <template v-if="hasChildren">
-          <span>{{ openingBracket }}</span>
-          <span v-if="isCollapsedNode" class="mx-1">…</span>
-          <span v-if="isCollapsedNode">{{ closingBracket }}{{ comma }}</span>
-        </template>
-        <template v-else>
-          <span>{{ openingBracket }}{{ closingBracket }}{{ comma }}</span>
-        </template>
-      </template>
-      <template v-else>
-        <!--
-          If value is a string and overflows its container (i.e. goes over one line), show an ellipsis.
-          This is done via CSS ellipsis strategy.
-        -->
-        <span
-          :class="valueClasses"
-          :style="typeof value === 'string'
-            ? {
-                display: 'inline-block',
-                maxWidth: '100%',
-                overflow: 'hidden',
-                textOverflow: 'ellipsis',
-                whiteSpace: 'nowrap',
-                verticalAlign: 'bottom'
-              }
-            : {}"
-          :title="typeof value === 'string' && $el && $el.scrollWidth > $el.clientWidth ? value : undefined"
-        >
-          {{ formattedValue }}{{ comma }}
-        </span>
-      </template>
-    </div>
-    <template v-if="isComplex && hasChildren && !isCollapsedNode">
-      <json-node
-        v-for="child in children"
-        :key="child.path"
-        :node-key="child.displayKey"
-        :value="child.value"
-        :level="level + 1"
-        :is-last="child.isLast"
-        :path="child.path"
-        :toggle-collapse="toggleCollapse"
-        :is-collapsed="isCollapsed"
-        :create-child-path="createChildPath"
-        :indent-size="indentSize"
-        :max-top-level-fields="maxTopLevelFields"
-        :top-level-expanded="topLevelExpanded"
-        :expand-top-level="expandTopLevel"
-      ></json-node>
-      <div
-        v-if="hasHiddenRootChildren"
-        class="flex items-baseline whitespace-pre"
-        :style="indentStyle"
-      >
-        <span class="w-4 h-4 mr-1 inline-flex items-center justify-center invisible"></span>
-        <button
-          type="button"
-          class="text-xs inline-flex items-center gap-1 ml-4 text-slate-500 hover:text-slate-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-slate-400"
-          :title="hiddenChildrenTooltip"
-          @click.stop="handleExpandTopLevel"
-        >
-          <span aria-hidden="true">{{hiddenChildrenLabel}}…</span>
-        </button>
-      </div>
-      <div class="flex items-baseline whitespace-pre" :style="indentStyle">
-        <span class="w-4 h-4 mr-1 inline-flex items-center justify-center invisible"></span>
-        <span>{{ closingBracket }}{{ comma }}</span>
-      </div>
-    </template>
-  </div>
-`;
+const JsonNodeTemplate = require('./json-node.html');
 
 module.exports = app => app.component('list-json', {
   template: template,
-  props: ['value'],
+  props: {
+    value: {
+      required: true
+    },
+    references: {
+      type: Object,
+      default: () => ({})
+    }
+  },
   data() {
     return {
       collapsedMap: {},
@@ -196,6 +118,10 @@ module.exports = app => app.component('list-json', {
         expandTopLevel: {
           type: Function,
           default: null
+        },
+        references: {
+          type: Object,
+          default: () => ({})
         }
       },
       computed: {
@@ -334,6 +260,24 @@ module.exports = app => app.component('list-json', {
         },
         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 Boolean(this.referenceModel) && typeof this.value === 'string';
         }
       },
       methods: {
@@ -358,6 +302,12 @@ module.exports = app => app.component('list-json', {
           if (this.isRoot && typeof this.expandTopLevel === 'function') {
             this.expandTopLevel();
           }
+        },
+        goToReference(id) {
+          if (!this.referenceModel) {
+            return;
+          }
+          this.$router.push({ path: `/model/${this.referenceModel}/document/${id}` });
         }
       }
     }

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

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

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

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

package/frontend/src/models/models.html

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