Perfetto Data Explorer 的 Export to Dashboard 节点把查询结果发布为仪表盘数据源【免费下载链接】perfettoProduction-grade client-side tracing, profiling, and analysis for complex software systems.项目地址: https://gitcode.com/GitHub_Trending/pe/perfettoExport to Dashboard 是 Perfetto UI 的 Data Explorer数据探索器查询图Query Graph中的一种节点作用是把上游任意数据源表、过滤器、Join 等的查询结果发布到全局仪表盘注册表供 Dashboard 标签页中的图表直接引用。本文将以 dashboard.md 为核心结合 dashboard_node.ts、dashboard_registry.ts 等源码讲清该节点的配置项、工作流程、底层实现原理与使用建议读完后你将能熟练地用它在 Data Explorer 中构建“查询图 → 仪表盘”的完整数据链路。一、节点定位查询图与仪表盘之间的桥梁在 Perfetto Data Explorer 中用户通过把多种节点Table Source、Filter、Join、Sort、Aggregation 等连接成一张有向无环图来构建数据管道最终结果既可以作为新表继续参与后续处理也可以被“导出”到仪表盘进行可视化。Export to Dashboard 节点节点类型kDashboard查询节点定义正是承担后者的桥梁它不改变数据本身只是把上游节点的输入列finalCols原样透传并发布出去发布后的数据源进入全局仪表盘注册表dashboardRegistry这是一个不依附于任何单个仪表盘、全局共享的单例池Dashboard 标签页从该注册表中读取数据源列表用户据此添加图表。从 dashboard_node.ts 可以看到节点的finalCols直接返回primaryInput?.finalCols ?? []即导出节点的输出列完全等于其输入列自身不新增、不修改任何列——这是一个纯粹的“发布publish”动作。此外该节点没有自己的结果面板customResultsPanel()返回一个空态提示“Data from this node is exported to dashboards.”明确告知用户此处的数据去向是仪表盘而不是内联结果表。二、唯一配置项Export nameExport to Dashboard 节点只有一项配置Export name导出名称一个人类可读的标签会显示在仪表盘图表上以及 Data Explorer 的 Data 面板中。该名称用于在仪表盘上标识数据源因此在同一张图中建议给出有区分度的名称。2.1 名称解析的优先级链从 dashboard_node.ts 的getExportName()实现可以还原出完整的命名规则private getExportName(): string { return ( this.attrs.exportName?.trim() || this.primaryInput?.getTitle() || Unnamed export ); }解析顺序为显式设置的exportName自动去除首尾空白——最高优先级上游节点的标题如primaryInput.getTitle()通常是表名或节点标题——当未填写导出名时作为默认值兜底值Unnamed export——当既没有填写导出名、也没有连接输入节点时使用。节点详情面板 会实时显示Exported as ${this.getExportName()}方便你随时核对最终生效的导出名。2.2 修改即发布导出名称的编辑框nodeSpecificModify()在值变化时会立即调用publishExportedSource()并触发onchange回调也就是说无需手动“保存”名称的修改会立刻同步到仪表盘注册表。该属性存放在可序列化的DashboardNodeAttrs.exportName中随查询图状态一起被保存/恢复具体序列化逻辑见 state_serialization.ts 与 node_config.ts。三、工作流程三步把数据送上仪表盘原文档给出了标准的三步流程下面结合源码逐一展开。步骤 1连接上游节点将一个上游节点table、filter、join 等连接到 Export to Dashboard 节点的输入端。此时节点会校验输入是否有效未连接任何输入时validate()报错No input connected输入节点自身校验失败时报错Input title is invalid错误信息中带上上游标题便于定位是哪个节点出了问题。校验逻辑见 dashboard_node.ts对应的单元测试覆盖了上述全部错误分支dashboard_node_unittest.ts。步骤 2节点把输入列发布到全局仪表盘注册表连接建立后onPrevNodesUpdated()会触发发布动作dashboard_node.ts。发布的数据源对象DashboardDataSource结构如下dashboard_registry.tsinterface DashboardDataSource { readonly name: string; // 导出名称用于展示与选择 readonly nodeId: string; // 导出节点 ID注册表主键 readonly columns: ReadonlyArray{name: string; type?: PerfettoSqlType}; // 列名 类型 readonly graphId: string; // 所属查询图标签页的稳定 ID tableName?: string; // 物化后的 SQL 表名执行前为 undefined requestExecution?: () Promisevoid; // 触发源节点执行同步 物化 }发布时会把finalCols中每一列的名称与类型快照进columns。列信息是快照式的当上游列发生变化例如修改了上游节点的列时节点会通过onPrevNodesUpdated()重新发布注册表中对应nodeId的数据源会被整体覆盖更新而不会产生重复条目——这一点由单元测试显式验证dashboard_node_unittest.ts。值得注意的是如果导出节点的输入被断开publishExportedSource()会调用dashboardRegistry.removeExportedSource(this.nodeId)主动注销该数据源仪表盘上引用它的图表随即变为“数据源已移除”的失联状态。步骤 3在 Dashboard 标签页添加图表打开 Dashboard 标签页通过侧边栏的Add面板选择图表类型并添加图表。图表通过sourceNodeId关联到具体的导出源dashboard_registry.tsinterface DashboardChart { readonly sourceNodeId: string; // 引用的导出源 nodeId config: ChartConfig; col?: number; row?: number; colSpan?: number; rowSpan?: number; }如果当前没有任何导出源Dashboard 画布会显示空态提示“Use the Export to Dashboard node in the graph to export data here.”dashboard.ts——这正是 Export to Dashboard 节点存在的意义。四、全局注册表跨标签页共享的数据源池4.1 为什么是全局单例dashboardRegistry是一个全局单例dashboard_registry.ts内部用MapnodeId, DashboardDataSource维护所有导出源。源码注释说明了原因导出节点的发布动作发生在查询执行过程中、Mithril 渲染循环之外因此必须使用全局单例保证任何时刻都能被可靠访问而 Dashboard 标签页则通过 DataExplorer 把数据源列表以 props 方式注入。4.2 提供的核心查询能力注册表暴露了以下方法方法作用setExportedSource(source)发布/覆盖一个导出源以nodeId为键removeExportedSource(nodeId)删除导出源例如节点被删除或输入断开getExportedSource(nodeId)按节点 ID 取单个导出源getAllExportedSources()取全部导出源getExportedSourcesForGraph(graphId)按查询图标签页过滤clear()清空整个池测试与重置时使用每个导出源都记录着所属查询图标签页的graphId因此多张查询图、多个导出节点可以共存互不干扰。4.3 与图表数据联动Linked Columns注册表中还有getLinkedSourceNodeIds()工具函数给定一个源和一个列名返回所有“拥有同名列”的源节点 ID含自身。这支撑了仪表盘的Linked columns关联列面板——当用户在某个图表上刷选brush时同名列的其他图表可以联动过滤实现跨图表交互分析。五、延迟物化表在首次使用时才执行原文档 Tips 中强调了两点表在首次使用时才物化仪表盘会在源尚未运行时自动触发执行。这在源码中有非常清晰的体现。5.1 tableName 的懒解析DashboardDataSource.tableName在发布时是undefined注释明确写着Undefined until the source node has been executed。发布动作本身不会立即请求执行——单元测试专门验证了“发布后getTableNameForNode尚未被调用”dashboard_node_unittest.ts。5.2 图表渲染触发执行当仪表盘上的图表需要渲染数据时dashboard_chart_view.ts 会检查source.tableName若为undefined且尚未请求过执行则调用source.requestExecution()requestExecution内部先请求上游节点执行requestNodeExecution(parentNodeId)执行完成后通过getTableNameForNode(parentNodeId)解析出物化的 SQL 表名写回source.tableName并再次setExportedSource更新注册表dashboard_node.ts表名就绪后图表以SELECT * FROM ${tableName} ...的形式查询数据dashboard_chart_view.ts。这一机制保证了只要图表的引用源被触发一次执行后续渲染就复用已物化的表避免重复计算同时用户无需手动“先运行查询图再开仪表盘”首次添加图表即可自动拉起数据。六、仪表盘画布导出源如何被消费导出源进入注册表后在 Dashboard 画布上以图表卡片的形式被消费。了解画布规则有助于理解“导出名”之外的设计画布采用24 列网格GRID_COLUMNS 24图表卡片默认尺寸为DEFAULT_COL_SPAN 8、DEFAULT_ROW_SPAN 6最小不得小于 4×4dashboard_registry.ts卡片支持拖拽、缩放水平/垂直并强制保持至少 1 格间距checkOverlap/findNonOverlappingPosition除图表外画布还支持Label文本标签和Segment Divider分段分隔线分隔线上方的图表是“驱动者driver”其刷选brush选择会过滤下方“消费者consumer”图表的数据而驱动者自身不受过滤影响getDriversOf/getConsumersOf/isDriverChart若某个图表引用的导出源被删除节点被删或输入断开该图表会渲染为“Data source removed”失联卡片提示用户删除或重新指派数据源dashboard.ts。在 Data 侧边栏面板中用户可以查看全部导出源及其列并为图表更换数据源每个图表头部都有数据源 Chip 和编辑按钮。七、最佳实践与提示结合原文档 Tips 与源码行为给出以下实操建议为导出起描述性名称导出名会直接出现在仪表盘图表头部、数据源 Chip 和 Data 面板中。因为默认回退到上游节点标题建议对上游节点命名足够清晰或显式填写导出名空名称或纯空白会回退到上游标题两者皆无时才显示Unnamed export。善用“修改即发布”导出名、上游列的任何变更都会即时同步到注册表无需手动刷新仪表盘但请留意列结构变化后仪表盘上已配置图表若引用了不存在的列会被自动清理关联的刷选过滤器见 dashboard_chart_view.ts。理解延迟执行导出本身不触发查询执行表在图表首次渲染时才物化。想要预取数据可以在查询图中运行上游节点或在仪表盘中先添加任意一个引用该源的图表。一个节点对应一个数据源每个 Export to Dashboard 节点在注册表中占据唯一nodeId键重复发布会覆盖而不是叠加删除节点或断开输入会自动注销数据源保持注册表干净。跨图表联动利用 Linked Columns同名列关联和 Segment Divider驱动/消费者分层可以把多个导出源组合成交互式分析仪表盘而不必把全部逻辑塞进单个查询。八、相关源码与文档索引节点说明文档本文主体ui/src/assets/data_explorer/node_info/dashboard.md节点实现校验、命名、发布逻辑ui/src/plugins/dev.perfetto.DataExplorer/query_builder/nodes/dashboard_node.ts全局注册表与数据源类型定义ui/src/plugins/dev.perfetto.DataExplorer/dashboard/dashboard_registry.tsDashboard 画布组件空态、图表卡片、驱动/消费者分隔ui/src/plugins/dev.perfetto.DataExplorer/dashboard/dashboard.ts图表渲染与延迟执行SELECT * FROM tableNameui/src/plugins/dev.perfetto.DataExplorer/dashboard/dashboard_chart_view.ts节点文档加载器markdown 渲染与缓存ui/src/plugins/dev.perfetto.DataExplorer/query_builder/node_doc_loader.ts节点单元测试发布、回退命名、列变更、执行解析全覆盖ui/src/plugins/dev.perfetto.DataExplorer/query_builder/nodes/dashboard_node_unittest.ts同类节点文档Filter、Join、Visualisation 等ui/src/assets/data_explorer/node_info/九、小结Export to Dashboard 节点是 Perfetto Data Explorer 中“查询图”与“可视化仪表盘”之间的关键枢纽它用最小的配置一个导出名把上游任意数据源发布到全局注册表由仪表盘按需物化执行并渲染图表还通过全局单例注册表、列快照更新、同名列联动等机制保证了多图多源的协作与一致性。掌握这一节点你就打通了从 SQL 查询构建到交互式仪表盘可视化的完整链路。【免费下载链接】perfettoProduction-grade client-side tracing, profiling, and analysis for complex software systems.项目地址: https://gitcode.com/GitHub_Trending/pe/perfetto创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考