@thepocman/gantt-task-react 1.0.12 → 1.0.14

package/dist/gantt-task-react.umd.js

@@ -474,7 +474,6 @@
   const enDateLocale = locale;
   const collectChildren = (arrayRes, mirrorRes, task, childTasksOnLevel, enableTaskGrouping) => {
     const { comparisonLevel = 1 } = task;
-    console.log(`Task ${task.id} visibility check: type=${task.type}, hideChildren=${task.hideChildren}, will ${task.type === "empty" || task.hideChildren && task.type !== "user" ? "hide" : "show"} children`);
     arrayRes.push(task);
     if (comparisonLevel === 1) {
       mirrorRes[task.id] = true;
@@ -1604,14 +1603,9 @@
     return { isChanged, changedTask };
   };
   const countTaskCoordinates = (task, taskToRowIndexMap, startDate, viewMode, rtl, fullRowHeight, taskHeight, taskYOffset, distances, svgWidth, sequentialOffset = 0) => {
-    const { columnWidth, rowHeight } = distances;
+    const { columnWidth } = distances;
     const { id, comparisonLevel = 1, progress, type } = task;
     const indexesAtLevel = taskToRowIndexMap.get(comparisonLevel);
-    console.log("Looking for task id:", task.id, "level:", comparisonLevel);
-    console.log("taskToRowIndexMap", Array.from(taskToRowIndexMap.entries()).map(([level, map]) => ({
-      level,
-      rows: Array.from(map.entries())
-    })));
     if (!indexesAtLevel) {
       throw new Error(`Indexes at level ${comparisonLevel} are not found`);
     }
@@ -1621,7 +1615,7 @@
     }
     const x1 = rtl ? svgWidth - taskXCoordinate(task.end, startDate, viewMode, columnWidth) : taskXCoordinate(task.start, startDate, viewMode, columnWidth);
     const x2 = rtl ? svgWidth - taskXCoordinate(task.start, startDate, viewMode, columnWidth) : taskXCoordinate(task.end, startDate, viewMode, columnWidth);
-    const levelY = rowIndex * fullRowHeight + rowHeight * (comparisonLevel - 1);
+    const levelY = rowIndex * fullRowHeight;
     const y = levelY + taskYOffset + sequentialOffset;
     const [progressWidth, progressX] = type === "milestone" ? [0, x1] : progressWithByParams(x1, x2, progress, rtl);
     const taskX1 = type === "milestone" ? x1 - taskHeight * 0.5 : x1;
@@ -1673,21 +1667,31 @@
     });
     return res;
   };
