CyLeaflet: Provide way of updating Dash Cytoscape elements via callback

[emilykl]

Description

To display Cytoscape elements in the correct location on the map, CyLeaflet applies a transform which turns each node's lat and lon given in the node data into appropriate x and y coordinates.

This transform is triggered by assigning elements to the "elements" dcc.Store which is part of CyLeaflet; this store acts as the input to a callback which applies the transform, then outputs the transformed elements to Cytoscape. These steps are performed automatically when a new CyLeaflet instance is created.

This design means that using a callback to directly update the elements of the Dash Cytoscape component doesn't work as expected; nodes are not displayed at the correct location because they are never assigned x and y coordinates because the transform is not applied.

Instead, the user has two options for successfully updating the elements in a CyLeaflet graph via callback:

1. Create and output a new CyLeaflet instance

   • Pros: Works; easy to understand at first glance
   • Cons: Not a typical Dash pattern; adds a lot of complexity if the values of the other properties need to be maintained (would have to accept the current Cytoscape and Leaflet objects as State inputs)

2. Output to the elements dcc.Store

   • Pros: Doesn't require generating a new CyLeaflet instance
   • Cons: Confusing pattern; no way to know what ID to output to without reading the docs very closely

Proposed solution

We could enable outputting directly to the Cytoscape elements instance by calling the transformation code directly from within Cytoscape.js.

Pros: Outputting to Cytoscape elements would "just work" for CyLeaflet.
Cons: Would involve adding references to CyLeaflet in Cytoscape.js, which we may not want to do