Streamlit+PyDeck Performance Issues (compared to non-streamlit usage of Pydeck with local data object)

TLDR - Pydeck when used with Streamlit has poor performance when passing in local data (vs. external URL). These issues are not present with pydeck standalone.

I’ve noticed dramatically different performance when using PyDeck standalone through a jupyter notebook vs. within a streamlit app. When the data object passed to a PyDeck layer is a local array or dataframe the performance is substantially poorer (it’s fine with an external URL, but that’s not suitable for my use-case).

Note: I am using streamlit v1.13 and pydeck 0.8.3b (with geojson layers).

For transparency I posted this here without any responses: https://discuss.streamlit.io/t/pydeck-performance-issues-with-streamlit-but-not-standalone/31434

But think that this is a legitimate issue as it was brought up in Jan 2021. While that issue is closed, there was no resolution - and the suggestion to render pydeck elements as raw embedded HTML e.g. via components.html(deck.to_html(as_string=True), height=600) does improve performance but has other issues associated with it.

---

Community voting on feature requests enables the Streamlit team to understand which issues are most important to our users.

If you’d like the Streamlit team to prioritize this issue, please use the 👍 (thumbs up emoji) reaction in response to the initial post.

[LukasMasuch]

@KeeonTabrizi Big thanks 😃 I was able to reproduce this here. This example will help us a lot to fix this.

[KeeonTabrizi]

@LukasMasuch please see my examples below.

Environment Requirements

• streamlit==1.13
• pydeck==0.8.0b3

Using Python 3.9.12.

Note: streamlit 1.13 is required because of a known compatibility issue with pydeck that was fixed with the 1.13 release. Additionally, pydeck 0.8.x is what introduced geojson support which is required for my use case.

---

This includes 3 examples in a streamlit app:

• Example 1: Streamlit + Pydeck w/ External Data Object - Normal Behavior
• Example 2: Streamlit + Pydeck w/ Local Data Object - Degraded Performance
• Example 3: Streamlit + Pydeck w/ Local Data Object injected as iframe - Normal Performance (iframe introduces other problems/bugs though not described in depth here)

Note the example below is something I’ve adapted to demonstrate the issue. The singular geojson layer in question I loaded into a github gist which contains a valid 8.8MB geojson object of CA Zipcodes and some metadata in the properties.

import streamlit as st
import streamlit.components.v1 as components
import pydeck as pdk
import requests

st.set_page_config(layout="wide", initial_sidebar_state='collapsed')

if __name__ == '__main__':
    # DATA_URL is a valid geojson object of CA zipcodes with some metadata, it's uncompressed size is ~8.8MB
    DATA_URL = 'https://gist.githubusercontent.com/KeeonTabrizi/99493a2d7a5347c7691bc743f4a58bb3/raw/9be1eaa9f8f6bff4ad60a57cfe43e9e05b99f8db/ca_zip_codes.json'
    # LOCAL DATA loads the DATA_URL to show examples with local data usage
    LOCAL_DATA = requests.get(DATA_URL).json()
    INITIAL_VIEW_STATE = pdk.ViewState(latitude=38.028549, longitude=-120.181034, zoom=5, max_zoom=16, pitch=45, bearing=0)

    geojson_ext_data = pdk.Layer(
        "GeoJsonLayer",
        DATA_URL,
        opacity=0.8,
        stroked=True,
        auto_highlight=True,
        filled=True,
        extruded=False,
        wireframe=True,
        pickable=True,
        get_line_width=25,
        line_width_units='common',
        line_width_scale=0,
        line_width_min_pixels=1,
        get_line_color="[0, 0, 0]",
        get_fill_color="[255,255,255]"
    )

    geojson_local_data = pdk.Layer(
        "GeoJsonLayer",
        LOCAL_DATA,
        opacity=0.8,
        stroked=True,
        auto_highlight=True,
        filled=True,
        extruded=False,
        wireframe=True,
        pickable=True,
        get_line_width=25,
        line_width_units='common',
        line_width_scale=0,
        line_width_min_pixels=1,
        get_line_color="[0, 0, 0]",
        get_fill_color="[255,255,255]"
    )
    st.markdown('## Example 1: Streamlit + Pydeck w/ External Data Object - Normal Behavior')
    st.write('Zoom & Pan is responsive')
    r = pdk.Deck(layers=[geojson_ext_data], initial_view_state=INITIAL_VIEW_STATE, map_style='light')
    st.pydeck_chart(r)
    r2 = pdk.Deck(layers=[geojson_local_data], initial_view_state=INITIAL_VIEW_STATE, map_style='light')
    st.markdown('## Example 2: Streamlit + Pydeck w/ Local Data Object - Degraded Performance')
    st.write('Zoom & Pan is choppy')
    st.pydeck_chart(r2)
    st.markdown('## Example 3: Streamlit + Pydeck w/ Local Data Object injected as iframe - Normal Performance')
    st.markdown('Zoom & Pan is responsive')
    st.markdown('_Using an iframe causes additional issues with incompatability with certain pydeck layer arguments as well as losing state of the viewstate._')
    # use iframe/html trick from https://github.com/streamlit/streamlit/issues/2569
    components.html(r2.to_html(as_string=True), height=600)