@mongoosejs/studio 0.1.16 → 0.1.18

package/frontend/src/detail-array/detail-array.js

@@ -1,20 +1,36 @@
 'use strict';
 
 const template = require('./detail-array.html');
-const { inspect } = require('node-inspect-extracted');
 
 module.exports = app => app.component('detail-array', {
   template: template,
   props: ['value'],
-  computed: {
-    displayValue() {
+  data() {
+    return {
+      arrayValue: []
+    };
+  },
+  methods: {
+    initializeArray() {
       if (this.value == null) {
-        return this.value;
+        this.arrayValue = [];
+      } else if (Array.isArray(this.value)) {
+        this.arrayValue = this.value;
+      } else {
+        this.arrayValue = [];
       }
-      return inspect(this.value, { maxArrayLength: 50 });
     }
   },
   mounted() {
-    Prism.highlightElement(this.$refs.code);
+    this.initializeArray();
+  },
+  watch: {
+    value: {
+      handler(newValue) {
+        this.initializeArray();
+      },
+      deep: true,
+      immediate: true
+    }
   }
 });

package/frontend/src/document/document.js

@@ -3,7 +3,7 @@
 const api = require('../api');
 const mpath = require('mpath');
 const template = require('./document.html');
-const vanillatoast = require('vanillatoasts');
+const vanillatoasts = require('vanillatoasts');
 
 const appendCSS = require('../appendCSS');
 
@@ -32,20 +32,24 @@ module.exports = app => app.component('document', {
     window.pageState = this;
     // Store query parameters from the route (preserved from models page)
     this.previousQuery = Object.assign({}, this.$route.query);
-    const { doc, schemaPaths, virtualPaths } = await api.Model.getDocument({ model: this.model, documentId: this.documentId });
-    window.doc = doc;
-    this.document = doc;
-    this.schemaPaths = Object.keys(schemaPaths).sort((k1, k2) => {
-      if (k1 === '_id' && k2 !== '_id') {
-        return -1;
-      }
-      if (k1 !== '_id' && k2 === '_id') {
-        return 1;
-      }
-      return 0;
-    }).map(key => schemaPaths[key]);
-    this.virtualPaths = virtualPaths || [];
-    this.status = 'loaded';
+    try {
+      const { doc, schemaPaths, virtualPaths } = await api.Model.getDocument({ model: this.model, documentId: this.documentId });
+      window.doc = doc;
+      this.document = doc;
+      this.schemaPaths = Object.keys(schemaPaths).sort((k1, k2) => {
+        if (k1 === '_id' && k2 !== '_id') {
+          return -1;
+        }
+        if (k1 !== '_id' && k2 === '_id') {
+          return 1;
+        }
+        return 0;
+      }).map(key => schemaPaths[key]);
+      this.virtualPaths = virtualPaths || [];
+      this.status = 'loaded';
+    } finally {
+      this.status = 'loaded';
+    }
   },
   computed: {
     canManipulate() {
@@ -79,6 +83,13 @@ module.exports = app => app.component('document', {
       this.changes = {};
       this.editting = false;
       this.shouldShowConfirmModal = false;
+      vanillatoasts.create({
+        title: 'Document saved!',
+        type: 'success',
+        timeout: 3000,
+        icon: 'images/success.png',
+        positionClass: 'bottomRight'
+      });
     },
     async remove() {
       const { doc } = await api.Model.deleteDocument({
@@ -88,10 +99,11 @@ module.exports = app => app.component('document', {
       if (doc.acknowledged) {
         this.editting = false;
         this.document = {};
-        vanillatoast.create({
-          title: 'Document Deleted!',
+        vanillatoasts.create({
+          title: 'Document deleted!',
           type: 'success',
           timeout: 3000,
+          icon: 'images/success.png',
           positionClass: 'bottomRight'
         });
         this.$router.push({
@@ -112,12 +124,12 @@ module.exports = app => app.component('document', {
       });
       this.document = doc;
 
-      // Show success message
-      vanillatoast.create({
-        title: 'Field Added!',
+      vanillatoasts.create({
+        title: 'Field added!',
         text: `Field "${fieldData.name}" has been added to the document`,
         type: 'success',
         timeout: 3000,
+        icon: 'images/success.png',
         positionClass: 'bottomRight'
       });
     },

package/frontend/src/document-details/document-details.html

@@ -52,9 +52,9 @@
 
   <!-- Fields View -->
   <div v-if="viewMode === 'fields'">
-    <!-- Schema Paths -->
+    <!-- Matched Schema Paths (shown first when searching) -->
     <div
-      v-for="path in filteredSchemaPaths"
+      v-for="path in matchedSchemaPaths"
       :key="path.path || path"
       class="value"
     >
@@ -64,25 +64,74 @@
         :schemaPaths="schemaPaths"
         :editting="editting"
         :changes="changes"
-        :highlight="isSchemaPathMatched(path)"
+        :highlight="true"
         :invalid="invalid"></document-property>
     </div>
 
-    <!-- Virtual Fields -->
+    <!-- Matched Virtual Fields (shown after matched schema paths when searching) -->
     <div
-      v-for="path in filteredVirtuals"
+      v-for="path in matchedVirtuals"
       :key="path.name"
-      class="border rounded-lg mb-2 transition-all duration-200 ease-in-out"
-      :class="[
-        isVirtualMatched(path)
-          ? 'border-amber-400 ring-2 ring-amber-200 ring-offset-1'
-          : 'border-gray-200'
-      ]"
+      class="border border-gray-200 rounded-lg mb-2 transition-all duration-200 ease-in-out mt-4"
     >
     <!-- Virtual Field Header (Always Visible) -->
     <div
       @click="toggleVirtualField(path.name)"
-      class="p-3 bg-slate-50 hover:bg-slate-100 cursor-pointer flex items-center justify-between border-b border-gray-200"
+      class="p-3 bg-amber-100 hover:bg-amber-200 cursor-pointer flex items-center justify-between border-b border-gray-200 transition-colors duration-200 ease-in-out"
+    >
+      <div class="flex items-center">
+        <svg
+          :class="isVirtualFieldCollapsed(path.name) ? 'rotate-0' : 'rotate-90'"
+          class="w-4 h-4 text-gray-500 mr-2 transition-transform duration-200"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
+        </svg>
+        <span class="font-medium text-gray-900">{{path.name}}</span>
+        <span v-if="path.isVirtual" class="ml-2 text-sm text-purple-600">(virtual - {{getVirtualFieldType(path)}})</span>
+        <span v-else class="ml-2 text-sm text-blue-600">(user-added - {{getVirtualFieldType(path)}})</span>
+      </div>
+    </div>
+
+    <!-- Virtual Field Content (Collapsible) -->
+    <div v-if="!isVirtualFieldCollapsed(path.name)" class="p-3">
+      <div v-if="path.value == null" class="text-sky-800">
+        {{'' + path.value}}
+      </div>
+      <div v-else>
+        {{path.value}}
+      </div>
+    </div>
+    </div>
+
+    <!-- Unmatched Schema Paths (shown after matched items when searching, or all when not searching) -->
+    <div
+      v-for="path in unmatchedSchemaPaths"
+      :key="path.path || path"
+      class="value"
+    >
+      <document-property
+        :path="path"
+        :document="document"
+        :schemaPaths="schemaPaths"
+        :editting="editting"
+        :changes="changes"
+        :highlight="false"
+        :invalid="invalid"></document-property>
+    </div>
+
+    <!-- Unmatched Virtual Fields (shown last) -->
+    <div
+      v-for="path in unmatchedVirtuals"
+      :key="path.name"
+      class="border border-gray-200 rounded-lg mb-2 transition-all duration-200 ease-in-out"
+    >
+    <!-- Virtual Field Header (Always Visible) -->
+    <div
+      @click="toggleVirtualField(path.name)"
+      class="p-3 bg-gray-50 hover:bg-gray-100 cursor-pointer flex items-center justify-between border-b border-gray-200 transition-colors duration-200 ease-in-out"
     >
       <div class="flex items-center">
         <svg

package/frontend/src/document-details/document-details.js

@@ -145,6 +145,20 @@ module.exports = app => app.component('document-details', {
 
       return matches.concat(nonMatches);
     },
+    matchedSchemaPaths() {
+      if (!this.searchQuery.trim()) {
+        return [];
+      }
+      const query = this.searchQuery.toLowerCase();
+      return this.typeFilteredSchemaPaths.filter(path => path.path.toLowerCase().includes(query));
+    },
+    unmatchedSchemaPaths() {
+      if (!this.searchQuery.trim()) {
+        return this.typeFilteredSchemaPaths;
+      }
+      const query = this.searchQuery.toLowerCase();
+      return this.typeFilteredSchemaPaths.filter(path => !path.path.toLowerCase().includes(query));
+    },
     typeFilteredVirtuals() {
       let virtuals = this.virtuals;
 
@@ -178,6 +192,20 @@ module.exports = app => app.component('document-details', {
 
       return matches.concat(nonMatches);
     },
+    matchedVirtuals() {
+      if (!this.searchQuery.trim()) {
+        return [];
+      }
+      const query = this.searchQuery.toLowerCase();
+      return this.typeFilteredVirtuals.filter(virtual => virtual.name.toLowerCase().includes(query));
+    },
+    unmatchedVirtuals() {
+      if (!this.searchQuery.trim()) {
+        return this.typeFilteredVirtuals;
+      }
+      const query = this.searchQuery.toLowerCase();
+      return this.typeFilteredVirtuals.filter(virtual => !virtual.name.toLowerCase().includes(query));
+    },
     schemaSearchMatchSet() {
       if (!this.searchQuery.trim()) {
         return new Set();
@@ -338,7 +366,7 @@ module.exports = app => app.component('document-details', {
 
       try {
         const fieldData = {
-          name: this.getTransformedFieldName(),
+          name: this.fieldData.name,
           type: this.fieldData.type,
           value: this.parseFieldValue(this.fieldData.value, this.fieldData.type)
         };
@@ -384,18 +412,6 @@ module.exports = app => app.component('document-details', {
         this.fieldValueEditor = null;
       }
     },
-    toSnakeCase(str) {
-      return str
-        .trim()
-        .replace(/\s+/g, '_') // Replace spaces with underscores
-        .replace(/[^a-zA-Z0-9_$]/g, '') // Remove invalid characters
-        .replace(/^[0-9]/, '_$&') // Prefix numbers with underscore
-        .toLowerCase();
-    },
-    getTransformedFieldName() {
-      if (!this.fieldData.name) return '';
-      return this.toSnakeCase(this.fieldData.name.trim());
-    },
     getVirtualFieldType(virtual) {
       const value = virtual.value;
       if (value === null || value === undefined) {

package/frontend/src/document-details/document-property/document-property.html

@@ -2,8 +2,8 @@
   <!-- Collapsible Header -->
   <div
     @click="toggleCollapse"
-    class="p-3 hover:bg-gray-100 cursor-pointer flex items-center justify-between border-b border-gray-200 transition-colors duration-200 ease-in-out"
-    :class="{ 'bg-amber-100': highlight, 'bg-gray-50': !highlight }"
+    class="p-3 cursor-pointer flex items-center justify-between border-b border-gray-200 transition-colors duration-200 ease-in-out"
+    :class="{ 'bg-amber-100 hover:bg-amber-200': highlight, 'bg-gray-50 hover:bg-gray-100': !highlight }"
   >
     <div class="flex items-center" >
       <svg
@@ -81,7 +81,43 @@
     </div>
     <div v-else>
       <!-- Show truncated or full value based on needsTruncation and isValueExpanded -->
-      <div v-if="needsTruncation && !isValueExpanded" class="relative">
+      <!-- Special handling for truncated arrays -->
+      <div v-if="isArray && shouldShowTruncated" class="w-full">
+        <div class="mt-2">
+          <div
+            v-for="(item, index) in truncatedArrayItems"
+            :key="index"
+            class="mb-1.5 py-2.5 px-3 pl-4 bg-transparent border-l-[3px] border-l-blue-500 rounded-none transition-all duration-200 cursor-pointer relative hover:bg-slate-50 hover:border-l-blue-600">
+            <div class="absolute -left-2 top-1/2 -translate-y-1/2 w-5 h-5 bg-blue-500 text-white rounded-full flex items-center justify-center text-[10px] font-semibold font-mono z-10 hover:bg-blue-600">{{ index }}</div>
+            <div v-if="arrayUtils.isObjectItem(item)" class="flex flex-col gap-1 mt-1 px-2">
+              <div
+                v-for="key in arrayUtils.getItemKeys(item)"
+                :key="key"
+                class="flex items-start gap-2 text-xs font-mono">
+                <span class="font-semibold text-gray-600 flex-shrink-0 min-w-[80px]">{{ key }}:</span>
+                <span class="text-gray-800 break-words whitespace-pre-wrap flex-1">{{ arrayUtils.formatItemValue(item, key) }}</span>
+              </div>
+            </div>
+            <div v-else class="text-xs py-1.5 px-2 font-mono text-gray-800 break-words whitespace-pre-wrap mt-1">{{ arrayUtils.formatValue(item) }}</div>
+          </div>
+          <div class="mb-1.5 py-2.5 px-3 pl-4 bg-transparent border-none border-l-[3px] border-l-blue-500 rounded-none transition-all duration-200 cursor-pointer relative opacity-70 hover:opacity-100">
+            <div class="text-xs py-1.5 px-2 font-mono text-gray-500 italic break-words whitespace-pre-wrap mt-1">
+              ... and {{ remainingArrayCount }} more item{{ remainingArrayCount !== 1 ? 's' : '' }}
+            </div>
+          </div>
+        </div>
+        <button
+          @click="toggleValueExpansion"
+          class="mt-2 text-blue-600 hover:text-blue-800 text-sm font-medium flex items-center gap-1 transform transition-all duration-200 ease-in-out hover:translate-x-0.5"
+        >
+          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
+          </svg>
+          Show all {{ arrayValue.length }} items
+        </button>
+      </div>
+      <!-- Non-array truncated view -->
+      <div v-else-if="shouldShowTruncated && !isArray" class="relative">
         <div class="text-gray-700 whitespace-pre-wrap break-words font-mono text-sm">{{truncatedString}}</div>
         <button
           @click="toggleValueExpansion"
@@ -93,6 +129,7 @@
           Show more ({{valueAsString.length}} characters)
         </button>
       </div>
+      <!-- Expanded view -->
       <div v-else-if="needsTruncation && isValueExpanded" class="relative">
         <component :is="getComponentForPath(path)" :value="getValueForPath(path.path)"></component>
         <button
@@ -105,6 +142,7 @@
           Show less
         </button>
       </div>
+      <!-- Full view (no truncation needed) -->
       <div v-else>
         <component :is="getComponentForPath(path)" :value="getValueForPath(path.path)"></component>
       </div>

package/frontend/src/document-details/document-property/document-property.js

@@ -3,6 +3,7 @@
 'use strict';
 
 const mpath = require('mpath');
+const { inspect } = require('node-inspect-extracted');
 const template = require('./document-property.html');
 
 const appendCSS = require('../../appendCSS');
@@ -38,10 +39,32 @@ module.exports = app => app.component('document-property', {
       }
       return String(value);
     },
+    _arrayValueData() {
+      const value = this.getValueForPath(this.path.path);
+      return {
+        value: Array.isArray(value) ? value : [],
+        isArray: Array.isArray(value)
+      };
+    },
+    isArray() {
+      return this._arrayValueData.isArray;
+    },
+    arrayValue() {
+      return this._arrayValueData.value;
+    },
     needsTruncation() {
-      // Truncate if value is longer than 200 characters
+      // For arrays, check if it has more than 3 items (regardless of expansion state)
+      if (this.isArray) {
+        const arr = this.arrayValue;
+        return arr && arr.length > 3;
+      }
+      // For other types, truncate if value is longer than 200 characters
       return this.valueAsString.length > 200;
     },
+    shouldShowTruncated() {
+      // For other types, show truncated if needs truncation and not expanded
+      return this.needsTruncation && !this.isValueExpanded;
+    },
     displayValue() {
       if (!this.needsTruncation || this.isValueExpanded) {
         return this.getValueForPath(this.path.path);
@@ -51,9 +74,24 @@ module.exports = app => app.component('document-property', {
     },
     truncatedString() {
       if (this.needsTruncation && !this.isValueExpanded) {
-        return this.valueAsString.substring(0, 200) + '...';
+        // Arrays are handled in template, so this is for non-arrays
+        if (!this.isArray) {
+          return this.valueAsString.substring(0, 200) + '...';
+        }
       }
       return this.valueAsString;
+    },
+    truncatedArrayItems() {
+      if (this.isArray && this.needsTruncation && !this.isValueExpanded) {
+        return this.arrayValue.slice(0, 2);
+      }
+      return [];
+    },
+    remainingArrayCount() {
+      if (this.isArray && this.needsTruncation && !this.isValueExpanded) {
+        return this.arrayValue.length - 2;
+      }
+      return 0;
     }
   },
   methods: {
@@ -79,6 +117,9 @@ module.exports = app => app.component('document-property', {
       if (path.instance === 'Embedded') {
         return 'edit-subdocument';
       }
+      if (path.instance === 'Mixed') {
+        return 'edit-subdocument';
+      }
       if (path.instance === 'Boolean') {
         return 'edit-boolean';
       }
@@ -91,6 +132,10 @@ module.exports = app => app.component('document-property', {
           props.enumValues = path.enum;
         }
       }
+      if (path.instance === 'Array') {
+        props.path = path;
+        props.schemaPaths = this.schemaPaths;
+      }
       return props;
     },
     getValueForPath(path) {

package/frontend/src/edit-array/edit-array.html

@@ -1,5 +1,8 @@
-<div class="edit-array">
+<div class="w-full">
+  <!-- CodeMirror editor for the entire array -->
   <textarea
     ref="arrayEditor"
-    class="w-full border border-gray-300 p-1 h-[300px]"></textarea>
+    class="w-full border border-gray-300 p-2 font-mono"
+    :style="{ minHeight: '300px' }">
+  </textarea>
 </div>

package/frontend/src/edit-array/edit-array.js

@@ -10,43 +10,99 @@ const ObjectId = new Proxy(BSON.ObjectId, {
   }
 });
 
-const appendCSS = require('../appendCSS');
-appendCSS(require('./edit-array.css'));
 
 module.exports = app => app.component('edit-array', {
   template: template,
   props: ['value'],
-  data: () => ({ currentValue: -1 }),
-  mounted() {
-    this.currentValue = this.value == null
-      ? '' + this.value
-      : JSON.stringify(this.value, null, '  ').trim();
-    this.$refs.arrayEditor.value = this.currentValue;
-    this.editor = CodeMirror.fromTextArea(this.$refs.arrayEditor, {
-      mode: 'javascript',
-      lineNumbers: true
-    });
-    this.editor.on('change', ev => {
-      this.currentValue = this.editor.getValue();
-    });
+  data() {
+    return {
+      arrayValue: [],
+      arrayEditor: null
+    };
   },
-  watch: {
-    currentValue(newValue, oldValue) {
-      // Hacky way of skipping initial trigger because `immediate: false` doesn't work in Vue 3
-      if (oldValue === -1) {
+  methods: {
+    initializeArray() {
+      if (this.value == null) {
+        this.arrayValue = [];
+      } else if (Array.isArray(this.value)) {
+        this.arrayValue = JSON.parse(JSON.stringify(this.value));
+      } else {
+        this.arrayValue = [];
+      }
+      
+      // Update CodeMirror editor if it exists
+      this.$nextTick(() => {
+        if (this.arrayEditor) {
+          const arrayStr = JSON.stringify(this.arrayValue, null, 2);
+          this.arrayEditor.setValue(arrayStr);
+        }
+      });
+    },
+    initializeArrayEditor() {
+      this.$nextTick(() => {
+        const textareaRef = this.$refs.arrayEditor;
+        const textarea = Array.isArray(textareaRef) ? textareaRef[0] : textareaRef;
+        if (textarea && !this.arrayEditor) {
+          const arrayStr = JSON.stringify(this.arrayValue, null, 2);
+          textarea.value = arrayStr;
+          this.arrayEditor = CodeMirror.fromTextArea(textarea, {
+            mode: 'javascript',
+            lineNumbers: true
+          });
+          this.arrayEditor.on('change', () => {
+            this.updateArrayFromEditor();
+          });
+        }
+      });
+    },
+    updateArrayFromEditor() {
+      if (!this.arrayEditor) {
         return;
       }
       try {
-        const array = eval(`(${this.currentValue})`);
-        this.$emit('input', array);
+        const value = this.arrayEditor.getValue();
+        if (value.trim() === '') {
+          this.arrayValue = [];
+        } else {
+          this.arrayValue = JSON.parse(value);
+        }
+        this.emitUpdate();
+      } catch (err) {
+        // Invalid JSON, don't update
+      }
+    },
+    emitUpdate() {
+      try {
+        this.$emit('input', this.arrayValue);
       } catch (err) {
         this.$emit('error', err);
       }
     }
   },
+  mounted() {
+    this.initializeArray();
+    this.initializeArrayEditor();
+  },
   beforeDestroy() {
-    if (this.editor) {
-      this.editor.toTextArea();
+    if (this.arrayEditor) {
+      this.arrayEditor.toTextArea();
+    }
+  },
+  watch: {
+    value: {
+      handler(newValue, oldValue) {
+        // Initialize array when value prop changes
+        this.initializeArray();
+        // Update array editor if it exists
+        if (this.arrayEditor) {
+          this.$nextTick(() => {
+            const arrayStr = JSON.stringify(this.arrayValue, null, 2);
+            this.arrayEditor.setValue(arrayStr);
+          });
+        }
+      },
+      deep: true,
+      immediate: true
     }
   },
   emits: ['input', 'error']

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

@@ -2,6 +2,7 @@
 
 const api = require('../api');
 const template = require('./export-query-results.html');
+const vanillatoasts = require('vanillatoasts');
 
 const appendCSS = require('../appendCSS');
 
@@ -30,7 +31,13 @@ module.exports = app => app.component('export-query-results', {
         params.searchText = this.searchText;
       }
       await api.Model.exportQueryResults(params);
-
+      vanillatoasts.create({
+        title: 'Export completed!',
+        type: 'success',
+        timeout: 3000,
+        icon: 'images/success.png',
+        positionClass: 'bottomRight'
+      });
       this.$emit('done');
     }
   }

package/frontend/src/index.js

@@ -9,6 +9,7 @@ console.log(`Mongoose Studio Version ${version}`);
 
 const api = require('./api');
 const format = require('./format');
+const arrayUtils = require('./array-utils');
 const mothership = require('./mothership');
 const { routes } = require('./routes');
 const vanillatoasts = require('vanillatoasts');
@@ -149,7 +150,7 @@ router.beforeEach((to, from, next) => {
   }
 });
 
-app.config.globalProperties = { format };
+app.config.globalProperties = { format, arrayUtils };
 app.use(router);
 
 app.mount('#content');

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

@@ -1,3 +1,3 @@
 <div class="list-array">
-  <pre><code ref="code" class="language-javascript" v-text="displayValue"></code></pre>
+  <pre class="max-h-[6.5em] max-w-[30em]"><code ref="code" class="language-javascript" v-text="displayValue"></code></pre>
 </div>

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

@@ -2,8 +2,6 @@
 
 const template = require('./list-array.html');
 
-require('../appendCSS')(require('./list-array.css'));
-
 module.exports = app => app.component('list-array', {
   template: template,
   props: ['value'],