feat: search type api setup

src/app/components/filters-dropdown/filters-dropdown.component.html

@@ -33,6 +33,10 @@
         <ng-container *ngIf="selectedSearchType === searchTypes.SARVIEWS_EVENTS">
           {{ 'EVENT_SEARCH' | translate }}
         </ng-container>
+
+        @if(selectedSearchType === searchTypes.TIMESERIES) {
+          {{ 'TIMESERIES_SEARCH' | translate }}
+        }
       </div>
     </div>
 
@@ -62,6 +66,9 @@
       <ng-container *ngIf="selectedSearchType === searchTypes.SARVIEWS_EVENTS">
         <app-sarviews-filters></app-sarviews-filters>
       </ng-container>
+      @if(selectedSearchType === searchTypes.TIMESERIES) {
+        <app-timeseries-filters></app-timeseries-filters>
+      }
     </div>
 
     <div class="footer">

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,

src/app/components/filters-dropdown/timeseries-filters/index.ts

@@ -0,0 +1,2 @@
+export * from './timeseries-filters.module';
+export * from './timeseries-filters.component';

src/app/components/filters-dropdown/timeseries-filters/timeseries-filters.component.html

@@ -0,0 +1,21 @@
+<mat-accordion multi>
+	<mat-expansion-panel
+	  *ngIf="(breakpoint$ | async) === breakpoints.MOBILE"
+	  [expanded]="defaultPanelOpenState" [disabled]="panelIsDisabled"
+	  (click)="selectPanel(panels.SEARCH)"
+	  [class.raised-section]="isSelected(panels.SEARCH)">
+
+	  <mat-expansion-panel-header [collapsedHeight]="customCollapsedHeight" [expandedHeight]="customExpandedHeight">
+		<mat-panel-title>
+		  {{ 'SEARCH_OPTIONS' | translate }}
+		</mat-panel-title>
+	  </mat-expansion-panel-header>
+
+	  <div style="display: flex; margin-top: 25px;">
+		<app-search-type-selector style="margin-right: 10px;">
+		</app-search-type-selector>
+	  </div>
+	</mat-expansion-panel>
+
+  </mat-accordion>
+

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<AppState>,
+    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();
+  }
+}

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 { }

src/app/services/search-params.service.ts

@@ -224,15 +224,27 @@ 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),
     this.baselineSearchParams$]
   ).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;
           }

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,

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;

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<TimeseriesSearchResponse>(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<SearchResponse>(SearchActionType.SEARCH_RESPONSE),
     map(_ => new uiStore.OpenResultsMenu()),
@@ -233,7 +256,15 @@ export class SearchEffects {
   public setMapInteractionModeBasedOnSearchType = createEffect(() => this.actions$.pipe(
     ofType<SetSearchType>(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]])

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;