Bringing Minicharts to dash-leaflet

[RenaudLN]

Just adding a Minichart component which I believe would be a nice addition to dash_leaflet

[emilhe]

Really cool addition! Could you add a small example (in code) demonstrating the usage?

[emilhe]

I just tried it out. It works great! Here is the example i put together,

from dash import Dash, Output, Input, dcc
import dash_leaflet as dl
import random

app = Dash()
app.layout = dl.Map([
    dl.TileLayer(),
    dl.Minichart(lat=56, lon=10, id="minichart"),
    dcc.Interval(id="trigger")
], style={'width': '1000px', 'height': '500px'})

@app.callback(Output("minichart", "data"), Input("trigger", "n_intervals"))
def update_minichart(_):
    return [random.random() for i in range(5)]

if __name__ == '__main__':
    app.run_server()

My only concern so far is that the addition of minicharts increases the bundle size a lot. Hence I think it would need to be loaded async before it can make in into a final release.

[RenaudLN]

Hey, yep good example 🙂 I feared that it would increase the bundle size a bit too much :/ Can you point me to an async loaded component in dash_leaflet or Dash so I can make the changes?

[emilhe]

I haven't started on async loading in Dash leaflet yet, but it is on my TODO list. I'll give it a try and post an example when I get it working.

[emilhe]

I have implemented the async loading logic now. With my current setup, you would need to split the component into two files. One in the components folder (like now) that holds the lazy loading logic and the prop definitions,

https://github.com/thedirtyfew/dash-leaflet/blob/master/src/lib/components/LocateControl.react.js

and one in the fragments folder that holds the implementation (any heavy import must be here),

https://github.com/thedirtyfew/dash-leaflet/blob/master/src/lib/fragments/LocateControl.react.js

Next, add the chunk in __init__.py to make it loads when your component is imported,

https://github.com/thedirtyfew/dash-leaflet/blob/bd8cbf5de06acc7e4016d69164cfea2023cb92d1/dash_leaflet/__init__.py#L43

And finally, add the chunks in MANIFEST.in to include them in the bundle,

https://github.com/thedirtyfew/dash-leaflet/blob/master/MANIFEST.in

[RenaudLN]

Should be working with lazy loading now 🙂

EDIT: I merged master into my branch to get the chunks structure but it looks like something's not right in the diff. Could be because I used rebase?

EDIT2: Should be good now.

[emilhe]

It works perfectly! Thanks for a great PR. I have published a new release (0.1.21) that includes the Minichart component and added an example to the interactive documentation,

http://dash-leaflet.herokuapp.com/#minichart

[RenaudLN]

Woohoo! Thanks :)

FYI, I'm having issues with both versions 0.1.20 and 0.1.21 when I install them with pip. Something about dash-leaflet.dev.js missing?

[emilhe]

That's weird. have installed 0.1.21 my Ubuntu laptop, on Ubuntu via WSL, and on Heroku (for the interactive docs) all without problems.

Collecting dash-leaflet==0.1.21
  Downloading dash_leaflet-0.1.21-py3-none-any.whl (1.9 MB)
     |████████████████████████████████| 1.9 MB 2.8 MB/s            
Collecting geobuf
  Downloading geobuf-1.1.1-py3-none-any.whl (13 kB)
Requirement already satisfied: click in /home/emher/.cache/pypoetry/virtualenvs/gemini-orchestrator-bvFLpSFE-py3.7/lib/python3.7/site-packages (from geobuf->dash-leaflet==0.1.21) (8.0.3)
Requirement already satisfied: six in /home/emher/.cache/pypoetry/virtualenvs/gemini-orchestrator-bvFLpSFE-py3.7/lib/python3.7/site-packages (from geobuf->dash-leaflet==0.1.21) (1.16.0)
Requirement already satisfied: protobuf in /home/emher/.cache/pypoetry/virtualenvs/gemini-orchestrator-bvFLpSFE-py3.7/lib/python3.7/site-packages (from geobuf->dash-leaflet==0.1.21) (3.13.0)
Requirement already satisfied: importlib-metadata in /home/emher/.cache/pypoetry/virtualenvs/gemini-orchestrator-bvFLpSFE-py3.7/lib/python3.7/site-packages (from click->geobuf->dash-leaflet==0.1.21) (4.8.1)
Requirement already satisfied: setuptools in /home/emher/.cache/pypoetry/virtualenvs/gemini-orchestrator-bvFLpSFE-py3.7/lib/python3.7/site-packages (from protobuf->geobuf->dash-leaflet==0.1.21) (58.5.3)
Requirement already satisfied: typing-extensions>=3.6.4 in /home/emher/.cache/pypoetry/virtualenvs/gemini-orchestrator-bvFLpSFE-py3.7/lib/python3.7/site-packages (from importlib-metadata->click->geobuf->dash-leaflet==0.1.21) (3.10.0
.2)
Requirement already satisfied: zipp>=0.5 in /home/emher/.cache/pypoetry/virtualenvs/gemini-orchestrator-bvFLpSFE-py3.7/lib/python3.7/site-packages (from importlib-metadata->click->geobuf->dash-leaflet==0.1.21) (3.6.0)
Installing collected packages: geobuf, dash-leaflet
Successfully installed dash-leaflet-0.1.21 geobuf-1.1.1

What system are you on? Could you post the error you see? Is it a "clean" install or an upgrade of an existing environment?

EDIT: I did change a lot during the async refactor, so it might be an introduced bug. I just haven't noticed it on my system(s).

EDIT2: I might have found the bug. I am testing out a possible fix.

[emilhe]

Please try the 0.1.22 release. I believe it might fix your issue.

[RenaudLN]

Yep it works now!

[alessiodl]

Hi, is this component still available? Running the example I got AttributeError: module 'dash_leaflet' has no attribute 'Minichart'

Thank you!

[emilhe]

No, it is not available in recent versions of dash-leaflet.

[alessiodl]

No, it is not available in recent versions of dash-leaflet.

Thanks for your answer. Is its implementation planned? While it is possible to work around the lack of charts directly on the map, they are often helpful in making the information more immediately and easily readable. It would be a very useful thing, then!

[emilhe]

I gave it a shot some time ago, when dash-leaflet was migrated to a recent version of Leaflet. However, it turned out that the minichart package is unmantained, and the latest version is not compatible with newer version of Leaflet. Hence, I would either have to fix the minichart component itself - or drop it from dash-leaflet; and I chose the latter. If someone else fixes the minichart component, I'll be happy to include it again :)