dsh-data-domain-knowledge 0.1.0-alpha.1

package/src/client/attribution/ViewSwitch.tsx

@@ -0,0 +1,107 @@
+import type { LucideIcon } from '@tita-data-agent/ui/icons'
+import type { ReactNode } from 'react'
+import { cn } from '@tita-data-agent/ui/components'
+
+export interface ViewSwitchItem<T extends string> {
+  id: T
+  label: string
+  icon: LucideIcon
+  /** 一句话说明「这个页面回答什么问题」。换页时跟着换，避免用户靠猜。 */
+  hint: string
+  /** 页签上的实时计数，例如 `21 节点`。没有就不显示。 */
+  meta?: string
+}
+
+/**
+ * 分段式页面切换（segmented control）。
+ *
+ * 为什么不用三个独立按钮：**独立按钮无法表达「这是一组互斥的页面」**。三个
+ * `variant` 会变的按钮在视觉上只是三个开关，用户要靠颜色去推「它们是单选」；
+ * 而分段的轨道 + 会滑动的白色胶囊把「同一组、选一个」直接画了出来 ——
+ * 位置本身就是状态，不需要读颜色。
+ *
+ * 滑块的位移用纯 CSS 算：轨道是 `auto-cols-fr` 的等宽栅格，滑块宽度取
+ * `(100% - 内边距) / 页数`，位移取 `index × 100%`（百分比是相对滑块自身宽度）。
+ * 这样**不需要测量 DOM**，也就不存在「测量时机不对导致滑块错位」这一类 bug ——
+ * 常见实现用 ref 量每个页签的 offsetLeft，窗口一缩放就要重算。
+ */
+export function ViewSwitch<T extends string>({ items, value, onChange, ariaLabel, showHint = true, className }: {
+  items: ReadonlyArray<ViewSwitchItem<T>>
+  value: T
+  onChange: (id: T) => void
+  ariaLabel: string
+  /**
+   * 是否自带那句说明。
+   *
+   * 关掉它，是因为调用方有时要把说明放到**切换器右边**（同一行）而不是下面 ——
+   * 页面级的那一条工具行就这么用：左端是切换器，右端是当前页在回答什么问题。
+   * 说明文案仍然来自 `items[].hint`，不复制第二份。
+   */
+  showHint?: boolean
+  className?: string
+}): ReactNode {
+  const index = Math.max(0, items.findIndex(item => item.id === value))
+  const active = items[index] ?? items[0]
+
+  const onKeyDown = (event: { key: string; preventDefault: () => void; currentTarget: HTMLElement }): void => {
+    const step = event.key === 'ArrowRight' || event.key === 'ArrowDown' ? 1
+      : event.key === 'ArrowLeft' || event.key === 'ArrowUp' ? -1
+        : 0
+    if (step === 0 || items.length === 0) return
+    event.preventDefault()
+    const next = (index + step + items.length) % items.length
+    const target = items[next]
+    if (!target) return
+    onChange(target.id)
+    // 焦点必须跟着走，否则键盘用户的下一次左右键会从旧位置继续算。
+    const nodes = event.currentTarget.querySelectorAll<HTMLElement>('[role="tab"]')
+    nodes[next]?.focus()
+  }
+
+  return <div className={cn('flex min-w-0 flex-col gap-1', className)}>
+    <div
+      role="tablist"
+      aria-label={ariaLabel}
+      onKeyDown={onKeyDown}
+      // 轨道刻意与面板自己的标签条（`.tita-tabsList`）用同一组颜色与圆角：
+      // 同屏出现两个分段控件时，它们要么明显是同一套，要么明显是两套 —— 差一点点最难看。
+      className="relative inline-grid grid-flow-col auto-cols-fr self-start rounded-[9px] border border-tita-line bg-tita-surface-muted p-[3px]"
+    >
+      {/* 滑块：装饰性元素，语义由 `aria-selected` 承载。 */}
+      <span
+        aria-hidden="true"
+        className="pointer-events-none absolute bottom-[3px] left-[3px] top-[3px] rounded-[7px] bg-tita-surface shadow-[0_1px_3px_rgb(15_23_42_/_0.16),inset_0_0_0_1px_var(--tita-primary-shadow)] transition-transform duration-200 ease-[cubic-bezier(0.22,0.61,0.36,1)]"
+        style={{ width: `calc((100% - 6px) / ${items.length})`, transform: `translateX(${index * 100}%)` }}
+      />
+      {items.map((item, itemIndex) => {
+        const Icon = item.icon
+        const on = itemIndex === index
+        return <button
+          key={item.id}
+          type="button"
+          role="tab"
+          aria-selected={on}
+          tabIndex={on ? 0 : -1}
+          data-state={on ? 'active' : 'inactive'}
+          onClick={() => onChange(item.id)}
+          className={cn(
+            // `border-0 bg-transparent` 不是装饰，是**必需的复位**：本仓库刻意不引入
+            // Tailwind preflight（它会连带重置宿主样式），所以裸 <button> 会带上浏览器的
+            // 2px outset 边框与 ButtonFace 底色 —— 结果一个分段控件看起来像三个凸起的小方块。
+            // shadcn 的 Button 与 TabsTrigger 各自复位过，这里同理。
+            'relative z-10 inline-flex w-full min-w-0 items-center justify-center gap-1.5 whitespace-nowrap rounded-[7px] border-0 bg-transparent px-[10px] py-[4px] font-[inherit] font-[650] leading-[inherit] transition-colors duration-150',
+            on ? 'text-tita-primary' : 'text-tita-ink-muted hover:text-tita-ink',
+          )}
+        >
+          <Icon size={13} />
+          <span className="text-[11.5px] leading-none">{item.label}</span>
+          {item.meta && <span className={cn(
+            'rounded-[4px] px-1 font-mono text-[9.5px] leading-[14px]',
+            on ? 'bg-tita-primary-soft text-tita-primary' : 'text-tita-ink-faint',
+          )} style={on ? undefined : { background: 'color-mix(in srgb, var(--tita-surface) 70%, transparent)' }}>{item.meta}</span>}
+        </button>
+      })}
+    </div>
+    {showHint && active && <p className="text-[10px] leading-snug text-tita-ink-muted">{active.hint}</p>}
+  </div>
+}

