Merge remote-tracking branch 'Discovery-SearchUI/displacement' into a…

…ndy/formula-bar

src/app/components/map/displacement-layers/displacement-layers.component.html

@@ -24,7 +24,7 @@
     <div class="help-text">
       What are these?
       <app-docs-modal class="info-icon"
-                      url="https://docs.asf.alaska.edu/vertex/manual/#area-of-interest-options">
+                      url="https://docs.asf.alaska.edu/vertex/displacement/#map-layers">
       </app-docs-modal>
     </div>
   </div>

src/app/components/results-menu/timeseries-results-menu/timeseries-results-menu.component.html

@@ -33,8 +33,7 @@
                   <span class="ts-wkt-label">
                     {{'SERIES' | translate}} {{point.seriesNumber}}
                   </span>
-                  <button class="ts-buttons"(click)="setLinearFitLine($index)"><mat-icon class="ts-trash-can" matTooltip="Draw Trendline">open_in_full</mat-icon></button>
-                  <button class="ts-buttons"(click)="deletePoint($index)"><mat-icon class="ts-trash-can" matTooltip="Remove Series">delete</mat-icon></button>
+                  <button mat-icon-button (click)="deletePoint($index)"><mat-icon class="ts-trash-can">delete</mat-icon></button>
                 </mat-checkbox>
               </li>
             }

src/app/components/results-menu/timeseries-results-menu/timeseries-results-menu.component.ts

@@ -265,13 +265,6 @@ export class TimeseriesResultsMenuComponent implements OnInit, OnDestroy {
   public deletePoint(index: number) {
     this.pointHistoryService.removePoint(index);
   }
-  public setLinearFitLine(index: number) {
-    const wkt = this.chartStates[index]?.wkt;
-
-    const isLinearFitEnabled = !(this.chartStates[index]?.linearFit ?? false);
-
-    this.store$.dispatch(chartStore.setLinearFit({wkt, 'linearFit': isLinearFitEnabled}))
-  }
 
   ngOnDestroy() {
     this.pointHistoryService.clearPoints();

src/app/components/timeseries-chart/timeseries-chart-config/timeseries-chart-config.component.html

@@ -1,4 +1,5 @@
 <div style="display: flex; flex-direction: column;">
     <mat-checkbox (change)="onToggleLines($event)" [checked]="showLines">Show Lines</mat-checkbox>
+    <mat-checkbox (change)="onToggleLinearFit($event)" [checked]="showLinearFit">Show Linear Fit</mat-checkbox>
     <button mat-button (click)="resetReference()">Reset chart reference</button>
 </div>

src/app/components/timeseries-chart/timeseries-chart-config/timeseries-chart-config.component.ts

@@ -18,6 +18,7 @@ import * as chartsStore from '@store/charts'
 export class TimeseriesChartConfigComponent implements OnInit, OnDestroy {
   private subs = new SubSink()
   public showLines: boolean = true
+  public showLinearFit = false;
   @Output() public resetReferenceEvent = new EventEmitter();
   constructor(private store$: Store<AppState>) { }
 
@@ -28,12 +29,22 @@ export class TimeseriesChartConfigComponent implements OnInit, OnDestroy {
       this.store$.dispatch(chartsStore.hideGraphLines())
     }
   }
+  public onToggleLinearFit(event: MatCheckboxChange) {
+    if(event.checked) {
+      this.store$.dispatch(chartsStore.showLinearFit());
+    } else {
+      this.store$.dispatch(chartsStore.hideLinearFit());
+    }
+  }
 
   ngOnInit(): void {
     this.subs.add(this.store$.select(chartsStore.getShowLines).subscribe(
         showLines => this.showLines = showLines
       )
     );
+    this.subs.add(this.store$.select(chartsStore.getShowLinearFit).subscribe(
+      showLinearFit => this.showLinearFit = showLinearFit
+    ))
   }
 
   public resetReference() {

src/app/components/timeseries-chart/timeseries-chart.component.ts

@@ -39,7 +39,6 @@ interface DataReady {
   values: TimeSeriesData[],
   opacity: number,
   color: string,
-  linearFit: boolean
 }
 
 const unSelectedColor = '#9F9F9F9F';
@@ -109,6 +108,7 @@ export class TimeseriesChartComponent implements OnInit, OnDestroy {
 
   ];
   private linearFitLine;
+  private showLinearFit = false;
 
   public exportableData: { [index:string]: {}[]} = {}
 
@@ -121,7 +121,6 @@ export class TimeseriesChartComponent implements OnInit, OnDestroy {
 
   private subs = new SubSink();
   // private allGroup: string[];
-  private linearFitLineIndex = [];
   private baseData: TimeSeriesData;
   constructor(
     private store$: Store<AppState>,
@@ -170,6 +169,14 @@ export class TimeseriesChartComponent implements OnInit, OnDestroy {
         }
       )
     );
+    this.subs.add(
+      this.store$.select(chartsStore.getShowLinearFit).subscribe(
+        showLinearFit => {
+          this.showLinearFit = showLinearFit;
+          this.initChart(this.data);
+        }
+      )
+    )
 
     this.subs.add(
       this.language.translate.onLangChange.subscribe(() => {
@@ -204,16 +211,6 @@ export class TimeseriesChartComponent implements OnInit, OnDestroy {
         }
       )
     );
-    this.subs.add(
-      this.store$.select(chartsStore.getLinearFitTimeseries).subscribe(
-        things => {
-
-          this.linearFitLineIndex = things;
-
-          this.initChart(this.data);
-        }
-      )
-    )
 
   }
 
@@ -346,13 +343,11 @@ export class TimeseriesChartComponent implements OnInit, OnDestroy {
               return 1
             }
         })
-          let isLinearFitEnabled = this.linearFitLineIndex.findIndex((a) => a === aoi) >= 0
           this.dataReadyForChart.push({
             name: aoi,
             values: this.timeSeriesData,
             color: result.state.color,
             opacity:  result.state.checked ? 1.0 : 0.2,
-            linearFit: isLinearFitEnabled,
           });
         }
       }
