Selected Nodes stays in selectedNodeData permanently after being deleted

[vivekvs1]

Hi,

When I try to update the selected nodes using a callback to modify either 'selectedNodeData' or 'tapNode' or 'tapNodeData' is not reflecting on the front-end. i.e. the selection highlight is not changing automatically.

Thanks,
Vivek

[vivekvs1]

To explain this further, when I programatically delete an element from the elements list (i.e.e select node and click 'button' to delete, and also try to clear the selection from 'selectedNodeData' or 'tapNode' or 'tapNodeData', the deleted node permanently appears in the 'selectedNodeData' - I am unable to remove it.

[xhluca]

Could you share a minimal reproducible Dash app with the error?

[vivekvs1]

Let me try. I am struggling to create examples, as there are so many functions that together result in this. In the meanwhile, would it work if I invite you temporarily to my private repository?

Thanks.
Vivek

[xhluca]

Don't worry, take your time! I think it's better if you create a barebone, simple reproducible app, and share it here. That way, it makes it easier for us to debug (faster than taking the time to understand your entire workflow), and we don't need to look at your private data.

Furthermore, creating a reproducible example might help you debug your code, if the problem happens in the implementation side. Also, people who will have a similar problem will be able to find the solution directly in this issue, which saves them time in the future.

[vivekvs1]

I see- that's fair. Let me try to get a simple working example.

[xhluca]

When I try to update the selected nodes using a callback to modify either 'selectedNodeData' or 'tapNode' or 'tapNodeData' is not reflecting on the front-end. i.e. the selection highlight is not changing automatically.

@vivekvs1 I didn't register this part when I first read your issue. It is not possible to modify "selectedNodeData" (or any other event prop) using Dash callbacks.

[vivekvs1]

Oh I see. Then how do I change the selection programatically? One way I did was to modify the elements list to make the node I want to be "selected":True. However, in my case, I want to be able to 'select' the node and use a pushbutton for deleting the node. In this case, I wont be able to pass 'selected:'False before removing the element from list - if you know what I mean. Because of this, 'selectedNodeData' has permanant memory of the deleted element, even thought that was removed from the elements list.

[xhluca]

This behavior is definitely not intended, but it will likely take a lot of work to modify the React wrapper (Cytoscape.react.js) in order to account for deleted nodes. I'll add this as an objective for v0.1.1, but it might take more time to get fixed depending on its difficulty.

If you would like to try this out, feel free to take a look at how the Cytoscape wrapper works (src/lib/components/Cytoscape.react.js), and modify it. If that interests you, please get started by looking at CONTRIBUTING.md. When you feel ready, you can submit a PR.

[vivekvs1]

I see- thank you. Sure- I'll take a look. I don't know if I am qualified enough- but I would like to try and take a shot at it!

Thanks @xhlulu !!

As an alternative, if you can think of any other creative alternative, please share. Thanks!

[xhluca]

As a workaround, have you tried using two buttons; one to store all the selected nodes in a hidden html.Div, and unselect all the nodes. and a second one that deletes the nodes?

[xhluca]

If you provide an example it would be very easy for me to test out this solution.

[vivekvs1]

Yes- I will on Monday. Sorry- my current code atm is pretty complex due to other dependencies - I shall simplify before sharing. But I'll do so asap.

I actually think that your solution might work. So I can use a combination of tapNodeData and delete pushbutton, and remove the use of the selectedNodeData completely.

[vivekvs1]

No - nevermind. Maybe it won't work - now that I think deeper. I'll share my use case soon to make my point more clear. Thanks.

[vivekvs1]

For now let me share the gif of what I am experiencing to give a better picture:

I depend on the selectedNodeData list to see if any node is selected. If no node is selected, I want to display an empty screen like shown in the gif. As you can see, once I delete the node, it retains it in memory and unhides the context Div for the 'deleted' component, when no component is selected.

In my case, even if I keep a track of selected node, since there is no trigger for unselecting using 'tapNode' or 'tapNodeData', I wont be able to make it work- atleast that's my thinking at the moment.

[xhluca]

What if you store the list of deleted nodes in a hidden html.Div, and trim the selectedNodeData list every time you need to use it by removing all the deleted nodes? e.g.

@app.callback(Output(...),
    [Input('deleted-node-div', 'value'),
     Input('cytoscape', 'selectedNodeData')]
)
def func(deleted_nodes, selectedNodeData):
    for key in selectedNodeData:
        if key in deleted_nodes:
            selectedNodeData.pop(key)

Obviously a pseudocode, but it could be a quick fix for your situation

[xhluca]

If this workaround solves your problem, please do not close this issue. The team will close this when the actual problem has been fixed.

[vivekvs1]

Oh you mean like a second hidden div for selectedNodeData? Cool- that might work. If selectedNodeData was editable, I was intending to manually flush the nodes in limbo.

Thanks very much @xhlulu . Yes I shall not close the thread and keep an eye on this issue.

[xhluca]

Thank you. In the meantime feel free to share a reproduceable example if you have the time.

[xhluca]

I was able to reproduce your error. I was able to fix it by tweaking the source code. Here's the branch where I brought the changes: https://github.com/plotly/dash-cytoscape/tree/element-removal

I added an example app here. Here's what it looks like:

[xhluca]

please look at the contributing.md file to see how to use the package locally

[vivekvs1]

Wow great! I still haven't managed to figure out to use the packages locally- I really also want to trial out the extra layout options. Maybe I'll sit through it today and see.