Issue 2077 playwright

.github/workflows/test_code.yml

@@ -34,4 +34,4 @@ jobs:
       run: python -m pip install -e . --no-deps --force-reinstall
 
     - name: Code tests
-      run: python -m pytest -vv --ignore=tests/selenium
+      run: python -m pytest -vv --ignore=tests/selenium --ignore=tests/streamlit

.github/workflows/test_latest_branca.yml

@@ -31,4 +31,4 @@ jobs:
       run: |
         micromamba remove branca --yes --force
         python -m pip install git+https://github.com/python-visualization/branca.git
-        python -m pytest -vv --ignore=tests/selenium
+        python -m pytest -vv --ignore=tests/selenium --ignore=tests/streamlit

.github/workflows/test_playwright.yml

@@ -0,0 +1,56 @@
+# This workflow will install Python dependencies, run tests and lint with a variety of Python versions
+# For more information see: https://help.github.com/actions/language-and-framework-guides/using-python-with-github-actions
+
+name: Playwright tests
+
+on:
+  pull_request:
+  push:
+    branches:
+      - main
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        python-version: ["3.9", "3.13"]
+
+    steps:
+      - uses: actions/checkout@v3
+      - name: Set up Python ${{ matrix.python-version }}
+        uses: actions/setup-python@v4
+        with:
+          python-version: ${{ matrix.python-version }}
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 20
+      - name: Install python dependencies
+        run: |
+          python -m pip install --upgrade pip
+          pip install flake8 pytest pytest-playwright
+          if [ -f tests/streamlit/requirements.txt ]; then pip install -r tests/streamlit/requirements.txt; fi
+          pip install -e . --force-reinstall
+      - uses: pre-commit/[email protected]
+      - name: Install playwright dependencies
+        run: |
+          playwright install --with-deps
+      - name: Install annotate-failures-plugin
+        run: pip install pytest-github-actions-annotate-failures
+
+      - name: Test with pytest and retry flaky tests up to 3 times
+        run: |
+          pytest --browser chromium -s --reruns 3 --junit-xml=test-results.xml tests/streamlit
+
+      - name: Surface failing tests
+        if: always()
+        uses: pmeier/pytest-results-action@main
+        with:
+          path: test-results.xml
+          fail-on-empty: false
+
+      - uses: actions/upload-artifact@v3
+        if: failure()
+        with:
+          name: screenshots
+          path: screenshot*.png

.pre-commit-config.yaml

@@ -9,6 +9,7 @@ repos:
     - id: debug-statements
     - id: end-of-file-fixer
     - id: check-docstring-first
+      exclude: examples/.*
     - id: check-added-large-files
     - id: requirements-txt-fixer
     - id: file-contents-sorter

examples/pages/draw_support.py

@@ -0,0 +1,39 @@
+import streamlit as st
+
+st.set_page_config(
+    page_title="streamlit-folium documentation: Draw Support",
+    page_icon=":pencil:",
+    layout="wide",
+)
+
+"""
+# streamlit-folium: Draw Support
+
+Folium supports some of the [most popular leaflet
+plugins](https://python-visualization.github.io/folium/plugins.html). In this example,
+we can add the
+[`Draw`](https://python-visualization.github.io/folium/plugins.html#folium.plugins.Draw)
+plugin to our map, which allows for drawing geometric shapes on the map.
+
+When a shape is drawn on the map, the coordinates that represent that shape are passed
+back as a geojson feature via the `all_drawings` and `last_active_drawing` data fields.
+
+Draw something below to see the return value back to Streamlit!
+"""
+
+with st.echo(code_location="below"):
+    import streamlit as st
+    from streamlit_folium import st_folium
+
+    import folium
+    from folium.plugins import Draw
+
+    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:
+        st.write(output)

examples/pages/dynamic_layer_control.py

