@mongoosejs/studio 0.0.117 → 0.0.119

package/backend/actions/Dashboard/getDashboard.js

@@ -38,7 +38,19 @@ module.exports = ({ db }) => async function getDashboard(params) {
     try {
       result = await dashboard.evaluate();
     } catch (error) {
-      return { dashboard, error: { message: error.message } };
+      const { dashboardResult } = await startExec.then(({ dashboardResult }) => {
+        if (!dashboardResult) {
+          return {};
+        }
+        return completeDashboardEvaluate(
+          dashboardResult._id,
+          $workspaceId,
+          authorization,
+          null,
+          { message: error.message }
+        );
+      });
+      return { dashboard, dashboardResult, error: { message: error.message } };
     }
 
     try {
@@ -64,7 +76,7 @@ module.exports = ({ db }) => async function getDashboard(params) {
   }
 };
 
-async function completeDashboardEvaluate(dashboardResultId, workspaceId, authorization, result) {
+async function completeDashboardEvaluate(dashboardResultId, workspaceId, authorization, result, error) {
   if (!workspaceId) {
     return {};
   }
@@ -79,7 +91,8 @@ async function completeDashboardEvaluate(dashboardResultId, workspaceId, authori
       dashboardResultId,
       workspaceId,
       finishedEvaluatingAt: new Date(),
-      result
+      result,
+      error
     })
   }).then(response => {
     if (response.status < 200 || response.status >= 400) {

package/backend/actions/Dashboard/updateDashboard.js

@@ -24,7 +24,7 @@ const UpdateDashboardParams = new Archetype({
 }).compile('UpdateDashboardParams');
 
 module.exports = ({ db }) => async function updateDashboard(params) {
-  const { dashboardId, code, title, description, roles } = new UpdateDashboardParams(params);
+  const { dashboardId, code, title, description, roles, evaluate } = new UpdateDashboardParams(params);
 
   const Dashboard = db.models['__Studio_Dashboard'];
 
@@ -43,12 +43,5 @@ module.exports = ({ db }) => async function updateDashboard(params) {
   const doc = await Dashboard.
     findByIdAndUpdate(dashboardId, updateObj, { sanitizeFilter: true, returnDocument: 'after', overwriteImmutable: true });
 
-  let result = null;
-  try {
-    result = await doc.evaluate();
-  } catch (error) {
-    return { doc, error: { message: error.message } };
-  }
-
-  return { doc, result };
+  return { doc };
 };

package/frontend/public/app.js

@@ -1018,6 +1018,37 @@ module.exports = app => app.component('dashboard-document', {
 });
 
 
+/***/ }),
+
+/***/ "./frontend/src/dashboard-result/dashboard-grid/dashboard-grid.js":
+/*!************************************************************************!*\
+  !*** ./frontend/src/dashboard-result/dashboard-grid/dashboard-grid.js ***!
+  \************************************************************************/
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+"use strict";
+
+
+const template = __webpack_require__(/*! ./dashboard-grid.html */ "./frontend/src/dashboard-result/dashboard-grid/dashboard-grid.html");
+
+module.exports = app => app.component('dashboard-grid', {
+  template: template,
+  props: ['value'],
+  computed: {
+    columns() {
+      const grid = this.value && this.value.$grid;
+      if (!Array.isArray(grid) || grid.length === 0) {
+        return 1;
+      }
+      return Math.max(1, ...grid.map(row => Array.isArray(row) ? row.length : 0));
+    },
+    gridTemplateColumns() {
+      return `repeat(${this.columns}, minmax(0, 1fr))`;
+    }
+  }
+});
+
+
 /***/ }),
 
 /***/ "./frontend/src/dashboard-result/dashboard-map/dashboard-map.js":
@@ -1139,6 +1170,9 @@ module.exports = app => app.component('dashboard-result', {
       if (value.$text) {
         return 'dashboard-text';
       }
+      if (value.$grid) {
+        return 'dashboard-grid';
+      }
     }
   }
 });