package/src/client/attribution/graph-options.ts

@@ -0,0 +1,381 @@
+import type { GraphData, GraphOptions, LayoutOptions } from '@antv/g6'
+import {
+  FAILURE_MODE_STYLE, isZombieEdge, nodeBoxOf, nodeShapeOf, nodeStyleOf, problemBadgeOf,
+  visibleEdges, visibleNodes,
+  type AttributionEdge, type AttributionGraphData, type AttributionNode, type AttributionEdgeKind,
+} from './model.ts'
+
+/**
+ * 我的模型 → G6 v5 的数据与配置。
+ *
+ * 这一层刻意做成**纯函数**：`toG6Data` 把每个节点的尺寸、颜色、徽标、虚线全部算成
+ * 显式样式对象，而不是交给 G6 的样式回调去闭包读数据。两个理由：
+ *
+ * 1. **可测**。node:test 里没有 canvas，跑不起 G6 实例；但只要映射是纯的，
+ *    「H6 是不是被标成空区」「僵尸边长什么样」就能在测试里断言。
+ * 2. **可推理**。样式的全部来源是数据，画布上看到什么就是模型里写了什么，
+ *    不存在「某处配置覆盖了另一处」的排查成本。
+ *
+ * 依据：0021 §7 的图谱视图规格（大小=复用次数、颜色=失败模式、红虚环=空区、
+ * 灰虚线=僵尸边），以及 AGENTS.md 的「尽可能使用已有的高 star 开源组件」——
+ * 布局与交互交给 G6，业务语义留在我们这边。
+ */
+
+/** G6 的节点/边数据里带业务原文，事件回调直接从 `data.node` 取，不做二次查表。 */
+export interface G6AttributionNode {
+  id: string
+  type: 'circle' | 'rect'
+  data: { node: AttributionNode }
+  style: Record<string, unknown>
+}
+
+export interface G6AttributionEdge {
+  id: string
+  source: string
+  target: string
+  data: { edge: AttributionEdge }
+  style: Record<string, unknown>
+}
+
+export interface G6AttributionData {
+  nodes: G6AttributionNode[]
+  edges: G6AttributionEdge[]
+}
+
+const FONT = '"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif'
+
+/** 九种边各自的外观。层内边实线、跨层边点线，`refutes` 一律红色虚线（一等公民）。 */
+const EDGE_STYLE: Record<AttributionEdgeKind, { stroke: string; lineWidth: number; lineDash?: number[] }> = {
+  may_be_caused_by: { stroke: '#93b4f8', lineWidth: 1.6 },
+  verified_by: { stroke: '#6b54cf', lineWidth: 1.3 },
+  categorized_as: { stroke: '#c9b8ff', lineWidth: 1.2, lineDash: [5, 4] },
+  produces: { stroke: '#b96d14', lineWidth: 1.2, lineDash: [2, 3] },
+  supports: { stroke: '#12875f', lineWidth: 1.4 },
+  refutes: { stroke: '#b42318', lineWidth: 1.6, lineDash: [5, 4] },
+  confirmed_as: { stroke: '#0f766e', lineWidth: 1.6 },
+  instance_of: { stroke: '#b96d14', lineWidth: 1.2, lineDash: [2, 3] },
+  indexed_from: { stroke: '#9ec2ff', lineWidth: 1.2, lineDash: [2, 3] },
+}
+
+/** 边的中文读法。**九种必须全有** —— 图例是通过遍历这个表生成的，漏一种就是漏一段语义。 */
+export const EDGE_KIND_LABEL: Record<AttributionEdgeKind, string> = {
+  may_be_caused_by: '可能是原因',
+  verified_by: '由…验证',
+  categorized_as: '归类为',
+  produces: '产出',
+  supports: '支持',
+  refutes: '否定',
+  confirmed_as: '确认为根因',
+  instance_of: '实例属于',
+  indexed_from: '反查索引',
+}
+
+/**
+ * 图例数据。
+ *
+ * 从 `EDGE_STYLE` / `EDGE_KIND_LABEL` **派生**而不是手写第二份清单：图例和画布
+ * 用的是同一个颜色来源，二者不可能再对不上。这也是「图例漂移」这类 bug 的根治
+ * ——它几乎总是因为样式和说明各写了一遍。
+ */
+export const EDGE_LEGEND: Array<{ kind: AttributionEdgeKind; label: string; stroke: string; lineWidth: number; lineDash?: number[] }> =
+  (Object.keys(EDGE_STYLE) as AttributionEdgeKind[]).map(kind => ({
+    kind,
+    label: EDGE_KIND_LABEL[kind],
+    ...EDGE_STYLE[kind],
+  }))
+
+const ZOMBIE_STYLE = { stroke: '#9aa4b2', lineWidth: 1.2, lineDash: [5, 4] }
+const GAP_STROKE = '#b42318'
+
+const BADGE_BASE = {
+  fill: '#748091',
+  fontSize: 9,
+  fontFamily: FONT,
+  backgroundFill: '#ffffff',
+  backgroundStroke: '#e5e9f0',
+  backgroundLineWidth: 1,
+  backgroundRadius: 6,
+  padding: [3, 6, 3, 6],
+}
+
+/**
+ * 一个节点的完整样式。
+ *
+ * 假设节点的文字**不放在圆里**：圆的直径由复用次数决定，把中文标题塞进去必然
+ * 要么截断要么缩到看不清。所以圆里只留 `H1` 这样的短 id，标题做成圆下方的徽标 ——
+ * 圆负责「多大、什么颜色」，徽标负责「叫什么」。
+ *
+ * 空区用「红色虚环 + 空区徽标」双重表达：只染灰不够 —— 维护者扫一眼时会把颜色
+ * 读成失败模式配色，只有虚线会被读成「这里少了东西」。
+ */
+export function nodeStyleFor(node: AttributionNode, gapIds: ReadonlySet<string>): Record<string, unknown> {
+  const [width, height] = nodeBoxOf(node)
+  const shape = nodeShapeOf(node)
+  const isGap = gapIds.has(node.id)
+  const palette = nodeStyleOf(node)
+  const style: Record<string, unknown> = {
+    size: shape === 'circle' ? width : [width, height],
+    fill: palette.fill,
+    stroke: isGap ? GAP_STROKE : palette.stroke,
+    lineWidth: isGap ? 2 : 1.5,
+    lineDash: isGap ? [4, 3] : undefined,
+    zIndex: node.layer === 'instance' ? 0 : 1,
+    // 圆里放 id（直径由复用次数决定，中文标题塞不进）；胶囊放标题。
+    // 案例例外：它的标题来自案例卡片、不含 id，而案例要靠 id 才能在复盘里被指认 ——
+    // 所以由画布把 id 拼回去，标题本身保持单一份来源。
+    labelText: shape === 'circle' ? node.id : node.kind === 'case' ? `${node.id} ${node.title}` : node.title,
+    labelPlacement: 'center',
+    labelFill: palette.text,
+    labelFontSize: shape === 'circle' ? 13 : 11,
+    labelFontFamily: FONT,
+    labelFontWeight: shape === 'circle' ? 700 : 500,
+    labelWordWrap: true,
+    labelWordWrapWidth: shape === 'circle' ? width - 14 : width - 20,
+    labelMaxLines: 2,
+    labelTextOverflow: 'ellipsis',
+    cursor: 'pointer',
+  }
+  if (shape === 'rect') style.radius = 8
+
+  const badges: Array<Record<string, unknown>> = []
+  const gapBadge = { ...BADGE_BASE, text: '空区 · 无检查', placement: 'top', offsetY: -10, fill: GAP_STROKE, backgroundStroke: '#f0b7ad' }
+  if (node.kind === 'symptom') {
+    // 问题侧的层次必须能在**画布上**读到，而不是只能靠筛选器猜。
+    // 用文字徽标而不是颜色：颜色通道已经被失败模式占满（见 model.ts 的 PROBLEM_CLASS_ORDER）。
+    const problem = problemBadgeOf(node)
+    if (problem) badges.push({ ...BADGE_BASE, text: problem, placement: 'bottom', offsetY: 12, fill: '#96580f', backgroundStroke: '#f2ddb8' })
+  } else if (node.kind === 'hypothesis') {
+    badges.push({ ...BADGE_BASE, text: node.title, placement: 'bottom', offsetY: 12, fill: palette.text, backgroundStroke: palette.stroke })
+    // 空区徽标必须和「复用 N」**互斥地**占用顶部位置，而不是写成 else-if ——
+    // 假设节点会先命中 hypothesis 分支，写成 else-if 的话空区徽标永远不会出现，
+    // 而空区恰恰总是假设节点。
+    badges.push(isGap ? gapBadge : { ...BADGE_BASE, text: `复用 ${node.reuseCount ?? 0}`, placement: 'top', offsetY: -10 })
+  } else if (node.kind === 'check') {
+    badges.push({ ...BADGE_BASE, text: `${node.costMinutes ?? '?'} min · ${node.automation === 'auto' ? '自动' : '人工'}`, placement: 'bottom', offsetY: 10, fill: node.automation === 'auto' ? '#12875f' : '#b96d14' })
+  } else if (isGap) {
+    badges.push(gapBadge)
+  }
+  if (badges.length > 0) style.badges = badges
+  if (node.stale) {
+    style.fillOpacity = 0.45
+    style.labelOpacity = 0.55
+  }
+  return style
+}
+
+export function edgeStyleFor(edge: AttributionEdge): Record<string, unknown> {
+  const zombie = isZombieEdge(edge)
+  const base = zombie ? ZOMBIE_STYLE : EDGE_STYLE[edge.kind]
+  const style: Record<string, unknown> = {
+    ...base,
+    endArrow: edge.kind === 'instance_of' || edge.kind === 'indexed_from',
+    endArrowType: 'triangle',
+    endArrowSize: 6,
+    zIndex: 0,
+    // 边标签默认会跟着边旋转，斜边上的中文就竖起来了。始终水平可读。
+    labelAutoRotate: false,
+    labelFontFamily: FONT,
+    labelBackground: true,
+    labelBackgroundFill: '#f6f8fb',
+    labelBackgroundRadius: 4,
+    labelPadding: [2, 4, 2, 4],
+  }
+  if (zombie) {
+    style.labelText = `僵尸边 ${edge.staleDays} 天未走`
+    style.labelFontSize = 9
+    style.labelFill = '#9aa4b2'
+  } else if (edge.count !== undefined) {
+    style.labelText = `${edge.count} 例`
+    style.labelFontSize = 9
+    style.labelFill = '#b96d14'
+  }
+  return style
+}
+
+/**
+ * 模型 → G6 数据。
+ *
+ * `includeInstance` 默认 false：实例层随每次排查线性增长，展开它会把类型层挤成
+ * 一堆小点 —— 而图谱视图要看的第一件事恰是类型层收不收敛。
+ */
+export function toG6Data(
+  data: AttributionGraphData,
+  options: { includeInstance?: boolean; gapIds: ReadonlySet<string>; positions?: Map<string, [number, number]> } = { gapIds: new Set() },
+): G6AttributionData {
+  const nodes = visibleNodes(data, options.includeInstance ?? false)
+  const edges = visibleEdges(data, nodes)
+  return {
+    nodes: nodes.map(node => {
+      const style = nodeStyleFor(node, options.gapIds)
+      // 力导向布局的初始位置：给了就落上去再松弛，没给就让 G6 自己随机。
+      const seed = options.positions?.get(node.id)
+      if (seed) { style.x = seed[0]; style.y = seed[1] }
+      return { id: node.id, type: nodeShapeOf(node), data: { node }, style }
+    }),
+    edges: edges.map(edge => ({
+      id: edge.id,
+      source: edge.source,
+      target: edge.target,
+      data: { edge },
+      style: edgeStyleFor(edge),
+    })),
+  }
+}
+
+/**
+ * 布局种类。
+ *
+ * `force` 是知识图谱的默认读法：没有「上→下」的方向，关系靠聚簇和距离表达，
+ * 节点可以拖，像一张会自己摊开的地图。
+ * `layered` 是**语义**读法：现象→假设→检查本来就是有向的 DAG，分层把这个方向
+ * 显式画出来 —— 代价是它看起来像流程图而不是知识图谱。
+ *
+ * 两个都留：默认 force 回答「这张图长什么样」，切到 layered 回答「谁是上游」。
+ */
+export type GraphLayout = 'force' | 'layered'
+
+/**
+ * 画布所处的容器档位。
+ *
+ * 它不是「主题」，而是**同一张图在两块不同大小的画布上的两套视口参数**：
+ * `panel` 是右侧边栏里的那一块（宽 380px 减去内边距，可用高度只有几百像素），
+ * `fullscreen` 是铺满视口的那一块。分开的理由是缩放区间与留白都按可用面积定，
+ * 用一套参数必然在某一档上过紧或过松。
+ */
+export type StageMode = 'panel' | 'fullscreen'
+
+/**
+ * 缩放区间。
+ *
+ * G6 的默认值是 `[0.01, 10]` —— 一千倍的区间意味着一次误滚轮就能把图缩成米粒，
+ * 或者放大到只剩一个圆。这里按「节点还能不能读」定上下界：面板里最小 0.55
+ * （标签仍可辨认），最大 1.8（再大就只剩徽标）；全屏可用面积大，两端各放宽一档。
+ */
+export const ZOOM_RANGE: Record<StageMode, [number, number]> = {
+  panel: [0.55, 1.8],
+  fullscreen: [0.4, 2.4],
+}
+
+/** 返回副本：调用方（G6 或测试）不应该能改到这份常量。 */
+export function zoomRangeFor(mode: StageMode): [number, number] {
+  return [...ZOOM_RANGE[mode]] as [number, number]
+}
+
+/**
+ * 画布留白 `[上, 右, 下, 左]`。
+ *
+ * 留白不是审美，是**浮层避让**：图例、分层切换、筛选条都是浮在画布上的，
+ * 留白不够时自动适配会把节点摆到浮层底下。上下留白明显大于左右，正是因为
+ * 浮层占据的是上下两条。
+ */
+export const STAGE_PADDING: Record<StageMode, [number, number, number, number]> = {
+  panel: [64, 18, 56, 18],
+  fullscreen: [86, 28, 78, 28],
+}
+
+export function paddingFor(mode: StageMode): [number, number, number, number] {
+  return [...STAGE_PADDING[mode]] as [number, number, number, number]
+}
+
+/**
+ * 计算初始位置：按 id 稳定排序后落在黄金角螺旋上。
+ *
+ * 存在的理由是**可复现**。d3-force 的初始位置默认随机，同一张图每次刷新都长成
+ * 另一个形状，于是「上次那个空区在右上角」这类空间记忆每次失效。先给一个确定性
+ * 的初始布局再让力导向松弛，得到的是「稳定但不僵死」的形状。
+ */
+export function seedPositions(data: AttributionGraphData, width: number, height: number): Map<string, [number, number]> {
+  const ids = data.nodes.map(node => node.id).sort()
+  const golden = Math.PI * (3 - Math.sqrt(5))
+  const radius = Math.min(width, height) / 2 - 40
+  const cx = width / 2
+  const cy = height / 2
+  const positions = new Map<string, [number, number]>()
+  ids.forEach((id, index) => {
+    const r = radius * Math.sqrt((index + 0.5) / ids.length)
+    const theta = index * golden
+    positions.set(id, [cx + r * Math.cos(theta), cy + r * Math.sin(theta)])
+  })
+  return positions
+}
+
+export function layoutOf(kind: GraphLayout, rankdir: 'LR' | 'TB'): LayoutOptions {
+  if (kind === 'layered') {
+    return { type: 'antv-dagre', rankdir, nodesep: 46, ranksep: 96, controlPoints: false }
+  }
+  return {
+    type: 'd3-force',
+    // 值都偏大：节点带下方徽标，挤在一起时徽标先重叠，比圆重叠更难看。
+    link: { distance: 170, strength: 0.5 },
+    manyBody: { strength: -520 },
+    // 半径按最宽的矩形节点（检查卡 156px）取一半再放余量。取小了的话，圆之间的
+    // 排斥算得没错，但 156px 宽的胶囊仍然会横向压到一起 —— 碰撞是按外接圆算的。
+    collide: { radius: 86, strength: 1 },
+    alphaDecay: 0.022,
+    velocityDecay: 0.45,
+  }
+}
+
+export function behaviorsOf(kind: GraphLayout): string[] {
+  // force 布局必须用 drag-element-force：它把拖动写回模拟，松手后图会继续摊开；
+  // 用 drag-element 的话拖动只改坐标，力模拟会在下一帧把节点拽回去。
+  return kind === 'force'
+    ? ['drag-canvas', 'zoom-canvas', 'click-select', 'drag-element-force']
+    : ['drag-canvas', 'zoom-canvas', 'click-select', 'drag-element']
+}
+
+/**
+ * G6 实例配置。
+ *
+ * `nodesep` 取 46 而不是默认的 10：假设节点下方挂了标题徽标，行距必须容得下它，
+ * 否则同一层里相邻两个节点的徽标会叠在一起。
+ *
+ * **背景是纯白的，而且刻意不加 `grid-line` 插件。** 井字格在截图和演示里能撑场面，
+ * 但它在这张图上是纯噪声：节点位置由力导向决定，网格暗示的「坐标」并不存在；
+ * 而这张图上真正要读的是「哪块密、哪里空」，底色越干净越好。
+ */
+export function buildGraphOptions(
+  container: { width: number; height: number },
+  layout: GraphLayout = 'force',
+  rankdir: 'LR' | 'TB' = 'LR',
+  mode: StageMode = 'panel',
+): GraphOptions {
+  return {
+    width: container.width,
+    height: container.height,
+    background: '#ffffff',
+    autoFit: { type: 'view', options: { when: 'overflow' } },
+    padding: paddingFor(mode),
+    zoomRange: zoomRangeFor(mode),
+    animation: false,
+    layout: layoutOf(layout, rankdir),
+    node: {
+      state: {
+        selected: { lineWidth: 3, stroke: '#2563eb' },
+        active: { lineWidth: 2.6, stroke: '#2563eb' },
+      },
+    },
+    edge: {
+      // 正交折线是给分层布局用的；力导向里没有「行」的概念，折线反而更乱，
+      // 用二次曲线让交叉点少一点。
+      type: layout === 'force' ? 'quadratic' : 'polyline',
+      style: layout === 'force' ? { curveOffset: 22 } : { radius: 8, router: { type: 'orth' } },
+      state: { selected: { lineWidth: 2.4, stroke: '#2563eb' } },
+    },
+    behaviors: behaviorsOf(layout),
+  }
+}
+
+/**
+ * 收口断言。
+ *
+ * G6 的 `NodeData.style` 是联合样式类型，而我们的样式是运行时按数据算出来的键值对
+ * （尺寸、颜色、徽标数组都是映射结果）。这里做**唯一一次**断言，而不是让 `as` 散落
+ * 在组件里 —— 将来 G6 收紧类型时，需要改的就只有这一个函数。
+ */
+export function toGraphData(
+  data: AttributionGraphData,
+  options: { includeInstance?: boolean; gapIds: ReadonlySet<string>; positions?: Map<string, [number, number]> },
+): GraphData {
+  return toG6Data(data, options) as unknown as GraphData
+}