Skip to content

Commit 196310d

Browse files
Fran McDadeNoopDog
Fran McDade
authored and
NoopDog
committed
Release page implementation. First pass. #1046.
1 parent 042b5a8 commit 196310d

File tree

3 files changed

+161
-6
lines changed

3 files changed

+161
-6
lines changed

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

Lines changed: 58 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -26,11 +26,64 @@ <h2 class="fontsize-xl">Lorem ipsum dolor sit amet, consectetur adipiscing elit,
2626
</warning-content>
2727
</warning>
2828
</status-panel>
29-
<ng-container *ngIf="state$ | async as state">
30-
<div *ngFor="let organView of state.releaseOrganViews">
31-
{{organView.organ}}
32-
<div *ngFor="let datasetView of organView.datasets">
33-
{{datasetView.entryId}}
29+
<ng-container *ngIf="state$ | async as state">
30+
<div class="release-data">
31+
<div *ngFor="let organView of state.releaseOrganViews">
32+
<h2 class="fontsize-xl">{{organView.organ}}</h2>
33+
<mat-table [dataSource]="organView.datasets">
34+
<ng-container matColumnDef="projectTitle">
35+
<mat-header-cell *matHeaderCellDef class="project-title fontsize-xxs bold">
36+
<span>Project Title</span>
37+
</mat-header-cell>
38+
<mat-cell *matCellDef="let element" class="project-title fontsize-s">
39+
<a href="/releases/2020-mar">{{element.datasetId}}</a>
40+
</mat-cell>
41+
</ng-container>
42+
<ng-container matColumnDef="developmentalStage">
43+
<mat-header-cell *matHeaderCellDef class="fontsize-xxs bold">
44+
<span>Developmental<span>Stage</span></span></mat-header-cell>
45+
<mat-cell *matCellDef="let element" class="fontsize-s">
46+
<span>{{element.developmentalStage}}</span>
47+
</mat-cell>
48+
</ng-container>
49+
<ng-container matColumnDef="technology">
50+
<mat-header-cell *matHeaderCellDef class="fontsize-xxs bold">
51+
<span>Technology</span></mat-header-cell>
52+
<mat-cell *matCellDef="let element" class="fontsize-s">
53+
<span>{{renderTechnologyShortName(element.libraryConstructionApproach)}}</span>
54+
</mat-cell>
55+
</ng-container>
56+
<ng-container matColumnDef="releaseFiles">
57+
<mat-header-cell *matHeaderCellDef class="fontsize-xxs bold">
58+
<span>Release Files</span></mat-header-cell>
59+
<mat-cell *matCellDef="let element" class="fontsize-s">
60+
<a href="/releases/2020-mar">View Files</a>
61+
</mat-cell>
62+
</ng-container>
63+
<ng-container matColumnDef="annotatedExpressionMatrix">
64+
<mat-header-cell *matHeaderCellDef class="fontsize-xxs bold">
65+
<span>Annotated<span>Expression Matrix</span></span></mat-header-cell>
66+
<mat-cell *matCellDef="let element" class="fontsize-s dot">
67+
<ng-container *ngFor="let file of element.files">
68+
<a href={{file.url}} target="_blank"
69+
rel="noopener noreferrer">{{file.extension}}</a>
70+
</ng-container>
71+
</mat-cell>
72+
</ng-container>
73+
<ng-container matColumnDef="visualize">
74+
<mat-header-cell *matHeaderCellDef class="fontsize-xxs bold">
75+
<span>Visualize</span>
76+
</mat-header-cell>
77+
<mat-cell *matCellDef="let element" class="fontsize-s dot">
78+
<ng-container *ngFor="let visualization of element.visualizations">
79+
<a href={{visualization.url}} target="_blank"
80+
rel="noopener noreferrer">{{visualization.title}}</a>
81+
</ng-container>
82+
</mat-cell>
83+
</ng-container>
84+
<mat-header-row *matHeaderRowDef="columnsToDisplay"></mat-header-row>
85+
<mat-row *matRowDef="let row; columns: columnsToDisplay;"></mat-row>
86+
</mat-table>
3487
</div>
3588
</div>
3689
</ng-container>

