@mongoosejs/studio 0.5.13 → 0.5.14

package/frontend/public/tw.css

@@ -664,6 +664,10 @@ video {
   bottom: 0px;
 }
 
+.-bottom-1 {
+  bottom: -0.25rem;
+}
+
 .-left-1 {
   left: -0.25rem;
 }
@@ -672,6 +676,10 @@ video {
   left: -0.75rem;
 }
 
+.-top-1 {
+  top: -0.25rem;
+}
+
 .bottom-0 {
   bottom: 0px;
 }
@@ -792,6 +800,10 @@ video {
   z-index: 10001;
 }
 
+.z-\[1000\] {
+  z-index: 1000;
+}
+
 .z-\[100\] {
   z-index: 100;
 }
@@ -1085,6 +1097,10 @@ video {
   height: 4rem;
 }
 
+.h-2 {
+  height: 0.5rem;
+}
+
 .h-20 {
   height: 5rem;
 }
@@ -1265,6 +1281,10 @@ video {
   width: 4rem;
 }
 
+.w-2 {
+  width: 0.5rem;
+}
+
 .w-20 {
   width: 5rem;
 }
@@ -1365,6 +1385,11 @@ video {
   width: 100%;
 }
 
+.w-max {
+  width: -moz-max-content;
+  width: max-content;
+}
+
 .min-w-0 {
   min-width: 0px;
 }
@@ -1441,6 +1466,10 @@ video {
   max-width: calc(100vw - 4rem);
 }
 
+.max-w-\[min\(20rem\2c calc\(100vw-1rem\)\)\] {
+  max-width: min(20rem,calc(100vw - 1rem));
+}
+
 .max-w-full {
   max-width: 100%;
 }
@@ -1555,6 +1584,11 @@ video {
   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));
 }
 
+.rotate-45 {
+  --tw-rotate: 45deg;
+  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));
+}
+
 .rotate-90 {
   --tw-rotate: 90deg;
   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));
@@ -1608,6 +1642,10 @@ video {
   resize: vertical;
 }
 
+.resize {
+  resize: both;
+}
+
 .snap-y {
   scroll-snap-type: y var(--tw-scroll-snap-strictness);
 }
@@ -1861,6 +1899,10 @@ video {
   text-overflow: ellipsis;
 }
 
+.whitespace-normal {
+  white-space: normal;
+}
+
 .whitespace-nowrap {
   white-space: nowrap;
 }
@@ -2184,6 +2226,11 @@ video {
   background-color: rgb(55 65 81 / var(--tw-bg-opacity));
 }
 
+.bg-gray-900 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(17 24 39 / var(--tw-bg-opacity));
+}
+
 .bg-green-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(220 252 231 / var(--tw-bg-opacity));
@@ -2747,6 +2794,10 @@ video {
   font-weight: 500;
 }
 
+.font-normal {
+  font-weight: 400;
+}
+
 .font-semibold {
   font-weight: 600;
 }
@@ -2763,6 +2814,10 @@ video {
   font-style: italic;
 }
 
+.leading-4 {
+  line-height: 1rem;
+}
+
 .leading-6 {
   line-height: 1.5rem;
 }
@@ -3216,6 +3271,11 @@ video {
   --tw-ring-color: rgb(176 32 43 / var(--tw-ring-opacity));
 }
 