-  const countTaskCoordinatesWithGrouping = (task, taskToRowIndexMap, startDate, viewMode, rtl, fullRowHeight, taskHeight, taskYOffset, distances, svgWidth, sequentialOffset = 0) => {
-    const { columnWidth, rowHeight } = distances;
+  const countTaskCoordinatesWithGrouping = (task, rowIndexToTasksMap, startDate, viewMode, rtl, fullRowHeight, taskHeight, taskYOffset, distances, svgWidth, sequentialOffset = 0) => {
+    const { columnWidth } = distances;
     const { id, comparisonLevel = 1, progress, type } = task;
-    const indexesAtLevel = taskToRowIndexMap.get(comparisonLevel);
-    if (!indexesAtLevel) {
-      throw new Error(`Indexes at level ${comparisonLevel} are not found`);
+    let rowIndex = -1;
+    let taskIndexInRow = 0;
+    const rowMapAtLevel = rowIndexToTasksMap.get(comparisonLevel);
+    if (!rowMapAtLevel) {
+      throw new Error(`No rows found for comparison level ${comparisonLevel}`);
+    }
+    for (const [currentRowIndex, tasksInRow] of rowMapAtLevel.entries()) {
+      const taskIndex = tasksInRow.findIndex((t) => t.id === id);
+      if (taskIndex !== -1) {
+        rowIndex = currentRowIndex;
+        taskIndexInRow = taskIndex;
+        break;
+      }
     }
-    const rowIndex = indexesAtLevel.get(id);
-    if (typeof rowIndex !== "number") {
-      throw new Error(`Row index for task ${id} is not found`);
+    if (rowIndex === -1) {
+      throw new Error(`Task ${id} not found in rowIndexToTasksMap`);
     }
     const x1 = rtl ? svgWidth - taskXCoordinate(task.end, startDate, viewMode, columnWidth) : taskXCoordinate(task.start, startDate, viewMode, columnWidth);
     const x2 = rtl ? svgWidth - taskXCoordinate(task.start, startDate, viewMode, columnWidth) : taskXCoordinate(task.end, startDate, viewMode, columnWidth);
-    const levelY = rowIndex * fullRowHeight + rowHeight * (comparisonLevel - 1);
-    const y = levelY + taskYOffset + sequentialOffset;
+    const levelY = rowIndex * fullRowHeight;
+    const taskStackOffset = taskIndexInRow * (taskHeight + 2);
+    const y = levelY + taskYOffset + sequentialOffset + taskStackOffset;
     const [progressWidth, progressX] = type === "milestone" ? [0, x1] : progressWithByParams(x1, x2, progress, rtl);
     const taskX1 = type === "milestone" ? x1 - taskHeight * 0.5 : x1;
     const taskX2 = type === "milestone" ? x2 + taskHeight * 0.5 : x2;
@@ -1710,6 +1714,34 @@
       y
     };
   };
+  const getMapTaskToCoordinatesWithGrouping = (tasks, visibleTasksMirror, rowIndexToTasksMap, startDate, viewMode, rtl, fullRowHeight, taskHeight, taskYOffset, distances, svgWidth) => {
+    const res = /* @__PURE__ */ new Map();
+    tasks.forEach((task) => {
+      if (task.type === "empty" || task.type === "user") {
+        return;
+      }
+      const { id, comparisonLevel = 1 } = task;
+      if (!visibleTasksMirror[id]) {
+        return;
+      }
+      const taskCoordinates = countTaskCoordinatesWithGrouping(
+        task,
+        rowIndexToTasksMap,
+        startDate,
+        viewMode,
+        rtl,
+        fullRowHeight,
+        taskHeight,
+        taskYOffset,
+        distances,
+        svgWidth
+      );
+      const resByLevel = res.get(comparisonLevel) || /* @__PURE__ */ new Map();
+      resByLevel.set(id, taskCoordinates);
+      res.set(comparisonLevel, resByLevel);
+    });
+    return res;
+  };
   const getMapTaskToGlobalIndex = (tasks) => {
     const res = /* @__PURE__ */ new Map();
     tasks.forEach((task, index2) => {
@@ -1723,43 +1755,33 @@
     });
     return res;
   };
-  const getMapTaskTo = (indexesOnLevel, taskId, level, collectedIndex, childTasksOnLevel) => {
-    const childs = childTasksOnLevel.get(taskId);
-    if (childs && childs.length > 0) {
-      childs.forEach(({
-        id: childId
-      }, index2) => {
-        const childIndex = `${collectedIndex}.${index2 + 1}`;
-        indexesOnLevel.set(childId, [level, childIndex]);
-        getMapTaskTo(
-          indexesOnLevel,
-          childId,
-          level + 1,
-          childIndex,
-          childTasksOnLevel
-        );
-      });
+  const setIndex = (map, level, id, depth, indexStr) => {
+    if (!map.has(level)) {
+      map.set(level, /* @__PURE__ */ new Map());
     }
+    map.get(level).set(id, [depth, indexStr]);
+  };
+  const walkTasks = (map, comparisonLevel, parentId, depth, prefix, childTasksMap) => {
+    const children = childTasksMap.get(parentId);
+    if (!children)
+      return;
+    children.forEach((child, i) => {
+      const indexStr = `${prefix}.${i + 1}`;
+      setIndex(map, comparisonLevel, child.id, depth, indexStr);
+      walkTasks(map, comparisonLevel, child.id, depth + 1, indexStr, childTasksMap);
+    });
   };
   const getMapTaskToNestedIndex = (childTasksMap, rootTasksMap) => {
-    const res = /* @__PURE__ */ new Map();
+    const map = /* @__PURE__ */ new Map();
     for (const [comparisonLevel, rootTasks] of rootTasksMap.entries()) {
-      const indexesOnLevel = /* @__PURE__ */ new Map();
-      const childTasksOnLevel = childTasksMap.get(comparisonLevel) || /* @__PURE__ */ new Map();
-      rootTasks.forEach(({ id: rootId }, index2) => {
-        const rootIndex = `${index2 + 1}`;
-        indexesOnLevel.set(rootId, [0, rootIndex]);
-        getMapTaskTo(
-          indexesOnLevel,
-          rootId,
-          1,
-          rootIndex,
-          childTasksOnLevel
-        );
+      const childMap = childTasksMap.get(comparisonLevel) ?? /* @__PURE__ */ new Map();
+      rootTasks.forEach((task, i) => {
+        const indexStr = `${i + 1}`;
+        setIndex(map, comparisonLevel, task.id, 0, indexStr);
+        walkTasks(map, comparisonLevel, task.id, 1, indexStr, childMap);
       });
-      res.set(comparisonLevel, indexesOnLevel);
     }
-    return res;
+    return map;
   };
   const getMapTaskToRowIndex = (visibleTasks, comparisonLevels) => {
     const taskToRowIndexRes = /* @__PURE__ */ new Map();
@@ -1934,6 +1956,33 @@
     ]);
     return indexes;
   };
+  const TASK_SPACING = 2;
+  const buildRowEntries = (rowIndexToTasksMap, taskHeight) => {
+    const rowToTaskCount = /* @__PURE__ */ new Map();
+    for (const rowMap of rowIndexToTasksMap.values()) {
+      for (const [rowIndex, tasks] of rowMap.entries()) {
+        rowToTaskCount.set(rowIndex, (rowToTaskCount.get(rowIndex) ?? 0) + tasks.length);
+      }
+    }
+    return [...rowToTaskCount.entries()].map(([rowIndex, count2]) => ({
+      rowIndex,
+      height: count2 * (taskHeight + TASK_SPACING)
+    })).sort((a2, b2) => a2.rowIndex - b2.rowIndex);
+  };
+  const useGroupedVirtualization = (rowIndexToTasksMap, taskHeight) => {
+    var _a, _b;
+    const rowEntries = React.useMemo(
+      () => buildRowEntries(rowIndexToTasksMap, taskHeight),
+      [rowIndexToTasksMap, taskHeight]
+    );
+    return [
+      ((_a = rowEntries[0]) == null ? void 0 : _a.rowIndex) ?? 0,
+      ((_b = rowEntries[rowEntries.length - 1]) == null ? void 0 : _b.rowIndex) ?? 0,
+      true,
+      true,
+      rowEntries.reduce((sum, entry) => sum + entry.height, 0)
+    ];
+  };
   const button$2 = "_button_1eue5_1";
   const styles$i = {
     button: button$2
@@ -3370,6 +3419,7 @@
     dateSetup,
     dependencyMap,
     distances,
+    rowIndexToTasksMap,
     fontFamily,
     fontSize,
     fullRowHeight,
@@ -3408,7 +3458,11 @@
       onTableResizeStart,
       onColumnResizeStart
     ] = useTableListResize(columnsProp, distances, onResizeColumn);
-    const renderedIndexes = useOptimizedList(
+    const renderedIndexes = enableTaskGrouping ? useGroupedVirtualization(
+      //taskListContentRef,
+      rowIndexToTasksMap,
+      distances.taskHeight
+    ) : useOptimizedList(
       taskListContentRef,
       "scrollTop",
       fullRowHeight
@@ -3464,6 +3518,7 @@
                         columns,
                         cutIdsMirror,
                         enableTaskGrouping,
+                        rowIndexToTasksMap,
                         dateSetup,
                         dependencyMap,
                         distances,
@@ -3685,21 +3740,6 @@
     );
   };
   const TaskListHeaderDefault = React.memo(TaskListHeaderDefaultInner);
-  const checkHasChildren = (task, childTasksMap) => {
-    const {
-      id,
-      comparisonLevel = 1
-    } = task;
-    const childIdsByLevel = childTasksMap.get(comparisonLevel);
-    if (!childIdsByLevel) {
-      return false;
-    }
-    const childs = childIdsByLevel.get(id);
-    if (!childs) {
-      return false;
-    }
-    return childs.length > 0;
-  };
   const taskListTableRow = "_taskListTableRow_1e35i_1";
   const taskListTableRowGrabbing = "_taskListTableRowGrabbing_1e35i_13";
   const cut = "_cut_1e35i_21";
@@ -4043,6 +4083,21 @@
     );
   };
   const TaskListTableRow = React.memo(TaskListTableRowInner);
+  const checkHasChildren = (task, childTasksMap) => {
+    const {
+      id,
+      comparisonLevel = 1
+    } = task;
+    const childIdsByLevel = childTasksMap.get(comparisonLevel);
+    if (!childIdsByLevel) {
+      return false;
+    }
+    const childs = childIdsByLevel.get(id);
+    if (!childs) {
+      return false;
+    }
+    return childs.length > 0;
+  };
   const taskListWrapper = "_taskListWrapper_5941j_1";
   const styles$b = {
     taskListWrapper
@@ -4071,6 +4126,7 @@
     icons,
     isShowTaskNumbers,
     mapTaskToNestedIndex,
+    rowIndexToTasksMap,
     onClick,
     onExpanderClick,
     renderedIndexes,
@@ -4080,98 +4136,146 @@
     tasks
   }) => {
     const renderedTasks = React.useMemo(() => {
-      console.log("enableTaskGrouping", enableTaskGrouping);
       if (!enableTaskGrouping) {
-        return tasks;
+        return tasks.filter((task) => !task.comparisonLevel || task.comparisonLevel === 1);
       }
-      return tasks.filter((task) => {
-        const parent = tasks.find((t) => t.id === task.parent);
-        const isGroupedChildOfCollapsedUser = parent && parent.type === "user" && parent.hideChildren === true;
-        return !isGroupedChildOfCollapsedUser;
-      });
+      return tasks.filter((task) => task.type !== "user");
     }, [tasks, enableTaskGrouping]);
     const [draggedTask, setDraggedTask] = React.useState(null);
     const renderedListWithOffset = React.useMemo(() => {
-      if (!renderedIndexes) {
+      var _a;
+      if (!renderedIndexes)
         return null;
-      }
       const [start, end] = renderedIndexes;
-      const renderedList = [];
-      for (let index2 = start; index2 <= end; ++index2) {
-        const task = renderedTasks[index2];
-        if (!task) {
-          break;
-        }
-        const { id, comparisonLevel = 1 } = task;
-        const indexesOnLevel = mapTaskToNestedIndex.get(comparisonLevel);
-        if (!indexesOnLevel) {
-          throw new Error(`Indexes are not found for level ${comparisonLevel}`);
+      const renderList = [];
+      if (!enableTaskGrouping) {
+        for (let rowIndex = start; rowIndex <= end; rowIndex++) {
+          const task = renderedTasks[rowIndex];
+          if (!task)
+            break;
+          const { id, comparisonLevel = 1 } = task;
+          const indexesOnLevel = mapTaskToNestedIndex.get(comparisonLevel);
+          const taskIndex = indexesOnLevel == null ? void 0 : indexesOnLevel.get(id);
+          const [depth, indexStr] = taskIndex ?? [0, ""];
+          renderList.push(
+            /* @__PURE__ */ jsxRuntime.jsx(
+              TaskListTableRow,
+              {
+                canMoveTasks,
+                colors,
+                columns,
+                dateSetup,
+                dependencyMap,
+                depth,
+                distances,
+                fullRowHeight,
+                getTaskCurrentState,
+                handleAddTask,
+                handleDeleteTasks,
+                handleEditTask,
+                handleMoveTaskBefore,
+                handleMoveTaskAfter,
+                handleMoveTasksInside,
+                handleOpenContextMenu,
+                hasChildren: checkHasChildren(task, childTasksMap),
+                icons,
+                indexStr,
+                isClosed: Boolean(task == null ? void 0 : task.hideChildren),
+                isCut: cutIdsMirror[id],
+                isEven: rowIndex % 2 === 1,
+                isSelected: selectedIdsMirror[id],
+                isShowTaskNumbers,
+                onClick,
+                onExpanderClick,
+                scrollToTask,
+                selectTaskOnMouseDown,
+                task,
+                tasks,
+                draggedTask,
+                setDraggedTask
+              },
+              id
+            )
+          );
         }
-        const taskIndex = indexesOnLevel.get(id);
-        if (!taskIndex) {
-          throw new Error(`Index is not found for task ${id}`);
+      } else {
+        for (let rowIndex = start; rowIndex <= end; rowIndex++) {
+          const taskList = (_a = rowIndexToTasksMap.get(1)) == null ? void 0 : _a.get(rowIndex);
+          if (!taskList)
+            continue;
+          for (const task of taskList) {
+            const parent = tasks.find((t) => t.id === task.parent);
+            if (parent == null ? void 0 : parent.hideChildren)
+              continue;
+            const { id, comparisonLevel } = task;
+            let depth = 0;
+            let indexStr = "";
+            console.log("comparisonLevel", comparisonLevel);
+            const levelMap = mapTaskToNestedIndex.get(comparisonLevel);
+            const taskIndex = levelMap == null ? void 0 : levelMap.get(id);
+            if (taskIndex) {
+              console.log("object :>> ", [depth, indexStr] = taskIndex);
+              [depth, indexStr] = taskIndex;
+            }
+            renderList.push(
+              /* @__PURE__ */ jsxRuntime.jsx(
+                TaskListTableRow,
+                {
+                  canMoveTasks,
+                  colors,
+                  columns,
+                  dateSetup,
+                  dependencyMap,
+                  depth,
+                  distances,
+                  fullRowHeight,
+                  getTaskCurrentState,
+                  handleAddTask,
+                  handleDeleteTasks,
+                  handleEditTask,
+                  handleMoveTaskBefore,
+                  handleMoveTaskAfter,
+                  handleMoveTasksInside,
+                  handleOpenContextMenu,
+                  hasChildren: checkHasChildren(task, childTasksMap),
+                  icons,
+                  indexStr,
+                  isClosed: Boolean(task == null ? void 0 : task.hideChildren),
+                  isCut: cutIdsMirror[id],
+                  isEven: rowIndex % 2 === 1,
+                  isSelected: selectedIdsMirror[id],
+                  isShowTaskNumbers,
+                  onClick,
+                  onExpanderClick,
+                  scrollToTask,
+                  selectTaskOnMouseDown,
+                  task,
+                  tasks,
+                  draggedTask,
+                  setDraggedTask
+                },
+                id
+              )
+            );
+          }
         }
-        const [depth, indexStr] = taskIndex;
-        renderedList.push(
-          /* @__PURE__ */ jsxRuntime.jsx(
-            TaskListTableRow,
-            {
-              canMoveTasks,
-              colors,
-              columns,
-              dateSetup,
-              dependencyMap,
-              depth,
-              distances,
-              fullRowHeight,
-              getTaskCurrentState,
-              handleAddTask,
-              handleDeleteTasks,
-              handleEditTask,
-              handleMoveTaskBefore,
-              handleMoveTaskAfter,
-              handleMoveTasksInside,
-              handleOpenContextMenu,
-              hasChildren: checkHasChildren(task, childTasksMap),
-              icons,
-              indexStr,
-              isClosed: Boolean(task == null ? void 0 : task.hideChildren),
-              isCut: cutIdsMirror[id],
-              isEven: index2 % 2 === 1,
-              isSelected: selectedIdsMirror[id],
-              isShowTaskNumbers,
-              onClick,
-              onExpanderClick,
-              scrollToTask,
-              selectTaskOnMouseDown,
-              task,
-              tasks,
-              draggedTask,
-              setDraggedTask
-            },
-            id
-          )
-        );
       }
       return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            style: {
-              height: fullRowHeight * start
-            }
-          }
-        ),
-        renderedList
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { height: fullRowHeight * start } }),
+        renderList
       ] });
     }, [
+      renderedIndexes,
+      renderedTasks,
+      rowIndexToTasksMap,
+      mapTaskToNestedIndex,
+      tasks,
+      enableTaskGrouping,
+      fullRowHeight,
       colors,
       columns,
       cutIdsMirror,
-      fullRowHeight,
       getTaskCurrentState,
-      renderedIndexes,
-      renderedTasks,
       selectTaskOnMouseDown,
       selectedIdsMirror,
       draggedTask
@@ -4180,10 +4284,7 @@
       "div",
       {
         className: styles$b.taskListWrapper,
-        style: {
-          fontFamily,
-          fontSize
-        },
+        style: { fontFamily, fontSize },
         children: renderedListWithOffset
       }
     );
