diff --git a/plugins/tensorboard-plugins/tb_graph_ascend/README.md b/plugins/tensorboard-plugins/tb_graph_ascend/README.md index 737292598ecfdf0fb39d676ce3352fb4b246076e..02bb2257371e290c4e2a685303396d70aa24c531 100644 --- a/plugins/tensorboard-plugins/tb_graph_ascend/README.md +++ b/plugins/tensorboard-plugins/tb_graph_ascend/README.md @@ -8,7 +8,7 @@ ### 1. 相关依赖 - `python >= 3.7 ，tensorboard >= 2.11.2，numpy <= 1.26.3` + `python >= 3.7 ，tensorboard >= 2.11.2 ### 2. 安装方式 diff --git a/plugins/tensorboard-plugins/tb_graph_ascend/fe/package.json b/plugins/tensorboard-plugins/tb_graph_ascend/fe/package.json index fb9c1d48f45c89c57c4c9bc821db640bfc328178..4591e3df7354859cfdcde751cdaa425a38fc551e 100644 --- a/plugins/tensorboard-plugins/tb_graph_ascend/fe/package.json +++ b/plugins/tensorboard-plugins/tb_graph_ascend/fe/package.json @@ -10,8 +10,8 @@ "prettier": "prettier --config ./.prettierrc --write ./src/**/*.ts" }, "devDependencies": { - "@types/d3": "5.7.2", - "@types/lodash": "^4.14.172", + "@types/d3": "^7.4.3", + "@types/lodash": "^4.17.20", "@types/node": "^16.4.13", "@types/offscreencanvas": "^2019.6.3", "@types/requirejs": "^2.1.33", @@ -25,8 +25,7 @@ "typescript": "^5.4.5", "webpack": "^5.96.1", "webpack-cli": "^5.1.4", - "webpack-dev-server": "4.15.1", - "ws": "8.13.0" + "webpack-dev-server": "4.15.1" }, "dependencies": { "@polymer/decorators": "^3.0.0", @@ -48,7 +47,6 @@ "@polymer/paper-progress": "^3.0.1", "@polymer/paper-tooltip": "^3.0.1", "@polymer/polymer": "^3.5.1", - "@types/lodash": "^4.17.1", "@vaadin/button": "24.6.5", "@vaadin/checkbox": "24.6.5", "@vaadin/combo-box": "24.6.5", @@ -69,8 +67,9 @@ "clean-webpack-plugin": "^4.0.0", "cross-env": "^7.0.3", "css-loader": "^7.1.2", - "d3": "5.7.0", + "d3": "^7.9.0", "dagre": "^0.8.5", + "form-data": "^4.0.4", "lodash": "^4.17.21", "prettier": "^3.4.2", "style-loader": "^4.0.0" 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 f3a4f8a6fea7dac0d8b577439b09ea6b781816ce..0a31f9ccf165b9740463c84981f563dd441831bd 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 @@ -228,16 +228,16 @@ class Hierarchy extends PolymerElement { const newTransform = d3.zoomIdentity .translate(initialTransform.x, initialTransform.y) .scale(initialTransform.scale); - const mainZoom = d3.zoom().on('zoom', () => { - this._zoomTransform = (d3 as any).event.transform; + const mainZoom = d3.zoom().on('zoom', (event: d3.D3ZoomEvent) => { + this._zoomTransform = event.transform; if (!this._zoomStartCoords) { this._zoomStartCoords = this._zoomTransform; } if (this.container) { - d3.select(this.container as HTMLElement).attr('transform', (d3 as any).event.transform.toString()); + d3.select(this.container as HTMLElement).attr('transform', event.transform.toString()); } this.renderGraph(this.hierarchyData, this.hightLightNodeName); - this.minimap?.zoom((d3 as any).event.transform); // Notify the minimap. + this.minimap?.zoom(event.transform); // Notify the minimap. }); this.minimap = (minimapEle as any)?.init(this.graph, this.container, mainZoom, 160, 10); @@ -253,7 +253,7 @@ class Hierarchy extends PolymerElement { const prefix = PREFIX_MAP[this.graphType]; const selectedNodeName = selectedNode.startsWith(prefix) ? selectedNode : `${prefix}${selectedNode}`; // 加上前缀 const config = { colors: this.colors, isOverflowFilter: this.isOverflowFilter, graphType: this.graphType }; - const renderData = this.useGraph.preProcessData(data, selectedNodeName, config, transform); + const renderData = this.useGraph.preProcessData(this.hierarchyObject, data, selectedNodeName, config, transform); this.useGraph.bindInnerRect(container, renderData); this.useGraph.bindOuterRect(container, renderData); this.useGraph.bindText(container, renderData); diff --git a/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/graph_board/components/hierarchy/useGraph.ts b/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/graph_board/components/hierarchy/useGraph.ts index c386bb64311ea94c83c9b61f8387657d49bb8aa5..481c804afa32e89359df30494b9f662d64766e6c 100644 --- a/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/graph_board/components/hierarchy/useGraph.ts +++ b/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/graph_board/components/hierarchy/useGraph.ts @@ -37,6 +37,7 @@ import { } from '../../../common/constant'; const useGraph = (): UseGraphType => { const preProcessData: UseGraphType['preProcessData'] = ( + hierarchyObject: { [key: string]: HierarchyNodeType }, data: Array, selectedNode, config: PreProcessDataConfigType, @@ -55,9 +56,7 @@ const useGraph = (): UseGraphType => { virtualNodes.forEach((d) => { let node: HierarchyNodeType | undefined = d; while (node?.parentNode) { - const parent = data.find( - (dInner) => node?.parentNode === dInner.name?.replace(new RegExp(`^(${NPU_PREFIX}|${BENCH_PREFIX})`), ''), - ); + const parent = hierarchyObject[node.parentNode]; if (parent && virtualNodes.indexOf(parent) === -1 && parentsVirtualNodes.indexOf(parent) === -1) { parentsVirtualNodes.push(parent); } diff --git a/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/graph_board/components/minimap/minimap.ts b/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/graph_board/components/minimap/minimap.ts index de6fea12d524a7bbbb7bae4b05c5fbd33ff63beb..3a173b631c332d62955aff7a7fceed4fb14d45a6 100644 --- a/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/graph_board/components/minimap/minimap.ts +++ b/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/graph_board/components/minimap/minimap.ts @@ -88,24 +88,26 @@ export class Minimap { let $minimapSvg = $shadowRoot.select('svg'); // Make the viewpoint rectangle draggable. let $viewpoint = $minimapSvg.select('rect'); - let dragmove = (d): void => { - this.viewpointCoord.x = ((d3 as any).event).x; - this.viewpointCoord.y = ((d3 as any).event).y; + let dragmove = (event: d3.D3DragEvent): void => { + let width = Number($viewpoint.attr('width')); + let height = Number($viewpoint.attr('height')); + this.viewpointCoord.x = event.x - (width / 2);; + this.viewpointCoord.y = event.y - (height / 2);; this.updateViewpoint(); }; this.viewpointCoord = { x: 0, y: 0 }; let drag = d3.drag().subject(Object).on('drag', dragmove); $viewpoint.datum(this.viewpointCoord as any).call(drag as any); // Make the minimap clickable. - $minimapSvg.on('click', (): void => { - if (((d3 as any).event).defaultPrevented) { + $minimapSvg.on('click', (event: Event): void => { + if (event.defaultPrevented) { // This click was part of a drag event, so suppress it. return; } // Update the coordinates of the viewpoint. let width = Number($viewpoint.attr('width')); let height = Number($viewpoint.attr('height')); - let clickCoords = (d3 as any).mouse($minimapSvg.node() as any); + let clickCoords = d3.pointer(event, $minimapSvg.node() as any); this.viewpointCoord.x = clickCoords[0] - (width / 2); this.viewpointCoord.y = clickCoords[1] - (height / 2); this.updateViewpoint(); diff --git a/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/graph_board/type/index.d.ts b/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/graph_board/type/index.d.ts index a0ec44186833602b8c34b9a84b2ff278be1710b6..47db174ac24e1c03e886ee563ea1e730ed115343 100644 --- a/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/graph_board/type/index.d.ts +++ b/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/graph_board/type/index.d.ts @@ -53,6 +53,7 @@ export interface UseGraphType { bindOuterRect: (container: any, data: any) => void; bindText: (container: any, data: any) => void; preProcessData: ( + hierarchyObject: { [key: string]: HierarchyNodeType }, data: any[], selectedNode: string, config: PreProcessDataConfigType, diff --git a/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/utils/request.ts b/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/utils/request.ts index 84c23efb6d96aa88883dec5570062d93ccdfd3a3..b80f84cee236c5e8cabb7012fadb3fffcac00bf6 100644 --- a/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/utils/request.ts +++ b/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/utils/request.ts @@ -29,11 +29,11 @@ interface ApiResponse { } export default async function request(options: RequestOptions): Promise> { const { url, method = 'GET', data = null, params = null, headers = {}, timeout = 60000 * 3 } = options; - + const controller = new AbortController(); + const signal = controller.signal; + const timeoutId = setTimeout(() => controller.abort(), timeout); try { - const controller = new AbortController(); - const signal = controller.signal; - const timeoutId = setTimeout(() => controller.abort(), timeout); + const response: AxiosResponse = await axios({ url, method, @@ -57,6 +57,7 @@ export default async function request(options: RequestOptions): Promise }; } } catch (error) { + clearTimeout(timeoutId); if (axios.isAxiosError(error)) { const axiosError = error as AxiosError; if (axiosError.code === 'ECONNABORTED') { diff --git a/plugins/tensorboard-plugins/tb_graph_ascend/server/app/controllers/hierarchy.py b/plugins/tensorboard-plugins/tb_graph_ascend/server/app/controllers/hierarchy.py index 1a83932002196f47ece21cc99069fac231469eb3..b1c772c03a9bd282ff9acf0fb8b26966d3c13806 100644 --- a/plugins/tensorboard-plugins/tb_graph_ascend/server/app/controllers/hierarchy.py +++ b/plugins/tensorboard-plugins/tb_graph_ascend/server/app/controllers/hierarchy.py @@ -110,7 +110,7 @@ class Hierarchy: except Exception as e: logger.error(f"Failed to expand parent node {parent_node_name}: {e}") break - if parent_node_name == self.root_name: + if parent_node_name == self.root_name or not parent_node_name: break parent_node_name = graph.get('node', {}).get(parent_node_name, {}).get("upnode") parent_node = self.current_hierarchy.get(parent_node_name)