@mongoosejs/studio 0.5.12 → 0.5.14

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

@@ -28,9 +28,10 @@ async function run() {
       __build: true,
       __watch: process.env.WATCH,
       _mothershipUrl: 'http://localhost:7777/.netlify/functions',
-      apiKey: 'TACO',
+      // 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.12",
+  "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/seed/connect.js

@@ -10,6 +10,10 @@ module.exports = async function connect() {
   mongoose.model('User', new mongoose.Schema({
     name: String,
     email: String,
+    location: new mongoose.Schema({
+      type: { type: String },
+      coordinates: [Number]
+    }),
     role: String,
     plan: String,
     status: String,

package/seed/index.js

@@ -20,6 +20,10 @@ async function run() {
     {
       name: 'Ada Lovelace',
       email: 'ada@example.com',
+      location: {
+        type: 'Point',
+        coordinates: [-0.1276, 51.5072]
+      },
       role: 'admin',
       plan: 'enterprise',
       status: 'active',
@@ -36,6 +40,10 @@ async function run() {
     {
       name: 'Grace Hopper',
       email: 'grace@example.com',
+      location: {
+        type: 'Point',
+        coordinates: [-74.006, 40.7128]
+      },
       role: 'analyst',
       plan: 'pro',
       status: 'active',
@@ -52,6 +60,10 @@ async function run() {
     {
       name: 'Linus Torvalds',
       email: 'linus@example.com',
+      location: {
+        type: 'Point',
+        coordinates: [24.9384, 60.1699]
+      },
       role: 'editor',
       plan: 'starter',
       status: 'invited',
@@ -68,6 +80,10 @@ async function run() {
     {
       name: 'Margaret Hamilton',
       email: 'margaret@example.com',
+      location: {
+        type: 'Point',
+        coordinates: [-71.1097, 42.3736]
+      },
       role: 'viewer',
       plan: 'pro',
       status: 'inactive',

package/vercel.d.ts

@@ -0,0 +1,48 @@
+declare module '@mongoosejs/studio/vercel' {
+  import { Connection, Mongoose } from 'mongoose';
+
+  export interface VercelAPIRouteHandlerOptions {
+    /** Mongoose Studio Pro API key. When set, requests must be authorized. */
+    apiKey?: string;
+    /** Separate connection for Studio's own collections (dashboards, chat threads). */
+    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;
+    anthropicAPIKey?: string;
+    googleGeminiAPIKey?: string;
+    [key: string]: any;
+  }
+
+  /**
+   * Minimal request shape: satisfied by Next.js API routes (NextApiRequest),
+   * Express, and other Node server frameworks with query/body parsing.
+   */
+  export interface VercelAPIRouteHandlerRequest {
+    query?: Record<string, any>;
+    body?: any;
+    params?: Record<string, any>;
+    headers: { authorization?: string | null; [key: string]: any };
+  }
+
+  /** Minimal response shape: satisfied by NextApiResponse and Express responses. */
+  export interface VercelAPIRouteHandlerResponse {
+    status(code: number): any;
+    json(body: any): any;
+    send(body: any): any;
+  }
+
+  /**
+   * Creates a Mongoose Studio API handler for Next.js Pages Router API routes
+   * (`pages/api/studio.js`) and other Vercel-style serverless functions.
+   * Pass `null` to use the default Mongoose global.
+   */
+  export function vercelAPIRouteHandler(
+    conn?: Connection | Mongoose | null,
+    options?: VercelAPIRouteHandlerOptions
+  ): (req: VercelAPIRouteHandlerRequest, res: VercelAPIRouteHandlerResponse) => Promise<any>;
+}

package/vercel.js

@@ -0,0 +1,3 @@
+'use strict';
+
+exports.vercelAPIRouteHandler = require('./backend/vercel');