diff --git a/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/tf_backend/requestManager.ts b/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/tf_backend/requestManager.ts index d47635c83d1a5a1c3a3c7d00db1cc005b6eb95d9..a93256199001fa3d0bfaf539fc57871f0ac432a2 100644 --- a/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/tf_backend/requestManager.ts +++ b/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/tf_backend/requestManager.ts @@ -15,7 +15,7 @@ limitations under the License. Copyright (c) 2025, Huawei Technologies. Adapt to the model hierarchical visualization data collected by the msprobe tool ==============================================================================*/ -import { safeJSONParse } from "../utils"; +import { safeJSONParse } from '../utils'; const FEATURE_FLAGS_HEADER_NAME = 'X-TensorBoard-Feature-Flags'; diff --git a/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/tf_graph/tf-graph-scene.html.ts b/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/tf_graph/tf-graph-scene.html.ts index 80cfea0b9209ea71e3badd59b50594a47d2ea71e..7033d6b90ec811b090101933abccba2e0aa879f9 100644 --- a/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/tf_graph/tf-graph-scene.html.ts +++ b/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/tf_graph/tf-graph-scene.html.ts @@ -378,4 +378,4 @@ export const template = html`
-`; \ No newline at end of file +`; diff --git a/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/tf_graph/tf-graph-scene.ts b/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/tf_graph/tf-graph-scene.ts index 84a90dc1e581e098b43f07ce0370e75332b1c2e5..1640f88a3fdfead60a98f13fa5f135005e90e70e 100644 --- a/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/tf_graph/tf-graph-scene.ts +++ b/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/tf_graph/tf-graph-scene.ts @@ -124,7 +124,7 @@ class TfGraphScene2 extends LegacyElementMixin(DarkModeMixin(PolymerElement)) im @property({ type: Object, }) - _zoomStartCoords: {x: number, y: number} | null = null; + _zoomStartCoords: { x: number; y: number } | null = null; /** * Keeps track of the current coordinates of a graph zoom/pan @@ -134,7 +134,7 @@ class TfGraphScene2 extends LegacyElementMixin(DarkModeMixin(PolymerElement)) im @property({ type: Object, }) - _zoomTransform: {x: number, y: number} | null = null; + _zoomTransform: { x: number; y: number } | null = null; /** Maximum distance of a zoom event for it to be interpreted as a click */ @property({ @@ -314,49 +314,47 @@ class TfGraphScene2 extends LegacyElementMixin(DarkModeMixin(PolymerElement)) im this._zoom = d3 .zoom() .on('end', () => { - if (this._zoomStartCoords && this._zoomTransform) { - // Calculate the total distance dragged during the zoom event. - // If it is sufficiently small, then fire an event indicating - // that zooming has ended. Otherwise wait to fire the zoom end - // event, so that a mouse click registered as part of this zooming - // is ignored (as this mouse click was part of a zooming, and should - // not be used to indicate an actual click on the graph). - let dragDistance = Math.sqrt( - Math.pow(this._zoomStartCoords.x - this._zoomTransform.x, 2) + - Math.pow(this._zoomStartCoords.y - this._zoomTransform.y, 2), - ); - if (dragDistance < this._maxZoomDistanceForClick) { - this._fireEnableClick(); - } else { - setTimeout(this._fireEnableClick.bind(this), 50); - } + if (this._zoomStartCoords && this._zoomTransform) { + // Calculate the total distance dragged during the zoom event. + // If it is sufficiently small, then fire an event indicating + // that zooming has ended. Otherwise wait to fire the zoom end + // event, so that a mouse click registered as part of this zooming + // is ignored (as this mouse click was part of a zooming, and should + // not be used to indicate an actual click on the graph). + let dragDistance = Math.sqrt( + Math.pow(this._zoomStartCoords.x - this._zoomTransform.x, 2) + + Math.pow(this._zoomStartCoords.y - this._zoomTransform.y, 2), + ); + if (dragDistance < this._maxZoomDistanceForClick) { + this._fireEnableClick(); + } else { + setTimeout(this._fireEnableClick.bind(this), 50); } - this._zoomStartCoords = null; } + this._zoomStartCoords = null; + } ) .on('zoom', () => { - this._zoomTransform = d3.event.transform; - if (!this._zoomStartCoords) { - this._zoomStartCoords = this._zoomTransform; - this.fire('disable-click'); - } - this._zoomed = true; - d3.select(this.$.root).attr('transform', d3.event.transform.toString()); - this.x = d3.event.transform.x; - this.y = d3.event.transform.y; - // Notify the minimap. - this.minimap.zoom(d3.event.transform); + this._zoomTransform = d3.event.transform; + if (!this._zoomStartCoords) { + this._zoomStartCoords = this._zoomTransform; + this.fire('disable-click'); } - ); + this._zoomed = true; + d3.select(this.$.root).attr('transform', d3.event.transform.toString()); + this.x = d3.event.transform.x; + this.y = d3.event.transform.y; + // Notify the minimap. + this.minimap.zoom(d3.event.transform); + }); d3.select(this.$.svg).call(this._addEventListener.bind(this)).on('dblclick.zoom', null); d3.select(window).on('resize', () => { - // Notify the minimap that the user's window was resized. - // The minimap will figure out the new dimensions of the main svg - // and will use the existing translate and scale params. - this.minimap.zoom(); - } - ); + // Notify the minimap that the user's window was resized. + // The minimap will figure out the new dimensions of the main svg + // and will use the existing translate and scale params. + this.minimap.zoom(); + }); // Initialize the minimap. this.minimap = (this.$.minimap as any).init( this.$.svg, diff --git a/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/tf_graph/tf-graph.ts b/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/tf_graph/tf-graph.ts index 51f6039d47b34ab8a76ff50d41c444f7036a078b..f4eac6ec2eb46f4ac203b2cbbf4a97357361e4e9 100644 --- a/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/tf_graph/tf-graph.ts +++ b/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/tf_graph/tf-graph.ts @@ -480,9 +480,9 @@ class TfGraph extends LegacyElementMixin(PolymerElement) { async _parentNodeToggleExpand(event): Promise { const nodeName = event.detail.nodeData.node.name; - const matched_node_link = event.detail.nodeData.node.matchedNodeLink; - if (matched_node_link) { - let matched = matched_node_link[matched_node_link.length - 1]; + const matchedNodeLink = event.detail.nodeData.node.matchedNodeLink; + if (matchedNodeLink) { + let matched = matchedNodeLink[matchedNodeLink.length - 1]; this.set('selectedNode', matched); } else { const params = new URLSearchParams(); @@ -525,7 +525,7 @@ class TfGraph extends LegacyElementMixin(PolymerElement) { const graphPath = `subgraph?${String(params)}`; const arrayBuffer = await fetchPbTxt(graphPath); // 等待 fetchPbTxt 完成 const graphDef = await parseGraphPbTxt(arrayBuffer); // 等待 parseGraphPbTxt 完成 - const slimGraph = await tf_graph.build(graphDef, tf_graph.DefaultBuildParams, undefined); // 等待 tf_graph.build 完成 + const slimGraph = await tf_graph.build(graphDef, tf_graph.defaultBuildParams, undefined); // 等待 tf_graph.build 完成 tf_hierarchy.update(tempHierarchy.hierarchy, slimGraph, nodeName); tempHierarchy.buildSubhierarchy(nodeName, slimGraph); renderNode.expanded = !renderNode.expanded; diff --git a/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/tf_graph_board/tf-graph-board.ts b/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/tf_graph_board/tf-graph-board.ts index 6e690905cdc2beeabc78167273ec824a0ec27049..f5f1eedc997baaced565664ea51744c1b7227385 100644 --- a/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/tf_graph_board/tf-graph-board.ts +++ b/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/tf_graph_board/tf-graph-board.ts @@ -201,7 +201,7 @@ class TfGraphBoard extends LegacyElementMixin(PolymerElement) { graph: tf_graph.MergedSlimGraph; @property({ type: Object }) - hierarchyParams: tf_graph_hierarchy.HierarchyParams = tf_graph_hierarchy.DefaultHierarchyParams; + hierarchyParams: tf_graph_hierarchy.HierarchyParams = tf_graph_hierarchy.defaultHierarchyParams; /** * A number between 0 and 100 denoting the % of progress @@ -261,7 +261,7 @@ class TfGraphBoard extends LegacyElementMixin(PolymerElement) { @property({ type: Object }) tooltips: object; - + @property({ type: String }) selectNodeCopy: string = ''; diff --git a/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/tf_graph_common/contextmenu.ts b/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/tf_graph_common/contextmenu.ts index f6ba4aeaa653275afb4d1ae2718f7b8f06c6fe6d..286282f7a8527d23bcbf7a764fc5e72fb045c842 100644 --- a/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/tf_graph_common/contextmenu.ts +++ b/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/tf_graph_common/contextmenu.ts @@ -118,7 +118,7 @@ export function getMenu(sceneElement: TfGraphScene, nodeData): () => Promise Promise { if (d.action === 'expand') { - sceneElement.fire('parent-node-toggle-expand', { nodeData }); + sceneElement.fire('parent-node-toggle-expand', { nodeData }); } maybeCloseMenu(); }) diff --git a/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/tf_graph_common/edge.ts b/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/tf_graph_common/edge.ts index a2d881ead9e9a6814ba55b8e84556f28f5479e5f..fd81b44b562d7b2378a65a440f39f5eec21eeab3 100644 --- a/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/tf_graph_common/edge.ts +++ b/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/tf_graph_common/edge.ts @@ -250,9 +250,7 @@ export const interpolate: d3.Line<{ }); function position(component: HTMLElement, edgeGroup: HTMLElement): void { - d3.select(edgeGroup) - .select(`path.${Class.Edge.LINE}`) - .transition() + d3.select(edgeGroup).select(`path.${Class.Edge.LINE}`).transition(); } /** diff --git a/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/tf_graph_common/graph.ts b/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/tf_graph_common/graph.ts index 01381c87cb3b8a38213e51364629abaff0ba5342..830f50d6dd34f456fc01ab9d69b06550fe574027 100644 --- a/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/tf_graph_common/graph.ts +++ b/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/tf_graph_common/graph.ts @@ -643,7 +643,7 @@ function addEdgeToGraphByAttr(graph: SlimGraph, node: OpNode | Metanode, edgeInf } } -export const DefaultBuildParams: BuildParams = { +export const defaultBuildParams: BuildParams = { enableEmbedding: true, inEmbeddingTypes: ['Const'], outEmbeddingTypes: ['^[a-zA-Z]+Summary$'], @@ -955,9 +955,7 @@ export function hasSimilarDegreeSequence(graph1: graphlib.Graph, graph2: graphli * For example, if the name is 'a/b/c', the returned path is * ['a', 'a/b', 'a/b/c']. */ -export function getHierarchicalPath( - name: string, -): string[] { +export function getHierarchicalPath(name: string): string[] { let path: string[] = []; let i = name.indexOf(NAMESPACE_DELIM); // Push all parent portions of the path. diff --git a/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/tf_graph_common/hierarchy.ts b/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/tf_graph_common/hierarchy.ts index 8746d993fa3dee09540f85b72e7637593edafa0c..5104f9b458a6b174a16d49a4b8060e237eec57b3 100644 --- a/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/tf_graph_common/hierarchy.ts +++ b/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/tf_graph_common/hierarchy.ts @@ -310,7 +310,7 @@ export interface HierarchyParams { rankDirection: string; } -export const DefaultHierarchyParams: HierarchyParams = { +export const defaultHierarchyParams: HierarchyParams = { verifyTemplate: true, rankDirection: 'TB', }; @@ -430,4 +430,4 @@ function addEdgesInVis(h: Hierarchy, graph: SlimGraph, nodeName: string): void { } metaedge.addBaseEdge(baseEdge, h, true); }); -} \ No newline at end of file +} diff --git a/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/tf_graph_common/layout.ts b/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/tf_graph_common/layout.ts index c495198b3f734a389564f8aad7a71224a15b88c3..03d2b0b61d1e23a65b29892bc8e3b083cac7cbbf 100644 --- a/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/tf_graph_common/layout.ts +++ b/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/tf_graph_common/layout.ts @@ -79,7 +79,7 @@ export const PARAMS = { /** The radius of the circle denoting the expand button. */ expandButtonRadius: 3, }, - multi_collection: { + multiCollection: { radius: 5, width: 60, maxLabelWidth: 200, @@ -90,7 +90,7 @@ export const PARAMS = { /** The radius of the circle denoting the expand button. */ expandButtonRadius: 3, }, - api_list: { + apiList: { radius: 5, width: 60, maxLabelWidth: 200, @@ -115,10 +115,10 @@ export const PARAMS = { op: { width: 10, height: 4 }, /** Size of shortcuts for meta nodes */ meta: { width: 12, height: 4, radius: 1 }, - /** Size of shortcuts for multi_collection nodes */ - multi_collection: { width: 12, height: 4, radius: 1 }, - /** Size of shortcuts for api_list nodes */ - api_list: { width: 12, height: 4, radius: 1 }, + /** Size of shortcuts for multiCollection nodes */ + multiCollection: { width: 12, height: 4, radius: 1 }, + /** Size of shortcuts for apiList nodes */ + apiList: { width: 12, height: 4, radius: 1 }, }, annotations: { /** Maximum possible width of the bounding box for in annotations */ @@ -512,9 +512,9 @@ function sizeAnnotation(a: render.Annotation): void { } else if (a.node.type === NodeType.META) { _.extend(a, PARAMS.shortcutSize.meta); } else if (a.node.type === NodeType.MULTI_COLLECTION) { - _.extend(a, PARAMS.shortcutSize.multi_collection); + _.extend(a, PARAMS.shortcutSize.multiCollection); } else if (a.node.type === NodeType.API_LIST) { - _.extend(a, PARAMS.shortcutSize.api_list); + _.extend(a, PARAMS.shortcutSize.apiList); } else { throw Error(`Invalid node type: ${a.node.type}`); } diff --git a/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/tf_graph_common/loader.ts b/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/tf_graph_common/loader.ts index fb11fff7d758bb50dba817a525cf36c279d88cad..2e7462c78ce0079d3e2779398f4d15ccd29b2646 100644 --- a/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/tf_graph_common/loader.ts +++ b/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/tf_graph_common/loader.ts @@ -27,7 +27,7 @@ export function fetchAndConstructHierarchicalGraph( tracker: ProgressTracker, remotePath: string | null, pbTxtFile: Blob | null, - hierarchyParams: hierarchy.HierarchyParams = hierarchy.DefaultHierarchyParams, + hierarchyParams: hierarchy.HierarchyParams = hierarchy.defaultHierarchyParams, ): Promise { const dataTracker = tf_graph_util.getSubtaskTracker(tracker, 30, 'Data'); const graphTracker = tf_graph_util.getSubtaskTracker(tracker, 20, 'Graph'); @@ -37,7 +37,7 @@ export function fetchAndConstructHierarchicalGraph( .then( (graph): any => { if (graph.node.length !== 2) { - return tf_graph.build(graph, tf_graph.DefaultBuildParams, graphTracker); + return tf_graph.build(graph, tf_graph.defaultBuildParams, graphTracker); } const npuGraph: GraphDef = { node: [] }; const benchGraph: GraphDef = { node: [] }; @@ -50,14 +50,14 @@ export function fetchAndConstructHierarchicalGraph( benchGraph.node.push(graph.node[0]); } return Promise.all([ - tf_graph.build(npuGraph, tf_graph.DefaultBuildParams, graphTracker), - tf_graph.build(benchGraph, tf_graph.DefaultBuildParams, graphTracker), + tf_graph.build(npuGraph, tf_graph.defaultBuildParams, graphTracker), + tf_graph.build(benchGraph, tf_graph.defaultBuildParams, graphTracker), ]); }, () => { throw new Error( 'Malformed GraphDef. This can sometimes be caused by ' + - 'a bad network connection or invalid inputting files ', + 'a bad network connection or invalid inputting files ', ); }, ) diff --git a/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/tf_graph_controls/components/tf_color_select/index.ts b/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/tf_graph_controls/components/tf_color_select/index.ts index e12df1bf9134334b62825699235d18815ee1b3f8..8ec54995b511c50a8c84b9d7fe0af3e7227a47aa 100644 --- a/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/tf_graph_controls/components/tf_color_select/index.ts +++ b/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/tf_graph_controls/components/tf_color_select/index.ts @@ -31,8 +31,7 @@ const UNMATCHED_NODE_NAME = '无匹配节点'; @customElement('tf-color-select') class Legend extends LegacyElementMixin(DarkModeMixin(PolymerElement)) { // 定义模板 - static get template(): HTMLTemplateElement { - return html` + static readonly template = html` - -
-

注意：匹配结束后需要点击保存按钮，将操作后数据更新到文件中，否则操作无效

- 保存 - + static readonly template = html` + + +
+