@@ -528,13 +523,11 @@ export class TimeseriesChartComponent implements OnInit, OnDestroy {
       })
       .attr('r', 5);
       this.bestFitItems = [];
-      if(this.dataReadyForChart.length > 0 && this.linearFitLineIndex.length > 0) {
+      if(this.dataReadyForChart.length > 0 && this.showLinearFit) {
         this.linearFitLine = this.svg.append('g')
           .attr('id', 'linesParent2')
           .attr('clip-path', 'url(#clip)')
-
-        let filteredData: DataReady[] = this.dataReadyForChart.filter(x => x.linearFit)
-        for(let linearFitData of filteredData) {
+        for(let linearFitData of this.dataReadyForChart) {
 
           let regression = linearRegression(linearFitData.values.map((x,i) => [i, x.short_wavelength_displacement]));
           this.bestFitItems.push({
@@ -651,7 +644,7 @@ export class TimeseriesChartComponent implements OnInit, OnDestroy {
       })
       .style('opacity', (d: DataReady) => d.opacity)
 
-    if(this.linearFitLine && this.linearFitLineIndex.length > 0) {
+    if(this.linearFitLine && this.showLinearFit) {
       let line2 = d3.line()
       .x( (d) => { return newX(d[0]) })
       .y( (d) =>  { return newY(d[1]) });

src/app/store/charts/charts.action.ts

@@ -12,4 +12,5 @@ export const setAllTimeseriesChecked = createAction('[Chart] set all timeseries
 export const setTimeseriesColor = createAction('[Chart] set the color of a single timeseries', props<{'wkt': string, 'color': string}>())
 export const setChartOutOfDate = createAction('[Chart] mark chart as out of date')
 export const setChartUpToDate = createAction('[Chart], mark chart as up to date')
-export const setLinearFit = createAction('[Chart] set best fit line visibility',props<{'wkt': string, 'linearFit': boolean}>())
+export const showLinearFit = createAction('[Chart] show all linear fit lines')
+export const hideLinearFit = createAction('[Chart] hide all linear fit lines')

src/app/store/charts/charts.reducer.ts

@@ -4,12 +4,14 @@ import * as models from '@models';
 
 export interface ChartsState {
   showLines: boolean;
+  showLinearFit: boolean;
   seriesStates: { [key: string]: models.timeseriesChartItemState };
   outOfDate: boolean;
 }
 
 export const initialState: ChartsState = {
   showLines: true,
+  showLinearFit: false,
   seriesStates: {},
   outOfDate: false,
 };
@@ -60,11 +62,11 @@ export const chartsReducer = createReducer(
 
     return { ...state, seriesStates };
   }),
-  on(chartActions.setLinearFit, (state, {wkt, linearFit}) => {
-    const seriesStates = { ...state.seriesStates };
-    seriesStates[wkt] = { ...seriesStates[wkt], linearFit };
-
-    return { ...state, seriesStates };
+  on(chartActions.showLinearFit, (state) => {
+    return {...state, showLinearFit: true}
+  }),
+  on(chartActions.hideLinearFit, (state) => {
+    return {...state, showLinearFit: false}
   }),
   on(chartActions.reset, (_) => initialState)
 );

src/app/store/charts/charts.selectors.ts

@@ -7,6 +7,10 @@ export const getShowLines = createSelector(
     getChartsState,
     (state: ChartsState) => state.showLines
 );
+export const getShowLinearFit = createSelector(
+    getChartsState,
+    (state: ChartsState) => state.showLinearFit
+)
 
 export const getTimeseriesChartStates = createSelector(
     getChartsState,
@@ -26,19 +30,7 @@ export const getCheckedTimeseries = createSelector(
         return output;
     }
 );
-export const getLinearFitTimeseries = createSelector(
-    getTimeseriesChartStates,
-    (chartStates) => {
-        const output = [];
-        for (const key of Object.keys(chartStates)) {
-            if (chartStates[key].linearFit) {
-                output.push(key);
-            }
-        }
 
-        return output;
-    }
-)
 export const getAreAllTimeseriesChecked = createSelector(
     getTimeseriesChartStates,
     getCheckedTimeseries,