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