Task.$source and task.$target BUG!

I am building a gantt which data is loaded on demand (when the user clicks the + icon new data comes from the backend).

If i have dependency between tasks which have different parent tasks there is something strange about how task.$source and/or task.$target work.

Here is the scenario:

Parent_Task_1 ->parent_task_1_SUB_TASK
Parent_Task_2 -> parent_task_2_SUB_TASK

So there is a LINK between parent_task_1_SUB_TASK and parent_task_2_SUB_TASK

When i click the Parent_Task_1 (+) button and the data is loaded from the backend parent_task_1_SUB_TASK.$source.length and/or …$target.length is greater than zero

Then
when i click the Parent_Task_2 (+) button and the data is loaded from the backend parent_task_2_SUB_TASK.$source.length and/or …$target.length is greater than zero

But then
if call parent_task_1_SUB_TASK.$source.length and/or …$target.length the length is ZERO!??

Any solution to this problem?

P.S.
I use this code inside gantt.addTaskLayer function.

Hello Nikolai,
Unfortunately, it is not clear for me how to reproduce it or I couldn’t reproduce it according to your steps.
Please reproduce that issue in a snippet and send me a link or send me your gantt config. I will add that to a backend project and try to reproduce the issue there.
You can also try to reproduce it in the following sample:
https://docs.dhtmlx.com/gantt/samples/02_extensions/06_dynamic_loading.html

Until i am ready with snippet here is the code that brings the problem:

gantt.addTaskLayer(function (task) {
    var sourceLinksCount = task.$source.length;
    var targetLinksCount = task.$target.length;
    var linksCount = sourceLinksCount + targetLinksCount;
    if (linksCount > 0) {
        var el = document.createElement('div');
        el.className = 'dependency-icon';
        var sizes = gantt.getTaskPosition(task, task.start_date);

        el.style.left = 2 + 'px';
        el.style.top = sizes.top + 'px';

        el.setAttribute('title', `Connected links: ${linksCount}`);

        var el2 = document.createElement("div");
        el2.className = "dependency-icon-badge";
        el2.innerHTML = linksCount;

        el.appendChild(el2);

        return el;
    }

    return false;
});

if linksCount > 0 there should be displayed an icon. It works like a charm.

BUT! When the dependencies are located in different level of the tree hyerachy and on demand loading is enabled
when the task_1 (which is connected to task_2) is loaded the icon is displayed because linksCount > 0. Then when the task_2 (which is connected to task_1) data is loaded the icon is displayed because linksCount>0 BUT the icon on the task_1 layer disappers because this time the function is called it says that task_1 has no dependencies (linksCount == 0) this time.

So until the task_2 data is loaded each time the function is called the linkCount > 0.

Let me know if i should create a snippet.

Hello Nikolai,
Unfortunately, I couldn’t reproduce it with your code.
You can try reproducing it in a snippet or give me the code that I can apply in the following example with the branch ordering:
https://docs.dhtmlx.com/gantt/samples/02_extensions/06_dynamic_loading.html
Here is an example of the code that I applied in the sample:

    
var sheet = document.createElement('style')
sheet.innerHTML = ".layer {  	position : absolute;	border-radius: 2px;	height: 20px;  	width: 60px;	background: rgba(200,209,72,0.4);	border: 1px solid rgba(200,209,72,0.4);  	margin-top:6;  	z-index: 2;  }";	document.body.appendChild(sheet);



gantt.addTaskLayer(function (task) {
    var sourceLinksCount = task.$source.length;
    var targetLinksCount = task.$target.length;
    var linksCount = sourceLinksCount + targetLinksCount;
    if (linksCount > 0) {
        var el = document.createElement('div');
        el.className = 'layer task_id='+task.id+'';
        var sizes = gantt.getTaskPosition(task, task.start_date);

        el.style.left = 2 + 'px';
        el.style.top = sizes.top + 'px';

        el.setAttribute('title', `Connected links: ${linksCount}`);

        var el2 = document.createElement("div");
        el2.className = "dependency-icon-badge";
        el2.innerHTML = linksCount;

        el.appendChild(el2);

        return el;
    }

    return false;
});

gantt.render()

10x ramil. I investigated the network data on the example you gave and the one on the project i work on and found out that one of the task has both source and target dependency so there are two links with the same ID. Maybe this is the reason why it doesnt work as expected so i will tell the backend guys to fix it and try again.

Here is a screenshot demonstrating what i mean

Hello Nikolai,
That is strange that it happened. But when the links have the same IDs, only the last link becomes available.
Could you clarify if you imported any data from an MPP file? We had a bug that caused links and tasks IDs duplication. Fortunately, the bug is fixed.
Another way how it might happen is when you create many links using gantt.addLink() method. By default, the link gets +new Date() as the ID, but it might happen that several links were created at the same second. So you can add a random number to avoid that issue, for example:

gantt.addLink({
	id: +new Date()+'+'+Math.floor(Math.random() * 10),source:task.id,target:next_sibling,type:0
})

I have no idea how the data is created because the gantt i build doesnt allow to create new tasks (there is a different interface fot that) but only to assign dependencies and their ids are created on the backend. I am almost 100% sure that it is a backend issue and not a bug inside the gantt api.