Add a data citation link to the project details page. Resolves #955. (#956)

Author: frano-m

spa/src/app/files/hca-get-data/copy-to-clipboard/copy-to-clipboard.component.scss

@@ -41,9 +41,10 @@
     }
 }
 
-/* Project matrix styles */
+/* Project matrix, project overview styles */
 /* ProjectPreparedMatrixDownloadsComponent */
-:host-context(.project-matrix) {
+/* HCAProjectComponent */
+:host-context(.project-matrix), :host-context(.project-overview) {
 
     /* Container, clipboard container */
     .download-url, .clipboard-copy {
@@ -61,3 +62,11 @@
         color: $hca-primary;
     }
 }
+
+:host-context(.project-overview) {
+
+    /* Copy text */
+    .clipboard-copy span {
+        padding-left: 0;
+    }
+}

spa/src/app/files/hca-project/hca-project.component.html

@@ -80,6 +80,12 @@ <h4 class="fontsize-m semi-bold">Data Curators</h4>
                                 <span *ngSwitchDefault>Unspecified</span>
                             </ng-container>
                         </p>
+                        <h4 class="fontsize-m semi-bold">Citation</h4>
+                        <p class="fontsize-xxs citation">
+                            <span>To reference this project, please use the following link:</span>
+                            <a [href]="getCitationLink(state.project.project.entryId)"><span class="url">{{getCitationLink(state.project.project.entryId)}}</span></a>
+                            <copy-to-clipboard [copyToClipboardLink]="getCitationLink(state.project.project.entryId)"></copy-to-clipboard>
+                        </p>
                     </div>
                 </div>
             </div>
@@ -136,11 +142,13 @@ <h4 class="fontsize-m semi-bold">Analysis Tools</h4>
                         <ng-container [ngSwitch]="state.integratedWithTertiaryPortals">
                             <ng-container *ngSwitchCase="true">
                                 <div class="stretch">
-                                    <p class="fontsize-xs">This project's data can be viewed live in the following analysis tools:</p>
+                                    <p class="fontsize-xs">This project's data can be viewed live in the following
+                                        analysis tools:</p>
                                 </div>
                                 <project-integrations [integrations]="state.integrations"></project-integrations>
                             </ng-container>
-                            <p class="fontsize-xs" *ngSwitchDefault>There are currently no integrations for this project at this time.</p>
+                            <p class="fontsize-xs" *ngSwitchDefault>There are currently no integrations for this project
+                                at this time.</p>
                         </ng-container>
                     </div>
                     <div class="project-details">
@@ -346,7 +354,10 @@ <h4 class="fontsize-m semi-bold">Accessions</h4>
                     <div class="data-release-policy">
                         <h4 class="fontsize-m semi-bold">Data Release Policy</h4>
                         <div class="stretch">
-                            <p class="fontsize-xs">For information regarding data sharing and data use, please see our <a href="https://www.humancellatlas.org/data-release-policy/" target="_blank" rel="noopener noreferrer">Data Release Policy</a></p>
+                            <p class="fontsize-xs">For information regarding data sharing and data use, please see our
+                                <a href="https://www.humancellatlas.org/data-release-policy/"
+                                   target="_blank"
+                                   rel="noopener noreferrer">Data Release Policy</a></p>
                         </div>
                     </div>
                 </div>

spa/src/app/files/hca-project/hca-project.component.scss

@@ -165,7 +165,7 @@
             }
 
             /* Contributors, curator list */
-            .contributor-list, .contributor-list > span, .curator-list, .curator-list > span {
+            .contributor-list, .contributor-list > span, .curator-list, .curator-list > span, .citation, .citation > span {
                 display: block;
             }
 
@@ -181,6 +181,13 @@
             .contributor-list, .curator-list, .organization-list {
                 white-space: pre-wrap;
             }
+
+            /* Citation url */
+            .citation .url {
+                display: block;
+                margin: 4px 0;
+                word-break: break-all;
+            }
         }
     }