@@ -1201,17 +1235,13 @@ module.exports = app => app.component('dashboard', {
       this.code = update.doc.code;
       this.title = update.doc.title;
       this.description = update.doc.description;
-      if (update.result) {
-        this.result = update.result;
-      } else {
-        this.errorMessage = update.error.message;
-      }
+
+      await this.evaluateDashboard();
     },
     async evaluateDashboard() {
       this.status = 'evaluating';
-      this.errorMessage = null;
       try {
-        const { dashboard, dashboardResult, error } = await api.Dashboard.getDashboard({ dashboardId: this.dashboardId, evaluate: true });
+        const { dashboard, dashboardResult } = await api.Dashboard.getDashboard({ dashboardId: this.dashboardId, evaluate: true });
         this.dashboard = dashboard;
         this.code = this.dashboard.code;
         this.title = this.dashboard.title;
@@ -1219,9 +1249,6 @@ module.exports = app => app.component('dashboard', {
         if (dashboardResult) {
           this.dashboardResults.unshift(dashboardResult);
         }
-        if (error) {
-          this.errorMessage = error.message;
-        }
       } finally {
         this.status = 'loaded';
       }
@@ -1239,9 +1266,6 @@ module.exports = app => app.component('dashboard', {
       return;
     }
     this.dashboard = dashboard;
-    if (error) {
-      this.errorMessage = error.message;
-    }
     this.code = this.dashboard.code;
     this.title = this.dashboard.title;
     this.description = this.dashboard.description ?? '';
@@ -1268,7 +1292,7 @@ const template = __webpack_require__(/*! ./edit-dashboard.html */ "./frontend/sr
 module.exports = app => app.component('edit-dashboard', {
   template: template,
   props: ['dashboardId', 'code', 'currentDescription', 'currentTitle'],
-  emits: ['close', 'clearError'],
+  emits: ['close'],
   data: function() {
     return {
       status: 'loaded',
@@ -1282,16 +1306,16 @@ module.exports = app => app.component('edit-dashboard', {
       this.$emit('close');
     },
     async updateCode() {
-      this.$emit('clearError');
       this.status = 'loading';
       try {
-        const { doc, result, error } = await api.Dashboard.updateDashboard({
+        const { doc } = await api.Dashboard.updateDashboard({
           dashboardId: this.dashboardId,
           code: this.editor.getValue(),
           title: this.title,
-          description: this.description
+          description: this.description,
+          evaluate: false
         });
-        this.$emit('update', { doc, result, error });
+        this.$emit('update', { doc });
         this.editor.setValue(doc.code);
         this.closeEditor();
       } catch (err) {
@@ -3449,6 +3473,9 @@ var map = {
 	"./dashboard-result/dashboard-document/dashboard-document": "./frontend/src/dashboard-result/dashboard-document/dashboard-document.js",
 	"./dashboard-result/dashboard-document/dashboard-document.html": "./frontend/src/dashboard-result/dashboard-document/dashboard-document.html",
 	"./dashboard-result/dashboard-document/dashboard-document.js": "./frontend/src/dashboard-result/dashboard-document/dashboard-document.js",
+	"./dashboard-result/dashboard-grid/dashboard-grid": "./frontend/src/dashboard-result/dashboard-grid/dashboard-grid.js",
+	"./dashboard-result/dashboard-grid/dashboard-grid.html": "./frontend/src/dashboard-result/dashboard-grid/dashboard-grid.html",
+	"./dashboard-result/dashboard-grid/dashboard-grid.js": "./frontend/src/dashboard-result/dashboard-grid/dashboard-grid.js",
 	"./dashboard-result/dashboard-map/dashboard-map": "./frontend/src/dashboard-result/dashboard-map/dashboard-map.js",
 	"./dashboard-result/dashboard-map/dashboard-map.html": "./frontend/src/dashboard-result/dashboard-map/dashboard-map.html",
 	"./dashboard-result/dashboard-map/dashboard-map.js": "./frontend/src/dashboard-result/dashboard-map/dashboard-map.js",
@@ -4316,6 +4343,17 @@ module.exports = "<div class=\"py-2\">\n  <div v-if=\"header\" class=\"border-b
 
 /***/ }),
 
+/***/ "./frontend/src/dashboard-result/dashboard-grid/dashboard-grid.html":
+/*!**************************************************************************!*\
+  !*** ./frontend/src/dashboard-result/dashboard-grid/dashboard-grid.html ***!
+  \**************************************************************************/
+/***/ ((module) => {
+
+"use strict";
+module.exports = "<div class=\"grid gap-2\" :style=\"{ gridTemplateColumns: gridTemplateColumns }\">\n  <template v-for=\"(row, rowIndex) in value.$grid\" :key=\"rowIndex\">\n    <dashboard-result\n      v-for=\"(cell, colIndex) in row\"\n      :key=\"rowIndex + '-' + colIndex\"\n      :result=\"cell\">\n    </dashboard-result>\n  </template>\n</div>\n";
+
+/***/ }),
+
 /***/ "./frontend/src/dashboard-result/dashboard-map/dashboard-map.html":
 /*!************************************************************************!*\
   !*** ./frontend/src/dashboard-result/dashboard-map/dashboard-map.html ***!
@@ -4367,7 +4405,7 @@ module.exports = "<div class=\"py-2\">\n  <div v-if=\"header\" class=\"border-b
 /***/ ((module) => {
 
 "use strict";
-module.exports = "<div class=\"dashboard px-1\">\n  <div v-if=\"status === 'loading'\" class=\"max-w-5xl mx-auto text-center\">\n    <img src=\"images/loader.gif\" class=\"inline mt-10\">\n  </div>\n  <div v-if=\"dashboard && status !== 'loading'\" class=\"max-w-5xl mx-auto\">\n    <div class=\"flex items-center w-full\" v-if=\"!showEditor\">\n      <h2 class=\"mt-4 mb-4 text-gray-900 font-semibold text-xl grow shrink\">{{title}}</h2>\n      <div class=\"flex gap-2\">\n        <button\n          @click=\"showEditor = true\"\n          type=\"button\"\n          :disabled=\"status === 'evaluating'\"\n          class=\"flex items-center rounded-md bg-ultramarine-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-ultramarine-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-600 disabled:cursor-not-allowed disabled:bg-gray-600\">\n          <img src=\"images/edit.svg\" class=\"inline h-[1.25em] mr-1\" /> Edit\n        </button>\n\n        <async-button\n          @click=\"evaluateDashboard\"\n          type=\"button\"\n          :disabled=\"status === 'evaluating'\"\n          class=\"flex items-center rounded-md bg-ultramarine-600 px-4 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-ultramarine-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-600 disabled:cursor-not-allowed disabled:bg-gray-600\"\n        >\n          <svg class=\"inline h-[1.25em] mr-1\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 -960 960 960\" fill=\"currentColor\"><path d=\"m670-140 160-100-160-100v200ZM240-600h480v-80H240v80ZM720-40q-83 0-141.5-58.5T520-240q0-83 58.5-141.5T720-440q83 0 141.5 58.5T920-240q0 83-58.5 141.5T720-40ZM120-80v-680q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v267q-19-9-39-15t-41-9v-243H200v562h243q5 31 15.5 59T486-86l-6 6-60-60-60 60-60-60-60 60-60-60-60 60Zm120-200h203q3-21 9-41t15-39H240v80Zm0-160h284q38-37 88.5-58.5T720-520H240v80Zm-40 242v-562 562Z\"/></svg>\n          Evaluate\n        </async-button>\n      </div>\n    </div>\n    <div v-if=\"!showEditor\" class=\"mt-4 mb-4\">\n      <div v-if=\"dashboardResults.length === 0\">\n        <div class=\"flex flex-col items-center justify-center py-8\">\n          <p class=\"text-gray-700 text-base mb-4\">This dashboard hasn't been evaluated yet.</p>\n          <async-button\n            @click=\"evaluateDashboard\"\n            type=\"button\"\n            :disabled=\"status === 'evaluating'\"\n            class=\"rounded-md bg-ultramarine-600 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-ultramarine-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-600 disabled:cursor-not-allowed disabled:bg-gray-600\"\n          >\n            Evaluate Dashboard\n          </async-button>\n        </div>\n      </div>\n      <div v-else>\n        <div class=\"relative\">\n          <dashboard-result\n            :key=\"dashboardResult.finishedEvaluatingAt\"\n            :result=\"dashboardResult.result\"\n            :finishedEvaluatingAt=\"dashboardResult.finishedEvaluatingAt\"\n            @fullscreen=\"showDetailModal = true\"\n            class=\"h-[40vh]\"\n          >\n          </dashboard-result>\n        </div>\n      </div>\n    </div>\n    <div v-if=\"showEditor\" class=\"mt-4\">\n      <edit-dashboard\n        :dashboardId=\"dashboard._id\"\n        :code=\"code\"\n        :currentDescription=\"description\"\n        :currentTitle=\"title\"\n        @close=\"showEditor=false;\"\n        @update=\"updateCode\"\n        @clearError=\"errorMessage = null\"></edit-dashboard>\n    </div>\n    <div v-if=\"errorMessage\" class=\"rounded-md bg-red-50 p-4 mt-4\">\n      <div class=\"flex\">\n        <div class=\"flex-shrink-0\">\n          <svg class=\"h-5 w-5 text-red-400\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n            <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16ZM8.28 7.22a.75.75 0 0 0-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 1 0 1.06 1.06L10 11.06l1.72 1.72a.75.75 0 1 0 1.06-1.06L11.06 10l1.72-1.72a.75.75 0 0 0-1.06-1.06L10 8.94 8.28 7.22Z\" clip-rule=\"evenodd\" />\n          </svg>\n        </div>\n        <div class=\"ml-3\">\n          <h3 class=\"text-sm font-medium text-red-800\">{{errorMessage}}</h3>\n        </div>\n      </div>\n    </div>\n\n  </div>\n  <div v-if=\"!dashboard && status !== 'loading'\">\n    No dashboard with the given id could be found.\n  </div>\n</div>\n\n<modal\n  v-if=\"showDetailModal\"\n  containerClass=\"!h-[90vh] !w-[90vw]\"\n  role=\"dialog\"\n  aria-modal=\"true\"\n  aria-label=\"Dashboard Details\"\n>\n  <template #body>\n    <div class=\"absolute font-mono right-1 top-1 cursor-pointer text-xl\" @click=\"showDetailModal = false;\" role=\"button\" aria-label=\"Close modal\">&times;</div>\n    <div class=\"h-full overflow-auto\">\n      <dashboard-result\n        v-if=\"dashboardResult\"\n        :result=\"dashboardResult.result\"\n        :finishedEvaluatingAt=\"dashboardResult.finishedEvaluatingAt\"\n        :fullscreen=\"true\"\n        :responsive=\"true\">\n      </dashboard-result>\n    </div>\n  </template>\n</modal>\n";
+module.exports = "<div class=\"dashboard px-1\">\n  <div v-if=\"status === 'loading'\" class=\"max-w-5xl mx-auto text-center\">\n    <img src=\"images/loader.gif\" class=\"inline mt-10\">\n  </div>\n  <div v-if=\"dashboard && status !== 'loading'\" class=\"max-w-5xl mx-auto\">\n    <div class=\"flex items-center w-full\" v-if=\"!showEditor\">\n      <h2 class=\"mt-4 mb-4 text-gray-900 font-semibold text-xl grow shrink\">{{title}}</h2>\n      <div class=\"flex gap-2\">\n        <button\n          @click=\"showEditor = true\"\n          type=\"button\"\n          :disabled=\"status === 'evaluating'\"\n          class=\"flex items-center rounded-md bg-ultramarine-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-ultramarine-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-600 disabled:cursor-not-allowed disabled:bg-gray-600\">\n          <img src=\"images/edit.svg\" class=\"inline h-[1.25em] mr-1\" /> Edit\n        </button>\n\n        <async-button\n          @click=\"evaluateDashboard\"\n          type=\"button\"\n          :disabled=\"status === 'evaluating'\"\n          class=\"flex items-center rounded-md bg-ultramarine-600 px-4 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-ultramarine-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-600 disabled:cursor-not-allowed disabled:bg-gray-600\"\n        >\n          <svg class=\"inline h-[1.25em] mr-1\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 -960 960 960\" fill=\"currentColor\"><path d=\"m670-140 160-100-160-100v200ZM240-600h480v-80H240v80ZM720-40q-83 0-141.5-58.5T520-240q0-83 58.5-141.5T720-440q83 0 141.5 58.5T920-240q0 83-58.5 141.5T720-40ZM120-80v-680q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v267q-19-9-39-15t-41-9v-243H200v562h243q5 31 15.5 59T486-86l-6 6-60-60-60 60-60-60-60 60-60-60-60 60Zm120-200h203q3-21 9-41t15-39H240v80Zm0-160h284q38-37 88.5-58.5T720-520H240v80Zm-40 242v-562 562Z\"/></svg>\n          Evaluate\n        </async-button>\n      </div>\n    </div>\n    <div v-if=\"!showEditor\" class=\"mt-4 mb-4\">\n      <div v-if=\"dashboardResults.length === 0\">\n        <div class=\"flex flex-col items-center justify-center py-8\">\n          <p class=\"text-gray-700 text-base mb-4\">This dashboard hasn't been evaluated yet.</p>\n          <async-button\n            @click=\"evaluateDashboard\"\n            type=\"button\"\n            :disabled=\"status === 'evaluating'\"\n            class=\"rounded-md bg-ultramarine-600 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-ultramarine-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-600 disabled:cursor-not-allowed disabled:bg-gray-600\"\n          >\n            Evaluate Dashboard\n          </async-button>\n        </div>\n      </div>\n      <div v-else-if=\"dashboardResult\">\n        <div class=\"relative\">\n          <div v-if=\"status === 'evaluating'\" class=\"absolute inset-0 flex items-center justify-center bg-white bg-opacity-60 z-10 flex flex-col gap-2\">\n            <div>Evaluating Dashboard...</div>\n            <img src=\"images/loader.gif\" class=\"h-12 w-12\" alt=\"Loading...\" />\n          </div>\n          <div v-else-if=\"dashboardResult.error\" class=\"rounded-md bg-red-50 p-4 mt-4\">\n            <div class=\"flex\">\n              <div class=\"flex-shrink-0\">\n                <svg class=\"h-5 w-5 text-red-400\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n                  <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16ZM8.28 7.22a.75.75 0 0 0-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 1 0 1.06 1.06L10 11.06l1.72 1.72a.75.75 0 1 0 1.06-1.06L11.06 10l1.72-1.72a.75.75 0 0 0-1.06-1.06L10 8.94 8.28 7.22Z\" clip-rule=\"evenodd\" />\n                </svg>\n              </div>\n              <div class=\"ml-3\">\n                <h3 class=\"text-sm font-medium text-red-800\">{{dashboardResult.error.message || 'Unknown Error'}}</h3>\n              </div>\n            </div>\n          </div>\n          <dashboard-result\n            v-else\n            :key=\"dashboardResult.finishedEvaluatingAt\"\n            :result=\"dashboardResult.result\"\n            :finishedEvaluatingAt=\"dashboardResult.finishedEvaluatingAt\"\n            @fullscreen=\"showDetailModal = true\"\n            class=\"h-[40vh]\"\n          >\n          </dashboard-result>\n        </div>\n      </div>\n    </div>\n    <div v-if=\"showEditor\" class=\"mt-4\">\n      <edit-dashboard\n        :dashboardId=\"dashboard._id\"\n        :code=\"code\"\n        :currentDescription=\"description\"\n        :currentTitle=\"title\"\n        @close=\"showEditor=false;\"\n        @update=\"updateCode\"></edit-dashboard>\n    </div>\n\n  </div>\n  <div v-if=\"!dashboard && status !== 'loading'\">\n    No dashboard with the given id could be found.\n  </div>\n</div>\n\n<modal\n  v-if=\"showDetailModal\"\n  containerClass=\"!h-[90vh] !w-[90vw]\"\n  role=\"dialog\"\n  aria-modal=\"true\"\n  aria-label=\"Dashboard Details\"\n>\n  <template #body>\n    <div class=\"absolute font-mono right-1 top-1 cursor-pointer text-xl\" @click=\"showDetailModal = false;\" role=\"button\" aria-label=\"Close modal\">&times;</div>\n    <div class=\"h-full overflow-auto\">\n      <dashboard-result\n        v-if=\"dashboardResult\"\n        :result=\"dashboardResult.result\"\n        :finishedEvaluatingAt=\"dashboardResult.finishedEvaluatingAt\"\n        :fullscreen=\"true\"\n        :responsive=\"true\">\n      </dashboard-result>\n    </div>\n  </template>\n</modal>\n";
 
 /***/ }),
 
@@ -14881,7 +14919,7 @@ var bson = /*#__PURE__*/Object.freeze({
 /***/ ((module) => {
 
 "use strict";
-module.exports = /*#__PURE__*/JSON.parse('{"name":"@mongoosejs/studio","version":"0.0.117","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":{"type":"git","url":"https://github.com/mongoosejs/studio"},"dependencies":{"archetype":"0.13.1","csv-stringify":"6.3.0","ejson":"^2.2.3","extrovert":"0.0.26","marked":"15.0.12","node-inspect-extracted":"3.x","tailwindcss":"3.4.0","vanillatoasts":"^1.6.0","vue":"3.x","webpack":"5.x"},"peerDependencies":{"bson":"^5.5.1 || 6.x","express":"4.x","mongoose":"7.x || 8.x"},"devDependencies":{"@masteringjs/eslint-config":"0.1.1","axios":"1.2.2","dedent":"^1.6.0","eslint":"9.30.0","express":"4.x","mocha":"10.2.0","mongoose":"8.x"},"scripts":{"lint":"eslint .","tailwind":"tailwindcss -o ./frontend/public/tw.css","tailwind:watch":"tailwindcss -o ./frontend/public/tw.css --watch","test":"mocha test/*.test.js"}}');
+module.exports = /*#__PURE__*/JSON.parse('{"name":"@mongoosejs/studio","version":"0.0.119","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":{"type":"git","url":"https://github.com/mongoosejs/studio"},"dependencies":{"archetype":"0.13.1","csv-stringify":"6.3.0","ejson":"^2.2.3","extrovert":"0.0.26","marked":"15.0.12","node-inspect-extracted":"3.x","tailwindcss":"3.4.0","vanillatoasts":"^1.6.0","vue":"3.x","webpack":"5.x"},"peerDependencies":{"bson":"^5.5.1 || 6.x","express":"4.x","mongoose":"7.x || 8.x"},"devDependencies":{"@masteringjs/eslint-config":"0.1.1","axios":"1.2.2","dedent":"^1.6.0","eslint":"9.30.0","express":"4.x","mocha":"10.2.0","mongoose":"8.x"},"scripts":{"lint":"eslint .","tailwind":"tailwindcss -o ./frontend/public/tw.css","tailwind:watch":"tailwindcss -o ./frontend/public/tw.css --watch","test":"mocha test/*.test.js"}}');
 
 /***/ })
 

package/frontend/public/tw.css

@@ -842,6 +842,10 @@ video {
   height: 90vh !important;
 }
 
+.h-12 {
+  height: 3rem;
+}
+
 .h-16 {
   height: 4rem;
 }
@@ -926,6 +930,10 @@ video {
   width: 0px;
 }
 
+.w-12 {
+  width: 3rem;
+}
+
 .w-16 {
   width: 4rem;
 }
@@ -1500,6 +1508,10 @@ video {
   --tw-bg-opacity: 0.4;
 }
 
+.bg-opacity-60 {
+  --tw-bg-opacity: 0.6;
+}
+
 .p-1 {
   padding: 0.25rem;
 }
@@ -1786,9 +1798,9 @@ video {
   color: rgb(7 89 133 / var(--tw-text-opacity));
 }
 
-.text-teal-600 {
+.text-ultramarine-600 {
   --tw-text-opacity: 1;
-  color: rgb(0 168 165 / var(--tw-text-opacity));
+  color: rgb(24 35 255 / var(--tw-text-opacity));
 }
 
 .text-ultramarine-700 {
@@ -1806,23 +1818,18 @@ video {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
-.text-ultramarine-600 {
-  --tw-text-opacity: 1;
-  color: rgb(24 35 255 / var(--tw-text-opacity));
-}
-
 .accent-sky-600 {
   accent-color: #0284c7;
 }
 
-.opacity-50 {
-  opacity: 0.5;
-}
-
 .opacity-25 {
   opacity: 0.25;
 }
 
+.opacity-50 {
+  opacity: 0.5;
+}
+
 .opacity-75 {
   opacity: 0.75;
 }
@@ -2099,11 +2106,6 @@ video {
   color: rgb(55 65 81 / var(--tw-text-opacity));
 }
 
-.hover\:text-teal-900:hover {
-  --tw-text-opacity: 1;
-  color: rgb(10 87 87 / var(--tw-text-opacity));
-}
-
 .hover\:text-ultramarine-900:hover {
   --tw-text-opacity: 1;
   color: rgb(6 14 172 / var(--tw-text-opacity));

package/frontend/src/dashboard/dashboard.html

@@ -39,9 +39,26 @@
           </async-button>
         </div>
       </div>
-      <div v-else>
+      <div v-else-if="dashboardResult">
         <div class="relative">
+          <div v-if="status === 'evaluating'" class="absolute inset-0 flex items-center justify-center bg-white bg-opacity-60 z-10 flex flex-col gap-2">
+            <div>Evaluating Dashboard...</div>
+            <img src="images/loader.gif" class="h-12 w-12" alt="Loading..." />
+          </div>
+          <div v-else-if="dashboardResult.error" class="rounded-md bg-red-50 p-4 mt-4">
+            <div class="flex">
+              <div class="flex-shrink-0">
+                <svg class="h-5 w-5 text-red-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+                  <path fill-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16ZM8.28 7.22a.75.75 0 0 0-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 1 0 1.06 1.06L10 11.06l1.72 1.72a.75.75 0 1 0 1.06-1.06L11.06 10l1.72-1.72a.75.75 0 0 0-1.06-1.06L10 8.94 8.28 7.22Z" clip-rule="evenodd" />
+                </svg>
+              </div>
+              <div class="ml-3">
+                <h3 class="text-sm font-medium text-red-800">{{dashboardResult.error.message || 'Unknown Error'}}</h3>
+              </div>
+            </div>
+          </div>
           <dashboard-result
+            v-else
             :key="dashboardResult.finishedEvaluatingAt"
             :result="dashboardResult.result"
             :finishedEvaluatingAt="dashboardResult.finishedEvaluatingAt"
@@ -59,20 +76,7 @@
         :currentDescription="description"
         :currentTitle="title"
         @close="showEditor=false;"
-        @update="updateCode"
-        @clearError="errorMessage = null"></edit-dashboard>
-    </div>
-    <div v-if="errorMessage" class="rounded-md bg-red-50 p-4 mt-4">
-      <div class="flex">
-        <div class="flex-shrink-0">
-          <svg class="h-5 w-5 text-red-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
-            <path fill-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16ZM8.28 7.22a.75.75 0 0 0-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 1 0 1.06 1.06L10 11.06l1.72 1.72a.75.75 0 1 0 1.06-1.06L11.06 10l1.72-1.72a.75.75 0 0 0-1.06-1.06L10 8.94 8.28 7.22Z" clip-rule="evenodd" />
-          </svg>
-        </div>
-        <div class="ml-3">
-          <h3 class="text-sm font-medium text-red-800">{{errorMessage}}</h3>
-        </div>
-      </div>
+        @update="updateCode"></edit-dashboard>
     </div>
 
   </div>

package/frontend/src/dashboard/dashboard.js

@@ -27,17 +27,13 @@ module.exports = app => app.component('dashboard', {
       this.code = update.doc.code;
       this.title = update.doc.title;
       this.description = update.doc.description;
-      if (update.result) {
-        this.result = update.result;
-      } else {
-        this.errorMessage = update.error.message;
-      }
+
+      await this.evaluateDashboard();
     },
     async evaluateDashboard() {
       this.status = 'evaluating';
-      this.errorMessage = null;
       try {
-        const { dashboard, dashboardResult, error } = await api.Dashboard.getDashboard({ dashboardId: this.dashboardId, evaluate: true });
+        const { dashboard, dashboardResult } = await api.Dashboard.getDashboard({ dashboardId: this.dashboardId, evaluate: true });
         this.dashboard = dashboard;
         this.code = this.dashboard.code;
         this.title = this.dashboard.title;
@@ -45,9 +41,6 @@ module.exports = app => app.component('dashboard', {
         if (dashboardResult) {
           this.dashboardResults.unshift(dashboardResult);
         }
-        if (error) {
-          this.errorMessage = error.message;
-        }
       } finally {
         this.status = 'loaded';
       }
@@ -65,9 +58,6 @@ module.exports = app => app.component('dashboard', {
       return;
     }
     this.dashboard = dashboard;
-    if (error) {
-      this.errorMessage = error.message;
-    }
     this.code = this.dashboard.code;
     this.title = this.dashboard.title;
     this.description = this.dashboard.description ?? '';

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

@@ -6,7 +6,7 @@ const template = require('./edit-dashboard.html');
 module.exports = app => app.component('edit-dashboard', {
   template: template,
   props: ['dashboardId', 'code', 'currentDescription', 'currentTitle'],
-  emits: ['close', 'clearError'],
+  emits: ['close'],
   data: function() {
     return {
       status: 'loaded',
@@ -20,16 +20,16 @@ module.exports = app => app.component('edit-dashboard', {
       this.$emit('close');
     },
     async updateCode() {
-      this.$emit('clearError');
       this.status = 'loading';
       try {
-        const { doc, result, error } = await api.Dashboard.updateDashboard({
+        const { doc } = await api.Dashboard.updateDashboard({
           dashboardId: this.dashboardId,
           code: this.editor.getValue(),
           title: this.title,
-          description: this.description
+          description: this.description,
+          evaluate: false
         });
-        this.$emit('update', { doc, result, error });
+        this.$emit('update', { doc });
         this.editor.setValue(doc.code);
         this.closeEditor();
       } catch (err) {

package/frontend/src/dashboard-result/dashboard-grid/dashboard-grid.html

@@ -0,0 +1,9 @@
+<div class="grid gap-2" :style="{ gridTemplateColumns: gridTemplateColumns }">
+  <template v-for="(row, rowIndex) in value.$grid" :key="rowIndex">
+    <dashboard-result
+      v-for="(cell, colIndex) in row"
+      :key="rowIndex + '-' + colIndex"
+      :result="cell">
+    </dashboard-result>
+  </template>
+</div>

package/frontend/src/dashboard-result/dashboard-grid/dashboard-grid.js

@@ -0,0 +1,20 @@
+'use strict';
+
+const template = require('./dashboard-grid.html');
+
+module.exports = app => app.component('dashboard-grid', {
+  template: template,
+  props: ['value'],
+  computed: {
+    columns() {
+      const grid = this.value && this.value.$grid;
+      if (!Array.isArray(grid) || grid.length === 0) {
+        return 1;
+      }
+      return Math.max(1, ...grid.map(row => Array.isArray(row) ? row.length : 0));
+    },
+    gridTemplateColumns() {
+      return `repeat(${this.columns}, minmax(0, 1fr))`;
+    }
+  }
+});

package/frontend/src/dashboard-result/dashboard-result.js

@@ -31,6 +31,9 @@ module.exports = app => app.component('dashboard-result', {
       if (value.$text) {
         return 'dashboard-text';
       }
+      if (value.$grid) {
+        return 'dashboard-grid';
+      }
     }
   }
 });

package/package.json

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