New azdata graph layout (#20451)

* Updated contracts

* Adding latest azdataGraph update

* Updating graph lib
This commit is contained in:
Aasim Khan
2022-08-24 12:09:17 -07:00
committed by GitHub
parent 1a094ba6a9
commit 7857e5946f
9 changed files with 93 additions and 18 deletions

View File

@@ -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",

View File

@@ -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",

View File

@@ -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",

View File

@@ -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"

View File

@@ -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"

View File

@@ -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 {

View File

@@ -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 = <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
*/

View File

@@ -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;
}

View File

@@ -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"