Skip to content

Commit 20c08ad

Browse files
MillenniumFalconMechanicMillenniumFalconMechanic
authored
Updated release table UI. Resolves #1121. (#1133)
1 parent 6609bb2 commit 20c08ad

22 files changed

+697
-94
lines changed

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

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,6 @@ p {
1414
/* ReleaseFilesModalComponent */
1515
:host-context(release-files-modal) {
1616

17-
border-top: 1px solid $hca-gray-lightest;
1817
display: inline-block;
19-
margin-top: 32px;
20-
padding-top: 12px;
18+
padding-top: 16px;
2119
}

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

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -119,6 +119,8 @@ import { TermSortService } from "./sort/term-sort.service";
119119
import { TableRendererService } from "./table/table-renderer.service";
120120
import { TableScroll } from "./table-scroll/table-scroll.component";
121121
import { ReleaseService } from "./shared/release.service";
122+
import { ReleaseVisualizationsModalComponent } from "./releases/release-visualizations-modal/release-visualizations-modal.component";
123+
import { ReleaseVisualizationsModalContainerComponent } from "./releases/visualizations-modal-container/release-visualizations-modal-container.component";
122124

123125
@NgModule({
124126
imports: [
@@ -216,14 +218,17 @@ import { ReleaseService } from "./shared/release.service";
216218
ReleaseComponent,
217219
ReleaseFilesModalComponent,
218220
ReleaseFilesModalContainerComponent,
221+
ReleaseVisualizationsModalComponent,
222+
ReleaseVisualizationsModalContainerComponent,
219223
ReleaseTableComponent,
220224
ReleaseTitleOverlineComponent,
221225
TableScroll
222226
],
223227
entryComponents: [
224228
ProjectDownloadManifestModalComponent,
225229
ProjectDownloadMatrixModalComponent,
226-
ReleaseFilesModalComponent
230+
ReleaseFilesModalComponent,
231+
ReleaseVisualizationsModalComponent
227232
],
228233
providers: [
229234
ConfigService,

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ import { ProjectReleaseComponent } from "./project-release/project-release.compo
2323
import { ProjectSummaryStatsComponent } from "./project-summary-stats-component/project-summary-stats.component";
2424
import { ReleaseComponent } from "./releases/release.component";
2525
import { ReleaseFilesModalContainerComponent } from "./releases/release-files-modal-container/release-files-modal-container.component";
26+
import { ReleaseVisualizationsModalContainerComponent } from "./releases/visualizations-modal-container/release-visualizations-modal-container.component";
2627

2728
export const routes: Route[] = [
2829
{
@@ -89,6 +90,10 @@ export const routes: Route[] = [
8990
{
9091
path: ":id/m/releases/2020-mar/datasets/:datasetId/release-files",
9192
component: ReleaseFilesModalContainerComponent,
93+
},
94+
{
95+
path: ":id/m/releases/2020-mar/datasets/:datasetId/visualizations",
96+
component: ReleaseVisualizationsModalContainerComponent,
9297
}
9398
]
9499
},

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<h2 class="fontsize-xl">2020 March Data Release</h2>
22
<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>
3-
<release-table *ngIf="state$ | async as state"
3+
<release-table *ngIf="state$ | async as state"
44
[columnsToDisplay]="columnsToDisplay"
55
[releaseOrganViews]="state.releaseOrganViews"></release-table>

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,11 @@
66
*/
77
@import "../../site/theme/cgl.vars";
88

9+
:host {
10+
display: block;
11+
max-width: 1090px; /* Snap table at max width */
12+
}
13+
914
/* Title */
1015
h2 {
1116
margin: 14px 0 24px;

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,8 @@ import { ReleaseService } from "../shared/release.service";
2828
export class ProjectReleaseComponent implements OnDestroy, OnInit {
2929

3030
// Locals
31-
public columnsToDisplay = ["dataset", "visualize", "releaseFiles", "organ", "developmentalStage", "technology"];
31+
public columnsToDisplay = ["dataset", "organ", "developmentalStage", "technology", "releaseFiles", "visualize",
32+
"attributes", "actions"]; // attributes and actions are mobile-only columns, to group values into a single column
3233
private ngDestroy$ = new Subject();
3334
private state$ = new BehaviorSubject<ReleaseState>({
3435
loaded: false,

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,6 @@ export class ProjectSupplementaryLinksComponent implements OnDestroy, OnInit {
9494
filter(project => !!project),
9595
takeUntil(this.ngDestroy$)
9696
).subscribe(project => {
97-
console.log(project.supplementaryLinks)
9897
this.state$.next({
9998
loaded: true,
10099
project

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

Lines changed: 42 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -18,62 +18,72 @@ <h2 class="fontsize-xl">{{organView.organ}}</h2>
1818
<span>{{element.datasetId}}</span>
1919
</mat-cell>
2020
</ng-container>
21+
2122
<ng-container matColumnDef="developmentalStage">
22-
<mat-header-cell *matHeaderCellDef class="fontsize-xxs bold">
23-
<span>Developmental<span>Stage</span></span></mat-header-cell>
24-
<mat-cell *matCellDef="let element" class="fontsize-xxs">
23+
<mat-header-cell *matHeaderCellDef class="stage fontsize-xxs bold">
24+
<span>Developmental<br/>Stage</span></mat-header-cell>
25+
<mat-cell *matCellDef="let element" class="stage fontsize-xxs desktop-only">
2526
<span>{{element.developmentalStage}}</span>
2627
</mat-cell>
2728
</ng-container>
2829
<ng-container matColumnDef="organ">
29-
<mat-header-cell *matHeaderCellDef class="fontsize-xxs bold">
30+
<mat-header-cell *matHeaderCellDef class="organ fontsize-xxs bold">
3031
<span>Organ</span>
3132
</mat-header-cell>
32-
<mat-cell *matCellDef="let element" class="fontsize-xxs">
33+
<mat-cell *matCellDef="let element" class="organ fontsize-xxs desktop-only">
3334
<span>{{element.organ}}</span>
3435
</mat-cell>
3536
</ng-container>
3637
<ng-container matColumnDef="technology">
37-
<mat-header-cell *matHeaderCellDef class="fontsize-xxs bold">
38+
<mat-header-cell *matHeaderCellDef class="technology fontsize-xxs bold">
3839
<span>Technology</span></mat-header-cell>
39-
<mat-cell *matCellDef="let element" class="fontsize-xxs">
40+
<mat-cell *matCellDef="let element" class="technology fontsize-xxs desktop-only">
4041
<span>{{renderTechnologyShortName(element.libraryConstructionApproach)}}</span>
4142
</mat-cell>
4243
</ng-container>
4344
<ng-container matColumnDef="releaseFiles">
44-
<mat-header-cell *matHeaderCellDef class="fontsize-xxs bold">
45+
<mat-header-cell *matHeaderCellDef class="release-files fontsize-xxs bold">
4546
<span>Release Files</span></mat-header-cell>
46-
<mat-cell *matCellDef="let element" class="fontsize-xxs">
47-
<a routerLink="/projects/{{element.entryId}}/m/releases/2020-mar/datasets/{{element.datasetId}}/release-files"
48-
(click)="setReleaseFilesReferrer()">View Files</a>
49-
</mat-cell>
50-
</ng-container>
51-
<ng-container matColumnDef="annotatedExpressionMatrix">
52-
<mat-header-cell *matHeaderCellDef class="fontsize-xxs bold">
53-
<span>Annotated<span>Expression Matrix</span></span></mat-header-cell>
54-
<mat-cell *matCellDef="let element" class="fontsize-xxs dot">
55-
<ng-container *ngFor="let file of element.files">
56-
<a href={{file.url}} target="_blank"
57-
rel="noopener noreferrer">{{file.extension}}</a>
58-
</ng-container>
47+
<mat-cell *matCellDef="let element" class="release-files fontsize-xxs desktop-only">
48+
<button class="button secondary size-s"
49+
[routerLink]="getDatasetReleaseFilesUrl(element.entryId, element.datasetId)"
50+
(click)="setReleaseFilesReferrer()">
51+
Downloads
52+
</button>
5953
</mat-cell>
6054
</ng-container>
6155
<ng-container matColumnDef="visualize">
62-
<mat-header-cell *matHeaderCellDef class="fontsize-xxs bold visualize">
56+
<mat-header-cell *matHeaderCellDef class="visualizations fontsize-xxs bold">
6357
<span>Visualizations</span>
6458
</mat-header-cell>
65-
<mat-cell *matCellDef="let element" class="fontsize-xxs dot visualize">
66-
<ng-container *ngFor="let visualization of element.visualizations">
67-
<hca-tooltip [tooltipClass]="'hca-tooltip'"
68-
[tooltipContent]="visualization.description"
69-
[tooltipDisabled]="false"
70-
[tooltipPosition]="'above'">
71-
<a href={{visualization.url}} target="_blank"
72-
rel="noopener noreferrer" (click)="trackExternalLink(element, visualization)">{{visualization.title}}</a>
73-
</hca-tooltip>
74-
</ng-container>
59+
<mat-cell *matCellDef="let element" class="visualizations fontsize-xxs desktop-only">
60+
<button class="button secondary size-s"
61+
[routerLink]="getDatasetVisualizationsUrl(element.entryId, element.datasetId)"
62+
(click)="setReleaseFilesReferrer()">Visualizations</button>
63+
</mat-cell>
64+
</ng-container>
65+
<!-- Mobile only columns -->
66+
<ng-container matColumnDef="attributes">
67+
<mat-header-cell *matHeaderCellDef class="attributes fontsize-xxs bold mobile-only">
68+
<span class="dot"><span>Organ</span><span>Stage</span><span>Technology</span></span></mat-header-cell>
69+
<mat-cell *matCellDef="let element" class="attributes fontsize-xxs mobile-only">
70+
<div class="dot"><span>{{element.organ}}</span><span>{{element.developmentalStage}}</span><span>{{renderTechnologyShortName(element.libraryConstructionApproach)}}</span></div>
71+
</mat-cell>
72+
</ng-container>
73+
<ng-container matColumnDef="actions">
74+
<mat-header-cell *matHeaderCellDef class="actions fontsize-xxs bold mobile-only">
75+
<span class="dot"><span>Release Files</span><span>Visualize</span></span></mat-header-cell>
76+
<mat-cell *matCellDef="let element" class="actions fontsize-xxs mobile-only">
77+
<button class="button secondary size-s"
78+
[routerLink]="getDatasetReleaseFilesUrl(element.entryId, element.datasetId)"
79+
(click)="setReleaseFilesReferrer()">
80+
Downloads
81+
</button><button class="button secondary size-s"
82+
[routerLink]="getDatasetVisualizationsUrl(element.entryId, element.datasetId)"
83+
(click)="setReleaseFilesReferrer()">Visualizations</button>
7584
</mat-cell>
7685
</ng-container>
86+
<!-- Config -->
7787
<mat-header-row *matHeaderRowDef="columnsToDisplay"></mat-header-row>
7888
<mat-row *matRowDef="let row; columns: columnsToDisplay;"></mat-row>
7989
</mat-table>

0 commit comments

Comments
 (0)