Add CyLeaflet AIO component - #200
Conversation
…into leaflet-aio
…into leaflet-aio
| window.dash_clientside = {}; | ||
| } | ||
|
|
||
| window.dash_clientside.cyleaflet_utils = { |
There was a problem hiding this comment.
Nonblocking, but do these utils need to be exposed to the end user or do they just get used inside dash_clientside.cyleaflet? If the latter, they could just be local functions in this file (and transformElements could be inlined in dash_clientside.cyleaflet)
There was a problem hiding this comment.
Good point -- changed all of these to local variables.
| @@ -0,0 +1,88 @@ | |||
| import proj4 from 'proj4' | |||
There was a problem hiding this comment.
I'm a little concerned about pulling in this whole package (the minified bundle is 86k if I download it by itself and its architecture doesn't look amenable to tree shaking) just to get one presumably very simple pair of converters. We can move forward now but let's investigate whether there's a simpler way to do this in the future.
| // Note: proj4.js is imported as an part of `external_scripts` | ||
| // in demos/usage-cy-leaflet-aio-ekl.py |
There was a problem hiding this comment.
| // Note: proj4.js is imported as an part of `external_scripts` | |
| // in demos/usage-cy-leaflet-aio-ekl.py |
No longer the case, right?
alexcjohnson
left a comment
alexcjohnson
left a comment
There was a problem hiding this comment.
💃 A couple of small comments but I think this is good to merge, nice work!
…into leaflet-aio
| this.cyResponsiveClass = new CyResponsive(cy); | ||
| this.cyResponsiveClass.toggle(this.props.responsive); |
There was a problem hiding this comment.
| window.dash_clientside.cyleaflet_utils = { | ||
| }; | ||
|
|
There was a problem hiding this comment.
| window.dash_clientside.cyleaflet_utils = { | |
| }; |
No longer needed, right?
Co-authored-by: Alex Johnson <johnson.alex.c@gmail.com>
…into leaflet-aio
3 participants
About
This PR adds a demo for the Cytoscape-Leaflet all-in-one component.
This AIO consists on a cytoscape graph displayed on top of a Leaflet map. Every movement (pan or zoom) on the cytoscape graph will update the map to move accordingly. All the logic for this to happen is in the file
demos/assets/cyleaflet_clientside.js.The coordinate conversion module
proj4jsis used to handle the dragging offset when the map is moved with a cytoscape object superimposed.A demo of this component can be found in
demos/usage_cy_leaflet_aio.py.Pre-Merge checklist
npm run build:all.