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

Adding ability to expand and columns slickgrid table rows (#19168)

Browse Source 
* Adding ability to expand and columns tables

* Bolding icons
Fixing variable names

* Adding helper function
Making css more target

* Adding keyboard navigation and parsing treegrid data

* Adding attributes, data transformations and key events to the treegrid

* Expanded

* changing var name

* FIxing formatter name

* Adding back cell styling

* Removing comments

* Making a new TreeGrid component.
Separating treegrid logic from tableDataView

* Fixing comments

* changing method name

* Modifying only visible row dom attributes

* Removing white space, moving role attribute setter to constructor.

* Fixing some more PR comments

* Adding comments and renaming functions

* Fixing comments

* Fixing comments

* Fixing comments

* Fixing some logic and removing unused attributes from element

* Adding expandable formatter to the first column

* Making the formatter generic

* Reverting formatter code

* Adding doc comments

* Fixing comments

* Removing duplicated code

* Adding comments

* Setting columns only when the table is initialized

* Letting users set expanded state instead of forcing it to false
This commit is contained in:
Aasim Khan
2022-05-09 15:53:22 -07:00
committed by GitHub
parent adf6f253f0
commit 7e57503aa6
7 changed files with 233 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/sql/workbench/contrib/executionPlan/browser/executionPlanPropertiesView.ts
View File

@@ -131,7 +131,7 @@ export class ExecutionPlanPropertiesView extends ExecutionPlanPropertiesViewBase
props.forEach((p, i) => {
let row = {};
rows.push(row);
row['name'] = ' '.repeat(indent) + p.name;
row['name'] = p.name;
row['parent'] = parentIndex;
if (!isString(p.value)) {
// Styling values in the parent row differently to make them more apparent and standout compared to the rest of the cells.
@@ -143,10 +143,11 @@ export class ExecutionPlanPropertiesView extends ExecutionPlanPropertiesViewBase
text: removeLineBreaks(p.displayValue, ' '),
style: parentRowCellStyling
};
row['tootltip'] = p.displayValue;
this.convertModelToTableRows(p.value, rows.length - 1, indent + 2, rows);
} else {
row['value'] = removeLineBreaks(p.value, ' ');
row['tooltip'] = p.value;
row['value'] = removeLineBreaks(p.displayValue, ' ');
row['tooltip'] = p.displayValue;
}
});
return rows;

20
src/sql/workbench/contrib/executionPlan/browser/executionPlanPropertiesViewBase.ts
View File

@@ -4,8 +4,6 @@
*--------------------------------------------------------------------------------------------*/
import * as DOM from 'vs/base/browser/dom';
import { Table } from 'sql/base/browser/ui/table/table';
import { TableDataView } from 'sql/base/browser/ui/table/tableDataView';
import { ActionBar } from 'sql/base/browser/ui/taskbar/actionbar';
import { IColorTheme, ICssStyleCollector, IThemeService, registerThemingParticipant } from 'vs/platform/theme/common/themeService';
import { localize } from 'vs/nls';
@@ -16,6 +14,7 @@ import { sortAlphabeticallyIconClassNames, sortByDisplayOrderIconClassNames, sor
import { attachTableStyler } from 'sql/platform/theme/common/styler';
import { RESULTS_GRID_DEFAULTS } from 'sql/workbench/common/constants';
import { contrastBorder, listHoverBackground } from 'vs/platform/theme/common/colorRegistry';
import { TreeGrid } from 'sql/base/browser/ui/table/treeGrid';
export abstract class ExecutionPlanPropertiesViewBase {
// Title bar with close button action
@@ -32,9 +31,7 @@ export abstract class ExecutionPlanPropertiesViewBase {
private _headerActions: ActionBar;
// Properties table
private _tableComponent: Table<Slick.SlickData>;
private _tableComponentDataView: TableDataView<Slick.SlickData>;
private _tableComponentDataModel: { [key: string]: string }[];
private _tableComponent: TreeGrid<Slick.SlickData>;
private _tableContainer!: HTMLElement;
private _tableWidth;
@@ -83,10 +80,8 @@ export abstract class ExecutionPlanPropertiesViewBase {
const table = DOM.$('.table');
this._tableContainer.appendChild(table);
this._tableComponentDataView = new TableDataView();
this._tableComponentDataModel = [];
this._tableComponent = new Table(table, {
dataProvider: this._tableComponentDataView, columns: []
this._tableComponent = new TreeGrid(table, {
columns: []
}, {
rowHeight: RESULTS_GRID_DEFAULTS.rowHeight,
forceFitColumns: true,
@@ -140,12 +135,7 @@ export abstract class ExecutionPlanPropertiesViewBase {
public populateTable(columns: Slick.Column<Slick.SlickData>[], data: { [key: string]: string }[]) {
this._tableComponent.columns = columns;
this._tableContainer.scrollTo(0, 0);
this._tableComponentDataView.clear();
this._tableComponentDataModel = data;
this._tableComponentDataView.push(this._tableComponentDataModel);
this._tableComponent.setData(this._tableComponentDataView);
this._tableComponent.autosizeColumns();
this._tableComponent.updateRowCount();
this._tableComponent.setData(data);
this.resizeTable();
}