其他
在 Flows 应用中嵌入 CDF 数据模型交互式图谱时…
需要在 Flows 应用内展示 CDF 数据模型的节点、直接关系、边和反向关系交互图时，按本地代码包方式集成 useGraphViewer。
🧪 尚未被验证（还没有小呱复用过的记录，不代表不好）
GDI C 35/100
进化评分（GDI）
综合排序依据 —— 四个维度的加权结果，让你看出「为什么这条排在前面」
内在质量 55/100 ×0.35
使用度 0/100 ×0.30
口碑 50/100 ×0.20
新鲜度 38/100 ×0.15
适用场景
在 Flows 应用中嵌入 CDF 数据特定
解决思路
- 检查目标应用：读取 package.json，查看现有目录结构（如 src/features/*、src/components/*）和路径别名（如 @/*）。
- 按应用包管理器（npm、pnpm、yarn 等）安装缺失依赖；优先复用应用已固定的版本，不要为了此技能升级 React 版本；参考依赖表：react ^18.2.0（peer，复用应用版本）、@cognite/sdk ^10.10.0、@cognite/dune ^2.1.0、reagraph ^4.30.8、lucide-react ^1.14.0。示例：npm install @cognite/sdk@^10.10.0 @cognite/dune@^2.1.0 reagraph@^4.30.8 lucide-react@^1.14.0。
- 将 skills/graph-viewer/code/ 中的每个文件复制到应用本地的 feature 文件夹，例如 src/features/graph-viewer/；如果仓库已有不同的 feature/components 布局或别名，按仓库约定镜像该布局。
- 从本地文件夹导入 useGraphViewer，不要从 @skills/... 导入；在典型 @/* 别名下使用 import { useGraphViewer } from "@/features/graph-viewer";。
- 在具有显式尺寸（高度必须显式）的容器中渲染 GraphCanvas。
- 运行类型检查和构建（如 tsc --noEmit、npm run build 等），并修复复制引入的路径或类型问题。
- 使用 useGraphViewer 时传入 dataModel: { space, externalId, version } 和 instance: { space, externalId }；从返回值解构 GraphCanvas、isLoading、error；加载时显示 Loading，错误时显示 error；最后在具有显式高度的容器中渲染 <GraphCanvas className="h-[600px] w-full" />。
- 针对大型或不熟悉的数据模型做保守配置：将 whitelistedRelationProps 设为应用实际需要遍历的少数属性。
- 降低 initialConnectionLimit（它是每次扩展获取连接数的硬上限）。
- 降低 maxNodes 以限制内存中的 LRU 缓冲区大小。
- 只为应用必须展示的关系声明 coreReverseQueries；每个条目会在每次扩展时增加一次查询。
- coreReverseQueries 中的元组是版本感知的：[space, viewExternalId, viewVersion, propertyName, isList]。
- 需要完整配置表、返回值文档、布局、主题和更多示例时，阅读 code/README.md。
- 需要实现细节时，检查 code/ 下的源文件。
- 验证：应用包裹在 <DuneProvider> 中。
- 验证：已把 skills/graph-viewer/code/ 中的所有文件复制到应用本地文件夹。
- 验证：导入指向应用本地文件夹（如 @/features/graph-viewer），而不是 @skills/...。
- 验证：package.json 中存在 @cognite/dune、@cognite/sdk、reagraph 和 lucide-react。
- 验证：渲染 <GraphCanvas> 的容器具有显式高度。
- 验证：tsc --noEmit 和应用构建均通过。
- 验证：没有引入对 dune-industrial-components 的引用。
适用边界 · 注意事项
- 不要用于静态图。
- 不要用于纯数据流可视化。
- 不要用于非 CDF 图谱。