Merge remote-tracking branch 'ASF-Disco-Repo/tyler/displacement' into…

… andy/displacement

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/components/header/header.module.ts

@@ -51,6 +51,7 @@ import { SarviewsEventTypeSelectorModule } from '@components/shared/selectors/sa
 import { Hyp3UrlModule } from '@components/shared/hyp3-url/hyp3-url.module';
 import { SharedModule } from "@shared";
 import { LanguageSelectorModule } from "@components/shared/selectors/language-selector/language-selector.module";
+import { BurstSelectorModule } from '@components/shared/selectors/burst-selector';
 
 @NgModule({
   declarations: [
@@ -100,7 +101,8 @@ import { LanguageSelectorModule } from "@components/shared/selectors/language-se
     Hyp3UrlModule,
     SharedModule,
     LanguageSelectorModule,
-    OnDemandUserSelectorModule
+    OnDemandUserSelectorModule,
+    BurstSelectorModule
   ],
   exports: [
     HeaderComponent

src/app/components/header/timeseries-header/timeseries-header.component.html

@@ -7,7 +7,7 @@
 			<div class="breadcrumb scene-selector" [class.scene-selector]="breakpoint === breakpoints.FULL"
 				[class.medium-scene-selector]="breakpoint === breakpoints.MEDIUM"
 				[class.small-scene-selector]="breakpoint === breakpoints.SMALL">
-				<app-master-scene-selector></app-master-scene-selector>
+				<app-burst-selector></app-burst-selector>
 			</div>
 
 			<div class="breadcrumb search-button-layout">

src/app/components/map/map-controls/map-controls.component.html

@@ -49,7 +49,7 @@
               </div>
             </div>
 
-            <div *ngIf="searchType === searchTypes.DATASET || searchType === searchTypes.SBAS" class="fx-empty group-margin">
+            <div *ngIf="searchType === searchTypes.DATASET || searchType === searchTypes.SBAS || searchType === searchTypes.TIMESERIES" class="fx-empty group-margin">
               <div class="fx-row-center button-group-label">
                 <label>{{ 'AREA_OF_INTEREST' |  translate }}</label>
               </div>

src/app/components/map/map.component.ts

@@ -32,7 +32,6 @@ import { StyleLike } from 'ol/style/Style';
 import { Feature } from 'ol';
 import Geometry from 'ol/geom/Geometry';
 import { MatDialog } from '@angular/material/dialog';
-import { TimeseriesComponent} from '../../dialogs/timeseries'
 
 enum FullscreenControls {
   MAP = 'Map',
@@ -282,7 +281,7 @@ export class MapComponent implements OnInit, OnDestroy  {
         this.netcdfService.getTimeSeries(mousePos).pipe(
           first()
         ).subscribe(
-          response => this.dialog.open(TimeseriesComponent, {data: response})
+          response => console.log(response)
         );
       }
     )

src/app/components/shared/aoi-options/draw-selector/draw-selector.component.html

@@ -28,8 +28,9 @@
       <mat-icon class="draw-icon">place</mat-icon>
       {{ 'PLACE_A_POINT' | translate }}
     </button>
+    @if(searchType !== searchTypes.TIMESERIES) {
 
-    <button mat-menu-item
+      <button mat-menu-item
       (click)="onLineStringSelected()"
       [value]="types.LINESTRING"
       class="control-button mat-menu-item">
@@ -78,4 +79,5 @@
     {{'UPLOAD_GEOSPATIAL_FILE' | translate}}
 
   </button>
+    }
 </mat-menu>

src/app/components/shared/aoi-options/draw-selector/draw-selector.component.ts

@@ -5,9 +5,10 @@ import { Store } from '@ngrx/store';
 import { AppState } from '@store';
 import * as mapStore from '@store/map';
 import * as uiStore from '@store/ui';
+import * as searchStore from '@store/search';
 
 import { ScreenSizeService } from '@services';
-import { MapDrawModeType, MapInteractionModeType, Breakpoints } from '@models';
+import { MapDrawModeType, MapInteractionModeType, Breakpoints, SearchType } from '@models';
 
 @Component({
   selector: 'app-draw-selector',
@@ -20,6 +21,8 @@ export class DrawSelectorComponent implements OnInit, OnDestroy {
   private subs = new SubSink();
 
   public breakpoint: Breakpoints;
+  public searchType: SearchType;
+  public searchTypes = SearchType;
   public breakpoints = Breakpoints;
 
   constructor(
@@ -39,6 +42,12 @@ export class DrawSelectorComponent implements OnInit, OnDestroy {
         breakpoint => this.breakpoint = breakpoint
       )
     );
+    this.subs.add(
+      this.store$.select(searchStore.getSearchType).subscribe(
+        searchType => this.searchType = searchType
+      )
+    );
+
   }
 
   public onNewDrawMode(mode: MapDrawModeType): void {

src/app/components/shared/aoi-options/interaction-selector/interaction-selector.component.html

@@ -19,13 +19,6 @@
     <mat-icon class="interaction-icon">draw</mat-icon>
   </mat-button-toggle>
 
-  <mat-button-toggle
-  (click)="onTimeseriesSelected()"
-  [value]="types.TIMERSERIES"
-  class="control-mat-button-toggle"
-  [matTooltip]="interaction === types.TIMERSERIES ? ('STOP_DRAWING'| translate) : ('DRAW_NEW_AREA_OF_INTEREST'| translate)">
-  <mat-icon class="interaction-icon">stacks</mat-icon>
-</mat-button-toggle>
 
   <mat-button-toggle
     (click)="onClearSelected()"

src/app/components/shared/aoi-options/interaction-selector/interaction-selector.component.ts

@@ -49,10 +49,6 @@ export class InteractionSelectorComponent implements OnInit, OnDestroy {
       this.interaction === MapInteractionModeType.DRAW ? MapInteractionModeType.NONE : MapInteractionModeType.DRAW
     )
 
-    public onTimeseriesSelected =
-    () => this.onNewInteractionMode(
-      this.interaction === MapInteractionModeType.TIMERSERIES ? MapInteractionModeType.NONE : MapInteractionModeType.TIMERSERIES
-    )
   public onEditSelected =
     () => this.onNewInteractionMode(
       this.interaction === MapInteractionModeType.EDIT ? MapInteractionModeType.NONE : MapInteractionModeType.EDIT