Obtain complete node dictionary programmatically

[anhinga]

This is a feature request. Currently, it is possible to obtain complete node or edge dictionary interactively:

tapNode (dict; optional): The complete node dictionary returned when you tap or click it

It would be nice to be able to also do that programmatically (e.g. if one wants to store new rendered positions for the nodes).

Thanks a lot for Dash Cytoscape!

[anhinga]

(I actually think, it might be enough to provide selectedNode and selectedEdge in addition to selectedNodeData and selectedEdgeData, just like tapNode and tapEdge are provided in addition to tapNodeData and tapEdgeData.

After all, one can always select the whole graph if necessary...

Alternatively, one might just return data describing new positions when a node or a selected group of nodes is dragged. At the moment, the only way to record new positions of the nodes which moved seems to be to tap each one of them separately, that's what I'd like to avoid.)

[clegaspi]

I second this. Being able to retrieve the rendered position of the nodes (particularly for an animated layout) would be highly beneficial for being able to re-render the same graph. Say, if you wanted to use dash-cytoscape to produce a figure for a paper using a force-based layout algorithm and wanted to be able to modify it after having rendered it one way.

Thanks for your work on this package! It's been a great addition to the dash family!

[emilykl]

It would be great to have selectedNode, selectedEdge, mouseoverNode, and mouseoverEdge props to parallel tapNode and tapEdge.

Among other benefits, this would allow users to easily add a dcc.Tooltip to the dash-cytoscape graph using a callback (by accessing the renderedPosition key of mouseoverNode).

Since the equivalent code already exists for tapNode and tapEdge, it seems like this could be done with just a small change to the event handlers, unless there's a blocker I'm not seeing. E.g, for mouseoverNode:

        cy.on('mouseover', 'node', event => {
            const nodeObject = this.generateNode(event);        // added

            if (typeof this.props.setProps === 'function') {
                this.props.setProps({
                    mouseoverNode: nodeObject,                  // added
                    mouseoverNodeData: event.target.data()
                });
            }
        });

It might also be worth adding some sort of clear_on_unhover behavior to mouseoverNode and mouseoverNodeData (to parallel dcc.Graph), which I think could be done by hooking into the mouseout event, although I could imagine some potential complexity in dealing with edge cases.

[gatocor]

Is there any catch up on this topic?

I would be also very interested in such extension.