gantt-task-react-powern 0.6.37 → 0.6.39

package/dist/index.js

@@ -358,7 +358,7 @@ var TaskListHeaderDefault = function TaskListHeaderDefault(_ref) {
     }
   }), {
     resizable: false
-  }), cell("id", 0.8, "ID"), cell("wbs", 0.8, "WBS Code / Activity ID"), cell("name", 1.8, "Task"), cell("plannedStart", 0.6, "Planned Start", {
+  }), cell("id", 0.8, "ID"), cell("wbs", 0.8, "WBS Code / Activity ID"), cell("name", 1.8, "IM TESTING"), cell("plannedStart", 0.6, "Planned Start", {
     title: "Planned Start"
   }), cell("plannedEnd", 0.6, "Planned End", {
     title: "Planned End"
@@ -750,6 +750,43 @@ var Tooltip = function Tooltip(_ref) {
     type: type
   }));
 };
+
+function getOffTime(task, taskStart, taskEnd, _message) {
+  var start = taskStart.getTime();
+  var end = taskEnd.getTime();
+  var startWeek = Math.floor((start / 86400000 + 4) / 7);
+  var endWeek = Math.floor((end / 86400000 + 4) / 7);
+  var offTime = 0;
+
+  if (task.calendar) {
+    if (task.calendar.off_days && task.calendar.off_days.length) {
+      for (var d = 0; d < task.calendar.off_days.length || 0; d++) {
+        for (var w = startWeek; w <= endWeek; w++) {
+          var dayOfTheWeek = task.calendar.off_days[d];
+          var offDay = 86400000 * (7 * w - 4 + dayOfTheWeek);
+
+          if (offDay >= start && offDay <= end) {
+            offTime += 86400000;
+          }
+        }
+      }
+    }
+
+    if (task.calendar.holidays && task.calendar.holidays.length) {
+      for (var h = 0; h < task.calendar.holidays.length || 0; h++) {
+        var holiday = task.calendar.holidays[h];
+        var holiday_timestamp = new Date(holiday).getTime();
+
+        if (holiday_timestamp >= start && holiday_timestamp <= end) {
+          offTime += 86400000;
+        }
+      }
+    }
+  }
+
+  return offTime;
+}
+
 var StandardTooltipContent = function StandardTooltipContent(_ref2) {
   var _task$plannedDuration, _task$actualDuration;
 
@@ -761,8 +798,8 @@ var StandardTooltipContent = function StandardTooltipContent(_ref2) {
     fontSize: fontSize,
     fontFamily: fontFamily
   };
-  var computedPlannedDuration = task.start && task.end && task.end.getTime() - task.start.getTime() > 0 ? Math.max(1, Math.round((task.end.getTime() - task.start.getTime()) / (1000 * 60 * 60 * 24))) : (_task$plannedDuration = task.plannedDuration) != null ? _task$plannedDuration : 0;
-  var computedActualDuration = task.actualStart && task.actualEnd && task.actualEnd.getTime() - task.actualStart.getTime() > 0 ? Math.max(1, Math.round((task.actualEnd.getTime() - task.actualStart.getTime()) / (1000 * 60 * 60 * 24))) : (_task$actualDuration = task.actualDuration) != null ? _task$actualDuration : 0;
+  var computedPlannedDuration = task.start && task.end && task.end.getTime() - task.start.getTime() > 0 ? Math.max(1, Math.round((task.end.getTime() - task.start.getTime() - getOffTime(task, task.start, task.end)) / (1000 * 60 * 60 * 24))) : (_task$plannedDuration = task.plannedDuration) != null ? _task$plannedDuration : 0;
+  var computedActualDuration = task.actualStart && task.actualEnd && task.actualEnd.getTime() - task.actualStart.getTime() > 0 ? Math.max(1, Math.round((task.actualEnd.getTime() - task.actualStart.getTime() - getOffTime(task, task.actualStart, task.actualEnd)) / (1000 * 60 * 60 * 24))) : (_task$actualDuration = task.actualDuration) != null ? _task$actualDuration : 0;
   if (type == "planned") return React__default.createElement("div", {
     className: styles$2.tooltipDefaultContainer,
     style: style
@@ -990,7 +1027,38 @@ var TaskList = function TaskList(_ref) {
       setPendingTaskSelect = _useState3[1];
 
   var prevSelectedTasksRef = React.useRef([]);
-  var expandedTasks = React.useRef([]);
+  var expandedTasks = React.useRef(new Set());
+  var taskIndex = React.useMemo(function () {
+    var byId = new Map();
+    var childrenOf = new Map();
+    var roots = [];
+    tasks.forEach(function (task) {
+      return byId.set(task.id, task);
+    });
+    tasks.forEach(function (task) {
+      var parent = getParentWbs(task.id);
+
+      if (parent === undefined) {
+        roots.push(task.id);
+        return;
+      }
+
+      var siblings = childrenOf.get(parent);
+      if (siblings) siblings.push(task.id);else childrenOf.set(parent, [task.id]);
+    });
+    return {
+      byId: byId,
+      childrenOf: childrenOf,
+      roots: roots
+    };
+  }, [tasks]);
+
+  var sameIds = function sameIds(a, b) {
+    return a.length === b.length && a.every(function (id, i) {
+      return id === b[i];
+    });
+  };
+
   var virtualizer = reactVirtual.useVirtualizer({
     count: tasks.length,
     getScrollElement: function getScrollElement() {
@@ -1007,13 +1075,15 @@ var TaskList = function TaskList(_ref) {
     }
   }, [scrollY]);
   React.useEffect(function () {
-    if (onMultiSelect && JSON.stringify(prevSelectedTasksRef.current) !== JSON.stringify(selectedTasks)) {
-      var selectedTaskObjects = tasks.filter(function (task) {
-        return selectedTasks.includes(task.id);
-      });
-      prevSelectedTasksRef.current = [].concat(selectedTasks);
-      onMultiSelect(selectedTaskObjects);
+    if (!onMultiSelect || sameIds(prevSelectedTasksRef.current, selectedTasks)) {
+      return;
     }
+
+    var selected = new Set(selectedTasks);
+    prevSelectedTasksRef.current = selectedTasks;
+    onMultiSelect(tasks.filter(function (task) {
+      return selected.has(task.id);
+    }));
   }, [selectedTasks, tasks, onMultiSelect]);
   React.useEffect(function () {
     if (pendingTaskSelect.length === 0) return;
@@ -1023,14 +1093,14 @@ var TaskList = function TaskList(_ref) {
           selected = _ref2.selected;
 
       if (selected) {
-        recursiveOpen(taskId, tasks);
-        var descendants = getDescendants(taskId, tasks);
+        recursiveOpen(taskId);
+        var descendants = getDescendants(taskId);
         newSelected.add(taskId);
         descendants.forEach(function (d) {
           return newSelected.add(d);
         });
       } else {
-        var _descendants = getDescendants(taskId, tasks);
+        var _descendants = getDescendants(taskId);
 
         newSelected["delete"](taskId);
 
@@ -1043,63 +1113,60 @@ var TaskList = function TaskList(_ref) {
     setPendingTaskSelect([]);
   }, [pendingTaskSelect]);
   React.useEffect(function () {
-    expandedTasks.current = expandedTasks.current.filter(function (id) {
-      var t = tasks.find(function (task) {
-        return task.id === id;
-      });
-      return t && !t.hideChildren;
+    expandedTasks.current.forEach(function (id) {
+      var task = taskIndex.byId.get(id);
+      if (!task || task.hideChildren) expandedTasks.current["delete"](id);
     });
     if (selectedTasks.length === 0) return;
     var newSelected = new Set();
     selectedTasks.forEach(function (taskId) {
-      if (tasks.find(function (t) {
-        return t.id === taskId;
-      })) {
-        recursiveOpen(taskId, tasks);
-        newSelected.add(taskId);
-        var descendants = getDescendants(taskId, tasks);
-        descendants.forEach(function (d) {
-          return newSelected.add(d);
-        });
-      }
+      if (!taskIndex.byId.has(taskId)) return;
+      recursiveOpen(taskId);
+      newSelected.add(taskId);
+      getDescendants(taskId).forEach(function (d) {
+        return newSelected.add(d);
+      });
     });
     var newSelectedArray = Array.from(newSelected);
 
-    if (JSON.stringify(newSelectedArray) !== JSON.stringify(selectedTasks)) {
+    if (!sameIds(newSelectedArray, selectedTasks)) {
       setSelectedTasks(newSelectedArray);
     }
   }, [tasks.length]);
 
-  var getDescendants = function getDescendants(taskId, allTasks) {
-    var task = allTasks.find(function (t) {
-      return t.id === taskId;
-    });
-    if (!task) return [];
-    var children = allTasks.filter(function (t) {
-      return getParentWbs(t.id) === taskId;
-    });
-    return children.flatMap(function (child) {
-      return [child.id].concat(getDescendants(child.id, allTasks));
-    });
-  };
+  var getDescendants = function getDescendants(taskId) {
+    var _taskIndex$childrenOf;
 
-  var recursiveOpen = function recursiveOpen(taskId, allTasks) {
-    var task = allTasks.find(function (t) {
-      return t.id === taskId;
-    });
-    if (!task) return;
+    if (!taskIndex.byId.has(taskId)) return [];
+    var out = [];
+    var stack = [].concat((_taskIndex$childrenOf = taskIndex.childrenOf.get(taskId)) != null ? _taskIndex$childrenOf : []).reverse();
 
-    if (!expandedTasks.current.includes(taskId) && task.hideChildren) {
-      onExpanderClick(task);
-      expandedTasks.current = [].concat(expandedTasks.current, [taskId]);
+    while (stack.length) {
+      var id = stack.pop();
+      out.push(id);
+      var children = taskIndex.childrenOf.get(id);
+      if (children) stack.push.apply(stack, [].concat(children).reverse());
     }
 
-    var children = allTasks.filter(function (t) {
-      return getParentWbs(t.id) === taskId;
-    });
-    children.forEach(function (c) {
-      return recursiveOpen(c.id, allTasks);
-    });
+    return out;
+  };
+
+  var recursiveOpen = function recursiveOpen(taskId) {
+    var stack = [taskId];
+
+    while (stack.length) {
+      var id = stack.pop();
+      var task = taskIndex.byId.get(id);
+      var children = taskIndex.childrenOf.get(id);
+      if (!task || !children) continue;
+
+      if (task.hideChildren && !expandedTasks.current.has(id)) {
+        onExpanderClick(task);
+        expandedTasks.current.add(id);
+      }
+
+      stack.push.apply(stack, children);
+    }
   };
 
   var handleTaskSelect = function handleTaskSelect(taskId, selected) {
@@ -1113,12 +1180,9 @@ var TaskList = function TaskList(_ref) {
 
   var handleSelectAll = function handleSelectAll(selected) {
     if (selected) {
-      var topLevelTasks = tasks.filter(function (task) {
-        return !getParentWbs(task.id);
-      });
-      setPendingTaskSelect(topLevelTasks.map(function (task) {
+      setPendingTaskSelect(taskIndex.roots.map(function (taskId) {
         return {
-          taskId: task.id,
+          taskId: taskId,
           selected: true
         };
       }));
@@ -1220,16 +1284,52 @@ function isOffDay(date, cal) {
     return false;
   }
 }
+var parsedShiftsCache = new WeakMap();
+var offDayCache = new WeakMap();
+
+function parsedShifts(cal) {
+  var shifts = parsedShiftsCache.get(cal);
+
+  if (!shifts) {
+    var _cal$shifts;
+
+    shifts = ((_cal$shifts = cal.shifts) != null ? _cal$shifts : []).map(function (_ref) {
+      var s = _ref[0],
+          e = _ref[1];
+      return {
+        start: parseTimeToMinutes(s),
+        end: parseTimeToMinutes(e)
+      };
+    });
+    parsedShiftsCache.set(cal, shifts);
+  }
+
+  return shifts;
+}
+
+function isOffDayCached(date, cal) {
+  var perCal = offDayCache.get(cal);
+
+  if (!perCal) {
+    perCal = new Map();
+    offDayCache.set(cal, perCal);
+  }
+
+  var key = date.getFullYear() * 10000 + (date.getMonth() + 1) * 100 + date.getDate();
+  var off = perCal.get(key);
+
+  if (off === undefined) {
+    off = isOffDay(date, cal);
+    perCal.set(key, off);
+  }
+
+  return off;
+}
+
+var NO_SHIFTS = [];
 function getShiftsForDay(date, cal) {
-  if (isOffDay(date, cal) || !cal.shifts) return [];
-  return cal.shifts.map(function (_ref) {
-    var s = _ref[0],
-        e = _ref[1];
-    return {
-      start: parseTimeToMinutes(s),
-      end: parseTimeToMinutes(e)
-    };
-  });
+  if (!cal.shifts || isOffDayCached(date, cal)) return NO_SHIFTS;
+  return parsedShifts(cal);
 }
 function getWorkingIntervals(start, end, cal) {
   if (start >= end) return [];
@@ -1346,7 +1446,7 @@ var GridBody = function GridBody(_ref) {
       viewMode = _ref.viewMode;
   var visibleHeight = visibleEndY - visibleStartY;
   var now = new Date();
-  var items = virtualItems.length > 0 ? virtualItems : tasks.map(function (_, i) {
+  var items = virtualItems != null ? virtualItems : tasks.map(function (_, i) {
     return {
       index: i,
       start: i * rowHeight,
@@ -2218,25 +2318,25 @@ var convertToBarTasks = function convertToBarTasks(tasks, dates, columnWidth, ro
   var barTasks = tasks.map(function (t, i) {
     return convertToBarTask(t, i, dates, columnWidth, rowHeight, taskHeight, barCornerRadius, handleWidth, rtl, barProgressColor, barProgressSelectedColor, barBackgroundColor, barBackgroundSelectedColor, projectProgressColor, projectProgressSelectedColor, projectBackgroundColor, projectBackgroundSelectedColor, milestoneBackgroundColor, milestoneBackgroundSelectedColor);
   });
+  var indexById = new Map();
+
+  for (var i = 0; i < barTasks.length; i++) {
+    indexById.set(barTasks[i].id, i);
+  }
+
   barTasks = barTasks.map(function (task) {
     var dependencies = task.dependencies || [];
 
-    var _loop = function _loop(j) {
-      var dependence = barTasks.findIndex(function (value) {
-        return value.id === dependencies[j].id;
-      });
+    for (var j = 0; j < dependencies.length; j++) {
+      var dependence = indexById.get(dependencies[j].id);
 
-      if (dependence !== -1 && task.start.getTime() > 0 && task.end.getTime() > 0) {
+      if (dependence !== undefined && task.start.getTime() > 0 && task.end.getTime() > 0) {
         var barchild = _extends({}, task, {
           dependencyType: dependencies[j].type
         });
 
         barTasks[dependence].barChildren.push(barchild);
       }
-    };
-
-    for (var j = 0; j < dependencies.length; j++) {
-      _loop(j);
     }
 
     return task;
@@ -2394,10 +2494,33 @@ var convertToMilestone = function convertToMilestone(task, index, dates, columnW
   });
 };
 
+var dateTimesCache = new WeakMap();
+
+var getDateTimes = function getDateTimes(dates) {
+  var times = dateTimesCache.get(dates);
+
+  if (!times) {
+    times = dates.map(function (d) {
+      return d.getTime();
+    });
+    dateTimesCache.set(dates, times);
+  }
+
+  return times;
+};
+
 var taskXCoordinate = function taskXCoordinate(xDate, dates, columnWidth) {
-  var index = dates.findIndex(function (d) {
-    return d.getTime() >= xDate.getTime();
-  }) - 1;
+  var times = getDateTimes(dates);
+  var target = xDate.getTime();
+  var lo = 0;
+  var hi = times.length - 1;
+
+  while (lo <= hi) {
+    var mid = lo + hi >> 1;
+    if (times[mid] >= target) hi = mid - 1;else lo = mid + 1;
+  }
+
+  var index = (lo === times.length ? -1 : lo) - 1;
 
   if (index < 0) {
     if (dates[dates.length - 1].getTime() <= xDate.getTime()) {
@@ -3675,58 +3798,73 @@ var TaskGanttContent = function TaskGanttContent(_ref) {
     }
   };
 
-  var getArrows = function getArrows(isCritical, criticalPathType) {
-    return tasks.flatMap(function (_task) {
-      var a = ganttEvent.action;
-      var isDraggingThis = (a === "move" || a === "start" || a === "end" || a === "progress") && !!ganttEvent.changedTask && ganttEvent.changedTask.id === _task.id;
-
-      var _live = isDraggingThis ? _extends({}, ganttEvent.changedTask, {
-        y: _task.y
-      }) : _task;
+  var arrowIndex = React__default.useMemo(function () {
+    var entries = [];
 
-      var task = _live.start.getTime() > 0 && _live.end.getTime() > 0 ? _live : undefined;
+    for (var i = 0; i < tasks.length; i++) {
+      var task = tasks[i];
+      var yFrom = task.y + taskHeight / 2;
 
-      if (!task) {
-        return [];
+      for (var _iterator = _createForOfIteratorHelperLoose(task.barChildren), _step; !(_step = _iterator()).done;) {
+        var child = _step.value;
+        var taskTo = tasks[child.index];
+        if (!taskTo) continue;
+        var yTo = taskTo.y + taskHeight / 2;
+        entries.push({
+          from: i,
+          to: child.index,
+          minY: Math.min(yFrom, yTo),
+          maxY: Math.max(yFrom, yTo),
+          dependencyType: child.dependencyType
+        });
       }
+    }
 
-      return task.barChildren.map(function (child) {
-        var taskTo = tasks[child.index];
-        var fromDrawable = task.x2 > task.x1 || task.actualx2 > task.actualx1;
-        var toDrawable = !!taskTo && (taskTo.x2 > taskTo.x1 || taskTo.actualx2 > taskTo.actualx1);
+    return entries;
+  }, [tasks, taskHeight]);
 
-        if (fromDrawable && toDrawable) {
-          var _task$criticalPathArr;
+  var getArrows = function getArrows(isCritical, criticalPathType) {
+    var out = [];
+    var a = ganttEvent.action;
+    var dragging = (a === "move" || a === "start" || a === "end" || a === "progress") && !!ganttEvent.changedTask;
 
-          var criticalTask = (_task$criticalPathArr = task.criticalPathArrows) === null || _task$criticalPathArr === void 0 ? void 0 : _task$criticalPathArr.find(function (arrow) {
-            return arrow.taskId === taskTo.id && (!!arrow.criticalPathType ? arrow.criticalPathType === criticalPathType : !criticalPathType);
-          });
-          var yFrom = task.y + taskHeight / 2;
-          var yTo = taskTo.y + taskHeight / 2;
-          var minY = Math.min(yFrom, yTo);
-          var maxY = Math.max(yFrom, yTo);
+    var _loop = function _loop() {
+      var _task$criticalPathArr;
 
-          if (maxY < visibleStartY || minY > visibleEndY) {
-            return null;
-          }
+      var e = _step2.value;
+      if (e.maxY < visibleStartY || e.minY > visibleEndY) return "continue";
+      var _task = tasks[e.from];
+      var task = dragging && ganttEvent.changedTask.id === _task.id ? _extends({}, ganttEvent.changedTask, {
+        y: _task.y
+      }) : _task;
+      if (!(task.start.getTime() > 0 && task.end.getTime() > 0)) return "continue";
+      var taskTo = tasks[e.to];
+      var fromDrawable = task.x2 > task.x1 || task.actualx2 > task.actualx1;
+      var toDrawable = taskTo.x2 > taskTo.x1 || taskTo.actualx2 > taskTo.actualx1;
+      if (!fromDrawable || !toDrawable) return "continue";
+      var criticalTask = (_task$criticalPathArr = task.criticalPathArrows) === null || _task$criticalPathArr === void 0 ? void 0 : _task$criticalPathArr.find(function (arrow) {
+        return arrow.taskId === taskTo.id && (!!arrow.criticalPathType ? arrow.criticalPathType === criticalPathType : !criticalPathType);
+      });
+      if (!!criticalTask !== isCritical) return "continue";
+      out.push(React__default.createElement(Arrow, {
+        key: "Arrow from " + task.id + " to " + taskTo.id + (isCritical ? "-critical" : ""),
+        taskFrom: task,
+        taskTo: taskTo,
+        rowHeight: rowHeight,
+        dependencyType: e.dependencyType,
+        taskHeight: taskHeight,
+        arrowIndent: arrowIndent,
+        arrowColor: (criticalTask === null || criticalTask === void 0 ? void 0 : criticalTask.arrowColor) || "#808080"
+      }));
+    };
 
-          if (!!criticalTask === isCritical) {
-            return React__default.createElement(Arrow, {
-              key: "Arrow from " + task.id + " to " + taskTo.id + (isCritical ? "-critical" : ""),
-              taskFrom: task,
-              taskTo: taskTo,
-              rowHeight: rowHeight,
-              dependencyType: child.dependencyType,
-              taskHeight: taskHeight,
-              arrowIndent: arrowIndent,
-              arrowColor: (criticalTask === null || criticalTask === void 0 ? void 0 : criticalTask.arrowColor) || "#808080"
-            });
-          }
-        }
+    for (var _iterator2 = _createForOfIteratorHelperLoose(arrowIndex), _step2; !(_step2 = _iterator2()).done;) {
+      var _ret = _loop();
 
-        return null;
-      }).filter(Boolean);
-    });
+      if (_ret === "continue") continue;
+    }
+
+    return out;
   };
 
   var lineX = sliderTime !== undefined ? taskXCoordinate(new Date(sliderTime), dates, columnWidth) : null;
@@ -3910,7 +4048,7 @@ var HorizontalScroll = function HorizontalScroll(_ref) {
 var GANTT_MIN_WIDTH_RATIO = 0.4;
 var TABLE_GANTT_DIVIDER_WIDTH = 20;
 var Gantt = function Gantt(_ref) {
-  var _ref2;
+  var _ref3;
 
   var tasks = _ref.tasks,
       primaryPath = _ref.primaryPath,
@@ -4024,9 +4162,9 @@ var Gantt = function Gantt(_ref) {
       setTableContentWidth = _useState2[1];
 
   var _useState3 = React.useState(function () {
-    var _ganttDateRange = ganttDateRange(tasks, viewMode, preStepsCount),
-        startDateRange = _ganttDateRange[0],
-        endDateRange = _ganttDateRange[1];
+    var _ref2 = tasks ? ganttDateRange(tasks, viewMode, preStepsCount) : [new Date(), new Date()],
+        startDateRange = _ref2[0],
+        endDateRange = _ref2[1];
 
     if (scheduleType === "lookAhead") {
       return {
@@ -4178,7 +4316,7 @@ var Gantt = function Gantt(_ref) {
       setComputedColumnWidth(next);
     }
   }, [viewMode, svgContainerWidth, columnWidthProp, computedColumnWidth]);
-  var columnWidth = (_ref2 = columnWidthProp != null ? columnWidthProp : computedColumnWidth) != null ? _ref2 : 60;
+  var columnWidth = (_ref3 = columnWidthProp != null ? columnWidthProp : computedColumnWidth) != null ? _ref3 : 60;
   var effectiveColumnWidth = React.useMemo(function () {
     if (svgContainerWidth <= 0 || dateSetup.dates.length <= 0) return columnWidth;
 
@@ -4250,9 +4388,9 @@ var Gantt = function Gantt(_ref) {
       filteredTasks = removeHiddenTasks(tasks);
       filteredTasks = filteredTasks.sort(sortTasks);
 
-      var _ganttDateRange2 = ganttDateRange(filteredTasks, viewMode, preStepsCount, (_projectCalendar$quar = projectCalendar === null || projectCalendar === void 0 ? void 0 : projectCalendar.quarter_start) != null ? _projectCalendar$quar : 0),
-          startDateRange = _ganttDateRange2[0],
-          endDateRange = _ganttDateRange2[1];
+      var _ganttDateRange = ganttDateRange(filteredTasks, viewMode, preStepsCount, (_projectCalendar$quar = projectCalendar === null || projectCalendar === void 0 ? void 0 : projectCalendar.quarter_start) != null ? _projectCalendar$quar : 0),
+          startDateRange = _ganttDateRange[0],
+          endDateRange = _ganttDateRange[1];
 
       var newDates = seedDates(startDateRange, endDateRange, viewMode);
 
@@ -4282,7 +4420,8 @@ var Gantt = function Gantt(_ref) {
         colorPath(primaryPath, "#ff0000", tasks, "primary");
       }
 
-      setBarTasks(convertToBarTasks(filteredTasks, newDates, effectiveColumnWidth, rowHeight, taskHeight, barCornerRadius, handleWidth, rtl, barProgressColor, barProgressSelectedColor, barBackgroundColor, barBackgroundSelectedColor, projectProgressColor, projectProgressSelectedColor, projectBackgroundColor, projectBackgroundSelectedColor, milestoneBackgroundColor, milestoneBackgroundSelectedColor));
+      var nextBarTasks = convertToBarTasks(filteredTasks, newDates, effectiveColumnWidth, rowHeight, taskHeight, barCornerRadius, handleWidth, rtl, barProgressColor, barProgressSelectedColor, barBackgroundColor, barBackgroundSelectedColor, projectProgressColor, projectProgressSelectedColor, projectBackgroundColor, projectBackgroundSelectedColor, milestoneBackgroundColor, milestoneBackgroundSelectedColor);
+      setBarTasks(nextBarTasks);
       setIsProcessing(false);
     }, delayToRender);
   }, [tasks, viewMode, preStepsCount, rowHeight, barCornerRadius, taskHeight, handleWidth, barProgressColor, barProgressSelectedColor, barBackgroundColor, barBackgroundSelectedColor, projectProgressColor, projectProgressSelectedColor, projectBackgroundColor, projectBackgroundSelectedColor, milestoneBackgroundColor, milestoneBackgroundSelectedColor, rtl, shouldNotShowLoadingOverlay, effectiveColumnWidth, projectCalendar]);
@@ -4854,6 +4993,7 @@ function getCriticalPaths(leafTasks) {
     taskChainList.sort(function (a, b) {
       return b.duration - a.duration;
     });
+    console.debug(taskChainList);
     var primaryLeaf = taskChainList[0].parent;
     var primaryPath = [];
 
@@ -4921,59 +5061,76 @@ function getCriticalPaths(leafTasks) {
       secondaryLeaf = _nextPath.task;
     }
 
-    console.debug("Primary", primaryPath);
-    console.debug("Secondary", secondaryPath);
+    console.debug("Primary ", primaryPath);
+    console.debug("Secondary ", secondaryPath);
     return [primaryPath, secondaryPath];
   }
 
   return [[], []];
 }
+
+function getOffTime$1(tIndex, taskMap, start, end) {
+  var startWeek = Math.floor((start / 86400000 + 4) / 7);
+  var endWeek = Math.floor((end / 86400000 + 4) / 7);
+  var offTime = [];
+
+  if (taskMap[tIndex].task.calendar) {
+    if (taskMap[tIndex].task.calendar.off_days && taskMap[tIndex].task.calendar.off_days.length) {
+      for (var d = 0; d < taskMap[tIndex].task.calendar.off_days.length || 0; d++) {
+        for (var w = startWeek; w <= endWeek; w++) {
+          var dayOfTheWeek = taskMap[tIndex].task.calendar.off_days[d];
+          var offDay = 86400000 * (7 * w - 4 + dayOfTheWeek);
+
+          if (offDay >= start && offDay <= end) {
+            offTime.push(offDay);
+          }
+        }
+      }
+    }
+
+    if (taskMap[tIndex].task.calendar.holidays && taskMap[tIndex].task.calendar.holidays.length) {
+      for (var h = 0; h < taskMap[tIndex].task.calendar.holidays.length || 0; h++) {
+        var holiday = taskMap[tIndex].task.calendar.holidays[h];
+        var holiday_timestamp = new Date(holiday).getTime();
+
+        if (holiday_timestamp >= start && holiday_timestamp <= end) {
+          offTime.push(holiday_timestamp);
+        }
+      }
+    }
+  }
+
+  return offTime;
+}
+
 function computeCriticalPath(taskID, taskMap) {
   var task = taskMap[taskID].task;
   var dependents = taskMap[taskID].dependents;
   taskMap[taskID].start = task.start.getTime();
   taskMap[taskID].end = task.end.getTime();
   taskMap[taskID].paths = [];
+  var parent_off_time = getOffTime$1(taskID, taskMap, taskMap[taskID].start, taskMap[taskID].end);
 
   for (var j = 0; j < dependents.length; j++) {
     var depStart = taskMap[dependents[j]].task.start.getTime();
     var depEnd = taskMap[dependents[j]].task.end.getTime();
     var depDuration = depEnd - depStart;
-    var startWeek = Math.floor((depStart / 86400000 + 4) / 7);
-    var endWeek = Math.floor((depEnd / 86400000 + 4) / 7);
-    var offTime = 0;
-
-    if (taskMap[dependents[j]].task.calendar) {
-      if (taskMap[dependents[j]].task.calendar.off_days && taskMap[dependents[j]].task.calendar.off_days.length) {
-        for (var d = 0; d < taskMap[dependents[j]].task.calendar.off_days.length || 0; d++) {
-          for (var w = startWeek; w <= endWeek; w++) {
-            var dayOfTheWeek = taskMap[dependents[j]].task.calendar.off_days[d];
-            var offDay = 86400000 * (7 * w - 4 + dayOfTheWeek);
-
-            if (offDay >= depStart && offDay <= depEnd && (offDay > taskMap[taskID].end || taskMap[taskID].task.calendar.off_days.includes(dayOfTheWeek))) {
-              offTime += 86400000;
-            }
-          }
-        }
-      }
-
-      if (taskMap[dependents[j]].task.calendar.holidays && taskMap[dependents[j]].task.calendar.holidays.length) {
-        for (var h = 0; h < taskMap[dependents[j]].task.calendar.holidays.length || 0; h++) {
-          var holiday = taskMap[dependents[j]].task.calendar.holidays[h];
+    var child_off_time = getOffTime$1(dependents[j], taskMap, depStart, depEnd);
+    var overlap = Math.max(taskMap[taskID].end - depStart, 0);
 
-          if (holiday >= depStart && holiday <= depEnd) {
-            offTime += 86400000;
-          }
-        }
+    for (var t = 0; t < parent_off_time.length; t++) {
+      if (child_off_time.includes(parent_off_time[t])) {
+        parent_off_time.splice(t, 1);
+        t -= 1;
       }
     }
 
-    var overlap = Math.max(taskMap[taskID].end - depStart, 0);
+    var offTime = parent_off_time.length + child_off_time.length;
     var paths = taskMap[dependents[j]].paths;
 
     if (paths && paths.length) {
       for (var k = 0; k < paths.length; k++) {
-        var totalDuration = taskMap[taskID].end - taskMap[taskID].start - overlap - offTime + paths[k].duration;
+        var totalDuration = taskMap[taskID].end - taskMap[taskID].start - overlap - parent_off_time.length * 86400000 + paths[k].duration;
 
         if (taskMap[taskID].paths.length < 2) {
           taskMap[taskID].paths.push({
@@ -4995,7 +5152,7 @@ function computeCriticalPath(taskID, taskMap) {
         }
       }
     } else {
-      var immediateChildDuration = taskMap[taskID].end - taskMap[taskID].start + depDuration - overlap - offTime;
+      var immediateChildDuration = taskMap[taskID].end - taskMap[taskID].start + depDuration - overlap - offTime * 86400000;
 
       if (taskMap[taskID].paths.length < 2) {
         taskMap[taskID].paths.push({
@@ -5025,22 +5182,28 @@ function uncolorAll(tasks) {
   });
 }
 function colorPath(path, color, tasks, criticalPathType) {
-  for (var i = 0; i < path.length; i++) {
-    var longestIDLength = 0;
-    var longestTask = void 0;
+  var byId = new Map();
 
-    for (var j = 0; j < tasks.length; j++) {
-      if (path[i].id === tasks[j].id) {
-        longestTask = tasks[j];
-        break;
-      }
+  for (var _iterator = _createForOfIteratorHelperLoose(tasks), _step; !(_step = _iterator()).done;) {
+    var task = _step.value;
+    byId.set(task.id, task);
+  }
 
-      if (path[i].id.startsWith(tasks[j].id + ".") && tasks[j].id.length > longestIDLength) {
-        longestIDLength = tasks[j].id.length;
-        longestTask = tasks[j];
-      }
+  var nearest = function nearest(id) {
+    var exact = byId.get(id);
+    if (exact) return exact;
+
+    for (var cut = id.lastIndexOf("."); cut > 0; cut = id.lastIndexOf(".", cut - 1)) {
+      var ancestor = byId.get(id.slice(0, cut));
+      if (ancestor) return ancestor;
     }
 
+    return undefined;
+  };
+
+  for (var i = 0; i < path.length; i++) {
+    var longestTask = nearest(path[i].id);
+
     if (longestTask) {
       var _longestTask$styles;
 
@@ -5052,14 +5215,7 @@ function colorPath(path, color, tasks, criticalPathType) {
   }
 
   var _loop = function _loop(_i9) {
-    var taskFromTasks = void 0;
-
-    for (var _j2 = 0; _j2 < tasks.length; _j2++) {
-      if (path[_i9].id === tasks[_j2].id) {
-        taskFromTasks = tasks[_j2];
-        break;
-      }
-    }
+    var taskFromTasks = byId.get(path[_i9].id);
 
     if (taskFromTasks) {
       var arrows = taskFromTasks.criticalPathArrows;