Move button and disable if on default view

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

@@ -1,8 +1,7 @@
 <app-table-control-bar
   [showModelSettings]="false"
   [displayColumns]="displayColumns$ | async"
-  (displayColumnChange)="onDisplayColumnChange($event)"
-  [page]="page$ | async">
+  (displayColumnChange)="onDisplayColumnChange($event)">
   <mat-divider preUndoRedo vertical></mat-divider>
   <mat-button-toggle-group
     preUndoRedo

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

@@ -1,14 +1,23 @@
-<app-table-control-bar
-  [showModelSettings]="false"
-  [page]="page$ | async"
-  (resetView)="onResetView()">
+<app-table-control-bar [showModelSettings]="false">
   <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

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

@@ -28,3 +28,13 @@ mat-divider {
 app-time-navigation {
   margin-right: 16px;
 }
+
+.reset-text {
+  margin-top: 2px;
+}
+
+@media only screen and (max-width: 1600px) {
+  .reset-text {
+    display: none;
+  }
+}

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 { Observable, Subscription, combineLatest } 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';
@@ -61,6 +61,7 @@ export class RoutesChartControlBarComponent implements OnInit, OnDestroy {
   globalDuration$: Observable<[Long, Long]>;
   private addSubscription: Subscription;
   private editSubscription: Subscription;
+  viewHasChanged$: Observable<boolean>;
 
   get Page(): typeof Page {
     return Page;
@@ -85,6 +86,7 @@ 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));
   }
 
   ngOnDestroy(): void {

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

@@ -1,7 +1,6 @@
 <app-table-control-bar
   [displayColumns]="displayColumns$ | async"
   (displayColumnChange)="onDisplayColumnChange($event)"
-  [page]="page$ | async"
   (openShipmentModelSettings)="onOpenShipmentModelSettings()">
   <app-filter-menu
     [filters]="filters$ | async"

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

@@ -30,9 +30,8 @@ import { ActiveFilter } from 'src/app/shared/models';
 import { FilterService } from 'src/app/shared/services';
 import { positionTopLeftRelativeToTopLeft } from 'src/app/util';
 import { PreSolveShipmentActions } from '../../actions';
-import { Column, Modal, Page, ShipmentFilterOption } from '../../models';
+import { Column, Modal, ShipmentFilterOption } from '../../models';
 import PreSolveShipmentSelectors from '../../selectors/pre-solve-shipment.selectors';
-import { selectPage } from '../../selectors/ui.selectors';
 import { MatDialog } from '@angular/material/dialog';
 import { ShipmentModelSettingsComponent } from '../shipment-model-settings/shipment-model-settings.component';
 
@@ -49,7 +48,6 @@ export class ShipmentsControlBarComponent implements OnDestroy {
   readonly filterOptions$: Observable<ShipmentFilterOption[]>;
   readonly filters$: Observable<ActiveFilter[]>;
   readonly displayColumns$: Observable<Column[]>;
-  readonly page$: Observable<Page>;
 
   private addSubscription: Subscription;
   private editSubscription: Subscription;
@@ -66,7 +64,6 @@ export class ShipmentsControlBarComponent implements OnDestroy {
     this.displayColumns$ = store.pipe(
       select(PreSolveShipmentSelectors.selectAvailableDisplayColumnsOptions)
     );
-    this.page$ = store.pipe(select(selectPage));
   }
 
   ngOnDestroy(): void {

application/frontend/src/app/core/effects/routes-chart.effects.spec.ts

@@ -39,7 +39,7 @@ describe('RoutesChartEffects', () => {
             { selector: ShipmentModelSelectors.selectGlobalDuration, value: null },
             { selector: RoutesChartSelectors.selectFilteredRoutes, value: [] },
             { selector: RoutesChartSelectors.selectDefaultRangeOffset, value: 0 },
-            { selector: RoutesChartSelectors.selectRoutes, value: [] }
+            { selector: RoutesChartSelectors.selectRoutes, value: [] },
           ],
         }),
       ],

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

@@ -335,6 +335,36 @@ const selectDuration = createSelector(selectRange, selectRangeOffset, (range, of
   return [start, start.add(range)] as [Long, Long];
 });
 
+const selectViewHasChanged = createSelector(
+  selectFilters,
+  selectPageIndex,
+  selectPageSize,
+  selectAddedRange,
+  selectRangeIndex,
+  selectRangeOffset,
+  selectDefaultRangeOffset,
+  selectRoutes,
+  selectSelectedRoutes,
+  (
+    filters,
+    pageIndex,
+    pageSize,
+    addedRange,
+    rangeIndex,
+    rangeOffset,
+    defaultRangeOffset,
+    routes,
+    selectedRoutes
+  ) =>
+    filters.length > 0 ||
+    pageIndex !== 0 ||
+    pageSize !== 50 ||
+    addedRange !== 0 ||
+    rangeIndex !== chartConfig.day.defaultRangeIndex ||
+    rangeOffset !== defaultRangeOffset ||
+    routes.length !== selectedRoutes.length
+);
+
 export const RoutesChartSelectors = {
   selectView,
   selectRangeIndex,
@@ -378,6 +408,7 @@ export const RoutesChartSelectors = {
   selectNextColumnOffset,
   selectNextRangeOffset,
   selectDuration,
+  selectViewHasChanged,
 };
 
 export default RoutesChartSelectors;

application/frontend/src/app/shared/components/table-control-bar/table-control-bar.component.html

@@ -1,17 +1,6 @@
 <ng-content></ng-content>
 <ng-content select="[preUndoRedo]"></ng-content>
 <app-undo-redo></app-undo-redo>
-<button
-  *ngIf="page === Page.RoutesChart"
-  mat-button
-  class="mat-elevation-z0"
-  color=""
-  aria-label="Reset view"
-  (click)="resetView.emit()"
-  title="Reset view">
-  <mat-icon svgIcon="reset_settings"></mat-icon>
-  <span class="reset-text">Reset view</span>
-</button>
 <button *ngIf="showModelSettings" mat-button (click)="openShipmentModelSettings.emit()">
   <mat-icon svgIcon="settings" class="mr-2"></mat-icon>Shipment model settings
 </button>

application/frontend/src/app/shared/components/table-control-bar/table-control-bar.component.scss

@@ -29,9 +29,3 @@ app-table-control-bar {
     pointer-events: none;
   }
 }
-
-@media only screen and (max-width: 1600px) {
-  .reset-text {
-    display: none;
-  }
-}

application/frontend/src/app/shared/components/table-control-bar/table-control-bar.component.ts

@@ -22,7 +22,7 @@ import {
   Output,
   ViewEncapsulation,
 } from '@angular/core';
-import { Column, Page } from 'src/app/core/models';
+import { Column } from 'src/app/core/models';
 
 @Component({
   selector: 'app-table-control-bar',
@@ -38,12 +38,6 @@ export class TableControlBarComponent {
   @Input() displayColumns: Column[];
   @Output() displayColumnChange = new EventEmitter<{ columnId: string; active: boolean }>();
 
-  @Input() page: Page;
-
-  @Output() resetView = new EventEmitter();
-
-  Page = Page;
-
   onDisplayColumnChange(column: Column, active: boolean): void {
     this.displayColumnChange.emit({ columnId: column.id, active });
   }