On visualization portal links, add hover text to indicate the full name of the portal e.g. for SCP add hover for 'Single Cell Portal'. Resolves #1086. (#1093)

Author: frano-m

spa/src/app/files/releases/release-dataset-view.model.ts

@@ -7,10 +7,10 @@
  */
 
 // App dependencies
-import { ReleaseVisualization } from "./release-visualization.model";
 import { LibraryConstructionApproach } from "../shared/library-construction-approach.model";
 import { DevelopmentalStage } from "./developmental-stage.model";
 import { ReleaseFileView } from "./release-file-view.model";
+import { ReleaseVisualizationView } from "./release-visualization-view.model";
 
 export interface ReleaseDatasetView {
     entryId: string; // Project UUID, pulled from ReleaseProject
@@ -19,6 +19,6 @@ export interface ReleaseDatasetView {
     files: ReleaseFileView[];
     libraryConstructionApproach: LibraryConstructionApproach;
     projectShortname: string; // Project short name, pulled from ReleaseProject
-    visualizations: ReleaseVisualization[];
+    visualizations: ReleaseVisualizationView[];
 }
 

spa/src/app/files/releases/release-table/release-table.component.html

@@ -64,8 +64,13 @@ <h2 class="fontsize-xl">{{organView.organ}}</h2>
                 </mat-header-cell>
                 <mat-cell *matCellDef="let element" class="fontsize-xxs dot">
                     <ng-container *ngFor="let visualization of element.visualizations">
-                        <a href={{visualization.url}} target="_blank"
-                           rel="noopener noreferrer">{{visualization.title}}</a>
+                        <hca-tooltip [tooltipClass]="'hca-tooltip narrow'"
+                                     [tooltipContent]="visualization.description"
+                                     [tooltipDisabled]="false"
+                                     [tooltipPosition]="'above'">
+                            <a href={{visualization.url}} target="_blank"
+                               rel="noopener noreferrer">{{visualization.title}}</a>
+                        </hca-tooltip>
                     </ng-container>
                 </mat-cell>
             </ng-container>

spa/src/app/files/releases/release-visualization-view.model.ts

@@ -0,0 +1,15 @@
+/**
+ * Human Cell Atlas
+ * https://www.humancellatlas.org/
+ *
+ * View model of a visualization of a study, included in a project.
+ */
+
+// App dependencies
+import { ReleaseVisualization } from "./release-visualization.model";
+
+export interface ReleaseVisualizationView {
+
+    description: string;
+    releaseVisualisations: ReleaseVisualization[];
+}

spa/src/app/files/shared/release.service.ts

@@ -18,12 +18,16 @@ import { ReleaseOrganView } from "../releases/release-organ-view.model";
 import { ReleaseDatasetView } from "../releases/release-dataset-view.model";
 import { ReleaseFileView } from "../releases/release-file-view.model";
 import { ReleaseFileType } from "../releases/release-file-type.model";
+import { ReleaseVisualizationView } from "../releases/release-visualization-view.model";
 
 @Injectable()
 export class ReleaseService {
 
     // Locals
-    private descriptionByFileType = new Map<string, string>([
+    private PORTAL_DESCRIPTIONS = new Map<string, string>([
+        ["SCP", "Single Cell Portal"]
+    ]);
+    private RELEASE_FILE_DESCRIPTIONS = new Map<string, string>([
         [`${ReleaseFileType.ANNOTATED_CLUSTERS}h5ad`, "Cumulus output expression matrix; contains clustering information, cell annotations, and log-transformed gene expression (Pegasus, Scanpy, and Seurat compatible)."],
         [`${ReleaseFileType.ANNOTATED_CLUSTERS}loom`, "Cumulus output expression matrix; contains clustering information, cell annotations, and log-transformed gene expression (Pegasus, Scanpy, and Seurat compatible)."],
         [`${ReleaseFileType.DIFFERENTIAL_EXPRESSION}xlsx`, "Cumulus output file containing differential expression with correction."],
@@ -89,11 +93,14 @@ export class ReleaseService {
         // Create view model of release files
         const files = this.createReleaseFileViews(releaseDataset);
 
+        // Create view model of release visualizations
+        const visualizations = this.createReleaseVisualizationViews(releaseDataset);
+
         const datasetView = Object.assign({
             entryId,
             projectShortname,
         }, releaseDataset, {
-            files
+            files, visualizations
         });
 
         return datasetView as ReleaseDatasetView;
@@ -121,7 +128,7 @@ export class ReleaseService {
 
             const type = releaseFile.type;
             const extension = releaseFile.extension;
-            const description = this.descriptionByFileType.get(`${type}${extension}`);
+            const description = this.RELEASE_FILE_DESCRIPTIONS.get(`${type}${extension}`);
             accum.push(Object.assign({}, releaseFile, {
                 description
             }));
@@ -131,6 +138,24 @@ export class ReleaseService {
 
     }
 
+    /**
+     * Create view models for each release visualization in the specified dataset.
+     *
+     * @param {ReleaseDataset} releaseDataset
+     * @returns {ReleaseVisualizationView[]}
+     */
+    private createReleaseVisualizationViews(releaseDataset: ReleaseDataset): ReleaseVisualizationView[] {
+
+        return releaseDataset.visualizations.reduce((accum, releaseVisualization) => {
+
+            const title = releaseVisualization.title;
+            const description = this.PORTAL_DESCRIPTIONS.get(title);
+            accum.push(Object.assign({}, releaseVisualization, {description}));
+
+            return accum;
+        }, []);
+    }
+
     /**
      * Sort datasets alphabetically by project title.
      */