vega-lite pop up charts not working

this-josh commented 10 months ago

I expect this is similar to #155, the result certainly is. @blackary @randyzwitch

If I try the vega_lite popup example from the folium docs I get just a slither of the plot.


import folium
from streamlit_folium import st_folium

from altair import Chart

import vega_datasets

# load built-in dataset as a pandas DataFrame
cars = vega_datasets.data.cars()

scatter = (
    Chart(cars)
    .mark_circle()
    .encode(
        x="Horsepower",
        y="Miles_per_Gallon",
        color="Origin",
    )
)

vega_lite = folium.VegaLite(
    scatter,
    width="100%",
    height="100%",
)

m = folium.Map(location=[-27.5717, -48.6256])

marker = folium.Marker([-27.57, -48.62])

popup = folium.Popup()

vega_lite.add_to(popup)
popup.add_to(marker)

marker.add_to(m)

st_folium(m)

randyzwitch commented 10 months ago

Can you look in the developer console in the browser (right-click and "inspect") and highlight whatever error message it is providing?

randyzwitch commented 10 months ago

We only have vega included, but not vega-lite

https://github.com/randyzwitch/streamlit-folium/blob/master/streamlit_folium/frontend/public/index.html#L18

Without bringing up a Streamlit app, I would guess we'd just add vega-lite to the index.html file

randyzwitch commented 10 months ago

Looks like Folium dynamically loads the vega-lite version 🥲

https://github.com/python-visualization/folium/blob/1d672ab8d57e8fe5d839de0134d85ac4265f58d2/folium/features.py#L288

randyzwitch commented 10 months ago

This could be a weird one @blackary...the code snippet here uses Altair. Altair packages 5.0+ use v5 of vega-lite.

So we could assume that and include vega-lite v5, but it would probably be more stable if we required Altair 5+. But that adds a dependency that we really don't need for our package.

this-josh commented 10 months ago

Can you look in the developer console in the browser (right-click and "inspect") and highlight whatever error message it is providing?

<noscript>You need to enable JavaScript to run this app.</noscript> Full element <body data-new-gr-c-s-check-loaded="14.1143.0" data-gr-ext-installed="" data-gr-ext-disabled="forever" style=""><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"><div class=""><div class="withScreencast"><div tabindex="-1"><div class="stApp stAppEmbeddingId-s58kxvttxse3 st-emotion-cache-1r4qj8v erw9t6i1" data-testid="stApp" data-teststate="notRunning"><header tabindex="-1" data-testid="stHeader" class="st-emotion-cache-18ni7ap ezrtsby2"><div data-testid="stDecoration" id="stDecoration" class="st-emotion-cache-1dp5vir ezrtsby1"></div><div data-testid="stToolbar" class="st-emotion-cache-zq5wmm ezrtsby0"><div data-testid="stToolbarActions" class="st-emotion-cache-1p1m4ay e3g6aar0"></div><div class="stDeployButton"><button kind="header" data-testid="baseButton-header" class="st-emotion-cache-ztfqz8 ef3psqc5"><div class="st-emotion-cache-1wbqy5l e17vllj40"><span>Deploy</span></div></button></div><span id="MainMenu" data-testid="stMainMenu" aria-haspopup="true" aria-expanded="false" class="st-emotion-cache-czk5ss e16jpq800"><button kind="headerNoPadding" data-testid="baseButton-headerNoPadding" class="st-emotion-cache-iiif1v ef3psqc4"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="currentColor" xmlns="http://www.w3.org/2000/svg" color="inherit" class="eyeqlp51 st-emotion-cache-fblp2m ex0cdmw0"><path fill="none" d="M0 0h24v24H0V0z"></path><path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"></path></svg></button></span></div></header><div class="appview-container st-emotion-cache-1wrcr25 ea3mdgi4" data-testid="stAppViewContainer" data-layout="narrow"><section tabindex="0" class="main st-emotion-cache-uf99v8 ea3mdgi3"><div class="block-container st-emotion-cache-1y4p8pa ea3mdgi2" data-testid="block-container"><div data-testid="stVerticalBlockBorderWrapper" class="st-emotion-cache-0 e1f1d6gn0"><div class="st-emotion-cache-1wmy9hl e1f1d6gn1"><div width="704" data-testid="stVerticalBlock" class="st-emotion-cache-1n76uvr e1f1d6gn2"><div data-stale="false" width="704" class="element-container st-emotion-cache-e8g64f e1f1d6gn4" data-testid="element-container"><iframe allow="accelerometer; ambient-light-sensor; autoplay; battery; camera; clipboard-write; document-domain; encrypted-media; fullscreen; geolocation; gyroscope; layout-animations; legacy-image-formats; magnetometer; microphone; midi; oversized-images; payment; picture-in-picture; publickey-credentials-get; sync-xhr; usb; vr ; wake-lock; xr-spatial-tracking" src="http://localhost:8502/component/streamlit_folium.st_folium/index.html?streamlitUrl=http%3A%2F%2Flocalhost%3A8502%2F" width="704" height="20" scrolling="no" sandbox="allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-downloads" title="streamlit_folium.st_folium"></iframe></div></div></div></div></div><div data-testid="IframeResizerAnchor" data-iframe-height="true" class="st-emotion-cache-1wrevtn ea3mdgi0"></div></section></div></div></div></div><div id="portal" class="st-emotion-cache-1q6lfs0 erw9t6i0"></div></div><div class=""></div></div></body>

this-josh commented 10 months ago

This could be a weird one @blackary...the code snippet here uses Altair. Altair packages 5.0+ use v5 of vega-lite.

So we could assume that and include vega-lite v5, but it would probably be more stable if we required Altair 5+. But that adds a dependency that we really don't need for our package.

You could add Altair as an optional dependency? Quite a few packages have done that. I mainly use python poetry so cannot remember how to do it with requirements.txt but it can be done :)

You can add them to your setup.py

randyzwitch commented 10 months ago

I was overthinking it. More recent versions of Streamlit already require altair 5, so by transitive dependency it's already required.

I'll make a PR to add the vega-lite js library and this should be solved.

randyzwitch commented 10 months ago

SMH...missed vega-embed, will add in new PR

randyzwitch commented 10 months ago

Confirmed in 0.17.2

randyzwitch / streamlit-folium

vega-lite pop up charts not working #158