mcpField
G
graph-viewer

graph-viewer

github.com/cognitedataデータ・データベース61.9k 回インストール1 日前に更新
リポジトリ

graph-viewer について

Flows アプリに CDF データモデルのインタラクティブなビューを埋め込むためのスキルです。React のグラフキャンバスの統合と、リクエスト量やグラフ規模の制限方法を開発者に案内します。

主な機能

  1. 01CDF モデルのインタラクティブなグラフ
  2. 02ノードとリレーションの可視化
  3. 03React GraphCanvas の統合
  4. 04クエリ数とノード数の制限
  5. 05統合とビルドのチェックリスト

活用シーン

  1. 01CDF インスタンス周辺のリレーション探索
  2. 02Flows アプリへのデータモデルグラフの埋め込み
  3. 03グラフ展開時の CDF リクエスト抑制

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/cognitedata/builder-skills --skill graph-viewer

インストール後、Claude Code で/graph-viewerを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

code/
graph-config.ts
graph-service.ts
GraphViewerCanvas.tsx
GraphViewerLegend.tsx
index.ts
README.md
types.ts
useCanvasResize.ts
useDataModelLoader.ts
useGraphDataPipeline.ts
useGraphSelection.ts
useGraphViewer.tsx
useNodeBuffer.ts
useSeedNode.ts
ZoomControls.tsx

詳細

グラフビューア

このツールを使う場面

ユーザーが、CDF データモデルのノード、直接のリレーション、エッジ、逆リレーションを表示するインタラクティブなグラフを Flows アプリに埋め込みたい場合に使用します。

静的な図、純粋なデータフローの可視化、CDF 以外のグラフには、このスキルを使用しないでください。

前提条件

  • アプリが @cognite/dune の <DuneProvider> でラップされており、useDune() が認証済み SDK を返すこと。
  • 対象のデータモデルが CDF に存在し、その space、externalId、version がわかっていること。
  • アプリが React 18 以降と TypeScript を使用していること。

統合ワークフロー

以下の手順を順番に実行します。新しい規約を独自に作るのではなく、対象リポジトリの規約に合わせてください。

  1. 対象アプリを確認します。 package.json を読み、既存のフォルダー構成（例：src/features/*、src/components/*、@/* などのパスエイリアス）を確認します。

  2. 不足している依存関係を アプリのパッケージマネージャー（npm、pnpm、yarn など）でインストールします。用途と推奨バージョンについては、以下の依存関係の表を参照してください。アプリで固定されている React のバージョンをアップグレードせずに再利用し、ここに記載された推奨バージョンよりも、リポジトリで固定されているバージョンを優先してください。

  3. バンドルをアプリにコピーします。 skills/graph-viewer/code/ 内のすべてのファイルを、次の例のようにアプリ内の機能フォルダーにコピーします。

    src/features/graph-viewer/

    リポジトリで異なる機能／コンポーネントの構成やエイリアスを使用している場合は、それに合わせてください。

  4. ローカルフォルダーからインポートします。 @skills/... からはインポートしないでください。一般的な @/* エイリアスの場合：

    import { useGraphViewer } from "@/features/graph-viewer";

  5. 明示的にサイズを指定したコンテナー内に GraphCanvas をレンダリングします（高さは必須です。以下の最小限の例を参照してください）。

  6. 型チェックとビルドを実行し（tsc --noEmit、npm run build など）、コピーによって発生したパスや型の問題を修正します。

最小限の例

import { useGraphViewer } from "@/features/graph-viewer";

export function GraphPanel() {
  const { GraphCanvas, isLoading, error } = useGraphViewer({
    dataModel: { space: "my-space", externalId: "my-data-model", version: "1" },
    instance: { space: "my-instance-space", externalId: "pump-001" },
  });

  if (isLoading) return <div>Loading graph…</div>;
  if (error) return <div>Error: {error}</div>;

  return <GraphCanvas className="h-[600px] w-full" />;
}

依存関係

推奨バージョンは、執筆時点で公開されている最新のメジャーバージョンです。これらは出発点として示しています。対象アプリで別のバージョンがすでに固定されている場合は、アプリのバージョンを優先してください。

パッケージ推奨バージョン用途
react^18.2.0UI フレームワーク（ピア依存関係。アプリのバージョンを再利用）
@cognite/sdk^10.10.0CDF API クライアント（インスタンス、データモデル）
@cognite/dune^2.1.0useDune() 経由で認証済み SDK を提供
reagraph^4.30.8WebGL グラフレンダリングエンジン
lucide-react^1.14.0ノードタイプの凡例で使用するアイコンセット

インストール例（npm。アプリのパッケージマネージャーに合わせてください）：

npm install @cognite/sdk@^10.10.0 @cognite/dune@^2.1.0 reagraph@^4.30.8 lucide-react@^1.14.0

CDF のコストとパフォーマンス

グラフの展開では、多数の CDF リクエストが発生することがあります。特に逆リレーションを扱う場合は注意が必要です。大規模なデータモデルや不慣れなデータモデルでは、控えめな設定にしてください。

  • whitelistedRelationProps には、アプリが実際にたどる必要のあるプロパティのみを設定します。
  • initialConnectionLimit を小さくします（展開ごとに取得される接続数のハード上限です）。
  • maxNodes を小さくして、メモリ内の LRU バッファーのサイズを制限します。
  • アプリで表示する必要があるリレーションのみ coreReverseQueries に指定します。エントリーを1つ追加するごとに、展開ごとにクエリが1つ追加されます。

coreReverseQueries のタプルはバージョンを考慮します。 [space, viewExternalId, viewVersion, propertyName, isList]。

詳細リファレンス

設定テーブル、戻り値のドキュメント、レイアウト、テーマ設定、より詳しい使用例については、code/README.md を参照してください。

実装の詳細を確認するには、code/ 以下のソースファイルを調べてください。

検証チェックリスト

  • アプリが <DuneProvider> でラップされています。
  • skills/graph-viewer/code/ のすべてのファイルが、アプリ内のフォルダーにコピーされています。
  • インポート先がアプリ内のフォルダー（例：@/features/graph-viewer）になっており、@skills/... ではありません。
  • @cognite/dune、@cognite/sdk、reagraph、lucide-react が package.json に含まれています。
  • <GraphCanvas> をレンダリングするコンテナーに明示的な高さが設定されています。
  • tsc --noEmit とアプリのビルドがどちらも成功します。
  • dune-industrial-components への参照が追加されていません。

コメント

Markdown 対応