Add UI scaffolding for sort dropdown

Author: dhruvisompura

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

@@ -13,6 +13,7 @@ import { PositronActionBar } from '../../../../../../../platform/positronActionB
 import { PositronActionBarContextProvider } from '../../../../../../../platform/positronActionBar/browser/positronActionBarContext.js';
 import { ActionBarRegion } from '../../../../../../../platform/positronActionBar/browser/components/actionBarRegion.js';
 import { ActionBarFilter, ActionBarFilterHandle } from '../../../../../../../platform/positronActionBar/browser/components/actionBarFilter.js';
+import { SummaryRowSortOption } from '../../../../../../services/positronDataExplorer/common/tableSummaryCache.js';
 
 // This is the debounce time for the search input in milliseconds.
 // It allows the user to type without triggering a search on every keystroke.
@@ -28,6 +29,8 @@ export const SummaryRowActionBar = ({ instance }: SummaryRowActionBarProps) => {
 	const [searchText, setSearchText] = useState('');
 	// State to hold the debounced search text that we use to filter data.
 	const [debouncedSearchText, setDebouncedSearchText] = useState('');
+	// State to hold the current sort option
+	const [sortOption, setSortOption] = useState<SummaryRowSortOption>(SummaryRowSortOption.Original);
 
 	/**
 	 * Update the debounced search text after a delay.
@@ -52,21 +55,33 @@ export const SummaryRowActionBar = ({ instance }: SummaryRowActionBarProps) => {
 		search();
 	}, [debouncedSearchText, instance]);
 
+	/**
+	 * Update the sort option when the user selects a new sort option from the dropdown.
+	 * @param newSortOption The new sort option selected by the user.
+	 */
+	const handleSortChanged = (newSortOption: SummaryRowSortOption) => {
+		setSortOption(newSortOption);
+		// TODO: Implement sorting logic in the TableSummaryDataGridInstance
+		// instance.setSortOption(newSortOption);
+	};
+
 
 	return (
 		<PositronActionBarContextProvider>
-			<PositronActionBar>
+			<PositronActionBar paddingLeft={8} paddingRight={14}>
 				<ActionBarRegion location='left'>
-					<SummaryRowSortDropdown />
+					<SummaryRowSortDropdown
+						currentSort={sortOption}
+						onSortChanged={handleSortChanged}
+					/>
 				</ActionBarRegion>
 				<ActionBarRegion location='right'>
 					<ActionBarFilter
 						ref={filterRef}
-						width={150}
+						width={140}
 						onFilterTextChanged={filterText => setSearchText(filterText)} />
 				</ActionBarRegion>
 			</PositronActionBar>
 		</PositronActionBarContextProvider>
-
 	);
 }

src/vs/workbench/browser/positronDataExplorer/components/dataExplorerPanel/components/summaryRowActionBar/summaryRowSortDropdown.css

@@ -2,7 +2,3 @@
  *  Copyright (C) 2025 Posit Software, PBC. All rights reserved.
  *  Licensed under the Elastic License 2.0. See LICENSE.txt for license information.
  *--------------------------------------------------------------------------------------------*/
-
-.summary-row-sort-dropdown-container {
-	margin-left: 8px
-}

src/vs/workbench/browser/positronDataExplorer/components/dataExplorerPanel/components/summaryRowActionBar/summaryRowSortDropdown.tsx

@@ -3,14 +3,88 @@
  *  Licensed under the Elastic License 2.0. See LICENSE.txt for license information.
  *--------------------------------------------------------------------------------------------*/
 
+import './summaryRowSortDropdown.css';
+
 import React from 'react';
 
