Removed dupe pageview. Resolves #1198. (#1211)

Author: MillenniumFalconMechanic

spa/src/app/_ngrx/app.effects.ts

@@ -17,6 +17,7 @@ import { ReleaseEffects } from "../files/_ngrx/release/release.effects";
 import { SystemEffects } from "../system/_ngrx/system.effects";
 import { TableEffects } from "../files/_ngrx/table/table.effects";
 import { TerraEffects } from "../files/_ngrx/terra/terra.effects";
+import { UrlEffects } from "../files/_ngrx/url/url.effects";
 
 export const AppEffects = [
     ConfigEffects,
@@ -29,5 +30,6 @@ export const AppEffects = [
     ReleaseEffects,
     SystemEffects,
     TableEffects,
-    TerraEffects
+    TerraEffects,
+    UrlEffects
 ];

spa/src/app/app.component.ts

@@ -218,12 +218,12 @@ export class AppComponent implements OnInit, OnDestroy {
 
                 const filter = this.searchUrlService.parseQueryStringSearchTerms(params);
 
-                // Default app state to have human selected. This is only necessary if there is currently no filter
+                // Default app state is to have human selected. This is only necessary if there is currently no filter
                 // applied.
                 if ( filter.length === 0 ) {
                     filter.push(this.searchUrlService.getDefaultSearchState());
                 }
-                
+
                 this.store.dispatch(new SetViewStateAction(tab, filter));
 
                 if ( this.routerEventsSubscription ) {

spa/src/app/app.routes.ts

@@ -9,24 +9,25 @@
 import { Route } from "@angular/router";
 
 // App components
+import { BrowserCanActivateGuard } from "./shared/routing/browser.can-activate.guard";
 import { ErrorComponent } from "./system/error/error.component";
 import { NotFoundComponent } from "./system/not-found/not-found.component";
-import { BrowserCanActivateGuard } from "./shared/routing/browser.can-activate.guard";
 
 export const AppRoutes: Route[] = [
     {
         path: "",
-        canActivate: [BrowserCanActivateGuard],
         children: [
             {
                 path: "",
                 redirectTo: "/projects",
                 pathMatch: "full"
             }, {
                 path: "error",
+                canActivate: [BrowserCanActivateGuard],
                 component: ErrorComponent
             }, {
                 path: "not-found",
+                canActivate: [BrowserCanActivateGuard],
                 component: NotFoundComponent
             },
             {

spa/src/app/files/_ngrx/file.effects.ts

@@ -69,7 +69,7 @@ export class FileEffects {
             ofType(
                 ClearSelectedTermsAction.ACTION_TYPE, // Clear all selected terms
                 ClearSelectedAgeRangeAction.ACTION_TYPE, // Clear age range
-                InitEntityStateAction.ACTION_TYPE,
+                InitEntityStateAction.ACTION_TYPE, // Init table data for newly selected tab, if table data isn't cached
                 SetViewStateAction.ACTION_TYPE, // Setting up app state from URL params
                 SelectFileFacetTermAction.ACTION_TYPE, // Selecting facet term eg file type "matrix"
                 SelectFacetAgeRangeAction.ACTION_TYPE // Setting age range

spa/src/app/files/_ngrx/file.selectors.ts

@@ -11,7 +11,7 @@ import { createFeatureSelector, createSelector } from "@ngrx/store";
 // App dependencies
 import { FileSummaryState } from "./file-summary/file-summary.state";
 import { selectSelectedSearchTermsBySearchKey } from "./search/search.selectors";
-import { getSelectedEntity, getSelectedTable, TableState } from "./table/table.state";
+import { getSelectedEntitySpec, getSelectedTable, TableState } from "./table/table.state";
 import { Pagination } from "../table/pagination/pagination.model";
 
 /**
@@ -80,8 +80,8 @@ export const selectEntities = createSelector(selectTableState, (tableState: Tabl
  *
  * @returns {EntitySpec}
  */
-export const selectSelectedEntity = createSelector(selectTableState, (tableState: TableState) => {
-    return getSelectedEntity(tableState);
+export const selectSelectedEntitySpec = createSelector(selectTableState, (tableState: TableState) => {
+    return getSelectedEntitySpec(tableState);
 });
 
 /**

spa/src/app/files/_ngrx/table/table.state.ts

@@ -90,7 +90,7 @@ export function getSelectedTable(tableState: TableState): TableModel {
  * @param {TableState} tableState
  * @returns {EntitySpec}
  */
-export function getSelectedEntity(tableState: TableState): EntitySpec {
+export function getSelectedEntitySpec(tableState: TableState): EntitySpec {
     return tableState.entitySpecs.find(entity => entity.key === tableState.selectedEntity);
 }
 

spa/src/app/files/_ngrx/url/url.effects.ts

@@ -0,0 +1,83 @@
+/**
+ * Human Cell Atlas
+ * https://www.humancellatlas.org/
+ *
+ * URL-related side effects.
+ */
+
+// Core dependencies
+import { Injectable } from "@angular/core";
+import { Location } from "@angular/common";
+import { Actions, Effect, ofType } from "@ngrx/effects";
+import { select, Store } from "@ngrx/store";
+import { filter, map, switchMap, take, tap } from "rxjs/operators";
+
+// App dependencies
+import { AppState } from "../../../_ngrx/app.state";
+import { ClearSelectedAgeRangeAction } from "../search/clear-selected-age-range.action";
+import { SelectFacetAgeRangeAction } from "../search/select-facet-age-range.action";
+import { ClearSelectedTermsAction } from "../search/clear-selected-terms.action";
+import { SelectFileFacetTermAction } from "../search/select-file-facet-term.action";
+import { selectUrlSpecState } from "./url.selectors";
+import { ActivatedRoute, Router } from "@angular/router";
+import { EntityName } from "../../shared/entity-name.model";
+import { SearchTermUrlService } from "../../search/url/search-term-url.service";
+import { EntitySelectAction } from "../table/table.actions";
+import { SetViewStateAction } from "../facet/set-view-state.action";
+
+@Injectable()
+export class UrlEffects {
+
+    /**
+     * @param {SearchTermUrlService} searchTermUrlService
+     * @param {Store<AppState>} store
+     * @param {Location} location
+     * @param {Router} router
+     * @param {Actions} actions$
+     */
+    constructor(private searchTermUrlService: SearchTermUrlService,
+                private store: Store<AppState>,
+                private location: Location,
+                private router: Router,
+                private actions$: Actions) {
+    }
+
+    /**
+     * Update filter query string param if selected entity or selected search terms has changed. 
+     */
+    @Effect({dispatch: false})
+    updateFilterQueryParam$ = this.actions$.pipe(
+        ofType(
+            ClearSelectedTermsAction.ACTION_TYPE,
+            ClearSelectedAgeRangeAction.ACTION_TYPE,
+            EntitySelectAction.ACTION_TYPE,
+            SelectFileFacetTermAction.ACTION_TYPE,
+            SelectFacetAgeRangeAction.ACTION_TYPE,
+            SetViewStateAction.ACTION_TYPE
+        ),
+        filter(() => {
+            return this.router.isActive(EntityName.PROJECTS, false) ||
+                this.router.isActive(EntityName.SAMPLES, false) ||
+                this.router.isActive(EntityName.FILES, false)
+        }),
+        switchMap(() =>
+            this.store.pipe(
+                select(selectUrlSpecState),
+                take(1)
+            )
+        ),
+        tap((urlSpecState) => {
+
+            const filterQueryString =
+                this.searchTermUrlService.stringifySearchTerms(urlSpecState.selectedSearchTermsBySearchKey);
+
+            const path = urlSpecState.selectedEntitySpec.key;
+            const params = new URLSearchParams();
+            if ( !!filterQueryString ) {
+                params.set("filter", filterQueryString);
+            }
+            this.location.replaceState(path, params.toString());
+            
+        })
+    );
+}

spa/src/app/files/_ngrx/url/url.selectors.ts

@@ -0,0 +1,23 @@
+/**
+ * Human Cell Atlas
+ * https://www.humancellatlas.org/
+ *
+ * Selectors for querying state required for URL-related functionality, from the store.
+ */
+
+// Core dependencies
+import { createSelector } from "@ngrx/store";
+
+// App dependencies
+import { selectSelectedEntitySpec } from "../file.selectors";
+import { selectSelectedSearchTermsBySearchKey } from "../search/search.selectors";
+
+/**
+ * Return the selected entity spec (required for path-related functionality) and selected search terms (required
+ * for filter query string param functionality), combined into a single object.
+ */
+export const selectUrlSpecState  = createSelector(
+    selectSelectedEntitySpec, selectSelectedSearchTermsBySearchKey,
+    (selectedEntitySpec, selectedSearchTermsBySearchKey) => {
+        return {selectedEntitySpec, selectedSearchTermsBySearchKey};
+    });

spa/src/app/files/files.component.ts

@@ -7,12 +7,10 @@
 
 // Core dependencies
 import { Component, OnDestroy, OnInit, Renderer2 } from "@angular/core";
-import { Location } from "@angular/common";
-import * as _ from "lodash";
 import { DeviceDetectorService } from "ngx-device-detector";
 import { select, Store } from "@ngrx/store";
 import { combineLatest, Observable, Subject } from "rxjs";
-import { distinctUntilChanged, map, takeUntil } from "rxjs/operators";
+import { map, takeUntil } from "rxjs/operators";
 
 // App dependencies
 import { FilesState } from "./files.state";
@@ -21,16 +19,15 @@ import { selectFacetFacets } from "./_ngrx/facet/facet.selectors";
 import {
     selectFileSummary,
     selectEntities,
-    selectSelectedEntity
+    selectSelectedEntitySpec
 } from "./_ngrx/file.selectors";
 import {
     selectSearchTerms,
     selectSelectedProjectSearchTerms,
-    selectSelectedSearchTerms, selectSelectedSearchTermsBySearchKey
+    selectSelectedSearchTerms
 } from "./_ngrx/search/search.selectors";
 import { EntitySelectAction } from "./_ngrx/table/table.actions";
 import { SearchTerm } from "./search/search-term.model";
-import { SearchTermUrlService } from "./search/url/search-term-url.service";
 import EntitySpec from "./shared/entity-spec";
 
 @Component({
@@ -48,14 +45,10 @@ export class FilesComponent implements OnInit, OnDestroy {
 
     /**
      * @param {DeviceDetectorService} deviceService
-     * @param {SearchTermUrlService} locationService
-     * @param {Location} location
      * @param {Store<AppState>} store
      * @param {Renderer2} renderer
      */
     constructor(private deviceService: DeviceDetectorService,
-                private locationService: SearchTermUrlService,
-                private location: Location,
                 private store: Store<AppState>,
                 private renderer: Renderer2) {
     }
@@ -99,35 +92,6 @@ export class FilesComponent implements OnInit, OnDestroy {
         this.store.dispatch(new EntitySelectAction(tab.key));
     }
 
-    /**
-     * Update URL on change of selected facets.
-     */
-    private initOnStateChanges() {
-
-        // Set up the URL state management - write to the browser address bar when the selected facets change.
-        combineLatest(
-            this.store.pipe(select(selectSelectedEntity)),
-            this.store.pipe(select(selectSelectedSearchTermsBySearchKey))
-        )
-        .pipe(
-            takeUntil(this.ngDestroy$),
-            distinctUntilChanged((previous, current) => {
-                return _.isEqual(previous, current);
-            })
-        )
-        .subscribe(([selectedEntity, selectedSearchTermsBySearchKey]) => {
-
-            const filterQueryString = this.locationService.stringifySearchTerms(selectedSearchTermsBySearchKey);
-            
-            const path = selectedEntity.key;
-            const params = new URLSearchParams();
-            if ( !!filterQueryString ) {
-                params.set("filter", filterQueryString);
-            }
-            this.location.replaceState(path, params.toString());
-        });
-    }
-
     /**
      * Setup initial component state from store.
      */
@@ -137,7 +101,7 @@ export class FilesComponent implements OnInit, OnDestroy {
             this.store.pipe(select(selectFileSummary)), // Counts
             this.store.pipe(select(selectFacetFacets)), // Complete list of facets to display - both file facets (facets with term lists) as well as range facets
             this.store.pipe(select(selectEntities)), // Set of tabs to be displayed
-            this.store.pipe(select(selectSelectedEntity)), // Current selected tab
+            this.store.pipe(select(selectSelectedEntitySpec)), // Current selected tab
             this.store.pipe(select(selectSelectedSearchTerms)), // Set of possible search terms, used to populate the search autosuggest.
             this.store.pipe(select(selectSearchTerms)),
             this.store.pipe( // Current set of selected projects, if any
@@ -196,6 +160,5 @@ export class FilesComponent implements OnInit, OnDestroy {
     public ngOnInit() {
 
         this.initState();
-        this.initOnStateChanges();
     }
 }

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

@@ -100,6 +100,7 @@ import { ProjectMetadataComponent } from "./project-metadata/project-metadata.co
 import { ProjectNavComponent } from "./project-nav/project-nav.component";
 import { ProjectOverviewDataSummaryComponent } from "./project-overview-data-summary/project-overview-data-summary.component";
 import { ProjectOverviewComponent } from "./project-overview/project-overview.component";
+import { ProjectsCanActivateGuard } from "./project/projects.can-activate.guard";
 import { ProjectService } from "./project/project.service";
 import { ProjectReleaseComponent } from "./project-release/project-release.component";
 import { ProjectSummaryStatsComponent } from "./project-summary-stats-component/project-summary-stats.component";
@@ -268,6 +269,7 @@ const v2 = environment.version === "2.0";
         ProjectAnalyticsService,
         ProjectService,
         ProjectEditsService,
+        ProjectsCanActivateGuard,
         ProjectViewFactory,
         ReleaseService,
         SearchTermHttpService,