@@ -4992,9 +5093,9 @@
       /* @__PURE__ */ jsxRuntime.jsx(GridBody, { ...props })
     ] });
   };
-  const ganttTaskRoot = "_ganttTaskRoot_1g0yd_1";
-  const ganttTaskContent = "_ganttTaskContent_1g0yd_81";
-  const wrapper$2 = "_wrapper_1g0yd_107";
+  const ganttTaskRoot = "_ganttTaskRoot_jnu0p_1";
+  const ganttTaskContent = "_ganttTaskContent_jnu0p_83";
+  const wrapper$2 = "_wrapper_jnu0p_111";
   const styles$9 = {
     ganttTaskRoot,
     ganttTaskContent,
@@ -6423,6 +6524,8 @@
     handleFixDependency,
     handleTaskDragStart,
     isShowDependencyWarnings,
+    enableTaskGrouping,
+    rowIndexToTasksMap,
     mapGlobalRowIndexToTask,
     onArrowDoubleClick,
     onArrowClick,
@@ -6442,263 +6545,228 @@
   }) => {
     const [renderedTasks, renderedArrows, renderedSelectedTasks] = React.useMemo(() => {
       var _a;
-      if (!renderedRowIndexes) {
+      if (!renderedRowIndexes)
         return [null, null, null];
-      }
       const [start, end] = renderedRowIndexes;
       const tasksRes = [];
       const arrowsRes = [];
       const selectedTasksRes = [];
       const addedSelectedTasks = {};
       const addedDependencies = {};
-      console.log("mapGlobalRowIndexToTask", mapGlobalRowIndexToTask);
       for (let index2 = start; index2 <= end; ++index2) {
-        const task = mapGlobalRowIndexToTask.get(index2);
-        if (!task) {
-          continue;
-        }
-        const { comparisonLevel = 1, id: taskId } = task;
-        if (selectedIdsMirror[taskId] && !addedSelectedTasks[taskId]) {
-          addedSelectedTasks[taskId] = true;
-          const rowIndex = (_a = taskToRowIndexMap.get(comparisonLevel)) == null ? void 0 : _a.get(taskId);
-          if (typeof rowIndex === "number") {
-            const y = rowIndex * fullRowHeight;
-            selectedTasksRes.push(
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "rect",
-                {
-                  x: 0,
-                  y,
-                  width: "100%",
-                  height: fullRowHeight,
-                  fill: colorStyles.selectedTaskBackgroundColor
-                },
-                `selected-${taskId}`
-              )
-            );
+        const tasksAtRow = [];
+        if (enableTaskGrouping) {
+          for (let level = 1; level <= comparisonLevels; level++) {
+            const levelMap = rowIndexToTasksMap.get(level);
+            const rowTasks = levelMap == null ? void 0 : levelMap.get(index2);
+            if (Array.isArray(rowTasks)) {
+              tasksAtRow.push(...rowTasks);
+            }
           }
+        } else {
+          const task = mapGlobalRowIndexToTask.get(index2);
+          if (task)
+            tasksAtRow.push(task);
         }
-        if (comparisonLevel > comparisonLevels) {
-          continue;
-        }
-        if (task.type === "empty" || task.type === "user") {
-          continue;
-        }
-        const key = `${comparisonLevel}_${task.id}`;
-        const criticalPathOnLevel = criticalPaths ? criticalPaths.get(comparisonLevel) : void 0;
-        const isCritical = criticalPathOnLevel ? criticalPathOnLevel.tasks.has(task.id) : false;
-        const {
-          containerX,
-          containerWidth,
-          innerX1,
-          innerX2,
-          width,
-          levelY,
-          progressWidth,
-          x1: taskX1,
-          x2: taskX2
-        } = getTaskCoordinates2(task);
-        tasksRes.push(
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "svg",
-            {
-              id: task.id,
-              className: "TaskItemClassName",
-              x: containerX + (additionalLeftSpace || 0),
-              y: levelY,
-              width: containerWidth,
-              height: fullRowHeight,
-              children: /* @__PURE__ */ jsxRuntime.jsx(
-                TaskItem,
-                {
-                  getTaskGlobalIndexByRef,
-                  hasChildren: checkHasChildren(task, childTasksMap),
-                  hasDependencyWarning: taskToHasDependencyWarningMap ? checkTaskHasDependencyWarning(
-                    task,
-                    taskToHasDependencyWarningMap
-                  ) : false,
-                  progressWidth,
-                  progressX: rtl ? innerX2 : innerX1,
-                  selectTaskOnMouseDown,
-                  task,
-                  taskYOffset,
-                  width,
-                  x1: innerX1,
-                  x2: innerX2,
-                  childOutOfParentWarnings,
-                  distances,
-                  taskHeight,
-                  taskHalfHeight,
-                  isProgressChangeable: !task.isDisabled,
-                  isDateChangeable: !task.isDisabled,
-                  isRelationChangeable: !task.isRelationDisabled,
-                  authorizedRelations,
-                  ganttRelationEvent,
-                  isDelete: !task.isDisabled,
-                  onDoubleClick,
-                  onClick,
-                  onEventStart: handleTaskDragStart,
-                  setTooltipTask,
-                  onRelationStart: handleBarRelationStart,
-                  isSelected: Boolean(selectedIdsMirror[taskId]),
-                  isCritical,
-                  rtl,
-                  fixStartPosition,
-                  fixEndPosition,
-                  handleDeleteTasks,
-                  colorStyles
-                }
-              )
-            },
-            key
-          )
-        );
-        const addedDependenciesAtLevel = addedDependencies[comparisonLevel] || {};
-        if (!addedDependencies[comparisonLevel]) {
-          addedDependencies[comparisonLevel] = addedDependenciesAtLevel;
-        }
-        const addedDependenciesAtTask = addedDependenciesAtLevel[taskId] || {};
-        if (!addedDependenciesAtLevel[taskId]) {
-          addedDependenciesAtLevel[taskId] = addedDependenciesAtTask;
-        }
-        const dependenciesAtLevel = dependencyMap.get(comparisonLevel);
-        if (!dependenciesAtLevel) {
-          continue;
-        }
-        const dependenciesByTask = dependenciesAtLevel.get(taskId);
-        if (dependenciesByTask) {
-          const criticalPathForTask = criticalPathOnLevel ? criticalPathOnLevel.dependencies.get(task.id) : void 0;
-          dependenciesByTask.filter(({ source }) => visibleTasksMirror[source.id]).forEach(
-            ({
-              containerHeight,
-              containerY,
-              innerFromY,
-              innerToY,
-              marginBetweenTasks,
-              ownTarget,
-              source,
-              sourceTarget
-            }) => {
-              if (addedDependenciesAtTask[source.id]) {
-                return;
-              }
-              addedDependenciesAtTask[source.id] = true;
-              const isCritical2 = criticalPathForTask ? criticalPathForTask.has(source.id) : false;
-              const { x1: fromX1, x2: fromX2 } = getTaskCoordinates2(source);
-              const containerX2 = Math.min(fromX1, taskX1) - 300;
-              const containerWidth2 = Math.max(fromX2, taskX2) - containerX2 + 300;
-              arrowsRes.push(
+        console.log("tasksAtRow", tasksAtRow);
+        for (const task of tasksAtRow) {
+          const comparisonLevel = task.comparisonLevel ?? 1;
+          const { id: taskId } = task;
+          if (selectedIdsMirror[taskId] && !addedSelectedTasks[taskId]) {
+            addedSelectedTasks[taskId] = true;
+            const rowIndex = (_a = taskToRowIndexMap.get(comparisonLevel)) == null ? void 0 : _a.get(taskId);
+            if (typeof rowIndex === "number") {
+              selectedTasksRes.push(
                 /* @__PURE__ */ jsxRuntime.jsx(
-                  "svg",
+                  "rect",
                   {
-                    className: "ArrowClassName",
-                    x: containerX2 + (additionalLeftSpace || 0),
-                    y: containerY,
-                    width: containerWidth2,
-                    height: containerHeight,
-                    children: /* @__PURE__ */ jsxRuntime.jsx(
-                      Arrow,
-                      {
-                        colorStyles,
-                        distances,
-                        taskFrom: source,
-                        extremityFrom: sourceTarget,
-                        fromX1: fromX1 - containerX2,
-                        fromX2: fromX2 - containerX2,
-                        fromY: innerFromY,
-                        taskTo: task,
-                        extremityTo: ownTarget,
-                        toX1: taskX1 - containerX2,
-                        toX2: taskX2 - containerX2,
-                        toY: innerToY,
-                        marginBetweenTasks,
-                        fullRowHeight,
-                        taskHeight,
-                        isShowDependencyWarnings,
-                        isCritical: isCritical2,
-                        rtl,
-                        onArrowDoubleClick,
-                        onArrowClick,
-                        handleFixDependency
-                      }
-                    )
+                    x: 0,
+                    y: rowIndex * fullRowHeight,
+                    width: "100%",
+                    height: fullRowHeight,
+                    fill: colorStyles.selectedTaskBackgroundColor
                   },
-                  `Arrow from ${source.id} to ${taskId} on ${comparisonLevel}`
+                  `selected-${taskId}`
                 )
               );
             }
-          );
-        }
-        const dependentsAtLevel = dependentMap.get(comparisonLevel);
-        if (!dependentsAtLevel) {
-          continue;
-        }
-        const dependentsByTask = dependentsAtLevel.get(taskId);
-        if (dependentsByTask) {
-          dependentsByTask.filter(({ dependent }) => visibleTasksMirror[dependent.id]).forEach(
-            ({
-              containerHeight,
-              containerY,
-              innerFromY,
-              innerToY,
-              marginBetweenTasks,
-              ownTarget,
-              dependent,
-              dependentTarget
-            }) => {
-              const addedDependenciesAtDependent = addedDependenciesAtLevel[dependent.id] || {};
-              if (!addedDependenciesAtLevel[dependent.id]) {
-                addedDependenciesAtLevel[dependent.id] = addedDependenciesAtDependent;
-              }
-              if (addedDependenciesAtDependent[taskId]) {
-                return;
-              }
-              addedDependenciesAtDependent[taskId] = true;
-              const criticalPathForTask = criticalPathOnLevel ? criticalPathOnLevel.dependencies.get(dependent.id) : void 0;
-              const isCritical2 = criticalPathForTask ? criticalPathForTask.has(task.id) : false;
-              const { x1: toX1, x2: toX2 } = getTaskCoordinates2(dependent);
-              const containerX2 = Math.min(toX1, taskX1) - 300;
-              const containerWidth2 = Math.max(toX2, taskX2) - containerX2 + 300;
-              arrowsRes.push(
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "svg",
+          }
+          if (comparisonLevel > comparisonLevels)
+            continue;
+          if (task.type === "empty" || task.type === "user")
+            continue;
+          const key = `${comparisonLevel}_${task.id}`;
+          const criticalPathOnLevel = criticalPaths == null ? void 0 : criticalPaths.get(comparisonLevel);
+          const isCritical = !!(criticalPathOnLevel == null ? void 0 : criticalPathOnLevel.tasks.has(task.id));
+          const {
+            containerX,
+            containerWidth,
+            innerX1,
+            innerX2,
+            width,
+            levelY,
+            progressWidth,
+            x1: taskX1,
+            x2: taskX2
+          } = getTaskCoordinates2(task);
+          tasksRes.push(
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "svg",
+              {
+                id: task.id,
+                className: "TaskItemClassName",
+                x: containerX + additionalLeftSpace,
+                y: levelY,
+                width: containerWidth,
+                height: fullRowHeight,
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  TaskItem,
                   {
-                    x: containerX2 + (additionalLeftSpace || 0),
-                    y: containerY,
-                    width: containerWidth2,
-                    height: containerHeight,
-                    children: /* @__PURE__ */ jsxRuntime.jsx(
-                      Arrow,
-                      {
-                        colorStyles,
-                        distances,
-                        taskFrom: task,
-                        extremityFrom: ownTarget,
-                        fromX1: taskX1 - containerX2,
-                        fromX2: taskX2 - containerX2,
-                        fromY: innerFromY,
-                        taskTo: dependent,
-                        extremityTo: dependentTarget,
-                        toX1: toX1 - containerX2,
-                        toX2: toX2 - containerX2,
-                        toY: innerToY,
-                        marginBetweenTasks,
-                        fullRowHeight,
-                        taskHeight,
-                        isShowDependencyWarnings,
-                        isCritical: isCritical2,
-                        rtl,
-                        onArrowDoubleClick,
-                        onArrowClick,
-                        handleFixDependency
-                      }
-                    )
-                  },
-                  `Arrow from ${taskId} to ${dependent.id} on ${comparisonLevel}`
+                    getTaskGlobalIndexByRef,
+                    hasChildren: checkHasChildren(task, childTasksMap),
+                    hasDependencyWarning: taskToHasDependencyWarningMap ? checkTaskHasDependencyWarning(task, taskToHasDependencyWarningMap) : false,
+                    progressWidth,
+                    progressX: rtl ? innerX2 : innerX1,
+                    selectTaskOnMouseDown,
+                    task,
+                    taskYOffset,
+                    width,
+                    x1: innerX1,
+                    x2: innerX2,
+                    childOutOfParentWarnings,
+                    distances,
+                    taskHeight,
+                    taskHalfHeight,
+                    isProgressChangeable: !task.isDisabled,
+                    isDateChangeable: !task.isDisabled,
+                    isRelationChangeable: !task.isRelationDisabled,
+                    authorizedRelations,
+                    ganttRelationEvent,
+                    isDelete: !task.isDisabled,
+                    onDoubleClick,
+                    onClick,
+                    onEventStart: handleTaskDragStart,
+                    setTooltipTask,
+                    onRelationStart: handleBarRelationStart,
+                    isSelected: Boolean(selectedIdsMirror[taskId]),
+                    isCritical,
+                    rtl,
+                    fixStartPosition,
+                    fixEndPosition,
+                    handleDeleteTasks,
+                    colorStyles
+                  }
                 )
-              );
-            }
+              },
+              key
+            )
           );
+          const addedDependenciesAtLevel = addedDependencies[comparisonLevel] ?? (addedDependencies[comparisonLevel] = {});
+          const addedDependenciesAtTask = addedDependenciesAtLevel[taskId] ?? (addedDependenciesAtLevel[taskId] = {});
+          const dependenciesAtLevel = dependencyMap.get(comparisonLevel);
+          const dependenciesByTask = dependenciesAtLevel == null ? void 0 : dependenciesAtLevel.get(taskId);
+          dependenciesByTask == null ? void 0 : dependenciesByTask.filter(({ source }) => visibleTasksMirror[source.id]).forEach((dep) => {
+            var _a2;
+            if (addedDependenciesAtTask[dep.source.id])
+              return;
+            addedDependenciesAtTask[dep.source.id] = true;
+            const { x1: fromX1, x2: fromX2 } = getTaskCoordinates2(dep.source);
+            const containerX2 = Math.min(fromX1, taskX1) - 300;
+            const containerWidth2 = Math.max(fromX2, taskX2) - containerX2 + 300;
+            const isDepCritical = !!((_a2 = criticalPathOnLevel == null ? void 0 : criticalPathOnLevel.dependencies.get(task.id)) == null ? void 0 : _a2.has(dep.source.id));
+            arrowsRes.push(
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "svg",
+                {
+                  className: "ArrowClassName",
+                  x: containerX2 + additionalLeftSpace,
+                  y: dep.containerY,
+                  width: containerWidth2,
+                  height: dep.containerHeight,
+                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                    Arrow,
+                    {
+                      colorStyles,
+                      distances,
+                      taskFrom: dep.source,
+                      extremityFrom: dep.sourceTarget,
+                      fromX1: fromX1 - containerX2,
+                      fromX2: fromX2 - containerX2,
+                      fromY: dep.innerFromY,
+                      taskTo: task,
+                      extremityTo: dep.ownTarget,
+                      toX1: taskX1 - containerX2,
+                      toX2: taskX2 - containerX2,
+                      toY: dep.innerToY,
+                      marginBetweenTasks: dep.marginBetweenTasks,
+                      fullRowHeight,
+                      taskHeight,
+                      isShowDependencyWarnings,
+                      isCritical: isDepCritical,
+                      rtl,
+                      onArrowDoubleClick,
+                      onArrowClick,
+                      handleFixDependency
+                    }
+                  )
+                },
+                `Arrow from ${dep.source.id} to ${taskId} on ${comparisonLevel}`
+              )
+            );
+          });
+          const dependentsAtLevel = dependentMap.get(comparisonLevel);
+          const dependentsByTask = dependentsAtLevel == null ? void 0 : dependentsAtLevel.get(taskId);
+          dependentsByTask == null ? void 0 : dependentsByTask.filter(({ dependent }) => visibleTasksMirror[dependent.id]).forEach((dep) => {
+            var _a2, _b;
+            console.log("dependent", dep);
+            const addedDepsForDep = addedDependenciesAtLevel[_a2 = dep.dependent.id] ?? (addedDependenciesAtLevel[_a2] = {});
+            if (addedDepsForDep[taskId])
+              return;
+            addedDepsForDep[taskId] = true;
+            const isDepCritical = !!((_b = criticalPathOnLevel == null ? void 0 : criticalPathOnLevel.dependencies.get(dep.dependent.id)) == null ? void 0 : _b.has(task.id));
+            const { x1: toX1, x2: toX2 } = getTaskCoordinates2(dep.dependent);
+            const containerX2 = Math.min(toX1, taskX1) - 300;
+            const containerWidth2 = Math.max(toX2, taskX2) - containerX2 + 300;
+            arrowsRes.push(
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "svg",
+                {
+                  className: "ArrowClassName",
+                  x: containerX2 + additionalLeftSpace,
+                  y: dep.containerY,
+                  width: containerWidth2,
+                  height: dep.containerHeight,
+                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                    Arrow,
+                    {
+                      colorStyles,
+                      distances,
+                      taskFrom: task,
+                      extremityFrom: dep.ownTarget,
+                      fromX1: taskX1 - containerX2,
+                      fromX2: taskX2 - containerX2,
+                      fromY: dep.innerFromY,
+                      taskTo: dep.dependent,
+                      extremityTo: dep.dependentTarget,
+                      toX1: toX1 - containerX2,
+                      toX2: toX2 - containerX2,
+                      toY: dep.innerToY,
+                      marginBetweenTasks: dep.marginBetweenTasks,
+                      fullRowHeight,
+                      taskHeight,
+                      isShowDependencyWarnings,
+                      isCritical: isDepCritical,
+                      rtl,
+                      onArrowDoubleClick,
+                      onArrowClick,
+                      handleFixDependency
+                    }
+                  )
+                },
+                `Arrow from ${taskId} to ${dep.dependent.id} on ${comparisonLevel}`
+              )
+            );
+          });
         }
       }
       return [tasksRes, arrowsRes, selectedTasksRes];
