ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-02-16 10:58:30 -05:00
Code Issues Packages Projects Releases Wiki Activity

Fixing the height of the query plan (#18409) (#18433)

Browse Source 
* Fixing the height of the query plan

* Fixing layout issues
This commit is contained in:
Aasim Khan
2022-02-17 09:23:25 -08:00
committed by GitHub
parent 5e7356d652
commit c2d294cb79
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. * 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 */ /* Styling for the a queryplan container in the tab */
.qps-container .query-plan { .qps-container .query-plan {
width: 100%; width: 100%;
height: 500px; min-height: 500px;
display: flex; display: flex;
overflow: hidden; overflow: hidden;
flex: 1;
} }
/* horizontal height resizing sash container that is below a queryplan */ /* 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 { public render(container: HTMLElement): void {
container.appendChild(this._container); container.appendChild(this._container);
this._container.style.overflow = 'scroll';
} }
dispose() { dispose() {
@@ -98,8 +97,6 @@ export class QueryPlan2View implements IPanelView {
} }
public layout(dimension: DOM.Dimension): void { public layout(dimension: DOM.Dimension): void {
this._container.style.width = dimension.width + 'px';
this._container.style.height = dimension.height + 'px';
} }
public clear() { public clear() {
@@ -194,7 +191,12 @@ export class QueryPlan2 implements ISashLayoutProvider {
if (newHeight < 200) { if (newHeight < 200) {
return; 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. // Table dimensions.
private _tableWidth = 485; private _tableWidth = 485;
private _tableHeight = 420; private _tableHeight;
public constructor( public constructor(
private _parentContainer: HTMLElement, private _parentContainer: HTMLElement,
@@ -119,6 +119,10 @@ export class QueryPlanPropertiesView {
defaultColumnWidth: 120 defaultColumnWidth: 120
}); });
new ResizeObserver((e) => {
this.tableHeight = (this._parentContainer.getBoundingClientRect().height - 80);
}).observe(this._parentContainer);
attachTableStyler(this._table, this._themeService); attachTableStyler(this._table, this._themeService);
} }
@@ -192,6 +196,7 @@ export class QueryPlanPropertiesView {
this._table.setData(this._dataView); this._table.setData(this._dataView);
this._table.autosizeColumns(); this._table.autosizeColumns();
this._table.updateRowCount(); 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.layout(new DOM.Dimension(this._tableWidth, this._tableHeight));
this._table.resizeCanvas(); this._table.resizeCanvas();
} }