Updated release table UI. Resolves #1121.

spa/src/app/files/data-download-citation/data-download-citation.component.scss

@@ -14,8 +14,6 @@ p {
 /* ReleaseFilesModalComponent */
 :host-context(release-files-modal) {
 
-    border-top: 1px solid $hca-gray-lightest;
     display: inline-block;
-    margin-top: 32px;
-    padding-top: 12px;
+    padding-top: 16px;
 }

spa/src/app/files/files.module.ts

@@ -119,6 +119,8 @@ import { TermSortService } from "./sort/term-sort.service";
 import { TableRendererService } from "./table/table-renderer.service";
 import { TableScroll } from "./table-scroll/table-scroll.component";
 import { ReleaseService } from "./shared/release.service";
+import { ReleaseVisualizationsModalComponent } from "./releases/release-visualizations-modal/release-visualizations-modal.component";
+import { ReleaseVisualizationsModalContainerComponent } from "./releases/visualizations-modal-container/release-visualizations-modal-container.component";
 
 @NgModule({
     imports: [
@@ -216,14 +218,17 @@ import { ReleaseService } from "./shared/release.service";
         ReleaseComponent,
         ReleaseFilesModalComponent,
         ReleaseFilesModalContainerComponent,
+        ReleaseVisualizationsModalComponent,
+        ReleaseVisualizationsModalContainerComponent,
         ReleaseTableComponent,
         ReleaseTitleOverlineComponent,
         TableScroll
     ],
     entryComponents: [
         ProjectDownloadManifestModalComponent,
         ProjectDownloadMatrixModalComponent,
-        ReleaseFilesModalComponent
+        ReleaseFilesModalComponent,
+        ReleaseVisualizationsModalComponent
     ],
     providers: [
         ConfigService,

spa/src/app/files/files.routes.ts

@@ -23,6 +23,7 @@ import { ProjectReleaseComponent } from "./project-release/project-release.compo
 import { ProjectSummaryStatsComponent } from "./project-summary-stats-component/project-summary-stats.component";
 import { ReleaseComponent } from "./releases/release.component";
 import { ReleaseFilesModalContainerComponent } from "./releases/release-files-modal-container/release-files-modal-container.component";
+import { ReleaseVisualizationsModalContainerComponent } from "./releases/visualizations-modal-container/release-visualizations-modal-container.component";
 
 export const routes: Route[] = [
     {
@@ -89,6 +90,10 @@ export const routes: Route[] = [
             {
                 path: ":id/m/releases/2020-mar/datasets/:datasetId/release-files",
                 component: ReleaseFilesModalContainerComponent,
+            },
+            {
+                path: ":id/m/releases/2020-mar/datasets/:datasetId/visualizations",
+                component: ReleaseVisualizationsModalContainerComponent,
             }
         ]
     },

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

@@ -1,5 +1,5 @@
 <h2 class="fontsize-xl">2020 March Data Release</h2>
 <p class="fontsize-s max600">Projects stratified by developmental stage, organ and library technology, and annotated with cell type, were processed with a common pipeline to produce the datasets and analyses listed below. Please see the <a href="{{portalUrl}}/releases/2020-mar">release documentation</a> for details about this release.</p>
-<release-table *ngIf="state$ | async as state"
+    <release-table *ngIf="state$ | async as state"
                [columnsToDisplay]="columnsToDisplay"
                [releaseOrganViews]="state.releaseOrganViews"></release-table>

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

@@ -6,6 +6,11 @@
  */
 @import "../../site/theme/cgl.vars";
 
+:host {
+    display: block;
+    max-width: 1090px; /* Snap table at max width */
+}
+
 /* Title */
 h2 {
     margin: 14px 0 24px;

spa/src/app/files/project-release/project-release.component.ts

@@ -28,7 +28,8 @@ import { ReleaseService } from "../shared/release.service";
 export class ProjectReleaseComponent implements OnDestroy, OnInit {
 
     // Locals
-    public columnsToDisplay = ["dataset", "visualize", "releaseFiles", "organ", "developmentalStage", "technology"];
+    public columnsToDisplay = ["dataset", "organ", "developmentalStage", "technology", "releaseFiles", "visualize",
+        "attributes", "actions"]; // attributes and actions are mobile-only columns, to group values into a single column
     private ngDestroy$ = new Subject();
     private state$ = new BehaviorSubject<ReleaseState>({
         loaded: false,

spa/src/app/files/project-supplementary-links/project-supplementary-links.component.ts

@@ -94,7 +94,6 @@ export class ProjectSupplementaryLinksComponent implements OnDestroy, OnInit {
             filter(project => !!project),
             takeUntil(this.ngDestroy$)
         ).subscribe(project => {
-            console.log(project.supplementaryLinks)
             this.state$.next({
                 loaded: true,
                 project

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

@@ -18,62 +18,72 @@ <h2 class="fontsize-xl">{{organView.organ}}</h2>
                     <span>{{element.datasetId}}</span>
                 </mat-cell>
             </ng-container>
+
             <ng-container matColumnDef="developmentalStage">
-                <mat-header-cell *matHeaderCellDef class="fontsize-xxs bold">
-                    <span>Developmental<span>Stage</span></span></mat-header-cell>
-                <mat-cell *matCellDef="let element" class="fontsize-xxs">
+                <mat-header-cell *matHeaderCellDef class="stage fontsize-xxs bold">
+                    <span>Developmental<br/>Stage</span></mat-header-cell>
+                <mat-cell *matCellDef="let element" class="stage fontsize-xxs desktop-only">
                     <span>{{element.developmentalStage}}</span>
                 </mat-cell>
             </ng-container>
             <ng-container matColumnDef="organ">
-                <mat-header-cell *matHeaderCellDef class="fontsize-xxs bold">
+                <mat-header-cell *matHeaderCellDef class="organ fontsize-xxs bold">
                     <span>Organ</span>
                 </mat-header-cell>
-                <mat-cell *matCellDef="let element" class="fontsize-xxs">
+                <mat-cell *matCellDef="let element" class="organ fontsize-xxs desktop-only">
                     <span>{{element.organ}}</span>
                 </mat-cell>
             </ng-container>
             <ng-container matColumnDef="technology">
-                <mat-header-cell *matHeaderCellDef class="fontsize-xxs bold">
+                <mat-header-cell *matHeaderCellDef class="technology fontsize-xxs bold">
                     <span>Technology</span></mat-header-cell>
-                <mat-cell *matCellDef="let element" class="fontsize-xxs">
+                <mat-cell *matCellDef="let element" class="technology fontsize-xxs desktop-only">
                     <span>{{renderTechnologyShortName(element.libraryConstructionApproach)}}</span>
                 </mat-cell>
             </ng-container>
             <ng-container matColumnDef="releaseFiles">
-                <mat-header-cell *matHeaderCellDef class="fontsize-xxs bold">
+                <mat-header-cell *matHeaderCellDef class="release-files fontsize-xxs bold">
                     <span>Release Files</span></mat-header-cell>
-                <mat-cell *matCellDef="let element" class="fontsize-xxs">
-                    <a routerLink="/projects/{{element.entryId}}/m/releases/2020-mar/datasets/{{element.datasetId}}/release-files"
-                       (click)="setReleaseFilesReferrer()">View Files</a>
-                </mat-cell>
-            </ng-container>
-            <ng-container matColumnDef="annotatedExpressionMatrix">
-                <mat-header-cell *matHeaderCellDef class="fontsize-xxs bold">
-                    <span>Annotated<span>Expression Matrix</span></span></mat-header-cell>
-                <mat-cell *matCellDef="let element" class="fontsize-xxs dot">
-                    <ng-container *ngFor="let file of element.files">
-                        <a href={{file.url}} target="_blank"
-                           rel="noopener noreferrer">{{file.extension}}</a>
-                    </ng-container>
+                <mat-cell *matCellDef="let element" class="release-files fontsize-xxs desktop-only">
+                    <button class="button secondary size-s"
+                            [routerLink]="getDatasetReleaseFilesUrl(element.entryId, element.datasetId)"
+                            (click)="setReleaseFilesReferrer()">
+                        Downloads
+                    </button>
                 </mat-cell>
             </ng-container>
             <ng-container matColumnDef="visualize">
-                <mat-header-cell *matHeaderCellDef class="fontsize-xxs bold visualize">
+                <mat-header-cell *matHeaderCellDef class="visualizations fontsize-xxs bold">
                     <span>Visualizations</span>
                 </mat-header-cell>
-                <mat-cell *matCellDef="let element" class="fontsize-xxs dot visualize">
-                    <ng-container *ngFor="let visualization of element.visualizations">
-                        <hca-tooltip [tooltipClass]="'hca-tooltip'"
-                                     [tooltipContent]="visualization.description"
-                                     [tooltipDisabled]="false"
-                                     [tooltipPosition]="'above'">
-                            <a href={{visualization.url}} target="_blank"
-                               rel="noopener noreferrer" (click)="trackExternalLink(element, visualization)">{{visualization.title}}</a>
-                        </hca-tooltip>
-                    </ng-container>
+                <mat-cell *matCellDef="let element" class="visualizations fontsize-xxs desktop-only">
+                    <button class="button secondary size-s"
+                            [routerLink]="getDatasetVisualizationsUrl(element.entryId, element.datasetId)"
+                            (click)="setReleaseFilesReferrer()">Visualizations</button>
+                </mat-cell>
+            </ng-container>
+            <!-- Mobile only columns -->
+            <ng-container matColumnDef="attributes">
+                <mat-header-cell *matHeaderCellDef class="attributes fontsize-xxs bold mobile-only">
+                    <span class="dot"><span>Organ</span><span>Stage</span><span>Technology</span></span></mat-header-cell>
+                <mat-cell *matCellDef="let element" class="attributes fontsize-xxs mobile-only">
+                    <div class="dot"><span>{{element.organ}}</span><span>{{element.developmentalStage}}</span><span>{{renderTechnologyShortName(element.libraryConstructionApproach)}}</span></div>
+                </mat-cell>
+            </ng-container>
+            <ng-container matColumnDef="actions">
+                <mat-header-cell *matHeaderCellDef class="actions fontsize-xxs bold mobile-only">
+                    <span class="dot"><span>Release Files</span><span>Visualize</span></span></mat-header-cell>
+                <mat-cell *matCellDef="let element" class="actions fontsize-xxs mobile-only">
+                    <button class="button secondary size-s"
+                            [routerLink]="getDatasetReleaseFilesUrl(element.entryId, element.datasetId)"
+                            (click)="setReleaseFilesReferrer()">
+                        Downloads
+                    </button><button class="button secondary size-s"
+                            [routerLink]="getDatasetVisualizationsUrl(element.entryId, element.datasetId)"
+                            (click)="setReleaseFilesReferrer()">Visualizations</button>
                 </mat-cell>
             </ng-container>
+            <!-- Config -->
             <mat-header-row *matHeaderRowDef="columnsToDisplay"></mat-header-row>
             <mat-row *matRowDef="let row; columns: columnsToDisplay;"></mat-row>
         </mat-table>