Display loading & error msgs in data object view

Issue #1758
NCEAS · Sep 12, 2024 · 9088638 · 9088638
1 parent 04a3c8b
commit 9088638
Show file tree

Hide file tree

Showing 2 changed files with 94 additions and 13 deletions.
diff --git a/src/css/metacatui-common.css b/src/css/metacatui-common.css
@@ -2625,7 +2625,7 @@ section#user-citations {
   display: flex;
   flex-wrap: wrap;
 
-  >a:not(:first-child) {
+  > a:not(:first-child) {
     margin-left: 0.7rem;
   }
 }
@@ -9651,10 +9651,18 @@ body > #extension-is-installed {
   }
 }
 
-
 /******************************************
 ** Data Object View **
 ******************************************/
 .object-view {
   height: 100%;
-}
+  display: grid;
+  align-items: center;
+  > .notification {
+    font-size: 1.6rem;
+    margin: 3rem;
+  }
+  > .alert-container {
+    margin: 3rem;
+  }
+}
diff --git a/src/js/views/DataObjectView.js b/src/js/views/DataObjectView.js
@@ -1,8 +1,25 @@
 "use strict";
 
-define(["backbone", "views/TableEditorView"], (Backbone, TableEditorView) => {
-  // The base class for the view
+define([
+  "underscore",
+  "backbone",
+  "views/TableEditorView",
+  "text!templates/loading.html",
+  "text!templates/alert.html",
+], (_, Backbone, TableEditorView, LoadingTemplate, AlertTemplate) => {
+  // The classes used by this view
   const BASE_CLASS = "object-view";
+  const CLASS_NAMES = {
+    base: BASE_CLASS,
+    well: "well", // Bootstrap class
+  };
+
+  // User-facing text
+  const LOADING_MESSAGE = "Loading data...";
+  const ERROR_TITLE = "Uh oh 😕";
+  const ERROR_MESSAGE =
+    "There was an error displaying the object. Please try again later or send us an email.";
+  const MORE_DETAILS_PREFIX = "More details: ";
 
   /**
    * @class DataObjectView
@@ -21,11 +38,23 @@ define(["backbone", "views/TableEditorView"], (Backbone, TableEditorView) => {
       type: "DataObjectView",
 
       /** @inheritdoc */
-      className: BASE_CLASS,
+      className: CLASS_NAMES.base,
 
       /** @inheritdoc */
       tagName: "div",
 
+      /**
+       * The template for the loading spinner
+       * @type {UnderscoreTemplate}
+       */
+      loadingTemplate: _.template(LoadingTemplate),
+
+      /**
+       * The template for the alert message
+       * @type {UnderscoreTemplate}
+       */
+      alertTemplate: _.template(AlertTemplate),
+
       /**
        * Initializes the DataObjectView
        * @param {object} options - Options for the view
@@ -42,22 +71,66 @@ define(["backbone", "views/TableEditorView"], (Backbone, TableEditorView) => {
       /** @inheritdoc */
       render() {
         this.$el.empty();
-        this.downloadObject().then((response) => this.renderObject(response));
+        this.showLoading();
+        this.downloadObject()
+          .then((response) => this.renderObject(response))
+          .catch((error) => this.showError(error?.message || error));
         return this;
       },
 
+      /** Indicate that the data is loading */
+      showLoading() {
+        this.$el.html(
+          this.loadingTemplate({
+            msg: LOADING_MESSAGE,
+          }),
+        );
+        this.el.classList.add(CLASS_NAMES.well);
+      },
+
+      /** Remove the loading spinner */
+      hideLoading() {
+        this.el.classList.remove(CLASS_NAMES.well);
+      },
+
+      /**
+       * Display an error message to the user
+       * @param {string} message - The error message to display
+       */
+      showError(message) {
+        this.hideLoading();
+        const alertTitle = `<center><h3>${ERROR_TITLE}</h3></center>`;
+        let alertMessage = alertTitle + ERROR_MESSAGE;
+        if (message) {
+          alertMessage += `<br><br>${MORE_DETAILS_PREFIX}${message}`;
+        }
+        this.$el.html(
+          this.alertTemplate({
+            includeEmail: true,
+            msg: alertMessage,
+            remove: false,
+          }),
+        );
+      },
+
       /**
        * With the already fetched DataONE object, check the format and render
        * the object accordingly.
        * @param {Response} response - The response from the DataONE object API
        */
       renderObject(response) {
-        const format = response.headers.get("Content-Type");
-        if (format === "text/csv") {
-          response.text().then((text) => {
-            this.csv = text;
-            this.showTable();
-          });
+        try {
+          this.hideLoading();
+          this.response = response;
+          const format = response.headers.get("Content-Type");
+          if (format === "text/csv") {
+            response.text().then((text) => {
+              this.csv = text;
+              this.showTable();
+            });
+          }
+        } catch (error) {
+          this.showError(error?.message || error);
         }
       },