Move rendering of info icons to MetadataView

- Deprecate the template that rendered the icons previously - Add new methods to MetadataView to render the icons - Call new methods to render the duplicate icon with the CanonicalDatasetHandlerView Issue #2541
NCEAS · Oct 3, 2024 · 6741949 · 6741949
1 parent 94fb5e5
commit 6741949
Show file tree

Hide file tree

Showing 4 changed files with 100 additions and 15 deletions.
diff --git a/src/css/metacatui-common.css b/src/css/metacatui-common.css
@@ -74,6 +74,9 @@ a:hover {
 .icon.warning {
   color: #ffbc00;
 }
+.icon.info {
+  color: #3a87ad;
+}
 .list-group-item.success {
   background-color: #dff0d8;
 }
@@ -1963,11 +1966,10 @@ div.analyze.dropdown.open button.dropdown.btn.btn-secondary.dropdown-toggle {
 }
 .controls-container .info-icons .icon-stack .icon-stack-top {
   color: #fff;
-  font-size: 0.75em;
-  margin-top: -15px;
+  font-size: 0.7em;
 }
 .controls-container .info-icons .icon-stack .icon-stack-base {
-  font-size: 1.25em;
+  font-size: 1.5em;
 }
 .metadata-controls-container {
   position: relative;

diff --git a/src/js/templates/metadataInfoIcons.html b/src/js/templates/metadataInfoIcons.html
@@ -1,3 +1,8 @@
+<% 
+  // This template is now *** DEPRECATED *** in favour of in-view rendering.
+  // To be removed in a future release.
+%>
+
 <% if( !model.isPublic || model.archived ){ %>
 <span class="info-icons">
 <% } %>

diff --git a/src/js/views/CanonicalDatasetHandlerView.js b/src/js/views/CanonicalDatasetHandlerView.js
@@ -12,6 +12,13 @@ define(["backbone"], (Backbone) => {
   // dataset field means
   const CANONICAL_TOOLTIP_TEXT =
     "The original dataset this version was derived from. This dataset is essentially a duplicate of the original.";
+  // The text to display in the info tooltip to explain what the info icon means
+  const INFO_ICON_TOOLTIP_TEXT =
+    "This dataset is essentially a duplicate of of another, original dataset.";
+  // The class to use for the info icon
+  const INFO_ICON_CLASS = "info";
+  // The bootstrap icon name to use for the info icon
+  const INFO_ICON_NAME = "icon-copy";
 
   // The following properties are used to identify parts of the MetadataView.
   // If the MetadataView changes, these properties may need to be updated.
@@ -23,6 +30,7 @@ define(["backbone"], (Backbone) => {
     fieldItem: "control-group",
     fieldLabel: "control-label",
     fieldValue: ["controls", "controls-well"],
+    fieldInfoIcon: ["tooltip-this", "icon", "icon-info-sign"],
   };
 
   /**
@@ -227,11 +235,20 @@ define(["backbone"], (Backbone) => {
       },
 
       /**
-       * Adds a badge to the header of the MetadataView to indicate that the
-       * dataset being displayed is essentially a duplicate of another dataset.
+       * Adds a icon to the header of the MetadataView to indicate that the
+       * dataset being displayed is essentially a duplicate
        */
       addInfoIcon() {
-        // TODO
+        if (this.infoIcon) {
+          // Do not re-add the info icon if it already exists
+          return;
+        }
+        this.infoIcon = this.metadataView.addInfoIcon(
+          "duplicate",
+          INFO_ICON_NAME,
+          INFO_ICON_CLASS,
+          INFO_ICON_TOOLTIP_TEXT,
+        );
       },
 
       // TODO: Do we need to remove the view from the DOM when the MetadataView

diff --git a/src/js/views/MetadataView.js b/src/js/views/MetadataView.js
@@ -29,7 +29,6 @@ define([
   "text!templates/newerVersion.html",
   "text!templates/loading.html",
   "text!templates/metadataControls.html",
-  "text!templates/metadataInfoIcons.html",
   "text!templates/alert.html",
   "text!templates/editMetadata.html",
   "text!templates/dataDisplay.html",
@@ -67,7 +66,6 @@ define([
   VersionTemplate,
   LoadingTemplate,
   ControlsTemplate,
-  MetadataInfoIconsTemplate,
   AlertTemplate,
   EditMetadataTemplate,
   DataDisplayTemplate,
@@ -119,7 +117,6 @@ define([
       versionTemplate: _.template(VersionTemplate),
       loadingTemplate: _.template(LoadingTemplate),
       controlsTemplate: _.template(ControlsTemplate),
-      infoIconsTemplate: _.template(MetadataInfoIconsTemplate),
       dataSourceTemplate: _.template(DataSourceTemplate),
       editMetadataTemplate: _.template(EditMetadataTemplate),
       dataDisplayTemplate: _.template(DataDisplayTemplate),
@@ -1808,12 +1805,7 @@ define([
         $(this.controlsContainer).html(controlsContainer);
 
         // Insert the info icons
-        const metricsWell = this.$(".metrics-container");
-        metricsWell.append(
-          this.infoIconsTemplate({
-            model: this.model.toJSON(),
-          }),
-        );
+        this.renderInfoIcons();
 
         if (MetacatUI.appModel.get("showWholeTaleFeatures")) {
           this.createWholeTaleButton();
@@ -1839,6 +1831,75 @@ define([
         }
       },
 
+      /**
+       * Add the info icons to the metadata controls panel. Shows if the dataset
+       * is private or archived.
+       * @since 0.0.0
+       */
+      renderInfoIcons() {
+        const isPrivate = !this.model.get("isPublic");
+        const isArchived = this.model.get("archived");
+        if (!isPrivate && !isArchived) return;
+
+        if (isPrivate) {
+          this.addInfoIcon(
+            "private",
+            "icon-lock",
+            "private",
+            "This is a private dataset.",
+          );
+        }
+        if (isArchived) {
+          this.addInfoIcon(
+            "archived",
+            "icon-trash",
+            "danger",
+            "This dataset has been archived.",
+          );
+        }
+      },
+
+      /**
+       * Add an info icon to the metadata controls panel.
+       * @param {string} iconType - The type of icon to add.
+       * @param {string} iconClass - The class
+       * @param {string} baseClass - The base class
+       * @param {string} titleText - The text to display when the icon is hovered
+       * over.
+       * @returns {HTMLElement} The icon element that was added to the view.
+       * @since 0.0.0
+       */
+      addInfoIcon(iconType, iconClass, baseClass, titleText) {
+        const iconHTML = `<span class="${iconType} icons">
+            <span class="icon-stack ${iconType} tooltip-this"
+                  data-toggle="tooltip"
+                  data-placement="top"
+                  data-container="#metadata-controls-container"
+                  title="${titleText}">
+              <i class="icon icon-circle icon-stack-base ${baseClass}"></i>
+              <i class="icon ${iconClass} icon-stack-top"></i>
+            </span>
+          </span>`;
+
+        // Convert the string into DOM element so we can return it
+        const range = document.createRange();
+        const newIconFragment = range.createContextualFragment(iconHTML);
+        const newIcon = newIconFragment.firstChild;
+
+        if (!this.infoIconContainer) {
+          const container = this.$(".metrics-container");
+          const iconContainer = $(document.createElement("span")).addClass(
+            "info-icons",
+          );
+          container.prepend(iconContainer);
+          this.infoIconContainer = iconContainer;
+        }
+
+        this.infoIconContainer.append(newIcon);
+
+        return newIcon;
+      },
+
       /**
        *Creates a button which the user can click to launch the package in Whole
        *Tale