注意：匹配结束后需要点击保存按钮，将操作后数据更新到文件中，否则操作无效

+ 保存 + +
+
+

未匹配节点

+ + +
+ 点击匹配
-
-

未匹配节点

- - -
- 点击匹配 -
+
+
+

已匹配节点

+ + +
+ 取消匹配
-
-

已匹配节点

- - -
- 取消匹配 -
-
- - `; - } +
+ + `; @property({ type: Object }) unmatched: any = []; diff --git a/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/tf_graph_controls/components/tf_manual_match/useMatched.ts b/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/tf_graph_controls/components/tf_manual_match/useMatched.ts index e2d26dabebc2b922bcd5955e09c4257880af0d7e..0ff91499eb42758e3c54c7dc723e1b09bba84260 100644 --- a/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/tf_graph_controls/components/tf_manual_match/useMatched.ts +++ b/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/tf_graph_controls/components/tf_manual_match/useMatched.ts @@ -115,7 +115,7 @@ const useMatched = (): UseMatchedType => { if (isEmpty(npuNodeName) || isEmpty(benchNodeName)) { return { success: false, - error:'调试侧节点或标杆节点为空' + error: '调试侧节点或标杆节点为空', }; } const metaData = { @@ -162,7 +162,7 @@ const useMatched = (): UseMatchedType => { if (isEmpty(npuNodeName) || isEmpty(benchNodeName)) { return { success: false, - error:'调试侧节点或标杆节点为空' + error: '调试侧节点或标杆节点为空', }; } const metaData = { diff --git a/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/tf_graph_controls/components/tf_search_combox/index.ts b/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/tf_graph_controls/components/tf_search_combox/index.ts index a593a1fc04c0e74dfd5f358d1978f7761a044e21..234a43188ce4801c44a6025d94f16f4260b6b447 100644 --- a/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/tf_graph_controls/components/tf_search_combox/index.ts +++ b/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/tf_graph_controls/components/tf_search_combox/index.ts @@ -25,75 +25,68 @@ import { customElement, property } from '@polymer/decorators'; import '@vaadin/progress-bar'; @customElement('tf-search-combox') class Legend extends PolymerElement { - static get shadowRootOptions(): { mode: string } { - return { mode: 'open' }; // 确保启用了 Shadow DOM - } - // 定义模板 - static get template(): HTMLTemplateElement { - return html` - -
- - - -
- `; - } - + static readonly template = html` + +
+ + + +
+ `; @property({ type: Object }) onSelectChange!: () => void; @@ -112,7 +105,6 @@ class Legend extends PolymerElement { // 选择列表中的下一个节点 _selectNext(): void { - if (!this.isCompareGraph) { Notification.show('提示：单图节点不支持匹配', { position: 'middle', diff --git a/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/tf_graph_controls/components/ts_linkage_search_combox/index.ts b/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/tf_graph_controls/components/ts_linkage_search_combox/index.ts index 57ea58f22729309e71e325f0ef29500a3effcff0..6ce3273656cdb7e44c840b8fdadaa3d95853b590 100644 --- a/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/tf_graph_controls/components/ts_linkage_search_combox/index.ts +++ b/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/tf_graph_controls/components/ts_linkage_search_combox/index.ts @@ -27,96 +27,90 @@ import * as tf_graph_render from '../../../tf_graph_common/render'; import '../tf_search_combox/index'; @customElement('tf-linkage-search-combox') class Legend extends PolymerElement { - static get shadowRootOptions(): { mode: string } { - return { mode: 'open' }; // 确保启用了 Shadow DOM - } - // 定义模板 - static get template(): HTMLTemplateElement { - return html` - -
-
- - -
-
- -
+ static readonly template = html` + +
+
+ +
- `; - } +
+ +
+
+ `; @property({ type: Object }) renderHierarchy: tf_graph_render.MergedRenderGraphInfo = {} as any; diff --git a/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/tf_graph_controls/tf-graph-controls.ts b/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/tf_graph_controls/tf-graph-controls.ts index 5fbae194789264c4bcf15d94fece54a273852ecb..2f76248ca2cb09b1d2f909de008cb520f04991ac 100644 --- a/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/tf_graph_controls/tf-graph-controls.ts +++ b/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/tf_graph_controls/tf-graph-controls.ts @@ -635,10 +635,14 @@ class TfGraphControls extends LegacyElementMixin(DarkModeMixin(PolymerElement)) // MicroStep 选择 和 Step选择 @property({ type: Number }) _selectedMicroStep: number = -1; + + @property({ type: Number }) _selectedStep: number = -1; @property({ type: Object }) microsteps: any; + + @property({ type: Object }) steplist: any; // 目录，全量节点数据，支撑各种节点的搜索 @@ -816,7 +820,10 @@ class TfGraphControls extends LegacyElementMixin(DarkModeMixin(PolymerElement)) const { datasets: newDatasets, _selectedRunIndex: run, _selectedTagIndex: tag } = this; function shouldSkip(datasets: any, run: any, tag: any): boolean { return ( - !newDatasets || !newDatasets[run] || !(newDatasets[run] as any).tags[tag] || (newDatasets[run] as any).tags[tag].opGraph + !newDatasets || + !newDatasets[run] || + !(newDatasets[run] as any).tags[tag] || + (newDatasets[run] as any).tags[tag].opGraph ); } if (shouldSkip(newDatasets, run, tag)) { diff --git a/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/tf_graph_dashboard/index.ts b/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/tf_graph_dashboard/index.ts index 91b39feaac152dd4e4ffe06b7ff5bf9c9f50f67b..fa2edb2180fe9a3bf8849c30396ab73abf6d2c72 100644 --- a/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/tf_graph_dashboard/index.ts +++ b/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/tf_graph_dashboard/index.ts @@ -43,15 +43,6 @@ const RUN_STORAGE_KEY = 'run'; * profile: boolean, * }} */ -const TagItem = {}; -/** - * TODO(stephanwlee): Convert this to proper type when converting to TypeScript. - * @typedef {{ - * name: string, - * tags: !Array, - * }} - */ -const RunItem = {}; /** * tf-graph-dashboard displays a graph from a TensorFlow run. @@ -181,9 +172,7 @@ class TfGraphDashboard extends LegacyElementMixin(PolymerElement) { `; - /** - * @type {!Array} - */ + @property({ type: Array }) _datasets: any[] = []; diff --git a/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/tf_graph_debugger_data_card/tf-graph-debugger-data-card.ts b/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/tf_graph_debugger_data_card/tf-graph-debugger-data-card.ts index f1004ad482c3ab95d513e093506b00607d23602d..8feb67818602b62026cc41f399b4be5cebd3cc98 100644 --- a/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/tf_graph_debugger_data_card/tf-graph-debugger-data-card.ts +++ b/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/tf_graph_debugger_data_card/tf-graph-debugger-data-card.ts @@ -301,35 +301,6 @@ class TfGraphDebuggerDataCard extends LegacyElementMixin(PolymerElement) { @property({ type: Boolean, notify: true }) allStepsModeEnabled: any; - ready(): void { - super.ready(); - let mainContainer = document.getElementById('mainContainer'); - let scrollbarContainer = document.querySelector('tf-dashboard-layout .scrollbar') as HTMLElement | null; - if (mainContainer && scrollbarContainer) { - // If this component is being used inside of TensorBoard's dashboard layout, it may easily - // cause the dashboard layout element to overflow, giving the user 2 scroll bars. Prevent - // that by hiding whatever content overflows - the user will have to expand the viewport to - // use this debugging card. - mainContainer.style.overflow = 'hidden'; - scrollbarContainer.style.overflow = 'hidden'; - } - } - - _healthPillsAvailable(debuggerDataEnabled: any, nodeNamesToHealthPills: any): any { - // So long as there is a mapping (even if empty) from node name to health pills, show the - // legend and slider. We do that because, even if no health pills exist at the current step, - // the user may desire to change steps, and the slider must show for the user to do that. - return debuggerDataEnabled && nodeNamesToHealthPills; - } - - _computeTensorCountString(healthPillValuesForSelectedNode: any, valueIndex: any): any { - if (!healthPillValuesForSelectedNode) { - // No health pill data is available. - return ''; - } - return healthPillValuesForSelectedNode[valueIndex].toFixed(0); - } - @computed( 'nodeNamesToHealthPills', 'healthPillStepIndex', @@ -433,10 +404,6 @@ class TfGraphDebuggerDataCard extends LegacyElementMixin(PolymerElement) { return 0; } - _hasDebuggerNumericAlerts(debuggerNumericAlerts: any): any { - return debuggerNumericAlerts?.length; - } - @observe('debuggerNumericAlerts') _updateAlertsList(): void { let debuggerNumericAlerts = this.debuggerNumericAlerts; @@ -495,6 +462,39 @@ class TfGraphDebuggerDataCard extends LegacyElementMixin(PolymerElement) { } } + override ready(): void { + super.ready(); + let mainContainer = document.getElementById('mainContainer'); + let scrollbarContainer = document.querySelector('tf-dashboard-layout .scrollbar') as HTMLElement | null; + if (mainContainer && scrollbarContainer) { + // If this component is being used inside of TensorBoard's dashboard layout, it may easily + // cause the dashboard layout element to overflow, giving the user 2 scroll bars. Prevent + // that by hiding whatever content overflows - the user will have to expand the viewport to + // use this debugging card. + mainContainer.style.overflow = 'hidden'; + scrollbarContainer.style.overflow = 'hidden'; + } + } + + _hasDebuggerNumericAlerts(debuggerNumericAlerts: any): any { + return debuggerNumericAlerts?.length; + } + + _healthPillsAvailable(debuggerDataEnabled: any, nodeNamesToHealthPills: any): any { + // So long as there is a mapping (even if empty) from node name to health pills, show the + // legend and slider. We do that because, even if no health pills exist at the current step, + // the user may desire to change steps, and the slider must show for the user to do that. + return debuggerDataEnabled && nodeNamesToHealthPills; + } + + _computeTensorCountString(healthPillValuesForSelectedNode: any, valueIndex: any): any { + if (!healthPillValuesForSelectedNode) { + // No health pill data is available. + return ''; + } + return healthPillValuesForSelectedNode[valueIndex].toFixed(0); + } + // Adds a listener to an element, so that when that element is clicked, the tensor with // tensorName expands. _addOpExpansionListener(clickableElement: any, tensorName: any): void { diff --git a/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/tf_graph_loader/tf-graph-dashboard-loader.ts b/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/tf_graph_loader/tf-graph-dashboard-loader.ts index da3df7898632974cf0f0db603ef4ee485b8aed55..8452d1ce9c82eb1ff45d240df9ed5bd36cdaa4cc 100644 --- a/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/tf_graph_loader/tf-graph-dashboard-loader.ts +++ b/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/tf_graph_loader/tf-graph-dashboard-loader.ts @@ -33,13 +33,13 @@ interface GraphRunTag { } interface Components { - Menu: object; - ToolTip: ''; - Colors: object; - OverflowCheck: boolean; - MicroSteps: number; - StepList: []; - UnMatchedNode: []; + menu: object; + tooltips: string; + colors: object; + overflowCheck: boolean; + microSteps: number; + stepList: []; + unMatchedNode: []; match: []; } /** @@ -53,6 +53,8 @@ interface Components { */ @customElement('tf-graph-dashboard-loader') class TfGraphDashboardLoader extends LegacyElementMixin(PolymerElement) { + static readonly _template = null; + @property({ type: Array }) datasets: any[]; @@ -75,7 +77,7 @@ class TfGraphDashboardLoader extends LegacyElementMixin(PolymerElement) { selectedFile: object; @property({ type: Object }) - hierarchyParams = tf_graph_hierarchy.DefaultHierarchyParams; + hierarchyParams = tf_graph_hierarchy.defaultHierarchyParams; @property({ type: Object, @@ -100,32 +102,27 @@ class TfGraphDashboardLoader extends LegacyElementMixin(PolymerElement) { @property({ type: Object }) _graphRunTag: GraphRunTag; - override _template = null; @property({ type: Object, - readOnly: true, // readonly so outsider can't change this via binding notify: true, }) menu: object; @property({ type: Object, - readOnly: true, // readonly so outsider can't change this via binding notify: true, }) colorset: object; @property({ type: Object, - readOnly: true, // readonly so outsider can't change this via binding notify: true, }) tooltips: object; @property({ type: Object, - readOnly: true, // readonly so outsider can't change this via binding notify: true, }) colors: any; @@ -138,34 +135,43 @@ class TfGraphDashboardLoader extends LegacyElementMixin(PolymerElement) { @property({ type: Object, - readOnly: true, // readonly so outsider can't change this via binding notify: true, }) microsteps: any; @property({ type: Object, - readOnly: true, // readonly so outsider can't change this via binding notify: true, }) steplist: any; @property({ type: Object, - readOnly: true, // readonly so outsider can't change this via binding notify: true, }) unmatched: object; @property({ type: Object, - readOnly: true, // readonly so outsider can't change this via binding notify: true, }) matchedlist: object; - getColors(): any { - return this.colors; + @observe('selectedFile') + _selectedFileChanged(): void { + let e = this.selectedFile; + if (!e) { + return; + } + const target = (e as any).target as HTMLInputElement; + const file = target.files?.[0]; + if (!file) { + return; + } + // Clear out the value of the file chooser. This ensures that if the user + // selects the same file, we'll re-read it. + target.value = ''; + this._fetchAndConstructHierarchicalGraph(null, file); } @observe('selection') @@ -180,6 +186,9 @@ class TfGraphDashboardLoader extends LegacyElementMixin(PolymerElement) { }); } + getColors(): any { + return this.colors; + } _setCompoments(componentsPath): Promise { return new Promise(async (resolve, reject) => { this.set('progress', { @@ -212,7 +221,7 @@ class TfGraphDashboardLoader extends LegacyElementMixin(PolymerElement) { } }.bind(this); - const fetchTask = async function (): Promise { + const fetchTask = async (): Promise => { let componentsStr; try { componentsStr = await tf_graph_parser.fetchPbTxt(componentsPath); @@ -225,13 +234,13 @@ class TfGraphDashboardLoader extends LegacyElementMixin(PolymerElement) { shouldBreak = true; // 正常流程也停止定时器 let components: Components = { - Menu: [], - ToolTip: '', - Colors: {}, - OverflowCheck: false, - MicroSteps: 0, - StepList: [], - UnMatchedNode: [], + menu: [], + tooltips: '', + colors: {}, + overflowCheck: false, + microSteps: 0, + stepList: [], + unMatchedNode: [], match: [], }; @@ -250,32 +259,32 @@ class TfGraphDashboardLoader extends LegacyElementMixin(PolymerElement) { ); return; } - + console.log('components', components); // 后续处理逻辑... - const entries = Object.entries(components.ToolTip); + const entries = Object.entries(components.tooltips || {}); const toolTipObject = Object.fromEntries(entries); - this._setMenu(components.Menu); - this._setTooltips(toolTipObject); - this._setColors(components.Colors); - this.set('overflowcheck', components.OverflowCheck); - this._setColorset(Object.entries(components.Colors)); - this._setUnmatched(components.UnMatchedNode); - this._setMatchedlist(components.match); + this.set('menu', components.menu); + this.set('tooltips', toolTipObject); + this.set('colors', components.colors); + this.set('overflowcheck', components.overflowCheck); + this.set('colorset', Object.entries(components.colors || {})); + this.set('unmatched', components.unMatchedNode); + this.set('matchedlist', components.match); - tf_graph_node.getColors(components.Colors); + tf_graph_node.getColors(components.colors); - const microstepsCount = Number(components.MicroSteps); + const microstepsCount = Number(components.microSteps); if (microstepsCount) { const microstepsArray = ['ALL', ...Array.from({ length: microstepsCount }, (_, index) => index)]; - this._setMicrosteps(microstepsArray); + this.set('microsteps', microstepsArray); } else { - this._setMicrosteps([]); + this.set('microsteps', []); } - const steplistCount = Number(components.MicroSteps); - this._setSteplist(steplistCount ? components.StepList : []); + const steplistCount = Number(components.microSteps); + this.set('steplist', steplistCount ? components.stepList : []); resolve(); - }.bind(this); + } // 同时启动定时器和 fetch 任务 await Promise.all([timerTask(), fetchTask()]); @@ -288,7 +297,7 @@ class TfGraphDashboardLoader extends LegacyElementMixin(PolymerElement) { case tf_graph_common.SelectionType.OP_GRAPH: case tf_graph_common.SelectionType.CONCEPTUAL_GRAPH: { // Clear stats about the previous graph. - this.set('outStats', null) + this.set('outStats', null); const params = new URLSearchParams(); params.set('run', run); params.set('conceptual', String(selectionType === tf_graph_common.SelectionType.CONCEPTUAL_GRAPH)); @@ -334,21 +343,4 @@ class TfGraphDashboardLoader extends LegacyElementMixin(PolymerElement) { }.bind(this), ); } - - @observe('selectedFile') - _selectedFileChanged(): void { - let e = this.selectedFile; - if (!e) { - return; - } - const target = (e as any).target as HTMLInputElement; - const file = target.files?.[0]; - if (!file) { - return; - } - // Clear out the value of the file chooser. This ensures that if the user - // selects the same file, we'll re-read it. - target.value = ''; - this._fetchAndConstructHierarchicalGraph(null, file); - } } diff --git a/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/tf_graph_node_info/components/tf_resize_height/index.ts b/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/tf_graph_node_info/components/tf_resize_height/index.ts index 2e7f8e5e652ebbe21f3281a1a306d99a2a6a2acc..d569317564fc4a16e1a965ccb2cd8386cf51f787 100644 --- a/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/tf_graph_node_info/components/tf_resize_height/index.ts +++ b/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/tf_graph_node_info/components/tf_resize_height/index.ts @@ -19,43 +19,41 @@ import { customElement, property, observe } from '@polymer/decorators'; @customElement('tf-resize-height') class ResizableTabsheet extends PolymerElement { - static get template(): HTMLTemplateElement { - return html` - + .resize-handle:hover { + background-color: hsl(214, 100%, 43%); + height: 4px; + } + -
-
- -
- `; - } +
+
+ +
+ `; @property({ type: Number, @@ -63,8 +61,8 @@ class ResizableTabsheet extends PolymerElement { }) height: number = 300; - _resize: (event: MouseEvent) => void = () => { }; - _stopResize: (this: Document, ev: MouseEvent) => any = () => { }; + _resize: (event: MouseEvent) => void = () => {}; + _stopResize: (this: Document, ev: MouseEvent) => any = () => {}; @observe('height') _updateHeight(newHeight): void { diff --git a/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/tf_graph_node_info/components/tf_vaadin_table/index.ts b/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/tf_graph_node_info/components/tf_vaadin_table/index.ts index 289ed28a9239ab84d70ec241bfdb0d97f800d99d..ff03bc2e051be53f7c33d88f0b9d55a7da52dd28 100644 --- a/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/tf_graph_node_info/components/tf_vaadin_table/index.ts +++ b/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/tf_graph_node_info/components/tf_vaadin_table/index.ts @@ -21,84 +21,82 @@ import '@vaadin/tooltip'; import type { GridEventContext } from '@vaadin/grid'; @customElement('tf-vaadin-table') class TfVaadinTable extends PolymerElement { - static get template(): HTMLTemplateElement { - return html` - - - - `; - } + static readonly template = html` + + + + `; @property({ type: Object }) syncGrid?: HTMLElement; // 点击高亮需要同步的表格元素 diff --git a/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/tf_graph_node_info/components/tf_vaddin_text_table/index.ts b/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/tf_graph_node_info/components/tf_vaddin_text_table/index.ts index ac6dec3e1ecbc167e2d6c003b2ef95457ed097f1..9386f9735f771825e4fd2a02f61a392e80818b87 100644 --- a/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/tf_graph_node_info/components/tf_vaddin_text_table/index.ts +++ b/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/tf_graph_node_info/components/tf_vaddin_text_table/index.ts @@ -22,77 +22,75 @@ import type { GridEventContext } from '@vaadin/grid'; import { Notification } from '@vaadin/notification'; @customElement('tf-vaadin-text-table') class TfVaadinTable extends PolymerElement { - static get template(): HTMLTemplateElement { - return html` - - - - `; - } + static readonly template = html` + + + + `; @property({ type: Object }) syncGrid!: HTMLElement; // 点击高亮需要同步的表格元素 diff --git a/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/tf_graph_node_info/index.ts b/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/tf_graph_node_info/index.ts index cb394caf5f768d7fe9c9e54fcb85a6491ef6fcae..3951193c5d13246df5ca1340b5bbe255b32d1b0c 100644 --- a/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/tf_graph_node_info/index.ts +++ b/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/tf_graph_node_info/index.ts @@ -30,8 +30,7 @@ import { BENCH_PREFIX, NPU_PREFIX } from '../tf_graph_common/common'; @customElement('tf-graph-vaadin-tab') class TfGraphNodeInfo extends PolymerElement { - static get template(): HTMLTemplateElement { - return html` + static readonly template = html`