[WIP] Optimize data visualization on the tracing page

[jzstkarol]

Description

[Please describe the background, purpose, changes made, and how to test this PR]

Checklist

Please check the following items before code is ready to be reviewed.

• Code has been formatted with npm run format command in the root directory
• Docstrings/comments are in appropriate style (TSDoc/JSDoc for TypeScript/JavaScript, Google style for Python)
• Related documentation has been updated (e.g. links, examples, etc.)
• Code is ready for review

[cla-assistant]

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you all sign our Contributor License Agreement before we can accept your contribution.
1 out of 3 committers have signed the CLA.

✅ jzstkarol
❌ jzst
❌ Cirilla-zmh

---

jzst seems not to be a GitHub user. You need a GitHub account to be able to sign the CLA. If you have already a GitHub account, please add the email address used for this commit to your account.
_{You have signed the CLA already but the status is still pending? Let us recheck it.}

[gemini-code-assist]

Summary of Changes

Hello @jzstkarol, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

此拉取请求主要致力于提升追踪数据（特别是 AI 相关操作）的可视化和处理能力。通过引入彩色瀑布图条形、交互式 JSON 查看器以及更健壮的数据提取机制，旨在为用户提供更清晰、更便捷的追踪分析体验，并确保在不同数据结构下属性和 token 计数的准确性。

Highlights

• 瀑布图优化: 在追踪详情页面的瀑布图中，为每个 Span 引入了彩色条形图，以直观展示其持续时间，并根据 AI 操作类型进行着色，从而提升了视觉分析能力。
• Attributes 和输入输出展示优化: 将 Span 的 Attributes、输入和输出的展示方式从纯文本 JSON 字符串改为使用交互式的 react-json-view 组件，提供了更友好的 JSON 数据查看体验。
• 数据提取逻辑增强: 优化了 getNestedValue 工具函数和 Span 属性处理逻辑，使其能够更灵活地处理扁平化和嵌套的 OpenTelemetry Protocol (OTLP) 属性结构，确保数据解析的鲁棒性。
• Token 计数处理改进: 改进了输入和输出 token 的提取逻辑，现在能够正确解析字符串形式的 token 计数并将其转换为数字，提高了数据准确性。

Changelog

• package.json
  • 新增了 react-json-view 依赖，用于改进 JSON 数据的展示。
• packages/client/src/pages/DashboardPage/RunPage/TracingComponent/TracePanel/SpanPanel/index.tsx
  • 引入了 getNestedValue 工具函数。
  • 更新了 agentscopeInput、agentscopeOutput 和 operation_name 的提取方式，使用 getNestedValue 支持扁平化和嵌套结构。
  • 修改了 SpanSection 组件，使用新的 agentscopeInput 和 agentscopeOutput 来显示输入/输出。
• packages/client/src/pages/DashboardPage/RunPage/TracingComponent/TracePanel/TraceTree/index.tsx
  • 引入了 getNestedValue 工具函数。
  • 更新了 getDisplayKind 函数，使用 getNestedValue 从 Span 属性中提取操作名称、代理名称、模型名称、工具名称和格式目标。
  • 更新了 spanTitleDataMap 的函数名称提取逻辑，以使用 getNestedValue。
• packages/client/src/pages/TracePage/TraceDetailPage/index.tsx
  • 引入了 ReactJson 组件。
  • 定义了 GEN_AI_OPERATION_COLORS 常量，用于为不同的 AI 操作类型分配颜色。
  • 新增了 getFlameBarColor 函数，根据 Span 的 AI 操作名称获取火焰图条的颜色。
  • 新增了 flameGraphTimeRange 计算，用于确定火焰图的整体时间范围。
  • 新增了 getFlameBarStyle 函数，用于计算火焰图条的 left 和 width 样式属性。
  • 定义了 FLAME_BAR_LEFT_OFFSET_PX 常量，用于火焰图条的左侧偏移。
  • 修改了 renderTreeNode 函数，在每个 Span 节点中渲染火焰图条。
  • 将输入、输出和属性部分的展示方式从 JSON.stringify 替换为 ReactJson 组件。
• packages/server/src/dao/Trace.ts
  • 修改了 extractInputTokens 和 extractOutputTokens 函数，使其能够处理字符串类型的 token 计数并将其转换为数字。
• packages/server/src/migrations/1730000000000-AddMessageReplyForeignKey.ts
  • 对类声明进行了格式化调整。
• packages/server/src/otel/processor.ts
  • 移除了 unflattenObject 的导入和使用，保留 OTLP 属性的原始结构。
  • 更新了 processSpan 中对 gen_ai 属性的检查逻辑，以支持扁平化和嵌套两种结构。
  • 重构了 decodeAnyValue 函数，优先处理复杂类型，并改进了对原始类型（如布尔值 false、数字 0、空字符串 ''）的默认值处理。
  • 修改了 loadJsonStrings 并新增了 parseJsonValue 函数，以递归解析属性中嵌套的 JSON 字符串，但会跳过数组和 Uint8Array 类型。
• packages/shared/src/utils/objectUtils.ts
  • 修改了 getNestedValue 函数，使其首先尝试直接访问扁平化路径，如果未找到则回退到嵌套访问逻辑，以支持更广泛的属性结构。

Activity

• 拉取请求的描述中包含一个通用的待办事项列表，但没有具体的评论、审查或进度更新记录。

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

本次 PR 主要包含两方面的优化：一是引入了瀑布图（火焰图）来更直观地展示 trace 的时间线，二是优化了 attributes 和输入/输出的展示方式，改用 react-json-view 并兼容了扁平与嵌套两种数据结构。

整体来看，这些改动大大提升了 Trace 页面的可读性和用户体验。代码重构方面，通过更新 getNestedValue 工具函数来统一处理不同数据结构，使代码更具健壮性。

我在代码中发现了一个关键的 bug 和一些可以改进的地方，请查看具体的 review comments。

[gemini-code-assist]

getNestedValue 工具函数已经被更新，可以同时处理扁平（flat）和嵌套（nested）的对象结构。因此，这里的 ?? attrs['gen_ai.operation.name'] 回退逻辑是多余的，可以移除以使代码更简洁。

    const op = getNestedValue(attrs, 'gen_ai.operation.name') as
        | string
        | undefined;

[gemini-code-assist]

为火焰图的条形设置 Math.max(widthPercent, 1) (1%) 的最小宽度，对于持续时间非常短的 span 可能会导致视觉上的严重失真。例如，一个仅占总时长 0.01% 的 span 会被渲染成 1% 的宽度，看起来比实际长了100倍。建议使用一个更小的最小百分比（如 0.1），或者考虑使用基于像素的最小宽度（如 1px），这样既能保证可见性，又不会过度扭曲其在时间轴上的比例。

        return { left: leftPercent, width: Math.max(widthPercent, 0.1) };