LoginSignup
2

More than 1 year has passed since last update.

やはりStreamlitは素晴らしかった。REACTはもう要らない・・・泣

Last updated at Posted at 2022-10-26

前から検討を進めてきたテーマであるが、ついに全面的にReactから離脱する瞬間が来たようだ。

内容

そもそも、VIS.JSでネットワーク図を書いていて、すこしユーザービリティを追加しようとして、
REACTを覚えかけていた瞬間であるが、ずばりReactを覚える前に、Streamlitで同様の機能が
さらりと実装できてしまった。

アプリについて

まずは実物を拝んでもらうことに尽きる。

movie https://fb.watch/goNSkif6Wi/

追加仕様

今回追加した仕様は、参加者ごとのフィルタ機能である。

仕様の追加は何のことは無い。

・マルチセレクトでdataframeからユニークなラベルリストを抽出
・選択された名前で、dataframeにチョメチョメ処理を追加

たったのこれだけである。

python.py
    person = st.sidebar.multiselect(
        'Select your favorite parson',
        df['person'].unique().tolist(),df['person'].unique().tolist())

    event = st.sidebar.multiselect(
        'Select your favorite parson',
        df['event'].unique().tolist(),df['event'].unique().tolist())

    nodes,edges = choice_graph(nodes,edges,person,event)

全体のリスト

agraphというのは、こっちのソースを使った。

python.py

def choice_graph(nodes,edges,person,event ):

    nodes_choice = []   
    edges_choice = []

    #optionリストの対象人物のNODEとEDGEを抽出して削除する
    for person in person:
        nodes_choice.extend([i for i in nodes if i.id == person])
        edges_choice.extend([i for i in edges if i.source == person])

    nodes_buf = set([])
    for item in edges_choice:
        for i in nodes:
            if( i.id == item.to and i.id in event):
                nodes_buf.add(i)
                
    nodes_choice.extend([x for x in nodes_buf])

    return nodes_choice,edges_choice


data = dataload('data.json')

if st.session_state.login == True:

    reduce_header_height_style = """
        <style>
        div.block-container {padding-top:1rem;}
        </style>
        """
        
    st.markdown(reduce_header_height_style, unsafe_allow_html=True)
    
    nodes, edges=fetchCrossvalidData(data)
    df = pd.DataFrame.from_dict(data)
    st.sidebar.title("連関図")
    person = st.sidebar.multiselect(
        'Select your favorite parson',
        df['person'].unique().tolist(),df['person'].unique().tolist())

    event = st.sidebar.multiselect(
        'Select your favorite parson',
        df['event'].unique().tolist(),df['event'].unique().tolist())

    nodes,edges = choice_graph(nodes,edges,person,event)

    config = Config(
            width=2000,
            height=1000,
            directed=True,
            nodeHighlightBehavior=True,
            highlightColor="#F7A7A6", 
            collapsible=True,
            edges = {
                "smooth": True,
            }
            )

    return_value=agraph(nodes=nodes,
                            edges=edges,                       config=config)

結論

REACTコンポーネントに触れることなく、機能が実装できた。
ゆえにREACTは不要と判断した。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2