Upgrade Streamlit to 1.36.0 (#993)

* Upgrade Streamlit to 1.36.0

* Update Streamlit version in stlite-server

* Update the streamlit submodule

* Update samples

Makefile

@@ -8,7 +8,7 @@ desktop := packages/desktop/build/*
 kernel := packages/kernel/dist/*
 stlite-server-wheel := packages/kernel/py/stlite-server/dist/stlite_server-0.1.0-py3-none-any.whl
 streamlit_proto := streamlit/frontend/lib/src/proto.d.ts
-streamlit_wheel := packages/kernel/py/streamlit/lib/dist/streamlit-1.35.0-cp312-none-any.whl
+streamlit_wheel := packages/kernel/py/streamlit/lib/dist/streamlit-1.36.0-cp312-none-any.whl
 streamlit_frontend_lib_prod := streamlit/frontend/lib/dist/*
 
 export USE_CONSTRAINTS_FILE := false  # https://github.com/streamlit/streamlit/blob/1.27.0/.github/workflows/release.yml#L67-L68
@@ -134,7 +134,7 @@ $(streamlit_wheel): venv $(streamlit_proto) streamlit/lib/streamlit/**/*.py stre
 		exit 1; \
 	fi && \
 	cd streamlit && SNOWPARK_CONDA_BUILD=true $(MAKE) distribution && cd .. && \
-	pyodide py-compile --keep streamlit/lib/dist/streamlit-1.35.0-py2.py3-none-any.whl && \
+	pyodide py-compile --keep streamlit/lib/dist/streamlit-1.36.0-py2.py3-none-any.whl && \
 	mkdir -p $(dir $(streamlit_wheel)) && \
 	cp streamlit/lib/dist/$(notdir $(streamlit_wheel)) $(streamlit_wheel)
 

packages/common-react/package.json

@@ -14,7 +14,7 @@
     "check:prettier": "prettier --check ."
   },
   "dependencies": {
-    "@streamlit/lib": "1.35.0"
+    "@streamlit/lib": "1.36.0"
   },
   "devDependencies": {
     "@typescript-eslint/eslint-plugin": "^5.49.0",

packages/desktop/bin-src/dump_artifacts/index.ts

@@ -148,7 +148,7 @@ async function installPackages(
   requirements.push(stliteServerWheel);
   const streamlitWheel = await prepareLocalWheel(
     pyodide,
-    path.join(wheelsDir, "streamlit-1.35.0-cp312-none-any.whl"),
+    path.join(wheelsDir, "streamlit-1.36.0-cp312-none-any.whl"),
   );
   requirements.push(streamlitWheel);
 

packages/desktop/package.json

@@ -73,7 +73,7 @@
     "@stlite/common": "^0.59.0",
     "@stlite/common-react": "^0.59.0",
     "@stlite/kernel": "^0.59.0",
-    "@streamlit/app": "1.35.0",
+    "@streamlit/app": "1.36.0",
     "@testing-library/react": "^14.1.2",
     "@testing-library/user-event": "^14.0.0",
     "@types/jest": "^27.4.3",

packages/desktop/scripts/copy_wheels.js

@@ -22,7 +22,7 @@ async function main() {
   );
   const streamlitWheelPath = path.join(
     stliteKernelPyDir,
-    "streamlit/lib/dist/streamlit-1.35.0-cp312-none-any.whl",
+    "streamlit/lib/dist/streamlit-1.36.0-cp312-none-any.whl",
   );
 
   // Create the `wheels` directory

packages/kernel/package.json

@@ -34,8 +34,8 @@
   "dependencies": {
     "@jupyterlab/coreutils": "^5.4.2",
     "@stlite/common": "^0.59.0",
-    "@streamlit/app": "1.35.0",
-    "@streamlit/lib": "1.35.0",
+    "@streamlit/app": "1.36.0",
+    "@streamlit/lib": "1.36.0",
     "path-browserify": "^1.0.1"
   }
 }

packages/kernel/src/kernel.ts

@@ -32,7 +32,7 @@ import { assertStreamlitConfig } from "./types";
 // https://github.com/pyodide/pyodide/pull/1859
 // https://pyodide.org/en/stable/project/changelog.html#micropip
 import STLITE_SERVER_WHEEL from "!!file-loader?name=pypi/[name].[ext]&context=.!../py/stlite-server/dist/stlite_server-0.1.0-py3-none-any.whl"; // TODO: Extract the import statement to an auto-generated file like `_pypi.ts` in JupyterLite: https://github.com/jupyterlite/jupyterlite/blob/f2ecc9cf7189cb19722bec2f0fc7ff5dfd233d47/packages/pyolite-kernel/src/_pypi.ts
-import STREAMLIT_WHEEL from "!!file-loader?name=pypi/[name].[ext]&context=.!../py/streamlit/lib/dist/streamlit-1.35.0-cp312-none-any.whl";
+import STREAMLIT_WHEEL from "!!file-loader?name=pypi/[name].[ext]&context=.!../py/streamlit/lib/dist/streamlit-1.36.0-cp312-none-any.whl";
 
 // Ref: https://github.com/streamlit/streamlit/blob/1.12.2/frontend/src/lib/UriUtil.ts#L32-L33
 const FINAL_SLASH_RE = /\/+$/;

packages/kernel/vitest.config.ts

@@ -16,7 +16,7 @@ export default defineConfig({
       ),
       "streamlit.whl": path.resolve(
         __dirname,
-        "./py/streamlit/lib/dist/streamlit-1.35.0-cp312-none-any.whl",
+        "./py/streamlit/lib/dist/streamlit-1.36.0-cp312-none-any.whl",
       ),
     },
   },

