mirror of
https://github.com/ckaczor/azuredatastudio.git
synced 2026-01-13 17:22:15 -05:00
New azdata graph layout (#20451)
* Updated contracts * Adding latest azdataGraph update * Updating graph lib
This commit is contained in:
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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"
|
||||
|
||||
8
src/sql/azdata.proposed.d.ts
vendored
8
src/sql/azdata.proposed.d.ts
vendored
@@ -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 {
|
||||
|
||||
@@ -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
|
||||
*/
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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"
|
||||
|
||||
Reference in New Issue
Block a user