@mongoosejs/studio 0.0.136 → 0.0.138

package/frontend/public/tw.css

@@ -594,6 +594,10 @@ video {
   pointer-events: none;
 }
 
+.invisible {
+  visibility: hidden;
+}
+
 .fixed {
   position: fixed;
 }
@@ -635,6 +639,10 @@ video {
   right: 0.25rem;
 }
 
+.right-2 {
+  right: 0.5rem;
+}
+
 .right-4 {
   right: 1rem;
 }
@@ -643,6 +651,10 @@ video {
   top: 0.25rem;
 }
 
+.top-2 {
+  top: 0.5rem;
+}
+
 .top-\[65px\] {
   top: 65px;
 }
@@ -701,6 +713,11 @@ video {
   margin-bottom: -0.5rem;
 }
 
+.mx-1 {
+  margin-left: 0.25rem;
+  margin-right: 0.25rem;
+}
+
 .mx-4 {
   margin-left: 1rem;
   margin-right: 1rem;
@@ -764,6 +781,10 @@ video {
   margin-left: 0.75rem;
 }
 
+.ml-4 {
+  margin-left: 1rem;
+}
+
 .ml-auto {
   margin-left: auto;
 }
@@ -1164,6 +1185,10 @@ video {
   align-items: center;
 }
 
+.items-baseline {
+  align-items: baseline;
+}
+
 .justify-end {
   justify-content: flex-end;
 }
@@ -1238,6 +1263,12 @@ video {
   margin-bottom: calc(1rem * var(--tw-space-y-reverse));
 }
 
+.space-y-6 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
+}
+
 .divide-y > :not([hidden]) ~ :not([hidden]) {
   --tw-divide-y-reverse: 0;
   border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
@@ -1856,14 +1887,27 @@ video {
   text-transform: capitalize;
 }
 
+.italic {
+  font-style: italic;
+}
+
 .leading-6 {
   line-height: 1.5rem;
 }
 
+.leading-none {
+  line-height: 1;
+}
+
 .leading-tight {
   line-height: 1.25;
 }
 
+.text-amber-600 {
+  --tw-text-opacity: 1;
+  color: rgb(217 119 6 / var(--tw-text-opacity));
+}
+
 .text-black {
   --tw-text-opacity: 1;
   color: rgb(0 0 0 / var(--tw-text-opacity));
@@ -1879,6 +1923,11 @@ video {
   color: rgb(30 64 175 / var(--tw-text-opacity));
 }
 
+.text-emerald-600 {
+  --tw-text-opacity: 1;
+  color: rgb(5 150 105 / var(--tw-text-opacity));
+}
+
 .text-forest-green-500 {
   --tw-text-opacity: 1;
   color: rgb(0 242 58 / var(--tw-text-opacity));
@@ -1959,6 +2008,21 @@ video {
   color: rgb(7 89 133 / var(--tw-text-opacity));
 }
 
+.text-slate-500 {
+  --tw-text-opacity: 1;
+  color: rgb(100 116 139 / var(--tw-text-opacity));
+}
+
+.text-slate-700 {
+  --tw-text-opacity: 1;
+  color: rgb(51 65 85 / var(--tw-text-opacity));
+}
+
+.text-slate-800 {
+  --tw-text-opacity: 1;
+  color: rgb(30 41 59 / var(--tw-text-opacity));
+}
+
 .text-ultramarine-600 {
   --tw-text-opacity: 1;
   color: rgb(24 35 255 / var(--tw-text-opacity));
@@ -1974,6 +2038,11 @@ video {
   color: rgb(220 73 73 / var(--tw-text-opacity));
 }
 
+.text-violet-600 {
+  --tw-text-opacity: 1;
+  color: rgb(124 58 237 / var(--tw-text-opacity));
+}
+
 .text-white {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
@@ -1983,6 +2052,10 @@ video {
   accent-color: #0284c7;
 }
 
+.opacity-0 {
+  opacity: 0;
+}
+
 .opacity-25 {
   opacity: 0.25;
 }
@@ -2117,12 +2190,22 @@ video {
   transition-duration: 150ms;
 }
 
+.transition-opacity {
+  transition-property: opacity;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
 .transition-transform {
   transition-property: transform;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
 
+.duration-150 {
+  transition-duration: 150ms;
+}
+
 .duration-200 {
   transition-duration: 200ms;
 }
@@ -2320,6 +2403,11 @@ video {
   color: rgb(55 65 81 / var(--tw-text-opacity));
 }
 
+.hover\:text-slate-700:hover {
+  --tw-text-opacity: 1;
+  color: rgb(51 65 85 / var(--tw-text-opacity));
+}
+
 .hover\:text-ultramarine-900:hover {
   --tw-text-opacity: 1;
   color: rgb(6 14 172 / var(--tw-text-opacity));
@@ -2438,6 +2526,10 @@ video {
   --tw-ring-offset-color: #1f2937;
 }
 
+.focus-visible\:opacity-100:focus-visible {
+  opacity: 1;
+}
+
 .focus-visible\:outline:focus-visible {
   outline-style: solid;
 }
@@ -2494,6 +2586,21 @@ video {
   outline-color: #1823ff;
 }
 
+.focus-visible\:ring-2:focus-visible {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
+.focus-visible\:ring-slate-400:focus-visible {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(148 163 184 / var(--tw-ring-opacity));
+}
+
+.focus-visible\:ring-offset-1:focus-visible {
+  --tw-ring-offset-width: 1px;
+}
+
 .disabled\:cursor-not-allowed:disabled {
   cursor: not-allowed;
 }
@@ -2522,6 +2629,10 @@ video {
   opacity: 0.5;
 }
 
+.group:hover .group-hover\:opacity-100 {
+  opacity: 1;
+}
+
 @media (min-width: 640px) {
   .sm\:-mx-6 {
     margin-left: -1.5rem;

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

@@ -1,4 +1,18 @@
-<div class="list-json tooltip">
-  <pre><code ref="JSONCode" class="language-javascript">{{shortenValue}}</code></pre>
+<div class="tooltip w-full font-mono text-sm py-3 text-slate-800">
+  <div class="w-full">
+    <json-node
+      :node-key="null"
+      :value="value"
+      :level="0"
+      :is-last="true"
+      path="root"
+      :toggle-collapse="toggleCollapse"
+      :is-collapsed="isPathCollapsed"
+      :create-child-path="createChildPath"
+      :indent-size="indentSize"
+      :max-top-level-fields="maxTopLevelFields"
+      :top-level-expanded="topLevelExpanded"
+      :expand-top-level="expandTopLevel"
+    ></json-node>
+  </div>
 </div>
-  

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

@@ -1,40 +1,365 @@
 'use strict';
 
-const api = require('../api');
 const template = require('./list-json.html');
 
-const vanillatoast = require('vanillatoasts');
-
-require('../appendCSS')(require('./list-json.css'));
+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>
+`;
 
 module.exports = app => app.component('list-json', {
   template: template,
   props: ['value'],
-  computed: {
-    shortenValue() {
-      return JSON.stringify(this.value, null, 4);
+  data() {
+    return {
+      collapsedMap: {},
+      indentSize: 16,
+      maxTopLevelFields: 15,
+      topLevelExpanded: false
+    };
+  },
+  watch: {
+    value: {
+      handler() {
+        this.resetCollapse();
+      }
     }
   },
+  created() {
+    this.resetCollapse();
+  },
   methods: {
-    copyText(value) {
-      const storage = document.createElement('textarea');
-      storage.value = JSON.stringify(value);
-      const elem = this.$refs.JSONCode;
-      elem.appendChild(storage);
-      storage.select();
-      storage.setSelectionRange(0, 99999);
-      document.execCommand('copy');
-      elem.removeChild(storage);
-      vanillatoast.create({
-        title: 'Text copied!',
-        type: 'success',
-        timeout: 3000,
-        icon: 'images/success.png',
-        positionClass: 'bottomRight'
-      });
+    resetCollapse() {
+      this.collapsedMap = {};
+      this.topLevelExpanded = false;
+    },
+    toggleCollapse(path) {
+      const current = this.isPathCollapsed(path);
+      this.collapsedMap = Object.assign({}, this.collapsedMap, { [path]: !current });
+    },
+    isPathCollapsed(path) {
+      if (path === 'root') {
+        return false;
+      }
+      if (Object.prototype.hasOwnProperty.call(this.collapsedMap, path)) {
+        return this.collapsedMap[path];
+      }
+      return true;
+    },
+    createChildPath(parentPath, childKey, isArray) {
+      if (parentPath == null || parentPath === '') {
+        return isArray ? `[${childKey}]` : `${childKey}`;
+      }
+      if (parentPath === 'root') {
+        return isArray ? `root[${childKey}]` : `root.${childKey}`;
+      }
+      if (isArray) {
+        return `${parentPath}[${childKey}]`;
+      }
+      return `${parentPath}.${childKey}`;
+    },
+    expandTopLevel() {
+      this.topLevelExpanded = true;
     }
   },
-  mounted: function() {
-    Prism.highlightElement(this.$refs.JSONCode);
+  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
+        }
+      },
+      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;
+        }
+      },
+      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();
+          }
+        }
+      }
+    }
   }
 });

package/frontend/src/models/models.css

@@ -136,3 +136,4 @@ td {
   justify-content: space-around;
   align-items: center;
 }
+

package/frontend/src/models/models.html

@@ -98,14 +98,14 @@
           </button>
           <span class="isolate inline-flex rounded-md shadow-sm">
             <button
-              @click="outputType = 'table'"
+              @click="setOutputType('table')"
               type="button"
               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"
               :class="outputType === 'table' ? 'bg-gray-200' : 'bg-white'">
               <img class="h-5 w-5" src="images/table.svg">
             </button>
             <button
-              @click="outputType = 'json'"
+              @click="setOutputType('json')"
               type="button"
               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"
               :class="outputType === 'json' ? 'bg-gray-200' : 'bg-white'">
@@ -139,8 +139,23 @@
           </tr>
         </tbody>
       </table>
-      <div v-if="outputType === 'json'">
-        <div v-for="document in documents" @click="handleDocumentClick(document, $event)" :key="document._id" :class="{ 'bg-blue-200': selectedDocuments.some(x => x._id.toString() === document._id.toString()) }">
+      <div v-if="outputType === 'json'" class="flex flex-col space-y-6">
+        <div
+          v-for="document in documents"
+          :key="document._id"
+          @click="handleDocumentContainerClick(document, $event)"
+          :class="[
+            'group relative transition-colors',
+            selectedDocuments.some(x => x._id.toString() === document._id.toString()) ? 'bg-blue-200' : 'hover:bg-slate-100'
+          ]"
+        >
+          <button
+            type="button"
+            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"
+            @click.stop="openDocument(document)"
+          >
+            Open this Document
+          </button>
           <list-json :value="filterDocument(document)">
           </list-json>
         </div>