microsoft
/
azdataGraph
зеркало из https://github.com/microsoft/azdataGraph.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

Exposes hook for clearing expensive operator highlighting (#131) 

* Exposes hook for clearing expensive operator highlighting

* Adds button to test file to clear expensive operator highlighting

* Fixes cell highlighting bug after unfolding an expensive cell

* Fixes bug with collapse hotkeys not rendering expensive highlighting
This commit is contained in:
Lewis Sanchez 2022-08-31 15:05:32 -07:00 коммит произвёл GitHub
Родитель 0d6a5b3bff
Коммит 8faa6e50e9
Не найден ключ, соответствующий данной подписи
Идентификатор ключа GPG: 4AEE18F83AFDEB23
2 изменённых файлов: 39 добавлений и 7 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

34
src/js/azdata/azdataQueryPlan.js
Просмотреть файл

@ -369,6 +369,7 @@ azdataQueryPlan.prototype.init = function (queryPlanConfiguration) {
}
});
let self = this;
graph.convertValueToString = function (cell) {
if (cell.value != null && cell.value.label != null) {
const cellDivs = new Object();
@ -454,7 +455,9 @@ azdataQueryPlan.prototype.init = function (queryPlanConfiguration) {
// undefined is for the middle parameter since the overwritten definition of foldCells doesn't reference it.
this.foldCells(collapse, undefined, [currentCell]);
currentCell.cellDivs.body.focus();
if (!collapse) {
self.redrawExpensiveOperatorHighlighting();
}
});
}
@ -483,6 +486,11 @@ azdataQueryPlan.prototype.init = function (queryPlanConfiguration) {
// undefined is for the middle parameter since the overwritten definition of foldCells doesn't reference it.
this.foldCells(collapse, undefined, [currentCell]);
cell.cellDivs.body.focus();
if (!collapse) {
self.redrawExpensiveOperatorHighlighting();
}
evt.stopPropagation();
evt.preventDefault();
}
@ -557,7 +565,6 @@ azdataQueryPlan.prototype.init = function (queryPlanConfiguration) {
return false;
};
let self = this;
// Defines the position for the folding icon
graph.cellRenderer.getControlBounds = function (state) {
if (state.control != null) {
@ -1237,8 +1244,23 @@ azdataQueryPlan.prototype.isChildCellVisible = function (vertex) {
return childCell.isVisible();
};
azdataQueryPlan.prototype.clearExpensiveOperatorHighlighting = function () {
if (this.expensiveCellHighlighter) {
this.expensiveCellHighlighter.destroy();
}
this.expensiveCell = undefined;
this.expensiveCellHighlighter = undefined;
};
azdataQueryPlan.prototype.redrawExpensiveOperatorHighlighting = function () {
if (this.expensiveCell && this.expensiveCellHighlighter) {
this.expensiveCellHighlighter.highlight(this.graph.view.getState(this.expensiveCell));
}
};
azdataQueryPlan.prototype.highlightExpensiveOperator = function (costPredicate) {
const HIGHLIGHTER_COLOR = '#ff0000';
const HIGHLIGHTER_COLOR = '#FFA500'; // Orange
const STROKE_WIDTH = 1;
const expensiveNode = this.findExpensiveOperator(costPredicate);
@ -1246,9 +1268,9 @@ azdataQueryPlan.prototype.highlightExpensiveOperator = function (costPredicate)
return;
}
const expensiveCell = this.graph.model.getCell(expensiveNode.id);
const cellHighlighter = new mxCellHighlight(this.graph, HIGHLIGHTER_COLOR, STROKE_WIDTH);
cellHighlighter.highlight(this.graph.view.getState(expensiveCell));
this.expensiveCell = this.graph.model.getCell(expensiveNode.id);
this.expensiveCellHighlighter = new mxCellHighlight(this.graph, HIGHLIGHTER_COLOR, STROKE_WIDTH);
this.expensiveCellHighlighter.highlight(this.graph.view.getState(this.expensiveCell));
};
azdataQueryPlan.prototype.findExpensiveOperator = function (getCostValue) {

12
test/queryplan/queryPlanWithCostInformation.html → test/queryplan/queryPlanExpensiveOperatorHighlighting.html
Просмотреть файл

@ -2,7 +2,7 @@
Test page for manually testing query plan polygons.
This test page covers highlighting the most expensive operator found in a
query execution plan.
query execution plan and then clearing it when the clear button is clicked.
-->
<html>
@ -38,6 +38,12 @@
azdataGraph.highlightExpensiveOperator((node) => {
return node.elapsedTimeInMs;
});
// Tests clearing expensive operator highlighting
const clearButton = document.getElementById('clear-btn');
clearButton.addEventListener('click', () => {
azdataGraph.clearExpensiveOperatorHighlighting();
});
};
</script>
@ -57,6 +63,10 @@
<body onload="main(document.getElementById('graphContainer'))">
<div id="graphContainer"></div>
<div id="buttonContainer" style="padding-top: 15px; padding-left: 100px">
<button type="button" id="clear-btn">Clear Operator Highlighting</button>
</div>
</body>
</html>