diff --git a/plugins/tensorboard-plugins/tb_graph_ascend/fe/package.json b/plugins/tensorboard-plugins/tb_graph_ascend/fe/package.json index fb9c1d48f45c89c57c4c9bc821db640bfc328178..7cb7285a5fe8a953c88ee43b853003bacf043fa5 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,30 +25,17 @@ "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", - "@polymer/iron-behaviors": "^3.0.1", "@polymer/iron-collapse": "^3.0.1", "@polymer/iron-icon": "^3.0.1", - "@polymer/iron-icons": "^3.0.1", - "@polymer/iron-iconset-svg": "^3.0.1", - "@polymer/iron-list": "^3.1.0", - "@polymer/iron-resizable-behavior": "^3.0.1", - "@polymer/paper-behaviors": "^3.0.1", "@polymer/paper-button": "^3.0.1", "@polymer/paper-checkbox": "^3.1.0", "@polymer/paper-dialog": "^3.0.1", - "@polymer/paper-dropdown-menu": "^3.1.0", - "@polymer/paper-icon-button": "^3.0.2", - "@polymer/paper-item": "^3.0.1", - "@polymer/paper-listbox": "^3.0.1", - "@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,10 +56,10 @@ "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", "lodash": "^4.17.21", "prettier": "^3.4.2", "style-loader": "^4.0.0" } -} \ No newline at end of file +} 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 a0f6a8653759ee8b210a4b4c1255f8f0fbfb5555..1913ce9297b707cb6e8bdd609997c3aa9622c362 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 @@ -117,7 +117,6 @@ class TfGraphDashboard extends LegacyElementMixin(PolymerElement) { display: flex; height: 100%; } - .center { height: 100%; 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..256ce67c3a40bfe36c9f9591200ed33a000948ba 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/index.css b/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/index.css index 9e577e18961f93559ce4a644687f213b5a3f6808..e4a6c11e365bd60e519c0c41dd6c2473787670ab 100644 --- a/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/index.css +++ b/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/index.css @@ -40,4 +40,7 @@ vaadin-select-item { .file-path { color: red; font-weight: 400; -} \ No newline at end of file +} +vaadin-confirm-dialog-overlay { + z-index: 1000; +} diff --git a/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/polymer/irons_and_papers.ts b/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/polymer/irons_and_papers.ts index a0d4c3a1777619222f0a6c045cbc66715a5244db..959f02c7fa29bac7603dfe3d70b82499ac1e8f7d 100644 --- a/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/polymer/irons_and_papers.ts +++ b/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/polymer/irons_and_papers.ts @@ -19,17 +19,8 @@ limitations under the License. import '@polymer/iron-collapse/iron-collapse'; import '@polymer/iron-icon'; -import '@polymer/iron-icons/image-icons'; -import '@polymer/iron-icons/iron-icons'; -import '@polymer/iron-iconset-svg'; -import '@polymer/iron-list/iron-list'; import '@polymer/paper-button'; import '@polymer/paper-checkbox'; import '@polymer/paper-dialog'; -import '@polymer/paper-dropdown-menu/paper-dropdown-menu'; -import '@polymer/paper-icon-button/paper-icon-button'; -import '@polymer/paper-item'; -import '@polymer/paper-listbox'; -import '@polymer/paper-progress'; import '@polymer/paper-tooltip/paper-tooltip'; export { PaperCheckboxElement } from '@polymer/paper-checkbox'; diff --git a/plugins/tensorboard-plugins/tb_graph_ascend/setup.py b/plugins/tensorboard-plugins/tb_graph_ascend/setup.py index 89663352d2cf135990eed834b4807f5af1d3d501..101b8900e42b39b2061097647aa29fb21ab971c3 100644 --- a/plugins/tensorboard-plugins/tb_graph_ascend/setup.py +++ b/plugins/tensorboard-plugins/tb_graph_ascend/setup.py @@ -16,7 +16,7 @@ # --------------------------------------------------------------------------------------------# import setuptools -VERSION = '8.1.1' +VERSION = '8.1.2' INSTALL_REQUIRED = ["tensorboard >= 2.11.2"] setuptools.setup(