【ガントチャートアプリ】タスクの追加・更新・削除の機能実装【Streamlit+Plotly】

Python Webアプリ Streamlit

お疲れ様です。

今回はガントチャートアプリの追加機能実装についてです。
前回の記事はこちら↓

fallpoke-tech.hatenadiary.jp

実装したのはタスク内容の追加・更新・削除の機能です。 csvファイルを読み込んだDataFrameで管理していますが、それを操作してアプリ上の表とガントチャートにも反映させる形を目指して作成しました。

ソースコード

今回作成したところまでのソースコードは以下になります。「ver20250530」のタグを設定しています。

github.com

作成した機能について

一覧表の選択機能とボタン表示

前回までで作成していたタスク一覧表の下の位置にタスクの追加・更新・削除のボタンを追加しました。このうち更新と削除のボタンはタスク一覧表でタスクを選択することで有効化されるようにしています。

  • タスク未選択時

  • タスク選択時

タスク選択についてはStreamlitのDataFrame表示の機能として存在しています。 st.dataframeの引数selection_modeを設定します。今回は1行のみの選択としたかったので"single-row"で指定しています。 event.selection["rows"]にDataFrameのindexが入っているのでこれを使って実際の行を抽出できます。 この後のダイアログ表示したときに使用するためSTATE（=st.session_state） に格納しています。

# タスクリストを表示
event = st.dataframe(
    STATE.tasks_df, selection_mode=["single-row"], on_select="rerun", hide_index=True
)
STATE.select = event.selection["rows"]

その他詳しい内容は公式ドキュメントを参照ください。

docs.streamlit.io

追加・更新・削除のダイアログ

ボタンを押すとダイアログが表示され、それぞれの機能に応じた入力ができます。 下記は追加ボタンを押したときのタスク登録ダイアログの表示です。 ガントチャート作成に必須になる「ラベル」の項目が未入力の場合や「開始日」が「終了日」より後の日付に設定された場合など、問題がある場合はエラー表示が出て登録のボタンが無効化されるようになっています。

  • ラベル未入力の状態

  • すべて正しく入力した状態

入力した内容は追加ボタンの場合だと末尾に1行追加して保存という流れになります。

# csvに追記し保存
add_task_info = pd.DataFrame(
    {key: [value] for key, value 
     in zip(STATE.tasks_df.columns, [task_label, start, end, status, task_description])}
)
task_df = pd.concat([STATE.tasks_df, add_task_info])
task_df.to_csv(data_path, encoding="cp932", index=False)

更新ボタンの場合、一覧表から選択して取得したindex（=STATE.select）を使用し、index指定で行を書き換えて保存。

# csvの指定列を更新し保存
task_df.loc[STATE.select, :] = [task_label, start, end, status, task_description]
task_df.to_csv(data_path, encoding="cp932", index=False)

削除ボタンの場合はindex（=STATE.select）でその行を削除し保存。一旦保存して描画時に再度読み込むのでindexがリセットされた状態になります。

# csvから削除し保存
task_df = STATE.tasks_df.drop(target_idx)
task_df.to_csv(data_path, encoding="cp932", index=False)

更新後の表示

登録すると再描画が走り、ガントチャートとタスク一覧表に反映されます。