Cycle during synchronous computation error

[golu@bryntum.com]

Hi,

We are getting error Cycle during synchronous computation while loading data second time on the gantt.

We are using task, resource and assignment stores in our gantt and loading the data asynchronously, and the data is loaded for the first time, but when we load the data again, we are getting an error. We have checked this issue little bit, and found that removing all the records from resourceStore(by calling resourceStore.removeAll()) before loading data again fix this issue.

I am also able to reproduce this issue in the example
https://bryntum.com/products/gantt/examples/basic/

Have provided the code below, please check and run that in the example, also attached a screenshot for error.
I would think this is a bug, so please check it. thanks

import { Gantt, StringHelper, TaskStore, ProjectModel, ResourceAssignmentColumn, ColumnStore } from '../../build/gantt.module.js?478335';
import shared from '../_shared/shared.module.js?478335';

const resources = [
      {
        "id"       : 1,
        "name"     : "Celia",
        "city"     : "Barcelona",
        "calendar" : null,
        "image"    : "celia.jpg"
      }
    ];
const taskData = [
      {
        "id"          : 1000,
        "name"        : "Launch SaaS Product",
        "percentDone" : 34,
        "startDate"   : "2019-01-14",
        "endDate"     : "2019-03-20",
        "duration"    : 47,
        "expanded": false,
        "complexity"  : 3,
        "children"    : []
      }
    ];

const assignmentData = [
      {
        "id"       : 1,
        "event"    : 11,
        "resource" : 1
      }
    ];


class GNT_TaskStore extends TaskStore {
	static get type() {
		return 'gnt_taskstore';
	}

static get configurable() {
	return {
		transformFlatData: true
	};
}
}

GNT_TaskStore.initClass();

class GNT_ResourceAssignmentColumn extends ResourceAssignmentColumn {
	static get $name() {
		return 'GNT_ResourceAssignmentColumn';
	}

static get type() {
	return 'gnt_resourceassignment';
}
}


ColumnStore.registerColumnType(GNT_ResourceAssignmentColumn);

const project = new ProjectModel({
    taskStoreClass: GNT_TaskStore
})

const gantt = new Gantt({
    appendTo          : 'container',
    dependencyIdField : 'sequenceNumber',
    rowHeight         : 45,
    tickSize          : 45,
    barMargin         : 8,
    project,
    


columns : [
    { type : 'name', width : 250 },
    { type : 'startdate' },
    { type : 'enddate' },
    { type : 'gnt_resourceassignment' },
],

// Custom task content, display task name on child tasks
taskRenderer({ taskRecord }) {
    if (taskRecord.isLeaf && !taskRecord.isMilestone) {
        return StringHelper.encodeHtml(taskRecord.name);
    }
},

tbar : {
        items : [
            {
               type       : 'button',
                text       : 'Load Data',
                async onAction() {
				// Uncommenting this will fix the issue 
		            //gantt.project.resourceStore.removeAll();

		            gantt.project.set({ calendar: null });
                    try{
                    await Promise.all([
                        gantt.project.taskStore.loadDataAsync(taskData),
                        gantt.project.assignmentStore.loadDataAsync(assignmentData),         
			            gantt.project.resourceStore.loadDataAsync(resources)
                    ])
                    }catch(error){
                        console.log(error);
                    }

                    gantt.project.set(project.project);
                } 
            }
        ]
}
});
project.load();

[nickolay]

Thank you for the report, we'll investigate it soon.

[nickolay]

In the meantime, as an immediate workaround, you can use this code for loading data:

                async onAction() {
                    gantt.project.set({ calendar : null });
                    
                    gantt.project.taskStore.data = taskData;
                    gantt.project.assignmentStore.data = assignmentData;
                    gantt.project.resourceStore.data = resources;

                    gantt.project.commitAsync();
                }

loadDataAsync just loads the data into the store (store.data = data) and performs commit (project.commitAsync()). Previous code was loading new data during the commit process, which caused the problem.

Also, this line gantt.project.set(project.project); is unnecessary (not clear what it supposed to do).

[nickolay]

Created a ticket to track the progress on this issue: https://github.com/bryntum/support/issues/9741

[golu@bryntum.com]

Hi, thanks for looking into this and providing workaround.

[nickolay]

Yw! This should be resolved for 6.0.5. In general, this un-synchronized data loading into inidividual stores might be bad for performance (can cause rendering flickering for example). We would recommend to combine all data sources into one package and load it at once, for example with: https://bryntum.com/products/gantt/docs/api/Gantt/model/ProjectModel#function-loadInlineData