前から検討を進めてきたテーマであるが、ついに全面的に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は不要と判断した。