Strawman proposal for visually distinguishing leading whitespace and …

…empty strings in column names
posit-dev · Dec 6, 2024 · 15342be · 15342be
1 parent c7ef34f
commit 15342be
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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;
+}