Allow filtering on donors by an age range. First pass. #310 (#1168)

Co-authored-by: Fran McDade <franmcdade@Frans-MBP.hub>

Author: MillenniumFalconMechanic

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

@@ -6,7 +6,6 @@
  */
 
 // App dependencies
-import { AuthEffects } from "../auth/_ngrx/auth.effects";
 import { ConfigEffects } from "../config/_ngrx/config.effects";
 import { FileEffects } from "../files/_ngrx/file.effects";
 import { FileManifestEffects } from "../files/_ngrx/file-manifest/file-manifest.effects";
@@ -20,7 +19,6 @@ import { TableEffects } from "../files/_ngrx/table/table.effects";
 import { TerraEffects } from "../files/_ngrx/terra/terra.effects";
 
 export const AppEffects = [
-    AuthEffects,
     ConfigEffects,
     FileEffects,
     FileManifestEffects,

spa/src/app/_ngrx/app.reducer.ts

@@ -1,12 +1,11 @@
 /**
- * UCSC Genomics Institute - CGL
- * https://cgl.genomics.ucsc.edu/
+ * Human Cell Atlas
+ * https://www.humancellatlas.org/
  *
- * Set of reducers used by Boardwalk.
+ * Complete set of reducers used by app.
  */
 
 // App dependencies
-import * as authReducer from "../auth/_ngrx/auth.reducer";
 import * as configReducer from "../config/_ngrx/config.reducer";
 import * as fileReducer from "../files/_ngrx/file.reducer";
 import * as httpReducer from "../http/_ngrx/http.reducer";
@@ -15,7 +14,6 @@ import * as terraReducer from "../files/_ngrx/terra/terra.reducer";
 
 export const AppReducers = {
     ...fileReducer.reducer,
-    auth: authReducer.reducer,
     config: configReducer.reducer,
     http: httpReducer.reducer,
     ...systemReducer.reducer,

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

@@ -1,17 +1,16 @@
 /**
- * UCSC Genomics Institute - CGL
- * https://cgl.genomics.ucsc.edu/
+ * Human Cell Atlas
+ * https://www.humancellatlas.org/
  *
  * Complete application state.
  */
 
 // App dependencies
-import { AuthState } from "../auth/_ngrx/auth.state";
 import { ConfigState } from "../config/_ngrx/config.state";
 import { FileState } from "../files/_ngrx/file.state";
 import { HttpState } from "../http/_ngrx/http.state";
 import { SystemState } from "../system/_ngrx/system.state";
 import { TerraState } from "../files/_ngrx/terra/terra.state";
 import { ModalState } from "../modal/_ngrx/modal.state";
 
-export interface AppState extends AuthState, ConfigState, FileState, HttpState, ModalState, SystemState, TerraState {}
+export interface AppState extends ConfigState, FileState, HttpState, ModalState, SystemState, TerraState {}

spa/src/app/app.component.spec.ts

@@ -17,12 +17,11 @@ import { ReplaySubject } from "rxjs";
 // App dependencies
 import { AppComponent } from "./app.component";
 import { ConfigService } from "./config/config.service";
-import { SetViewStateAction } from "./files/_ngrx/file-facet-list/set-view-state.action";
+import { SetViewStateAction } from "./files/_ngrx/facet/set-view-state.action";
 import { ReleaseBannerComponent } from "./files/releases/release-banner/release-banner.component";
-import { FileFacetName } from "./files/shared/file-facet-name.model";
+import { FileFacetName } from "./files/facet/file-facet/file-facet-name.model";
 import { GenusSpecies } from "./files/shared/genus-species.model";
 import { LibraryConstructionApproach } from "./files/shared/library-construction-approach.model";
-import { QueryStringFacet } from "./files/shared/query-string-facet.model";
 import { EntityName } from "./files/shared/entity-name.model";
 import { DeviceDetectorService } from "ngx-device-detector";
 import { AnnouncementComponent } from "./shared/announcement/announcement.component";
@@ -39,18 +38,22 @@ import { CCToolbarNavSubMenuComponent } from "./shared/cc-toolbar-nav-sub-menu/c
 import { CCToolbarNavSubMenuItemComponent } from "./shared/cc-toolbar-nav-sub-menu-item/cc-toolbar-nav-sub-menu-item.component";
 import { CCToolbarNavDropDownComponent } from "./shared/cc-toolbar-nav-drop-down/cc-toolbar-nav-drop-down.component";
 import { ReleaseService } from "./files/shared/release.service";
+import { QueryStringSearchTerm } from "./files/search/url/query-string-search-term.model";
+import { SearchTermUrlService } from "./files/search/url/search-term-url.service";
 
 
 describe("AppComponent:", () => {
 
     const PROJECTS_PATH = "/projects";
-    const PROJECTS_PATH_WITH_FILTERS = "/projects?filter=%5B%7B%22facetName%22:%22libraryConstructionApproach%22,%22terms%22:%5B%22Smart-seq2%22%5D%7D%5D";
+    const PROJECTS_PATH_WITH_FILTERS = "/projects?filter=%5B%7B%22facetName%22:%22libraryConstructionApproach%22,%value%22:%5B%22Smart-seq2%22%5D%7D%5D";
 
     let component: AppComponent;
     let fixture: ComponentFixture<AppComponent>;
 
     const locationSpy = jasmine.createSpyObj("Location", ["path"]);
     const storeSpy = jasmine.createSpyObj("Store", ["pipe", "dispatch"]);
+    
+    const searchTermUrlService = new SearchTermUrlService();
 
     const navigation$ = new ReplaySubject<RouterEvent>(1);
     const routerMock = {
@@ -105,6 +108,9 @@ describe("AppComponent:", () => {
             }, {
                 provide: ReleaseService,
                 useValue: jasmine.createSpyObj("ReleaseService", ["buildReleaseView", "createReleaseDatasetView", "fetch2020MarchRelease", "isReleaseVisible"])
+            }, {
+                provide: SearchTermUrlService,
+                useValue: searchTermUrlService
             }]
         });
 
@@ -135,7 +141,7 @@ describe("AppComponent:", () => {
         component["setAppStateFromURL"]();
 
         const filters = [
-            new QueryStringFacet(FileFacetName.GENUS_SPECIES, [GenusSpecies.HOMO_SAPIENS])
+            new QueryStringSearchTerm(FileFacetName.GENUS_SPECIES, [GenusSpecies.HOMO_SAPIENS])
         ];
         const setViewAction = new SetViewStateAction(EntityName.PROJECTS, filters);
         expect(storeSpy.dispatch).toHaveBeenCalledWith(setViewAction);
@@ -149,7 +155,7 @@ describe("AppComponent:", () => {
         const activatedRoute = fixture.debugElement.injector.get(ActivatedRoute);
         spyOnProperty(activatedRoute, "snapshot").and.returnValue({
             queryParams: {
-                filter: `[{"facetName": "libraryConstructionApproach", "terms": ["Smart-seq2"]}]`
+                filter: `[{"facetName": "libraryConstructionApproach", "value": ["Smart-seq2"]}]`
             }
         });
         locationSpy.path.and.returnValue(PROJECTS_PATH_WITH_FILTERS);
@@ -158,7 +164,7 @@ describe("AppComponent:", () => {
         component["setAppStateFromURL"]();
 
         const filters = [
-            new QueryStringFacet(FileFacetName.LIBRARY_CONSTRUCTION_APPROACH, [LibraryConstructionApproach.SMART_SEQ2])
+            new QueryStringSearchTerm(FileFacetName.LIBRARY_CONSTRUCTION_APPROACH, [LibraryConstructionApproach.SMART_SEQ2])
         ];
         const setViewAction = new SetViewStateAction(EntityName.PROJECTS, filters);
         expect(storeSpy.dispatch).toHaveBeenCalledWith(setViewAction);

spa/src/app/app.component.ts

@@ -16,14 +16,12 @@ import { filter, map, takeUntil } from "rxjs/operators";
 // App dependencies
 import { Config } from "./config/config.model";
 import { selectConfigConfig } from "./config/_ngrx/config.selectors";
-import { SetViewStateAction } from "./files/_ngrx/file-facet-list/set-view-state.action";
+import { SearchTermUrlService } from "./files/search/url/search-term-url.service";
+import { SetViewStateAction } from "./files/_ngrx/facet/set-view-state.action";
 import { ClearReleaseReferrerAction } from "./files/_ngrx/release/clear-release-referrer.action";
 import { FetchProjectEditsRequestAction } from "./files/_ngrx/project-edits/fetch-project-edits-request.action";
 import { ReleaseService } from "./files/shared/release.service";
 import { EntityName } from "./files/shared/entity-name.model";
-import { FileFacetName } from "./files/shared/file-facet-name.model";
-import { QueryStringFacet } from "./files/shared/query-string-facet.model";
-import { GenusSpecies } from "./files/shared/genus-species.model";
 import { FetchReleasesRequestAction } from "./files/_ngrx/release/fetch-releases-request.action";
 import { AppState } from "./_ngrx/app.state";
 import { DeviceDetectorService } from "ngx-device-detector";
@@ -51,6 +49,7 @@ export class AppComponent implements OnInit, OnDestroy {
     /**
      * @param {DeviceDetectorService} deviceService
      * @param {ReleaseService} releaseService
+     * @param {SearchTermUrlService} searchUrlService
      * @param {Store<AppState>} store
      * @param {ActivatedRoute} activatedRoute
      * @param {Location} location
@@ -59,6 +58,7 @@ export class AppComponent implements OnInit, OnDestroy {
      */
     constructor(private deviceService: DeviceDetectorService,
                 private releaseService: ReleaseService,
+                private searchUrlService: SearchTermUrlService,
                 private store: Store<AppState>,
                 private activatedRoute: ActivatedRoute,
                 private location: Location,
@@ -123,17 +123,6 @@ export class AppComponent implements OnInit, OnDestroy {
         return !( this.router.url.includes("/releases/") || this.router.url.includes("/projects/") );
     }
 
-    /**
-     * Returns true if a filter state is encoded in the query params.
-     *
-     * @param {Params} params
-     * @returns {boolean}
-     */
-    private isFilterParamSpecified(params: Params): boolean {
-
-        return !!params["filter"];
-    }
-
     /**
      * Load project edits data from local JSON files.
      */
@@ -185,39 +174,6 @@ export class AppComponent implements OnInit, OnDestroy {
         return EntityName.PROJECTS;
     }
 
-    /**
-     * Parse the "filter" query string param, if specified.
-     *
-     * @param {Params} params
-     * @returns {QueryStringFacet[]}
-     */
-    private parseQueryStringFacets(params: Params): QueryStringFacet[] {
-
-        if ( this.isFilterParamSpecified(params) ) {
-
-            // We have a filter, let's extract it.
-            let filter;
-            const filterParam = params["filter"];
-            try {
-                filter = JSON.parse(filterParam);
-            }
-            catch (error) {
-                console.log(error);
-            }
-
-            let queryStringFacets = [];
-            if ( filter && filter.length && filter[0].facetName ) {
-                queryStringFacets = filter.map((selectedFacet) => {
-                    return new QueryStringFacet(selectedFacet["facetName"], selectedFacet["terms"]);
-                });
-            }
-
-            return queryStringFacets;
-        }
-
-        return [];
-    }
-
     /**
      * Fetch current status of system, and current status of index, and display information banners, if necessary.
      */
@@ -257,14 +213,12 @@ export class AppComponent implements OnInit, OnDestroy {
                 const params = this.activatedRoute.snapshot.queryParams;
                 const tab = this.parseTab();
 
-                const filter = this.parseQueryStringFacets(params);
+                const filter = this.searchUrlService.parseQueryStringSearchTerms(params);
 
                 // Default app state to have human selected. This is only necessary if there is currently no filter
                 // applied.
                 if ( filter.length === 0 ) {
-                    const queryStringFacet =
-                        new QueryStringFacet(FileFacetName.GENUS_SPECIES, [GenusSpecies.HOMO_SAPIENS]);
-                    filter.push(queryStringFacet);
+                    filter.push(this.searchUrlService.getDefaultSearchState());
                 }
 
                 this.store.dispatch(new SetViewStateAction(tab, filter));
@@ -276,10 +230,6 @@ export class AppComponent implements OnInit, OnDestroy {
         });
     }
 
-    /**
-     * Life cycle hooks
-     */
-
     /**
      * Kill subscriptions on destroy of component.
      */

spa/src/app/app.module.ts

@@ -25,7 +25,6 @@ import { AppComponent } from "./app.component";
 import { AppRoutes } from "./app.routes";
 import { ConfigModule } from "./config/config.module";
 import { ConfigService } from "./config/config.service";
-import { UserService } from "./data/user/user.service";
 import { FilesModule } from "./files/files.module";
 import { ReleaseBannerComponent } from "./files/releases/release-banner/release-banner.component";
 import { AppReducers } from "./_ngrx/app.reducer";
@@ -89,7 +88,6 @@ import { SystemService } from "./system/shared/system.service";
     providers: [
         LocalStorageService,
         SystemService,
-        UserService,
         // Bootstrap config from API end point, must return function from useFactory method, when function is invoked,
         // must return promise to ensure Angular "pauses" until config is resolved from API end point.
         {