Repository: randyzwitch/streamlit-folium (language: python)

Issue:
Streamlit-folium is extending its container way further past the bottom border of the map
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.


Discussion / hints:
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'
```
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
The issue you are seeing isn't present for me? 

<img width="1578" alt="Screenshot 2024-09-17 at 9 55 32 AM" src="https://github.com/user-attachments/assets/f89736f7-da7d-4881-9a2e-8a55e9077bd7">

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](https://github.com/user-attachments/assets/39d4c5d5-e380-47a3-bb06-9d642a1bb1c4)

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
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.
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.
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!
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?
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

<img width="1625" alt="Screenshot 2024-09-17 at 10 42 42 AM" src="https://github.com/user-attachments/assets/7e1483c2-7f3e-49b4-8524-3524ea8d39c0">
<img width="797" alt="Screenshot 2024-09-17 at 10 42 30 AM" src="https://github.com/user-attachments/assets/ec6ddedd-def2-440d-b9f0-7afe5af9ff8e">


When it doesn't show the issue, the code column is only 833px tall

<img width="2038" alt="Screenshot 2024-09-17 at 10 44 55 AM" src="https://github.com/user-attachments/assets/1b4293c1-d36e-4a28-a435-7f58cc169528">

> @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
```
I don't have time right now, but I would check the `setComponentHeight` message sent from the `streamlit-folium` component in a javascript debugger. 

Fix patch:
diff --git a/streamlit_folium/frontend/src/index.tsx b/streamlit_folium/frontend/src/index.tsx
index f8f23c1..29d42ff 100644
--- a/streamlit_folium/frontend/src/index.tsx
+++ b/streamlit_folium/frontend/src/index.tsx
@@ -421,6 +421,7 @@ async function onRender(event: Event) {
     })
   }
   finalizeOnRender()
+  Streamlit.setFrameHeight()
 }
 
 // Attach our `onRender` handler to Streamlit's render event.


Test patch:
diff --git a/tests/test_frontend.py b/tests/test_frontend.py
index cedef74..49cc25b 100644
--- a/tests/test_frontend.py
+++ b/tests/test_frontend.py
@@ -391,3 +391,27 @@ def test_layer_control_dynamic_update(page: Page):
         .get_by_role("img")
         .locator("path")
     ).to_be_visible()
+
+
+def test_frame_height_matches_content_height(page: Page):
+    """Make sure that the frame height matches the document height to confirm that
+    Streamlit.setFrameHeight was called correctly."""
+
+    iframe = page.get_by_test_id("stCustomComponentV1")
+    iframe_html = page.frame_locator("[data-testid=stCustomComponentV1]").locator(
+        "html"
+    )
+
+    # Wait for the iframe to load and have a height - otherwise the test will be flaky
+    page.wait_for_function(
+        "el => window.getComputedStyle(el).height !== '0px'",
+        arg=iframe.element_handle(),
+    )
+
+    # Now make sure that the heights match
+    iframe_height = iframe.evaluate("el => window.getComputedStyle(el).height")
+    iframe_html_height = iframe_html.evaluate(
+        "el => window.getComputedStyle(el).height"
+    )
+
+    assert iframe_height == iframe_html_height