Add reset button to timeline view

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

@@ -89,3 +89,10 @@ export const mouseEnterVisitRequest = createAction(
 );
 
 export const mouseExitVisitRequest = createAction('[RoutesChart] Mouse Exit Visit Request');
+
+export const resetView = createAction('[RoutesChart] Reset View');
+
+export const setView = createAction(
+  '[RoutesChart] Set View',
+  props<{ selectedRouteIds: number[]; rangeOffset: number }>()
+);

application/frontend/src/app/core/containers/app/app.component.ts

@@ -83,6 +83,7 @@ export class AppComponent {
       'pdf',
       'play',
       'pickup',
+      'reset_settings',
       'route',
       'satellite',
       'save_alt',

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

@@ -1,7 +1,8 @@
 <app-table-control-bar
   [showModelSettings]="false"
   [displayColumns]="displayColumns$ | async"
-  (displayColumnChange)="onDisplayColumnChange($event)">
+  (displayColumnChange)="onDisplayColumnChange($event)"
+  [page]="page$ | async">
   <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,4 +1,7 @@
-<app-table-control-bar [showModelSettings]="false">
+<app-table-control-bar
+  [showModelSettings]="false"
+  [page]="page$ | async"
+  (resetView)="onResetView()">
   <app-filter-menu
     [filters]="filters$ | async"
     [filterOptions]="filterOptions$ | async"

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

@@ -148,4 +148,8 @@ export class RoutesChartControlBarComponent implements OnInit, OnDestroy {
   onRangeOffsetChange(rangeOffset: number): void {
     this.store.dispatch(PostSolveControlBarActions.changeRangeOffset({ rangeOffset }));
   }
+
+  onResetView(): void {
+    this.store.dispatch(RoutesChartActions.resetView());
+  }
 }

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

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

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

@@ -76,5 +76,24 @@ export class RoutesChartEffects {
     )
   );
 
+  resetViewEffect$ = createEffect(() =>
+    this.actions$.pipe(
+      ofType(RoutesChartActions.resetView),
+      mergeMap(() =>
+        this.store.pipe(
+          select(RoutesChartSelectors.selectRoutes),
+          take(1),
+          withLatestFrom(this.store.pipe(select(RoutesChartSelectors.selectDefaultRangeOffset))),
+          map(([routes, defaultRangeOffset]) => {
+            return RoutesChartActions.setView({
+              selectedRouteIds: routes.map((r) => r.id),
+              rangeOffset: defaultRangeOffset,
+            });
+          })
+        )
+      )
+    )
+  );
+
   constructor(private actions$: Actions, private store: Store<fromRoot.State>) {}
 }

application/frontend/src/app/core/reducers/routes-chart.reducer.ts

@@ -137,7 +137,17 @@ export const reducer = createReducer(
         []
       ),
     };
-  })
+  }),
+  on(RoutesChartActions.setView, (state, props) => ({
+    ...state,
+    selectedRoutes: props.selectedRouteIds,
+    filters: [],
+    pageIndex: 0,
+    pageSize: 50,
+    addedRange: 0,
+    rangeIndex: chartConfig.day.defaultRangeIndex,
+    rangeOffset: props.rangeOffset,
+  }))
 );
 
 export const selectSelectedRoutes = (state: State): number[] => state.selectedRoutes;

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

@@ -1,6 +1,17 @@
 <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,3 +29,9 @@ 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

@@ -40,6 +40,8 @@ export class TableControlBarComponent {
 
   @Input() page: Page;
 
+  @Output() resetView = new EventEmitter();
+
   Page = Page;
 
   onDisplayColumnChange(column: Column, active: boolean): void {

application/frontend/src/app/shared/components/undo-redo/undo-redo.component.scss

@@ -1,4 +1,4 @@
-@media only screen and (max-width: 1500px) {
+@media only screen and (max-width: 1600px) {
   .undo-redo-text {
     display: none;
   }