Streamlit で react-flow を使用したい
こんにちは、 @kz_morita です。
react-flow という Node ベースのグラフ UI を作成するためのライブラリがあるのですが、 Data の Lineage などを表示するのに便利そうだなと思いました。
Streamlit 上から、これを呼び出せたら便利だなーと思って調べていたのでメモです。
Streamlit と React Flow を連携させる Streamlit 上で React Flow を描画しようとした際に、Streamlit も Front 側 React だから、連携できるかなーと調べていたのですが、streamlit-react-flow という Wrapper を実装されている方がいて、利用できそうでした。
https://github.com/rajagurunath/streamlit-react-flow 公式に書いてあるとおり、以下のような記述で streamlit 上に react flow の node を描画することができました。
from streamlit_react_flow import react_flow import streamlit as st def main(): st.title("React-Flow Test") st.subheader("Friends Graph") elements = [ { "id": '1', "data": { "label": 'Guru' }, "type":"input","style": { "background": '#ffcc50', "width": 100 }, "position": { "x": 100, "y": 100 } }, { "id": '2', "data": { "label": 'Achyuth' },"position": { "x": 300, "y": 100 }}, { "id": 'e1-2', "source": '1', "target": '2', "animated": True }, ] elements.