Updates to the Data Explorer... (#2360)

* Adding Positron Data Explorer data type icons

* Updates for table summary UI and other UI improvements

* Update data explorer border, further rope off selection when it's disabled

* Splitter fit and finish work, start of expandable columns in table summary

* Basic expand/collapse of table summary rows

* Work on expand/collapse of table summary rows

* UI updates

* Update splitter layout

* Work on summary cell

* Work.

* Remove debug output

* Work on data explorer cache

* Update z-index of horizontal splitter

* Fix comment

build/lib/stylelint/vscode-known-variables.json

@@ -523,6 +523,7 @@
 		"--vscode-positronDataExplorer-border",
 		"--vscode-positronDataExplorer-contrastBackground",
 		"--vscode-positronDataExplorer-foreground",
+		"--vscode-positronDataExplorer-selectionBackground",
 		"--vscode-positronDataGrid-background",
 		"--vscode-positronDataGrid-border",
 		"--vscode-positronDataGrid-contrastBackground",

src/vs/base/browser/ui/positronComponents/horizontalSplitter.css

@@ -18,7 +18,7 @@
 .sizer {
 	top: -2px;
 	height: 5px;
-	z-index: 25;
+	z-index: 26;
 	width: 100%;
 	position: relative;
 }

src/vs/base/browser/ui/positronComponents/verticalSplitter.css

@@ -18,7 +18,7 @@
 .sizer {
 	left: -2px;
 	width: 4px;
-	z-index: 25;
+	z-index: 26;
 	height: 100%;
 	position: relative;
 }

src/vs/base/browser/ui/positronDataExplorer/components/dataExplorerPanel/components/tableDataPanel.tsx

@@ -38,7 +38,6 @@ export const TableDataPanel = (props: TableDataPanelProps) => {
 					instance={context.instance.tableDataDataGridInstance}
 					width={props.width}
 					height={props.height}
-					borderTop={true}
 				/>
 			</div>
 		</div>

src/vs/base/browser/ui/positronDataExplorer/components/dataExplorerPanel/components/tableSummaryPanel.tsx

@@ -39,7 +39,6 @@ export const TableSummaryPanel = (props: TableSummaryPanelProps) => {
 					instance={context.instance.tableSchemaDataGridInstance}
 					width={props.width}
 					height={props.height}
-					borderTop={true}
 				/>
 			</div>
 		</div>

src/vs/base/browser/ui/positronDataExplorer/components/dataExplorerPanel/dataExplorerPanel.css

@@ -9,9 +9,9 @@
 
 .data-explorer-container
 .data-explorer-actions {
-	/* Place the data-explorer in the data-explorer-container. */
 	padding: 8px;
 	grid-row: data-explorer-actions / data-explorer;
+	border-bottom: 1px solid var(--vscode-positronDataExplorer-border);
 }
 
 .data-explorer-container
@@ -54,10 +54,6 @@
 .data-explorer-container
 .data-explorer
 .column-2 {
-	/* Bordered. */
-	/* border-radius: 4px; */
-	/* border: 1px solid var(--vscode-positronDataExplorer-border); */
-
 	/* Prevent 1fr from exceeding the parent height. */
 	min-height: 0;
 

src/vs/base/browser/ui/positronDataExplorer/components/dataExplorerPanel/dataExplorerPanel.tsx

@@ -23,7 +23,7 @@ import { PositronDataExplorerLayout } from 'vs/workbench/services/positronDataEx
 /**
  * Constants.
  */
-const MIN_COLUMN_WIDTH = 200;
+const MIN_COLUMN_WIDTH = 275;
 const ACTIONS_HEIGHT = 64;
 const SUMMARY_HEIGHT = 24;
 

src/vs/base/browser/ui/positronDataGrid/classes/dataGridInstance.ts

@@ -85,8 +85,26 @@ type ScrollbarOptions = | {
 /**
  * DisplayOptions type.
  */
-type DisplayOptions = {
-	cellBorder: boolean;
+type DisplayOptions = | {
+	cellBorders?: boolean;
+};
+
+/**
+ * CursorOptions type.
+ */
+type CursorOptions = | {
+	cursor: false;
+	cursorOffset?: never;
+} | {
+	cursor: true;
+	cursorOffset: number;
+};
+
+/**
+ * SelectionOptions type.
+ */
+type SelectionOptions = | {
+	selection?: boolean;
 };
 
 /**
@@ -99,7 +117,9 @@ type DataGridOptions =
 	ColumnResizeOptions &
 	RowResizeOptions &
 	ScrollbarOptions &
-	DisplayOptions;
+	DisplayOptions &
+	CursorOptions &
+	SelectionOptions;
 
 /**
  * ExtendColumnSelectionBy enumeration.
@@ -346,19 +366,24 @@ export abstract class DataGridInstance extends Disposable {
 	private readonly _scrollbarWidth: number;
 
 	/**
-	 * Gets the column widths.
+	 * Gets a value which indicates whether to show cell borders.
 	 */
-	private readonly _columnWidths = new Map<number, number>();
+	private readonly _cellBorders: boolean;
 
 	/**
-	 * Gets the row heights.
+	 * Gets a value which indicates whether to show the cursor.
 	 */
-	private readonly _rowHeights = new Map<number, number>();
+	private readonly _cursor: boolean;
 
 	/**
-	 * Gets the column sort keys.
+	 * Gets the cursor offset.
 	 */
-	private readonly _columnSortKeys = new Map<number, ColumnSortKey>();
+	private readonly _cursorOffset: number;
+
+	/**
+	 * Gets a value which indicates whether selection is enabled.
+	 */
+	private readonly _selection: boolean;
 
 	/**
 	 * Gets or sets the width.
@@ -373,12 +398,12 @@ export abstract class DataGridInstance extends Disposable {
 	/**
 	 * Gets or sets the first column index.
 	 */
-	protected _firstColumnIndex = 0;
+	private _firstColumnIndex = 0;
 
 	/**
 	 * Gets or sets the first row index.
 	 */
-	protected _firstRowIndex = 0;
+	private _firstRowIndex = 0;
 
 	/**
 	 * Gets or sets the cursor column index.
@@ -415,12 +440,31 @@ export abstract class DataGridInstance extends Disposable {
 	 */
 	private readonly _rowSelectionIndexes = new Set<number>();
 
+	/**
+	 * Gets the column widths.
+	 */
+	private readonly _columnWidths = new Map<number, number>();
+
+	/**
+	 * Gets the row heights.
+	 */
+	private readonly _rowHeights = new Map<number, number>();
+
+	/**
+	 * Gets the column sort keys.
+	 */
+	private readonly _columnSortKeys = new Map<number, ColumnSortKey>();
+
+	//#endregion Private Properties
+
+	//#region Protected Events
+
 	/**
 	 * The onDidUpdate event emitter.
 	 */
 	protected readonly _onDidUpdateEmitter = this._register(new Emitter<void>);
 
-	//#endregion Private Properties
+	//#endregion Protected Events
 
 	//#region Constructor & Dispose
 
@@ -444,14 +488,21 @@ export abstract class DataGridInstance extends Disposable {
 		this._defaultRowHeight = options.defaultRowHeight;
 
 		this._columnResize = options.columnResize || false;
-		this._minimumColumnWidth = options.minimumColumnWidth ?? 0;
+		this._minimumColumnWidth = options.minimumColumnWidth ?? options.defaultColumnWidth;
 
 		this._rowResize = options.rowResize || false;
-		this._minimumRowHeight = options.minimumRowHeight ?? 0;
+		this._minimumRowHeight = options.minimumRowHeight ?? options.defaultRowHeight;
 
 		this._horizontalScrollbar = options.horizontalScrollbar || false;
 		this._verticalScrollbar = options.verticalScrollbar || false;
 		this._scrollbarWidth = options.scrollbarWidth ?? 0;
+
+		this._cellBorders = options.cellBorders ?? true;
+
+		this._cursor = options.cursor ?? true;
+		this._cursorOffset = this._cursor ? options.cursorOffset ?? 0 : 0;
+
+		this._selection = options.selection ?? true;
 	}
 
 	//#endregion Constructor & Dispose
@@ -556,6 +607,34 @@ export abstract class DataGridInstance extends Disposable {
 		return this._scrollbarWidth;
 	}
 
+	/**
+	 * Gets a value which indicates whether to show cell borders.
+	 */
+	get cellBorder() {
+		return this._cellBorders;
+	}
+
+	/**
+	 * Gets a value which indicates whether to show the cursor.
+	 */
+	get cursor() {
+		return this._cursor;
+	}
+
+	/**
+	 * Gets the cursor offset.
+	 */
+	get cursorOffset() {
+		return this._cursorOffset;
+	}
+
+	/**
+	 * Gets a value which indicates whether selection is enabled.
+	 */
+	get selection() {
+		return this._selection;
+	}
+
 	/**
 	 * Gets the number of columns.
 	 */
@@ -594,6 +673,13 @@ export abstract class DataGridInstance extends Disposable {
 		return layoutHeight;
 	}
 
+	/**
+	 * Gets the screen columns.
+	 */
+	get screenColumns() {
+		return Math.trunc(this._width / this._minimumColumnWidth) + 1;
+	}
+
 	/**
 	 * Gets the visible columns.
 	 */
@@ -623,6 +709,13 @@ export abstract class DataGridInstance extends Disposable {
 		return Math.max(visibleColumns, 1);
 	}
 
+	/**
+	 * Gets the screen rows.
+	 */
+	get screenRows() {
+		return Math.trunc(this._height / this._minimumRowHeight) + 1;
+	}
+
 	/**
 	 * Gets the visible rows.
 	 */
@@ -736,6 +829,15 @@ export abstract class DataGridInstance extends Disposable {
 
 	//#endregion Public Properties
 
+	//#region Public Events
+
+	/**
+	 * onDidUpdate event.
+	 */
+	readonly onDidUpdate = this._onDidUpdateEmitter.event;
+
+	//#endregion Public Events
+
 	//#region Public Methods
 
 	/**
@@ -1824,20 +1926,16 @@ export abstract class DataGridInstance extends Disposable {
 		return this._columnSortKeys.get(columnIndex);
 	}
 
-	/**
-	 * TODO.
-	 */
-	abstract initialize(): void;
-
 	/**
 	 * Sorts the data.
 	 * @param columnSorts The array of column sorts.
 	 * @returns A Promise<void> that resolves when the data is sorted.
 	 */
-	abstract sortData(columnSorts: IColumnSortKey[]): Promise<void>;
+	async sortData(columnSorts: IColumnSortKey[]): Promise<void> {
+	}
 
 	/**
-	 *
+	 * Fetches data.
 	 */
 	abstract fetchData(): void;
 
@@ -1853,7 +1951,9 @@ export abstract class DataGridInstance extends Disposable {
 	 * @param rowIndex The row index.
 	 * @returns The row header, or, undefined.
 	 */
-	abstract rowHeader(rowIndex: number): JSX.Element | undefined;
+	rowHeader(rowIndex: number): JSX.Element | undefined {
+		return undefined;
+	}
 
 	/**
 	 * Gets a data cell.
@@ -1863,12 +1963,29 @@ export abstract class DataGridInstance extends Disposable {
 	 */
 	abstract cell(columnIndex: number, rowIndex: number): JSX.Element | undefined;
 
+	//#endregion Public Methods
+
+	//#region Protected Methods
+
 	/**
-	 * onDidUpdate event.
+	 * Performs a soft reset of the data grid.
 	 */
-	readonly onDidUpdate = this._onDidUpdateEmitter.event;
+	protected softReset() {
+		this._firstColumnIndex = 0;
+		this._firstRowIndex = 0;
+		this._cursorColumnIndex = 0;
+		this._cursorRowIndex = 0;
+		this._cellSelectionRange = undefined;
+		this._columnSelectionRange = undefined;
+		this._columnSelectionIndexes.clear();
+		this._rowSelectionRange = undefined;
+		this._rowSelectionIndexes.clear();
+		this._columnWidths.clear();
+		this._rowHeights.clear();
+		this._columnSortKeys.clear();
+	}
 
-	//#endregion Public Methods
+	//#endregion Protected Methods
 
 	//#region Private Methods
 

src/vs/base/browser/ui/positronDataGrid/components/dataGridColumnHeader.css

@@ -6,7 +6,7 @@
 	top: 0;
 	bottom: 0;
 	display: grid;
-	overflow: hidden;
+	/* overflow: hidden; */
 	position: absolute;
 	background-color: var(--vscode-positronDataGrid-contrastBackground);
 	grid-template-columns: [content] 1fr [right-gutter] 1px [end];

src/vs/base/browser/ui/positronDataGrid/components/dataGridCornerTopLeft.css

@@ -9,8 +9,8 @@
 	grid-row: headers / waffle;
 	grid-column: headers / waffle;
 	grid-template-columns: [start] 1fr [splitter] 1px [end];
-	border-bottom: 1px solid var(--vscode-positronDataGrid-border);
 	border-right: 1px solid var(--vscode-positronDataGrid-border);
+	border-bottom: 1px solid var(--vscode-positronDataGrid-border);
 	background-color: var(--vscode-positronDataGrid-contrastBackground);
 }