‎spa/src/app/files/releases/release.component.scss‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,83 @@
6262
}
6363
}
6464

65+
/* Release table */
66+
.release-data {
67+
overflow: auto;
68+
width: 100%; /* Required for horizontal scroll */
69+
70+
/* Wrapper around table */
71+
> div {
72+
min-width: 1056px; /* Required for horizontal scroll - 6 columns @ min width 176px */
73+
padding-bottom: 24px;
74+
}
75+
76+
/* Organ title */
77+
h2 {
78+
margin: 24px 0;
79+
text-transform: capitalize;
80+
}
81+
82+
/* Table */
83+
mat-table {
84+
85+
.fontsize-s, .fontsize-xs, .fontsize-xxs {
86+
margin: 0; /* Overrides class "fontsize-..." margin */
87+
}
88+
89+
/* Header row */
90+
mat-header-row {
91+
border-bottom: 1px solid $hca-gray-light;
92+
min-height: 42px;
93+
}
94+
95+
/* Cell row */
96+
mat-row {
97+
border-bottom: 1px solid $hca-gray-lightest;
98+
}
99+
100+
/* Header cell */
101+
mat-header-cell {
102+
align-items: flex-start;
103+
display: flex;
104+
105+
> span span {
106+
display: block; /* Wrap header, if nested <span> */
107+
}
108+
}
109+
110+
/* Header cell, cell */
111+
mat-header-cell, mat-cell {
112+
color: $hca-black;
113+
min-width: 152px;
114+
overflow: visible;
115+
padding: 0 12px;
116+
}
117+
118+
/* Title */
119+
.project-title {
120+
flex-basis: 20%;
121+
}
122+
123+
/* Dot */
124+
.dot > * {
125+
display: inline-flex;
126+
white-space: nowrap;
127+
}
128+
129+
/* Dot - excludes last */
130+
.dot > *:not(:last-of-type):after {
131+
align-self: center;
132+
background-color: $hca-gray-lightest;
133+
border-radius: 50%;
134+
content: "";
135+
height: 3px;
136+
margin: 0 4px;
137+
width: 3px;
138+
}
139+
}
140+
}
141+
65142
/**
66143
* Small +
67144
* https://material.io/design/layout/responsive-layout-grid.html#breakpoints

‎spa/src/app/files/releases/release.component.ts‎

Lines changed: 26 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ import { ReleaseDataset } from "./2020-march/release-dataset";
3131
export class ReleaseComponent implements OnDestroy, OnInit {
3232

3333
// Locals
34+
public columnsToDisplay = ["projectTitle", "developmentalStage", "technology", "releaseFiles", "annotatedExpressionMatrix", "visualize"];
3435
private ngDestroy$ = new Subject();
3536
private state$ = new BehaviorSubject<ReleaseState>({
3637
loaded: false,
@@ -42,6 +43,30 @@ export class ReleaseComponent implements OnDestroy, OnInit {
4243
*/
4344
constructor(private store: Store<AppState>) {}
4445

46+
/**
47+
* Returns the technology, based off libraryConstructionApproach. Any libraryConstructionApproach ending with
48+
* "sequencing" shall have this removed to provide a shortened name for the technology column.
49+
*
50+
* @param {string} libraryConstructionApproach
51+
* @returns {string}
52+
*/
53+
public renderTechnologyShortName(libraryConstructionApproach: string): string {
54+
55+
let techShortName = libraryConstructionApproach;
56+
57+
let techShortNames = techShortName.split(",");
58+
59+
if ( techShortNames.length > 0 ) {
60+
61+
techShortName = techShortNames.map(shortName => {
62+
63+
return shortName.replace("sequencing", "").trim();
64+
}).join(", ");
65+
}
66+
67+
return techShortName;
68+
}
69+
4570
/**
4671
* Build view model of release. That is, project datasets grouped by organ.
4772
*
@@ -83,7 +108,7 @@ export class ReleaseComponent implements OnDestroy, OnInit {
83108
this.ngDestroy$.next(true);
84109
this.ngDestroy$.complete();
85110
}
86-
111+
87112
/**
88113
* Grab release data from store.
89114
*/

0 commit comments

Comments
 (0)