From 15342be6442f407e37c5a7aa00ac9686818a8d91 Mon Sep 17 00:00:00 2001
From: Wes McKinney <wesm@apache.org>
Date: Fri, 6 Dec 2024 16:39:38 -0600
Subject: [PATCH] Strawman proposal for visually distinguishing leading
 whitespace and empty strings in column names

---
 .../components/dataGridColumnHeader.tsx        |  5 ++++-
 .../browser/components/columnSummaryCell.tsx   |  3 ++-
 .../positronDataExplorer/common/utils.ts       | 18 ++++++++++++++++++
 3 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/src/vs/workbench/browser/positronDataGrid/components/dataGridColumnHeader.tsx b/src/vs/workbench/browser/positronDataGrid/components/dataGridColumnHeader.tsx
index 0ac3ac34749..feff6f52008 100644
--- a/src/vs/workbench/browser/positronDataGrid/components/dataGridColumnHeader.tsx
+++ b/src/vs/workbench/browser/positronDataGrid/components/dataGridColumnHeader.tsx
@@ -18,6 +18,7 @@ import { selectionType } from 'vs/workbench/browser/positronDataGrid/utilities/m
 import { VerticalSplitter } from 'vs/base/browser/ui/positronComponents/splitters/verticalSplitter';
 import { ColumnSelectionState } from 'vs/workbench/browser/positronDataGrid/classes/dataGridInstance';
 import { usePositronDataGridContext } from 'vs/workbench/browser/positronDataGrid/positronDataGridContext';
+import { getDisplayedColumnName } from 'vs/workbench/services/positronDataExplorer/common/utils';
 
 /**
  * Constants.
@@ -104,6 +105,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
@@ -138,7 +141,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>
 					}
diff --git a/src/vs/workbench/services/positronDataExplorer/browser/components/columnSummaryCell.tsx b/src/vs/workbench/services/positronDataExplorer/browser/components/columnSummaryCell.tsx
index d503b3c46f9..f2f80c07f32 100644
--- a/src/vs/workbench/services/positronDataExplorer/browser/components/columnSummaryCell.tsx
+++ b/src/vs/workbench/services/positronDataExplorer/browser/components/columnSummaryCell.tsx
@@ -25,6 +25,7 @@ import { ColumnProfileDatetime } from 'vs/workbench/services/positronDataExplore
 import { TableSummaryDataGridInstance } from 'vs/workbench/services/positronDataExplorer/browser/tableSummaryDataGridInstance';
 import { ColumnDisplayType, ColumnProfileType, ColumnSchema } from 'vs/workbench/services/languageRuntime/common/positronDataExplorerComm';
 import { dataExplorerExperimentalFeatureEnabled } from 'vs/workbench/services/positronDataExplorer/common/positronDataExplorerExperimentalConfig';
+import { getDisplayedColumnName } from 'vs/workbench/services/positronDataExplorer/common/utils';
 
 /**
  * Constants.
@@ -414,7 +415,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 />
diff --git a/src/vs/workbench/services/positronDataExplorer/common/utils.ts b/src/vs/workbench/services/positronDataExplorer/common/utils.ts
index 27b31f0db04..1f35b5d9844 100644
--- a/src/vs/workbench/services/positronDataExplorer/common/utils.ts
+++ b/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;
+}