ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-02-03 01:25:38 -05:00
Code Issues Packages Projects Releases Wiki Activity

New azdata graph layout (#20451)

Browse Source 
* 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
Download Patch File Download Diff File Expand all files Collapse all files

16
src/sql/workbench/contrib/executionPlan/browser/azdataGraphView.ts
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
*/

63
src/sql/workbench/contrib/executionPlan/browser/media/executionPlan.css
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;
}