@@ -0,0 +1,86 @@
+from __future__ import annotations
+
+import geopandas as gpd
+import shapely
+import streamlit as st
+from streamlit_folium import st_folium
+
+import folium
+import folium.features
+
+st.set_page_config(layout="wide")
+
+st.write("## Dynamic layer control updates")
+
+START_LOCATION = [37.7944347109497, -122.398077892527]
+START_ZOOM = 17
+
+if "feature_group" not in st.session_state:
+    st.session_state["feature_group"] = None
+
+wkt1 = (
+    "POLYGON ((-122.399077892527 37.7934347109497, -122.398922660838 "
+    "37.7934544916178, -122.398980265018 37.7937266504805, -122.399133972495 "
+    "37.7937070646238, -122.399077892527 37.7934347109497))"
+)
+wkt2 = (
+    "POLYGON ((-122.397416 37.795017, -122.397137 37.794712, -122.396332 37.794983,"
+    " -122.396171 37.795483, -122.396858 37.795695, -122.397652 37.795466, "
+    "-122.397759 37.79511, -122.397416 37.795017))"
+)
+
+polygon_1 = shapely.wkt.loads(wkt1)
+polygon_2 = shapely.wkt.loads(wkt2)
+
+gdf1 = gpd.GeoDataFrame(geometry=[polygon_1]).set_crs(epsg=4326)
+gdf2 = gpd.GeoDataFrame(geometry=[polygon_2]).set_crs(epsg=4326)
+
+style_parcels = {
+    "fillColor": "#1100f8",
+    "color": "#1100f8",
+    "fillOpacity": 0.13,
+    "weight": 2,
+}
+style_buildings = {
+    "color": "#ff3939",
+    "fillOpacity": 0,
+    "weight": 3,
+    "opacity": 1,
+    "dashArray": "5, 5",
+}
+
+polygon_folium1 = folium.GeoJson(data=gdf1, style_function=lambda x: style_parcels)
+polygon_folium2 = folium.GeoJson(data=gdf2, style_function=lambda x: style_buildings)
+
+map = folium.Map(
+    location=START_LOCATION,
+    zoom_start=START_ZOOM,
+    tiles="OpenStreetMap",
+    max_zoom=21,
+)
+
+fg1 = folium.FeatureGroup(name="Parcels")
+fg1.add_child(polygon_folium1)
+
+fg2 = folium.FeatureGroup(name="Buildings")
+fg2.add_child(polygon_folium2)
+
+fg_dict = {"Parcels": fg1, "Buildings": fg2, "None": None, "Both": [fg1, fg2]}
+
+control = folium.LayerControl(collapsed=False)
+
+fg = st.radio("Feature Group", ["Parcels", "Buildings", "None", "Both"])
+
+layer = st.radio("Layer Control", ["yes", "no"])
+
+layer_dict = {"yes": control, "no": None}
+
+st_folium(
+    map,
+    width=800,
+    height=450,
+    returned_objects=[],
+    feature_group_to_add=fg_dict[fg],
+    debug=True,
+    layer_control=layer_dict[layer],
+)

examples/pages/dynamic_map_vs_rerender.py

@@ -0,0 +1,82 @@
+import random
+
+import streamlit as st
+from streamlit_folium import st_folium
+
+import folium
+
+st.set_page_config(layout="wide")
+
+
+CENTER_START = [39.949610, -75.150282]
+ZOOM_START = 8
+
+if "center" not in st.session_state:
+    st.session_state["center"] = [39.949610, -75.150282]
+if "zoom" not in st.session_state:
+    st.session_state["zoom"] = 8
+if "markers" not in st.session_state:
+    st.session_state["markers"] = []
+
+col1, col2, col3 = st.columns(3)
+
+if col1.button("Shift center"):
+    random_shift_y = (random.random() - 0.5) * 0.3
+    random_shift_x = (random.random() - 0.5) * 0.3
+    st.session_state["center"] = [
+        st.session_state["center"][0] + random_shift_y,
+        st.session_state["center"][1] + random_shift_x,
+    ]
+
+if col2.button("Shift zoom"):
+    st.session_state["zoom"] = st.session_state["zoom"] + 1
+    if st.session_state["zoom"] >= 10:
+        st.session_state["zoom"] = 5
+
+if col3.button("Add random marker"):
+    random_lat = random.random() * 0.5 + 39.8
+    random_lon = random.random() * 0.5 - 75.2
+    random_marker = folium.Marker(
+        location=[random_lat, random_lon],
+        popup=f"Random marker at {random_lat:.2f}, {random_lon:.2f}",
+    )
+    st.session_state["markers"].append(random_marker)
+
+col1, col2 = st.columns(2)
+
+with col1:
+    "# New method"
+    "### Pass `center`, `zoom`, and `feature_group_to_add` to `st_folium`"
+    with st.echo(code_location="below"):
+        m = folium.Map(location=CENTER_START, zoom_start=8)
+        fg = folium.FeatureGroup(name="Markers")
+        for marker in st.session_state["markers"]:
+            fg.add_child(marker)
+
+        st_folium(
+            m,
+            center=st.session_state["center"],
+            zoom=st.session_state["zoom"],
+            key="new",
+            feature_group_to_add=fg,
+            height=400,
+            width=700,
+        )
+
+with col2:
+    "# Old method"
+    "### Update the map before passing it to `st_folium`"
+    with st.echo(code_location="below"):
+        m = folium.Map(
+            location=st.session_state["center"], zoom_start=st.session_state["zoom"]
+        )
+        fg = folium.FeatureGroup(name="Markers")
+        for marker in st.session_state["markers"]:
+            fg.add_child(marker)
+        m.add_child(fg)
+        st_folium(
+            m,
+            key="old",
+            height=400,
+            width=700,
+        )