Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix dynamic JS import and add missing scripts for colormaps #193

Merged
merged 4 commits into from
Jun 18, 2024
Merged

Fix dynamic JS import and add missing scripts for colormaps #193

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
f683989
Fix dynamic JS import and add missing scripts for colormaps
Navxihziq Jun 16, 2024
3d8d537
included the fogotted view change logics
Navxihziq Jun 16, 2024
5ab74d5
Add type hints to comply with static type checking
Navxihziq Jun 18, 2024
7e61dbd
Fixed the typing to use built-in generics in Python 3.9+
Navxihziq Jun 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 12 additions & 2 deletions streamlit_folium/__init__.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@

import branca
import folium
import folium.elements
import folium.plugins
import streamlit as st
import streamlit.components.v1 as components
Expand All @@ -22,6 +23,7 @@
_component_func = components.declare_component(
"st_folium", url="http://localhost:3001"
)

else:
parent_dir = os.path.dirname(os.path.abspath(__file__))
build_dir = os.path.join(parent_dir, "frontend/build")
Expand Down Expand Up @@ -367,6 +369,8 @@ def bounds_to_dict(bounds_list: list[list[float]]) -> dict[str, dict[str, float]
st.code(layer_control_string)

def walk(fig):
if isinstance(fig, branca.colormap.ColorMap):
yield fig
if isinstance(fig, folium.plugins.DualMap):
yield from walk(fig.m1)
yield from walk(fig.m2)
Expand All @@ -376,10 +380,16 @@ def walk(fig):
for child in fig._children.values():
yield from walk(child)

css_links = []
js_links = []
css_links: list[str] = []
js_links: list[str] = []

for elem in walk(folium_map):
if isinstance(elem, branca.colormap.ColorMap):
# manually add d3.js
js_links.insert(
0, "https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"
)
js_links.insert(0, "https://d3js.org/d3.v4.min.js")
css_links.extend([href for _, href in elem.default_css])
js_links.extend([src for _, src in elem.default_js])

Expand Down
115 changes: 52 additions & 63 deletions streamlit_folium/frontend/src/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -144,7 +144,7 @@ function onLayerClick(e: any) {
debouncedUpdateComponentValue(window.map)
}

function getPixelatedStyles(pixelated: boolean) {
function getPixelatedStyles(pixelated: boolean) {
if (pixelated) {
const styles = `
.leaflet-image-layer {
Expand All @@ -164,7 +164,6 @@ function getPixelatedStyles(pixelated: boolean) {
}
`
return styles

}

window.initComponent = (map: any, return_on_hover: boolean) => {
Expand All @@ -190,7 +189,7 @@ window.initComponent = (map: any, return_on_hover: boolean) => {
* the component is initially loaded, and then again every time the
* component gets new data from Python.
*/
function onRender(event: Event): void {
async function onRender(event: Event) {
// Get the RenderData from the event
const data = (event as CustomEvent<RenderData>).detail

Expand All @@ -209,30 +208,54 @@ function onRender(event: Event): void {
const layer_control: string = data.args["layer_control"]
const pixelated: boolean = data.args["pixelated"]

var finalizeOnRender = () => {
// load scripts
const loadScripts = async () => {
for (const link of js_links) {
// use promise to load scripts synchronously
await new Promise((resolve, reject) => {
const script = document.createElement("script")
script.src = link
script.async = false
script.onload = resolve
script.onerror = reject
window.document.body.appendChild(script)
})
}

css_links.forEach((link) => {
const linkTag = document.createElement("link")
linkTag.rel = "stylesheet"
linkTag.href = link
window.document.head.appendChild(linkTag)
})

const style = document.createElement("style")
style.innerHTML = getPixelatedStyles(pixelated)
window.document.head.appendChild(style)
}

// finalize rendering
const finalizeOnRender = () => {
if (
feature_group !== window.__GLOBAL_DATA__.last_feature_group ||
layer_control !== window.__GLOBAL_DATA__.last_layer_control
) {
// remove previous feature group and layer control
if (window.feature_group && window.feature_group.length > 0) {
window.feature_group.forEach((layer: Layer) => {
window.map.removeLayer(layer);
});
window.map.removeLayer(layer)
})
}

if (window.layer_control) {
window.map.removeControl(window.layer_control)
}

// update feature group and layer control cache
window.__GLOBAL_DATA__.last_feature_group = feature_group
window.__GLOBAL_DATA__.last_layer_control = layer_control

if (feature_group){
// Though using `eval` is generally a bad idea, we're using it here
// because we're evaluating code that we've generated ourselves on the
// Python side. This is safe because we're not evaluating user input, so this
// couldn't be used to execute arbitrary code.

if (feature_group) {
// eslint-disable-next-line
eval(feature_group + layer_control)
for (let key in window.map._layers) {
Expand Down Expand Up @@ -296,7 +319,6 @@ function onRender(event: Event): void {
document.body.appendChild(a)
}

const render_script = document.createElement("script")
// HACK -- update the folium-generated JS to add, most importantly,
// the map to this global variable so that it can be used elsewhere
// in the script.
Expand All @@ -322,60 +344,27 @@ function onRender(event: Event): void {
parent_div?.classList.remove("single")
parent_div?.classList.add("double")
}
}
await loadScripts().then(() => {
const render_script = document.createElement("script")

// This is only loaded once, from the onload callback
var postLoad = () => {
if (!window.map) {
render_script.innerHTML =
if (!window.map) {
render_script.innerHTML =
script +
`window.map = map_div; window.initComponent(map_div, ${return_on_hover});`
document.body.appendChild(render_script)
const html_div = document.createElement("div")
html_div.innerHTML = html
document.body.appendChild(html_div)
const styles = getPixelatedStyles(pixelated)
var styleSheet = document.createElement("style")
styleSheet.innerText = styles
document.head.appendChild(styleSheet)
}
finalizeOnRender();
}

if (js_links.length === 0) {
postLoad();
} else {
// make sure dependent js files are loaded
// before we initialize the component
var count = 0;
js_links.forEach((elem) => {
var scr = document.createElement('script');
scr.src = elem;
scr.async = false;
scr.onload = () => {
count -= 1;
if(count === 0) {
setTimeout(postLoad, 0);
}
};
document.head.appendChild(scr);
count += 1;
});
`window.map = map_div; window.initComponent(map_div, ${return_on_hover});`
document.body.appendChild(render_script)
const html_div = document.createElement("div")
html_div.innerHTML = html
document.body.appendChild(html_div)
const styles = getPixelatedStyles(pixelated)
var styleSheet = document.createElement("style")
styleSheet.innerText = styles
document.head.appendChild(styleSheet)
}

// css is okay regardless loading order
css_links.forEach((elem) => {
var link = document.createElement('link');
link.rel = "stylesheet";
link.type = "text/css";
link.href = elem;
document.head.appendChild(link);
});
Streamlit.setFrameHeight()
}
} else {
finalizeOnRender();
finalizeOnRender()
})
}

finalizeOnRender()
}

// Attach our `onRender` handler to Streamlit's render event.
Expand Down
Loading