Hi,
We're having this bug the gantt suddenly start to slowdown and by adding a lister on catchAll, we can see that this is called infinitely when we make a change. When I open the task edit dialog and close it or drag a new block, the loop start. I think this related to this other issue that we saw.
The issue happen when we display the early date column (or any others) and our startDate & endDate are null. If I either put dates or remove the column from my config, the infinite loop does not happen. My guess is that it tried to recalculate these fields and fail to do so in the same manner describe in the other issue.
I modified the react/typescript/basic example with the code below. I just added the columns to the config, moved the project config to the App.tsx file and assigned basic data through inlineData
// AppConfig.ts
/**
* Application configuration
*/
import { GanttConfig } from '@bryntum/gantt/gantt.umd.js';
const ganttConfig: Partial<GanttConfig> = {
columns: [
{ type: 'name', field: 'name', width: 250 },
{ type: 'earlystartdate' },
{ type: 'earlyenddate' },
{ type: 'latestartdate' },
{ type: 'lateenddate' },
{ type: 'totalslack' },
],
viewPreset: 'weekAndDayLetter',
barMargin: 10
};
export { ganttConfig };
// App.tsx
/**
* Main Application script
*/
// Polyfills for Edge <= 18. Remove this line if you don't need support for it.
import 'core-js/stable';
import React, { Fragment, FunctionComponent, useEffect, useRef } from 'react';
import { BryntumDemoHeader, BryntumThemeCombo, BryntumGantt } from '@bryntum/gantt-react';
import { ganttConfig } from './AppConfig';
import './App.scss';
import { Gantt, ProjectModel } from '@bryntum/gantt/gantt.umd.js';
export const projectModel = new ProjectModel({
// This config enables responses validation and dumping of found errors to the browser console.
// It's meant to be used as a development stage helper only so please set it to false for production systems.
validateResponse: true,
});
const App: FunctionComponent = () => {
const ganttRef = useRef<{ instance: Gantt }>();
useEffect(() => {
projectModel.id = '9uow1wzae4knvnyv4c91y';
projectModel.on({
catchAll: (e: any) => {
if (e.type !== 'nochanges') {
console.log(e)
}
}
})
const eventsData2 = [{
id: 1,
name: 'Parent task 1',
startDate: null,
endDate: null,
children: [{
id: 2,
name: 'Child task 1',
startDate: null,
endDate: null,
}, {
id: 3,
name: 'Child task 2',
startDate: null,
endDate: null,
}, {
id: 4,
name: 'Child task 3',
startDate: null,
endDate: null,
}]
}]
const inlineData = {
eventsData: eventsData2,
};
projectModel.inlineData = inlineData;
});
return (
<Fragment>
<BryntumDemoHeader
title="React Basic demo with TypeScript"
href="../../../../../#example-frameworks-react-typescript-basic"
children={<BryntumThemeCombo />}
/>
<BryntumGantt {...ganttConfig} project={projectModel} ref={ganttRef} />
</Fragment>
);
};
export default App;