Hi,
We are dealing with a scenario where we have 5000 tasks in input. The initial execution process runs smoothly and quickly. However, we encounter performance issues post this stage.
export const CustomComponent: FC<CustomComponentProps> = ({ ganttData }) => {
const ganttProjectRef = useRef<BryntumGanttProjectModel>();
const ganttRef = useRef<BryntumGantt>();
// ...
return (
<>
<BryntumGanttProjectModel
ref={ganttProjectRef}
tasks={ganttData.tasks}
dependencies={ganttData.dependencies}
calendars={ganttData.calendars}
resources={ganttData.resources}
assignments={ganttData.resourceAssignments}
/>
<BryntumGantt
ref={ganttRef}
ariaLabel="Gantt View"
listeners={ganttListeners}
project={ganttProjectRef}
{...config}
/>
</>
)
}If we externally manipulate the data in the CustomComponent, say through filtering or grouping, it results in alterations in the task list, causing the Gantt chart to freeze (possibly syncing data?).
We tried a different approach where we recreate the ProjectModel completely, and we decided to step away from the BryntumGanttProjectModel component.
useEffect(() => {
const gantt = ganttRef?.current.instance;
gantt.project = new ProjectModel({
tasks: ganttData.tasks,
dependencies: ganttData.dependencies,
resources: ganttData.resources,
assignments: ganttData.resourceAssignments,
calendars: ganttData.calendars,
});
}, [direction, ganttData]);
}However, a problem arises. When dragging/changing tasks, we sync our store, which leads to recalculating the ganttData.tasks. This, in turn, results in the recreation of the ProjectModel. At this stage, it becomes quite a challenge to differentiate how the ganttData.tasks list has changed, whether from external filtering/grouping or whether it was prompted by a change in the Gantt itself.
We would greatly appreciate it if you could provide any possible resolutions for this issue we're facing. Are there any efficient methods to promptly refresh tasks, potentially bypassing extra synchronization? Thank you for your time and assistance!
,