@mongoosejs/studio 0.0.101 → 0.0.102

package/backend/actions/Dashboard/getDashboard.js

@@ -32,24 +32,27 @@ module.exports = ({ db }) => async function getDashboard(params) {
   const dashboard = await Dashboard.findOne({ _id: dashboardId });
   if (evaluate) {
     let result = null;
-    const startExec = startDashboardExec(dashboardId, $workspaceId, authorization);
+    const startExec = startDashboardEvaluate(dashboardId, $workspaceId, authorization);
+    // Avoid unhandled promise rejection since we handle the promise later.
+    startExec.catch(() => {});
     try {
       result = await dashboard.evaluate();
     } catch (error) {
       return { dashboard, error: { message: error.message } };
     }
 
-    await startExec.then(({ dashboardResult }) => {
+    const { dashboardResult } = await startExec.then(({ dashboardResult }) => {
       if (!dashboardResult) {
         return;
       }
       return completeDashboardEvaluate(dashboardResult._id, $workspaceId, authorization, result);
     });
 
-    return { dashboard, result };
+    return { dashboard, dashboardResult };
+  } else {
+    const { dashboardResults } = await getDashboardResults(dashboardId, $workspaceId, authorization);
+    return { dashboard, dashboardResults };
   }
-
-  return { dashboard };
 };
 
 async function completeDashboardEvaluate(dashboardResultId, workspaceId, authorization, result) {
@@ -60,7 +63,7 @@ async function completeDashboardEvaluate(dashboardResultId, workspaceId, authori
   if (authorization) {
     headers.Authorization = authorization;
   }
-  const response = await fetch('http://localhost:7777/.netlify/functions/completeDashboardEvaluate', {
+  const response = await fetch('https://mongoose-js.netlify.app/.netlify/functions/completeDashboardEvaluate', {
     method: 'POST',
     headers,
     body: JSON.stringify({
@@ -81,7 +84,7 @@ async function completeDashboardEvaluate(dashboardResultId, workspaceId, authori
   return await response.json();
 }
 
-async function startDashboardExec(dashboardId, workspaceId, authorization) {
+async function startDashboardEvaluate(dashboardId, workspaceId, authorization) {
   if (!workspaceId) {
     return {};
   }
@@ -89,7 +92,7 @@ async function startDashboardExec(dashboardId, workspaceId, authorization) {
   if (authorization) {
     headers.Authorization = authorization;
   }
-  const response = await fetch('http://localhost:7777/.netlify/functions/startDashboardExec', {
+  const response = await fetch('https://mongoose-js.netlify.app/.netlify/functions/startDashboardEvaluate', {
     method: 'POST',
     headers,
     body: JSON.stringify({
@@ -100,7 +103,34 @@ async function startDashboardExec(dashboardId, workspaceId, authorization) {
   }).then(response => {
     if (response.status < 200 || response.status >= 400) {
       return response.json().then(data => {
-        throw new Error(`startDashboardExec error: ${data.message}`);
+        throw new Error(`startDashboardEvaluate error: ${data.message}`);
+      });
+    }
+    return response;
+  });
+
+  return await response.json();
+}
+
+async function getDashboardResults(dashboardId, workspaceId, authorization) {
+  if (!workspaceId) {
+    return {};
+  }
+  const headers = { 'Content-Type': 'application/json' };
+  if (authorization) {
+    headers.Authorization = authorization;
+  }
+  const response = await fetch('https://mongoose-js.netlify.app/.netlify/functions/getDashboardResults', {
+    method: 'POST',
+    headers,
+    body: JSON.stringify({
+      dashboardId,
+      workspaceId
+    })
+  }).then(response => {
+    if (response.status < 200 || response.status >= 400) {
+      return response.json().then(data => {
+        throw new Error(`getDashboardResults error: ${data.message}`);
       });
     }
     return response;

package/backend/actions/Model/getDocuments.js

@@ -52,11 +52,16 @@ module.exports = ({ db }) => async function getDocuments(params) {
   }
 
   const hasSort = typeof sort === 'object' && sort != null && Object.keys(sort).length > 0;
-  const docs = await Model.
+  const cursor = await Model.
     find(filter == null ? {} : filter).
     limit(limit).
     skip(skip).
-    sort(hasSort ? sort : { _id: -1 });
+    sort(hasSort ? sort : { _id: -1 }).
+    cursor();
+  const docs = [];
+  for (let doc = await cursor.next(); doc != null; doc = await cursor.next()) {
+    docs.push(doc);
+  }
 
   const schemaPaths = {};
   for (const path of Object.keys(Model.schema.paths)) {

package/frontend/public/app.js

@@ -783,7 +783,7 @@ const template = __webpack_require__(/*! ./dashboard-chart.html */ "./frontend/s
 
 module.exports = app => app.component('dashboard-chart', {
   template: template,
-  props: ['value'],
+  props: ['value', 'responsive'],
   mounted() {
     const ctx = this.$refs.chart.getContext('2d');
     const chart = new Chart(ctx, this.value.$chart);
@@ -892,7 +892,7 @@ const template = __webpack_require__(/*! ./dashboard-result.html */ "./frontend/
 
 module.exports = app => app.component('dashboard-result', {
   template: template,
-  props: ['result'],
+  props: ['result', 'finishedEvaluatingAt'],
   mounted: async function() {
   },
   methods: {
@@ -961,7 +961,7 @@ module.exports = app => app.component('dashboard', {
       description: '',
       showEditor: false,
       dashboard: null,
-      result: null,
+      dashboardResults: [],
       errorMessage: null
     };
   },
@@ -978,11 +978,32 @@ module.exports = app => app.component('dashboard', {
       } else {
         this.errorMessage = update.error.message;
       }
+    },
+    async evaluateDashboard() {
+      this.status = 'evaluating';
+      try {
+        const { dashboard, dashboardResult, error } = 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);
+      } finally {
+        this.status = 'loaded';
+      }
+    }
+  },
+  computed: {
+    dashboardResult() {
+      return this.dashboardResults.length > 0 ? this.dashboardResults[0] : null;
     }
   },
   mounted: async function() {
     this.showEditor = this.$route.query.edit;
-    const { dashboard, result, error } = await api.Dashboard.getDashboard({ dashboardId: this.dashboardId, evaluate: !this.showEditor });
+    const { dashboard, dashboardResults, error } = await api.Dashboard.getDashboard({ dashboardId: this.dashboardId, evaluate: false });
     if (!dashboard) {
       return;
     }
@@ -993,7 +1014,7 @@ module.exports = app => app.component('dashboard', {
     this.code = this.dashboard.code;
     this.title = this.dashboard.title;
     this.description = this.dashboard.description ?? '';
-    this.result = result;
+    this.dashboardResults = dashboardResults;
     this.status = 'loaded';
   }
 });
@@ -1756,6 +1777,26 @@ module.exports = app => app.component('export-query-results', {
   }
 });
 
+/***/ }),
+
+/***/ "./frontend/src/format.js":
+/*!********************************!*\
+  !*** ./frontend/src/format.js ***!
+  \********************************/
+/***/ ((__unused_webpack_module, exports) => {
+
+"use strict";
+
+
+exports.isoToLongDateTime = function isoToLongDateTime(str) {
+  if (!str) {
+    return 'Unknown';
+  }
+  const date = new Date(str);
+  return date.toLocaleString('en-US', { month: 'short', day: '2-digit', year: 'numeric', hour: 'numeric', minute: 'numeric' });
+};
+
+
 /***/ }),
 
 /***/ "./frontend/src/index.js":
@@ -1775,6 +1816,7 @@ const { version } = __webpack_require__(/*! ../../package.json */ "./package.jso
 console.log(`Mongoose Studio Version ${version}`);
 
 const api = __webpack_require__(/*! ./api */ "./frontend/src/api.js");
+const format = __webpack_require__(/*! ./format */ "./frontend/src/format.js");
 const mothership = __webpack_require__(/*! ./mothership */ "./frontend/src/mothership.js");
 const { routes } = __webpack_require__(/*! ./routes */ "./frontend/src/routes.js");
 const vanillatoasts = __webpack_require__(/*! vanillatoasts */ "./node_modules/vanillatoasts/vanillatoasts.js");
@@ -1912,6 +1954,7 @@ router.beforeEach((to, from, next) => {
   }
 });
 
+app.config.globalProperties = { format };
 app.use(router);
 
 app.mount('#content');
@@ -3220,6 +3263,8 @@ var map = {
 	"./export-query-results/export-query-results.css": "./frontend/src/export-query-results/export-query-results.css",
 	"./export-query-results/export-query-results.html": "./frontend/src/export-query-results/export-query-results.html",
 	"./export-query-results/export-query-results.js": "./frontend/src/export-query-results/export-query-results.js",
+	"./format": "./frontend/src/format.js",
+	"./format.js": "./frontend/src/format.js",
 	"./index": "./frontend/src/index.js",
 	"./index.js": "./frontend/src/index.js",
 	"./list-array/list-array": "./frontend/src/list-array/list-array.js",
@@ -3917,7 +3962,7 @@ module.exports = "<button v-bind=\"attrsToBind\" :disabled=\"isDisabled\" @click
 /***/ ((module) => {
 
 "use strict";
-module.exports = "<div class=\"relative border rounded bg-gray-100 text-black text-sm overflow-hidden\">\n  <div class=\"flex border-b pt-[1px] text-xs font-medium bg-gray-200\">\n    <button\n      class=\"px-3 py-1 border-r border-gray-300 hover:bg-green-300\"\n      :class=\"{'bg-gray-300': activeTab === 'code', 'bg-green-300': activeTab === 'code'}\"\n      @click=\"activeTab = 'code'\">\n      Code\n    </button>\n    <button\n      class=\"px-3 py-1 hover:bg-green-300\"\n      :class=\"{'bg-green-300': activeTab === 'output'}\"\n      @click=\"activeTab = 'output'\">\n      Output\n    </button>\n    <div class=\"ml-auto mr-1 flex\">\n      <button\n        v-if=\"activeTab === 'output'\"\n        class=\"px-2 py-1 mr-1 text-xs bg-gray-500 text-white border-none rounded cursor-pointer hover:bg-gray-600 transition-colors flex items-center\"\n        @click=\"copyOutput\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-3 w-3\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3\" />\n        </svg>\n      </button>\n      <button\n        v-if=\"activeTab === 'output'\"\n        class=\"px-2 py-1 mr-1 text-xs bg-blue-500 text-white border-none rounded cursor-pointer hover:bg-blue-600 transition-colors flex items-center\"\n        @click=\"openDetailModal\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-3 w-3\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 1v4m0 0h-4m4 0l-5-5\" />\n        </svg>\n      </button>\n      <async-button\n        class=\"px-2 py-1 text-xs bg-green-500 text-white border-none rounded cursor-pointer hover:bg-green-600 transition-colors disabled:bg-gray-400\"\n        @click=\"executeScript(message, script)\">\n        Execute\n      </async-button>\n    </div>\n  </div>\n\n  <pre class=\"p-3 whitespace-pre-wrap max-h-[50vh] max-w-[calc(100vw-4rem)] lg:max-w-[calc(100vw-20rem)] overflow-y-auto\" v-show=\"activeTab === 'code'\"><code v-text=\"script\" ref=\"code\" :class=\"'language-' + language\"></code></pre>\n\n  <div class=\"p-3 whitespace-pre-wrap max-h-[50vh] overflow-y-auto bg-white border-t max-w-[calc(100vw-4rem)] lg:max-w-[calc(100vw-20rem)] relative\" v-show=\"activeTab === 'output'\">\n    <dashboard-chart v-if=\"message.executionResult?.output?.$chart\" :value=\"message.executionResult?.output\" />\n    <pre v-else>{{ message.executionResult?.output || 'No output' }}</pre>\n  </div>\n\n  <modal ref=\"outputModal\" v-if=\"showDetailModal\" containerClass=\"!h-[90vh] !w-[90vw]\">\n    <template #body>\n      <div class=\"absolute font-mono right-1 top-1 cursor-pointer text-xl\" @click=\"showDetailModal = false;\">&times;</div>\n      <div class=\"h-full overflow-auto\">\n        <dashboard-chart v-if=\"message.executionResult?.output?.$chart\" :value=\"message.executionResult?.output\" />\n        <pre v-else class=\"whitespace-pre-wrap\">{{ message.executionResult?.output || 'No output' }}</pre>\n      </div>\n    </template>\n  </modal>\n</div>\n";
+module.exports = "<div class=\"relative border rounded bg-gray-100 text-black text-sm overflow-hidden\">\n  <div class=\"flex border-b pt-[1px] text-xs font-medium bg-gray-200\">\n    <button\n      class=\"px-3 py-1 border-r border-gray-300 hover:bg-green-300\"\n      :class=\"{'bg-gray-300': activeTab === 'code', 'bg-green-300': activeTab === 'code'}\"\n      @click=\"activeTab = 'code'\">\n      Code\n    </button>\n    <button\n      class=\"px-3 py-1 hover:bg-green-300\"\n      :class=\"{'bg-green-300': activeTab === 'output'}\"\n      @click=\"activeTab = 'output'\">\n      Output\n    </button>\n    <div class=\"ml-auto mr-1 flex\">\n      <button\n        v-if=\"activeTab === 'output'\"\n        class=\"px-2 py-1 mr-1 text-xs bg-gray-500 text-white border-none rounded cursor-pointer hover:bg-gray-600 transition-colors flex items-center\"\n        @click=\"copyOutput\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-3 w-3\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3\" />\n        </svg>\n      </button>\n      <button\n        v-if=\"activeTab === 'output'\"\n        class=\"px-2 py-1 mr-1 text-xs bg-blue-500 text-white border-none rounded cursor-pointer hover:bg-blue-600 transition-colors flex items-center\"\n        @click=\"openDetailModal\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-3 w-3\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 1v4m0 0h-4m4 0l-5-5\" />\n        </svg>\n      </button>\n      <async-button\n        class=\"px-2 py-1 text-xs bg-green-500 text-white border-none rounded cursor-pointer hover:bg-green-600 transition-colors disabled:bg-gray-400\"\n        @click=\"executeScript(message, script)\">\n        Execute\n      </async-button>\n    </div>\n  </div>\n\n  <pre class=\"p-3 whitespace-pre-wrap max-h-[50vh] max-w-[calc(100vw-4rem)] lg:max-w-[calc(100vw-20rem)] overflow-y-auto\" v-show=\"activeTab === 'code'\"><code v-text=\"script\" ref=\"code\" :class=\"'language-' + language\"></code></pre>\n\n  <div class=\"p-3 whitespace-pre-wrap max-h-[50vh] overflow-y-auto bg-white border-t max-w-[calc(100vw-4rem)] lg:max-w-[calc(100vw-20rem)] relative\" v-show=\"activeTab === 'output'\">\n    <dashboard-chart v-if=\"message.executionResult?.output?.$chart\" :value=\"message.executionResult?.output\" />\n    <pre v-else>{{ message.executionResult?.output || 'No output' }}</pre>\n  </div>\n\n  <modal ref=\"outputModal\" v-if=\"showDetailModal\" containerClass=\"!h-[90vh] !w-[90vw]\">\n    <template #body>\n      <div class=\"absolute font-mono right-1 top-1 cursor-pointer text-xl\" @click=\"showDetailModal = false;\">&times;</div>\n      <div class=\"h-full overflow-auto\">\n        <dashboard-chart v-if=\"message.executionResult?.output?.$chart\" :value=\"message.executionResult?.output\" :responsive=\"true\" />\n        <pre v-else class=\"whitespace-pre-wrap\">{{ message.executionResult?.output || 'No output' }}</pre>\n      </div>\n    </template>\n  </modal>\n</div>\n";
 
 /***/ }),
 
@@ -4005,7 +4050,7 @@ module.exports = "<div>\n  <div class=\"mb-2\">\n    <textarea class=\"border bo
 /***/ ((module) => {
 
 "use strict";
-module.exports = "<div>\n  <div v-if=\"header\" class=\"border-b border-gray-100 px-2 pb-2 text-xl font-bold\">\n    {{header}}\n  </div>\n  <div class=\"text-xl\">\n    <canvas ref=\"chart\"></canvas>\n  </div>\n</div>\n";
+module.exports = "<div :class=\"responsive ? 'h-full' : ''\">\n  <div v-if=\"header\" class=\"border-b border-gray-100 px-2 pb-2 text-xl font-bold\">\n    {{header}}\n  </div>\n  <div class=\"text-xl\" :class=\"responsive ? 'h-full' : ''\">\n    <canvas ref=\"chart\"></canvas>\n  </div>\n</div>\n";
 
 /***/ }),
 
@@ -4038,7 +4083,7 @@ module.exports = "<div class=\"py-2\">\n  <div v-if=\"header\" class=\"border-b
 /***/ ((module) => {
 
 "use strict";
-module.exports = "<div>\n  <div v-if=\"Array.isArray(result)\">\n    <div v-for=\"el in result\">\n      <component\n        class=\"bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-xl\"\n        :is=\"getComponentForValue(res)\"\n        :value=\"res\">\n      </component>\n    </div>\n  </div>\n  <div v-else>\n    <component\n      class=\"bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-xl\"\n      :is=\"getComponentForValue(result)\"\n      :value=\"result\">\n    </component>\n  </div>\n</div>\n";
+module.exports = "<div>\n  <div v-if=\"Array.isArray(result)\">\n    <div v-for=\"el in result\">\n      <component\n        class=\"bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-xl\"\n        :is=\"getComponentForValue(res)\"\n        :value=\"res\">\n      </component>\n    </div>\n  </div>\n  <div v-else>\n    <component\n      class=\"bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-xl\"\n      :is=\"getComponentForValue(result)\"\n      :value=\"result\">\n    </component>\n  </div>\n  <div class=\"text-right text-sm text-gray-700 mt-1\" v-if=\"finishedEvaluatingAt\">\n    Last Evaluated: {{ format.isoToLongDateTime(finishedEvaluatingAt) }}\n  </div>\n</div>\n";
 
 /***/ }),
 
@@ -4060,7 +4105,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 === 'loaded'\" 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>\n        <button\n          @click=\"showEditor = true\"\n          type=\"button\"\n          class=\"rounded-md bg-teal-600 px-2.5 py-1.5 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          <img src=\"images/edit.svg\" class=\"inline h-[1em]\" /> Edit\n        </button>\n      </div>\n    </div>\n    <div v-if=\"!showEditor\" class=\"mt-4 mb-4\">\n      <dashboard-result :result=\"result\"></dashboard-result>\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 === 'loaded'\">\n    No dashboard with the given id could be found.\n  </div>\n</div>\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>\n        <dashboard-result :result=\"dashboardResult.result\" :finishedEvaluatingAt=\"dashboardResult.finishedEvaluatingAt\"></dashboard-result>\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";
 
 /***/ }),
 
@@ -14574,7 +14619,7 @@ var bson = /*#__PURE__*/Object.freeze({
 /***/ ((module) => {
 
 "use strict";
-module.exports = /*#__PURE__*/JSON.parse('{"name":"@mongoosejs/studio","version":"0.0.101","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","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.102","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","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

@@ -866,8 +866,8 @@ video {
   height: 2rem;
 }
 
-.h-\[1em\] {
-  height: 1em;
+.h-\[1\.25em\] {
+  height: 1.25em;
 }
 
 .h-\[300px\] {
@@ -1563,6 +1563,11 @@ video {
   padding-bottom: 1.5rem;
 }
 
+.py-8 {
+  padding-top: 2rem;
+  padding-bottom: 2rem;
+}
+
 .pb-2 {
   padding-bottom: 0.5rem;
 }

package/frontend/src/chat/chat-message-script/chat-message-script.html

@@ -48,7 +48,7 @@
     <template #body>
       <div class="absolute font-mono right-1 top-1 cursor-pointer text-xl" @click="showDetailModal = false;">&times;</div>
       <div class="h-full overflow-auto">
-        <dashboard-chart v-if="message.executionResult?.output?.$chart" :value="message.executionResult?.output" />
+        <dashboard-chart v-if="message.executionResult?.output?.$chart" :value="message.executionResult?.output" :responsive="true" />
         <pre v-else class="whitespace-pre-wrap">{{ message.executionResult?.output || 'No output' }}</pre>
       </div>
     </template>

package/frontend/src/dashboard/dashboard.html

@@ -2,20 +2,46 @@
   <div v-if="status === 'loading'" class="max-w-5xl mx-auto text-center">
     <img src="images/loader.gif" class="inline mt-10">
   </div>
-  <div v-if="dashboard && status === 'loaded'" class="max-w-5xl mx-auto">
+  <div v-if="dashboard && status !== 'loading'" class="max-w-5xl mx-auto">
     <div class="flex items-center w-full" v-if="!showEditor">
       <h2 class="mt-4 mb-4 text-gray-900 font-semibold text-xl grow shrink">{{title}}</h2>
-      <div>
+      <div class="flex gap-2">
         <button
           @click="showEditor = true"
           type="button"
-          class="rounded-md bg-teal-600 px-2.5 py-1.5 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">
-          <img src="images/edit.svg" class="inline h-[1em]" /> Edit
+          :disabled="status === 'evaluating'"
+          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">
+          <img src="images/edit.svg" class="inline h-[1.25em] mr-1" /> Edit
         </button>
+
+        <async-button
+          @click="evaluateDashboard"
+          type="button"
+          :disabled="status === 'evaluating'"
+          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"
+        >
+          <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>
+          Evaluate
+        </async-button>
       </div>
     </div>
     <div v-if="!showEditor" class="mt-4 mb-4">
-      <dashboard-result :result="result"></dashboard-result>
+      <div v-if="dashboardResults.length === 0">
+        <div class="flex flex-col items-center justify-center py-8">
+          <p class="text-gray-700 text-base mb-4">This dashboard hasn't been evaluated yet.</p>
+          <async-button
+            @click="evaluateDashboard"
+            type="button"
+            :disabled="status === 'evaluating'"
+            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"
+          >
+            Evaluate Dashboard
+          </async-button>
+        </div>
+      </div>
+      <div v-else>
+        <dashboard-result :result="dashboardResult.result" :finishedEvaluatingAt="dashboardResult.finishedEvaluatingAt"></dashboard-result>
+      </div>
     </div>
     <div v-if="showEditor" class="mt-4">
       <edit-dashboard
@@ -40,7 +66,7 @@
     </div>
 
   </div>
-  <div v-if="!dashboard && status === 'loaded'">
+  <div v-if="!dashboard && status !== 'loading'">
     No dashboard with the given id could be found.
   </div>
 </div>

package/frontend/src/dashboard/dashboard.js

@@ -14,7 +14,7 @@ module.exports = app => app.component('dashboard', {
       description: '',
       showEditor: false,
       dashboard: null,
-      result: null,
+      dashboardResults: [],
       errorMessage: null
     };
   },
@@ -31,11 +31,32 @@ module.exports = app => app.component('dashboard', {
       } else {
         this.errorMessage = update.error.message;
       }
+    },
+    async evaluateDashboard() {
+      this.status = 'evaluating';
+      try {
+        const { dashboard, dashboardResult, error } = 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);
+      } finally {
+        this.status = 'loaded';
+      }
+    }
+  },
+  computed: {
+    dashboardResult() {
+      return this.dashboardResults.length > 0 ? this.dashboardResults[0] : null;
     }
   },
   mounted: async function() {
     this.showEditor = this.$route.query.edit;
-    const { dashboard, result, error } = await api.Dashboard.getDashboard({ dashboardId: this.dashboardId, evaluate: !this.showEditor });
+    const { dashboard, dashboardResults, error } = await api.Dashboard.getDashboard({ dashboardId: this.dashboardId, evaluate: false });
     if (!dashboard) {
       return;
     }
@@ -46,7 +67,7 @@ module.exports = app => app.component('dashboard', {
     this.code = this.dashboard.code;
     this.title = this.dashboard.title;
     this.description = this.dashboard.description ?? '';
-    this.result = result;
+    this.dashboardResults = dashboardResults;
     this.status = 'loaded';
   }
 });

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

@@ -1,8 +1,8 @@
-<div>
+<div :class="responsive ? 'h-full' : ''">
   <div v-if="header" class="border-b border-gray-100 px-2 pb-2 text-xl font-bold">
     {{header}}
   </div>
-  <div class="text-xl">
+  <div class="text-xl" :class="responsive ? 'h-full' : ''">
     <canvas ref="chart"></canvas>
   </div>
 </div>

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

@@ -4,7 +4,7 @@ const template = require('./dashboard-chart.html');
 
 module.exports = app => app.component('dashboard-chart', {
   template: template,
-  props: ['value'],
+  props: ['value', 'responsive'],
   mounted() {
     const ctx = this.$refs.chart.getContext('2d');
     const chart = new Chart(ctx, this.value.$chart);

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

@@ -15,4 +15,7 @@
       :value="result">
     </component>
   </div>
+  <div class="text-right text-sm text-gray-700 mt-1" v-if="finishedEvaluatingAt">
+    Last Evaluated: {{ format.isoToLongDateTime(finishedEvaluatingAt) }}
+  </div>
 </div>

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

@@ -7,7 +7,7 @@ const template = require('./dashboard-result.html');
 
 module.exports = app => app.component('dashboard-result', {
   template: template,
-  props: ['result'],
+  props: ['result', 'finishedEvaluatingAt'],
   mounted: async function() {
   },
   methods: {

package/frontend/src/format.js

@@ -0,0 +1,9 @@
+'use strict';
+
+exports.isoToLongDateTime = function isoToLongDateTime(str) {
+  if (!str) {
+    return 'Unknown';
+  }
+  const date = new Date(str);
+  return date.toLocaleString('en-US', { month: 'short', day: '2-digit', year: 'numeric', hour: 'numeric', minute: 'numeric' });
+};

package/frontend/src/index.js

@@ -8,6 +8,7 @@ const { version } = require('../../package.json');
 console.log(`Mongoose Studio Version ${version}`);
 
 const api = require('./api');
+const format = require('./format');
 const mothership = require('./mothership');
 const { routes } = require('./routes');
 const vanillatoasts = require('vanillatoasts');
@@ -148,6 +149,7 @@ router.beforeEach((to, from, next) => {
   }
 });
 
+app.config.globalProperties = { format };
 app.use(router);
 
 app.mount('#content');

package/package.json

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