Apply auto zoom only when opening the gantt chart for the first time

frontend/src/app/components/wp-buttons/wp-timeline-toggle-button/wp-timeline-toggle-button.component.ts

@@ -83,7 +83,7 @@ export class WorkPackageTimelineButtonComponent extends AbstractWorkPackageButto
     return this.wpTableTimeline.isVisible;
   }
 
-  public isAutoZoomEnabled():boolean {
+  public isAutoZoomEnabled() {
     return this.wpTableTimeline.isAutoZoomEnabled();
   }
 

frontend/src/app/components/wp-fast-table/state/wp-table-timeline.service.ts

@@ -74,6 +74,18 @@ export class WorkPackageTableTimelineService extends WorkPackageQueryStateServic
   public toggle() {
     let currentState = this.current;
     this.setVisible(!currentState.visible);
+
+    if (this.isAutoZoomEnabled() === undefined) {
+      this.toggleAutoZoomEnabled(true);
+    }
+
+    /**
+     * On first opening, activate auto zoom.
+     * Afterwards keep the zoom level.
+     */
+    if (!currentState.visible && this.isAutoZoomEnabled()) {
+      this.toggleAutoZoom(true);
+    }
   }
 
   public setVisible(value:boolean) {
@@ -140,8 +152,12 @@ export class WorkPackageTableTimelineService extends WorkPackageQueryStateServic
     this.modify({ autoZoom: value });
   }
 
-  public isAutoZoomEnabled():boolean {
-    return this.current.autoZoom;
+  public isAutoZoomEnabled():boolean|undefined {
+    return this.current.autoZoomEnabled;
+  }
+
+  public toggleAutoZoomEnabled(val = !this.current.autoZoomEnabled) {
+    this.modify({ autoZoomEnabled: val });
   }
 
   public get current():WorkPackageTableTimelineState {
@@ -166,7 +182,8 @@ export class WorkPackageTableTimelineService extends WorkPackageQueryStateServic
 
   private get defaultState():WorkPackageTableTimelineState {
     return {
-      autoZoom: true,
+      autoZoom: false,
+      autoZoomEnabled: undefined,
       zoomLevel: 'days',
       visible: false,
       labels: this.defaultLabels

frontend/src/app/components/wp-fast-table/wp-table-timeline.ts

@@ -33,6 +33,7 @@ import {
 
 export interface WorkPackageTableTimelineState {
   autoZoom:boolean;
+  autoZoomEnabled:boolean|undefined;
   visible:boolean;
   zoomLevel:TimelineZoomLevel;
   labels:TimelineLabels;

frontend/src/app/components/wp-table/timeline/container/wp-timeline-container.directive.ts

@@ -124,9 +124,6 @@ export class WorkPackageTimelineTableController implements AfterViewInit, OnDest
     // Refresh on changes to work packages
     this.updateOnWorkPackageChanges();
 
-    // Set initial auto zoom level, if applicable
-    this.applyAutoZoomLevel();
-
     // Refresh timeline rendering callback
     this.setupRefreshListener();
 
@@ -217,8 +214,11 @@ export class WorkPackageTimelineTableController implements AfterViewInit, OnDest
       return;
     }
 
-    // Update autozoom level
-    this.applyAutoZoomLevel();
+    if (this.wpTableTimeline.isAutoZoomEnabled()) {
+      // Update autozoom level
+      this.applyAutoZoomLevel();
+    }
+
 
     // Require dynamic CSS to be visible
     this.dynamicCssService.requireHighlighting();
@@ -431,6 +431,7 @@ export class WorkPackageTimelineTableController implements AfterViewInit, OnDest
       return;
     }
 
+    this.wpTableTimeline.toggleAutoZoomEnabled(false);
     const daysSpan = calculateDaySpan(this.workPackageIdOrder, this.states.workPackages, this._viewParameters);
     const timelineWidthInPx = this.$element.parent().width()! - (2 * requiredPixelMarginLeft);
 
@@ -451,5 +452,4 @@ export class WorkPackageTimelineTableController implements AfterViewInit, OnDest
       }
     }
   }
-
 }

spec/features/work_packages/timeline/timeline_navigation_spec.rb

@@ -145,8 +145,8 @@ RSpec.feature 'Work package timeline navigation', js: true, selenium: true do
     wp_timeline.expect_timeline!(open: true)
     wp_timeline.expect_timeline_element(work_package)
 
-    # Expect zoom at days
-    expect(page).to have_selector('#work-packages-timeline-zoom-auto-button.-disabled')
+    # Expect zoom at weeks
+    wp_timeline.expect_zoom_at :weeks
   end
 
   describe 'with a hierarchy being shown' do