Merge pull request #5245 from opf/timeline-avoid-relations-on-missing-dates

Timeline: avoid relations on missing dates / drawing improvements

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

@@ -1,7 +1,7 @@
 import {WorkPackageResourceInterface} from "../../../api/api-v3/hal-resources/work-package-resource.service";
 import {
   RenderInfo, calculatePositionValueForDayCount, timelineElementCssClass,
-  calculatePositionValueForDayCountinPx
+  calculatePositionValueForDayCountingPx
 } from "../wp-timeline";
 import {classNameLeftHandle, classNameRightHandle} from "../wp-timeline-cell-mouse-handler";
 import * as moment from 'moment';
@@ -234,7 +234,7 @@ export class TimelineCellRenderer {
 
     const offsetStart = start.diff(renderInfo.viewParams.dateDisplayStart, "days");
 
-    return calculatePositionValueForDayCountinPx(renderInfo.viewParams, offsetStart);
+    return calculatePositionValueForDayCountingPx(renderInfo.viewParams, offsetStart);
   }
 
   getRightmostPosition(renderInfo: RenderInfo): number {
@@ -249,7 +249,7 @@ export class TimelineCellRenderer {
     const offsetStart = start.diff(renderInfo.viewParams.dateDisplayStart, "days");
     const duration = due.diff(start, "days") + 1;
 
-    return calculatePositionValueForDayCountinPx(renderInfo.viewParams, offsetStart + duration);
+    return calculatePositionValueForDayCountingPx(renderInfo.viewParams, offsetStart + duration);
   }
 
   /**

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

@@ -4,7 +4,7 @@ import {
   RenderInfo,
   calculatePositionValueForDayCount,
   timelineElementCssClass,
-  calculatePositionValueForDayCountinPx
+  calculatePositionValueForDayCountingPx
 } from "../wp-timeline";
 import * as moment from "moment";
 import Moment = moment.Moment;
@@ -143,7 +143,7 @@ export class TimelineMilestoneCellRenderer extends TimelineCellRenderer {
     const wp = renderInfo.workPackage;
     let start = moment(wp.date as any);
     const offsetStart = start.diff(renderInfo.viewParams.dateDisplayStart, "days");
-    return calculatePositionValueForDayCountinPx(renderInfo.viewParams, offsetStart) + (renderInfo.viewParams.pixelPerDay / 4);
+    return calculatePositionValueForDayCountingPx(renderInfo.viewParams, offsetStart) + 20;
   }
 
   getRightmostPosition(renderInfo: RenderInfo): number {

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

@@ -32,12 +32,11 @@ import {WorkPackageCacheService} from "../../work-packages/work-package-cache.se
 import {registerWorkPackageMouseHandler} from "./wp-timeline-cell-mouse-handler";
 import {TimelineMilestoneCellRenderer} from "./cell-renderer/timeline-milestone-cell-renderer";
 import {TimelineCellRenderer} from "./cell-renderer/timeline-cell-renderer";
-import {Subscription} from "rxjs";
+import {Subscription, Observable} from "rxjs";
 import {WorkPackageResourceInterface} from "../../api/api-v3/hal-resources/work-package-resource.service";
+import * as moment from "moment";
 import IScope = angular.IScope;
-import * as moment from 'moment';
 import Moment = moment.Moment;
-import {Observable} from 'rxjs';
 
 const renderers = {
   milestone: new TimelineMilestoneCellRenderer(),
@@ -91,6 +90,15 @@ export class WorkPackageTimelineCell {
     return renderer.getRightmostPosition(this.latestRenderInfo);
   }
 
+  canConnectRelations(): boolean {
+    const wp = this.latestRenderInfo.workPackage;
+    if (wp.isMilestone) {
+      return !_.isNil(wp.date);
+    }
+
+    return !_.isNil(wp.startDate) || !_.isNil(wp.dueDate);
+  }
+
   private clear() {
     this.timelineCell.innerHTML = "";
     this.wpElement = null;

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

@@ -28,14 +28,14 @@
 // ++
 import IDirective = angular.IDirective;
 import IComponentOptions = angular.IComponentOptions;
-import {timelineElementCssClass, TimelineViewParameters} from './wp-timeline';
-import {WorkPackageTimelineCell} from './wp-timeline-cell';
-import {States} from '../../states.service';
-import {HalRequestService} from '../../api/api-v3/hal-request/hal-request.service';
-import {RelationResource} from '../../api/api-v3/hal-resources/relation-resource.service';
-import {CollectionResource} from '../../api/api-v3/hal-resources/collection-resource.service';
-import {debugLog} from '../../../helpers/debug_output';
-import {WorkPackageResource} from '../../api/api-v3/hal-resources/work-package-resource.service';
+import {timelineElementCssClass, TimelineViewParameters} from "./wp-timeline";
+import {WorkPackageTimelineCell} from "./wp-timeline-cell";
+import {States} from "../../states.service";
+import {HalRequestService} from "../../api/api-v3/hal-request/hal-request.service";
+import {RelationResource} from "../../api/api-v3/hal-resources/relation-resource.service";
+import {CollectionResource} from "../../api/api-v3/hal-resources/collection-resource.service";
+import {debugLog} from "../../../helpers/debug_output";
+import {WorkPackageResource} from "../../api/api-v3/hal-resources/work-package-resource.service";
 import IScope = angular.IScope;
 
 
@@ -64,10 +64,19 @@ function newSegment(vp: TimelineViewParameters,
 }
 
 export class TimelineGlobalElement {
+
+  static readonly timelineGlobalElementIdCssClass = "timeline-global-element-id-";
+
   private static nextId = 0;
-  classId = 'timeline-global-element-id-' + TimelineGlobalElement.nextId++;
+
+  readonly id = TimelineGlobalElement.nextId++;
+
+  readonly classId = TimelineGlobalElement.timelineGlobalElementIdCssClass + this.id;
+
   from: string;
+
   to: string;
+
 }
 
 export class WpTimelineGlobalService {
@@ -90,7 +99,6 @@ export class WpTimelineGlobalService {
           {
             filter: [{ involved: {operator: '=', values: this.workPackageIdOrder } }]
           }).then((collection: CollectionResource) => {
-            this.elements = [];
             this.removeAllElements();
             collection.elements.forEach((relation: RelationResource) => {
               const fromId = WorkPackageResource.idFromLink(relation.from.href!);
@@ -117,20 +125,31 @@ export class WpTimelineGlobalService {
     this.update();
   }
 
-  displayRelation(from: string, to: string) {
+  displayRelation(from: string, to: string): number {
     const elem = new TimelineGlobalElement();
     elem.from = from;
     elem.to = to;
     this.elements.push(elem);
     this.update();
+    return elem.id;
+  }
+
+  removeElement(id: number) {
+    jQuery("." + TimelineGlobalElement.timelineGlobalElementIdCssClass + id).remove();
+    _.remove(this.elements, elem => elem.id == id);
   }
 
   private update() {
-    this.removeAllElements();
+    this.removeAllVisibleElements();
     this.renderElements();
   }
 
   private removeAllElements() {
+    this.removeAllVisibleElements();
+    this.elements = [];
+  }
+
+  private removeAllVisibleElements() {
     jQuery('.' + timelineGlobalElementCssClassname).remove();
   }
 
@@ -155,18 +174,23 @@ export class WpTimelineGlobalService {
         continue;
       }
 
+      if (!startCell.canConnectRelations() || !endCell.canConnectRelations()) {
+        continue;
+      }
+
       const directionY = idxFrom < idxTo ? 1 : -1;
       let lastX = startCell.getRightmostPosition();
       let targetX = endCell.getLeftmostPosition();
-      const directionX = targetX > lastX ? 1 : -1;
+      const directionX = targetX >= lastX ? 1 : -1;
 
       // start
       if (!startCell) {
         continue;
       }
 
-      startCell.timelineCell.appendChild(newSegment(vp, e.classId, 'green', 19, lastX, 10, 1));
-      lastX += 10;
+      const startLength = 13;
+      startCell.timelineCell.appendChild(newSegment(vp, e.classId, 'green', 19, lastX, startLength, 1));
+      lastX += startLength;
 
       if (directionY === 1) {
         startCell.timelineCell.appendChild(newSegment(vp, e.classId, 'red', 19, lastX, 1, 22));

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

@@ -105,7 +105,7 @@ export interface RenderInfo {
 /**
  *
  */
-export function calculatePositionValueForDayCountinPx(viewParams: TimelineViewParameters, days: number): number {
+export function calculatePositionValueForDayCountingPx(viewParams: TimelineViewParameters, days: number): number {
   const daysInPx = days * viewParams.pixelPerDay;
   return daysInPx;
 }
@@ -114,12 +114,8 @@ export function calculatePositionValueForDayCountinPx(viewParams: TimelineViewPa
  *
  */
 export function calculatePositionValueForDayCount(viewParams: TimelineViewParameters, days: number): string {
-  const value = calculatePositionValueForDayCountinPx(viewParams, days);
-  // if (viewParams.settings.showDurationInPx) {
+  const value = calculatePositionValueForDayCountingPx(viewParams, days);
     return value + "px";
-  // } else {
-  // return (value / viewParams.maxWidthInPx * 100) + "%";
-  // }
 }