From ea4930b70278bc3c995d8ddd5f19fe4bbedb1724 Mon Sep 17 00:00:00 2001 From: sunchao <1299792067@qq.com> Date: Wed, 26 Mar 2025 15:33:23 +0800 Subject: [PATCH 1/5] =?UTF-8?q?=E2=9C=A8=20feat:=20clean=20code=20+=20?= =?UTF-8?q?=E6=A0=BC=E5=BC=8F=E5=8C=96=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../fe/src/tf_backend/requestManager.ts | 2 +- .../fe/src/tf_graph/tf-graph-scene.html.ts | 2 +- .../fe/src/tf_graph/tf-graph-scene.ts | 77 +++--- .../fe/src/tf_graph_board/tf-graph-board.ts | 10 +- .../fe/src/tf_graph_common/contextmenu.ts | 4 +- .../fe/src/tf_graph_common/edge.ts | 4 +- .../fe/src/tf_graph_common/graph.ts | 4 +- .../fe/src/tf_graph_common/hierarchy.ts | 2 +- .../fe/src/tf_graph_common/layout.ts | 16 +- .../fe/src/tf_graph_common/node.ts | 16 +- .../fe/src/tf_graph_common/scene.ts | 20 +- .../components/tf_color_select/index.ts | 4 +- .../components/tf_manual_match/index.ts | 236 +++++++++--------- .../components/tf_manual_match/useMatched.ts | 4 +- .../components/tf_search_combox/index.ts | 130 +++++----- .../ts_linkage_search_combox/index.ts | 170 ++++++------- .../tf_graph_controls/tf-graph-controls.ts | 9 +- .../tf-graph-debugger-data-card.ts | 66 ++--- .../tf-graph-dashboard-loader.ts | 45 ++-- .../components/tf_resize_height/index.ts | 68 +++-- .../components/tf_vaadin_table/index.ts | 154 ++++++------ .../components/tf_vaddin_text_table/index.ts | 140 +++++------ .../fe/src/tf_graph_node_info/index.ts | 4 +- .../fe/src/tf_wbr_string/tf-wbr-string.ts | 2 +- .../tb_graph_ascend/fe/src/utils/index.ts | 8 +- .../fe/src/vz_sorting/sorting.ts | 12 +- 26 files changed, 594 insertions(+), 615 deletions(-) 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 d47635c83d..a932561990 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 80cfea0b92..7033d6b90e 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 84a90dc1e5..60b5a139d3 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,46 @@ 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, @@ -455,8 +452,8 @@ class TfGraphScene2 extends LegacyElementMixin(DarkModeMixin(PolymerElement)) im const translateX = (mouseX - currentTransform.x) / k; const translateY = (mouseY - currentTransform.y) / k; const newScale = currentTransform.k * scaleFactor; - this.x = mouseX - (translateX * newScale); - this.y = mouseY - (translateY * newScale); + this.x = mouseX - translateX * newScale; + this.y = mouseY - translateY * newScale; const newTransform = d3.zoomIdentity.translate(this.x, this.y).scale(newScale); d3.select(this.$.svg).call(d3.zoom().transform, newTransform); d3.select(this.$.root).attr('transform', newTransform.toString()); 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 6e690905cd..81ae749201 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 @@ -204,10 +204,10 @@ class TfGraphBoard extends LegacyElementMixin(PolymerElement) { hierarchyParams: tf_graph_hierarchy.HierarchyParams = tf_graph_hierarchy.DefaultHierarchyParams; /** - * A number between 0 and 100 denoting the % of progress - * for the progress bar and the displayed message. - * @type {{value: number, msg: string}} - */ + * A number between 0 and 100 denoting the % of progress + * for the progress bar and the displayed message. + * @type {{value: number, msg: string}} + */ @property({ type: Object }) progress: object; @@ -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 f6ba4aeaa6..286282f7a8 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 a2d881ead9..fd81b44b56 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 01381c87cb..0498423156 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 @@ -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 d1e77b41db..1b4908220f 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 @@ -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 c495198b3f..9fe6a598d8 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 @@ -307,7 +307,7 @@ function layoutMetanode(renderNodeInfo: render.RenderGroupNodeInfo, rankSep: num let yOffset = i > 0 ? params.extractYOffset : 0; // use width/height here to avoid overlaps between extracts child.x = 0; - child.y = height + yOffset + (child.height / 2); + child.y = height + yOffset + child.height / 2; return height + yOffset + child.height; }, 0, @@ -415,7 +415,7 @@ function layoutAnnotation(renderNodeInfo: render.RenderNodeInfo): void { (height, a, i) => { let yOffset = i > 0 ? params.yOffset : 0; a.dx = -((renderNodeInfo.coreBox.width + a.width) / 2) - params.xOffset; - a.dy = height + yOffset + (a.height / 2); + a.dy = height + yOffset + a.height / 2; return height + yOffset + a.height; }, 0, @@ -434,7 +434,7 @@ function layoutAnnotation(renderNodeInfo: render.RenderNodeInfo): void { (height, a, i) => { let yOffset = i > 0 ? params.yOffset : 0; a.dx = (renderNodeInfo.coreBox.width + a.width) / 2 + params.xOffset; - a.dy = height + yOffset + (a.height / 2); + a.dy = height + yOffset + a.height / 2; return height + yOffset + a.height; }, 0, @@ -447,7 +447,7 @@ function layoutAnnotation(renderNodeInfo: render.RenderNodeInfo): void { }); // Creating scales for touch point between the in-annotation edges // and their hosts. - let inTouchHeight = Math.min((renderNodeInfo.height / 2) - renderNodeInfo.radius, inboxHeight / 2); + let inTouchHeight = Math.min(renderNodeInfo.height / 2 - renderNodeInfo.radius, inboxHeight / 2); inTouchHeight = inTouchHeight < 0 ? 0 : inTouchHeight; let inY = d3 @@ -459,7 +459,7 @@ function layoutAnnotation(renderNodeInfo: render.RenderNodeInfo): void { a.points = [ // The annotation node end { - dx: a.dx + (a.width / 2), + dx: a.dx + a.width / 2, dy: a.dy, }, // The host node end @@ -473,7 +473,7 @@ function layoutAnnotation(renderNodeInfo: render.RenderNodeInfo): void { }); // Creating scales for touch point between the out-annotation edges // and their hosts. - let outTouchHeight = Math.min((renderNodeInfo.height / 2) - renderNodeInfo.radius, outboxHeight / 2); + let outTouchHeight = Math.min(renderNodeInfo.height / 2 - renderNodeInfo.radius, outboxHeight / 2); outTouchHeight = outTouchHeight < 0 ? 0 : outTouchHeight; let outY = d3 .scaleLinear() @@ -491,7 +491,7 @@ function layoutAnnotation(renderNodeInfo: render.RenderNodeInfo): void { }, // The annotation node end { - dx: a.dx - (a.width / 2), + dx: a.dx - a.width / 2, dy: a.dy, }, ]; @@ -535,5 +535,5 @@ export function computeCXPositionOfNodeShape(renderInfo: render.RenderNodeInfo): return renderInfo.x; } let dx = renderInfo.inAnnotations.list.length ? renderInfo.inboxWidth : 0; - return renderInfo.x - (renderInfo.width / 2) + dx + (renderInfo.coreBox.width / 2); + return renderInfo.x - renderInfo.width / 2 + dx + renderInfo.coreBox.width / 2; } diff --git a/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/tf_graph_common/node.ts b/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/tf_graph_common/node.ts index 62bf59d9ca..58d4dd016c 100644 --- a/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/tf_graph_common/node.ts +++ b/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/tf_graph_common/node.ts @@ -191,8 +191,8 @@ function subsceneBuild(nodeGroup, renderNodeInfo: render.RenderGroupNodeInfo, sc */ function subscenePosition(nodeGroup, d: render.RenderNodeInfo): void { // Translate the subscene to the middle of the parent node in vertical direction. - let x0 = d.x - (d.coreBox.width / 2); - let y0 = d.y - (d.height / 2) + d.paddingTop; + let x0 = d.x - d.coreBox.width / 2; + let y0 = d.y - d.height / 2 + d.paddingTop; let subscene = tf_graph_scene.selectChild(nodeGroup, 'g', Class.Subscene.GROUP); tf_graph_scene.translate(subscene, x0, y0); } @@ -487,10 +487,10 @@ function position(nodeGroup, d: render.RenderNodeInfo): void { let OFFSET_VALUE = 8.1; if (d.expanded) { tf_graph_scene.positionRect(shapes, d.x, d.y, d.width, d.height); - INSIDE_RECT_OFFSET = d.y - (d.height / 2) + OFFSET_VALUE; + INSIDE_RECT_OFFSET = d.y - d.height / 2 + OFFSET_VALUE; subscenePosition(nodeGroup, d); // Put the label on top. - labelPosition(nodeGroup, cx, d.y, (-d.height / 2) + (d.labelHeight / 2)); + labelPosition(nodeGroup, cx, d.y, -d.height / 2 + d.labelHeight / 2); } else { tf_graph_scene.positionRect(shapes, cx, d.y, d.coreBox.width, d.coreBox.height); // Place the label in the middle. @@ -501,7 +501,7 @@ function position(nodeGroup, d: render.RenderNodeInfo): void { tf_graph_scene.positionRect(shapesHeader, d.x, INSIDE_RECT_OFFSET, d.width - 1, 15); subscenePosition(nodeGroup, d); // Put the label on top. - labelPosition(nodeGroup, cx, d.y, (-d.height / 2) + (d.labelHeight / 2)); + labelPosition(nodeGroup, cx, d.y, -d.height / 2 + d.labelHeight / 2); } else { tf_graph_scene.positionRect(shapesHeader, cx, d.y, d.coreBox.width, d.coreBox.height); // Place the label in the middle. @@ -517,7 +517,7 @@ function position(nodeGroup, d: render.RenderNodeInfo): void { tf_graph_scene.positionRect(shapes, d.x, d.y, d.width, d.height); subscenePosition(nodeGroup, d); // Put the label on top. - labelPosition(nodeGroup, cx, d.y, (-d.height / 2) + (d.labelHeight / 2)); + labelPosition(nodeGroup, cx, d.y, -d.height / 2 + d.labelHeight / 2); } else { tf_graph_scene.positionRect(shapes, cx, d.y, d.coreBox.width, d.coreBox.height); // Place the label in the middle. @@ -643,7 +643,7 @@ export function stylize( sceneElement: TfGraphScene, nodeClassName?, ): void { - const resolvedNodeClassName = nodeClassName || Class.Node.SHAPE || Class.Node.OUTER; + const resolvedNodeClassName = nodeClassName || Class.Node.SHAPE || Class.Node.OUTER; const isHighlighted = sceneElement.isNodeHighlighted(renderInfo.node.name); const isSelected = sceneElement.isNodeSelected(renderInfo.node.name); const isExpanded = renderInfo.expanded && resolvedNodeClassName !== Class.Annotation.NODE; @@ -1178,7 +1178,7 @@ function update(aGroup, d: render.RenderNodeInfo, a: render.Annotation, sceneEle aGroup .select(`text.${Class.Annotation.LABEL}`) .transition() - .attr('x', cx + a.dx + ((a.isIn ? -1 : 1) * ((a.width / 2) + a.labelOffset))) + .attr('x', cx + a.dx + (a.isIn ? -1 : 1) * (a.width / 2 + a.labelOffset)) .attr('y', d.y + a.dy); // Some annotations (such as summary) are represented using a 12x12 image tag. // Purposely omitted units (e.g. pixels) since the images are vector graphics. diff --git a/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/tf_graph_common/scene.ts b/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/tf_graph_common/scene.ts index 3898a2d476..67863b00ad 100644 --- a/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/tf_graph_common/scene.ts +++ b/plugins/tensorboard-plugins/tb_graph_ascend/fe/src/tf_graph_common/scene.ts @@ -114,8 +114,8 @@ export function panToNode(nodeName: string, svg, zoomG, d3zoom): boolean { // by this logic. let centerX = (pointTL.x + pointBR.x) / 2; let centerY = (pointTL.y + pointBR.y) / 2; - let dx = svgRect.left + (svgRect.width / 2) - centerX; - let dy = svgRect.top + (svgRect.height / 2) - centerY; + let dx = svgRect.left + svgRect.width / 2 - centerX; + let dy = svgRect.top + svgRect.height / 2 - centerY; // We translate by this amount. We divide the X and Y translations by the // scale to undo how translateBy scales the translations (in d3 v4). @@ -158,10 +158,10 @@ export function position(sceneGroup, renderNode: render.RenderGroupNodeInfo): vo if (hasInExtract) { let inExtractX = renderNode.coreBox.width; if (auxWidth < layout.MIN_AUX_WIDTH) { - inExtractX = inExtractX - layout.MIN_AUX_WIDTH + (renderNode.inExtractBox.width / 2); + inExtractX = inExtractX - layout.MIN_AUX_WIDTH + renderNode.inExtractBox.width / 2; } else { inExtractX = - inExtractX - (renderNode.inExtractBox.width / 2) - renderNode.outExtractBox.width - (hasOutExtract ? offset : 0); + inExtractX - renderNode.inExtractBox.width / 2 - renderNode.outExtractBox.width - (hasOutExtract ? offset : 0); } inExtractX = inExtractX - renderNode.libraryFunctionsBox.width - (hasLibraryFunctions ? offset : 0); translate(selectChild(sceneGroup, 'g', Class.Scene.INEXTRACT), inExtractX, yTranslate); @@ -170,7 +170,7 @@ export function position(sceneGroup, renderNode: render.RenderGroupNodeInfo): vo if (hasOutExtract) { let outExtractX = renderNode.coreBox.width; if (auxWidth < layout.MIN_AUX_WIDTH) { - outExtractX = outExtractX - layout.MIN_AUX_WIDTH + (renderNode.outExtractBox.width / 2); + outExtractX = outExtractX - layout.MIN_AUX_WIDTH + renderNode.outExtractBox.width / 2; } else { outExtractX -= renderNode.outExtractBox.width / 2; } @@ -178,7 +178,7 @@ export function position(sceneGroup, renderNode: render.RenderGroupNodeInfo): vo translate(selectChild(sceneGroup, 'g', Class.Scene.OUTEXTRACT), outExtractX, yTranslate); } if (hasLibraryFunctions) { - let libraryFunctionsExtractX = renderNode.coreBox.width - (renderNode.libraryFunctionsBox.width / 2); + let libraryFunctionsExtractX = renderNode.coreBox.width - renderNode.libraryFunctionsBox.width / 2; translate(selectChild(sceneGroup, 'g', Class.Scene.FUNCTION_LIBRARY), libraryFunctionsExtractX, yTranslate); } } @@ -208,8 +208,8 @@ export function translate(selection, x0: number, y0: number): void { export function positionRect(rect, cx: number, cy: number, width: number, height: number): void { rect .transition() - .attr('x', cx - (width / 2)) - .attr('y', cy - (height / 2)) + .attr('x', cx - width / 2) + .attr('y', cy - height / 2) .attr('width', width) .attr('height', height); } @@ -226,8 +226,8 @@ export function positionButton(button, renderNode: render.RenderNodeInfo): void // with space given the draw the button inside of the corner. let width = renderNode.expanded ? renderNode.width : renderNode.coreBox.width; let height = renderNode.expanded ? renderNode.height : renderNode.coreBox.height; - let x = cx + (width / 2) - 6; - let y = renderNode.y - (height / 2) + 6; + let x = cx + width / 2 - 6; + let y = renderNode.y - height / 2 + 6; let translateStr = `translate(${x},${y})`; button.selectAll('path').transition().attr('transform', translateStr); button.select('circle').transition().attr({ cx: x, cy: y, r: layout.PARAMS.nodeSize.meta.expandButtonRadius }); 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 7cb806a839..bff6f0af9a 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 e2d26dabeb..0ff91499eb 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 a593a1fc04..234a43188c 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 57ea58f227..6ce3273656 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 5fbae19478..2f76248ca2 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_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 f1004ad482..8feb678186 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 da3df78986..4106b264ff 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 @@ -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[]; @@ -100,7 +102,6 @@ class TfGraphDashboardLoader extends LegacyElementMixin(PolymerElement) { @property({ type: Object }) _graphRunTag: GraphRunTag; - override _template = null; @property({ type: Object, @@ -164,8 +165,21 @@ class TfGraphDashboardLoader extends LegacyElementMixin(PolymerElement) { }) 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 +194,10 @@ class TfGraphDashboardLoader extends LegacyElementMixin(PolymerElement) { }); } + getColors(): any { + return this.colors; + } + _setCompoments(componentsPath): Promise { return new Promise(async (resolve, reject) => { this.set('progress', { @@ -201,7 +219,7 @@ class TfGraphDashboardLoader extends LegacyElementMixin(PolymerElement) { while (timer <= DATA_LOAD_TIME && !shouldBreak) { if (timer < DATA_NOTICE_TIME) { const progress = Math.log(timer + 1) / Math.log(DATA_NOTICE_TIME); - const progressIncrement = (progress * 100) - previousProgress; + const progressIncrement = progress * 100 - previousProgress; dataTracker.updateProgress(progressIncrement); previousProgress = progress * 100; } else { @@ -288,7 +306,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 +352,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 2e7f8e5e65..d569317564 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 289ed28a92..ff03bc2e05 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 ac6dec3e1e..9386f9735f 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 cb394caf5f..3951193c5d 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` - -
-

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

- 保存 - + 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 e2d26dabeb..0ff91499eb 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 a593a1fc04..234a43188c 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 57ea58f227..6ce3273656 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 5fbae19478..2f76248ca2 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_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 f1004ad482..8feb678186 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 da3df78986..10b320f641 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 @@ -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[]; @@ -100,7 +102,6 @@ class TfGraphDashboardLoader extends LegacyElementMixin(PolymerElement) { @property({ type: Object }) _graphRunTag: GraphRunTag; - override _template = null; @property({ type: Object, @@ -164,8 +165,21 @@ class TfGraphDashboardLoader extends LegacyElementMixin(PolymerElement) { }) 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 +194,10 @@ class TfGraphDashboardLoader extends LegacyElementMixin(PolymerElement) { }); } + getColors(): any { + return this.colors; + } + _setCompoments(componentsPath): Promise { return new Promise(async (resolve, reject) => { this.set('progress', { @@ -288,7 +306,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 +352,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 2e7f8e5e65..d569317564 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 289ed28a92..ff03bc2e05 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 ac6dec3e1e..9386f9735f 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 cb394caf5f..3951193c5d 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` - -
-

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

- 保存 - + 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 e2d26dabeb..0ff91499eb 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 a593a1fc04..234a43188c 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 57ea58f227..6ce3273656 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 5fbae19478..2f76248ca2 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_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 f1004ad482..8feb678186 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 33eef3ea6b..8452d1ce9c 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 @@ -186,11 +186,9 @@ class TfGraphDashboardLoader extends LegacyElementMixin(PolymerElement) { }); } - getColors(): any { return this.colors; } - _setCompoments(componentsPath): Promise { return new Promise(async (resolve, reject) => { this.set('progress', { 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 2e7f8e5e65..d569317564 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 289ed28a92..ff03bc2e05 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 ac6dec3e1e..9386f9735f 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 cb394caf5f..3951193c5d 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`