@mongoosejs/studio 0.2.5 → 0.2.7

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

@@ -1,9 +1,10 @@
-<div class="border border-gray-200 bg-white rounded-lg mb-2">
+<div class="border border-gray-200 bg-white rounded-lg mb-2" style="overflow: visible;">
   <!-- Collapsible Header -->
   <div
     @click="toggleCollapse"
     class="p-1 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-slate-100 hover:bg-gray-100': !highlight }"
+    style="overflow: visible; position: relative;"
   >
     <div class="flex items-center" >
       <svg
@@ -17,6 +18,56 @@
       </svg>
       <span class="font-medium text-gray-900">{{path.path}}</span>
       <span class="ml-2 text-sm text-gray-500">({{(path.instance || 'unknown').toLowerCase()}})</span>
+      <div v-if="isGeoJsonGeometry" class="ml-3 inline-flex items-center gap-2">
+        <div class="inline-flex items-center rounded-full bg-gray-200 p-0.5 text-xs font-semibold">
+          <button
+            type="button"
+            class="rounded-full px-2.5 py-0.5 transition"
+            :class="detailViewMode === 'text' ? 'bg-blue-600 text-white shadow' : 'text-gray-700 hover:text-gray-900'"
+            :style="detailViewMode === 'text' ? 'color: white !important; background-color: #2563eb !important;' : ''"
+            @click.stop="setDetailViewMode('text')">
+            Text
+          </button>
+          <button
+            type="button"
+            class="rounded-full px-2.5 py-0.5 transition"
+            :class="detailViewMode === 'map' ? 'bg-blue-600 text-white shadow' : 'text-gray-700 hover:text-gray-900'"
+            :style="detailViewMode === 'map' ? 'color: white !important; background-color: #2563eb !important;' : ''"
+            @click.stop="setDetailViewMode('map')">
+            Map
+          </button>
+        </div>
+        <!-- Info icon with tooltip -->
+        <div v-if="editting" class="relative inline-block" style="z-index: 10002;" @mouseenter="showTooltip = true" @mouseleave="showTooltip = false" @click.stop>
+          <svg
+            ref="infoIcon"
+            class="w-6 h-6 text-gray-400 hover:text-gray-600 cursor-help"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+          </svg>
+          <div
+            v-show="showTooltip"
+            ref="tooltip"
+            class="absolute left-full top-0 ml-2 w-64 p-3 text-white text-xs rounded-lg shadow-xl"
+            style="z-index: 99999; pointer-events: none; white-space: normal; position: fixed; background-color: #111827;"
+            :style="getTooltipStyle()"
+          >
+            <div class="font-semibold mb-2">Map Controls:</div>
+            <div v-if="isGeoJsonPoint" class="space-y-1">
+              <div>• Drag pin to move location</div>
+            </div>
+            <div v-else-if="isGeoJsonPolygon" class="space-y-1">
+              <div>• Drag vertices to reshape polygon</div>
+              <div v-if="isMultiPolygon">• Right-click edge to add new vertex</div>
+              <div>• Right-click vertex to delete</div>
+            </div>
+            <div class="absolute top-2 -left-1 w-0 h-0 border-t-4 border-b-4 border-r-4 border-transparent border-r-gray-900"></div>
+          </div>
+        </div>
+      </div>
     </div>
     <div class="flex items-center gap-2">
       <button
@@ -69,7 +120,18 @@
 
     <!-- Field Content -->
     <div v-if="editting && path.path !== '_id'">
+      <!-- Use detail-default with map editing for GeoJSON geometries -->
+      <component
+        v-if="isGeoJsonGeometry"
+        :is="getComponentForPath(path)"
+        :value="getEditValueForPath(path)"
+        :view-mode="detailViewMode"
+        :on-change="handleInputChange"
+        >
+      </component>
+      <!-- Use standard edit components for other types -->
       <component
+        v-else
         :is="getEditComponentForPath(path)"
         :value="getEditValueForPath(path)"
         :format="dateType"
