Sardine は、リスク管理、コンプライアンス、決済保護ソリューションを提供するプラットフォームであり、企業が顧客からの信頼とロイヤルティを高められるよう支援します。私たちのプラットフォームにおいて重要な要素のひとつは、顧客データ内に存在する複雑な関係性を理解することです。
このブログ記事では、Reactアプリケーションでインタラクティブなグラフを描画できる、柔軟で使いやすいライブラリである React Flow を使って、強力なネットワーク可視化ツールを構築する手順を紹介します。このカスタマーネットワークグラフは、クライアントや顧客、デバイス、連絡先情報といったさまざまなエンティティ間のつながりを可視化し、データドリブンな意思決定プロセスにとって非常に有益なインサイトを提供します。ユーザーはアカウントをクラスタリングし、資金の流れを特定し、Sardine のケース管理システムでフォローアップが必要なアクティビティにフラグを立てることができます。
カスタムノードの作成とグラフデータの取得
顧客ネットワークグラフでは、さまざまなエンティティを表現するために、複数のカスタムノードタイプが必要です。カスタムノードを作成するには、まず機能コンポーネントを定義し、その後 CSS を使ってスタイルを適用します。以下は、メールアドレス、電話番号、デバイスを表すシンプルなカスタムノードの例です。
そして、ノードタイプの定数を定義し、それを後で ReactFlow に渡すことで、ReactFlow がカスタムノードのさまざまなデザインを認識できるようにします。
グラフデータの処理とノード位置の計算
生のグラフデータを処理し、React Flow が理解できる形式に変換するために、次のようないくつかの処理を行います。
- 生のグラフのノードとエッジを、ReactFlowNode 型と ReactFlowEdge 型に変換します。
- ELK を使用してノードの位置を計算するために、ElkNode と ElkEdge を生成します。
- ユーザーが定義した条件に基づいてノードとエッジをフィルタリングし、表示します。
ELK のアルゴリズムについてはこちらから確認できます。
グラフの描画とユーザー操作の処理
処理済みのグラフデータと計算されたノードの位置がそろったので、React Flow を使ってグラフを描画できます。また、ノードやエッジの選択、ズーム、パン、コンテキストメニューといったユーザー操作も扱います。
この実装により、ネットワークグラフを表示できる強力でインタラクティブなネットワーク可視化ツールを利用できるようになります。さらに、このツールはニーズや要件に合わせてカスタマイズすることができます。グラフの機能拡張として、ユーザー体験を向上させ、ネットワーク可視化ツールにより多くの機能を持たせるために、フィルタリング、コンテキストメニュー、ツールチップなどの機能を実装して拡張することができます。
フィルタリング
ユーザーがノードやエッジを、その種類やその他のプロパティに基づいてフィルタリングできるようにするには、さまざまなノードタイプやエッジタイプの表示・非表示を切り替えられるフィルターパネルを作成します。そのうえで、ユーザーの選択内容に基づいて、グラフ内に表示するノードとエッジを更新します。
コンテキストメニュー
ユーザーにコンテキストに応じた操作を提供するには、ノードやエッジ、またはグラフの背景を右クリックしたときに表示されるコンテキストメニューを実装できます。これらのコンテキストメニューでは、ノードの追加や削除、エッジのプロパティ編集、関連リソースへの移動といった操作を提供できます。
ツールチップ
ノードやエッジに関する追加情報をユーザーに提供するには、グラフ要素にカーソルを乗せたときに表示されるツールチップを実装できます。ツールチップには、ノードやエッジのラベル、メタデータ、その他の関連情報などのプロパティを表示できます。
結論
結論として、React Flow の強力な機能とさまざまなカスタマイズオプションを活用することで、特定の要件に合致した、高いインタラクティブ性と視覚的な魅力を備えたネットワーク可視化ツールを構築できます。これにより、ユーザーはデータを効果的に探索・分析でき、より優れた洞察と意思決定につなげることが可能になります。
さまざまなレイアウトアルゴリズムやカスタマイズオプションを試して、あなたのユースケースに最も適したものを見つけてください。可能性は無限に広がっており、適切な機能とデザインを組み合わせることで、本当に優れたネットワーク可視化体験を生み出すことができます。