graph-viewer

Integrates a reusable CDF graph viewer, exposed through a useGraphViewer hook, into a Flows app by copying a local code bundle rather than installing a package. It is intended for embedding an interactive graph of a CDF data model, including nodes, direct relations, edges, and reverse relations, and is explicitly not for static diagrams, pure dataflow visualizations, or non-CDF graphs. Prerequisites are that the app is wrapped in @cognite/dune's DuneProvider so useDune() returns an authenticated SDK, that the target data model's space, externalId, and version are known, and that the app uses React 18+ with TypeScript.

The integration workflow is ordered and adapts to the target repo's conventions: inspect the app's package.json and folder structure and path aliases, install any missing dependencies with the app's package manager, copy every file from the skill's code bundle into an app-local feature folder (for example src/features/graph-viewer/), import from that local folder rather than from an @skills path, render GraphCanvas inside a container with an explicit height, and run typecheck and build to fix any path or type issues introduced by the copy. A minimal example shows useGraphViewer taking a dataModel (space, externalId, version) and an instance (space, externalId) and returning GraphCanvas along with isLoading and error for handling loading and error states. Suggested dependencies include react (peer, reusing the app's version), @cognite/sdk, @cognite/dune, reagraph as the WebGL rendering engine, and lucide-react for the node-type legend icons, with the guidance to defer to versions the app already pins.

Because graph expansion can issue many CDF requests (especially with reverse relations), the skill provides cost and performance controls: set whitelistedRelationProps to only the properties the app needs to traverse, lower initialConnectionLimit (a hard maximum of connections fetched per expansion), lower maxNodes to bound the in-memory LRU buffer, and declare coreReverseQueries only for relations that must be surfaced, noting those tuples are version-aware in the form [space, viewExternalId, viewVersion, propertyName, isList]. A verification checklist confirms DuneProvider wrapping, that the bundle was copied locally with imports pointing at the local folder, that required dependencies are present, that the GraphCanvas container has an explicit height, that typecheck and build pass, and that no references to dune-industrial-components were introduced. Fuller configuration, return-value docs, layouts, and theming live in the bundle's code/README.md.