Release detail content. #1062.

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

@@ -96,11 +96,12 @@ import { ProjectMetadataComponent } from "./project-metadata/project-metadata.co
 import { ProjectNavComponent } from "./project-nav/project-nav.component";
 import { ProjectOverviewComponent } from "./project-overview/project-overview.component";
 import { ProjectOverviewDataSummaryComponent } from "./project-overview-data-summary/project-overview-data-summary.component";
+import { ProjectReleaseComponent } from "./project-release/project-release.component";
 import { ProjectSummaryStatsComponent } from "./project-summary-stats-component/project-summary-stats.component";
 import { ProjectViewFactory } from "./project-view/project-view.factory";
-import { ProjectReleaseComponent } from "./releases/project-release/project-release.component";
 import { ReleaseComponent } from "./releases/release.component";
 import { ReleaseTableComponent } from "./releases/release-table/release-table.component";
+import { ReleaseTitleOverlineComponent } from "./releases/release-title-overline/release-title-overline.component";
 import { SearchTermService } from "./shared/search-term.service";
 import { DownloadService } from "./shared/download.service";
 import { FileFacetDisplayService } from "./shared/file-facet-display.service";
@@ -212,6 +213,7 @@ import { ReleaseService } from "./shared/release.service";
         ProjectSupplementaryLinksComponent,
         ReleaseComponent,
         ReleaseTableComponent,
