streamlit-folium icon indicating copy to clipboard operation
streamlit-folium copied to clipboard

Streamlit-folium is extending its container way further past the bottom border of the map

Open espogian opened this issue 1 year ago • 12 comments
trafficstars

The current version of streamlit-folium (0.22.1) has introduced a bug which is clearly visible from the showcase page (https://folium.streamlit.app/). Right on the bottom of the map, there is a huge blank space which extends a lot until the next element or the footer/bottom of the page.

espogian avatar Sep 17 '24 13:09 espogian

Are you seeing this locally @espogian? I'm not sure the app was actually rebuilt with 0.22.1, but I do see this error:

────────────────────────────────────────────────────────────────────────────────

AttributeError: module 'streamlit' has no attribute 'experimental_rerun'

────────────────────── Traceback (most recent call last) ───────────────────────

  /home/adminuser/venv/lib/python3.8/site-packages/streamlit/runtime/scriptrun  

  ner/exec_code.py:85 in exec_func_with_error_handling                          

                                                                                

  /home/adminuser/venv/lib/python3.8/site-packages/streamlit/runtime/scriptrun  

  ner/script_runner.py:576 in code_to_exec                                      

                                                                                

  /mount/src/streamlit-folium/examples/pages/dynamic_updates.py:182 in          

  <module>                                                                      

                                                                                

    179                                                                         

    180                                                                         

    181 if __name__ == "__main__":                                              

  ❱ 182 │   main()                                                              

    183                                                                         

                                                                                

  /mount/src/streamlit-folium/examples/pages/dynamic_updates.py:108 in main     

                                                                                

    105 │   │   st.session_state["last_object_clicked"] = out["last_object_cli  

    106 │   │   state = get_state_from_lat_lon(*out["last_object_clicked"].val  

    107 │   │   st.session_state["selected_state"] = state                      

  ❱ 108 │   │   st.experimental_rerun()                                         

    109 │                                                                       

    110 │   st.write("## Dynamic feature group updates")                        

    111                                                                         

────────────────────────────────────────────────────────────────────────────────

AttributeError: module 'streamlit' has no attribute 'experimental_rerun'

randyzwitch avatar Sep 17 '24 13:09 randyzwitch

I can see the exact same problem (the issue of the blank space after the map, which I described in my first post) present on the published version of https://folium.streamlit.app/ in my apps which are using streamlit-folium (0.22.1). However, the error you are posting is not present in my apps, therefore I think is not related. Thank you

espogian avatar Sep 17 '24 13:09 espogian

The issue you are seeing isn't present for me?

Screenshot 2024-09-17 at 9 55 32 AM

randyzwitch avatar Sep 17 '24 13:09 randyzwitch

I can scroll way past the end of the map. Reproduced using Chrome Version 128.0.6613.138 (Official Build) (arm64) and Safari Version 18.0 (19619.1.26.111.10, 19619). With both of them I've tried to access the https://folium.streamlit.app/ clearing the cache.

image

espogian avatar Sep 17 '24 13:09 espogian

I can get that to happen, but it's intermittent. I've rebooted the app to ensure its on 0.22.1, and will fix the experimental_rerun error to see if this persists. If so, then we can try and figure out what else might be causing this

randyzwitch avatar Sep 17 '24 14:09 randyzwitch

It's not "intermittent", it's happening the very first time you open the web page, after a refresh (or another interaction) the problem disappears.

espogian avatar Sep 17 '24 14:09 espogian

What is you want from me? I'm trying to figure out the issue and I'm telling you that on my computer it is intermittent. That's not up for debate, it's what I am seeing.

randyzwitch avatar Sep 17 '24 14:09 randyzwitch

I did not want to sound rude, I'm sorry :) Just tought it could be helpful to better specify under which conditions the issue happens. Thank you!

espogian avatar Sep 17 '24 14:09 espogian

Thanks for clarifying :)

I now agree that it's not intermittent, it's literally every other refresh for me, irrespective of having/not having cache. Unfortunately, there are no messages in the console to indicate an error.

@hansthen I don't think this is an issue with the patch you just did for Draw, but I also don't know what to look for here. Any ideas?

randyzwitch avatar Sep 17 '24 14:09 randyzwitch

As it turns out, it's not the map but the code on the right side that is causing the issue. The map is only 700px tall, the right column is 2438px tall

Screenshot 2024-09-17 at 10 42 42 AM Screenshot 2024-09-17 at 10 42 30 AM

When it doesn't show the issue, the code column is only 833px tall

Screenshot 2024-09-17 at 10 44 55 AM

randyzwitch avatar Sep 17 '24 14:09 randyzwitch

@hansthen I don't think this is an issue with the patch you just did for Draw, but I also don't know what to look for here. Any ideas?

Just to be sure, I undid my changes for the Draw plugin on the latest main branch locally. Without my changes the demo app also shows this issue.

The same issue also shows up in the page for the draw plugin. There is a code block below the two columns, which makes it easier to see. The issue is still there even if there is nothing in the second column.

  with st.echo(code_location="below"):
      import folium
      import streamlit as st
      from folium.plugins import Draw
  
      from streamlit_folium import st_folium
  
      m = folium.Map(location=[39.949610, -75.150282], zoom_start=5)
      Draw(export=True).add_to(m)
  
      c1, c2 = st.columns(2)
      with c1:
          output = st_folium(m, width=700, height=500)
  
      with c2:
          pass

hansthen avatar Sep 17 '24 19:09 hansthen

I don't have time right now, but I would check the setComponentHeight message sent from the streamlit-folium component in a javascript debugger.

hansthen avatar Sep 17 '24 19:09 hansthen

Fixed by #237

randyzwitch avatar Nov 14 '24 15:11 randyzwitch