@mongoosejs/studio 0.0.116 → 0.0.118

package/backend/actions/Dashboard/getDashboard.js

@@ -38,24 +38,45 @@ 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 } };
     }
 
-    const { dashboardResult } = await startExec.then(({ dashboardResult }) => {
-      if (!dashboardResult) {
-        return;
-      }
-      return completeDashboardEvaluate(dashboardResult._id, $workspaceId, authorization, result);
-    });
+    try {
+      const { dashboardResult } = await startExec.then(({ dashboardResult }) => {
+        if (!dashboardResult) {
+          return {};
+        }
+        return completeDashboardEvaluate(
+          dashboardResult._id,
+          $workspaceId,
+          authorization,
+          result
+        );
+      });
 
-    return { dashboard, dashboardResult };
+      return { dashboard, dashboardResult };
+    } catch (error) {
+      return { dashboard, error: { message: error.message } };
+    }
   } else {
     const { dashboardResults } = await getDashboardResults(dashboardId, $workspaceId, authorization);
     return { dashboard, dashboardResults };
   }
 };
 
-async function completeDashboardEvaluate(dashboardResultId, workspaceId, authorization, result) {
+async function completeDashboardEvaluate(dashboardResultId, workspaceId, authorization, result, error) {
   if (!workspaceId) {
     return {};
   }
@@ -70,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/backend/db/dashboardSchema.js

@@ -18,7 +18,7 @@ const dashboardSchema = new mongoose.Schema({
 });
 
 dashboardSchema.methods.evaluate = async function evaluate() {
-  const context = vm.createContext({ db: this.constructor.db, setTimeout });
+  const context = vm.createContext({ db: this.constructor.db, setTimeout, ObjectId: mongoose.Types.ObjectId });
   let result = null;
   result = await vm.runInContext(formatFunction(this.code), context);
   if (result.$document?.constructor?.modelName) {

package/frontend/public/app.js

@@ -1201,24 +1201,20 @@ 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';
       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;
-        if (error) {
-          this.errorMessage = error.message;
-        }
         this.code = this.dashboard.code;
         this.title = this.dashboard.title;
         this.description = this.dashboard.description ?? '';
-        this.dashboardResults.unshift(dashboardResult);
+        if (dashboardResult) {
+          this.dashboardResults.unshift(dashboardResult);
+        }
       } finally {
         this.status = 'loaded';
       }
@@ -1236,9 +1232,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 ?? '';
@@ -1265,6 +1258,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'],
   data: function() {
     return {
       status: 'loaded',
@@ -1280,13 +1274,14 @@ module.exports = app => app.component('edit-dashboard', {
     async updateCode() {
       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) {
@@ -4362,7 +4357,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\"></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";
 
 /***/ }),
 
@@ -4384,7 +4379,7 @@ module.exports = "<div class=\"p-4 bg-gray-100 rounded-lg shadow-lg\">\n    <div
 /***/ ((module) => {
 
 "use strict";
-module.exports = "<div class=\"dashboards max-w-5xl mx-auto mt-8\">\n  <div v-if=\"status === 'loaded' && dashboards.length === 0\">\n    <div class=\"text-center\">\n      <h3 class=\"mt-2 text-sm font-semibold text-gray-900\">No dashboards yet</h3>\n      <p class=\"mt-1 text-sm text-gray-500\">Get started by creating a new dashboard.</p>\n      <div class=\"mt-6\">\n        <button type=\"button\" class=\"inline-flex items-center rounded-md bg-teal-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-teal-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-teal-600\">\n          <svg class=\"-ml-0.5 mr-1.5 h-5 w-5\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n            <path d=\"M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z\" />\n          </svg>\n          New Dashboard\n        </button>\n      </div>\n    </div>\n  </div>\n\n\n  <div class=\"px-4 sm:px-6 lg:px-8\">\n    <div class=\"sm:flex sm:items-center\">\n      <div class=\"sm:flex-auto\">\n        <h1 class=\"text-base font-semibold leading-6 text-gray-900\">Dashboards</h1>\n      </div>\n      <div class=\"mt-4 sm:ml-16 sm:mt-0 sm:flex-none\">\n        <button\n          type=\"button\"\n          @click=\"showCreateDashboardModal = true\"\n          class=\"block rounded-md bg-teal-600 px-3 py-2 text-center text-sm font-semibold text-white shadow-sm hover:bg-teal-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-teal-600\">Create New Dashboard</button>\n      </div>\n    </div>\n    <div class=\"mt-8 flow-root\">\n      <div class=\"-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8\">\n        <div class=\"inline-block min-w-full py-2 align-middle\">\n          <table class=\"min-w-full divide-y divide-gray-300\">\n            <thead>\n              <tr>\n                <th scope=\"col\" class=\"py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6 lg:pl-8\">Title</th>\n                <th scope=\"col\" class=\"px-3 py-3.5 text-left text-sm font-semibold text-gray-900 w-[50%]\">Description</th>\n                <th scope=\"col\" class=\"relative py-3.5 pl-3 pr-4 sm:pr-6 lg:pr-8\">\n                </th>\n                <th scope=\"col\" class=\"relative py-3.5 pl-3 pr-4 sm:pr-6 lg:pr-8\">\n                </th>\n              </tr>\n            </thead>\n            <tbody class=\"divide-y divide-gray-200 bg-white\">\n              <tr v-for=\"dashboard in dashboards\">\n                <td class=\"whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6 lg:pl-8\">{{dashboard.title}}</td>\n                <td class=\"whitespace-nowrap px-3 py-4 text-sm text-gray-500 truncate w-[50%]\">{{dashboard.description}}</td>\n                <td class=\"relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6 lg:pr-8\">\n                  <router-link\n                    :to=\"'/dashboard/' + dashboard._id + '?edit=true'\"\n                    class=\"text-teal-600 hover:text-teal-900\">\n                    Edit\n                  </router-link>\n                </td>\n                <td class=\"relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6 lg:pr-8\">\n                  <router-link\n                    :to=\"'/dashboard/' + dashboard._id\"\n                    class=\"text-teal-600 hover:text-teal-900\">\n                    View\n                  </router-link>\n                </td>\n                <td class=\"relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6 lg:pr-8\">\n                  <button\n                    @click=\"showDeleteDashboardModal=dashboard\"\n                    class=\"text-teal-600 hover:text-teal-900\">\n                    Delete\n                  </button>\n                </td>\n              </tr>\n  \n              <!-- More people... -->\n            </tbody>\n          </table>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <modal v-if=\"showCreateDashboardModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"showCreateDashboardModal = false;\">&times;</div>\n      \n      <create-dashboard @close=\"insertNewDashboard\"></create-dashboard>\n    </template>\n  </modal>\n\n  <modal v-if=\"showDeleteDashboardModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"showDeleteDashboardModal = null;\">&times;</div>\n      <h2>Are you sure you want to delete this dashboard titled {{showDeleteDashboardModal.title}}?</h2>\n      <div class=\"flex space-x-2\">\n        <button class=\"px-4 py-2 bg-red-500 text-white rounded-md hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-500\" @click=\"deleteDashboard(showDeleteDashboardModal)\">Yes, delete</button>\n        <button class=\"px-4 py-2 bg-gray-500 text-white rounded-md hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-600\" @click=\"showDeleteDashboardModal=null;\">Cancel</button>\n      </div>\n    </template>\n  </modal>\n</div>";
+module.exports = "<div class=\"dashboards max-w-5xl mx-auto mt-8\">\n  <div v-if=\"status === 'loading'\" class=\"text-center mt-4\">\n    <svg\n      class=\"inline w-8 h-8 animate-spin text-ultramarine-600\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      fill=\"none\"\n      viewBox=\"0 0 24 24\"\n    >\n      <circle\n        class=\"opacity-25\"\n        cx=\"12\"\n        cy=\"12\"\n        r=\"10\"\n        stroke=\"currentColor\"\n        stroke-width=\"4\"\n      ></circle>\n      <path\n        class=\"opacity-75\"\n        fill=\"currentColor\"\n        d=\"M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z\"\n      ></path>\n    </svg>\n  </div>\n    <div v-if=\"status === 'loaded' && dashboards.length === 0\">\n      <div class=\"text-center\">\n        <h3 class=\"mt-2 text-sm font-semibold text-gray-900\">No dashboards yet</h3>\n        <p class=\"mt-1 text-sm text-gray-500\">Get started by creating a new dashboard.</p>\n        <div class=\"mt-6\">\n          <button type=\"button\" class=\"inline-flex items-center rounded-md bg-ultramarine-600 px-3 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\">\n            <svg class=\"-ml-0.5 mr-1.5 h-5 w-5\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n              <path d=\"M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z\" />\n            </svg>\n            New Dashboard\n          </button>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"px-4 sm:px-6 lg:px-8\">\n      <div class=\"sm:flex sm:items-center\">\n        <div class=\"sm:flex-auto\">\n          <h1 class=\"text-base font-semibold leading-6 text-gray-900\">Dashboards</h1>\n        </div>\n        <div class=\"mt-4 sm:ml-16 sm:mt-0 sm:flex-none\">\n          <button\n            type=\"button\"\n            @click=\"showCreateDashboardModal = true\"\n            class=\"block rounded-md bg-ultramarine-600 px-3 py-2 text-center 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\">Create New Dashboard</button>\n        </div>\n      </div>\n      <div class=\"mt-8 flow-root\">\n        <div class=\"-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8\">\n          <div class=\"inline-block min-w-full py-2 align-middle\">\n            <table class=\"min-w-full divide-y divide-gray-300\">\n              <thead>\n                <tr>\n                  <th scope=\"col\" class=\"py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6 lg:pl-8\">Title</th>\n                  <th scope=\"col\" class=\"px-3 py-3.5 text-left text-sm font-semibold text-gray-900 w-[50%]\">Description</th>\n                  <th scope=\"col\" class=\"relative py-3.5 pl-3 pr-4 sm:pr-6 lg:pr-8\">\n                  </th>\n                  <th scope=\"col\" class=\"relative py-3.5 pl-3 pr-4 sm:pr-6 lg:pr-8\">\n                  </th>\n                </tr>\n              </thead>\n              <tbody class=\"divide-y divide-gray-200 bg-white\">\n                <tr v-for=\"dashboard in dashboards\">\n                  <td class=\"whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6 lg:pl-8\">{{dashboard.title}}</td>\n                  <td class=\"whitespace-nowrap px-3 py-4 text-sm text-gray-500 truncate w-[50%]\">{{dashboard.description}}</td>\n                  <td class=\"relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6 lg:pr-8\">\n                    <router-link\n                      :to=\"'/dashboard/' + dashboard._id + '?edit=true'\"\n                      class=\"text-ultramarine-600 hover:text-ultramarine-900\">\n                      Edit\n                    </router-link>\n                  </td>\n                  <td class=\"relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6 lg:pr-8\">\n                    <router-link\n                      :to=\"'/dashboard/' + dashboard._id\"\n                      class=\"text-ultramarine-600 hover:text-ultramarine-900\">\n                      View\n                    </router-link>\n                  </td>\n                  <td class=\"relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6 lg:pr-8\">\n                    <button\n                      @click=\"showDeleteDashboardModal=dashboard\"\n                      class=\"text-ultramarine-600 hover:text-ultramarine-900\">\n                      Delete\n                    </button>\n                  </td>\n                </tr>\n\n                <!-- More people... -->\n              </tbody>\n            </table>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <modal v-if=\"showCreateDashboardModal\">\n      <template v-slot:body>\n        <div class=\"modal-exit\" @click=\"showCreateDashboardModal = false;\">&times;</div>\n\n        <create-dashboard @close=\"insertNewDashboard\"></create-dashboard>\n      </template>\n    </modal>\n\n    <modal v-if=\"showDeleteDashboardModal\">\n      <template v-slot:body>\n        <div class=\"modal-exit\" @click=\"showDeleteDashboardModal = null;\">&times;</div>\n        <h2>Are you sure you want to delete this dashboard titled {{showDeleteDashboardModal.title}}?</h2>\n        <div class=\"flex space-x-2\">\n          <button class=\"px-4 py-2 bg-red-500 text-white rounded-md hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-500\" @click=\"deleteDashboard(showDeleteDashboardModal)\">Yes, delete</button>\n          <button class=\"px-4 py-2 bg-gray-500 text-white rounded-md hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-600\" @click=\"showDeleteDashboardModal=null;\">Cancel</button>\n        </div>\n      </template>\n    </modal>\n  </div>\n</div>";
 
 /***/ }),
 
@@ -14876,7 +14871,7 @@ var bson = /*#__PURE__*/Object.freeze({
 /***/ ((module) => {
 
 "use strict";
-module.exports = /*#__PURE__*/JSON.parse('{"name":"@mongoosejs/studio","version":"0.0.116","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.118","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

@@ -642,10 +642,6 @@ video {
   top: 90%;
 }
 
-.bottom-0 {
-  bottom: 0px;
-}
-
 .isolate {
   isolation: isolate;
 }
@@ -846,6 +842,10 @@ video {
   height: 90vh !important;
 }
 
+.h-12 {
+  height: 3rem;
+}
+
 .h-16 {
   height: 4rem;
 }
@@ -930,6 +930,10 @@ video {
   width: 0px;
 }
 
+.w-12 {
+  width: 3rem;
+}
+
 .w-16 {
   width: 4rem;
 }
@@ -982,6 +986,10 @@ video {
   max-width: 64rem;
 }
 
+.max-w-\[calc\(100vw-3rem\)\] {
+  max-width: calc(100vw - 3rem);
+}
+
 .max-w-\[calc\(100vw-4rem\)\] {
   max-width: calc(100vw - 4rem);
 }
@@ -990,10 +998,6 @@ video {
   max-width: 20rem;
 }
 
-.max-w-\[calc\(100vw-3rem\)\] {
-  max-width: calc(100vw - 3rem);
-}
-
 .flex-1 {
   flex: 1 1 0%;
 }
@@ -1044,6 +1048,16 @@ 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));
 }
 
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.animate-spin {
+  animation: spin 1s linear infinite;
+}
+
 .cursor-not-allowed {
   cursor: not-allowed;
 }
@@ -1494,6 +1508,10 @@ video {
   --tw-bg-opacity: 0.4;
 }
 
+.bg-opacity-60 {
+  --tw-bg-opacity: 0.6;
+}
+
 .p-1 {
   padding: 0.25rem;
 }
@@ -1780,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 {
@@ -1804,10 +1822,18 @@ video {
   accent-color: #0284c7;
 }
 
+.opacity-25 {
+  opacity: 0.25;
+}
+
 .opacity-50 {
   opacity: 0.5;
 }
 
+.opacity-75 {
+  opacity: 0.75;
+}
+
 .shadow {
   --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
@@ -2080,14 +2106,9 @@ 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-gray-600:hover {
+.hover\:text-ultramarine-900:hover {
   --tw-text-opacity: 1;
-  color: rgb(75 85 99 / var(--tw-text-opacity));
+  color: rgb(6 14 172 / var(--tw-text-opacity));
 }
 
 .focus\:z-10:focus {
@@ -2367,10 +2388,6 @@ video {
   .md\:hidden {
     display: none;
   }
-
-  .md\:p-3 {
-    padding: 0.75rem;
-  }
 }
 
 @media (min-width: 1024px) {
@@ -2391,14 +2408,14 @@ video {
     width: 16rem;
   }
 
-  .lg\:max-w-\[calc\(100vw-20rem\)\] {
-    max-width: calc(100vw - 20rem);
-  }
-
   .lg\:max-w-\[calc\(100vw-15rem\)\] {
     max-width: calc(100vw - 15rem);
   }
 
+  .lg\:max-w-\[calc\(100vw-20rem\)\] {
+    max-width: calc(100vw - 20rem);
+  }
+
   .lg\:px-8 {
     padding-left: 2rem;
     padding-right: 2rem;

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"
@@ -61,18 +78,6 @@
         @close="showEditor=false;"
         @update="updateCode"></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>
-    </div>
 
   </div>
   <div v-if="!dashboard && status !== 'loading'">

package/frontend/src/dashboard/dashboard.js

@@ -27,24 +27,20 @@ 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';
       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;
-        if (error) {
-          this.errorMessage = error.message;
-        }
         this.code = this.dashboard.code;
         this.title = this.dashboard.title;
         this.description = this.dashboard.description ?? '';
-        this.dashboardResults.unshift(dashboardResult);
+        if (dashboardResult) {
+          this.dashboardResults.unshift(dashboardResult);
+        }
       } finally {
         this.status = 'loaded';
       }
@@ -62,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,6 +6,7 @@ const template = require('./edit-dashboard.html');
 module.exports = app => app.component('edit-dashboard', {
   template: template,
   props: ['dashboardId', 'code', 'currentDescription', 'currentTitle'],
+  emits: ['close'],
   data: function() {
     return {
       status: 'loaded',
@@ -21,13 +22,14 @@ module.exports = app => app.component('edit-dashboard', {
     async updateCode() {
       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/dashboards/dashboards.html

@@ -1,97 +1,119 @@
 <div class="dashboards max-w-5xl mx-auto mt-8">
-  <div v-if="status === 'loaded' && dashboards.length === 0">
-    <div class="text-center">
-      <h3 class="mt-2 text-sm font-semibold text-gray-900">No dashboards yet</h3>
-      <p class="mt-1 text-sm text-gray-500">Get started by creating a new dashboard.</p>
-      <div class="mt-6">
-        <button type="button" class="inline-flex items-center rounded-md bg-teal-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-teal-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-teal-600">
-          <svg class="-ml-0.5 mr-1.5 h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-            <path d="M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z" />
-          </svg>
-          New Dashboard
-        </button>
+  <div v-if="status === 'loading'" class="text-center mt-4">
+    <svg
+      class="inline w-8 h-8 animate-spin text-ultramarine-600"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+    >
+      <circle
+        class="opacity-25"
+        cx="12"
+        cy="12"
+        r="10"
+        stroke="currentColor"
+        stroke-width="4"
+      ></circle>
+      <path
+        class="opacity-75"
+        fill="currentColor"
+        d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"
+      ></path>
+    </svg>
+  </div>
+    <div v-if="status === 'loaded' && dashboards.length === 0">
+      <div class="text-center">
+        <h3 class="mt-2 text-sm font-semibold text-gray-900">No dashboards yet</h3>
+        <p class="mt-1 text-sm text-gray-500">Get started by creating a new dashboard.</p>
+        <div class="mt-6">
+          <button type="button" class="inline-flex items-center rounded-md bg-ultramarine-600 px-3 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">
+            <svg class="-ml-0.5 mr-1.5 h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+              <path d="M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z" />
+            </svg>
+            New Dashboard
+          </button>
+        </div>
       </div>
     </div>
-  </div>
-
 
-  <div class="px-4 sm:px-6 lg:px-8">
-    <div class="sm:flex sm:items-center">
-      <div class="sm:flex-auto">
-        <h1 class="text-base font-semibold leading-6 text-gray-900">Dashboards</h1>
-      </div>
-      <div class="mt-4 sm:ml-16 sm:mt-0 sm:flex-none">
-        <button
-          type="button"
-          @click="showCreateDashboardModal = true"
-          class="block rounded-md bg-teal-600 px-3 py-2 text-center text-sm font-semibold text-white shadow-sm hover:bg-teal-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-teal-600">Create New Dashboard</button>
+    <div class="px-4 sm:px-6 lg:px-8">
+      <div class="sm:flex sm:items-center">
+        <div class="sm:flex-auto">
+          <h1 class="text-base font-semibold leading-6 text-gray-900">Dashboards</h1>
+        </div>
+        <div class="mt-4 sm:ml-16 sm:mt-0 sm:flex-none">
+          <button
+            type="button"
+            @click="showCreateDashboardModal = true"
+            class="block rounded-md bg-ultramarine-600 px-3 py-2 text-center 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">Create New Dashboard</button>
+        </div>
       </div>
-    </div>
-    <div class="mt-8 flow-root">
-      <div class="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
-        <div class="inline-block min-w-full py-2 align-middle">
-          <table class="min-w-full divide-y divide-gray-300">
-            <thead>
-              <tr>
-                <th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6 lg:pl-8">Title</th>
-                <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900 w-[50%]">Description</th>
-                <th scope="col" class="relative py-3.5 pl-3 pr-4 sm:pr-6 lg:pr-8">
-                </th>
-                <th scope="col" class="relative py-3.5 pl-3 pr-4 sm:pr-6 lg:pr-8">
-                </th>
-              </tr>
-            </thead>
-            <tbody class="divide-y divide-gray-200 bg-white">
-              <tr v-for="dashboard in dashboards">
-                <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6 lg:pl-8">{{dashboard.title}}</td>
-                <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 truncate w-[50%]">{{dashboard.description}}</td>
-                <td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6 lg:pr-8">
-                  <router-link
-                    :to="'/dashboard/' + dashboard._id + '?edit=true'"
-                    class="text-teal-600 hover:text-teal-900">
-                    Edit
-                  </router-link>
-                </td>
-                <td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6 lg:pr-8">
-                  <router-link
-                    :to="'/dashboard/' + dashboard._id"
-                    class="text-teal-600 hover:text-teal-900">
-                    View
-                  </router-link>
-                </td>
-                <td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6 lg:pr-8">
-                  <button
-                    @click="showDeleteDashboardModal=dashboard"
-                    class="text-teal-600 hover:text-teal-900">
-                    Delete
-                  </button>
-                </td>
-              </tr>
-  
-              <!-- More people... -->
-            </tbody>
-          </table>
+      <div class="mt-8 flow-root">
+        <div class="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
+          <div class="inline-block min-w-full py-2 align-middle">
+            <table class="min-w-full divide-y divide-gray-300">
+              <thead>
+                <tr>
+                  <th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6 lg:pl-8">Title</th>
+                  <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900 w-[50%]">Description</th>
+                  <th scope="col" class="relative py-3.5 pl-3 pr-4 sm:pr-6 lg:pr-8">
+                  </th>
+                  <th scope="col" class="relative py-3.5 pl-3 pr-4 sm:pr-6 lg:pr-8">
+                  </th>
+                </tr>
+              </thead>
+              <tbody class="divide-y divide-gray-200 bg-white">
+                <tr v-for="dashboard in dashboards">
+                  <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6 lg:pl-8">{{dashboard.title}}</td>
+                  <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 truncate w-[50%]">{{dashboard.description}}</td>
+                  <td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6 lg:pr-8">
+                    <router-link
+                      :to="'/dashboard/' + dashboard._id + '?edit=true'"
+                      class="text-ultramarine-600 hover:text-ultramarine-900">
+                      Edit
+                    </router-link>
+                  </td>
+                  <td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6 lg:pr-8">
+                    <router-link
+                      :to="'/dashboard/' + dashboard._id"
+                      class="text-ultramarine-600 hover:text-ultramarine-900">
+                      View
+                    </router-link>
+                  </td>
+                  <td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6 lg:pr-8">
+                    <button
+                      @click="showDeleteDashboardModal=dashboard"
+                      class="text-ultramarine-600 hover:text-ultramarine-900">
+                      Delete
+                    </button>
+                  </td>
+                </tr>
+
+                <!-- More people... -->
+              </tbody>
+            </table>
+          </div>
         </div>
       </div>
     </div>
-  </div>
 
-  <modal v-if="showCreateDashboardModal">
-    <template v-slot:body>
-      <div class="modal-exit" @click="showCreateDashboardModal = false;">&times;</div>
-      
-      <create-dashboard @close="insertNewDashboard"></create-dashboard>
-    </template>
-  </modal>
+    <modal v-if="showCreateDashboardModal">
+      <template v-slot:body>
+        <div class="modal-exit" @click="showCreateDashboardModal = false;">&times;</div>
 
-  <modal v-if="showDeleteDashboardModal">
-    <template v-slot:body>
-      <div class="modal-exit" @click="showDeleteDashboardModal = null;">&times;</div>
-      <h2>Are you sure you want to delete this dashboard titled {{showDeleteDashboardModal.title}}?</h2>
-      <div class="flex space-x-2">
-        <button class="px-4 py-2 bg-red-500 text-white rounded-md hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-500" @click="deleteDashboard(showDeleteDashboardModal)">Yes, delete</button>
-        <button class="px-4 py-2 bg-gray-500 text-white rounded-md hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-600" @click="showDeleteDashboardModal=null;">Cancel</button>
-      </div>
-    </template>
-  </modal>
+        <create-dashboard @close="insertNewDashboard"></create-dashboard>
+      </template>
+    </modal>
+
+    <modal v-if="showDeleteDashboardModal">
+      <template v-slot:body>
+        <div class="modal-exit" @click="showDeleteDashboardModal = null;">&times;</div>
+        <h2>Are you sure you want to delete this dashboard titled {{showDeleteDashboardModal.title}}?</h2>
+        <div class="flex space-x-2">
+          <button class="px-4 py-2 bg-red-500 text-white rounded-md hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-500" @click="deleteDashboard(showDeleteDashboardModal)">Yes, delete</button>
+          <button class="px-4 py-2 bg-gray-500 text-white rounded-md hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-600" @click="showDeleteDashboardModal=null;">Cancel</button>
+        </div>
+      </template>
+    </modal>
+  </div>
 </div>

package/package.json

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