今回はStreamlitのコンポーネントであるbarfiを少し改造した話です。
「そもそもbarfiって何よ」という方、以前作成した記事に説明がありますので、そちらを見ていただけたらと思います。
何を改造するのかですが、中編で話した「ノードの色を変える」をやってみます。
中編はこちら↓
ダウンロード
以前の記事でも言及していますが、barfiはStreamlitのコンポーネントで、オープンソースです。pip install barfiで簡単に使えるようになります。ただ、今回はbarfiの中身をいじるため、barfi自身をダウンロードしてくる必要があります。GitHubのページからダウンロードしてください。
ノードの色がどこで変えられているかの特定
barfiの実装で用いられている言語は、半数以上のPythonに加えて、Webのフロントエンドとしてよく用いられる言語（Vue、JavaScript、CSS、HTML）が構成の大半を占めています。barfiのコードの受け口がPythonであること、表示がWeb上であることからCSSがノードの色を牛耳っているのではないでしょうか。
barfiの言語構成WEB上での確認
barfiを実装したStreamlitのページに来ています。
「右クリック」→「検証」を選択することで、該当ページのHTMLの構成を確認することができます。
主に画像の2つの赤枠の情報を参考にすることで、以下の2点が確認できました。
- ノードのクラスが「node –type-{ノードの種類}」で指定されていること
- ノードのタイトルの背景色は、.nodeというクラスセレクタのプロパティ「–node-title-bg」で指定されていること
コード上での確認
では、これがコードだとどこで設定しているかを確認していきます。
barfi内で「–node-title-bg」という文言を使用しているファイルを検索すると、
frontend/src/assets/styles.cssというファイルがヒットしました。
styles.cssのノードタイトル背景色指定部分画像のハイライトの部分が背景色を指定している部分になります。
あとは、このファイル内で背景色指定を上書きするだけで、改造完了です！
色の変更
ノードの種類ごとに色を変えたいので、指定されたノードごとに背景色を上書きする設定を追記します。
方法は簡単で、以下の2つの手順を踏むだけです。
1.下記のように、条件を上書きするコードを先ほどのファイル(frontend/src/assets/styles.css)の末尾に追記。
.--type-load {
--node-title-bg: rgb(0, 210, 0) !important;
}- .–type-load:ノードの種類の指定
- –node-title-bg:プロパティの指定
- rgb(0, 210, 0):色の指定
- !importance:「この設定を優先する」の意味
2. styles.cssの変更を反映させるために、frontend直下で「npm run build」コマンドを実行
（初回の場合、「npm install」コマンドの実行も必要）
中編で作成した各ノードの色を、黒から変更してみました！
どのノードがどのような操作を行っているのかが直感的にわかりやすくなったのではないでしょうか。
データ読み込み：緑、スケーリング：黄、NULLの削除：水、データの結合：橙、データの保存：赤最後に
barfiのノードの色を変えてみました。
コンポーネントの構成を理解できれば、気になる点は自分でカスタマイズも可能ですね。
淡々と説明してありますが、裏ではめちゃくちゃ苦戦しました。協力いただいた方々にはこの場を借りて感謝します。本当にありがとうございました！
今回はここまで！