+        ReleaseTitleOverlineComponent,
         TableScroll
     ],
     entryComponents: [

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

@@ -19,9 +19,9 @@ import { ProjectExternalResourcesComponent } from "./project-external-resources/
 import { ProjectGuardComponent } from "./project-guard/project-guard.component";
 import { ProjectMetadataComponent } from "./project-metadata/project-metadata.component";
 import { ProjectOverviewComponent } from "./project-overview/project-overview.component";
+import { ProjectReleaseComponent } from "./project-release/project-release.component";
 import { ProjectSummaryStatsComponent } from "./project-summary-stats-component/project-summary-stats.component";
 import { ProjectSupplementaryLinksComponent } from "./project-supplementary-links/project-supplementary-links.component";
-import { ProjectReleaseComponent } from "./releases/project-release/project-release.component";
 import { ReleaseComponent } from "./releases/release.component";
 
 export const routes: Route[] = [

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

@@ -1,8 +1,9 @@
-<pop-layout [tabs]="getProjectDetailTabs()">
+<pop-layout [tabs]="getProjectDetailTabs()" *ngIf="state$ | async as state">
     <ng-container title>Explore Project</ng-container>
-    <project-nav nav></project-nav>
+    <project-nav nav [projectInRelease]="state.projectInRelease"></project-nav>
     <div content>
-        <status-panel class="project-title" *ngIf="state$ | async as state">
+        <status-panel class="project-title">
+            <release-title-overline *ngIf="state.projectInRelease"></release-title-overline>
             <h2 class="fontsize-xl">{{state.project.projectTitle}}</h2>
             <div class="select-project"
                  (click)="onProjectSelected(state.projectSelected, state.project.entryId, state.project.projectShortname)">

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

@@ -11,6 +11,7 @@
     /* Content container */
     div[content] {
         flex: 1;
+        overflow: hidden; /* Required for project-release component */
         padding: 30px 0 36px;
     }
 }

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

@@ -40,6 +40,7 @@ export class ProjectDetailComponent {
 
     // Template variables
     private backUrl: string;
+    private releaseReferrer: boolean;
     private state$: Observable<ProjectDetailState>;
 
     /**
@@ -48,8 +49,7 @@ export class ProjectDetailComponent {
      * @param {Router} router
      * @param {Store<AppState>} store
      */
-    public constructor(private activatedRoute: ActivatedRoute, private router: Router, private store: Store<AppState>) {
-    }
+    public constructor(private activatedRoute: ActivatedRoute, private router: Router, private store: Store<AppState>) {}
 
     /**
      * Returns the class for the select box.
@@ -72,7 +72,18 @@ export class ProjectDetailComponent {
      */
     public getProjectDetailTabs(): EntitySpec[] {
 
-        return [{key: this.backUrl, displayName: "Back"}];
+        let tabName;
+
+        if ( this.releaseReferrer ) {
+
+            tabName = "2020 March Data Release";
+        }
+        else {
+
+            tabName = "Back";
+        }
+
+        return [{key: this.backUrl, displayName: tabName}];
     }
 
     /**
@@ -124,6 +135,7 @@ export class ProjectDetailComponent {
                 take(1)
             )
             .subscribe((releaseReferrer) => {
+                this.releaseReferrer = releaseReferrer;
                 this.backUrl = releaseReferrer ? "releases/2020-mar" : EntityName.PROJECTS
             });
     }

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

@@ -1 +1 @@
-<nav [navItems]="navItems"></nav>
+<nav [navItems]="buildNavItems()"></nav>

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

@@ -6,15 +6,16 @@
  */
 
 // Core dependencies
-import { Component } from "@angular/core";
+import { Component, Input } from "@angular/core";
 import { ActivatedRoute } from "@angular/router";
 import { DeviceDetectorService } from "ngx-device-detector";
 import { Subject } from "rxjs";
 import { takeUntil } from "rxjs/operators";
 
 // App dependencies
-import { ProjectNav } from "./project-nav.model";
+import { NavItem } from "../../shared/nav/nav-item.model";
 import { EntityName } from "../shared/entity-name.model";
+import { ProjectNav } from "./project-nav.model";
 
 @Component({
     selector: "project-nav",
@@ -23,10 +24,20 @@ import { EntityName } from "../shared/entity-name.model";
 })
 export class ProjectNavComponent {
 
+    // Inputs
+    @Input() projectInRelease: boolean;
+
     // Locals
-    private navItems;
-    private ngDestroy$ = new Subject();
+    private dataCitation: NavItem;
     private deviceInfo = null;
+    private expressionMatrices: NavItem;
+    private externalResources: NavItem;
+    private ngDestroy$ = new Subject();
+    private projectInformation: NavItem;
+    private projectMetadata: NavItem;
+    private projectReleases: NavItem;
+    private summaryStats: NavItem;
+    private supplementaryLinks: NavItem;
 
     /**
      * @param {ActivatedRoute} route
@@ -38,65 +49,86 @@ export class ProjectNavComponent {
 
             const projectId = params.id;
 
-            const projectInformation = {
+            this.projectInformation = {
                 display: "Project Information",
                 routerLink: this.buildRouterLinkForSection(projectId, ProjectNav.PROJECT_INFORMATION)
             };
 
-            const projectMetadata = {
+            this.projectMetadata = {
                 display: "Project Metadata",
                 routerLink: this.buildRouterLinkForSection(projectId, ProjectNav.PROJECT_METADATA)
             };
 
-            const expressionMatrices = {
+            this.expressionMatrices = {
                 display: "Expression Matrices",
                 routerLink: this.buildRouterLinkForSection(projectId, ProjectNav.EXPRESSION_MATRICES)
             };
 
-            const supplementaryLinks = {
+            this.supplementaryLinks = {
                 display: "Supplementary Links",
                 routerLink: this.buildRouterLinkForSection(projectId, ProjectNav.SUPPLEMENTARY_LINKS)
             };
 
-            const externalResources = {
+            this.externalResources = {
                 display: "External Resources",
                 routerLink: this.buildRouterLinkForSection(projectId, ProjectNav.EXTERNAL_RESOURCES)
             };
 
-            const summaryStats = {
+            this.summaryStats = {
                 display: "Summary Stats",
                 routerLink: this.buildRouterLinkForSection(projectId, ProjectNav.SUMMARY_STATS)
             };
 
-            const dataCitation = {
+            this.dataCitation = {
                 display: "Data Citation",
                 routerLink: this.buildRouterLinkForSection(projectId, ProjectNav.DATA_CITATION)
             };
 
-            const projectReleases = {
+            this.projectReleases = {
                 display: "Releases",
-                routerLink: "",
                 subNavItems: [{
                     display: "2020 March Data Release",
                     routerLink: this.buildRouterLinkForSection(projectId, ProjectNav.DATA_RELEASE_2020_MAR)
                 }]
-            };
+            }
+        });
+    }
 
-            let navItemList;
+    /**
+     * Build up list of navigation items for the project detail page.
+     *
+     * @returns {any}
+     */
+    public buildNavItems() {
 
-            // Check if device is handheld and set up nav accordingly
-            if ( this.isDeviceHandheld() ) {
+        let navItemList;
 
-                navItemList = [projectInformation, externalResources];
-            }
-            else {
+        // Check if device is handheld and set up nav accordingly
+        if ( this.isDeviceHandheld() ) {
+
+            navItemList = [
+                this.projectInformation,
+                this.externalResources
+            ];
+        }
+        else {
 
-                navItemList =
-                    [projectInformation, projectMetadata, expressionMatrices, supplementaryLinks, externalResources, projectReleases];
+            navItemList = [
+                this.projectInformation,
+                this.projectMetadata,
+                this.expressionMatrices,
+                this.supplementaryLinks,
+                this.externalResources
+            ];
+
+            // Check if project is a part of the release and add "releases" to the nav accordingly
+            if ( this.projectInRelease ) {
+
+                navItemList.push(this.projectReleases);
             }
+        }
 
-            this.navItems = navItemList;
-        });
+        return navItemList;
     }
 
     /**

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

@@ -0,0 +1,4 @@
+<h2 class="fontsize-xl">2020 March Data Release</h2>
+<p class="fontsize-s max600">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+<learn-more></learn-more>
+<release-table *ngIf="state$ | async as state" [columnsToDisplay]="columnsToDisplay" [releaseOrganViews]="state.releaseOrganViews"></release-table>

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

@@ -0,0 +1,21 @@
+/*
+ * Human Cell Atlas
+ * https://www.humancellatlas.org/
+ *
+ * Styles for project release detail component.
+ */
+@import "../../site/theme/cgl.vars";
+
+/* Title */
+h2 {
+    margin: 14px 0 24px;
+}
+
+/* Styles */
+
+/* Max widths */
+/* 600px */
+.max600 {
+    max-width: 600px;
+}
+

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

@@ -0,0 +1,75 @@
+/*
+ * Human Cell Atlas
+ * https://www.humancellatlas.org/
+ *
+ * Release component for displaying project release details.
+ */
+
+// Core dependencies
+import { Component, OnDestroy, OnInit } from "@angular/core";
+import { ActivatedRoute } from "@angular/router";
+import { select, Store } from "@ngrx/store";
+import { BehaviorSubject, Subject } from "rxjs/index";
+import { filter, map, takeUntil } from "rxjs/operators";
+
+// App dependencies
+import { AppState } from "../../_ngrx/app.state";
+import { selectReleaseByNameAndProjectId } from "../_ngrx/release/release.selectors";
+import { ReleaseState } from "../releases/release.state";
+import { ReleaseName } from "../releases/release-name.model";
+import { ReleaseOrganView } from "../releases/release-organ-view.model";
+import { ReleaseService } from "../shared/release.service";
+
+@Component({
+    selector: "project-release",
+    templateUrl: "./project-release.component.html",
+    styleUrls: ["./project-release.component.scss"]
+})
+export class ProjectReleaseComponent implements OnDestroy, OnInit {
+
+    // Locals
+    public columnsToDisplay = ["study", "developmentalStage", "technology", "releaseFiles", "visualize"];
+    private ngDestroy$ = new Subject();
+    private state$ = new BehaviorSubject<ReleaseState>({
+        loaded: false,
+        releaseOrganViews: []
+    });
+
+    /**
+     * @param {Store<AppState>} store
+     */
+    constructor(private activatedRoute: ActivatedRoute,
+                private store: Store<AppState>,
+                private releaseService: ReleaseService) {}
+
+    /**
+     * Kill subscriptions on destroy of component.
+     */
+    public ngOnDestroy() {
+
+        this.ngDestroy$.next(true);
+        this.ngDestroy$.complete();
+    }
+
+    /**
+     * Grab release data from store.
+     */
+    public ngOnInit() {
+
+        // Grab the project ID from the URL.
+        const projectId = this.activatedRoute.parent.snapshot.paramMap.get("id");
+
+        this.store.pipe(
+            select(selectReleaseByNameAndProjectId, {name: ReleaseName.RELEASE_2020_MAR, projectId: projectId}),
+            filter(release => !!release),
+            map((release) =>
+                this.releaseService.buildReleaseView(release)),
+            takeUntil(this.ngDestroy$)
+        ).subscribe((releaseOrganViews: ReleaseOrganView[]) => {
+            this.state$.next({
+                loaded: true,
+                releaseOrganViews
+            });
+        });
+    }
+}

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

@@ -18,6 +18,7 @@ export interface ReleaseDatasetView {
     developmentalStage: DevelopmentalStage;
     // files: ReleaseFile[]; TODO(mim)
     libraryConstructionApproach: LibraryConstructionApproach;
+    projectShortname: string; // Project short name, pulled from ReleaseProject
     // visualizations: ReleaseVisualization[]; TODO(mim)
 }