diff --git a/package.json b/package.json index cd7aa5e452..e12316e4ef 100755 --- a/package.json +++ b/package.json @@ -76,7 +76,7 @@ "angular2-grid": "2.0.6", "ansi_up": "^5.1.0", "applicationinsights": "1.0.8", - "azdataGraph": "github:Microsoft/azdataGraph#0.0.38", + "azdataGraph": "github:Microsoft/azdataGraph#0.0.42", "chart.js": "^2.9.4", "chokidar": "3.5.1", "graceful-fs": "4.2.8", diff --git a/remote/package.json b/remote/package.json index c4304056cd..befca5cf1d 100755 --- a/remote/package.json +++ b/remote/package.json @@ -17,7 +17,7 @@ "applicationinsights": "1.0.8", "angular2-grid": "2.0.6", "ansi_up": "^5.1.0", - "azdataGraph": "github:Microsoft/azdataGraph#0.0.38", + "azdataGraph": "github:Microsoft/azdataGraph#0.0.42", "chart.js": "^2.9.4", "cookie": "^0.4.0", "graceful-fs": "4.2.8", diff --git a/remote/web/package.json b/remote/web/package.json index 65b90a5828..8b17a27dbc 100755 --- a/remote/web/package.json +++ b/remote/web/package.json @@ -15,7 +15,7 @@ "@vscode/vscode-languagedetection": "1.0.21", "angular2-grid": "2.0.6", "ansi_up": "^5.1.0", - "azdataGraph": "github:Microsoft/azdataGraph#0.0.38", + "azdataGraph": "github:Microsoft/azdataGraph#0.0.42", "chart.js": "^2.9.4", "gridstack": "^3.1.3", "kburtram-query-plan": "2.6.1", diff --git a/remote/web/yarn.lock b/remote/web/yarn.lock index 5a725afe63..e20b9497be 100644 --- a/remote/web/yarn.lock +++ b/remote/web/yarn.lock @@ -150,9 +150,9 @@ array-uniq@^1.0.2: resolved "https://registry.yarnpkg.com/array-uniq/-/array-uniq-1.0.3.tgz#af6ac877a25cc7f74e058894753858dfdb24fdb6" integrity sha1-r2rId6Jcx/dOBYiUdThY39sk/bY= -"azdataGraph@github:Microsoft/azdataGraph#0.0.38": - version "0.0.38" - resolved "https://codeload.github.com/Microsoft/azdataGraph/tar.gz/387ffc5c524784a2129fe028c1dfd36264150aa5" +"azdataGraph@github:Microsoft/azdataGraph#0.0.42": + version "0.0.42" + resolved "https://codeload.github.com/Microsoft/azdataGraph/tar.gz/86f72ee9c9ea78a31c9ad2f402fb24d40e50c75b" chalk@^2.3.0, chalk@^2.4.1: version "2.4.2" diff --git a/remote/yarn.lock b/remote/yarn.lock index 8dc883724a..156f6337bd 100644 --- a/remote/yarn.lock +++ b/remote/yarn.lock @@ -198,9 +198,9 @@ array-uniq@^1.0.2: resolved "https://registry.yarnpkg.com/array-uniq/-/array-uniq-1.0.3.tgz#af6ac877a25cc7f74e058894753858dfdb24fdb6" integrity sha1-r2rId6Jcx/dOBYiUdThY39sk/bY= -"azdataGraph@github:Microsoft/azdataGraph#0.0.38": - version "0.0.38" - resolved "https://codeload.github.com/Microsoft/azdataGraph/tar.gz/387ffc5c524784a2129fe028c1dfd36264150aa5" +"azdataGraph@github:Microsoft/azdataGraph#0.0.42": + version "0.0.42" + resolved "https://codeload.github.com/Microsoft/azdataGraph/tar.gz/86f72ee9c9ea78a31c9ad2f402fb24d40e50c75b" bindings@^1.5.0: version "1.5.0" diff --git a/src/sql/azdata.proposed.d.ts b/src/sql/azdata.proposed.d.ts index 4054aa0644..e46538624a 100644 --- a/src/sql/azdata.proposed.d.ts +++ b/src/sql/azdata.proposed.d.ts @@ -1314,6 +1314,14 @@ declare module 'azdata' { * Data to show in top operations table for the node. */ topOperationsData: TopOperationsDataItem[]; + /** + * Output row count associated with the node + */ + rowCountDisplayString: string; + /** + * Cost string for the node + */ + costDisplayString: string; } export interface ExecutionPlanBadge { diff --git a/src/sql/workbench/contrib/executionPlan/browser/azdataGraphView.ts b/src/sql/workbench/contrib/executionPlan/browser/azdataGraphView.ts index b95622f3f1..3c42cedcb4 100644 --- a/src/sql/workbench/contrib/executionPlan/browser/azdataGraphView.ts +++ b/src/sql/workbench/contrib/executionPlan/browser/azdataGraphView.ts @@ -36,7 +36,6 @@ export class AzdataGraphView { private _executionPlan: azdata.executionPlan.ExecutionPlanGraph, @ITextResourcePropertiesService private readonly textResourcePropertiesService: ITextResourcePropertiesService, ) { - this._parentContainer.tabIndex = 0; this._diagramModel = this.populate(this._executionPlan.root); let queryPlanConfiguration = { @@ -85,11 +84,6 @@ export class AzdataGraphView { } } }); - - // Focusing the parent container when we click the graph - this._diagram.graph.addListener('click', (sender, evt) => { - this._parentContainer.focus(); - }); } /** @@ -293,6 +287,8 @@ export class AzdataGraphView { let diagramNode: AzDataGraphCell = {}; diagramNode.label = node.subtext.join(this.textResourcePropertiesService.getEOL(undefined)); diagramNode.tooltipTitle = node.name; + diagramNode.rowCountDisplayString = node.rowCountDisplayString; + diagramNode.costDisplayString = node.costDisplayString; if (!node.id.toString().startsWith(`element-`)) { node.id = `element-${node.id}`; } @@ -445,6 +441,14 @@ export interface AzDataGraphCell { * icon for the cell */ icon: string; + /** + * cost string for the cell + */ + costDisplayString: string; + /** + * row count for the cell + */ + rowCountDisplayString: string; /** * title for the cell hover tooltip */ diff --git a/src/sql/workbench/contrib/executionPlan/browser/media/executionPlan.css b/src/sql/workbench/contrib/executionPlan/browser/media/executionPlan.css index dd94a62939..4c317f333c 100644 --- a/src/sql/workbench/contrib/executionPlan/browser/media/executionPlan.css +++ b/src/sql/workbench/contrib/executionPlan/browser/media/executionPlan.css @@ -803,3 +803,66 @@ However we always want it to be the width of the container it is resizing. flex: 1; height: calc(100% - 50px); } + +.graph-cell{ + align-items: center; + position: relative; + width: fit-content; + height: 80px; + font-size: 10px; + font-family:'Monaco', 'Menlo', 'Consolas'; +} + +.graph-cell-body{ + display: flex; + flex-direction: column; + align-items: center; + padding: 2px 0px; + min-width: 70px; + outline: none !important; +} + +.graph-cell-icon{ + background-position: center; + background-repeat: no-repeat; + background-size: cover; + width:30px; + height:30px; + align-self: center; + position: relative; +} + +.graph-cell-icon .graph-icon-badge { + position: absolute; + background-position: center; + background-repeat: no-repeat; + background-size: cover; + width:12px; + height:12px; + bottom: 0; + right: -5px; +} + +.graph-cell .graph-cell-row-count { + position: absolute; + top: 30%; + left: calc(50% - 60px); + min-width: 20px; + text-align: right; + outline: none !important; +} + +.graph-cell .graph-icon-badge-expand { + width: 12px; + height: 12px; + background-size: 12px 12px; + position: absolute; + top: 0px; + right: 0px; +} + +.graph-cell-cost{ + border-radius: 15px; + width: fit-content; + padding: 1px 8px 0px 8px; +} diff --git a/yarn.lock b/yarn.lock index 7fd66ecb53..9c3420ef57 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1891,9 +1891,9 @@ aws4@^1.8.0: resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.8.0.tgz#f0e003d9ca9e7f59c7a508945d7b2ef9a04a542f" integrity sha512-ReZxvNHIOv88FlT7rxcXIIC0fPt4KZqZbOlivyWtXLt8ESx84zd3kMC6iK5jVeS2qt+g7ftS7ye4fi06X5rtRQ== -"azdataGraph@github:Microsoft/azdataGraph#0.0.38": - version "0.0.38" - resolved "https://codeload.github.com/Microsoft/azdataGraph/tar.gz/387ffc5c524784a2129fe028c1dfd36264150aa5" +"azdataGraph@github:Microsoft/azdataGraph#0.0.42": + version "0.0.42" + resolved "https://codeload.github.com/Microsoft/azdataGraph/tar.gz/86f72ee9c9ea78a31c9ad2f402fb24d40e50c75b" bach@^1.0.0: version "1.2.0"