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:
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)
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
Description
To display Cytoscape elements in the correct location on the map, CyLeaflet applies a transform which turns each node's
latandlongiven in the node data into appropriatexandycoordinates.This transform is triggered by assigning elements to the "elements"
dcc.Storewhich 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
elementsof the Dash Cytoscape component doesn't work as expected; nodes are not displayed at the correct location because they are never assignedxandycoordinates because the transform is not applied.Instead, the user has two options for successfully updating the elements in a CyLeaflet graph via callback:
Create and output a new CyLeaflet instance
Stateinputs)Output to the
elementsdcc.StoreProposed solution
We could enable outputting directly to the Cytoscape
elementsinstance by calling the transformation code directly from within Cytoscape.js.Pros: Outputting to Cytoscape
elementswould "just work" for CyLeaflet. Cons: Would involve adding references to CyLeaflet in Cytoscape.js, which we may not want to do