Zenn
Open9

Plotly-Dash備忘録

Python
plotly
でんちゅーでんちゅー

Including Local CSS and JavaScript

  • /assets/という名称のディレクトリに格納している以下のファイルは自動的にローディングされる
    • .cssで終わるcssファイル
    • .jsで終わるjsファイル
    • favicon.icoという名称のファイル
  • アルファベット順に読み込まれるので、順番を指定したければ10_typography.cssのように数字を先頭に付ける
  • /assets/を読み込むには、Dashのコンストラクタで__name__を指定する必要がある

https://dash.plotly.com/external-resources

でんちゅーでんちゅー

Persistence(永続性)

  • 永続性：dash-tableでサポートされているもので、前回指定したフィルタ条件等を次回以降アクセス時も保持しておくような機能

  • 以下の３種類のPersistenceを指定することが可能

    • memory：メモリ保存
      • ページ更新時にリセットされる
      • タブ切り替え時には保持され、リロード時にはリセット

  • local：window.localStorageを使用

    • そのコンピュータのそのブラウザ内で無期限にデータが保持される

  • session：window.localStorageを使用

    • ページリロード時はデータを保持
    • ブラウザを閉じるか新しいブラウザのタブで開くとリセット

https://dash.plotly.com/persistence

でんちゅーでんちゅー

Dash Dev Tools

  • Dashアプリの開発時に有効なツールで、デバッグと開発を快適にするためのもの
  • 以下の機能が存在している
    • コールバックグラフ
      • コールバックがどのような順序で実行され、どれくらいの時間がかかり、どのようなデータがウェブブラウザのDashアプリとPythonコードの間でやり取りされるかを表示する
    • コード再読み込み
    • ホットリロード
    • アプリ内エラーレポート
    • コンポーネント検証
  • これらの機能はrunでdebug=Trueのときにオンになる

https://dash.plotly.com/devtools

でんちゅーでんちゅー

Loading States

  • dash_core_componentsまたはdash_html_componentsの全てのコンポーネントにはloading_stateプロパティがある
  • ここにはコンポーネントがロード中かどうかを示すis_loadingプロパティが含まれる
  • component_nameとprop_name属性はそのコンポーネントの名前とロード中のプロパティの名前(=layout)を返す
  • このプロパティによって、コンポーネントがロード中である場合の挙動を定義することが可能
  • 代表的な使用方法でいうとコンポーネントがロード中にローディングスピナーを表示しておく等の処理が挙げられる

https://dash.plotly.com/loading-states

でんちゅーでんちゅー

Dash Testing

  • dash.testingではカスタムpytest-fixtureとユニットテストとエンドツーエンドテストのためのテストAPIを提供している
  • 以下のコマンドでinstallできる
py -m pip install dash[testing]

Unit Tests

  • dash.testingはコールバックのユニットテストをサポートしている

Mocking Callback Context

  • コールバックをテストするにはcallback_contextをモックする必要がある
  • callback_contextのモックには以下のimportが必要
from contextvars import copy_context
from dash._callback_context import context_value
from dash._utils import AttributeDict

End-to-End Tests

  • dash.testingはEnd-to-Endのテストもサポートしている
  • Selenium Gridお使ってテストを実行する場合はWebDriverをインストールする必要がある

https://dash.plotly.com/testing

でんちゅーでんちゅー

Dash App Life Cycle

  • py -m app.pyまたはgunicornn app:serverが実行されると、Dashアプリ内の全てのファイルが実行される。
  • pd.read_csvのような処理はプログラム開始時に実行されるため、csvに変更があった場合は再起動するまで反映されない
  • この場合、定期的なタスクでデータを提供するか、app.layoutをロードごとにレイアウトを再生成する関数として設定することが有効

https://dash.plotly.com/app-lifecycle

でんちゅーでんちゅー

Use Tailwindcss in Dash

  • Dashコンストラクタのexternal_scripts引数にTailwind-cdnのURLをリスト形式で渡すことで使用可能になる
app = Dash(
    __name__,
    # use_pages=True,
    external_scripts=["https://tailwindcss.com/", {"src": "https://cdn.tailwindcss.com"}]
)