Updates to add column and row pinning as well as entry-mapped layout

src/vs/base/common/codiconsLibrary.ts

@@ -708,4 +708,6 @@ export const codiconsLibrary = {
 	positronOpenInEditor: register('positron-open-in-editor', 0xf290),
 	positronOpenFolder: register('positron-open-folder', 0xf291),
 	positronFormatDocument: register('positron-format-document', 0xf292),
+	positronPin: register('positron-pin', 0xf293),
+	positronUnpin: register('positron-unpin', 0xf294),
 } as const;

src/vs/platform/positronActionBar/browser/positronActionBar.tsx

@@ -8,12 +8,11 @@ import './positronActionBarVariables.css';
 import './positronActionBar.css';
 
 // React.
-import React, { KeyboardEvent, PropsWithChildren, useEffect, useLayoutEffect, useRef } from 'react';
+import React, { KeyboardEvent, PropsWithChildren, useEffect, useRef } from 'react';
 
 // Other dependencies.
 import * as DOM from '../../../base/browser/dom.js';
 import { usePositronActionBarContext } from './positronActionBarContext.js';
-import { DisposableStore, toDisposable } from '../../../base/common/lifecycle.js';
 import { optionalValue, positronClassNames } from '../../../base/common/positronUtilities.js';
 
 /**
@@ -111,25 +110,6 @@ export const PositronActionBar = (props: PropsWithChildren<PositronActionBarProp
 		}
 	};
 
-	// Automatic layout useEffect.
-	useLayoutEffect(() => {
-		// Create the disposable store for cleanup.
-		const disposableStore = new DisposableStore();
-
-		// Allocate and initialize the resize observer.
-		const resizeObserver = new ResizeObserver(entries => {
-		});
-
-		// Start observing the size of the action bar.
-		resizeObserver.observe(ref.current);
-
-		// Add the resize observer to the disposable store.
-		disposableStore.add(toDisposable(() => resizeObserver.disconnect()));
-
-		// Return the cleanup function that will dispose of the disposables.
-		return () => disposableStore.dispose();
-	}, [context]);
-
 	useEffect(() => {
 		if (!props.nestedActionBar && prevIndex >= 0 && (focusedIndex !== prevIndex)) {
 			const items = Array.from(context.focusableComponents);

src/vs/workbench/browser/positronDataExplorer/components/dataExplorerPanel/components/addEditRowFilterModalPopup/components/columnSelectorDataGridInstance.tsx

@@ -93,6 +93,8 @@ export class ColumnSelectorDataGridInstance extends DataGridInstance {
 			defaultRowHeight: ROW_HEIGHT,
 			columnResize: false,
 			rowResize: false,
+			columnPinning: false,
+			rowPinning: false,
 			horizontalScrollbar: false,
 			verticalScrollbar: true,
 			scrollbarThickness: 8,
@@ -114,8 +116,11 @@ export class ColumnSelectorDataGridInstance extends DataGridInstance {
 			this._columnSchemaCache = new ColumnSchemaCache(this._dataExplorerClientInstance)
 		);
 
-		// Set the initial layout entries in the row layout manager.
-		this._rowLayoutManager.setLayoutEntries(backendState.table_shape.num_columns);
+		// Set the column layout entries. There is always one column.
+		this._columnLayoutManager.setEntries(1);
+
+		// Set the row layout entries.
+		this._rowLayoutManager.setEntries(backendState.table_shape.num_columns);
 
 		/**
 		 * Updates the data grid instance.
@@ -131,7 +136,7 @@ export class ColumnSelectorDataGridInstance extends DataGridInstance {
 			this._backendState = backendState;
 
 			// Set the layout entries in the row layout manager.
-			this._rowLayoutManager.setLayoutEntries(backendState.table_shape.num_columns);
+			this._rowLayoutManager.setEntries(backendState.table_shape.num_columns);
 
 			// Scroll to the top.
 			await this.setScrollOffsets(0, 0);
@@ -150,17 +155,15 @@ export class ColumnSelectorDataGridInstance extends DataGridInstance {
 		));
 
 		// Add the onDidUpdateBackendState event handler.
-		this._register(
-			this._dataExplorerClientInstance.onDidUpdateBackendState(async backendState =>
-				// Update the data grid instance.
-				updateDataGridInstance(backendState)
-			)
-		);
+		this._register(this._dataExplorerClientInstance.onDidUpdateBackendState(async backendState =>
+			// Update the data grid instance.
+			updateDataGridInstance(backendState)
+		));
 
 		// Add the onDidUpdateCache event handler.
 		this._register(this._columnSchemaCache.onDidUpdateCache(() =>
 			// Fire the onDidUpdate event.
-			this._onDidUpdateEmitter.fire()
+			this.fireOnDidUpdateEvent()
 		));
 	}
 
@@ -195,7 +198,8 @@ export class ColumnSelectorDataGridInstance extends DataGridInstance {
 	override get firstColumn() {
 		return {
 			columnIndex: 0,
-			left: 0
+			left: 0,
+			width: 0,
 		};
 	}
 
@@ -219,11 +223,12 @@ export class ColumnSelectorDataGridInstance extends DataGridInstance {
 	}
 
 	/**
-	 * Gets the width of a column.
+	 * Gets the custom width of a column.
 	 * @param columnIndex The column index.
+	 * @returns The custom width of the column; otherwise, undefined.
 	 */
-	override getColumnWidth(columnIndex: number): number {
-		return this.layoutWidth - 8;
+	override getCustomColumnWidth(columnIndex: number): number | undefined {
+		return columnIndex === 0 ? this.layoutWidth - 8 : undefined;
 	}
 
 	selectItem(rowIndex: number): void {

src/vs/workbench/browser/positronDataExplorer/components/dataExplorerPanel/components/addEditRowFilterModalPopup/components/columnSelectorModalPopup.css

@@ -1,5 +1,5 @@
 /*---------------------------------------------------------------------------------------------
- *  Copyright (C) 2024 Posit Software, PBC. All rights reserved.
+ *  Copyright (C) 2024-2025 Posit Software, PBC. All rights reserved.
  *  Licensed under the Elastic License 2.0. See LICENSE.txt for license information.
  *--------------------------------------------------------------------------------------------*/
 

src/vs/workbench/browser/positronDataExplorer/components/dataExplorerPanel/components/addEditRowFilterModalPopup/components/columnSelectorModalPopup.tsx

@@ -65,7 +65,7 @@ export const ColumnSelectorModalPopup = (props: ColumnSelectorModalPopupProps) =
 
 		// Return the cleanup function that will dispose of the disposables.
 		return () => disposableStore.dispose();
-	}, [props, props.columnSelectorDataGridInstance]);
+	}, [props]);
 
 	const onKeyDown = (evt: React.KeyboardEvent) => {
 		if (evt.code === 'Enter' || evt.code === 'Space') {

src/vs/workbench/browser/positronDataExplorer/components/dataExplorerPanel/components/dataExplorer.tsx

@@ -237,7 +237,7 @@ export const DataExplorer = () => {
 		return () => disposableStore.dispose();
 	}, [columnsCollapsed, services.accessibilityService, context.instance]);
 
-	// Automatic layout useEffect.
+	// Automatic layout useLayoutEffect.
 	useLayoutEffect(() => {
 		// Set the initial width.
 		const initialWidth = dataExplorerRef.current.offsetWidth;