From a8c111d52199a0de8786df28273a4006b6f79927 Mon Sep 17 00:00:00 2001
From: robyngit <thiessenbock@nceas.ucsb.edu>
Date: Mon, 14 Oct 2024 18:17:27 -0400
Subject: [PATCH] Show full citation for canonical dataset

In Metadata view, show the full citation for the canonical dataset in the "Canonical Dataset" section in the general metadata view.

Issue #2541
---
 src/js/views/CanonicalDatasetHandlerView.js | 40 +++++++++++++++++----
 1 file changed, 33 insertions(+), 7 deletions(-)

diff --git a/src/js/views/CanonicalDatasetHandlerView.js b/src/js/views/CanonicalDatasetHandlerView.js
index f9d3e45ae..861dd7084 100644
--- a/src/js/views/CanonicalDatasetHandlerView.js
+++ b/src/js/views/CanonicalDatasetHandlerView.js
@@ -1,8 +1,9 @@
-define(["backbone", "models/CitationModel", "models/CrossRefModel"], (
-  Backbone,
-  CitationModel,
-  CrossRefModel,
-) => {
+define([
+  "backbone",
+  "views/CitationView",
+  "models/CitationModel",
+  "models/CrossRefModel",
+], (Backbone, CitationView, CitationModel, CrossRefModel) => {
   // The "Type" property of the annotation view
   const ANNO_VIEW_TYPE = "AnnotationView";
   // The URI for the schema.org:sameAs annotation
@@ -119,10 +120,10 @@ define(["backbone", "models/CitationModel", "models/CrossRefModel"], (
         this.reset();
         const hasCanonical = this.detectCanonicalDataset();
         if (!hasCanonical) return this;
-        this.getCitationInfo();
         this.fieldItem = this.addFieldItem();
-        this.modifyCitationModal();
         this.infoIcon = this.addInfoIcon();
+        this.getCitationInfo();
+        this.modifyCitationModal();
         this.hideAnnotations();
         return this;
       },
@@ -248,8 +249,10 @@ define(["backbone", "models/CitationModel", "models/CrossRefModel"], (
         this.crossRef = new CrossRefModel({
           doi: this.canonicalUri,
         });
+        this.stopListening(this.crossRef);
         this.listenToOnce(this.crossRef, "sync", () => {
           view.citationModel.setSourceModel(this.crossRef);
+          view.updateFieldItemWithCitation();
         });
         this.crossRef.fetch();
       },
@@ -320,6 +323,29 @@ define(["backbone", "models/CitationModel", "models/CrossRefModel"], (
         return item;
       },
 
+      /**
+       * Replaces the DOI in the field item with a full citation for the
+       * canonical dataset.
+       */
+      updateFieldItemWithCitation() {
+        const { citationModel, fieldItem } = this;
+        if (!fieldItem) return;
+
+        const citationView = new CitationView({
+          model: citationModel,
+          className: "canonical-citation",
+          createTitleLink: false,
+          openLinkInNewTab: true,
+        }).render();
+
+        // Replace the DOI with the citation
+        const fieldValueEl = fieldItem.querySelector(
+          `.${METADATA_VIEW_CLASS_NAMES.fieldValue.join(".")}`,
+        );
+        fieldValueEl.innerHTML = "";
+        fieldValueEl.appendChild(citationView.el);
+      },
+
       /** Open the citation modal. */
       openCitationModal() {
         this.metadataView[CITATION_MODAL_PROP].show();