+.ring-red-200 {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(254 202 202 / var(--tw-ring-opacity));
+}
+
 .ring-red-400 {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(248 113 113 / var(--tw-ring-opacity));
@@ -3837,6 +3897,10 @@ video {
   --tw-ring-offset-width: 2px;
 }
 
+.focus-visible\:rounded-md:focus-visible {
+  border-radius: 0.375rem;
+}
+
 .focus-visible\:opacity-100:focus-visible {
   opacity: 1;
 }
@@ -3853,6 +3917,10 @@ video {
   outline-offset: 2px;
 }
 
+.focus-visible\:outline-blue-600:focus-visible {
+  outline-color: #2563eb;
+}
+
 .focus-visible\:outline-edge-strong:focus-visible {
   outline-color: var(--color-edge-strong);
 }

package/frontend/src/api.js

@@ -229,7 +229,11 @@ if (window.MONGOOSE_STUDIO_CONFIG.isLambda) {
     getDocumentsStream: async function* getDocumentsStream(params) {
       const data = await client.post('', { action: 'Model.getDocuments', ...params }).then(res => res.data);
       yield { schemaPaths: data.schemaPaths, suggestedFields: data.suggestedFields };
-      yield { numDocs: data.numDocs };
+      if (data.numDocsError) {
+        yield { numDocsError: data.numDocsError };
+      } else {
+        yield { numDocs: data.numDocs };
+      }
       for (const doc of data.docs) {
         yield { document: doc };
       }

package/frontend/src/models/models.html

@@ -110,7 +110,18 @@
           >
           </document-search>
           <div>
-            <span v-if="numDocuments == null">Loading ...</span>
+            <tooltip
+              v-if="numDocumentsError"
+              :text="'Error counting documents: ' + numDocumentsError"
+            >
+              <span
+                class="inline-flex rounded-md bg-red-50 px-2 py-2 text-sm text-red-700 ring-1 ring-inset ring-red-200"
+                role="alert"
+              >
+                Count Error
+              </span>
+            </tooltip>
+            <span v-else-if="numDocuments == null">Loading...</span>
             <span v-else-if="typeof numDocuments === 'number'">{{documents.length}}/{{numDocuments === 1 ? numDocuments + ' document' : numDocuments + ' documents'}}</span>
           </div>
           <button
@@ -453,11 +464,16 @@
             </tbody>
           </table>
         </div>
-        <div v-if="outputType === 'table' && (loadingMore || (status === 'loading' && documents.length > 0))" class="flex items-center justify-center gap-2 py-3 text-sm text-content-tertiary border-t border-edge bg-surface">
-          <img src="images/loader.gif" alt="" class="h-5 w-5">
-          <span>Loading documents…</span>
+        <div
+          v-if="outputType === 'table' && (documentsError || loadingMore || (status === 'loading' && documents.length > 0))"
+          class="flex items-center justify-center gap-2 py-3 text-sm border-t"
+          :class="documentsError ? 'border-red-200 bg-red-50 text-red-700' : 'border-edge bg-surface text-content-tertiary'"
+          :role="documentsError ? 'alert' : null"
+        >
+          <img v-if="!documentsError" src="images/loader.gif" alt="" class="h-5 w-5">
+          <span>{{documentsError || 'Loading documents…'}}</span>
         </div>
-        <p v-if="outputType === 'table' && documents.length === 0 && status === 'loaded'" class="mt-2 text-sm text-content-tertiary px-1">
+        <p v-if="outputType === 'table' && documents.length === 0 && status === 'loaded' && !documentsError" class="mt-2 text-sm text-content-tertiary px-1">
           No documents to show. Use Projection in the menu to choose columns.
         </p>
       </div>
@@ -483,9 +499,14 @@
           <list-json :value="filterDocument(document)" :references="referenceMap">
           </list-json>
         </div>
-        <div v-if="outputType === 'json' && (loadingMore || (status === 'loading' && documents.length > 0))" class="flex items-center justify-center gap-2 py-3 text-sm text-content-tertiary">
-          <img src="images/loader.gif" alt="" class="h-5 w-5">
-          <span>Loading documents…</span>
+        <div
+          v-if="outputType === 'json' && (documentsError || loadingMore || (status === 'loading' && documents.length > 0))"
+          class="flex items-center justify-center gap-2 py-3 text-sm"
+          :class="documentsError ? 'rounded-md border border-red-200 bg-red-50 text-red-700' : 'text-content-tertiary'"
+          :role="documentsError ? 'alert' : null"
+        >
+          <img v-if="!documentsError" src="images/loader.gif" alt="" class="h-5 w-5">
+          <span>{{documentsError || 'Loading documents…'}}</span>
         </div>
       </div>
       <div v-else-if="outputType === 'map'" class="flex flex-col h-full">

package/frontend/src/models/models.js

@@ -151,6 +151,8 @@ module.exports = app => app.component('models', {
     filteredPaths: [],
     selectedPaths: [],
     numDocuments: null,
+    numDocumentsError: null,
+    documentsError: null,
     mongoDBIndexes: [],
     schemaIndexes: [],
     status: 'loading',
@@ -838,7 +840,8 @@ module.exports = app => app.component('models', {
       return filteredDoc;
     },
     async checkIfScrolledToBottom() {
-      if (this.status === 'loading' || this.loadedAllDocs) {
+      // Stop infinite scroll if the last load failed, otherwise we would retry the same failing request forever.
+      if (this.status === 'loading' || this.loadedAllDocs || this.documentsError) {
         return;
       }
       // Infinite scroll only applies to table/json views.
@@ -864,11 +867,20 @@ module.exports = app => app.component('models', {
       try {
         const skip = this.documents.length;
         const params = this.buildDocumentFetchParams({ skip });
-        const { docs } = await api.Model.getDocuments(params);
+        const { docs, numDocs, numDocsError } = await api.Model.getDocuments(params);
+        if (numDocsError) {
+          this.numDocumentsError = numDocsError;
+        } else if (numDocs !== undefined) {
+          this.numDocuments = numDocs;
+          this.numDocumentsError = null;
+        }
         if (docs.length < limit) {
           this.loadedAllDocs = true;
         }
         this.documents.push(...docs);
+        this.documentsError = null;
+      } catch (err) {
+        this.documentsError = err?.message;
       } finally {
         this.loadingMore = false;
         this.status = 'loaded';
@@ -1081,6 +1093,8 @@ module.exports = app => app.component('models', {
         // Clear previous data
         this.documents = [];
         this.numDocuments = null;
+        this.numDocumentsError = null;
+        this.documentsError = null;
         this.loadedAllDocs = false;
         this.lastSelectedIndex = null;
 
@@ -1130,6 +1144,10 @@ module.exports = app => app.component('models', {
           }
           if (event.numDocs !== undefined) {
             this.numDocuments = event.numDocs;
+            this.numDocumentsError = null;
+          }
+          if (event.numDocsError) {
+            this.numDocumentsError = event.numDocsError;
           }
           if (event.document) {
             this.documents.push(event.document);
@@ -1143,6 +1161,9 @@ module.exports = app => app.component('models', {
         if (docsCount < limit) {
           this.loadedAllDocs = true;
         }
+        this.documentsError = null;
+      } catch (err) {
+        this.documentsError = err?.message;
       } finally {
         this.status = 'loaded';
       }
@@ -1169,8 +1190,12 @@ module.exports = app => app.component('models', {
         for await (const event of api.Model.getDocumentsStream(params)) {
           if (event.numDocs !== undefined && !numDocsReceived) {
             this.numDocuments = event.numDocs;
+            this.numDocumentsError = null;
             numDocsReceived = true;
           }
+          if (event.numDocsError) {
+            this.numDocumentsError = event.numDocsError;
+          }
           if (event.document) {
             this.documents.push(event.document);
             docsCount++;
@@ -1183,6 +1208,9 @@ module.exports = app => app.component('models', {
         if (docsCount < limit) {
           this.loadedAllDocs = true;
         }
+        this.documentsError = null;
+      } catch (err) {
+        this.documentsError = err?.message;
       } finally {
         this.loadingMore = false;
         this.status = 'loaded';

package/frontend/src/tooltip/tooltip.html

@@ -0,0 +1,28 @@
+<span
+  ref="trigger"
+  class="inline-flex outline-none focus-visible:rounded-md focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
+  tabindex="0"
+  :aria-describedby="isOpen ? tooltipId : null"
+  @mouseenter="show"
+  @mouseleave="hideUnlessPinned"
+  @focusin="show"
+  @focusout="handleFocusOut"
+  @click="toggle"
+  @keydown.esc.stop="hide"
+>
+  <slot></slot>
+  <span
+    v-show="isOpen"
+    ref="tooltip"
+    :id="tooltipId"
+    class="pointer-events-none fixed z-[1000] w-max max-w-[min(20rem,calc(100vw-1rem))] whitespace-normal rounded-md bg-gray-900 px-2.5 py-1.5 text-xs font-normal leading-4 text-white shadow-lg"
+    :style="tooltipStyle"
+    role="tooltip"
+  >
+    {{ text }}
+    <span
+      class="absolute left-1/2 h-2 w-2 -translate-x-1/2 rotate-45 bg-gray-900"
+      :class="placement === 'bottom' ? '-top-1' : '-bottom-1'"
+    ></span>
+  </span>
+</span>

package/frontend/src/tooltip/tooltip.js

@@ -0,0 +1,94 @@
+'use strict';
+
+const template = require('./tooltip.html');
+
+let nextTooltipId = 0;
+
+module.exports = app => app.component('tooltip', {
+  props: {
+    text: {
+      type: String,
+      required: true
+    }
+  },
+  template,
+  data() {
+    return {
+      isOpen: false,
+      isPinned: false,
+      placement: 'bottom',
+      tooltipId: `tooltip-${++nextTooltipId}`,
+      tooltipStyle: {
+        visibility: 'hidden'
+      }
+    };
+  },
+  mounted() {
+    document.addEventListener('click', this.handleOutsideClick);
+    window.addEventListener('resize', this.updatePosition);
+    window.addEventListener('scroll', this.updatePosition, true);
+  },
+  beforeUnmount() {
+    document.removeEventListener('click', this.handleOutsideClick);
+    window.removeEventListener('resize', this.updatePosition);
+    window.removeEventListener('scroll', this.updatePosition, true);
+  },
+  methods: {
+    show() {
+      this.isOpen = true;
+      this.tooltipStyle = { visibility: 'hidden' };
+      this.$nextTick(this.updatePosition);
+    },
+    hide() {
+      this.isOpen = false;
+      this.isPinned = false;
+    },
+    hideUnlessPinned() {
+      if (!this.isPinned) {
+        this.isOpen = false;
+      }
+    },
+    toggle() {
+      if (this.isPinned) {
+        this.hide();
+        return;
+      }
+
+      this.isPinned = true;
+      this.show();
+    },
+    handleFocusOut(event) {
+      if (!this.$el.contains(event.relatedTarget)) {
+        this.hideUnlessPinned();
+      }
+    },
+    handleOutsideClick(event) {
+      if (!this.$el.contains(event.target)) {
+        this.hide();
+      }
+    },
+    updatePosition() {
+      if (!this.isOpen || !this.$refs.trigger || !this.$refs.tooltip) {
+        return;
+      }
+
+      const gap = 8;
+      const viewportPadding = 8;
+      const triggerRect = this.$refs.trigger.getBoundingClientRect();
+      const tooltipRect = this.$refs.tooltip.getBoundingClientRect();
+      const fitsBelow = triggerRect.bottom + gap + tooltipRect.height <= window.innerHeight - viewportPadding;
+      const top = fitsBelow ?
+        triggerRect.bottom + gap :
+        Math.max(viewportPadding, triggerRect.top - gap - tooltipRect.height);
+      const centeredLeft = triggerRect.left + triggerRect.width / 2 - tooltipRect.width / 2;
+      const maxLeft = Math.max(viewportPadding, window.innerWidth - tooltipRect.width - viewportPadding);
+      const left = Math.min(Math.max(viewportPadding, centeredLeft), maxLeft);
+
+      this.placement = fitsBelow ? 'bottom' : 'top';
+      this.tooltipStyle = {
+        left: `${Math.round(left)}px`,
+        top: `${Math.round(top)}px`
+      };
+    }
+  }
+});

package/index.d.ts

@@ -5,7 +5,7 @@ declare module '@mongoosejs/studio' {
   const express: (
     path?: string,
     connOrMongoose?: Connection | Mongoose,
-    options?: { apiKey?: string; bindIp?: string | string[] | null }
+    options?: { apiKey?: string; bindIp?: string | string[] | null; maxTimeMS?: number }
   ) => Promise<RequestHandler>;
 
   const studio: {

package/local.js

@@ -30,7 +30,8 @@ async function run() {
       _mothershipUrl: 'http://localhost:7777/.netlify/functions',
       // apiKey: 'TACO',
       openAIAPIKey: process.env.OPENAI_API_KEY,
-      googleGeminiAPIKey: process.env.GEMINI_API_KEY
+      googleGeminiAPIKey: process.env.GEMINI_API_KEY,
+      maxTimeMS: 1000
     })
   );
 

package/nest.d.ts

@@ -9,6 +9,7 @@ declare module '@mongoosejs/studio/nest' {
     connectionToken?: string | symbol | Function;
     apiKey?: string;
     bindIp?: string | string[] | null;
+    maxTimeMS?: number;
     [key: string]: any;
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mongoosejs/studio",
-  "version": "0.5.13",
+  "version": "0.5.14",
   "description": "AI-Powered Data Workspace for MongoDB: Turn your MongoDB data into dashboards, maps, and interactive workflows - powered by your Mongoose models and AI.",
   "homepage": "https://mongoosestudio.app/",
   "repository": {

package/vercel.d.ts

@@ -8,6 +8,8 @@ declare module '@mongoosejs/studio/vercel' {
     studioConnection?: Connection;
     /** Watch the connection for changes and stream them to the Studio frontend. */
     changeStream?: boolean;
+    /** Maximum execution time in milliseconds for MongoDB operations. */
+    maxTimeMS?: number;
     /** Chat model name, e.g. 'gpt-4o-mini' */
     model?: string;
     openAIAPIKey?: string;