Updated prepared matrix download UI from data table. Resolves #987.

spa/src/app/files/files.component.scss

@@ -1,6 +1,6 @@
 /*
- * UCSC Genomics Institute - CGL
- * https://cgl.genomics.ucsc.edu/
+ * Human Cell Atlas
+ * https://www.humancellatlas.org/
  *
  * Files component styles.
  */
@@ -11,7 +11,7 @@
     flex: 1; // Push footer to bottom of available space (inside snapper)
 
     .layout-column {
-        display: flex; // Required to display <project-prepared-matrix-downloads>
+        //display: flex; // Required to display <project-prepared-matrix-downloads>
         height: 100%; // Required for download banner hca-download-manifest
     }
 

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

@@ -6,7 +6,6 @@
  */
 
 // Core dependencies
-import { ClipboardModule } from "ngx-clipboard";
 import { NgModule } from "@angular/core";
 import { FormsModule, ReactiveFormsModule } from "@angular/forms";
 import { HttpClientModule } from "@angular/common/http";
@@ -18,6 +17,7 @@ import { MatButtonModule } from "@angular/material/button";
 import { MatCardModule } from "@angular/material/card";
 import { MatCheckboxModule } from "@angular/material/checkbox";
 import { MatChipsModule } from "@angular/material/chips";
+import { MatDialogModule } from "@angular/material";
 import { MatFormFieldModule } from "@angular/material/form-field";
 import { MatIconModule } from "@angular/material/icon";
 import { MatInputModule } from "@angular/material/input";
@@ -50,7 +50,6 @@ import { HCAFileSummaryComponent } from "./hca-file-summary/hca-file-summary.com
 import { HCAGetDataComponent } from "./hca-get-data/hca-get-data.component";
 import { HCAGetDataDownloadsComponent } from "./hca-get-data/hca-get-data-downloads/hca-get-data-downloads.component";
 import { HCAGetDataPanelComponent } from "./hca-get-data/hca-get-data-panel/hca-get-data-panel.component";
-import { CopyToClipboardComponent } from "./hca-get-data/copy-to-clipboard/copy-to-clipboard.component";
 import { HCAGetDataFileSummaryComponent } from "./hca-get-data/hca-get-data-file-summary/hca-get-data-file-summary.component";
 import { HCAGetDataSummaryComponent } from "./hca-get-data/hca-get-data-summary/hca-get-data-summary.component";
 import { HCAGetManifestComponent } from "./hca-get-data/hca-get-manifest/hca-get-manifest.component";
@@ -76,11 +75,12 @@ import { HCATableSortComponent } from "./hca-table-sort/hca-table-sort.component
 import { HCATooltipComponent } from "./hca-tooltip/hca-tooltip.component";
 import { ProjectService } from "./project/project.service";
 import { ProjectDeprecatedComponent } from "./project-deprecated/project-deprecated.component";
-import { ProjectDownloadsComponent } from "./project-downloads/project-downloads.component";
+import { ProjectDownloadMatrixModalContainerComponent } from "./project-download-matrix-modal-container/project-download-matrix-modal-container.component";
+import { ProjectDownloadMatrixModalComponent } from "./project-download-matrix-modal/project-download-matrix-modal.component";
+import { ProjectDownloadMatrixComponent } from "./project-download-matrix/project-download-matrix.component";
 import { ProjectGuardComponent } from "./project-guard/project-guard.component";
 import { ProjectIntegrationsComponent } from "./project-integrations/project-integrations.component";
 import { ProjectIngestInProgressComponent } from "./project-ingest-in-progress/project-ingest-in-progress.component";
-import { ProjectPreparedMatrixDownloadsComponent } from "./project-prepared-matrix-downloads/project-prepared-matrix-downloads.component";
 import { ProjectTSVDownloadComponent } from "./project-tsv-download/project-tsv-download.component";
 import { SearchTermService } from "./shared/search-term.service";
 import { DownloadService } from "./shared/download.service";
