mcpField
G
graph-viewer

graph-viewer

github.com/cognitedataデータ・データベース148 回インストール
リポジトリ

graph-viewer について

Graph Viewerは、ReactとTypeScriptを使ったDuneアプリに、CDFデータモデルのインタラクティブなグラフを組み込むスキルです。アプリ内に配置する機能一式と、展開設定や統合確認の手順を提供します。

主な機能

  1. 01ノードと関係のインタラクティブ表示
  2. 02直接・逆方向の関係の展開
  3. 03関係フィルターとクエリ上限の設定
  4. 04機能一式をアプリ内にコピー

活用シーン

  1. 01DuneアプリでのCDFデータモデルの探索
  2. 02選択したインスタンスの関係確認
  3. 03グラフ展開時のリクエスト数の制限

インストール

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

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

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

同梱ファイル

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

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

詳細

グラフビューアー

こんな場合に使用します

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

静的な図、純粋なデータフローの可視化、または 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 を宣言します。各エントリーは展開ごとに追加のクエリを発生させます。

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 対応