Deleting a node + attached connector does not remove connector from InEdges[]

[Mithun]

Hello Syncfusion team,

I'm using the version of 19.3.55 the diagram control in my angular app.

I'm seeing that occasionally when I delete a node + its attached connector, the connector is still referenced in some InEdges[].

Repro step (please see attached gif file).

1. Select node (which has an attached connector with ID ​ePgHhrhFli).
2. Press delete button.
3. Both node and connector get deleted.
4. However, the connector with ID ePgHhrhFli is not fully deleted from all InEdges[].

The attachment has 3 files:

1. Gif video recording
   
2. The diagram json BEFORE the node + connector were deleted.
3. The diagram json AFTER the node + connector were deleted.

Please let me know if any additional information is needed to troubleshoot this issue.

Thanks,

-Mithun

Attachment: connectorinedges_608130f8.zip

[Aravind Ravi]

Hi Mithun, 

On our further analysis of the provided JSON, we found that you have set the same connector ID ePgHhrhFli for the two connectors in the diagram. For one connector you set the ID as ePgHhrhFli, sourceID as rectangle-1576486961504 and targetID as oHegg and for another connector you set same ID as ePgHhrhFli, sourceID as rectangle-1576486961504 and targetID as rectangle-1576486961504srNCd. You have used same ID for two connectors, so that while delete the connector ePgHhrhFli, the inEdges and outEdges get cleared in the source and target node i.e. in the rectangle-1576486961504, oHegg node only inEdges and outEdges get cleared.  By default , in the diagram, for node and connector should be start with alphabet followed with number or special characters. Connector/Node id should not be start with number or any special characters. In the diagram node & connector ID should be unique. Do not use the same Id for the multiple nodes or connectors.  

Regards 

Aravind Ravi 

[Mithun]

Thanks Aravind for investigating this. Highly appreciated.

AFAIk, the ePgHhrhFli connector ID was not set by my app, but by the syncfusion diagram component. 

So am still a bit puzzled about how the duplicate IDs got generated.

Thanks,

-Mithun

[Aravind Ravi]

Hi Mithun, 

When we created a connector in the diagram at initial rendering or at run time we have added randomId for the connector if there is no ID for the connector. We have tried to create connectors at run time and on initial rendering, we found that there is no two or three connectors with same ID. We do not able to reproduce the reported issue at our end. So could you please confirm us  Whether you add connector on initial rendering or you add at run time by using button click or using port draw. Please share us a video demonstration of your requirement or simple sample illustrating issue with issue replication steps. This would help us to serve you better.  

Regards 

Aravind Ravi 

[Mithun]

Hi Aravind, I've managed to reproduce the issue with Syncfusion's own diagram builder app.

Please see attached video.

At the end of the video, even though there are no connectors in the diagram, the rectangle's inedges still has reference to a connector ID.

This looks like a bug in the syncfusion diagram component.

Please let me know if any additional details are needed from my side to investigate this.

Thanks,

-Mithun

Notes

1: The repro is not 100% guaranteed, but it happens very frequently.

2: A lot of my app's users are hitting this issue frequently (the "ghost" connector in the InEdges leads to further browser exceptions while dragging/resizing etc).

3: Related forum threads: 161013

Attachment: inedge_c3fdeaf5.zip

[Aravind Ravi]

Hi Mithun, 

We are validating your requirements and update you with more details on December 22^nd 2021. 

Regards 

Aravind Ravi 

[Aravind Ravi]

Hi Mithun, 

We are able to reproduce the reported issue at our end. We are validating the issue and update you with more details within two business days on December 28^th 2021 

Regards 

Aravind Ravi 

[Sivakumar Sekar]

Hi Mithun 

Reported Issue: Node inEdges not updated properly after draw connector from port 

We can reproduce the issue and confirmed this as a defect. We have logged a defect report for this issue. We will fix this issue and provide the patch on 19^th January,2022 weekly patch release.    

     

Regards, 

Sivakumar 

[Mithun]

Thanks Sivakumar, noted!

[Sivakumar Sekar]

Hi Mithun, 

 

Thanks for your update 

 

Regards,  

Sivakumar  

[Aravind Ravi]

