Diagram rebinding lead to threading issue

[Seetha]

Dear Team,

Background: SFDiagram control used in the child component. It used to be bound based on the parent component cascading parameter. The first parent component request it took 5secs to bind(It's completely fine as it has some volume of data(approx. 150+ nodes) but in the 2nd parent request for the same dataset/cascading parameter it took 3mintues to create connectors without nodes and errored out as threading issue. There is no change in code/logic for first and 2nd parent request. I've attached the error screen shot for reference. 

Would you please assist me on this?. Thx.

The detailed exception as follows

Exception:

Failed to load resource: the server responded with a status of 404 ()

blazor.server.js:1 [2021-02-10T20:06:24.309Z] Information: Normalizing '_blazor' to 'https://localhost:44332/_blazor'.

blazor.server.js:1 [2021-02-10T20:06:24.447Z] Information: WebSocket connected to wss://localhost:44332/_blazor?id=orMy2H7VHJZoBd1htVEqwQ.

matBlazor.js:1 MatSelect.init Object

blazor.server.js:19 [2021-02-10T20:10:25.324Z] Error: System.Threading.Tasks.TaskCanceledException: A task was canceled.

   at Microsoft.JSInterop.JSRuntime.InvokeWithDefaultCancellation[T](String identifier, Object[] args)

   at Syncfusion.Blazor.Diagrams.SfDiagram.UpdateDiagramObjects(Boolean IsAdding, Object[] methodParam)

   at Syncfusion.Blazor.Diagrams.SfDiagram.UpdateCollection[T,R](T obj, R parent, Boolean isRemove)

   at System.Threading.Tasks.Task.<>c.<ThrowAsync>b__139_0(Object state)

   at Microsoft.AspNetCore.Components.Rendering.RendererSynchronizationContext.ExecuteSynchronously(TaskCompletionSource`1 completion, SendOrPostCallback d, Object state)

   at Microsoft.AspNetCore.Components.Rendering.RendererSynchronizationContext.<>c.<.cctor>b__23_0(Object state)

   at System.Threading.ExecutionContext.RunInternal(ExecutionContext executionContext, ContextCallback callback, Object state)

--- End of stack trace from previous location where exception was thrown ---

   at System.Threading.ExecutionContext.Run(ExecutionContext executionContext, ContextCallback callback, Object state)

   at Microsoft.AspNetCore.Components.Rendering.RendererSynchronizationContext.ExecuteBackground(WorkItem item)

e.log @ blazor.server.js:19

blazor.server.js:1 [2021-02-10T20:10:25.346Z] Information: Connection disconnected.

blazor.server.js:1 Uncaught (in promise) Error: Cannot send data if the connection is not in the 'Connected' State.

    at e.send (blazor.server.js:1)

    at e.sendMessage (blazor.server.js:1)

    at e.sendWithProtocol (blazor.server.js:1)

    at e.send (blazor.server.js:1)

    at Object.beginInvokeDotNetFromJS (blazor.server.js:8)

    at c (blazor.server.js:8)

    at e.invokeMethodAsync (blazor.server.js:8)

    at syncfusion-blazor.min.js:1

blazor.server.js:1 Uncaught (in promise) Error: Cannot send data if the connection is not in the 'Connected' State.

    at e.send (blazor.server.js:1)

    at e.sendMessage (blazor.server.js:1)

    at e.sendWithProtocol (blazor.server.js:1)

    at e.send (blazor.server.js:1)

    at Object.beginInvokeDotNetFromJS (blazor.server.js:8)

    at c (blazor.server.js:8)

    at e.invokeMethodAsync (blazor.server.js:8)

    at syncfusion-blazor.min.js:1

    at u (syncfusion-blazor.min.js:1)

    at Generator._invoke (syncfusion-blazor.min.js:1)

roboto.css:1 Failed to load resource: the server responded with a status of 404 ()

DevTools failed to load SourceMap: Could not load content for https://localhost:44332/_content/BlazorBoilerplate.Theme.Material.Demo/javascript/signalr.min.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE

blazor.server.js:1 Uncaught (in promise) Error: Cannot send data if the connection is not in the 'Connected' State.

    at e.send (blazor.server.js:1)

    at e.sendMessage (blazor.server.js:1)

    at e.sendWithProtocol (blazor.server.js:1)

    at e.send (blazor.server.js:1)

    at Object.beginInvokeDotNetFromJS (blazor.server.js:8)

    at c (blazor.server.js:8)

    at e.invokeMethodAsync (blazor.server.js:8)

    at syncfusion-blazor.min.js:1

    at u (syncfusion-blazor.min.js:1)

    at Generator._invoke (syncfusion-blazor.min.js:1)

Attachment: DiagramThreadingerrorissue_658abfea.zip

[Gowtham Gunashekar]

Hi Seetha,  

 

We are validating your requirement and update you with more details on 15^th February 2021. 

 

Regards, 

Gowtham 

 

[Seetha]

Hi Gowtham, Just an additional note, Apparently the memory has not released even after does Clear() on diagram object and observable collection objects.

 

Version used: 18.3.0.47, soon plan to upgrade to 18.4.

Could I've some suggestion on this request?. Thanks in advance.

Many thanks

Seetha.

[Senthil Kumar Venkatesan]

Hi Seetha , 

Please find the response below , 

  

 

SFDiagram control used in the child component. It used to be bound based on the parent component cascading parameter. The first parent component request it took 5secs to bind(It's completely fine as it has some volume of data(approx. 150+ nodes) but in the 2nd parent request for the same dataset/cascading parameter it took 3mintues to create connectors without nodes and errored out as threading issue. There is no change in code/logic for first and 2nd parent request. I've attached the error screen shot for reference.

We checked your attachment files , and tried to make sample like the same . But in our sample we didn’t find any issue as mentioned . Can you please share the runnable application so that it will easy for us to proceed further . Please find the sample which we checked for your further reference .   Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorApp1_(1)264860946.zip

Apparently the memory has not released even after does Clear() on diagram object and observable collection objects.

Can you please share the code snippet you are using while clearing , so that we can validate it from our end

  

  

Regards, 

Senthil Kumar V 

[Seetha]

Hi Senthil,

Thanks for looking into this issue.

Please have a look on the below url and follow the steps to experience the issue

1) https://efiq.4technology.net/Stock/StockEnquiry

2) provide 20M0404 as a batch number(the data point contains zeros and not a letter 'o' )and  and hit search button

3) Once you see the diagram bound successfully, hit the search button again with the same batch number that lead to memory issue

Snippet for clearing the diagram object/collection object from the codebase:

StockDiagramHistory.razor file

------------------------------------------

    -->  public void Refresh(List cpDataset)

                   --> Diagram.Clear(); 

   --> void ConstructDiagramModel()

                    NodeCollection.Clear();

                   ConnectorCollection.Clear();

------------------------------------

  void ConstructDiagramModel()

    {

        NodeCollection.Clear();

        ConnectorCollection.Clear();

        try

        {

            GenerateNodes();

            GenerateConnectors();

        }

        catch (Exception e)

        {

            logger.LogError("StockDiagramHistory:ConstructDiagramModel()", e);

            //toaster.Add(e.Message, MatToastType.Danger, "Message");

        }

    }

    public void Refresh(List cpDataset)

    {

        if (enableSubSeqRender)

        {

            Diagram.Clear();

            CPDataset = cpDataset;

            if (CPDataset != null)

                ConstructDiagramModel();

            Diagram.DoLayout();

        }

        if (!enableSubSeqRender)

            enableSubSeqRender = true;

        }

Many thanks

Seetha.

[Gowtham Gunashekar]

Hi Seetha, 

  

We are unable able to open the shared link form our side. We could not able to run the sample with the code snippet provided. However, on further analysis of the share code snippet, we suspect, you tried to render the new diagram after destroying the existing diagram. For that, you need to call “Diagram.Clear()” API and you should not clear the nodes and connector collections again because the “Clear” API does the same and need not to do again.  

  

If the issue still persist, we request you to share the runnable hosted link or share a runnable standalone sample to replicate the reported issue, that would be help us to proceed further. 

  

Code snippet: 

void ConstructDiagramModel() 

    { 

// remove this lines 

       //   NodeCollection.Clear(); 

        //ConnectorCollection.Clear(); 

 

        try 

        { 

            GenerateNodes(); 

            GenerateConnectors(); 

        } 

        catch (Exception e) 

        { 

            logger.LogError("StockDiagramHistory:ConstructDiagramModel()", e); 

            //toaster.Add(e.Message, MatToastType.Danger, "Message"); 

        } 

    } 

 

 

    public void Refresh(List cpDataset) 

    { 

        if (enableSubSeqRender) 

        { 

            Diagram.Clear(); 

            CPDataset = cpDataset; 

            if (CPDataset != null) 

                ConstructDiagramModel(); 

 

            Diagram.DoLayout(); 

        } 

 

        if (!enableSubSeqRender) 

            enableSubSeqRender = true; 

        } 

 

 

Regards, 

Gowtham 

 

[Seetha]

Hi Gowtham,

I removed the following lines but still no luck. The sample which SF provided on top of that just I added search button and text box in the parent component to mimic the current issue which we are facing. 

Please enter 150 and hit search and once all 150 nodes are bounded on the diagram then try now with160 and hit search again. 

// remove this lines 

       //   NodeCollection.Clear(); 

        //ConnectorCollection.Clear(); 

Just a observation:

I could see all the existing objects(Diagram.nodes, Diagram.connectors and Datacontainer) count as it is even after ran Diagram.Clear() method. I attached screen shot for that as well.

Many thanks

Seetha.

Attachment: BlazorApp1_(1)264860946_f9dd0f91.zip

[Gowtham Gunashekar]

Hi Seetha,  

 

we are validating the your requirement and update you with more details on 22^nd February 2021. 

 

Regards, 

Gowtham 

[Gowtham Gunashekar]

Hi Seetha, 

 

Sorry for the inconvenience caused, we have added the modified shared sample link and added the video demonstration. On our further analysis, you have set the nodcollection and connectorCollection as the references to the diagram’s nodes and connectors, so we need to clear the nodeCollection and connectorCollection along with “diagram.Clear()” API, we have made the suggested changes in the shared sample link. 

 

Sample link: https://www.syncfusion.com/downloads/support/forum/162460/ze/Sample1666953699 

Video link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorApp1-1600138970.zip 

 

Regards, 

Gowtham