@mongoosejs/studio 0.1.4 → 0.1.6

package/frontend/public/app.js

@@ -128,6 +128,7 @@ var map = {
 	"./list-default/list-default.css": "./frontend/src/list-default/list-default.css",
 	"./list-default/list-default.html": "./frontend/src/list-default/list-default.html",
 	"./list-default/list-default.js": "./frontend/src/list-default/list-default.js",
+	"./list-json/json-node.html": "./frontend/src/list-json/json-node.html",
 	"./list-json/list-json": "./frontend/src/list-json/list-json.js",
 	"./list-json/list-json.html": "./frontend/src/list-json/list-json.html",
 	"./list-json/list-json.js": "./frontend/src/list-json/list-json.js",
@@ -1791,6 +1792,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: {
@@ -1809,6 +1829,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';
   }
 });
@@ -3888,6 +3912,17 @@ module.exports = app => app.component('list-default', {
 
 /***/ }),
 
+/***/ "./frontend/src/list-json/json-node.html":
+/*!***********************************************!*\
+  !*** ./frontend/src/list-json/json-node.html ***!
+  \***********************************************/
+/***/ ((module) => {
+
+"use strict";
+module.exports = "<div>\n  <div class=\"flex items-baseline whitespace-pre\" :style=\"indentStyle\">\n    <button\n      v-if=\"showToggle\"\n      type=\"button\"\n      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\"\n      @click.stop=\"handleToggle\"\n    >\n      {{ isCollapsedNode ? '+' : '-' }}\n    </button>\n    <span v-else class=\"w-4 h-4 mr-1 inline-flex items-center justify-center invisible flex-shrink-0\"></span>\n    <template v-if=\"hasKey\">\n      <span class=\"text-blue-600\">\"{{ nodeKey }}\"</span><span>: </span>\n    </template>\n    <template v-if=\"isComplex\">\n      <template v-if=\"hasChildren\">\n        <span>{{ openingBracket }}</span>\n        <span v-if=\"isCollapsedNode\" class=\"mx-1\">…</span>\n        <span v-if=\"isCollapsedNode\">{{ closingBracket }}{{ comma }}</span>\n      </template>\n      <template v-else>\n        <span>{{ openingBracket }}{{ closingBracket }}{{ comma }}</span>\n      </template>\n    </template>\n    <template v-else>\n      <!--\n        If value is a string and overflows its container (i.e. goes over one line), show an ellipsis.\n        This is done via CSS ellipsis strategy.\n      -->\n      <span\n        v-if=\"shouldShowReferenceLink\"\n        class=\"inline-flex items-baseline group\"\n      >\n        <span\n          :class=\"[...valueClasses, 'underline', 'decoration-dotted', 'underline-offset-2']\"\n          :style=\"typeof value === 'string'\n            ? {\n                display: 'inline-block',\n                maxWidth: '100%',\n                overflow: 'hidden',\n                textOverflow: 'ellipsis',\n                whiteSpace: 'nowrap',\n                verticalAlign: 'bottom'\n              }\n            : {}\"\n          :title=\"typeof value === 'string' && $el && $el.scrollWidth > $el.clientWidth ? value : undefined\"\n        >\n          {{ formattedValue }}\n        </span>\n        <span>\n          {{ comma }}\n        </span>\n        <a\n          href=\"#\"\n          class=\"ml-1 text-sm text-sky-700 opacity-0 group-hover:opacity-100 focus:opacity-100 transition-opacity\"\n          @click.stop.prevent=\"goToReference(value)\"\n        >\n          View Document\n        </a>\n      </span>\n      <span\n        v-else\n        :class=\"valueClasses\"\n        :style=\"typeof value === 'string'\n          ? {\n              display: 'inline-block',\n              maxWidth: '100%',\n              overflow: 'hidden',\n              textOverflow: 'ellipsis',\n              whiteSpace: 'nowrap',\n              verticalAlign: 'bottom'\n            }\n          : {}\"\n        :title=\"typeof value === 'string' && $el && $el.scrollWidth > $el.clientWidth ? value : undefined\"\n      >\n        {{ formattedValue }}{{ comma }}\n      </span>\n    </template>\n  </div>\n  <template v-if=\"isComplex && hasChildren && !isCollapsedNode\">\n    <json-node\n      v-for=\"child in children\"\n      :key=\"child.path\"\n      :node-key=\"child.displayKey\"\n      :value=\"child.value\"\n      :level=\"level + 1\"\n      :is-last=\"child.isLast\"\n      :path=\"child.path\"\n      :toggle-collapse=\"toggleCollapse\"\n      :is-collapsed=\"isCollapsed\"\n      :create-child-path=\"createChildPath\"\n      :indent-size=\"indentSize\"\n      :max-top-level-fields=\"maxTopLevelFields\"\n      :top-level-expanded=\"topLevelExpanded\"\n      :expand-top-level=\"expandTopLevel\"\n      :references=\"references\"\n    ></json-node>\n    <div\n      v-if=\"hasHiddenRootChildren\"\n      class=\"flex items-baseline whitespace-pre\"\n      :style=\"indentStyle\"\n    >\n      <span class=\"w-4 h-4 mr-1 inline-flex items-center justify-center invisible\"></span>\n      <button\n        type=\"button\"\n        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\"\n        :title=\"hiddenChildrenTooltip\"\n        @click.stop=\"handleExpandTopLevel\"\n      >\n        <span aria-hidden=\"true\">{{hiddenChildrenLabel}}…</span>\n      </button>\n    </div>\n    <div class=\"flex items-baseline whitespace-pre\" :style=\"indentStyle\">\n      <span class=\"w-4 h-4 mr-1 inline-flex items-center justify-center invisible\"></span>\n      <span>{{ closingBracket }}{{ comma }}</span>\n    </div>\n  </template>\n</div>\n";
+
+/***/ }),
+
 /***/ "./frontend/src/list-json/list-json.html":
 /*!***********************************************!*\
   !*** ./frontend/src/list-json/list-json.html ***!
@@ -3895,7 +3930,7 @@ module.exports = app => app.component('list-default', {
 /***/ ((module) => {
 
 "use strict";
-module.exports = "<div class=\"tooltip w-full font-mono text-sm py-3 text-slate-800\">\n  <div class=\"w-full\">\n    <json-node\n      :node-key=\"null\"\n      :value=\"value\"\n      :level=\"0\"\n      :is-last=\"true\"\n      path=\"root\"\n      :toggle-collapse=\"toggleCollapse\"\n      :is-collapsed=\"isPathCollapsed\"\n      :create-child-path=\"createChildPath\"\n      :indent-size=\"indentSize\"\n      :max-top-level-fields=\"maxTopLevelFields\"\n      :top-level-expanded=\"topLevelExpanded\"\n      :expand-top-level=\"expandTopLevel\"\n    ></json-node>\n  </div>\n</div>\n";
+module.exports = "<div class=\"tooltip w-full font-mono text-sm py-3 text-slate-800\">\n  <div class=\"w-full\">\n    <json-node\n      :node-key=\"null\"\n      :value=\"value\"\n      :level=\"0\"\n      :is-last=\"true\"\n      path=\"root\"\n      :toggle-collapse=\"toggleCollapse\"\n      :is-collapsed=\"isPathCollapsed\"\n      :create-child-path=\"createChildPath\"\n      :indent-size=\"indentSize\"\n      :max-top-level-fields=\"maxTopLevelFields\"\n      :top-level-expanded=\"topLevelExpanded\"\n      :expand-top-level=\"expandTopLevel\"\n      :references=\"references\"\n    ></json-node>\n  </div>\n</div>\n";
 
 /***/ }),
 
