diff --git a/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/graph_ascend/index.ts b/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/graph_ascend/index.ts index 1913ce9297b707cb6e8bdd609997c3aa9622c362..2b093520e8794b63dc9300f9bd3ac16886e9423f 100644 --- a/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/graph_ascend/index.ts +++ b/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/graph_ascend/index.ts @@ -59,6 +59,7 @@ class TfGraphDashboard extends LegacyElementMixin(PolymerElement) { unmatched="[[unmatched]]" matchedlist="[[matchedlist]]" minimap-vis="{{minimapVis}}" + is-sync-expand="{{isSyncExpand}}" is-single-graph="{{isSingleGraph}}" task="[[task]]" is-overflow-filter="{{isOverflowFilter}}" @@ -73,6 +74,7 @@ class TfGraphDashboard extends LegacyElementMixin(PolymerElement) { selected-node="{{selectedNode}}" highlighted-node="{{_highlightedNode}}" minimap-vis="[[minimapVis]]" + is-sync-expand="{{isSyncExpand}}" is-single-graph="[[isSingleGraph]]" is-overflow-filter="{{isOverflowFilter}}" > diff --git a/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/graph_board/components/hierarchy/index.ts b/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/graph_board/components/hierarchy/index.ts index 0a31f9ccf165b9740463c84981f563dd441831bd..692c4d0893533389d2181e40be9068c77062b782 100644 --- a/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/graph_board/components/hierarchy/index.ts +++ b/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/graph_board/components/hierarchy/index.ts @@ -157,6 +157,9 @@ class Hierarchy extends PolymerElement { @property({ type: Boolean }) minimapVis: boolean = true; + @property({ type: Boolean }) + isSyncExpand: boolean = true; + @property({ type: Object }) contextMenuItems: Array = []; @@ -405,29 +408,12 @@ class Hierarchy extends PolymerElement { if (item.type === EXPAND_MATCHED_NODE) { // 如果当前节点未匹配,则找到其相邻的匹配父节点 const tempSelectedNode = this.selectedNode; - let nodeName = tempSelectedNode?.replace(new RegExp(`^(${NPU_PREFIX}|${BENCH_PREFIX})`), ''); - let selectedNode = this.hierarchyObject[nodeName]; - while (isEmpty(selectedNode?.matchedNodeLink) && selectedNode?.parentNode) { - nodeName = selectedNode.parentNode?.replace(new RegExp(`^(${NPU_PREFIX}|${BENCH_PREFIX})`), ''); - selectedNode = this.hierarchyObject[nodeName]; - } - if (!isEmpty(selectedNode?.matchedNodeLink)) { - let matchedNodeName = selectedNode.matchedNodeLink[selectedNode.matchedNodeLink.length - 1]; - const matchedPrefix = this.graphType === 'NPU' ? BENCH_PREFIX : NPU_PREFIX; - matchedNodeName = matchedNodeName.startsWith(matchedPrefix) - ? matchedNodeName - : matchedPrefix + matchedNodeName; // 加上前缀 - this.set('selectedNode', matchedNodeName); // 选中对应测节点就能触发展开和选中 - this.set('hightLightNodeName', selectedNode.name) - const transform = this.changeNodeCenter(selectedNode.name); - this.renderGraph(this.hierarchyData, selectedNode.name, transform); // 更新selectedNode 会导致当前节点失去高亮显示 - } else { - Notification.show(`展开失败:当前节点及其父节点无匹配节点`, { - position: 'middle', - duration: 3000, - theme: 'error', - }); - } + this.findMatchedNodeName(tempSelectedNode); + const { matchedNodeName, selectedNode } = this.findMatchedNodeName(tempSelectedNode); + this.set('selectedNode', matchedNodeName); // 选中对应测节点就能触发展开和选中 + this.set('hightLightNodeName', selectedNode?.name) + const transform = this.changeNodeCenter(selectedNode.name); + this.renderGraph(this.hierarchyData, selectedNode.name, transform); // 更新selectedNode 会导致当前节点失去高亮显示 } // 数据通信节点右键菜单 if (item.type === DATA_COMMUNICATION) { @@ -499,8 +485,27 @@ class Hierarchy extends PolymerElement { bindChangeNodeExpandStateEvent(container) { const onDoubleClickNodeEvent = async (event) => { event.preventDefault(); - const target: HTMLElement = event.target as HTMLElement; - const selectedNode = target.getAttribute('name'); + let target; + let selectedNode; + //判断是点击展开,还是同步展开 + const isClickGraph = isEmpty(event.detail?.nodeName); + if (isClickGraph) { + target = event.target as HTMLElement; + selectedNode = target.getAttribute('name'); + } + else { + selectedNode = event.detail.nodeName; + selectedNode = selectedNode?.replace(new RegExp(`^(${NPU_PREFIX}|${BENCH_PREFIX})`), '') + const graphType = event.detail.graphType; + + const orginNodeExpandState = event.detail.nodeExpandState; + const targetNodeExpandState = this.hierarchyObject[selectedNode]?.expand; + //也会触发当前侧图展开才操作,所以需要判断一下 + //保持展开状态同步,如果一侧展开,一侧为展开,则不触发对应测的展开或者收起的操作 + if (graphType === this.graphType || (orginNodeExpandState === targetNodeExpandState)) { + return; + } + } const nodeName = selectedNode?.replace(new RegExp(`^(${NPU_PREFIX}|${BENCH_PREFIX})`), ''); // 去掉前缀 if (nodeName === this.rootName) { return; @@ -513,6 +518,21 @@ class Hierarchy extends PolymerElement { return; } await this.changeNodeExpandState(nodeInfo); + // 如果是点击展开,触发同步展开事件,通知展开对应节点 + if (isClickGraph && this.isSyncExpand && this.graphType !== "Single") { + + const findRes = this.findMatchedNodeName(nodeName); + const changeMatchNodeExpandState = new CustomEvent('changeMatchNodeExpandState', { + detail: { + nodeName: findRes.matchedNodeName, // 通知通信图展开对应节点 + nodeExpandState: findRes?.selectedNode?.expand, + graphType: this.graphType, + }, + bubbles: true, // 允许事件冒泡 + composed: true, // 允许跨 Shadow DOM 边界 + }); + this.dispatchEvent(changeMatchNodeExpandState); + } const transform = this.changeNodeCenter(nodeName); this.renderGraph(this.hierarchyData, this.hightLightNodeName, transform); }; @@ -520,11 +540,13 @@ class Hierarchy extends PolymerElement { event.preventDefault(); }; const throttleDoubleClickNodeEvent = throttle(onDoubleClickNodeEvent, 16); + document.addEventListener('changeMatchNodeExpandState', throttleDoubleClickNodeEvent); container.addEventListener('dblclick', throttleDoubleClickNodeEvent); this.graph?.addEventListener('dblclick', onDoubleClickGraphEvent); // 防止双击选中文本 return () => { container.removeEventListener('dblclick', throttleDoubleClickNodeEvent); this.graph?.removeEventListener('dblclick', onDoubleClickGraphEvent); + document.removeEventListener('changeMatchNodeExpandState', throttleDoubleClickNodeEvent); }; } @@ -715,4 +737,35 @@ class Hierarchy extends PolymerElement { } return { success, data, error }; } + /** + * 寻找目标节点的匹配节点 + * @param tempSelectedNode 目标节点 + * @returns + * matchedNodeName: 匹配节点名称 + * selectedNode: 目标节点信息 + */ + + findMatchedNodeName(tempSelectedNode) { + let nodeName = tempSelectedNode?.replace(new RegExp(`^(${NPU_PREFIX}|${BENCH_PREFIX})`), ''); + let selectedNode = this.hierarchyObject[nodeName]; + while (isEmpty(selectedNode?.matchedNodeLink) && selectedNode?.parentNode) { + nodeName = selectedNode.parentNode?.replace(new RegExp(`^(${NPU_PREFIX}|${BENCH_PREFIX})`), ''); + selectedNode = this.hierarchyObject[nodeName]; + } + if (!isEmpty(selectedNode?.matchedNodeLink)) { + let matchedNodeName = selectedNode.matchedNodeLink[selectedNode.matchedNodeLink.length - 1]; + const matchedPrefix = this.graphType === 'NPU' ? BENCH_PREFIX : NPU_PREFIX; + matchedNodeName = matchedNodeName.startsWith(matchedPrefix) + ? matchedNodeName + : matchedPrefix + matchedNodeName; // 加上前缀 + return { matchedNodeName, selectedNode }; + } else { + Notification.show(`展开失败:当前节点及其父节点无匹配节点`, { + position: 'middle', + duration: 3000, + theme: 'error', + }); + return { matchedNodeName: '', selectedNode: {} as HierarchyNodeType }; + } + } } diff --git a/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/graph_board/index.ts b/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/graph_board/index.ts index 5b5e262f5c0cfc05dab5768bd030a7661707a82a..ce94c9449c87f369bcf724ecfbe4b1ec815d28f0 100644 --- a/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/graph_board/index.ts +++ b/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/graph_board/index.ts @@ -50,6 +50,7 @@ class MainGraph extends PolymerElement { graph-type="[[mainGraphType]]" colors="{{colors}}" minimap-vis="[[minimapVis.npu]]" + is-sync-expand="{{isSyncExpand}}" selection="[[selection]]" selected-node="{{selectedNode}}" is-overflow-filter="{{isOverflowFilter}}" @@ -63,6 +64,7 @@ class MainGraph extends PolymerElement { graph-type="Bench" colors="{{colors}}" minimap-vis="[[minimapVis.bench]]" + is-sync-expand="{{isSyncExpand}}" selection="[[selection]]" selected-node="{{selectedNode}}" is-overflow-filter="{{isOverflowFilter}}" diff --git a/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/graph_controls_board/components/tf_color_select/index.ts b/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/graph_controls_board/components/tf_color_select/index.ts index a8efe1615bfa9a166ebdf3e5c461f85fc94b4906..44c9f5a7860c67ce497aa646d92755f19be31a42 100644 --- a/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/graph_controls_board/components/tf_color_select/index.ts +++ b/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/graph_controls_board/components/tf_color_select/index.ts @@ -150,6 +150,20 @@ class Legend extends LegacyElementMixin(DarkModeMixin(PolymerElement)) { left: 2px; } + .search-number{ + display: inline-block; + width: 80px; + height: 14px; + background-color: #fff; + font-size: 14px; + color: red; + font-weight: bold; + position: relative; + top: 30px; + left: 114px; + z-index: 10; + } + /* Vaadin 组合框样式 */ vaadin-combo-box { flex: 1; @@ -206,6 +220,7 @@ class Legend extends LegacyElementMixin(DarkModeMixin(PolymerElement)) { + ([[precisionmenu.length]]) + ([[precisionmenu.length]])
- + 自适应屏幕
@@ -167,6 +178,7 @@ class TfGraphControls extends LegacyElementMixin(DarkModeMixin(PolymerElement)) 标杆侧缩略图
+