packages/mountable/package.json

@@ -31,7 +31,7 @@
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
     "@stlite/common-react": "^0.59.0",
     "@stlite/kernel": "^0.59.0",
-    "@streamlit/app": "1.35.0",
+    "@streamlit/app": "1.36.0",
     "@svgr/webpack": "^8.1.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.1.2",

packages/sharing-editor/public/samples/011_component_gallery/pages/annotations-in-altair.py

@@ -0,0 +1,74 @@
+import streamlit as st
+import altair as alt
+import pandas as pd
+from vega_datasets import data
+
+
+@st.cache_data
+def get_data():
+    source = data.stocks()
+    source = source[source.date.gt("2004-01-01")]
+    return source
+
+
+stock_data = get_data()
+
+hover = alt.selection_single(
+    fields=["date"],
+    nearest=True,
+    on="mouseover",
+    empty="none",
+)
+
+lines = (
+    alt.Chart(stock_data, title="Evolution of stock prices")
+    .mark_line()
+    .encode(
+        x="date",
+        y="price",
+        color="symbol",
+    )
+)
+
+points = lines.transform_filter(hover).mark_circle(size=65)
+
+tooltips = (
+    alt.Chart(stock_data)
+    .mark_rule()
+    .encode(
+        x="yearmonthdate(date)",
+        y="price",
+        opacity=alt.condition(hover, alt.value(0.3), alt.value(0)),
+        tooltip=[
+            alt.Tooltip("date", title="Date"),
+            alt.Tooltip("price", title="Price (USD)"),
+        ],
+    )
+    .add_selection(hover)
+)
+
+data_layer = lines + points + tooltips
+
+
+event_picker = alt.selection_point("events")
+
+
+ANNOTATIONS = [
+    ("Sep 01, 2007", 400, "🙂", "Something's going well for GOOG & AAPL."),
+    ("Nov 01, 2008", 180, "🙂", "The market is recovering."),
+    ("Dec 01, 2007", 700, "😱", "Something's going wrong for GOOG & AAPL."),
+    ("Dec 01, 2009", 650, "😱", "A hiccup for GOOG."),
+]
+annotations_df = pd.DataFrame(
+    ANNOTATIONS, columns=["date", "y", "marker", "description"]
+)
+annotations_df.date = pd.to_datetime(annotations_df.date)
+
+annotation_layer = (
+    alt.Chart(annotations_df)
+    .mark_text(size=20, dx=-8, dy=-10, align="left")
+    .encode(x="date:T", y=alt.Y("y:Q"), text="marker", tooltip="description")
+)
+
+combined_chart = data_layer + annotation_layer
+st.altair_chart(combined_chart, use_container_width=True)

packages/sharing-editor/public/samples/011_component_gallery/pages/charts.bar_chart_horizontal.py

@@ -0,0 +1,10 @@
+import streamlit as st
+from vega_datasets import data
+
+@st.cache_data
+def get_data():
+    return data.barley()
+
+source = get_data()
+
+st.bar_chart(source, x="variety", y="yield", color="site", horizontal=True)

packages/sharing-editor/public/samples/011_component_gallery/pages/dataframe-row-selections.py