@@ -6715,7 +6783,9 @@
       renderedRowIndexes,
       selectTaskOnMouseDown,
       selectedIdsMirror,
-      visibleTasksMirror
+      visibleTasksMirror,
+      rowIndexToTasksMap,
+      enableTaskGrouping
     ]);
     return /* @__PURE__ */ jsxRuntime.jsxs("g", { className: "content", children: [
       renderedSelectedTasks,
@@ -11389,42 +11459,48 @@
     const rowIndexToTaskMap = /* @__PURE__ */ new Map();
     const rowIndexToTasksMap = /* @__PURE__ */ new Map();
     const mapGlobalRowIndexToTask = /* @__PURE__ */ new Map();
-    const parentMap = new Map(
-      tasks.map((task) => [task.id, task])
-    );
+    const parentMap = new Map(tasks.map((t) => [t.id, t]));
     let globalRowIndex = 0;
     for (let comparisonLevel = 1; comparisonLevel <= comparisonLevels; comparisonLevel++) {
-      const taskToRowIndexMapAtLevel = /* @__PURE__ */ new Map();
-      const rowIndexToTaskMapAtLevel = /* @__PURE__ */ new Map();
-      const rowIndexToTasksMapAtLevel = /* @__PURE__ */ new Map();
-      taskToRowIndexMap.set(comparisonLevel, taskToRowIndexMapAtLevel);
-      rowIndexToTaskMap.set(comparisonLevel, rowIndexToTaskMapAtLevel);
-      rowIndexToTasksMap.set(comparisonLevel, rowIndexToTasksMapAtLevel);
+      const taskToRow = /* @__PURE__ */ new Map();
+      const rowToTask = /* @__PURE__ */ new Map();
+      const rowToTasks = /* @__PURE__ */ new Map();
+      taskToRowIndexMap.set(comparisonLevel, taskToRow);
+      rowIndexToTaskMap.set(comparisonLevel, rowToTask);
+      rowIndexToTasksMap.set(comparisonLevel, rowToTasks);
       let rowIndex = 0;
       for (const task of tasks) {
-        const level = task.comparisonLevel ?? 1;
-        if (level !== comparisonLevel)
+        if ((task.comparisonLevel ?? 1) !== comparisonLevel)
           continue;
-        const { id, parent } = task;
+        const { id, parent, type } = task;
         let assignedRowIndex = rowIndex;
-        if (isGrouped && parent && parentMap.has(parent)) {
+        if (type === "user" || type === "project") {
+          taskToRow.set(id, rowIndex);
+          rowToTask.set(rowIndex, task);
+          rowToTasks.set(rowIndex, [task]);
+          mapGlobalRowIndexToTask.set(globalRowIndex, task);
+          rowIndex++;
+          globalRowIndex++;
+          continue;
+        }
+        if (isGrouped && parent) {
           const parentTask = parentMap.get(parent);
-          const isGroupedAudit = (parentTask == null ? void 0 : parentTask.type) === "user" && (parentTask == null ? void 0 : parentTask.hideChildren);
-          if (isGroupedAudit) {
-            const parentRowIndex = taskToRowIndexMapAtLevel.get(parent);
-            if (typeof parentRowIndex === "number") {
-              assignedRowIndex = parentRowIndex;
-            }
+          const parentRowIndex = taskToRow.get(parent);
+          if ((parentTask == null ? void 0 : parentTask.hideChildren) && parentRowIndex !== void 0) {
+            assignedRowIndex = parentRowIndex;
+          } else {
+            assignedRowIndex = rowIndex;
+            rowIndex++;
           }
-        }
-        taskToRowIndexMapAtLevel.set(id, assignedRowIndex);
-        rowIndexToTaskMapAtLevel.set(assignedRowIndex, task);
-        const existingTasks = rowIndexToTasksMapAtLevel.get(assignedRowIndex) ?? [];
-        rowIndexToTasksMapAtLevel.set(assignedRowIndex, [...existingTasks, task]);
-        mapGlobalRowIndexToTask.set(globalRowIndex, task);
-        if (assignedRowIndex === rowIndex) {
+        } else {
+          assignedRowIndex = rowIndex;
           rowIndex++;
         }
+        taskToRow.set(id, assignedRowIndex);
+        rowToTask.set(assignedRowIndex, task);
+        const existing = rowToTasks.get(assignedRowIndex) ?? [];
+        rowToTasks.set(assignedRowIndex, [...existing, task]);
+        mapGlobalRowIndexToTask.set(globalRowIndex, task);
         globalRowIndex++;
       }
     }
@@ -11490,6 +11566,7 @@
   const defaultDistances = {
     actionColumnWidth: 40,
     arrowIndent: 20,
+    taskHeight: 24,
     barCornerRadius: 3,
     barFill: 60,
     columnWidth: 60,
@@ -11676,11 +11753,6 @@
       () => distances.rowHeight * comparisonLevels,
       [distances, comparisonLevels]
     );
-    const renderedRowIndexes = useOptimizedList(
-      ganttTaskContentRef,
-      "scrollTop",
-      distances.rowHeight
-    );
     const colorStyles = React.useMemo(
       () => ({
         ...defaultColors,
@@ -11696,27 +11768,15 @@
       () => (distances.rowHeight - taskHeight) / 2,
       [distances, taskHeight]
     );
-    const [taskToRowIndexMap, rowIndexToTaskMap, mapGlobalRowIndexToTask, rowIndexToTasksMap] = React.useMemo(
-      () => enableTaskGrouping ? getMapTaskToRowIndexWithGrouping(visibleTasks, comparisonLevels, true) : getMapTaskToRowIndex(visibleTasks, comparisonLevels),
-      [visibleTasks, comparisonLevels, enableTaskGrouping]
-    );
     const taskHalfHeight = React.useMemo(
       () => Math.round(taskHeight / 2),
       [taskHeight]
     );
+    const [taskToRowIndexMap, rowIndexToTaskMap, mapGlobalRowIndexToTask, rowIndexToTasksMap] = React.useMemo(
+      () => enableTaskGrouping ? getMapTaskToRowIndexWithGrouping(visibleTasks, comparisonLevels, true) : getMapTaskToRowIndex(visibleTasks, comparisonLevels),
+      [visibleTasks, comparisonLevels, enableTaskGrouping]
+    );
     const maxLevelLength = React.useMemo(() => {
-      if (enableTaskGrouping) {
-        let totalHeightInRows = 0;
-        for (const [_, rowMap] of rowIndexToTasksMap) {
-          for (const [_2, tasksInRow] of rowMap) {
-            const maxStack = tasksInRow.length;
-            const stackedHeight = maxStack * (taskHeight + 2);
-            const rowsNeeded = Math.ceil(stackedHeight / fullRowHeight);
-            totalHeightInRows += rowsNeeded;
-          }
-        }
-        return Math.max(totalHeightInRows, 1);
-      }
       let maxLength = 0;
       const countByLevel = {};
       visibleTasks.forEach(({ comparisonLevel = 1 }) => {
@@ -11729,20 +11789,26 @@
         }
       });
       return maxLength;
-    }, [visibleTasks, comparisonLevels, enableTaskGrouping, rowIndexToTasksMap, fullRowHeight, taskHeight]);
+    }, [visibleTasks, comparisonLevels]);
     const ganttFullHeight = React.useMemo(() => {
-      if (enableTaskGrouping) {
-        let totalHeight = 0;
-        for (const [, taskMap] of rowIndexToTasksMap) {
-          for (const [, tasks2] of taskMap) {
-            const stackedHeight = tasks2.length * (taskHeight + 2);
-            totalHeight += Math.max(stackedHeight, fullRowHeight);
-          }
-        }
-        return totalHeight;
+      if (!enableTaskGrouping) {
+        return maxLevelLength * fullRowHeight;
+      }
+      let totalRows = 0;
+      for (const comparisonMap of rowIndexToTasksMap.values()) {
+        totalRows += comparisonMap.size;
       }
-      return maxLevelLength * fullRowHeight;
-    }, [enableTaskGrouping, rowIndexToTasksMap, maxLevelLength, fullRowHeight, taskHeight]);
+      return totalRows * fullRowHeight;
+    }, [enableTaskGrouping, rowIndexToTasksMap, maxLevelLength, fullRowHeight]);
+    const renderedRowIndexes = enableTaskGrouping ? useGroupedVirtualization(
+      //ganttTaskContentRef,
+      rowIndexToTasksMap,
+      fullRowHeight
+    ) : useOptimizedList(
+      ganttTaskContentRef,
+      "scrollTop",
+      fullRowHeight
+    );
     const {
       checkHasCopyTasks,
       checkHasCutTasks,
@@ -11801,22 +11867,10 @@
     const svgClientWidth = renderedColumnIndexes && renderedColumnIndexes[4];
     const countTaskCoordinates$1 = React.useCallback(
       (task) => {
-        var _a;
         if (enableTaskGrouping) {
-          const comparisonLevel = task.comparisonLevel ?? 1;
-          let sequentialOffset = 0;
-          const indexesAtLevel = taskToRowIndexMap.get(comparisonLevel);
-          const rowIndex = indexesAtLevel == null ? void 0 : indexesAtLevel.get(task.id);
-          if (typeof rowIndex === "number") {
-            const rowTasksAtLevel = ((_a = rowIndexToTasksMap.get(comparisonLevel)) == null ? void 0 : _a.get(rowIndex)) ?? [];
-            const indexInRow = rowTasksAtLevel.findIndex((t) => t.id === task.id);
-            if (indexInRow !== -1) {
-              sequentialOffset = indexInRow * (taskHeight + 2);
-            }
-          }
           return countTaskCoordinatesWithGrouping(
             task,
-            taskToRowIndexMap,
+            rowIndexToTasksMap,
             startDate,
             viewMode,
             rtl,
@@ -11825,7 +11879,7 @@
             taskYOffset,
             distances,
             svgWidth,
-            sequentialOffset
+            0
           );
         }
         return countTaskCoordinates(
@@ -11856,7 +11910,19 @@
       ]
     );
     const mapTaskToCoordinates = React.useMemo(
-      () => getMapTaskToCoordinates(
+      () => enableTaskGrouping ? getMapTaskToCoordinatesWithGrouping(
+        tasks,
+        visibleTasksMirror,
+        rowIndexToTasksMap,
+        startDate,
+        viewMode,
+        rtl,
+        fullRowHeight,
+        taskHeight,
+        taskYOffset,
+        distances,
+        svgWidth
+      ) : getMapTaskToCoordinates(
         tasks,
         visibleTasksMirror,
         taskToRowIndexMap,
@@ -11870,17 +11936,19 @@
         svgWidth
       ),
       [
-        distances,
-        fullRowHeight,
+        tasks,
+        visibleTasksMirror,
+        rowIndexToTasksMap,
         taskToRowIndexMap,
-        rtl,
         startDate,
-        svgWidth,
+        viewMode,
+        rtl,
+        fullRowHeight,
         taskHeight,
-        tasks,
         taskYOffset,
-        viewMode,
-        visibleTasksMirror
+        distances,
+        svgWidth,
+        enableTaskGrouping
       ]
     );
     const scrollToTask = React.useCallback(
@@ -12890,6 +12958,8 @@
     };
     const barProps = React.useMemo(
       () => ({
+        enableTaskGrouping,
+        rowIndexToTasksMap,
         authorizedRelations,
         additionalLeftSpace,
         additionalRightSpace,
@@ -12939,6 +13009,8 @@
       [
         additionalLeftSpace,
         additionalRightSpace,
+        enableTaskGrouping,
+        rowIndexToTasksMap,
         checkIsHoliday,
         childOutOfParentWarnings,
         childTasksMap,
@@ -12990,6 +13062,7 @@
       TaskListHeader,
       TaskListTable,
       enableTaskGrouping,
+      rowIndexToTasksMap,
       canMoveTasks,
       canResizeColumns,
       childTasksMap,