Strawman proposal for visually distinguishing leading whitespace and …

…empty strings in column names

src/vs/workbench/browser/positronDataGrid/components/dataGridColumnHeader.tsx

@@ -17,6 +17,7 @@ import { selectionType } from '../utilities/mouseUtilities.js';
 import { VerticalSplitter } from '../../../../base/browser/ui/positronComponents/splitters/verticalSplitter.js';
 import { ColumnSelectionState } from '../classes/dataGridInstance.js';
 import { usePositronDataGridContext } from '../positronDataGridContext.js';
+import { getDisplayedColumnName } from '../../../services/positronDataExplorer/common/utils.js';
 
 /**
  * Constants.
@@ -103,6 +104,8 @@ export const DataGridColumnHeader = (props: DataGridColumnHeaderProps) => {
 	// Determine whether the column is selected.
 	const selected = (columnSelectionState & ColumnSelectionState.Selected) !== 0;
 
+	const displayedColumnName = getDisplayedColumnName(props.column?.name);
+
 	// Render.
 	return (
 		<div
@@ -137,7 +140,7 @@ export const DataGridColumnHeader = (props: DataGridColumnHeaderProps) => {
 				}}
 			>
 				<div className='title-description'>
-					<div className='title'>{props.column?.name}</div>
+					<div className='title'>{displayedColumnName}</div>
 					{props.column?.description &&
 						<div className='description'>{props.column.description}</div>
 					}

src/vs/workbench/services/positronDataExplorer/browser/components/columnSummaryCell.tsx

@@ -24,6 +24,7 @@ import { ColumnProfileDatetime } from './columnProfileDatetime.js';
 import { TableSummaryDataGridInstance } from '../tableSummaryDataGridInstance.js';
 import { ColumnDisplayType, ColumnProfileType, ColumnSchema } from '../../../languageRuntime/common/positronDataExplorerComm.js';
 import { dataExplorerExperimentalFeatureEnabled } from '../../common/positronDataExplorerExperimentalConfig.js';
+import { getDisplayedColumnName } from '../../common/utils.js';
 
 /**
  * Constants.
@@ -413,7 +414,7 @@ export const ColumnSummaryCell = (props: ColumnSummaryCellProps) => {
 					onMouseLeave={() => props.hoverService.hideHover()}
 				/>
 				<div className='column-name'>
-					{props.columnSchema.column_name}
+					{getDisplayedColumnName(props.columnSchema.column_name)}
 				</div>
 				{!expanded && <ColumnSparkline />}
 				<ColumnNullPercent />

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

@@ -29,3 +29,21 @@ export const arrayFromIndexRange = (startIndex: number, endIndex: number) =>
  */
 export const linearConversion = (value: number, from: Range, to: Range) =>
 	((value - from.min) / (from.max - from.min)) * (to.max - to.min) + to.min;
+
+
+/**
+ * Add quoting to column name in case it is an empty string or contains leading whitespace.
+ * @param name The column name from the backend
+ * @returns A modified column name that helps distinguish whitespace
+ */
+export function getDisplayedColumnName(name: string | undefined) {
+	let result = name ?? '';
+
+	const EMPTY_SPACE_SYMBOL = '\u2423';
+	// If a column name is an empty string (allowed by pandas, at least) or contains
+	// leading whitespace, then we surround the column name with quotations.
+	if (result === '' || result.match(/^\s/)) {
+		result = `"${result}"`.replace(/ /g, EMPTY_SPACE_SYMBOL);
+	}
+	return result;
+}