Track metadata changes for reset toggle

Author: jmccollum-woolpert

application/frontend/src/app/core/containers/metadata-control-bar/metadata-control-bar.component.spec.ts

@@ -27,6 +27,7 @@ import { FakeMatIconRegistry } from 'src/test/material-fakes';
 import RoutesMetadataSelectors from '../../selectors/routes-metadata.selectors';
 import * as fromUI from '../../selectors/ui.selectors';
 import { MetadataControlBarComponent } from './metadata-control-bar.component';
+import RoutesChartSelectors from '../../selectors/routes-chart.selectors';
 
 describe('MetadataControlBarComponent', () => {
   let component: MetadataControlBarComponent;
@@ -45,6 +46,8 @@ describe('MetadataControlBarComponent', () => {
             { selector: RoutesMetadataSelectors.selectAvailableDisplayColumnsOptions, value: [] },
             { selector: RoutesMetadataSelectors.selectFilters, value: [] },
             { selector: RoutesMetadataSelectors.selectDisplayColumns, value: null },
+            { selector: RoutesChartSelectors.selectViewHasChanged, value: false },
+            { selector: RoutesMetadataSelectors.selectViewHasChanged, value: false },
           ],
         }),
       ],

application/frontend/src/app/core/containers/metadata-control-bar/metadata-control-bar.component.ts

@@ -24,7 +24,7 @@ import {
 } from '@angular/core';
 import { Router } from '@angular/router';
 import { select, Store } from '@ngrx/store';
-import { Observable, Subscription } from 'rxjs';
+import { combineLatest, Observable, Subscription } from 'rxjs';
 import { exhaustMap, map, switchMap, take } from 'rxjs/operators';
 import { FilterMenuComponent } from 'src/app/shared/components';
 import { ActiveFilter, FilterOption } from 'src/app/shared/models';
@@ -91,7 +91,11 @@ export class MetadataControlBarComponent implements OnInit, OnDestroy {
         this.store.pipe(select(selectors.selectAvailableDisplayColumnsOptions))
       )
     );
-    this.viewHasChanged$ = this.store.pipe(select(RoutesChartSelectors.selectViewHasChanged));
+
+    this.viewHasChanged$ = combineLatest([
+      this.store.pipe(select(RoutesChartSelectors.selectViewHasChanged)),
+      this.store.pipe(select(RoutesMetadataSelectors.selectViewHasChanged)),
+    ]).pipe(map(([chartChanged, metadataChanged]) => chartChanged || metadataChanged));
   }
 
   ngOnDestroy(): void {

application/frontend/src/app/core/containers/routes-chart-control-bar/routes-chart-control-bar.component.spec.ts

@@ -31,6 +31,7 @@ import Long from 'long';
 import { Page } from '../../models';
 import * as fromUI from 'src/app/core/selectors/ui.selectors';
 import { Component, EventEmitter, Input, Output } from '@angular/core';
+import RoutesMetadataSelectors from '../../selectors/routes-metadata.selectors';
 
 @Component({
   selector: 'app-time-navigation',
@@ -78,6 +79,8 @@ describe('RoutesChartControlBarComponent', () => {
             { selector: RoutesChartSelectors.selectRangeOffset, value: 0 },
             { selector: RoutesChartSelectors.selectSelectedRange, value: null },
             { selector: fromUI.selectPage, value: Page.RoutesChart },
+            { selector: RoutesChartSelectors.selectViewHasChanged, value: false },
+            { selector: RoutesMetadataSelectors.selectViewHasChanged, value: false }
           ],
         }),
       ],

application/frontend/src/app/core/containers/routes-chart-control-bar/routes-chart-control-bar.component.ts

@@ -23,7 +23,7 @@ import {
   ViewChild,
 } from '@angular/core';
 import { select, Store } from '@ngrx/store';
-import { Observable, Subscription } from 'rxjs';
+import { combineLatest, Observable, Subscription } from 'rxjs';
 import { exhaustMap, map, take } from 'rxjs/operators';
 import * as fromConfig from 'src/app/core/selectors/config.selectors';
 import RoutesChartSelectors from 'src/app/core/selectors/routes-chart.selectors';
@@ -37,6 +37,7 @@ import { Router } from '@angular/router';
 import { Range } from 'src/app/shared/models';
 import ShipmentModelSelectors from '../../selectors/shipment-model.selectors';
 import * as fromUI from 'src/app/core/selectors/ui.selectors';
+import RoutesMetadataSelectors from '../../selectors/routes-metadata.selectors';
 
 @Component({
   selector: 'app-routes-chart-control-bar',
@@ -86,7 +87,10 @@ export class RoutesChartControlBarComponent implements OnInit, OnDestroy {
       select(fromUI.selectPage),
       map((page) => (page === Page.ShipmentsMetadata ? Page.RoutesMetadata : page))
     );
-    this.viewHasChanged$ = this.store.pipe(select(RoutesChartSelectors.selectViewHasChanged));
+    this.viewHasChanged$ = combineLatest([
+      this.store.pipe(select(RoutesChartSelectors.selectViewHasChanged)),
+      this.store.pipe(select(RoutesMetadataSelectors.selectViewHasChanged)),
+    ]).pipe(map(([chartChanged, metadataChanged]) => chartChanged || metadataChanged));
   }
 
   ngOnDestroy(): void {

application/frontend/src/app/core/selectors/routes-metadata.selectors.ts

@@ -357,6 +357,22 @@ const selectDisplayColumns = createSelector(
   }
 );
 
+const selectViewHasChanged = createSelector(
+  selectFilters,
+  selectPageIndex,
+  selectPageSize,
+  selectSelected,
+  selectDisplayColumnsState,
+  selectSort,
+  (filters, pageIndex, pageSize, selected, displayColumns, sort) =>
+    filters.length > 0 ||
+    pageIndex !== 0 ||
+    pageSize !== 25 ||
+    selected.length > 0 ||
+    !!displayColumns ||
+    sort.direction?.length > 0
+);
+
 export const RoutesMetadataSelectors = {
   selectDisplayColumns,
   selectColumnsToDisplay,
@@ -386,6 +402,7 @@ export const RoutesMetadataSelectors = {
   selectSort,
   selectPageSize,
   selectPageIndex,
+  selectViewHasChanged,
 };
 
 export default RoutesMetadataSelectors;