Agent Skills › lichtblick-suite/lichtblick › panel-raw-messages

panel-raw-messages

GitHub

解析RawMessages面板知识，涵盖遗留与虚拟化两种实现、树数据扁平化、展开状态管理及Diff模式。适用于需深入理解消息检查面板底层逻辑、性能优化及共享核心代码的开发场景。

.github/skills/panel-raw-messages/SKILL.md lichtblick-suite/lichtblick

Trigger Scenarios

需要查看或修改RawMessages面板的渲染逻辑处理消息数据的树形结构转换与展开状态管理调试或优化消息对比（Diff）功能

Install

npx skills add lichtblick-suite/lichtblick --skill panel-raw-messages -g -y

More Options

Non-standard path

npx skills add https://github.com/lichtblick-suite/lichtblick/tree/develop/.github/skills/panel-raw-messages -g -y

Use without installing

npx skills use lichtblick-suite/lichtblick@panel-raw-messages

指定 Agent (Claude Code)

npx skills add lichtblick-suite/lichtblick --skill panel-raw-messages -a claude-code -g -y

安装 repo 全部 skill

npx skills add lichtblick-suite/lichtblick --all -g -y

预览 repo 内 skill

npx skills add lichtblick-suite/lichtblick --list

SKILL.md

Frontmatter

{
    "name": "panel-raw-messages",
    "description": "Deep RawMessages panel knowledge: legacy (react-json-tree) vs virtual (@tanstack\/react-virtual) implementations, flattenTreeData, TreeNode shape, expansion-state management, shared logic hook, and diff mode."
}

Panel Raw Messages Skill

Message-inspection panels that display structured message data as expandable trees. There are two implementations sharing one logic/diff core.

Two Implementations

Both registered in packages/suite-base/src/panels/index.ts:

panelType: "RawMessages" — legacy (react-json-tree <Tree>, full DOM render of expanded nodes)
panelType: "RawMessagesVirtual" — performant (@tanstack/react-virtual windowed rendering)

Shared code lives in panels/RawMessagesCommon/:

types.ts (TreeNode, NodeState, configs, props)
constants.ts (PATH_NAME_AGGREGATOR, CUSTOM_METHOD, PREV_MSG_METHOD)
useSharedRawMessagesLogic.ts (topic resolution, expansion state)
useRenderers.ts, getDiff.ts, Value.tsx, getValueActionForValue.ts, utils.ts, …

VirtualizedTree (Performant Path)

const virtualizer = useVirtualizer({
  count: flatData.length,
  getScrollElement,
  estimateSize: () => fontSize ?? DEFAULT_FONT_SIZE,  // 12px
  overscan: SCROLLL_OVERSCAN,                          // 5
  measureElement: (el) => el.getBoundingClientRect().height,
  useAnimationFrameWithResizeObserver: true,
});

Key constants: ROW_HEIGHT 24px, TREE_NODE_INDENTATION 16px/level, DEFAULT_FONT_SIZE 12px, SCROLLL_OVERSCAN 5.

flattenTreeData

Converts a nested object → flat TreeNode[] for virtualization:

function flattenTreeData(
  data: unknown,
  expandedNodes: Set<string>,
  parentPath?: string,
  depth?: number,
  keyPath?: (string | number)[],
): TreeNode[]

Skips null, non-objects, and ArrayBuffer.isView values (typed arrays like point-cloud buffers)
Only recurses into children of expanded nodes
Path keys joined with PATH_NAME_AGGREGATOR in reverse order (child~|~parent)

type TreeNode = {
  key: string;           // unique path string, e.g. "x~|~position~|~pose"
  label: string;         // display name, e.g. "x"
  value: unknown;
  depth: number;         // nesting level for indentation
  isExpandable: boolean;
  keyPath: (string | number)[];
  parentPath: string;
};

Expansion State

useSharedRawMessagesLogic manages expansion: "all" | "none" | Record<string, NodeState>
RawMessagesVirtual converts it to Set<string> via useMemo
- "all" → all possible paths (recursive generateDeepKeyPaths)
- "none" → empty set
- object mode → keys where state === NodeState.Expanded
toggleExpansion() flips a node Expanded ↔ Collapsed

Diff Mode

Shared via getDiff() — compares baseItem (current topic) vs diffItem (another topic or the previous message)
CUSTOM_METHOD diffs against a different topic path; PREV_MSG_METHOD against the prior message