@mongoosejs/studio 0.0.130 → 0.0.133

package/frontend/public/tw.css

@@ -1399,6 +1399,11 @@ video {
   border-style: none;
 }
 
+.border-amber-400 {
+  --tw-border-opacity: 1;
+  border-color: rgb(251 191 36 / var(--tw-border-opacity));
+}
+
 .border-blue-300 {
   --tw-border-opacity: 1;
   border-color: rgb(147 197 253 / var(--tw-border-opacity));
@@ -1433,6 +1438,11 @@ video {
   border-color: rgb(63 83 255 / var(--tw-border-opacity));
 }
 
+.bg-amber-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 243 199 / var(--tw-bg-opacity));
+}
+
 .bg-black {
   --tw-bg-opacity: 1;
   background-color: rgb(0 0 0 / var(--tw-bg-opacity));
@@ -2044,6 +2054,11 @@ video {
   --tw-ring-inset: inset;
 }
 
+.ring-amber-200 {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(253 230 138 / var(--tw-ring-opacity));
+}
+
 .ring-black {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(0 0 0 / var(--tw-ring-opacity));
@@ -2074,6 +2089,10 @@ video {
   --tw-ring-opacity: 0.05;
 }
 
+.ring-offset-1 {
+  --tw-ring-offset-width: 1px;
+}
+
 .filter {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
@@ -2141,6 +2160,16 @@ video {
   --tw-ring-color: rgb(0 168 165 / var(--tw-ring-opacity));
 }
 
+.hover\:translate-x-0:hover {
+  --tw-translate-x: 0px;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.hover\:translate-x-0\.5:hover {
+  --tw-translate-x: 0.125rem;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .hover\:border-gray-300:hover {
   --tw-border-opacity: 1;
   border-color: rgb(209 213 219 / var(--tw-border-opacity));

package/frontend/src/detail-default/detail-default.html

@@ -1,3 +1,3 @@
-<div>
-  {{value}}
+<div class="w-full">
+  <pre class="w-full whitespace-pre-wrap break-words font-mono text-sm text-gray-700 m-0">{{displayValue}}</pre>
 </div>

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

@@ -1,7 +1,6 @@
 'use strict';
 
 const template = require('./detail-default.html');
-
 module.exports = app => app.component('detail-default', {
   template: template,
   props: ['value'],
@@ -13,7 +12,17 @@ module.exports = app => app.component('detail-default', {
       if (this.value === undefined) {
         return 'undefined';
       }
-      return this.value;
+      if (typeof this.value === 'string') {
+        return this.value;
+      }
+      if (typeof this.value === 'number' || typeof this.value === 'boolean' || typeof this.value === 'bigint') {
+        return String(this.value);
+      }
+      try {
+        return JSON.stringify(this.value, null, 2);
+      } catch (err) {
+        return String(this.value);
+      }
     }
   }
 });

package/frontend/src/document/confirm-delete/confirm-delete.html

@@ -1,18 +1,18 @@
 <div>
-    <h2>
-        Are you sure you want to delete the following document?
-    </h2>
-    <pre class="max-h-[50vh] overflow-auto"><code ref="code" class="language-javascript" v-text="displayValue"></code></pre>
-    <div class="flex gap-2 mt-2">
-    <async-button
-        class="rounded-md bg-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"
-        @click="startDelete">
-        Confirm
-    </async-button>
-    <button 
-        class="rounded-md bg-gray-200 px-2.5 py-1.5 text-sm font-semibold text-black shadow-sm hover:bg-gray-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-300"
-        @click="closeDelete">
-        Cancel
-    </button>
-    </div>
-</div>
+  <h2>
+      Are you sure you want to delete the following document?
+  </h2>
+  <pre class="max-h-[50vh] overflow-auto"><code ref="code" class="language-javascript" v-text="displayValue"></code></pre>
+  <div class="flex gap-2 mt-2">
+  <async-button
+      class="rounded-md bg-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"
+      @click="startDelete">
+      Confirm
+  </async-button>
+  <button
+      class="rounded-md bg-gray-200 px-2.5 py-1.5 text-sm font-semibold text-black shadow-sm hover:bg-gray-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-300"
+      @click="closeDelete">
+      Cancel
+  </button>
+  </div>
+</div>

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

@@ -21,10 +21,10 @@
       </div>
 
       <!-- Data Type Filter -->
-      <div class="relative">
+      <div class="relative hidden md:block">
         <select
           v-model="selectedType"
-          class="hidden md:block px-4 py-2 pr-8 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white min-w-[140px] appearance-none"
+          class="px-4 py-2 pr-8 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white min-w-[140px] appearance-none"
         >
           <option value="">All Types</option>
           <option v-for="type in availableTypes" :key="type" :value="type">
@@ -41,12 +41,11 @@
       <!-- Add Field Button -->
       <button
         @click="openAddFieldModal"
-        class="hidden md:block px-4 py-2 text-sm font-medium text-white bg-green-600 hover:bg-green-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 flex items-center gap-2"
+        class="hidden md:flex px-4 py-2 text-sm font-medium text-white bg-green-600 hover:bg-green-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 items-center gap-2"
       >
         <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="M12 4v16m8-8H4"></path>
-        </svg>
-        Add Field
+        </svg> Add Field
       </button>
     </div>
   </div>
@@ -54,18 +53,32 @@
   <!-- Fields View -->
   <div v-if="viewMode === 'fields'">
     <!-- Schema Paths -->
-    <div v-for="path in filteredSchemaPaths" :key="path" class="value">
+    <div
+      v-for="path in filteredSchemaPaths"
+      :key="path.path || path"
+      class="value"
+    >
       <document-property
         :path="path"
         :document="document"
         :schemaPaths="schemaPaths"
         :editting="editting"
         :changes="changes"
+        :highlight="isSchemaPathMatched(path)"
         :invalid="invalid"></document-property>
     </div>
 
     <!-- Virtual Fields -->
-    <div v-for="path in filteredVirtuals" class="border border-gray-200 rounded-lg mb-2">
+    <div
+      v-for="path in filteredVirtuals"
+      :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'
+      ]"
+    >
     <!-- Virtual Field Header (Always Visible) -->
     <div
       @click="toggleVirtualField(path.name)"
@@ -99,7 +112,7 @@
   </div>
 
     <!-- No Results Message -->
-    <div v-if="searchQuery && filteredSchemaPaths.length === 0 && filteredVirtuals.length === 0" class="text-center py-8 text-gray-500">
+    <div v-if="searchQuery.trim() && !hasSearchMatches" class="text-center py-8 text-gray-500">
       <svg class="w-12 h-12 mx-auto mb-4 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.172 16.172a4 4 0 015.656 0M9 12h6m-6-4h6m2 5.291A7.962 7.962 0 0112 15c-2.34 0-4.29-1.009-5.824-2.709M15 6.291A7.962 7.962 0 0012 5c-2.34 0-4.29 1.009-5.824 2.709"></path>
       </svg>

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

@@ -115,38 +115,39 @@ module.exports = app => app.component('document-details', {
     shouldUseDatePicker() {
       return this.fieldData.type === 'Date';
     },
-    filteredSchemaPaths() {
+    typeFilteredSchemaPaths() {
       let paths = this.schemaPaths || [];
 
-      // Filter by search query
-      if (this.searchQuery.trim()) {
-        const query = this.searchQuery.toLowerCase();
-        paths = paths.filter(path =>
-          path.path.toLowerCase().includes(query)
-        );
-      }
-
-      // Filter by data type
       if (this.selectedType) {
-        paths = paths.filter(path =>
-          path.instance === this.selectedType
-        );
+        paths = paths.filter(path => path.instance === this.selectedType);
       }
 
       return paths;
     },
-    filteredVirtuals() {
-      let virtuals = this.virtuals;
+    filteredSchemaPaths() {
+      const paths = this.typeFilteredSchemaPaths.slice();
 
-      // Filter by search query
-      if (this.searchQuery.trim()) {
-        const query = this.searchQuery.toLowerCase();
-        virtuals = virtuals.filter(virtual =>
-          virtual.name.toLowerCase().includes(query)
-        );
+      if (!this.searchQuery.trim()) {
+        return paths;
       }
 
-      // Filter by data type
+      const query = this.searchQuery.toLowerCase();
+      const matches = [];
+      const nonMatches = [];
+
+      paths.forEach(path => {
+        if (path.path.toLowerCase().includes(query)) {
+          matches.push(path);
+        } else {
+          nonMatches.push(path);
+        }
+      });
+
+      return matches.concat(nonMatches);
+    },
+    typeFilteredVirtuals() {
+      let virtuals = this.virtuals;
+
       if (this.selectedType) {
         virtuals = virtuals.filter(virtual => {
           const virtualType = this.getVirtualFieldType(virtual);
@@ -156,6 +157,58 @@ module.exports = app => app.component('document-details', {
 
       return virtuals;
     },
+    filteredVirtuals() {
+      const virtuals = this.typeFilteredVirtuals.slice();
+
+      if (!this.searchQuery.trim()) {
+        return virtuals;
+      }
+
+      const query = this.searchQuery.toLowerCase();
+      const matches = [];
+      const nonMatches = [];
+
+      virtuals.forEach(virtual => {
+        if (virtual.name.toLowerCase().includes(query)) {
+          matches.push(virtual);
+        } else {
+          nonMatches.push(virtual);
+        }
+      });
+
+      return matches.concat(nonMatches);
+    },
+    schemaSearchMatchSet() {
+      if (!this.searchQuery.trim()) {
+        return new Set();
+      }
+
+      const query = this.searchQuery.toLowerCase();
+      return new Set(
+        this.typeFilteredSchemaPaths
+          .filter(path => path.path.toLowerCase().includes(query))
+          .map(path => path.path)
+      );
+    },
+    virtualSearchMatchSet() {
+      if (!this.searchQuery.trim()) {
+        return new Set();
+      }
+
+      const query = this.searchQuery.toLowerCase();
+      return new Set(
+        this.typeFilteredVirtuals
+          .filter(virtual => virtual.name.toLowerCase().includes(query))
+          .map(virtual => virtual.name)
+      );
+    },
+    hasSearchMatches() {
+      if (!this.searchQuery.trim()) {
+        return true;
+      }
+
+      return this.schemaSearchMatchSet.size > 0 || this.virtualSearchMatchSet.size > 0;
+    },
     formattedJson() {
       if (!this.document) {
         return '{}';
@@ -171,6 +224,20 @@ module.exports = app => app.component('document-details', {
         this.collapsedVirtuals.add(fieldName);
       }
     },
+    isSchemaPathMatched(path) {
+      if (!path) {
+        return false;
+      }
+
+      return this.schemaSearchMatchSet.has(path.path);
+    },
+    isVirtualMatched(virtual) {
+      if (!virtual) {
+        return false;
+      }
+
+      return this.virtualSearchMatchSet.has(virtual.name);
+    },
     isVirtualFieldCollapsed(fieldName) {
       return this.collapsedVirtuals.has(fieldName);
     },

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

@@ -21,18 +21,3 @@
     float: right;
     margin-top: -7px;
   }
-
-  .truncated-value-container,
-  .expanded-value-container {
-    position: relative;
-  }
-
-  .truncated-value-container button,
-  .expanded-value-container button {
-    transition: all 0.2s ease;
-  }
-
-  .truncated-value-container button:hover,
-  .expanded-value-container button:hover {
-    transform: translateX(2px);
-  }

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

@@ -1,15 +1,16 @@
 <div class="border border-gray-200 rounded-lg mb-2">
   <!-- Collapsible Header -->
-  <div 
+  <div
     @click="toggleCollapse"
-    class="p-3 bg-gray-50 hover:bg-gray-100 cursor-pointer flex items-center justify-between border-b border-gray-200"
+    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 }"
   >
-    <div class="flex items-center">
-      <svg 
+    <div class="flex items-center" >
+      <svg
         :class="isCollapsed ? 'rotate-0' : 'rotate-90'"
         class="w-4 h-4 text-gray-500 mr-2 transition-transform duration-200"
-        fill="none" 
-        stroke="currentColor" 
+        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>
@@ -27,7 +28,7 @@
       </router-link>
     </div>
   </div>
-  
+
   <!-- Collapsible Content -->
   <div v-if="!isCollapsed" class="p-3">
     <!-- Date Type Selector (when editing dates) -->
@@ -53,7 +54,7 @@
         </div>
       </div>
     </div>
-    
+
     <!-- Field Content -->
     <div v-if="editting && path.path !== '_id'">
       <component
@@ -67,11 +68,11 @@
     </div>
     <div v-else>
       <!-- Show truncated or full value based on needsTruncation and isValueExpanded -->
-      <div v-if="needsTruncation && !isValueExpanded" class="truncated-value-container">
+      <div v-if="needsTruncation && !isValueExpanded" class="relative">
         <div class="text-gray-700 whitespace-pre-wrap break-words font-mono text-sm">{{truncatedString}}</div>
-        <button 
+        <button
           @click="toggleValueExpansion"
-          class="mt-2 text-blue-600 hover:text-blue-800 text-sm font-medium flex items-center gap-1"
+          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>
@@ -79,11 +80,11 @@
           Show more ({{valueAsString.length}} characters)
         </button>
       </div>
-      <div v-else-if="needsTruncation && isValueExpanded" class="expanded-value-container">
+      <div v-else-if="needsTruncation && isValueExpanded" class="relative">
         <component :is="getComponentForPath(path)" :value="getValueForPath(path.path)"></component>
-        <button 
+        <button
           @click="toggleValueExpansion"
-          class="mt-2 text-blue-600 hover:text-blue-800 text-sm font-medium flex items-center gap-1"
+          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 rotate-180" 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>

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

@@ -16,7 +16,7 @@ module.exports = app => app.component('document-property', {
       isValueExpanded: false // Track if the value is expanded
     };
   },
-  props: ['path', 'document', 'schemaPaths', 'editting', 'changes', 'invalid'],
+  props: ['path', 'document', 'schemaPaths', 'editting', 'changes', 'invalid', 'highlight'],
   computed: {
     valueAsString() {
       const value = this.getValueForPath(this.path.path);
@@ -94,4 +94,4 @@ module.exports = app => app.component('document-property', {
       this.isValueExpanded = !this.isValueExpanded;
     }
   }
-});
+});

package/frontend/src/modal/modal.css

@@ -96,3 +96,11 @@
 .modal-container .modal-exit:hover {
   background-color: #f1f5ff;
 }
+
+@media (max-width: 767px) {
+  .modal-container {
+    width: calc(100vw - 10px);
+    margin: 0;
+    margin-left: 5px;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mongoosejs/studio",
-  "version": "0.0.130",
+  "version": "0.0.133",
   "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": {

package/astra.js

@@ -1,159 +0,0 @@
-'use strict';
-
-const mongoose = require('mongoose');
-const { createAstraUri, driver, Vectorize } = require('@datastax/astra-mongoose');
-const express = require('express');
-const studio = require('./express');
-
-const app = express();
-
-const m = new mongoose.Mongoose();
-m.setDriver(driver);
-m.set('autoCreate', false);
-m.set('autoIndex', false);
-
-(function () {
-  const schema = new m.Schema({
-    email: {
-      type: String,
-      required: true,
-      unique: true
-    },
-    firstName: {
-      type: String,
-      required: true
-    },
-    lastName: {
-      type: String,
-      required: true
-    }
-  });
-
-  schema.virtual('displayName').get(function() {
-    return this.firstName + ' ' + this.lastName.slice(0, 1) + '.';
-  });
-
-  m.model('User', schema);
-})();
-
-(function () {
-  const schema = new m.Schema({
-    make: {
-      type: String,
-      required: true
-    },
-    model: {
-      type: String,
-      required: true
-    },
-    year: {
-      type: Number,
-      required: true,
-      validate: (v) => Number.isInteger(v) && v >= 1950
-    },
-    images: {
-      type: [String]
-    },
-    numReviews: {
-      type: Number,
-      required: true,
-      default: 0
-    },
-    averageReview: {
-      type: Number,
-      required: true,
-      default: 0
-    }
-  });
-
-  m.model('Vehicle', schema);
-})();
-
-(function () {
-  const schema = new m.Schema({
-    rating: {
-      type: Number,
-      required: true,
-      validate: (v) => Number.isInteger(v)
-    },
-    text: {
-      type: String,
-      required: true,
-      validate: (v) => v.length >= 30
-    },
-    userId: {
-      type: 'ObjectId',
-      required: true
-    },
-    vehicleId: {
-      type: 'ObjectId',
-      required: true
-    }
-  }, { timestamps: true });
-
-  schema.virtual('user', {
-    ref: 'User',
-    localField: 'userId',
-    foreignField: '_id',
-    justOne: true
-  });
-
-  schema.virtual('vehicle', {
-    ref: 'Vehicle',
-    localField: 'vehicleId',
-    foreignField: '_id',
-    justOne: true
-  });
-
-  schema.pre('save', async function updateVehicleRating() {
-    if (!this.isNew) {
-      return;
-    }
-    const vehicle = await mongoose.model('Vehicle').findById(this.vehicleId).orFail();
-    vehicle.numReviews += 1;
-    const vehicleReviews = await mongoose.model('Review').find({ vehicleId: this.vehicleId });
-    const reviewRatings = vehicleReviews.map((entry) => entry.rating);
-    reviewRatings.push(this.rating);
-    const average = calculateAverage(reviewRatings);
-    vehicle.averageReview = average;
-    await vehicle.save();
-  });
-
-  function calculateAverage(ratings) {
-    if (ratings.length === 0) {
-      return 0;
-    }
-    let sum = 0;
-    for (let i = 0; i < ratings.length; i++) {
-      sum += ratings[i];
-    }
-    const average = sum / ratings.length;
-    return average;
-  }
-
-  m.model('Review', schema);
-})();
-
-const uri = createAstraUri(
-  'https://fbced748-d6ed-40b1-ab9d-b618015a2c2c-us-east-2.apps.astra.datastax.com',
-  'AstraCS:kjSUArrrkLKrDlrMpUQOUYlw:50c9eda620df1099ad2dd77eb36e7755daaa48494acb158ff6de8df3deee40f6',
-  'reviews_dev2'
-);
-
-void async function main() {
-  await m.connect(uri);
-  const studioConnection = await mongoose.createConnection('mongodb://127.0.0.1:27017/mongoose_studio_test').asPromise();
-
-  app.use('/studio', await studio('/studio/api', m, { __build: true, apiKey: '123456789', studioConnection }));
-
-  await app.listen(7770);
-  console.log('Listening on port 7770');
-}();
-
-/*
-# Astra Notes
-
-1. Must use collections. Tables don't support `countDocuments()` or `estimatedDocumentCount()`.
-2. Collections don't let you store keys that start with '$', which is problematic for `$chart`. Ended up creating separate connection to store ChatMessages in MongoDB.
-3. `countDocuments()` with filter erroring out with more than 1000 documents caused trouble. Worked around it by converting `countDocuments()` to `find()` using Mongoose middleware.
-*/

package/valnotes.md

@@ -1,2 +0,0 @@
-1. Export to PNG causes charts to scroll down
-2. Chat summarization broken