-import './summaryRowSortDropdown.css';
+import { ActionBarMenuButton } from '../../../../../../../platform/positronActionBar/browser/components/actionBarMenuButton.js';
+import { localize } from '../../../../../../../nls.js';
+import { SummaryRowSortOption } from '../../../../../../services/positronDataExplorer/common/tableSummaryCache.js';
+
+/**
+ * Localized strings.
+ */
+const positronDataExplorerSummarySort = localize('positron.dataExplorer.sort', "Sort summary row data");
+const positronSortByOriginal = localize('positron.dataExplorer.sortByOriginal', "Sort by Original");
+const positronSortByNameAsc = localize('positron.dataExplorer.sortByNameAsc', "Sort by Name, Ascending");
+const positronSortByNameDesc = localize('positron.dataExplorer.sortByNameDesc', "Sort by Name, Descending");
+const positronSortByTypeAsc = localize('positron.dataExplorer.sortByTypeAsc', "Sort by Type, Ascending");
+const positronSortByTypeDesc = localize('positron.dataExplorer.sortByTypeDesc', "Sort by Type, Descending");
+
+const sortOptions = [
+	{
+		id: SummaryRowSortOption.Original,
+		label: positronSortByOriginal,
+		option: SummaryRowSortOption.Original
+	},
+	{
+		id: SummaryRowSortOption.NameAscending,
+		label: positronSortByNameAsc,
+		option: SummaryRowSortOption.NameAscending
+	},
+	{
+		id: SummaryRowSortOption.NameDescending,
+		label: positronSortByNameDesc,
+		option: SummaryRowSortOption.NameDescending
+	},
+	{
+		id: SummaryRowSortOption.TypeAscending,
+		label: positronSortByTypeAsc,
+		option: SummaryRowSortOption.TypeAscending
+	},
+	{
+		id: SummaryRowSortOption.TypeDescending,
+		label: positronSortByTypeDesc,
+		option: SummaryRowSortOption.TypeDescending
+	}
+];
+
+// create a map of sort id to sort label for the dropdown
+const sortLabelMap = new Map(
+	sortOptions.map(option => [option.id, option.label])
+);
+
+/**
+ * SummaryRowSortDropdownProps interface.
+ */
+export interface SummaryRowSortDropdownProps {
+	currentSort: SummaryRowSortOption; // TODO: replace with backend supported option or map to backend supported options
+	onSortChanged: (sortOption: SummaryRowSortOption) => void;
+}
+
+export const SummaryRowSortDropdown = ({ currentSort, onSortChanged }: SummaryRowSortDropdownProps) => {
+	// Get the label for the current sort option
+	const currentSortLabel = sortLabelMap.get(currentSort) || positronSortByOriginal;
+
+	// Builds the actions.
+	const actions = () => {
+		return sortOptions.map(sortOption => ({
+			class: undefined,
+			id: sortOption.id,
+			label: sortOption.label,
+			tooltip: sortOption.label,
+			enabled: true,
+			checked: currentSort === sortOption.option,
+			run: () => { onSortChanged(sortOption.option) }
+		}));
+	};
 
-export const SummaryRowSortDropdown = () => {
 	return (
-		<div className='summary-row-sort-dropdown-container'>
-			<span>Sort by original</span>
-		</div>
+		<ActionBarMenuButton
+			actions={actions}
+			ariaLabel={positronDataExplorerSummarySort}
+			label={currentSortLabel}
+			tooltip={positronDataExplorerSummarySort}
+		/>
 	);
 }

src/vs/workbench/services/positronDataExplorer/browser/tableSummaryDataGridInstance.tsx

@@ -9,7 +9,7 @@ import React, { JSX } from 'react';
 // Other dependencies.
 import { Emitter } from '../../../../base/common/event.js';
 import { DataGridInstance } from '../../../browser/positronDataGrid/classes/dataGridInstance.js';
-import { TableSummaryCache } from '../common/tableSummaryCache.js';
+import { SummaryRowSortOption, TableSummaryCache } from '../common/tableSummaryCache.js';
 import { ColumnSummaryCell } from './components/columnSummaryCell.js';
 import { BackendState, ColumnDisplayType } from '../../languageRuntime/common/positronDataExplorerComm.js';
 import { DataExplorerClientInstance } from '../../languageRuntime/common/languageRuntimeDataExplorerClient.js';
@@ -44,6 +44,11 @@ export class TableSummaryDataGridInstance extends DataGridInstance {
 	 */
 	private _searchText?: string;
 
+	/**
+	 * The current sort option for the summary rows
+	 */
+	private _sortOption?: SummaryRowSortOption // TODO: replace with backend supported sort options type
+
 	/**
 	 * The onDidSelectColumn event emitter.
 	 */
@@ -207,6 +212,7 @@ export class TableSummaryDataGridInstance extends DataGridInstance {
 			await this._tableSummaryCache.update({
 				invalidateCache: !!invalidateCache,
 				searchText: this._searchText,
+				sortOption: this._sortOption,
 				firstColumnIndex: rowDescriptor.rowIndex,
 				screenColumns: this.screenRows
 			});
@@ -398,6 +404,15 @@ export class TableSummaryDataGridInstance extends DataGridInstance {
 		await this.fetchData(!this._searchText);
 	}
 
+	/**
+	 * Sets the sort option for the summary rows.
+	 * @param sortOption The sort option used to order the rows.
+	 */
+	async setSortOption(sortOption: SummaryRowSortOption): Promise<void> {
+		this._sortOption = sortOption;
+		await this.fetchData();
+	}
+
 	//#endregion Public Methods
 
 	//#region Private Methods

src/vs/workbench/services/positronDataExplorer/common/tableSummaryCache.ts

@@ -21,12 +21,35 @@ const LARGE_HISTOGRAM_NUM_BINS = 200;
 const SMALL_FREQUENCY_TABLE_LIMIT = 8;
 const LARGE_FREQUENCY_TABLE_LIMIT = 16;
 
+/**
+ * TODO: replace with backend supported sort options type
+ *
+ * Enum options for sorting the summary row.
+ *
+ * These options are used to determine how the summary row data should be sorted.
+ *
+ * Each option corresponds to a specific sorting criterion:
+ * - Original: No sorting, uses the original order of the data
+ * - NameAscending: Sort by name in ascending order
+ * - NameDescending: Sort by name in descending order
+ * - TypeAscending: Sort by the data type of the column field in ascending order, e.g. boolean, number, string
+ * - TypeDescending: Sort by the data type of the column field in descending order, e.g. string, number, boolean
+ */
+export enum SummaryRowSortOption {
+	Original = 'original',
+	NameAscending = 'name-asc',
+	NameDescending = 'name-desc',
+	TypeAscending = 'type-asc',
+	TypeDescending = 'type-desc'
+}
+
 /**
  * UpdateDescriptor interface.
  */
 interface UpdateDescriptor {
 	invalidateCache: boolean;
 	searchText?: string;
+	sortOption?: SummaryRowSortOption;
 	firstColumnIndex: number;
 	screenColumns: number;
 }
@@ -59,6 +82,11 @@ export class TableSummaryCache extends Disposable {
 	 */
 	private _searchText?: string;
 
+	/**
+	 * The sort option used to order the summary rows.
+	 */
+	private _sortOption?: SummaryRowSortOption;
+
 	/**
 	 * Gets or sets the columns.
 	 */
@@ -216,10 +244,12 @@ export class TableSummaryCache extends Disposable {
 		const {
 			invalidateCache,
 			searchText,
+			sortOption,
 			firstColumnIndex,
 			screenColumns
 		} = updateDescriptor;
 
+		this._sortOption = sortOption;
 		const searchTextChanged = searchText !== this._searchText;
 		this._searchText = searchText;
 
@@ -261,6 +291,7 @@ export class TableSummaryCache extends Disposable {
 		const tableSchema = this._searchText
 			? await this._dataExplorerClientInstance.searchSchema({
 				searchText: this._searchText,
+				//sortOption: this._sortOption ?? SummaryRowSortOption.Original,
 				startIndex: columnIndices[0],
 				numColumns: columnIndices[columnIndices.length - 1] - columnIndices[0] + 1
 			})