Streamlit 1.35.0の新機能紹介

## Streamlitとは

StreamlitはPython向けのWebアプリケーションフレームワークです。  

https://streamlit.io/

Streamlitを使うとフロントエンドの知識ゼロでもデータを可視化するためのWebアプリケーションを簡単に作れます。以下のような機能が特徴。  
- 変数を地の文に書くだけで、GUIに出力される(**マジックコマンド**)
- `st.radio`や`st.text_input`のようなWidget APIを呼び出すだけで、GUIコンポーネントが生成される

## Streamlitの最新バージョン

Streamlitの最新バージョンは[Changelog](https://docs.streamlit.io/library/changelog)で確認できます。  
2024/5/23時点で最新バージョンは1.35.0です。  

https://docs.streamlit.io/library/changelog

1.35.0では次がHighlightsとしてアナウンスされています。  

- チャートのSelection
- DataFrameのSelection
- st.logo

また、```st.page_link```にGoogleマテリアルアイコンを表示できるようになりました。  

## チャートのSelection

SelectionというのはGUI上で選択したデータをPythonコード側で受け取れる機能です。  
Selectionは現時点では```st.plotly_chart```、```st.altair_chart```、```st.vega_lite_chart```の3つの高機能なチャートが対応していて、```st.line_chart```のようなシンプルなチャートでは残念ながら対応していません。  

```py:chart_selection.py
import streamlit as st
import plotly.express as px
import pandas as pd

# サンプルデータセットを読み込む
df = px.data.iris()

# Plotlyで散布図を描画する
fig_scatter = px.scatter(df, x="sepal_width", y="sepal_length")
selection = st.plotly_chart(fig_scatter, key="iris_scatter", on_select="rerun")

# selectionには選択されたデータが入っている
with st.expander("selection"):
    st.write(selection)

# selectionをDataFrameに変換してから表示する
df_selected = pd.DataFrame(selection["selection"]["points"])
st.dataframe(df_selected)
```

![chart_selection_exsample](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2917580/42ada3f3-a940-0ec7-fbb0-9b9e8c795b9e.png)

https://x.com/AkSakatoku/status/1794231173046304910  

このSelectionを使うためには以下の両方が必要になります。  
- ```key```パラメータを指定する
- ```on_select```パラメータに```rerun```を指定する

上記のパラメータを指定する関係上、チャートを操作するたびにアプリがRerunされます。必要に応じて元のデータをキャッシュするなどの対策をしておきましょう。  

上記のサンプルコードではPlotly Express (px)というサポートライブラリでチャートを生成していますが、```graph_objects```を使って1から```Figure```を生成しても問題なくSelectionを使うことができます。  

## DataFrameのSelection

チャートのSelectionと同様にGUI上で選択したデータをPythonコード側で受け取ることができます。  
```py:dataframe_selection.py
import streamlit as st
import plotly.express as px
import pandas as pd

# st.write("## Plotly Selection")

# サンプルデータセットを読み込む
df = px.data.iris()

selection = st.dataframe(df, key="iris_df", on_select="rerun", selection_mode=["multi-row", "multi-column"],)
st.code(selection)
```

![dataframe_selection.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2917580/8778ccfc-fc31-596b-f7e2-c41380ca64b5.png)

https://x.com/AkSakatoku/status/1794231287005454338  

チャートのSelectionと同様に、以下の両方が必要になります。  
- ```key```パラメータを指定する
- ```on_select```パラメータに```rerun```を指定する

列選択を有効にするためには```selection_mode```に```single-column```あるいは```multi-column```を指定する必要があります。  
また、1.35.0時点では、列選択を有効にするとDataFrameの列ソートが使えなくなるようです。  

## st.logo

メインページとサイドバーにロゴ画像を配置することができます。  
サイドバーが開かれているときはメインページのロゴが隠れるので二重に表示されないのがいい感じですね。  

```py:logo.py
import streamlit as st

# ロゴを選択する
logo = st.selectbox("ロゴを選択する", ["logo1", "logo2"], key="logo")

# 選択したロゴを表示する。できるだけ最初の方で実行する
st.logo(f"{logo}.png")

# サイドバーを開く
st.sidebar.write("This is a sidebar")

# 選択したロゴ画像は以下のもの
st.write("## Selected logo")
st.write("選択したロゴ画像は以下のもの")
st.image(f"{logo}.png")
```

![logo_example](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2917580/ac098aa9-8ac6-e9ca-b17d-c5631b2f4692.png)

https://x.com/AkSakatoku/status/1794231385483522073  

## st.page_linkへのGoogleマテリアルアイコンの表示

サブページにページリンクするときのリンクに表示するアイコンとしてGoogleマテリアルアイコンを使えるようになりました。  
これまでサブページのファイル名に絵文字を入れたり、```icon```パラメータに絵文字を指定したり(```icon="🔥"```みたいに)していたんですよね…  

```py:icon_material.py
import streamlit as st

st.page_link("pages/動物の写真を見る.py", icon=":material/pets:")
```

![icon_example](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2917580/6bc6345e-7922-3d0c-c263-df02e7124e91.png)

Googleマテリアルアイコンは下記のページから確認できます。  

https://fonts.google.com/icons

上記のページのアイコンの詳細からAndroidタブを選んだときに表示されるコードを使って、```":material/アイコンのコード:"```というように書けばOKです。  

![material-icon-code](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2917580/5f9e22b7-e1d5-e14b-4318-aeb2d3fd30a2.png)