@@ -131,7 +193,10 @@
       </div>
       <!-- Expanded view -->
       <div v-else-if="needsTruncation && isValueExpanded" class="relative">
-        <component :is="getComponentForPath(path)" :value="getValueForPath(path.path)"></component>
+        <component
+          :is="getComponentForPath(path)"
+          :value="getValueForPath(path.path)"
+          :view-mode="detailViewMode"></component>
         <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"
@@ -144,7 +209,10 @@
       </div>
       <!-- Full view (no truncation needed) -->
       <div v-else>
-        <component :is="getComponentForPath(path)" :value="getValueForPath(path.path)"></component>
+        <component
+          :is="getComponentForPath(path)"
+          :value="getValueForPath(path.path)"
+          :view-mode="detailViewMode"></component>
       </div>
     </div>
   </div>

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

@@ -17,8 +17,10 @@ module.exports = app => app.component('document-property', {
       dateType: 'picker', // picker, iso
       isCollapsed: false, // Start uncollapsed by default
       isValueExpanded: false, // Track if the value is expanded
+      detailViewMode: 'text',
       copyButtonLabel: 'Copy',
-      copyResetTimeoutId: null
+      copyResetTimeoutId: null,
+      showTooltip: false
     };
   },
   beforeDestroy() {
@@ -92,9 +94,58 @@ module.exports = app => app.component('document-property', {
         return this.arrayValue.length - 2;
       }
       return 0;
+    },
+    isGeoJsonGeometry() {
+      const value = this.getValueForPath(this.path.path);
+      return value != null
+        && typeof value === 'object'
+        && !Array.isArray(value)
+        && Object.prototype.hasOwnProperty.call(value, 'type')
+        && Object.prototype.hasOwnProperty.call(value, 'coordinates');
+    },
+    isGeoJsonPoint() {
+      const value = this.getValueForPath(this.path.path);
+      return this.isGeoJsonGeometry && value.type === 'Point';
+    },
+    isGeoJsonPolygon() {
+      const value = this.getValueForPath(this.path.path);
+      return this.isGeoJsonGeometry && (value.type === 'Polygon' || value.type === 'MultiPolygon');
+    },
+    isMultiPolygon() {
+      const value = this.getValueForPath(this.path.path);
+      return this.isGeoJsonGeometry && value.type === 'MultiPolygon';
+    }
+  },
+  watch: {
+    isGeoJsonGeometry(newValue) {
+      if (!newValue) {
+        this.detailViewMode = 'text';
+      } else if (this.editting) {
+        // Default to map view when editing GeoJSON
+        this.detailViewMode = 'map';
+      }
+    },
+    editting(newValue) {
+      // When entering edit mode for GeoJSON, default to map view
+      if (newValue && this.isGeoJsonGeometry) {
+        this.detailViewMode = 'map';
+      }
     }
   },
   methods: {
+    setDetailViewMode(mode) {
+      this.detailViewMode = mode;
+      
+      // When switching to map view, expand the container and value so the map is visible
+      if (mode === 'map' && this.isGeoJsonGeometry) {
+        if (this.isCollapsed) {
+          this.isCollapsed = false;
+        }
+        if (this.needsTruncation && !this.isValueExpanded) {
+          this.isValueExpanded = true;
+        }
+      }
+    },
     handleInputChange(newValue) {
       const currentValue = this.getValueForPath(this.path.path);
 
@@ -165,6 +216,11 @@ module.exports = app => app.component('document-property', {
       if (!this.document) {
         return;
       }
+      // If there are unsaved changes for this path, use the changed value
+      if (Object.prototype.hasOwnProperty.call(this.changes, path)) {
+        return this.changes[path];
+      }
+      // Otherwise, use the document value
       const documentValue = mpath.get(path, this.document);
       return documentValue;
     },
@@ -184,6 +240,16 @@ module.exports = app => app.component('document-property', {
         this.copyResetTimeoutId = null;
       }, 5000);
     },
+    getTooltipStyle() {
+      if (!this.$refs.infoIcon || !this.showTooltip) {
+        return {};
+      }
+      const rect = this.$refs.infoIcon.getBoundingClientRect();
+      return {
+        left: (rect.right + 8) + 'px',
+        top: rect.top + 'px'
+      };
+    },
     copyPropertyValue() {
       const textToCopy = this.valueAsString;
       if (textToCopy == null) {

package/frontend/src/models/models.html

@@ -34,7 +34,7 @@
     </nav>
   </aside>
   <div class="documents bg-slate-50" ref="documentsList">
-    <div class="relative h-[42px] z-10">
+    <div class="relative h-[42px]" style="z-index: 1000">
       <div class="documents-menu bg-slate-50">
         <div class="flex flex-row items-center w-full gap-2">
           <document-search
@@ -46,7 +46,7 @@
           </document-search>
           <div>
             <span v-if="numDocuments == null">Loading ...</span>
-            <span v-else-if="typeof numDocuments === 'number'">{{numDocuments === 1 ? numDocuments+ ' document' : numDocuments + ' documents'}}</span>
+            <span v-else-if="typeof numDocuments === 'number'">{{documents.length}}/{{numDocuments === 1 ? numDocuments + ' document' : numDocuments + ' documents'}}</span>
           </div>
           <button
             @click="stagingSelect"
@@ -143,10 +143,24 @@
             <button
               @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="relative -ml-px inline-flex items-center 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'">
               <img class="h-5 w-5" src="images/json.svg">
             </button>
+            <button
+              @click="setOutputType('map')"
+              :disabled="geoJsonFields.length === 0"
+              type="button"
+              :title="geoJsonFields.length > 0 ? 'Map view' : 'No GeoJSON fields detected'"
+              class="relative -ml-px inline-flex items-center rounded-none rounded-r-md px-2 py-2 ring-1 ring-inset ring-gray-300 focus:z-10"
+              :class="[
+                geoJsonFields.length === 0 ? 'text-gray-300 cursor-not-allowed bg-gray-100' : 'text-gray-400 hover:bg-gray-50',
+                outputType === 'map' ? 'bg-gray-200' : (geoJsonFields.length > 0 ? 'bg-white' : '')
+              ]">
+              <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M9 6.75V15m6-6v8.25m.503 3.498 4.875-2.437c.381-.19.622-.58.622-1.006V4.82c0-.836-.88-1.38-1.628-1.006l-3.869 1.934c-.317.159-.69.159-1.006 0L9.503 3.252a1.125 1.125 0 0 0-1.006 0L3.622 5.689C3.24 5.88 3 6.27 3 6.695V19.18c0 .836.88 1.38 1.628 1.006l3.869-1.934c.317-.159.69-.159 1.006 0l4.994 2.497c.317.158.69.158 1.006 0Z" />
+              </svg>
+            </button>
           </span>
         </div>
       </div>
@@ -202,6 +216,30 @@
           </list-json>
         </div>
       </div>
+      <div v-else-if="outputType === 'map'" class="flex flex-col h-full">
+        <div class="p-2 bg-white border-b flex items-center gap-2">
+          <label class="text-sm font-medium text-gray-700">GeoJSON Field:</label>
+          <select
+            :value="selectedGeoField"
+            @change="setSelectedGeoField($event.target.value)"
+            class="rounded-md border border-gray-300 py-1 px-2 text-sm focus:border-ultramarine-500 focus:ring-ultramarine-500"
+          >
+            <option v-for="field in geoJsonFields" :key="field.path" :value="field.path">
+              {{ field.label }}
+            </option>
+          </select>
+          <async-button
+            @click="loadMoreDocuments"
+            :disabled="loadedAllDocs"
+            type="button"
+            class="rounded px-2 py-1 text-xs font-semibold text-white shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-600"
+            :class="loadedAllDocs ? 'bg-gray-400 cursor-not-allowed' : 'bg-ultramarine-600 hover:bg-ultramarine-500'"
+          >
+            Load more
+          </async-button>
+        </div>
+        <div class="flex-1 min-h-[400px]" ref="modelsMap"></div>
+      </div>
       <div v-if="status === 'loading'" class="loader">
         <img src="images/loader.gif">
       </div>

package/frontend/src/models/models.js

@@ -1,14 +1,18 @@
 'use strict';
 
+/* global L */
+
 const api = require('../api');
 const template = require('./models.html');
 const mpath = require('mpath');
+const xss = require('xss');
 
 const appendCSS = require('../appendCSS');
 appendCSS(require('./models.css'));
 
 const limit = 20;
 const OUTPUT_TYPE_STORAGE_KEY = 'studio:model-output-type';
+const SELECTED_GEO_FIELD_STORAGE_KEY = 'studio:model-selected-geo-field';
 
 module.exports = app => app.component('models', {
   template: template,
@@ -42,7 +46,10 @@ module.exports = app => app.component('models', {
     query: {},
     scrollHeight: 0,
     interval: null,
-    outputType: 'table', // json, table
+    outputType: 'table', // json, table, map
+    selectedGeoField: null,
+    mapInstance: null,
+    mapLayer: null,
     hideSidebar: null,
     lastSelectedIndex: null,
     error: null,
@@ -52,11 +59,13 @@ module.exports = app => app.component('models', {
   created() {
     this.currentModel = this.model;
     this.loadOutputPreference();
+    this.loadSelectedGeoField();
   },
   beforeDestroy() {
     document.removeEventListener('scroll', this.onScroll, true);
     window.removeEventListener('popstate', this.onPopState, true);
     document.removeEventListener('click', this.onOutsideActionsMenuClick, true);
+    this.destroyMap();
   },
   async mounted() {
     this.onScroll = () => this.checkIfScrolledToBottom();
@@ -88,6 +97,37 @@ module.exports = app => app.component('models', {
 
     await this.initSearchFromUrl();
   },
+  watch: {
+    documents: {
+      handler() {
+        if (this.outputType === 'map' && this.mapInstance) {
+          this.$nextTick(() => {
+            this.updateMapFeatures();
+          });
+        }
+      },
+      deep: true
+    },
+    geoJsonFields: {
+      handler(newFields) {
+        // Switch off map view if map is selected but no GeoJSON fields available
+        if (this.outputType === 'map' && newFields.length === 0) {
+          this.setOutputType('json');
+          return;
+        }
+        // Auto-select first field if current selection is not valid
+        if (this.outputType === 'map' && newFields.length > 0) {
+          const isCurrentValid = newFields.some(f => f.path === this.selectedGeoField);
+          if (!isCurrentValid) {
+            this.selectedGeoField = newFields[0].path;
+            this.$nextTick(() => {
+              this.updateMapFeatures();
+            });
+          }
+        }
+      }
+    }
+  },
   computed: {
     referenceMap() {
       const map = {};
@@ -97,6 +137,56 @@ module.exports = app => app.component('models', {
         }
       }
       return map;
+    },
+    geoJsonFields() {
+      // Find schema paths that look like GeoJSON fields
+      // GeoJSON fields have nested 'type' and 'coordinates' properties
+      const geoFields = [];
+      const pathsByPrefix = {};
+
+      // Group paths by their parent prefix
+      for (const schemaPath of this.schemaPaths) {
+        const path = schemaPath.path;
+        const parts = path.split('.');
+        if (parts.length >= 2) {
+          const parent = parts.slice(0, -1).join('.');
+          const child = parts[parts.length - 1];
+          if (!pathsByPrefix[parent]) {
+            pathsByPrefix[parent] = {};
+          }
+          pathsByPrefix[parent][child] = schemaPath;
+        }
+      }
+
+      // Check which parents have both 'type' and 'coordinates' children
+      for (const [parent, children] of Object.entries(pathsByPrefix)) {
+        if (children.type && children.coordinates) {
+          geoFields.push({
+            path: parent,
+            label: parent
+          });
+        }
+      }
+
+      // Also check for Embedded/Mixed fields that might contain GeoJSON
+      // by looking at actual document data
+      for (const schemaPath of this.schemaPaths) {
+        if (schemaPath.instance === 'Embedded' || schemaPath.instance === 'Mixed') {
+          // Check if any document has this field with GeoJSON structure
+          const hasGeoJsonData = this.documents.some(doc => {
+            const value = mpath.get(schemaPath.path, doc);
+            return this.isGeoJsonValue(value);
+          });
+          if (hasGeoJsonData && !geoFields.find(f => f.path === schemaPath.path)) {
+            geoFields.push({
+              path: schemaPath.path,
+              label: schemaPath.path
+            });
+          }
+        }
+      }
+
+      return geoFields;
     }
   },
   methods: {
@@ -105,18 +195,170 @@ module.exports = app => app.component('models', {
         return;
       }
       const storedPreference = window.localStorage.getItem(OUTPUT_TYPE_STORAGE_KEY);
-      if (storedPreference === 'json' || storedPreference === 'table') {
+      if (storedPreference === 'json' || storedPreference === 'table' || storedPreference === 'map') {
         this.outputType = storedPreference;
       }
     },
+    loadSelectedGeoField() {
+      if (typeof window === 'undefined' || !window.localStorage) {
+        return;
+      }
+      const storedField = window.localStorage.getItem(SELECTED_GEO_FIELD_STORAGE_KEY);
+      if (storedField) {
+        this.selectedGeoField = storedField;
+      }
+    },
     setOutputType(type) {
-      if (type !== 'json' && type !== 'table') {
+      if (type !== 'json' && type !== 'table' && type !== 'map') {
         return;
       }
       this.outputType = type;
       if (typeof window !== 'undefined' && window.localStorage) {
         window.localStorage.setItem(OUTPUT_TYPE_STORAGE_KEY, type);
       }
+      if (type === 'map') {
+        this.$nextTick(() => {
+          this.initMap();
+        });
+      } else {
+        this.destroyMap();
+      }
+    },
+    setSelectedGeoField(field) {
+      this.selectedGeoField = field;
+      if (typeof window !== 'undefined' && window.localStorage) {
+        window.localStorage.setItem(SELECTED_GEO_FIELD_STORAGE_KEY, field);
+      }
+      if (this.outputType === 'map') {
+        this.$nextTick(() => {
+          this.updateMapFeatures();
+        });
+      }
+    },
+    isGeoJsonValue(value) {
+      return value != null &&
+        typeof value === 'object' &&
+        !Array.isArray(value) &&
+        Object.prototype.hasOwnProperty.call(value, 'type') &&
+        typeof value.type === 'string' &&
+        Object.prototype.hasOwnProperty.call(value, 'coordinates') &&
+        Array.isArray(value.coordinates);
+    },
+    initMap() {
+      if (typeof L === 'undefined') {
+        console.error('Leaflet (L) is not defined');
+        return;
+      }
+      if (!this.$refs.modelsMap) {
+        return;
+      }
+      if (this.mapInstance) {
+        this.updateMapFeatures();
+        return;
+      }
+
+      const mapElement = this.$refs.modelsMap;
+      mapElement.style.setProperty('height', '100%', 'important');
+      mapElement.style.setProperty('min-height', '400px', 'important');
+      mapElement.style.setProperty('width', '100%', 'important');
+
+      this.mapInstance = L.map(this.$refs.modelsMap).setView([0, 0], 2);
+      L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+        attribution: '© OpenStreetMap contributors'
+      }).addTo(this.mapInstance);
+
+      this.$nextTick(() => {
+        if (this.mapInstance) {
+          this.mapInstance.invalidateSize();
+          this.updateMapFeatures();
+        }
+      });
+    },
+    destroyMap() {
+      if (this.mapLayer) {
+        this.mapLayer.remove();
+        this.mapLayer = null;
+      }
+      if (this.mapInstance) {
+        this.mapInstance.remove();
+        this.mapInstance = null;
+      }
+    },
+    updateMapFeatures() {
+      if (!this.mapInstance) {
+        return;
+      }
+
+      // Remove existing layer
+      if (this.mapLayer) {
+        this.mapLayer.remove();
+        this.mapLayer = null;
+      }
+
+      // Auto-select first geoJSON field if none selected
+      if (!this.selectedGeoField && this.geoJsonFields.length > 0) {
+        this.selectedGeoField = this.geoJsonFields[0].path;
+      }
+
+      if (!this.selectedGeoField) {
+        return;
+      }
+
+      // Build GeoJSON FeatureCollection from documents
+      const features = [];
+      for (const doc of this.documents) {
+        const geoValue = mpath.get(this.selectedGeoField, doc);
+        if (this.isGeoJsonValue(geoValue)) {
+          features.push({
+            type: 'Feature',
+            geometry: geoValue,
+            properties: {
+              _id: doc._id,
+              documentId: doc._id
+            }
+          });
+        }
+      }
+
+      if (features.length === 0) {
+        return;
+      }
+
+      const featureCollection = {
+        type: 'FeatureCollection',
+        features: features
+      };
+
+      // Add layer with click handler for popups
+      this.mapLayer = L.geoJSON(featureCollection, {
+        style: {
+          color: '#3388ff',
+          weight: 2,
+          opacity: 0.8,
+          fillOpacity: 0.3
+        },
+        pointToLayer: (feature, latlng) => {
+          return L.marker(latlng);
+        },
+        onEachFeature: (feature, layer) => {
+          const docId = feature.properties._id;
+          const docUrl = `#/model/${this.currentModel}/document/${xss(docId)}`;
+          const popupContent = `
+            <div style="min-width: 150px;">
+              <div style="font-weight: bold; margin-bottom: 8px;">Document</div>
+              <div style="font-family: monospace; font-size: 12px; word-break: break-all; margin-bottom: 8px;">${docId}</div>
+              <a href="${docUrl}" style="color: #3388ff; text-decoration: underline;">Open Document</a>
+            </div>
+          `;
+          layer.bindPopup(popupContent);
+        }
+      }).addTo(this.mapInstance);
+
+      // Fit bounds to show all features
+      const bounds = this.mapLayer.getBounds();
+      if (bounds.isValid()) {
+        this.mapInstance.fitBounds(bounds, { padding: [20, 20], maxZoom: 16 });
+      }
     },
     buildDocumentFetchParams(options = {}) {
       const params = {
@@ -170,6 +412,13 @@ module.exports = app => app.component('models', {
         this.filteredPaths = this.filteredPaths.filter(x => filter.includes(x.path));
       }
       this.status = 'loaded';
+
+      // Initialize map if output type is map
+      if (this.outputType === 'map') {
+        this.$nextTick(() => {
+          this.initMap();
+        });
+      }
     },
     async dropIndex(name) {
       const { mongoDBIndexes } = await api.Model.dropIndex({ model: this.currentModel, name });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mongoosejs/studio",
-  "version": "0.2.5",
+  "version": "0.2.7",
   "description": "A Mongoose-native MongoDB UI with schema-aware autocomplete, AI-assisted queries, and dashboards that understand your models - not just your data.",
   "homepage": "https://mongoosestudio.app/",
   "repository": {
@@ -22,7 +22,8 @@
     "tailwindcss": "3.4.0",
     "vue": "3.x",
     "vue-toastification": "^2.0.0-rc.5",
-    "webpack": "5.x"
+    "webpack": "5.x",
+    "xss": "^1.0.15"
   },
   "peerDependencies": {
     "mongoose": "7.x || 8.x || ^9.0.0"