@@ -100,13 +100,13 @@ import { TableScroll } from "./table-scroll/table-scroll.component";
 @NgModule({
     imports: [
         BrowserAnimationsModule,
-        ClipboardModule,
         FormsModule,
         MatAutocompleteModule,
         MatButtonModule,
         MatCardModule,
         MatCheckboxModule,
         MatChipsModule,
+        MatDialogModule,
         MatFormFieldModule,
         MatIconModule,
         MatInputModule,
@@ -127,7 +127,6 @@ import { TableScroll } from "./table-scroll/table-scroll.component";
         SharedModule
     ],
     declarations: [
-
         AnalysisProtocolPipelineLinkerComponent,
         FileTypeSummaryListComponent,
         FileManifestSummaryComponent,
@@ -147,16 +146,16 @@ import { TableScroll } from "./table-scroll/table-scroll.component";
         MatrixUrlRequestFormComponent,
         MatrixUrlRequestCompletedComponent,
         ProjectDeprecatedComponent,
-        ProjectDownloadsComponent,
         ProjectGuardComponent,
         ProjectIngestInProgressComponent,
         ProjectIntegrationsComponent,
         ProjectTSVDownloadComponent,
-        ProjectPreparedMatrixDownloadsComponent,
+        ProjectDownloadMatrixComponent,
+        ProjectDownloadMatrixModalComponent,
+        ProjectDownloadMatrixModalContainerComponent,
         HCAGetDataComponent,
         HCAGetDataDownloadsComponent,
         HCAGetDataPanelComponent,
-        CopyToClipboardComponent,
         HCAGetDataFileSummaryComponent,
         HCAGetDataSummaryComponent,
         HCAGetManifestComponent,
@@ -179,6 +178,9 @@ import { TableScroll } from "./table-scroll/table-scroll.component";
         HCAFileSummaryComponent,
         TableScroll
     ],
+    entryComponents: [
+        ProjectDownloadMatrixModalComponent
+    ],
     providers: [
         ConfigService,
         DownloadService,

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

@@ -11,6 +11,7 @@ import { Route } from "@angular/router";
 // App dependencies
 import { FilesComponent } from "./files.component";
 import { HCAGetDataComponent } from "./hca-get-data/hca-get-data.component";
+import { ProjectDownloadMatrixModalContainerComponent } from "./project-download-matrix-modal-container/project-download-matrix-modal-container.component";
 import { ProjectGuardComponent } from "./project-guard/project-guard.component";
 
 export const routes: Route[] = [
@@ -38,6 +39,10 @@ export const routes: Route[] = [
                 path: ":id",
                 component: ProjectGuardComponent
 
+            },
+            {
+                path: ":id/prepared-expression-matrices",
+                component: ProjectDownloadMatrixModalContainerComponent
             }
         ]
     }

spa/src/app/files/hca-get-data/hca-export-to-terra/hca-export-to-terra.component.spec.ts

@@ -26,7 +26,7 @@ import { SearchTermService } from "../../shared/search-term.service";
 import { TermResponseService } from "../../shared/term-response.service";
 import { TerraService } from "../../shared/terra.service";
 import { TermSortService } from "../../sort/term-sort.service";
-import { CopyToClipboardComponent } from "../copy-to-clipboard/copy-to-clipboard.component";
+import { CopyToClipboardComponent } from "../../../shared/copy-to-clipboard/copy-to-clipboard.component";
 import { HCAGetDataPanelComponent } from "../hca-get-data-panel/hca-get-data-panel.component";
 import { HCAExportToTerraComponent } from "./hca-export-to-terra.component";
 

spa/src/app/files/hca-get-data/hca-get-manifest/hca-get-manifest.component.spec.ts

@@ -21,7 +21,7 @@ import { FileTypeSummaryListComponent } from "../../file-type-summary-list/file-
 import { DEFAULT_FILE_SUMMARY } from "../../shared/file-summary.mock";
 import { ManifestStatus } from "../../shared/manifest-status.model";
 import { TermSortService } from "../../sort/term-sort.service";
-import { CopyToClipboardComponent } from "../copy-to-clipboard/copy-to-clipboard.component";
+import { CopyToClipboardComponent } from "../../../shared/copy-to-clipboard/copy-to-clipboard.component";
 import { HCAGetDataPanelComponent } from "../hca-get-data-panel/hca-get-data-panel.component";
 import { HCAGetManifestComponent } from "./hca-get-manifest.component";
 import { SearchFileFacetTerm } from "../../search/search-file-facet-term.model";

spa/src/app/files/hca-get-data/hca-get-matrix/hca-get-matrix.component.spec.ts

@@ -30,7 +30,7 @@ import { MatrixUrlRequestStatus } from "../../shared/matrix-url-request-status.m
 import { CancelFetchMatrixUrlRequestAction } from "../../_ngrx/matrix/cancel-fetch-matrix-url-request.action";
 import { ClearMatrixPartialQueryMatchAction } from "../../_ngrx/matrix/clear-matrix-partial-query-match.action";
 import { FetchMatrixUrlRequestAction } from "../../_ngrx/matrix/fetch-matrix-url-request.action";
-import { CopyToClipboardComponent } from "../copy-to-clipboard/copy-to-clipboard.component";
+import { CopyToClipboardComponent } from "../../../shared/copy-to-clipboard/copy-to-clipboard.component";
 import { HCAGetDataPanelComponent } from "../hca-get-data-panel/hca-get-data-panel.component";
 import { MatrixPartialQueryMatchWarningComponent } from "../matrix-partial-query-match-warning/matrix-partial-query-match-warning.component";
 import { MatrixUrlRequestCompletedComponent } from "../matrix-url-request-completed/matrix-url-request-completed.component";

spa/src/app/files/hca-get-data/matrix-url-request-completed/matrix-url-request-completed.component.spec.ts

@@ -18,7 +18,7 @@ import { ConfigService } from "../../../config/config.service";
 import { FileManifestService } from "../../shared/file-manifest.service";
 import { MatrixService } from "../../shared/matrix.service";
 import { MatrixUrlRequestStatus } from "../../shared/matrix-url-request-status.model";
-import { CopyToClipboardComponent } from "../copy-to-clipboard/copy-to-clipboard.component";
+import { CopyToClipboardComponent } from "../../../shared/copy-to-clipboard/copy-to-clipboard.component";
 import { HCAGetDataPanelComponent } from "../hca-get-data-panel/hca-get-data-panel.component";
 import { MatrixUrlRequestCompletedComponent } from "./matrix-url-request-completed.component";
 

spa/src/app/files/hca-get-data/matrix-url-request-form/matrix-url-request-form.component.spec.ts

@@ -19,7 +19,7 @@ import { WarningComponent } from "../../../shared/warning/warning.component";
 import { WarningContentComponent } from "../../../shared/warning/warning-content.component";
 import { WarningTitleComponent } from "../../../shared/warning/warning-title.component";
 import { MatrixFormat } from "../../shared/matrix-format.model";
-import { CopyToClipboardComponent } from "../copy-to-clipboard/copy-to-clipboard.component";
+import { CopyToClipboardComponent } from "../../../shared/copy-to-clipboard/copy-to-clipboard.component";
 import { HCAGetDataPanelComponent } from "../hca-get-data-panel/hca-get-data-panel.component";
 import { MatrixPartialQueryMatchWarningComponent } from "../matrix-partial-query-match-warning/matrix-partial-query-match-warning.component";
 import { MatrixUrlRequestFormComponent } from "./matrix-url-request-form.component";

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

@@ -132,7 +132,7 @@ <h4 class="fontsize-m semi-bold">Project Downloads</h4>
                             <p class="fontsize-xs rhs downloads">
                                 <span *ngFor="let matrixUrl of state.projectMatrixUrls.listMatrixUrlsBySpecies(species)"><a
                                         [href]="matrixUrl.url"><img
-                                        src="assets/images/icon/hca-download-primary.png"/><span>{{matrixUrl.fileType}}</span></a></span>
+                                        src="assets/images/icon/hca-download-primary.png"/><span>{{matrixUrl.name}}</span></a></span>
                             </p>
                         </div>
                     </div>

spa/src/app/files/hca-project/hca-project.component.spec.ts

@@ -23,7 +23,7 @@ import { HCASectionTitleComponent } from "../../shared/hca-section-title/hca-sec
 import { HCATabComponent } from "../../shared/hca-tab/hca-tab";
 import { PopLayoutComponent } from "../../shared/pop-layout/pop-layout.component";
 import { AnalysisProtocolPipelineLinkerComponent } from "../analysis-protocol-pipeline-linker/analysis-protocol-pipeline-linker.component";
-import { CopyToClipboardComponent } from "../hca-get-data/copy-to-clipboard/copy-to-clipboard.component";
+import { CopyToClipboardComponent } from "../../shared/copy-to-clipboard/copy-to-clipboard.component";
 import { HCATooltipComponent } from "../hca-tooltip/hca-tooltip.component";
 import { ProjectIntegrationsComponent } from "../project-integrations/project-integrations.component";
 import { ProjectTSVDownloadComponent } from "../project-tsv-download/project-tsv-download.component";

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

@@ -1,5 +1,5 @@
 <div class="wrapper">
-    <div [ngClass]="{'hca-table files': true}">
+    <div class="hca-table files">
         <table-scroll [dataLoaded]="dataLoaded$">
             <mat-table *ngIf="pagination$ | async; let pagination" #table [dataSource]="dataSource" matSort
                        matSortDirection="{{defaultSortOrder.order}}" matSortActive="{{defaultSortOrder.sort}}"
@@ -286,8 +286,7 @@
                     </mat-cell>
                 </ng-container>
                 <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-                <mat-row *matRowDef="let row; columns: displayedColumns; let i = index"
-                         [ngClass]="getRowClass(i)"></mat-row>
+                <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
             </mat-table>
         </table-scroll>
         <hca-table-data-status-placeholder [loading]="loading$ | async"

spa/src/app/files/hca-table-files/hca-table-files.component.spec.ts

@@ -28,7 +28,7 @@ import { AnalysisProtocolPipelineLinkerComponent } from "../analysis-protocol-pi
 import { HCAContentEllipsisComponent } from "../hca-content-ellipsis/hca-content-ellipsis.component";
 import { HCAEllipsisTextComponent } from "../hca-content-ellipsis/hca-ellipsis-text.component";
 import { HCAContentUnspecifiedDashComponent } from "../hca-content-unspecified-bar/hca-content-unspecified-dash.component";
-import { CopyToClipboardComponent } from "../hca-get-data/copy-to-clipboard/copy-to-clipboard.component";
+import { CopyToClipboardComponent } from "../../shared/copy-to-clipboard/copy-to-clipboard.component";
 import { HCADownloadFileComponent } from "../hca-download-file/hca-download-file.component";
 import { HCATableCellComponent } from "../hca-table-cell/hca-table-cell.component";
 import { HCATableColumnHeaderComponent } from "../hca-table-column-header/hca-table-column-header.component";
@@ -40,9 +40,8 @@ import { HCATableSortComponent } from "../hca-table-sort/hca-table-sort.componen
 import { HCATooltipComponent } from "../hca-tooltip/hca-tooltip.component";
 import { ProjectTSVDownloadComponent } from "../project-tsv-download/project-tsv-download.component";
 import { DEFAULT_FILE_SUMMARY } from "../shared/file-summary.mock";
-import { ProjectDownloadsComponent } from "../project-downloads/project-downloads.component";
-import { ProjectPreparedMatrixDownloadsComponent } from "../project-prepared-matrix-downloads/project-prepared-matrix-downloads.component";
 import { DownloadService } from "../shared/download.service";
+import { DownloadButtonComponent } from "../../shared/download-button/download-button.component";
 import { TableScroll } from "../table-scroll/table-scroll.component";
 import { TableRendererService } from "../table/table-renderer.service";
 import { FILES_TABLE_MODEL } from "./table-state-table-model-files.mock";
@@ -82,9 +81,8 @@ describe("HCATableFilesComponent", () => {
                 HCAContentUnspecifiedDashComponent,
                 HCAEllipsisTextComponent,
                 HCADownloadFileComponent,
-                ProjectDownloadsComponent,
+                DownloadButtonComponent,
                 ProjectTSVDownloadComponent,
-                ProjectPreparedMatrixDownloadsComponent,
                 HCATableCellComponent,
                 HCATableColumnHeaderComponent,
                 HCATableColumnHeaderCountComponent,

spa/src/app/files/hca-table-files/hca-table-files.component.ts

@@ -31,7 +31,6 @@ import {
     getColumnDisplayName,
     getColumnSortKey,
     getColumnStyle,
-    getRowClass,
     isElementUnspecified
 } from "../table/table-methods";
 import { TableParamsModel } from "../table/table-params.model";
@@ -60,7 +59,6 @@ export class HCATableFilesComponent implements OnInit {
     getColumnClass = getColumnClass;
     getColumnDisplayName = getColumnDisplayName;
     getColumnStyle = getColumnStyle;
-    getRowClass = getRowClass;
     isElementUnspecified = isElementUnspecified;
     loading$: Observable<boolean>;
     selectFileSummary$: Observable<FileSummary>;

spa/src/app/files/hca-table-projects/hca-table-projects.component.html

@@ -1,6 +1,5 @@
 <div class="wrapper">
-    <div [ngClass]="{'hca-table projects': true, 'card-open': isAnyRowActive()}"
-         [ngStyle]="getTableStyle(tableMarginBottom)">
+    <div class="hca-table projects">
             <table-scroll [dataLoaded]="dataLoaded$">
                 <mat-table *ngIf="pagination$ | async; let pagination" #table [dataSource]="dataSource" matSort
                        matSortDirection="{{defaultSortOrder.order}}" matSortActive="{{defaultSortOrder.sort}}"
@@ -203,15 +202,13 @@
                             <hca-table-column-header-download columnSubTitle></hca-table-column-header-download>
                         </hca-table-column-header>
                     </mat-header-cell>
-                    <mat-cell *matCellDef="let element let j=index;" [ngClass]="getColumnClass('getData')"
+                    <mat-cell *matCellDef="let element" [ngClass]="getColumnClass('getData')"
                               [ngStyle]="getColumnStyle('getData')">
-                        <hca-table-cell>
-                            <project-downloads (preparedMatrixDownloadsOpened)="onPreparedMatrixDownloadsOpened($event, j)"
-                                               (preparedMatrixDownloadsPositionBelowTable)="onPreparedMatrixDownloadsPositionBelowTable($event)"
-                                               [matrixAvailable]="isAnyProjectMatrixUrlAvailable(projectsMatrixUrls$ | async, element.entryId)"
-                                               [projectId]="element.entryId"
-                                               [projectTitle]="element.projectTitle"
-                                               [projectURLs]="getProjectMatrixUrls(projectsMatrixUrls$ | async, element.entryId)"></project-downloads>
+                        <hca-table-cell class="cell-split">
+                            <project-tsv-download [projectId]="element.entryId"
+                                                  [projectTitle]="element.projectTitle"></project-tsv-download>
+                            <download-button [downloadUnavailable]="isAnyProjectMatrixUrlAvailable(projectsMatrixUrls$ | async, element.entryId)"
+                                                   (downloadClicked)="onProjectDownloadMatrixClicked(element.entryId)"></download-button>
                         </hca-table-cell>
                     </mat-cell>
                 </ng-container>
@@ -257,9 +254,8 @@
                         </hca-table-cell>
                     </mat-cell>
                 </ng-container>
-                <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-                <mat-row *matRowDef="let row; columns: displayedColumns; let i = index"
-                         [ngClass]="getRowClass(i, activeRowIndex)"></mat-row>
+                <mat-header-row *matHeaderRowDef="listColumns()"></mat-header-row>
+                <mat-row *matRowDef="let row; columns: listColumns();"></mat-row>
             </mat-table>
         </table-scroll>
         <hca-table-data-status-placeholder [loading]="loading$ | async"

spa/src/app/files/hca-table-projects/hca-table-projects.component.scss

@@ -7,7 +7,6 @@
 @import "../../site/theme/cgl.vars";
 
 :host {
-    flex: 1; // Required for <project-prepared-matrix-downloads>, and for table to take up remaining space - positions mobile download banner to bottom */
     position: relative; /* Positions fade on horizontal scroll */
 }
 
@@ -17,20 +16,10 @@
     display: flex;
     flex: 1;
     flex-direction: column;
-    height: 100%; /* Required for <project-prepared-matrix-downloads> */
 
     /* HCA table */
     .hca-table {
 
-        /* Project data matrix card open - opacity applied to unselected rows */
-        &.card-open {
-
-            /* Unselected rows */
-            mat-row:not(.active) {
-                opacity: 0.24;
-            }
-        }
-
         mat-table {
 
             /* Row - header and cell */
@@ -128,6 +117,14 @@
                     }
                 }
             }
+
+            /** Cell containing more than one item, for example the downloads column that is shared by meta and matrix */ 
+            .cell-split {
+                align-items: center;
+                display: flex;
+                flex: 1;
+                justify-content: space-around;
+            }
         }
     }
 }