diff --git a/src/app/components/filters-dropdown/filters-dropdown.component.html b/src/app/components/filters-dropdown/filters-dropdown.component.html index 9e17fbc62..e7b0df435 100644 --- a/src/app/components/filters-dropdown/filters-dropdown.component.html +++ b/src/app/components/filters-dropdown/filters-dropdown.component.html @@ -33,6 +33,10 @@ {{ 'EVENT_SEARCH' | translate }} + + @if(selectedSearchType === searchTypes.TIMESERIES) { + {{ 'TIMESERIES_SEARCH' | translate }} + } @@ -62,6 +66,9 @@ + @if(selectedSearchType === searchTypes.TIMESERIES) { + + }
diff --git a/src/app/components/filters-dropdown/filters-dropdown.module.ts b/src/app/components/filters-dropdown/filters-dropdown.module.ts index 0498a9e66..bc5ca385b 100644 --- a/src/app/components/filters-dropdown/filters-dropdown.module.ts +++ b/src/app/components/filters-dropdown/filters-dropdown.module.ts @@ -14,6 +14,7 @@ import { FiltersDropdownComponent } from './filters-dropdown.component'; import { ListFiltersModule } from './list-filters'; import { DatasetFiltersModule } from './dataset-filters'; +import { TimeseriesFiltersModule } from './timeseries-filters'; import { BaselineFiltersModule } from './baseline-filters'; import { SbasFiltersModule } from './sbas-filters'; import { CustomProductsFiltersModule } from './custom-products-filters'; @@ -37,6 +38,7 @@ import { SharedModule } from '@shared'; SbasFiltersModule, CustomProductsFiltersModule, SarviewsFiltersModule, + TimeseriesFiltersModule, SearchButtonModule, CancelFilterChangesModule, ClearButtonModule, diff --git a/src/app/components/filters-dropdown/timeseries-filters/index.ts b/src/app/components/filters-dropdown/timeseries-filters/index.ts new file mode 100644 index 000000000..04cb5dc2d --- /dev/null +++ b/src/app/components/filters-dropdown/timeseries-filters/index.ts @@ -0,0 +1,2 @@ +export * from './timeseries-filters.module'; +export * from './timeseries-filters.component'; diff --git a/src/app/components/filters-dropdown/timeseries-filters/timeseries-filters.component.html b/src/app/components/filters-dropdown/timeseries-filters/timeseries-filters.component.html new file mode 100644 index 000000000..136e1882a --- /dev/null +++ b/src/app/components/filters-dropdown/timeseries-filters/timeseries-filters.component.html @@ -0,0 +1,21 @@ + + + + + + {{ 'SEARCH_OPTIONS' | translate }} + + + +
+ + +
+ + + + \ No newline at end of file diff --git a/src/app/components/filters-dropdown/timeseries-filters/timeseries-filters.component.scss b/src/app/components/filters-dropdown/timeseries-filters/timeseries-filters.component.scss new file mode 100644 index 000000000..e69de29bb diff --git a/src/app/components/filters-dropdown/timeseries-filters/timeseries-filters.component.ts b/src/app/components/filters-dropdown/timeseries-filters/timeseries-filters.component.ts new file mode 100644 index 000000000..1c09f4b1b --- /dev/null +++ b/src/app/components/filters-dropdown/timeseries-filters/timeseries-filters.component.ts @@ -0,0 +1,67 @@ +import {Component, OnDestroy, OnInit} from '@angular/core'; + +import { AppState } from '@store'; +import { Store } from '@ngrx/store'; +import * as scenesStore from '@store/scenes'; + +import { SubSink } from 'subsink'; +import * as models from '@models'; +import { ScreenSizeService } from '@services'; + +enum FilterPanel { + SEARCH = 'Search Options', + MASTER = 'Scene', + FILTER1 = 'Spatial Filter', + FILTER2 = 'Temporal Filter', + DATE = 'Date', + SEASON = 'Season', + OVERLAP = 'Overlap' +} +@Component({ + selector: 'app-timeseries-filters', + templateUrl: './timeseries-filters.component.html', + styleUrl: './timeseries-filters.component.scss' +}) +export class TimeseriesFiltersComponent implements OnDestroy, OnInit { + public breakpoint$ = this.screenSize.breakpoint$; + public breakpoints = models.Breakpoints; + public areResultsLoaded: boolean; + + selectedPanel: FilterPanel | null = null; + panels = FilterPanel; + defaultPanelOpenState = true; + panelIsDisabled = true; + customCollapsedHeight = '30px'; + customExpandedHeight = '30px'; + + private subs = new SubSink(); + + constructor( + private store$: Store, + private screenSize: ScreenSizeService, + ) { } + + ngOnInit(): void { + this.subs.add( + this.store$.select(scenesStore.getAreResultsLoaded).subscribe( + areLoaded => this.areResultsLoaded = areLoaded + ) + ); + } + + public isSelected(panel: FilterPanel): boolean { + return this.selectedPanel === panel; + } + + public selectPanel(panel: FilterPanel): void { + this.selectedPanel = panel; + } + + public onOpenHelp(url: string): void { + window.open(url); + } + + ngOnDestroy() { + this.subs.unsubscribe(); + } +} diff --git a/src/app/components/filters-dropdown/timeseries-filters/timeseries-filters.module.ts b/src/app/components/filters-dropdown/timeseries-filters/timeseries-filters.module.ts new file mode 100644 index 000000000..eb5ae8b7d --- /dev/null +++ b/src/app/components/filters-dropdown/timeseries-filters/timeseries-filters.module.ts @@ -0,0 +1,38 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { MatExpansionModule } from '@angular/material/expansion'; + +import { MatSharedModule } from '@shared'; +import { SeasonSelectorModule } from '@components/shared/selectors/season-selector'; +import { SbasOverlapSelectorModule } from '@components/shared/selectors/sbas-overlap-selector'; +import { DateSelectorModule } from '@components/shared/selectors/date-selector'; +import { MasterSceneSelectorModule } from '@components/shared/selectors/master-scene-selector'; +import { SearchTypeSelectorModule } from '@components/shared/selectors/search-type-selector'; +import { ResultsMenuModule } from '@components/results-menu'; +import { CopyToClipboardModule } from '@components/shared/copy-to-clipboard'; +import { DocsModalModule } from '@components/shared/docs-modal'; +import { SharedModule } from "@shared"; +import { TimeseriesFiltersComponent } from './timeseries-filters.component'; + + +@NgModule({ + declarations: [TimeseriesFiltersComponent], + imports: [ + CommonModule, + MatExpansionModule, + MatSharedModule, + SeasonSelectorModule, + SbasOverlapSelectorModule, + DateSelectorModule, + MasterSceneSelectorModule, + SearchTypeSelectorModule, + ResultsMenuModule, + CopyToClipboardModule, + DocsModalModule, + SharedModule + ], + exports: [ + TimeseriesFiltersComponent + ] +}) +export class TimeseriesFiltersModule { } diff --git a/src/app/services/search-params.service.ts b/src/app/services/search-params.service.ts index 2e14aa069..9b249ea89 100644 --- a/src/app/services/search-params.service.ts +++ b/src/app/services/search-params.service.ts @@ -224,6 +224,17 @@ export class SearchParamsService { ) ); + private timeseriesParams$ = combineLatest([ + this.searchPolygon$, + this.burstParams$ + ]).pipe( + map((params: any[]) => params + .reduce( + (total, param) => ({ ...total, ...param }), + {}) + ) + ) + public getParams = combineLatest([ this.store$.select(getSearchType), @@ -231,8 +242,9 @@ export class SearchParamsService { ).pipe( withLatestFrom(this.listParam$), withLatestFrom(this.filterSearchParams$), + withLatestFrom(this.timeseriesParams$), map( - ([[[searchType, baselineParams], listParam], filterParams]) => { + ([[[[searchType, baselineParams], listParam], filterParams], timeseriesParams]) => { switch (searchType) { case models.SearchType.LIST: { return listParam; @@ -249,6 +261,9 @@ export class SearchParamsService { case models.SearchType.CUSTOM_PRODUCTS: { return listParam; } + case models.SearchType.TIMESERIES: { + return timeseriesParams; + } default: { return filterParams; } diff --git a/src/app/store/scenes/scenes.reducer.ts b/src/app/store/scenes/scenes.reducer.ts index ac1e387dc..5d2430c54 100644 --- a/src/app/store/scenes/scenes.reducer.ts +++ b/src/app/store/scenes/scenes.reducer.ts @@ -19,6 +19,7 @@ export interface ScenesState { selectedPair: string[] | null; areResultsLoaded: boolean; scenes: {[id: string]: string[]}; + timeseriesResults: any; unzipped: {[id: string]: UnzippedFolder[]}; openUnzippedProduct: string | null; productUnzipLoading: string | null; @@ -49,6 +50,7 @@ export const initState: ScenesState = { openUnzippedProduct: null, products: {}, areResultsLoaded: false, + timeseriesResults: {}, selected: null, master: null, diff --git a/src/app/store/search/search.action.ts b/src/app/store/search/search.action.ts index 08d206d25..32e9ba8b8 100644 --- a/src/app/store/search/search.action.ts +++ b/src/app/store/search/search.action.ts @@ -23,6 +23,7 @@ export enum SearchActionType { LOAD_ON_DEMAND_SCENES_LIST = '[Search] Load on Demand Scenes List', SARVIEWS_SEARCH_RESPONSE = '[Search] SARViews Search Response', + TIMESERIES_SEARCH_RESPONSE = '[Search] Timeseries Search Response', MAKE_EVENT_PRODUCT_CMR_SEARCH = '[Search] Make a search for CMR Products with SARVIEWS Products', EVENT_PRODUCT_CMR_RESPONSE = '[Search] Event Monitoring CMR Search Response', SET_SEARCH_OUT_OF_DATE = '[Search] Set if Search is Out of Date' @@ -74,6 +75,12 @@ export class SarviewsEventsResponse implements Action { constructor(public payload: {events: SarviewsEvent[]}) {} } +export class TimeseriesSearchResponse implements Action { + public readonly type = SearchActionType.TIMESERIES_SEARCH_RESPONSE; + + constructor(public payload: any) {} +} + export class SearchError implements Action { public readonly type = SearchActionType.SEARCH_ERROR; @@ -132,4 +139,5 @@ export type SearchActions = | LoadOnDemandScenesList | SetSearchTypeAfterSave | SarviewsEventsResponse + | TimeseriesSearchResponse | SetSearchOutOfDate; diff --git a/src/app/store/search/search.effect.ts b/src/app/store/search/search.effect.ts index df9e356f6..79a4ac42c 100644 --- a/src/app/store/search/search.effect.ts +++ b/src/app/store/search/search.effect.ts @@ -10,7 +10,8 @@ import { map, withLatestFrom, switchMap, catchError, filter, first, tap, debounc import { AppState } from '../app.reducer'; import { SetSearchAmount, EnableSearch, DisableSearch, SetSearchType, SetNextJobsUrl, - Hyp3BatchResponse, SarviewsEventsResponse, SetSearchOutOfDate + Hyp3BatchResponse, SarviewsEventsResponse, SetSearchOutOfDate, + TimeseriesSearchResponse } from './search.action'; import * as scenesStore from '@store/scenes'; import * as filtersStore from '@store/filters'; @@ -52,6 +53,7 @@ export class SearchEffects { private sarviewsService: services.SarviewsEventsService, private http: HttpClient, private notificationService: services.NotificationService, + private netCdfService: services.NetcdfServiceService ) { } public clearMapInteractionModeOnSearch = createEffect(() => this.actions$.pipe( @@ -103,6 +105,10 @@ export class SearchEffects { if (searchType === SearchType.CUSTOM_PRODUCTS) { return this.customProductsQuery$(); } + if (searchType === SearchType.TIMESERIES) { + return this.timeseriesQuery$(); + } + this.logCountries(); @@ -220,6 +226,23 @@ export class SearchEffects { ]) )); + public timeseriesSearchResponse = createEffect(() => this.actions$.pipe( + ofType(SearchActionType.TIMESERIES_SEARCH_RESPONSE), + withLatestFrom(this.store$.select(getSearchType)), + filter(([_, searchType]) => searchType === SearchType.TIMESERIES), + switchMap(([action, _]) => { + console.log('SEARCH RESPONSE') + console.log(action) + + return [ + new scenesStore.SetScenes({ + products: [], + searchType: action.payload.searchType + }) + ] + }) + )) + public showResultsMenuOnSearchResponse = createEffect(() => this.actions$.pipe( ofType(SearchActionType.SEARCH_RESPONSE), map(_ => new uiStore.OpenResultsMenu()), @@ -233,7 +256,15 @@ export class SearchEffects { public setMapInteractionModeBasedOnSearchType = createEffect(() => this.actions$.pipe( ofType(SearchActionType.SET_SEARCH_TYPE_AFTER_SAVE), filter(action => action.payload === models.SearchType.DATASET || action.payload === models.SearchType.TIMESERIES), - map(_ => new mapStore.SetMapInteractionMode(models.MapInteractionModeType.DRAW)) + switchMap((action) => { + let output : any[] = [ + new mapStore.SetMapInteractionMode(models.MapInteractionModeType.DRAW) + ]; + if (action.payload === models.SearchType.TIMESERIES) { + output.push(new mapStore.SetMapDrawMode(models.MapDrawModeType.POINT)) + } + return output; + }) )); public clearResultsWhenSearchTypeChanges = createEffect(() => this.actions$.pipe( @@ -456,6 +487,25 @@ export class SearchEffects { ); } + private timeseriesQuery$() { + return combineLatest( + this.asfApiQuery$, + this.searchParams$.getParams.pipe( + map(params => { + this.netCdfService.getTimeSeries(params) + }) + ) + ).pipe( + switchMap(([_project, _test]) => { + console.log(_project) + return of(new TimeseriesSearchResponse({})) + }) + // results => { + // ) + // } + ) + } + private hyp3JobToProducts(jobs, products) { const virtualProducts = jobs .filter(job => products[job.job_parameters.granules[0]]) diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss index b950334bd..3eb3acc41 100644 --- a/src/styles/_variables.scss +++ b/src/styles/_variables.scss @@ -1,7 +1,7 @@ // variables -$asf-font-size: '16px'; -$asf-line-height: '17px'; +$asf-font-size: 16px; +$asf-line-height: 17px; $asf-ribbon-icon-size: 18px; $uaf-primary-blue: #236192;