@@ -3910,97 +3945,19 @@ module.exports = "<div class=\"tooltip w-full font-mono text-sm py-3 text-slate-
 
 const template = __webpack_require__(/*! ./list-json.html */ "./frontend/src/list-json/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 = __webpack_require__(/*! ./json-node.html */ "./frontend/src/list-json/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: {},
@@ -4104,6 +4061,10 @@ module.exports = app => app.component('list-json', {
         expandTopLevel: {
           type: Function,
           default: null
+        },
+        references: {
+          type: Object,
+          default: () => ({})
         }
       },
       computed: {
@@ -4242,6 +4203,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: {
@@ -4266,6 +4245,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}` });
         }
       }
     }
@@ -4557,7 +4542,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      <div v-if=\"models.length === 0 && status === 'loaded'\" class=\"p-2 bg-red-100\">\n        No models found\n      </div>\n    </nav>\n  </aside>\n  <div class=\"documents\" ref=\"documentsList\">\n    <div class=\"relative h-[42px] z-10\">\n      <div class=\"documents-menu\">\n        <div class=\"flex flex-row items-center w-full gap-2\">\n          <form @submit.prevent=\"search\" class=\"relative flex-grow m-0\">\n            <input ref=\"searchInput\" class=\"w-full font-mono rounded-md p-1 border border-gray-300 outline-gray-300 text-lg focus:ring-1 focus:ring-ultramarine-200 focus:ring-offset-0 focus:outline-none\" type=\"text\" placeholder=\"Filter\" v-model=\"searchText\" @click=\"initFilter\" @input=\"updateAutocomplete\" @keydown=\"handleKeyDown\" />\n            <ul v-if=\"autocompleteSuggestions.length\" class=\"absolute z-[9999] bg-white border border-gray-300 rounded mt-1 w-full max-h-40 overflow-y-auto shadow\">\n              <li v-for=\"(suggestion, index) in autocompleteSuggestions\" :key=\"suggestion\" class=\"px-2 py-1 cursor-pointer\" :class=\"{ 'bg-ultramarine-100': index === autocompleteIndex }\" @mousedown.prevent=\"applySuggestion(index)\">{{ suggestion }}</li>\n            </ul>\n          </form>\n          <div>\n            <span v-if=\"numDocuments == null\">Loading ...</span>\n            <span v-else-if=\"typeof numDocuments === 'number'\">{{numDocuments === 1 ? numDocuments+ ' document' : numDocuments + ' documents'}}</span>\n          </div>\n          <button\n            @click=\"shouldShowExportModal = true\"\n            type=\"button\"\n            v-show=\"!selectMultiple\"\n            class=\"rounded bg-ultramarine-600 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-ultramarine-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-600\">\n            Export\n          </button>\n          <button\n            @click=\"stagingSelect\"\n            type=\"button\"\n            :class=\"{ 'bg-gray-500 ring-inset ring-2 ring-gray-300 hover:bg-gray-600': selectMultiple, 'bg-ultramarine-600 hover:bg-ultramarine-500' : !selectMultiple }\"\n            class=\"rounded px-2 py-2 text-sm font-semibold text-white shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-600\"\n          >\n            {{ selectMultiple ? 'Cancel' : 'Select' }}\n          </button>\n          <button\n            v-show=\"selectMultiple\"\n            @click=\"shouldShowUpdateMultipleModal=true;\"\n            type=\"button\"\n            class=\"rounded bg-green-600 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-green-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600\"\n            >\n            Update\n          </button>\n          <button\n            @click=\"shouldShowDeleteMultipleModal=true;\"\n            type=\"button\"\n            v-show=\"selectMultiple\"\n            class=\"rounded bg-red-600 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-500\"\n            >\n            Delete\n          </button>\n          <button\n            @click=\"openIndexModal\"\n            type=\"button\"\n            v-show=\"!selectMultiple\"\n            class=\"rounded bg-ultramarine-600 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-ultramarine-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-600\">\n            Indexes\n          </button>\n          <button\n            @click=\"shouldShowCreateModal = true;\"\n            type=\"button\"\n            v-show=\"!selectMultiple\"\n            class=\"rounded bg-ultramarine-600 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-ultramarine-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-600\">\n            Create\n          </button>\n          <button\n            @click=\"openFieldSelection\"\n            type=\"button\"\n            v-show=\"!selectMultiple\"\n            class=\"rounded bg-ultramarine-600 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-ultramarine-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-600\">\n            Fields\n          </button>\n          <span class=\"isolate inline-flex rounded-md shadow-sm\">\n            <button\n              @click=\"setOutputType('table')\"\n              type=\"button\"\n              class=\"relative inline-flex items-center rounded-none rounded-l-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10\"\n              :class=\"outputType === 'table' ? 'bg-gray-200' : 'bg-white'\">\n              <img class=\"h-5 w-5\" src=\"images/table.svg\">\n            </button>\n            <button\n              @click=\"setOutputType('json')\"\n              type=\"button\"\n              class=\"relative -ml-px inline-flex items-center rounded-none rounded-r-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10\"\n              :class=\"outputType === 'json' ? 'bg-gray-200' : 'bg-white'\">\n              <img class=\"h-5 w-5\" src=\"images/json.svg\">\n            </button>\n          </span>\n        </div>\n      </div>\n    </div>\n    <div class=\"documents-container relative\">\n      <div v-if=\"error\">\n        <div class=\"bg-red-100 border border-red-400 text-red-700 px-4 py-3 relative m-4 rounded-md\" role=\"alert\">\n          <span class=\"block font-bold\">Error</span>\n          <span class=\"block\">{{ error }}</span>\n        </div>\n      </div>\n      <table v-else-if=\"outputType === 'table'\">\n        <thead>\n          <th v-for=\"path in filteredPaths\" @click=\"clickFilter(path.path)\" class=\"cursor-pointer\">\n            {{path.path}}\n            <span class=\"path-type\">\n              ({{(path.instance || 'unknown')}})\n            </span>\n            <span class=\"sort-arrow\" @click=\"sortDocs(1, path.path)\">{{sortBy[path.path] == 1 ? 'X' : '↑'}}</span>\n            <span class=\"sort-arrow\" @click=\"sortDocs(-1, path.path)\">{{sortBy[path.path] == -1 ? 'X' : '↓'}}</span>\n          </th>\n        </thead>\n        <tbody>\n          <tr v-for=\"document in documents\" @click=\"handleDocumentClick(document, $event)\" :key=\"document._id\">\n            <td v-for=\"schemaPath in filteredPaths\" :class=\"{ 'bg-blue-200': selectedDocuments.some(x => x._id.toString() === document._id.toString()) }\">\n              <component\n                :is=\"getComponentForPath(schemaPath)\"\n                :value=\"getValueForPath(document, schemaPath.path)\"\n                :allude=\"getReferenceModel(schemaPath)\">\n              </component>\n            </td>\n          </tr>\n        </tbody>\n      </table>\n      <div v-else-if=\"outputType === 'json'\" class=\"flex flex-col space-y-6\">\n        <div\n          v-for=\"document in documents\"\n          :key=\"document._id\"\n          @click=\"handleDocumentContainerClick(document, $event)\"\n          :class=\"[\n            'group relative transition-colors',\n            selectedDocuments.some(x => x._id.toString() === document._id.toString()) ? 'bg-blue-200' : 'hover:bg-slate-100'\n          ]\"\n        >\n          <button\n            type=\"button\"\n            class=\"absolute top-2 right-2 z-10 inline-flex items-center rounded bg-ultramarine-600 px-2 py-1 text-xs font-semibold text-white shadow-sm transition-opacity duration-150 opacity-0 group-hover:opacity-100 focus-visible:opacity-100 hover:bg-ultramarine-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-600\"\n            @click.stop=\"openDocument(document)\"\n          >\n            Open this Document\n          </button>\n          <list-json :value=\"filterDocument(document)\">\n          </list-json>\n        </div>\n      </div>\n      <div v-if=\"status === 'loading'\" class=\"loader\">\n        <img src=\"images/loader.gif\">\n      </div>\n    </div>\n  </div>\n  <modal v-if=\"shouldShowExportModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"shouldShowExportModal = false\">&times;</div>\n      <export-query-results\n        :schemaPaths=\"schemaPaths\"\n        :search-text=\"searchText\"\n        :currentModel=\"currentModel\"\n        @done=\"shouldShowExportModal = false\">\n      </export-query-results>\n    </template>\n  </modal>\n  <modal v-if=\"shouldShowIndexModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"shouldShowIndexModal = false\">&times;</div>\n      <div class=\"text-xl font-bold mb-2\">Indexes</div>\n      <div v-for=\"index in mongoDBIndexes\" class=\"w-full flex items-center\">\n        <div class=\"grow shrink text-left flex justify-between items-center\" v-if=\"index.name != '_id_'\">\n          <div>\n            <div class=\"font-bold\">{{ index.name }}</div>\n            <div class=\"text-sm font-mono\">{{ JSON.stringify(index.key) }}</div>\n          </div>\n          <div>\n            <async-button\n              type=\"button\"\n              @click=\"dropIndex(index.name)\"\n              class=\"rounded-md bg-valencia-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-valencia-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600 disabled:bg-gray-400 disabled:cursor-not-allowed\">\n              Drop\n            </async-button>\n          </div>\n        </div>\n      </div>\n    </template>\n  </modal>\n  <modal v-if=\"shouldShowFieldModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"shouldShowFieldModal = false; selectedPaths = [...filteredPaths];\">&times;</div>\n      <div v-for=\"(path, index) in schemaPaths\" :key=\"index\" class=\"w-5 flex items-center\">\n        <input  class=\"mt-0 h-4 w-4 rounded border-gray-300 text-sky-600 focus:ring-sky-600 accent-sky-600\" type=\"checkbox\" :id=\"'path.path'+index\" @change=\"addOrRemove(path)\" :value=\"path.path\" :checked=\"isSelected(path.path)\" />\n        <div class=\"ml-2 text-gray-700 grow shrink text-left\">\n          <label :for=\"'path.path' + index\">{{path.path}}</label>\n        </div>\n      </div>\n      <div class=\"mt-4 flex gap-2\">\n        <button type=\"button\" @click=\"filterDocuments()\" class=\"rounded-md bg-ultramarine-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-ultramarine-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-teal-600\">Filter Selection</button>\n        <button type=\"button\" @click=\"selectAll()\" class=\"rounded-md bg-forest-green-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-green-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600\">Select All</button>\n        <button type=\"button\" @click=\"deselectAll()\" class=\"rounded-md bg-valencia-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-valencia-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600\">Deselect All</button>\n        <button type=\"button\" @click=\"resetDocuments()\" class=\"rounded-md bg-gray-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-gray-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600\" >Cancel</button>\n      </div>\n    </template>\n  </modal>\n  <modal v-if=\"shouldShowCreateModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"shouldShowCreateModal = false;\">&times;</div>\n      <create-document :currentModel=\"currentModel\" :paths=\"schemaPaths\" @close=\"closeCreationModal\"></create-document>\n    </template>\n  </modal>\n  <modal v-if=\"shouldShowUpdateMultipleModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"shouldShowUpdateMultipleModal = false;\">&times;</div>\n      <update-document :currentModel=\"currentModel\" :document=\"selectedDocuments\" :multiple=\"true\" @update=\"updateDocuments\" @close=\"shouldShowUpdateMultipleModal=false;\"></update-document>\n    </template>\n  </modal>\n  <modal v-if=\"shouldShowDeleteMultipleModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"shouldShowDeleteMultipleModal = false;\">&times;</div>\n      <h2>Are you sure you want to delete {{selectedDocuments.length}} documents?</h2>\n      <div>\n        <list-json :value=\"selectedDocuments\"></list-json>\n      </div>\n      <div class=\"flex gap-4\">\n        <async-button @click=\"deleteDocuments\" class=\"rounded bg-red-500 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600\">\n          Confirm\n        </async-button>\n        <button @click=\"shouldShowDeleteMultipleModal = false;\" class=\"rounded bg-gray-400 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-gray-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500\">\n          Cancel\n        </button>\n      </div>\n    </template>\n  </modal>\n</div>\n";
+module.exports = "<div class=\"models flex\" style=\"height: calc(100vh - 55px); height: calc(100dvh - 55px)\">\n  <div class=\"fixed top-[65px] cursor-pointer bg-gray-100 rounded-r-md z-10\" @click=\"hideSidebar = false\">\n    <svg xmlns=\"http://www.w3.org/2000/svg\" style=\"h-5 w-5\" viewBox=\"0 -960 960 960\" class=\"w-5\" fill=\"#5f6368\"><path d=\"M360-120v-720h80v720h-80Zm160-160v-400l200 200-200 200Z\"/></svg>\n  </div>\n  <aside class=\"bg-white border-r overflow-y-auto overflow-x-hidden h-full transition-all duration-300 ease-in-out z-20 w-0 lg:w-48 fixed lg:relative shrink-0\" :class=\"hideSidebar === true ? '!w-0' : hideSidebar === false ? '!w-48' : ''\">\n    <div class=\"flex items-center border-b border-gray-100 w-48 overflow-x-hidden\">\n      <div class=\"p-4 font-bold text-lg\">Models</div>\n      <button\n        @click=\"hideSidebar = true\"\n        class=\"ml-auto mr-2 p-2 rounded hover:bg-gray-200 focus:outline-none\"\n        aria-label=\"Close sidebar\"\n      >\n        <svg xmlns=\"http://www.w3.org/2000/svg\" style=\"h-5 w-5\" viewBox=\"0 -960 960 960\" class=\"w-5\" fill=\"currentColor\"><path d=\"M660-320v-320L500-480l160 160ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm120-80v-560H200v560h120Zm80 0h360v-560H400v560Zm-80 0H200h120Z\"/></svg>\n      </button>\n    </div>\n    <nav class=\"flex flex-1 flex-col\">\n      <ul role=\"list\" class=\"flex flex-1 flex-col gap-y-7\">\n        <li>\n          <ul role=\"list\">\n            <li v-for=\"model in models\">\n              <router-link\n                :to=\"'/model/' + model\"\n                class=\"block truncate rounded-md py-2 pr-2 pl-2 text-sm font-semibold text-gray-700\"\n                :class=\"model === currentModel ? 'bg-ultramarine-100 font-bold' : 'hover:bg-ultramarine-100'\">\n                {{model}}\n              </router-link>\n            </li>\n          </ul>\n        </li>\n      </ul>\n      <div v-if=\"models.length === 0 && status === 'loaded'\" class=\"p-2 bg-red-100\">\n        No models found\n      </div>\n    </nav>\n  </aside>\n  <div class=\"documents\" ref=\"documentsList\">\n    <div class=\"relative h-[42px] z-10\">\n      <div class=\"documents-menu\">\n        <div class=\"flex flex-row items-center w-full gap-2\">\n          <form @submit.prevent=\"search\" class=\"relative flex-grow m-0\">\n            <input ref=\"searchInput\" class=\"w-full font-mono rounded-md p-1 border border-gray-300 outline-gray-300 text-lg focus:ring-1 focus:ring-ultramarine-200 focus:ring-offset-0 focus:outline-none\" type=\"text\" placeholder=\"Filter\" v-model=\"searchText\" @click=\"initFilter\" @input=\"updateAutocomplete\" @keydown=\"handleKeyDown\" />\n            <ul v-if=\"autocompleteSuggestions.length\" class=\"absolute z-[9999] bg-white border border-gray-300 rounded mt-1 w-full max-h-40 overflow-y-auto shadow\">\n              <li v-for=\"(suggestion, index) in autocompleteSuggestions\" :key=\"suggestion\" class=\"px-2 py-1 cursor-pointer\" :class=\"{ 'bg-ultramarine-100': index === autocompleteIndex }\" @mousedown.prevent=\"applySuggestion(index)\">{{ suggestion }}</li>\n            </ul>\n          </form>\n          <div>\n            <span v-if=\"numDocuments == null\">Loading ...</span>\n            <span v-else-if=\"typeof numDocuments === 'number'\">{{numDocuments === 1 ? numDocuments+ ' document' : numDocuments + ' documents'}}</span>\n          </div>\n          <button\n            @click=\"shouldShowExportModal = true\"\n            type=\"button\"\n            v-show=\"!selectMultiple\"\n            class=\"rounded bg-ultramarine-600 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-ultramarine-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-600\">\n            Export\n          </button>\n          <button\n            @click=\"stagingSelect\"\n            type=\"button\"\n            :class=\"{ 'bg-gray-500 ring-inset ring-2 ring-gray-300 hover:bg-gray-600': selectMultiple, 'bg-ultramarine-600 hover:bg-ultramarine-500' : !selectMultiple }\"\n            class=\"rounded px-2 py-2 text-sm font-semibold text-white shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-600\"\n          >\n            {{ selectMultiple ? 'Cancel' : 'Select' }}\n          </button>\n          <button\n            v-show=\"selectMultiple\"\n            @click=\"shouldShowUpdateMultipleModal=true;\"\n            type=\"button\"\n            class=\"rounded bg-green-600 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-green-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600\"\n            >\n            Update\n          </button>\n          <button\n            @click=\"shouldShowDeleteMultipleModal=true;\"\n            type=\"button\"\n            v-show=\"selectMultiple\"\n            class=\"rounded bg-red-600 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-500\"\n            >\n            Delete\n          </button>\n          <button\n            @click=\"openIndexModal\"\n            type=\"button\"\n            v-show=\"!selectMultiple\"\n            class=\"rounded bg-ultramarine-600 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-ultramarine-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-600\">\n            Indexes\n          </button>\n          <button\n            @click=\"shouldShowCreateModal = true;\"\n            type=\"button\"\n            v-show=\"!selectMultiple\"\n            class=\"rounded bg-ultramarine-600 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-ultramarine-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-600\">\n            Create\n          </button>\n          <button\n            @click=\"openFieldSelection\"\n            type=\"button\"\n            v-show=\"!selectMultiple\"\n            class=\"rounded bg-ultramarine-600 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-ultramarine-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-600\">\n            Fields\n          </button>\n          <span class=\"isolate inline-flex rounded-md shadow-sm\">\n            <button\n              @click=\"setOutputType('table')\"\n              type=\"button\"\n              class=\"relative inline-flex items-center rounded-none rounded-l-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10\"\n              :class=\"outputType === 'table' ? 'bg-gray-200' : 'bg-white'\">\n              <img class=\"h-5 w-5\" src=\"images/table.svg\">\n            </button>\n            <button\n              @click=\"setOutputType('json')\"\n              type=\"button\"\n              class=\"relative -ml-px inline-flex items-center rounded-none rounded-r-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10\"\n              :class=\"outputType === 'json' ? 'bg-gray-200' : 'bg-white'\">\n              <img class=\"h-5 w-5\" src=\"images/json.svg\">\n            </button>\n          </span>\n        </div>\n      </div>\n    </div>\n    <div class=\"documents-container relative\">\n      <div v-if=\"error\">\n        <div class=\"bg-red-100 border border-red-400 text-red-700 px-4 py-3 relative m-4 rounded-md\" role=\"alert\">\n          <span class=\"block font-bold\">Error</span>\n          <span class=\"block\">{{ error }}</span>\n        </div>\n      </div>\n      <table v-else-if=\"outputType === 'table'\">\n        <thead>\n          <th v-for=\"path in filteredPaths\" @click=\"clickFilter(path.path)\" class=\"cursor-pointer\">\n            {{path.path}}\n            <span class=\"path-type\">\n              ({{(path.instance || 'unknown')}})\n            </span>\n            <span class=\"sort-arrow\" @click=\"sortDocs(1, path.path)\">{{sortBy[path.path] == 1 ? 'X' : '↑'}}</span>\n            <span class=\"sort-arrow\" @click=\"sortDocs(-1, path.path)\">{{sortBy[path.path] == -1 ? 'X' : '↓'}}</span>\n          </th>\n        </thead>\n        <tbody>\n          <tr v-for=\"document in documents\" @click=\"handleDocumentClick(document, $event)\" :key=\"document._id\">\n            <td v-for=\"schemaPath in filteredPaths\" :class=\"{ 'bg-blue-200': selectedDocuments.some(x => x._id.toString() === document._id.toString()) }\">\n              <component\n                :is=\"getComponentForPath(schemaPath)\"\n                :value=\"getValueForPath(document, schemaPath.path)\"\n                :allude=\"getReferenceModel(schemaPath)\">\n              </component>\n            </td>\n          </tr>\n        </tbody>\n      </table>\n      <div v-else-if=\"outputType === 'json'\" class=\"flex flex-col space-y-6\">\n        <div\n          v-for=\"document in documents\"\n          :key=\"document._id\"\n          @click=\"handleDocumentContainerClick(document, $event)\"\n          :class=\"[\n            'group relative transition-colors',\n            selectedDocuments.some(x => x._id.toString() === document._id.toString()) ? 'bg-blue-200' : 'hover:bg-slate-100'\n          ]\"\n        >\n          <button\n            type=\"button\"\n            class=\"absolute top-2 right-2 z-10 inline-flex items-center rounded bg-ultramarine-600 px-2 py-1 text-xs font-semibold text-white shadow-sm transition-opacity duration-150 opacity-0 group-hover:opacity-100 focus-visible:opacity-100 hover:bg-ultramarine-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-600\"\n            @click.stop=\"openDocument(document)\"\n          >\n            Open this Document\n          </button>\n          <list-json :value=\"filterDocument(document)\" :references=\"referenceMap\">\n          </list-json>\n        </div>\n      </div>\n      <div v-if=\"status === 'loading'\" class=\"loader\">\n        <img src=\"images/loader.gif\">\n      </div>\n    </div>\n  </div>\n  <modal v-if=\"shouldShowExportModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"shouldShowExportModal = false\">&times;</div>\n      <export-query-results\n        :schemaPaths=\"schemaPaths\"\n        :search-text=\"searchText\"\n        :currentModel=\"currentModel\"\n        @done=\"shouldShowExportModal = false\">\n      </export-query-results>\n    </template>\n  </modal>\n  <modal v-if=\"shouldShowIndexModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"shouldShowIndexModal = false\">&times;</div>\n      <div class=\"text-xl font-bold mb-2\">Indexes</div>\n      <div v-for=\"index in mongoDBIndexes\" class=\"w-full flex items-center\">\n        <div class=\"grow shrink text-left flex justify-between items-center\" v-if=\"index.name != '_id_'\">\n          <div>\n            <div class=\"font-bold\">{{ index.name }}</div>\n            <div class=\"text-sm font-mono\">{{ JSON.stringify(index.key) }}</div>\n          </div>\n          <div>\n            <async-button\n              type=\"button\"\n              @click=\"dropIndex(index.name)\"\n              class=\"rounded-md bg-valencia-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-valencia-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600 disabled:bg-gray-400 disabled:cursor-not-allowed\">\n              Drop\n            </async-button>\n          </div>\n        </div>\n      </div>\n    </template>\n  </modal>\n  <modal v-if=\"shouldShowFieldModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"shouldShowFieldModal = false; selectedPaths = [...filteredPaths];\">&times;</div>\n      <div v-for=\"(path, index) in schemaPaths\" :key=\"index\" class=\"w-5 flex items-center\">\n        <input  class=\"mt-0 h-4 w-4 rounded border-gray-300 text-sky-600 focus:ring-sky-600 accent-sky-600\" type=\"checkbox\" :id=\"'path.path'+index\" @change=\"addOrRemove(path)\" :value=\"path.path\" :checked=\"isSelected(path.path)\" />\n        <div class=\"ml-2 text-gray-700 grow shrink text-left\">\n          <label :for=\"'path.path' + index\">{{path.path}}</label>\n        </div>\n      </div>\n      <div class=\"mt-4 flex gap-2\">\n        <button type=\"button\" @click=\"filterDocuments()\" class=\"rounded-md bg-ultramarine-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-ultramarine-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-teal-600\">Filter Selection</button>\n        <button type=\"button\" @click=\"selectAll()\" class=\"rounded-md bg-forest-green-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-green-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600\">Select All</button>\n        <button type=\"button\" @click=\"deselectAll()\" class=\"rounded-md bg-valencia-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-valencia-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600\">Deselect All</button>\n        <button type=\"button\" @click=\"resetDocuments()\" class=\"rounded-md bg-gray-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-gray-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600\" >Cancel</button>\n      </div>\n    </template>\n  </modal>\n  <modal v-if=\"shouldShowCreateModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"shouldShowCreateModal = false;\">&times;</div>\n      <create-document :currentModel=\"currentModel\" :paths=\"schemaPaths\" @close=\"closeCreationModal\"></create-document>\n    </template>\n  </modal>\n  <modal v-if=\"shouldShowUpdateMultipleModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"shouldShowUpdateMultipleModal = false;\">&times;</div>\n      <update-document :currentModel=\"currentModel\" :document=\"selectedDocuments\" :multiple=\"true\" @update=\"updateDocuments\" @close=\"shouldShowUpdateMultipleModal=false;\"></update-document>\n    </template>\n  </modal>\n  <modal v-if=\"shouldShowDeleteMultipleModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"shouldShowDeleteMultipleModal = false;\">&times;</div>\n      <h2>Are you sure you want to delete {{selectedDocuments.length}} documents?</h2>\n      <div>\n        <list-json :value=\"selectedDocuments\"></list-json>\n      </div>\n      <div class=\"flex gap-4\">\n        <async-button @click=\"deleteDocuments\" class=\"rounded bg-red-500 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600\">\n          Confirm\n        </async-button>\n        <button @click=\"shouldShowDeleteMultipleModal = false;\" class=\"rounded bg-gray-400 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-gray-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500\">\n          Cancel\n        </button>\n      </div>\n    </template>\n  </modal>\n</div>\n";
 
 /***/ }),
 
@@ -4678,6 +4663,17 @@ module.exports = app => app.component('models', {
 
     await this.initSearchFromUrl();
   },
+  computed: {
+    referenceMap() {
+      const map = {};
+      for (const path of this.filteredPaths) {
+        if (path?.ref) {
+          map[path.path] = path.ref;
+        }
+      }
+      return map;
+    }
+  },
   methods: {
     buildAutocompleteTrie() {
       this.autocompleteTrie = new Trie();
@@ -4908,9 +4904,10 @@ module.exports = app => app.component('models', {
     },
     filterDocument(doc) {
       const filteredDoc = {};
-      console.log(doc, this.filteredPaths);
       for (let i = 0; i < this.filteredPaths.length; i++) {
-        filteredDoc[this.filteredPaths[i].path] = doc[this.filteredPaths[i].path];
+        const path = this.filteredPaths[i].path;
+        const value = mpath.get(path, doc);
+        mpath.set(path, value, filteredDoc);
       }
       return filteredDoc;
     },
@@ -16609,7 +16606,7 @@ module.exports = function stringToParts(str) {
 /***/ ((module) => {
 
 "use strict";
-module.exports = /*#__PURE__*/JSON.parse('{"name":"@mongoosejs/studio","version":"0.1.4","description":"A sleek, powerful MongoDB UI with built-in dashboarding and auth, seamlessly integrated with your Express, Vercel, or Netlify app.","homepage":"https://studio.mongoosejs.io/","repository":{"type":"git","url":"https://github.com/mongoosejs/studio"},"license":"Apache-2.0","dependencies":{"archetype":"0.13.1","csv-stringify":"6.3.0","ejson":"^2.2.3","extrovert":"^0.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"}}');
+module.exports = /*#__PURE__*/JSON.parse('{"name":"@mongoosejs/studio","version":"0.1.6","description":"A sleek, powerful MongoDB UI with built-in dashboarding and auth, seamlessly integrated with your Express, Vercel, or Netlify app.","homepage":"https://studio.mongoosejs.io/","repository":{"type":"git","url":"https://github.com/mongoosejs/studio"},"license":"Apache-2.0","dependencies":{"archetype":"0.13.1","csv-stringify":"6.3.0","ejson":"^2.2.3","extrovert":"^0.2.0","marked":"15.0.12","node-inspect-extracted":"3.x","tailwindcss":"3.4.0","vanillatoasts":"^1.6.0","vue":"3.x","webpack":"5.x"},"peerDependencies":{"bson":"^5.5.1 || 6.x","express":"4.x","mongoose":"7.x || 8.x || ^9.0.0-0"},"devDependencies":{"@masteringjs/eslint-config":"0.1.1","axios":"1.2.2","dedent":"^1.6.0","eslint":"9.30.0","express":"4.x","mocha":"10.2.0","mongoose":"9.x"},"scripts":{"lint":"eslint .","tailwind":"tailwindcss -o ./frontend/public/tw.css","tailwind:watch":"tailwindcss -o ./frontend/public/tw.css --watch","test":"mocha test/*.test.js"}}');
 
 /***/ })
 

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/models.html

@@ -165,7 +165,7 @@
           >
             Open this Document
           </button>
-          <list-json :value="filterDocument(document)">
+          <list-json :value="filterDocument(document)" :references="referenceMap">
           </list-json>
         </div>
       </div>

package/frontend/src/models/models.js

@@ -108,6 +108,17 @@ module.exports = app => app.component('models', {
 
     await this.initSearchFromUrl();
   },
+  computed: {
+    referenceMap() {
+      const map = {};
+      for (const path of this.filteredPaths) {
+        if (path?.ref) {
+          map[path.path] = path.ref;
+        }
+      }
+      return map;
+    }
+  },
   methods: {
     buildAutocompleteTrie() {
       this.autocompleteTrie = new Trie();
@@ -338,9 +349,10 @@ module.exports = app => app.component('models', {
     },
     filterDocument(doc) {
       const filteredDoc = {};
-      console.log(doc, this.filteredPaths);
       for (let i = 0; i < this.filteredPaths.length; i++) {
-        filteredDoc[this.filteredPaths[i].path] = doc[this.filteredPaths[i].path];
+        const path = this.filteredPaths[i].path;
+        const value = mpath.get(path, doc);
+        mpath.set(path, value, filteredDoc);
       }
       return filteredDoc;
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mongoosejs/studio",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "description": "A sleek, powerful MongoDB UI with built-in dashboarding and auth, seamlessly integrated with your Express, Vercel, or Netlify app.",
   "homepage": "https://studio.mongoosejs.io/",
   "repository": {
@@ -12,7 +12,7 @@
     "archetype": "0.13.1",
     "csv-stringify": "6.3.0",
     "ejson": "^2.2.3",
-    "extrovert": "^0.1.0",
+    "extrovert": "^0.2.0",
     "marked": "15.0.12",
     "node-inspect-extracted": "3.x",
     "tailwindcss": "3.4.0",
@@ -23,7 +23,7 @@
   "peerDependencies": {
     "bson": "^5.5.1 || 6.x",
     "express": "4.x",
-    "mongoose": "7.x || 8.x"
+    "mongoose": "7.x || 8.x || ^9.0.0-0"
   },
   "devDependencies": {
     "@masteringjs/eslint-config": "0.1.1",
@@ -32,7 +32,7 @@
     "eslint": "9.30.0",
     "express": "4.x",
     "mocha": "10.2.0",
-    "mongoose": "8.x"
+    "mongoose": "9.x"
   },
   "scripts": {
     "lint": "eslint .",