graph-viewer

Graph Viewer

Use This When

The user wants to embed an interactive graph of a CDF data model — nodes, direct relations, edges, and reverse relations — inside a Flows app.

Do not use this skill for static diagrams, pure dataflow visualizations, or non-CDF graphs.

Prerequisites

• The app is wrapped in @cognite/dune's <DuneProvider> so useDune() returns an authenticated SDK.
• The target data model exists in CDF and you know its space, externalId, and version.
• The app uses React 18+ and TypeScript.

Integration Workflow

Follow these steps in order. Adapt to the target repo's conventions instead of inventing new ones.

1. Inspect the target app. Read package.json and look at the existing folder structure (e.g. src/features/*, src/components/*, path aliases like @/*).

2. Install missing dependencies with the app's package manager (npm, pnpm, yarn, …). See the Dependencies table below for purposes and suggested versions. Reuse the React version already pinned by the app rather than upgrading it, and prefer any versions the repo already pins over the suggestions here.

3. Copy the bundle into the app. Copy every file from skills/graph-viewer/code/ into an app-local feature folder, for example:

   src/features/graph-viewer/
   

   If the repo already has a different feature/components layout or alias, mirror it.

4. Import from the local folder, never from @skills/.... With a typical @/* alias:

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

5. Render GraphCanvas inside a container with explicit dimensions (height is required — see the minimal example below).

6. Run typecheck and build (tsc --noEmit, npm run build, etc.) and fix any path or type issues introduced by the copy.

Minimal Example

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" />;
}