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

Fixing the height of the query plan (#18409)

Browse Source 
* Fixing the height of the query plan

* Fixing layout issues
This commit is contained in:
Aasim Khan
2022-02-16 15:44:33 -08:00
committed by GitHub
parent 81e8eb9a82
commit 678f2e3878
3 changed files with 24 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/sql/workbench/contrib/queryplan2/browser/media/queryPlan2.css
View File

@@ -3,12 +3,23 @@
* Licensed under the Source EULA. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
/* Styling for the queryplan tab container */
.qps-container {
width: 100%;
height: 100%;
overflow: scroll;
flex-direction: column;
display: flex;
flex-wrap: nowrap;
}
/* Styling for the a queryplan container in the tab */
.qps-container .query-plan {
width: 100%;
height: 500px;
min-height: 500px;
display: flex;
overflow: hidden;
flex: 1;
}
/* horizontal height resizing sash container that is below a queryplan */

10
src/sql/workbench/contrib/queryplan2/browser/queryPlan.ts
View File

@@ -88,7 +88,6 @@ export class QueryPlan2View implements IPanelView {
public render(container: HTMLElement): void {
container.appendChild(this._container);
this._container.style.overflow = 'scroll';
}
dispose() {
@@ -98,8 +97,6 @@ export class QueryPlan2View implements IPanelView {
}
public layout(dimension: DOM.Dimension): void {
this._container.style.width = dimension.width + 'px';
this._container.style.height = dimension.height + 'px';
}
public clear() {
@@ -194,7 +191,12 @@ export class QueryPlan2 implements ISashLayoutProvider {
if (newHeight < 200) {
return;
}
this._container.style.height = `${newHeight}px`;
/**
* Since the parent container is flex, we will have
* to change the flex-basis property to change the height.
*/
this._container.style.minHeight = '200px';
this._container.style.flex = `0 0 ${newHeight}px`;
});
/**

7
src/sql/workbench/contrib/queryplan2/browser/queryPlanPropertiesView.ts
View File

@@ -45,7 +45,7 @@ export class QueryPlanPropertiesView {
// Table dimensions.
private _tableWidth = 485;
private _tableHeight = 420;
private _tableHeight;
public constructor(
private _parentContainer: HTMLElement,
@@ -119,6 +119,10 @@ export class QueryPlanPropertiesView {
defaultColumnWidth: 120
});
new ResizeObserver((e) => {
this.tableHeight = (this._parentContainer.getBoundingClientRect().height - 80);
}).observe(this._parentContainer);
attachTableStyler(this._table, this._themeService);
}
@@ -192,6 +196,7 @@ export class QueryPlanPropertiesView {
this._table.setData(this._dataView);
this._table.autosizeColumns();
this._table.updateRowCount();
this.tableHeight = (this._parentContainer.getBoundingClientRect().height - 80); //80px is the space taken by the title and toolbar
this._table.layout(new DOM.Dimension(this._tableWidth, this._tableHeight));
this._table.resizeCanvas();
}