@@ -0,0 +1,96 @@
+import random
+
+import numpy as np
+import pandas as pd
+import streamlit as st
+
+
+@st.cache_data
+def get_profile_dataset(number_of_items: int = 20, seed: int = 0) -> pd.DataFrame:
+    from faker import Faker
+
+    new_data = []
+
+    fake = Faker()
+    random.seed(seed)
+    Faker.seed(seed)
+
+    for i in range(number_of_items):
+        profile = fake.profile()
+        new_data.append(
+            {
+                "avatar": f"https://picsum.photos/400/200?lock={i}",
+                "name": profile["name"],
+                "daily_activity": np.random.rand(25),
+                "activity": np.random.randint(2, 90, size=12),
+            }
+        )
+
+    profile_df = pd.DataFrame(new_data)
+    return profile_df
+
+
+column_configuration = {
+    "name": st.column_config.TextColumn(
+        "Name", help="The name of the user", max_chars=100, width="medium"
+    ),
+    "avatar": st.column_config.ImageColumn("Avatar", help="The user's avatar"),
+    "activity": st.column_config.LineChartColumn(
+        "Activity (1 year)",
+        help="The user's activity over the last 1 year",
+        width="large",
+        y_min=0,
+        y_max=100,
+    ),
+    "daily_activity": st.column_config.BarChartColumn(
+        "Activity (daily)",
+        help="The user's activity in the last 25 days",
+        width="medium",
+        y_min=0,
+        y_max=1,
+    ),
+}
+
+select, compare = st.tabs(["Select members", "Compare selected"])
+
+with select:
+    st.header("All members")
+
+    df = get_profile_dataset()
+
+    event = st.dataframe(
+        df,
+        column_config=column_configuration,
+        use_container_width=True,
+        hide_index=True,
+        on_select="rerun",
+        selection_mode="multi-row",
+    )
+
+    st.header("Selected members")
+    people = event.selection.rows
+    filtered_df = df.iloc[people]
+    st.dataframe(
+        filtered_df,
+        column_config=column_configuration,
+        use_container_width=True,
+    )
+
+with compare:
+    activity_df = {}
+    for person in people:
+        activity_df[df.iloc[person]["name"]] = df.iloc[person]["activity"]
+    activity_df = pd.DataFrame(activity_df)
+
+    daily_activity_df = {}
+    for person in people:
+        daily_activity_df[df.iloc[person]["name"]] = df.iloc[person]["daily_activity"]
+    daily_activity_df = pd.DataFrame(daily_activity_df)
+
+    if len(people) > 0:
+        st.header("Daily activity comparison")
+        st.bar_chart(daily_activity_df)
+        st.header("Yearly activity comparison")
+        st.line_chart(activity_df)
+    else:
+        st.markdown("No members selected.")

packages/sharing-editor/public/samples/011_component_gallery/pages/execution.fragment.py

@@ -1,7 +1,7 @@
 import streamlit as st
 
-if "script_runs" not in st.session_state:
-    st.session_state.script_runs = 0
+if "app_runs" not in st.session_state:
+    st.session_state.app_runs = 0
     st.session_state.fragment_runs = 0
 
 
@@ -12,8 +12,8 @@ def fragment():
     st.write(f"Fragment says it ran {st.session_state.fragment_runs} times.")
 
 
-st.session_state.script_runs += 1
+st.session_state.app_runs += 1
 fragment()
-st.button("Rerun full script")
-st.write(f"Full script says it ran {st.session_state.script_runs} times.")
-st.write(f"Full script sees that fragment ran {st.session_state.fragment_runs} times.")
+st.button("Rerun full app")
+st.write(f"Full app says it ran {st.session_state.app_runs} times.")
+st.write(f"Full app sees that fragment ran {st.session_state.fragment_runs} times.")

packages/sharing-editor/public/samples/011_component_gallery/pages/execution.fragment_balloon.py

@@ -0,0 +1,14 @@
+import streamlit as st
+import asyncio
+
+
+@st.experimental_fragment
+def release_the_balloons():
+    st.button("Release the balloons", help="Fragment rerun")
+    st.balloons()
+
+
+with st.spinner("Inflating balloons..."):
+    await asyncio.sleep(5)
+release_the_balloons()
+st.button("Inflate more balloons", help="Full rerun")

packages/sharing-editor/public/samples/011_component_gallery/pages/layout.columns_bottom_widgets.py

@@ -0,0 +1,7 @@
+import streamlit as st
+
+left, middle, right = st.columns(3, vertical_alignment="bottom")
+
+left.text_input("Write something")
+middle.button("Click me", use_container_width=True)
+right.checkbox("Check me")

packages/sharing-editor/public/samples/011_component_gallery/pages/layout.columns_vertical_alignment.py

@@ -0,0 +1,14 @@
+import streamlit as st
+import numpy as np
+
+vertical_alignment = st.selectbox(
+    "Vertical alignment", ["top", "center", "bottom"], index=2
+)
+
+left, middle, right = st.columns(3, vertical_alignment=vertical_alignment)
+left.image("https://static.streamlit.io/examples/cat.jpg")
+left.markdown("By [@phonvanna](https://unsplash.com/photos/0g7BJEXq7sU)")
+middle.image("https://static.streamlit.io/examples/dog.jpg")
+middle.markdown("By [@shotbyrain](https://unsplash.com/photos/rmkIqi_C3cA)")
+right.image("https://static.streamlit.io/examples/owl.jpg")
+right.markdown("By [@zmachacek](https://unsplash.com/photos/ZN4CzqizIyI)")

packages/sharing-editor/public/samples/011_component_gallery/pages/utilities.html.py

@@ -1,11 +1,3 @@
 import streamlit as st
 
-code = """
-<style>
-    p {
-        color: red;
-    }
-</style>
-"""
-st.html(code)
-st.markdown("Lorem ipsum")
+st.html("<p><span style='text-decoration: line-through double red;'>Oops</span>!</p>")