Collapse summary panel on initial render if width exceeds 50% (#8854)

Author: dhruvisompura

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

@@ -240,15 +240,25 @@ export const DataExplorer = () => {
 	// Automatic layout useEffect.
 	useLayoutEffect(() => {
 		// Set the initial width.
-		setWidth(dataExplorerRef.current.offsetWidth);
+		const initialWidth = dataExplorerRef.current.offsetWidth;
+		setWidth(initialWidth);
 
 		// Set the initial columns width - use stored width or default
 		const savedWidth = context.instance.summaryWidth;
-		setColumnsWidth(
-			savedWidth > 0 ?
-				Math.max(savedWidth, MIN_COLUMN_WIDTH) :
-				DEFAULT_SUMMARY_WIDTH
-		);
+		const columnsWidth = savedWidth > 0
+			? Math.max(savedWidth, MIN_COLUMN_WIDTH)
+			: DEFAULT_SUMMARY_WIDTH;
+		setColumnsWidth(columnsWidth);
+
+		// Collapse the summary panel if it would take up more than 50%
+		// of the width and isn't already collapsed
+		if (columnsWidth > (initialWidth * 0.5) && !context.instance.isSummaryCollapsed) {
+			context.instance.collapseSummary();
+			// Set the summary panel collapsed state manually here in case the
+			// onDidCollapseSummary event is not registered by the time this
+			// layout effect runs
+			setColumnsCollapsed(true);
+		}
 
 		// Allocate and initialize the data explorer resize observer.
 		const resizeObserver = new ResizeObserver(entries => {
@@ -260,7 +270,7 @@ export const DataExplorer = () => {
 
 		// Return the cleanup function that will disconnect the resize observer.
 		return () => resizeObserver.disconnect();
-	}, [context.instance.summaryWidth]);
+	}, [context.instance]);
 
 	// ColumnsWidth Layout useEffect.
 	useLayoutEffect(() => {

test/e2e/tests/data-explorer/data-explorer-python-pandas.test.ts

@@ -43,6 +43,7 @@ test.describe('Data Explorer - Python Pandas', {
 		await clipboard.expectClipboardTextToBe('Jai');
 
 		// verify sparkline hover dialog
+		await dataExplorer.expandSummary();
 		await dataExplorer.verifySparklineHoverDialog(['Value', 'Count']);
 
 		// verify null percentage hover dialog

test/e2e/tests/data-explorer/duckdb-sparklines.test.ts

@@ -22,6 +22,7 @@ test.describe('Data Explorer - DuckDB Column Summary', {
 		await openDataFile('data-files/100x100/100x100.parquet');
 		await hotKeys.notebookLayout();
 
+		await dataExplorer.expandSummary();
 		await dataExplorer.verifyMissingPercent([
 			{ column: 1, expected: '0%' },
 			{ column: 2, expected: '0%' },

test/e2e/tests/data-explorer/sparklines.test.ts

@@ -32,6 +32,7 @@ test.describe('Data Explorer - Sparklines', {
 		await hotKeys.closePrimarySidebar();
 		await hotKeys.closeSecondarySidebar();
 
+		await dataExplorer.expandSummary();
 		await dataExplorer.verifySparklineHeights([{ column: 1, expected: ['50.0', '40.0', '30.0', '20.0', '10.0'] }]);
 	});
 
@@ -47,6 +48,7 @@ test.describe('Data Explorer - Sparklines', {
 		await hotKeys.closePrimarySidebar();
 		await hotKeys.closeSecondarySidebar();
 
+		await dataExplorer.expandSummary();
 		await dataExplorer.verifySparklineHeights([{ column: 1, expected: ['50.0', '40.0', '30.0', '20.0', '10.0'] }]);
 	});
 });

test/e2e/tests/editor-action-bar/editor-action-bar-data-files.test.ts

@@ -16,11 +16,12 @@
  *  - Verify the Editor Action Bar functionality:
  */
 
-import { Application } from '../../infra';
+import { Application, DataExplorer } from '../../infra';
 import { EditorActionBar } from '../../pages/editorActionBar';
 import { test, expect, tags } from '../_test.setup';
 
 let editorActionBar: EditorActionBar;
+let dataExplorer: DataExplorer;
 
 const testCases = [
 	{
@@ -56,6 +57,7 @@ test.describe('Editor Action Bar: Data Files', {
 
 	test.beforeAll(async function ({ app }) {
 		editorActionBar = app.workbench.editorActionBar;
+		dataExplorer = app.workbench.dataExplorer;
 	});
 
 	test.afterEach(async function ({ runCommand }) {
@@ -79,6 +81,9 @@ test.describe('Editor Action Bar: Data Files', {
 				await openDataExplorerViaVariablePane(app, testCase.variable, testCase.tabName);
 			}
 
+			// Ensure the summary panel is visible
+			await dataExplorer.expandSummary();
+
 			// Verify action bar behavior
 			await editorActionBar.selectSummaryOn(app.web, 'Left');
 			await editorActionBar.verifySummaryPosition('Left');