Timeline:

- correclty enable/disable display of work package based on the exitence of start/due values
- fixed wrong positioning of header after work package changes

frontend/app/components/wp-table/timeline/cell-renderer/timeline-cell-renderer.ts

@@ -1,5 +1,5 @@
-import {WorkPackageResourceInterface} from './../../../api/api-v3/hal-resources/work-package-resource.service';
-import {RenderInfo, calculatePositionValueForDayCount, timelineElementCssClass} from './../wp-timeline';
+import {WorkPackageResourceInterface} from "./../../../api/api-v3/hal-resources/work-package-resource.service";
+import {RenderInfo, calculatePositionValueForDayCount, timelineElementCssClass} from "./../wp-timeline";
 
 const classNameLeftHandle = "leftHandle";
 const classNameRightHandle = "rightHandle";
@@ -83,10 +83,14 @@ export class TimelineCellRenderer {
     return dates;
   }
 
-  public update(element:HTMLDivElement, wp: WorkPackageResourceInterface, renderInfo:RenderInfo) {
+  /**
+   * @return true, if the element should still be displayed.
+   *         false, if the element must be removed from the timeline.
+   */
+  public update(element: HTMLDivElement, wp: WorkPackageResourceInterface, renderInfo: RenderInfo): boolean {
     // abort if no start or due date
     if (!wp.startDate || !wp.dueDate) {
-      return;
+      return false;
     }
 
     // general settings - bar
@@ -103,6 +107,8 @@ export class TimelineCellRenderer {
     // duration
     const duration = due.diff(start, "days") + 1;
     element.style.width = calculatePositionValueForDayCount(viewParams, duration);
+
+    return true;
   }
 
   /**
@@ -143,7 +149,7 @@ export class TimelineCellRenderer {
     right.style.maxWidth = "20%";
     right.style.height = "100%";
     right.style.cursor = "e-resize";
-    bar.appendChild(right)
+    bar.appendChild(right);
 
     return bar;
   }

frontend/app/components/wp-table/timeline/cell-renderer/timeline-milestone-cell-renderer.ts

@@ -57,10 +57,10 @@ export class TimelineMilestoneCellRenderer extends TimelineCellRenderer {
     return dates;
   }
 
-  public update(element:HTMLDivElement, wp: WorkPackageResourceInterface, renderInfo:RenderInfo) {
+  public update(element:HTMLDivElement, wp: WorkPackageResourceInterface, renderInfo:RenderInfo): boolean {
     // abort if no start or due date
     if (!wp.date) {
-      return;
+      return false;
     }
 
     element.style.marginLeft = renderInfo.viewParams.scrollOffsetInPx + "px";
@@ -72,6 +72,8 @@ export class TimelineMilestoneCellRenderer extends TimelineCellRenderer {
     // offset left
     const offsetStart = date.diff(viewParams.dateDisplayStart, "days");
     element.style.left = calculatePositionValueForDayCount(viewParams, offsetStart);
+
+    return true;
   }
 
   /**

frontend/app/components/wp-table/timeline/wp-timeline-cell.ts

@@ -66,10 +66,15 @@ export class WorkPackageTimelineCell {
 
   // TODO never called so far
   deactivate() {
-    this.timelineCell.innerHTML = "";
+    this.clear();
     this.disposable && this.disposable.dispose();
   }
 
+  private clear() {
+    this.timelineCell.innerHTML = "";
+    this.element = null;
+  }
+
   private lazyInit(renderer: TimelineCellRenderer, renderInfo: RenderInfo) {
 
     // If already rendered with correct shape, ignore
@@ -112,6 +117,9 @@ export class WorkPackageTimelineCell {
     this.lazyInit(renderer, renderInfo);
 
     // Render the upgrade from renderInfo
-    renderer.update(this.element, wp, renderInfo);
+    const shouldBeDisplayed = renderer.update(this.element, wp, renderInfo);
+    if (!shouldBeDisplayed) {
+      this.clear();
+    }
   }
 }

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

@@ -92,6 +92,7 @@ export class WorkPackageTimelineTableController {
         this.calculateViewParams(this._viewParameters);
         this.updateAllWorkPackagesSubject.onNext(true);
         this.wpTimelineHeader.refreshView(this._viewParameters);
+        this.refreshScrollOnly();
         this.refreshViewRequested = false;
       }, 30);
     }