feat: Add reset button to metadata view (#231)

Author: jmccollum-woolpert

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

@@ -2,6 +2,25 @@
   [showModelSettings]="false"
   [displayColumns]="displayColumns$ | async"
   (displayColumnChange)="onDisplayColumnChange($event)">
+  <app-filter-menu
+    [filters]="filters$ | async"
+    [filterOptions]="filterOptions$ | async"
+    (addFilter)="onAddFilter($event)"
+    (editFilter)="onEditFilter($event)"
+    (removeFilter)="onRemoveFilter($event)">
+  </app-filter-menu>
+  <mat-divider vertical></mat-divider>
+  <button
+    mat-button
+    class="mat-elevation-z0"
+    color=""
+    aria-label="Reset view"
+    [disabled]="!(viewHasChanged$ | async)"
+    (click)="onResetView()"
+    title="Reset view">
+    <mat-icon svgIcon="reset_settings"></mat-icon>
+    <span class="reset-text">Reset view</span>
+  </button>
   <mat-divider preUndoRedo vertical></mat-divider>
   <mat-button-toggle-group
     preUndoRedo
@@ -18,13 +37,6 @@
     </mat-button-toggle>
   </mat-button-toggle-group>
   <mat-divider preUndoRedo vertical></mat-divider>
-  <app-filter-menu
-    [filters]="filters$ | async"
-    [filterOptions]="filterOptions$ | async"
-    (addFilter)="onAddFilter($event)"
-    (editFilter)="onEditFilter($event)"
-    (removeFilter)="onRemoveFilter($event)">
-  </app-filter-menu>
   <mat-select
     (selectionChange)="onSelectionChange($event.value)"
     [value]="page$ | async"

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

@@ -30,3 +30,9 @@ mat-divider {
   height: 4em;
   margin: 0 0.5em;
 }
+
+@media only screen and (max-width: 1600px) {
+  .reset-text {
+    display: none;
+  }
+}

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,17 +24,18 @@ 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';
 import { FilterService } from 'src/app/shared/services';
 import { positionTopLeftRelativeToTopLeft } from 'src/app/util';
-import { MetadataControlBarActions } from '../../actions';
+import { MetadataControlBarActions, RoutesChartActions } from '../../actions';
 import { Column, Page } from '../../models';
 import RoutesMetadataSelectors from '../../selectors/routes-metadata.selectors';
 import * as fromShipmentsMetadata from '../../selectors/shipments-metadata.selectors';
 import * as fromUI from '../../selectors/ui.selectors';
+import RoutesChartSelectors from '../../selectors/routes-chart.selectors';
 
 export type MetadataSelectors = typeof RoutesMetadataSelectors | typeof fromShipmentsMetadata;
 
@@ -52,6 +53,8 @@ export class MetadataControlBarComponent implements OnInit, OnDestroy {
   displayColumns$: Observable<Column[]>;
   page$: Observable<Page>;
   pageToggle$: Observable<Page>;
+  viewHasChanged$: Observable<boolean>;
+
   private pageSelectors$: Observable<{ page: Page; selectors: MetadataSelectors }>;
   private addSubscription: Subscription;
   private editSubscription: Subscription;
@@ -88,6 +91,11 @@ export class MetadataControlBarComponent implements OnInit, OnDestroy {
         this.store.pipe(select(selectors.selectAvailableDisplayColumnsOptions))
       )
     );
+
+    this.viewHasChanged$ = combineLatest([
+      this.store.pipe(select(RoutesChartSelectors.selectViewHasChanged)),
+      this.store.pipe(select(RoutesMetadataSelectors.selectViewHasChanged)),
+    ]).pipe(map(([chartChanged, metadataChanged]) => chartChanged || metadataChanged));
   }
 
   ngOnDestroy(): void {
@@ -182,4 +190,8 @@ export class MetadataControlBarComponent implements OnInit, OnDestroy {
   onToggleChange(selection: Page): void {
     this.router.navigateByUrl('/' + selection, { skipLocationChange: true });
   }
+
+  onResetView(): void {
+    this.store.dispatch(RoutesChartActions.resetView());
+  }
 }

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/reducers/routes-metadata.reducer.ts

@@ -21,6 +21,7 @@ import {
   MetadataControlBarActions,
   RoutesMetadataActions,
   PostSolveMetricsActions,
+  RoutesChartActions,
 } from '../actions';
 import { Page, routeIdMetadataFilterOption } from '../models';
 
@@ -93,6 +94,7 @@ export const reducer = createReducer(
         }
       : state
   ),
+  on(RoutesChartActions.resetView, () => initialState),
   on(RoutesMetadataActions.changeSort, (state, { active, direction }) => ({
     ...state,
     sort: { active, direction },

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;

application/lerna.json

@@ -8,4 +8,4 @@
   "$schema": "node_modules/lerna/schemas/lerna-schema.json",
   "useNx": false,
   "useWorkspaces": false
-}
+}