From 674194944531f28dc0680b21074e2508fdc23500 Mon Sep 17 00:00:00 2001 From: robyngit Date: Thu, 3 Oct 2024 17:54:13 -0400 Subject: [PATCH] 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 --- src/css/metacatui-common.css | 8 ++- src/js/templates/metadataInfoIcons.html | 5 ++ src/js/views/CanonicalDatasetHandlerView.js | 23 +++++- src/js/views/MetadataView.js | 79 ++++++++++++++++++--- 4 files changed, 100 insertions(+), 15 deletions(-) diff --git a/src/css/metacatui-common.css b/src/css/metacatui-common.css index 30cd653db..08ab93b21 100644 --- 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 index 6baafa2db..04ed7cc3b 100644 --- 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 ){ %> <% } %> diff --git a/src/js/views/CanonicalDatasetHandlerView.js b/src/js/views/CanonicalDatasetHandlerView.js index c401449cf..0aab68621 100644 --- 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 index 78b1878e6..d447dfc9c 100644 --- 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 = ` + + + + + `; + + // 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