Show canonical dataset in MetadataView

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;

src/js/models/CitationModel.js

@@ -1,11 +1,6 @@
 "use strict";
 
-define(["jquery", "underscore", "backbone", "collections/Citations"], (
-  $,
-  _,
-  Backbone,
-  Citations,
-) => {
+define(["underscore", "backbone"], (_, Backbone) => {
   /**
    * @class CitationModel
    * @classdesc A Citation Model represents a single Citation Object returned by
@@ -52,6 +47,8 @@ define(["jquery", "underscore", "backbone", "collections/Citations"], (
        * published
        * @property {number|string} volume - The volume of the journal where the
        * document was published
+       * @property {number|string} issue - The issue of the journal where the
+       * document was published
        * @property {number} page - The page of the journal where the document was
        * published
        * @property {Citations} citationMetadata - When this Citation Model refers
@@ -91,6 +88,7 @@ define(["jquery", "underscore", "backbone", "collections/Citations"], (
           publisher: null,
           journal: null,
           volume: null,
+          issue: null,
           page: null,
           citationMetadata: null,
           sourceModel: null,
@@ -118,6 +116,8 @@ define(["jquery", "underscore", "backbone", "collections/Citations"], (
           pid: this.getPidFromSourceModel,
           seriesId: this.getSeriesIdFromSourceModel,
           originArray: this.getOriginArrayFromSourceModel,
+          volume: this.getVolumeFromSourceModel,
+          issue: this.getIssueFromSourceModel,
           view_url: this.getViewUrlFromSourceModel,
         };
       },
@@ -412,10 +412,15 @@ define(["jquery", "underscore", "backbone", "collections/Citations"], (
        */
       getYearFromSourceModel(sourceModel) {
         try {
-          const year =
+          let year =
             this.yearFromDate(sourceModel.get("pubDate")) ||
             this.yearFromDate(sourceModel.get("dateUploaded")) ||
             this.yearFromDate(sourceModel.get("datePublished"));
+          // for cross ref
+          const created = sourceModel.get("created");
+          if (!year && created) {
+            year = created?.["date-parts"]?.[0]?.[0];
+          }
           return year;
         } catch (error) {
           console.log(
@@ -476,6 +481,12 @@ define(["jquery", "underscore", "backbone", "collections/Citations"], (
       getJournalFromSourceModel(sourceModel) {
         try {
           let journal = null;
+          journal = sourceModel.get("journal");
+
+          // cross ref
+          journal = sourceModel.get("container-title")?.[0];
+          if (journal) return journal;
+
           const datasource = sourceModel.get("datasource");
           const mn = MetacatUI.nodeModel.getMember(datasource);
           const currentMN = MetacatUI.nodeModel.get("currentMemberNode");
@@ -519,6 +530,8 @@ define(["jquery", "underscore", "backbone", "collections/Citations"], (
             sourceModel.get("creator") ||
             // If it's a science metadata model or solr results, use origin
             sourceModel.get("origin") ||
+            // If it's a cross ref model, use author
+            sourceModel.get("author") ||
             "";
 
           // otherwise, this is probably a base D1 object model. Don't use
@@ -554,7 +567,11 @@ define(["jquery", "underscore", "backbone", "collections/Citations"], (
       getPidFromSourceModel(sourceModel) {
         try {
           const pid =
-            sourceModel.get("id") || sourceModel.get("identifier") || null;
+            sourceModel.get("id") ||
+            sourceModel.get("identifier") ||
+            sourceModel.get("doi") ||
+            sourceModel.get("DOI") ||
+            null;
           return pid;
         } catch (error) {
           console.log(
@@ -587,6 +604,26 @@ define(["jquery", "underscore", "backbone", "collections/Citations"], (
         }
       },
 
+      /**
+       * Get the volume from the sourceModel.
+       * @param {Backbone.Model} sourceModel - The model to get the volume from
+       * @returns {number|string} - The volume
+       * @since 0.0.0
+       */
+      getVolumeFromSourceModel(sourceModel) {
+        return sourceModel.get("volume") || null;
+      },
+
+      /**
+       * Get the issue from the sourceModel.
+       * @param {Backbone.Model} sourceModel - The model to get the issue from
+       * @returns {number|string} - The issue
+       * @since 0.0.0
+       */
+      getIssueFromSourceModel(sourceModel) {
+        return sourceModel.get("issue") || null;
+      },
+
       /**
        * Use the sourceModel's createViewURL() method to get the viewUrl for the
        * citation. This method is built into DataONEObject models, SolrResult
@@ -1075,19 +1112,26 @@ define(["jquery", "underscore", "backbone", "collections/Citations"], (
       /**
        * Get the main identifier for the citation. This will check the model for
        * the following attributes and return the first that is not empty: pid,
-       * seriesId, source_url.
+       * seriesId, source_url, doi, DOI
        * @returns {string} Returns the main identifier for the citation or an
        * empty string.
        * @since 2.23.0
        */
       getID() {
-        const idSources = ["pid", "seriesId", "source_url"];
+        const idSources = ["pid", "seriesId", "source_url", "doi", "DOI"];
         for (let i = 0; i < idSources.length; i++) {
           const id = this.get(idSources[i]);
           if (id) return id;
         }
         return "";
       },
+
+      /** Set the model back to its defaults */
+      reset() {
+        this.clear({ silent: true });
+        this.set(this.defaults(), { silent: true });
+        this.trigger("change");
+      },
     },
   );
 

src/js/models/CrossRefModel.js

@@ -0,0 +1,115 @@
+define(["backbone"], (Backbone) => {
+  const CACHE_PREFIX = "crossref_";
+  /**
+   * @class CrossRef
+   * @classdesc Handles querying CrossRef API for metadata about a DOI.
+   * @classcategory Models
+   * @augments Backbone.Model
+   * @constructs
+   * @augments Backbone.Model
+   * @since 0.0.0
+   */
+  const CrossRef = Backbone.Model.extend(
+    /** @lends CrossRef.prototype */
+    {
+      /** @inheritdoc */
+      type: "CrossRef",
+
+      /**
+       * Defaults for the CrossRef model.
+       * @type {object}
+       * @property {string} baseURL - The base URL for the CrossRef API.
+       * @property {string} email - The email address to use for "polite"
+       * requests. See https://github.com/CrossRef/rest-api-doc#good-manners--more-reliable-service).
+       */
+      defaults() {
+        return {
+          baseURL:
+            MetacatUI.appModel.get("crossRefAPI") ||
+            "https://api.crossref.org/works/",
+          email: MetacatUI.appModel.get("emailContact") || "",
+        };
+      },
+
+      /** @inheritdoc */
+      url() {
+        let doi = this.get("doi");
+        if (!doi) return null;
+        // Make sure the DOI is formatted correctly
+        doi = MetacatUI.appModel.removeAllDOIPrefixes(doi);
+        this.set("doi", doi);
+        const doiStr = encodeURIComponent(doi);
+        const email = this.get("email");
+        const emailStr = email ? `?mailto:${email}` : "";
+        const baseURL = this.get("baseURL");
+        const url = `${baseURL}${doiStr}${emailStr}`;
+        return url;
+      },
+
+      /** @inheritdoc */
+      fetch() {
+        // first check if there's a cached response
+        const doi = this.get("doi");
+        const cachedResponse = this.getCachedResponse(doi);
+        if (cachedResponse) {
+          this.set(cachedResponse);
+          this.trigger("sync");
+          return;
+        }
+
+        const url = this.url();
+        if (!url) return;
+        const model = this;
+        // Make the request using native fetch
+        fetch(url)
+          .then((response) => {
+            if (!response.ok) {
+              throw new Error("Network response was not ok");
+            }
+            return response.json();
+          })
+          .then((responseJSON) => {
+            const parsedData = responseJSON.message;
+            model.cacheResponse(doi, parsedData);
+            model.set(parsedData);
+            model.trigger("sync");
+          })
+          .catch((error) => {
+            model.trigger("error", error);
+            model.set("error", "fetchError");
+            model.set("errorMessage", error.message);
+          });
+      },
+
+      /**
+       * Cache the response from the CrossRef API
+       * @param {string} doi The DOI for the response
+       * @param {object} response The response from the CrossRef API
+       */
+      cacheResponse(doi, response) {
+        localStorage.setItem(`${CACHE_PREFIX}${doi}`, JSON.stringify(response));
+      },
+
+      /**
+       * Get the cached response for a DOI
+       * @param {string} doi The DOI to get the cached response for
+       * @returns {object|null} The cached response or null if there is no cached response
+       */
+      getCachedResponse(doi) {
+        const cachedResponse = localStorage.getItem(`${CACHE_PREFIX}${doi}`);
+        if (!cachedResponse) return null;
+        return JSON.parse(cachedResponse);
+      },
+
+      /** Clear the cache of CrossRef responses */
+      clearCache() {
+        const keysToRemove = Object.keys(localStorage).filter((key) =>
+          key.startsWith(CACHE_PREFIX),
+        );
+        keysToRemove.forEach((key) => localStorage.removeItem(key));
+      },
+    },
+  );
+
+  return CrossRef;
+});

src/js/templates/citations/citationAPA.html

@@ -8,11 +8,18 @@
 
 let titleHTML = title ? `<span class="${titleClass}"${dataID}><i>${title}</i></span>. ` : '';
 
-let journalHTML = journal ? `<span class="publisher">${journal}. </span>` : '';
+let issueHTML = issue ? issue : '';
+issueHTML = volume && issue ? `(${issue})` : '';
 
-let volumeHTML = volume ? `<span class="publisher">Vol. ${volume}. </span>` : '';
+let volumeIssueHTML = volume || issueHTML ? `<span class="volume">${volume}${issueHTML}</span>` : '';
 
-let pageHTML = page ? `<span class="publisher">pp. ${page}. </span>` : '';
+let pageHTML = page ? `<span class="page">${page}</span>` : '';
+
+let journalHTML = journal || '';
+journalHTML = volumeIssueHTML || pageHTML ? `${journalHTML}, ` : journalHTML;
+journalHTML = volumeIssueHTML ? `${journalHTML}${volumeIssueHTML}` : journalHTML;
+journalHTML = pageHTML ? `${journalHTML}, ${pageHTML}` : journalHTML;
+journalHTML = journalHTML ? `<span class="publisher">${journalHTML}. </span>` : journalHTML;
 
 let seriesIdHTML = seriesId || '';
 if (seriesId) {
@@ -34,7 +41,7 @@
 const idHTML = seriesIdHTML || pidHTML ? `<span class="id">${seriesIdHTML}${pidHTML}</span>` : '';
 
 %>
-<%= originHTML + pubHTML + titleHTML + journalHTML + volumeHTML + pageHTML + idHTML %>
+<%= originHTML + pubHTML + titleHTML + journalHTML + idHTML %>
 <%if(citationMetadata){%>
   <br>
   <span>Cites Data: </span>

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">
 <% } %>

src/js/views/AnnotationView.js

@@ -16,6 +16,11 @@ define([
    */
   var AnnotationView = Backbone.View.extend(
     /** @lends AnnotationView.prototype */ {
+      /**
+       * The type of View this is
+       * @type {string}
+       */
+      type: "AnnotationView",
       className: "annotation-view",
       annotationPopoverTemplate: _.template(AnnotationPopoverTemplate),