Hi Mithun, 

Sorry for the inconvenience caused. On the further analysis of the shared sample, the reported issue can be fixed in sample side itself. When we add any new node or connectors in the diagram, the collectionChange event gets triggered. In that event we can able to remove the unwanted inEdges for the node. After you add the connector in the diagram, the event gets triggered. In that event, check if the diagram node has same inEdges or not. If it has means then check whether the node inEdges and  connector target ID is same or not. If it is not same means then remove that connector from the node inEdges collection. Please refer to the below code snippet and sample 

public collectionChange(args: ICollectionChangeEventArgs) { 

    if ( 

      args.state === 'Changed' && 

      args.type === 'Addition' && 

      args.element instanceof Connector 

    ) { 

      let obj: ConnectorModel = args.element; 

      let nodes: NodeModel[] = this.diagram.nodes.filter( 

        (node) => (node as Node).inEdges && (node as Node).inEdges.length > 0 

      ); 

      for (let i: number = 0; i < nodes.length; i++) { 

        let node: NodeModel = nodes[i]; 

        for (let j: number = 0; j < (node as Node).inEdges.length; j++) { 

          if ( 

            (node as Node).inEdges[j] === obj.id && 

            obj.targetID !== node.id 

          ) { 

            (node as Node).inEdges.splice(j, 1); 

          } 

        } 

      } 

    } 

  } 

Sample: https://stackblitz.com/edit/angular-r6hus5?file=app.component.ts 

We have attached a video demonstration of how the node inEdges removed and does not contain in multiple connectors.  

Video: https://www.syncfusion.com/downloads/support/forum/171191/ze/InEdges-Video770378931 

Regards 

Aravind Ravi 

[Mithun]

Hi Aravind,

Thanks for the workaround. Am trying it out now.

A quick couple of points:

1. In addition to a node's inEdges, the node's port's inedges also have to be checked (in the collectionChange event handler), right?
2. Checks have to be done for both source and target ends of the connector, right?
   
3. Wouldn't the ​connectionChange, or sourcePointChange / targetPointChange event handlers be better for checking (instead of collectionChange)?
4. Do I have to call DiagramComponent's dataBind() or refresh() methods after removing unwanted connector IDs from the in/out Edges?
   
5. Will this issue be fixed in the Syncfusion DiagramComponent, or should always we use this workaround ?
   

Thanks,

-Mithun

[Mithun]

Hi Aravind,

An update: I implemented a solution very similar to yours and it seems to be working fine in my limited testing.

1. I'm checking both node's inEdges/OutEdges as well as port's inEdges/OutEdges.
2. I'm checking both source and target ends of the connector.
3. I'm doing the checks on the following events: connectionChange, collectionChange, sourcePointChange, targetPointChange
4. I'm calling diagram databind() once the checks are complete and any spurious edges are cleared.

Final question: Will the Syncfusion DiagramComponent be patched/fixed, or should we always use above solution?

Thanks,

-Mithun

[Aravind Ravi]

Hi Mithun, 

Please find the response for queries in the below table 

In addition to a node's inEdges, the node's port's inedges also have to be checked (in the collectionChange event handler), right?	Yes, we have to check the whether the node’s port inEdges has the same connector id or not.
Checks have to be done for both source and target ends of the connector, right?	Yes, we have to check both source and target end of connector. After check the node inEdges you can check the node outEdges and  connector source ID is same or not. If it is not same means then remove that connector from the node outEdges collection
Wouldn't the ​connectionChange, or sourcePointChange / targetPointChange event handlers be better for checking (instead of collectionChange)?	If you create an connector using port draw tool means you can use the collectionChange event. After connector gets added in the diagram and if you try to change its connection means you can use the connectionChange event.
Do I have to call DiagramComponent's dataBind() or refresh() methods after removing unwanted connector IDs from the in/out Edges?	Call the diagram dataBind method after removing the unwanted connector ID from the in/out Edges.
Will the Syncfusion DiagramComponent be patched/fixed, or should we always use above solution?	The reported issue can be fixed in the application level, so we will not include in our source. You can use the above solution in your sample to remove the unwanted connector id in node inEdges.

Regards 

Aravind Ravi