From 427c82e617d541266baa3bd97c69098f851a053d Mon Sep 17 00:00:00 2001 From: Rich Chiodo Date: Thu, 7 May 2020 18:16:03 -0700 Subject: [PATCH 1/3] Fix scrolling (#11681) * Fix scrolling * Review feedback - fix scrolling on expand/collapse --- news/2 Fixes/11554.md | 1 + package.json | 6 ++++++ src/client/common/types.ts | 1 + .../history-react/interactivePanel.tsx | 4 +++- .../interactive-common/contentPanel.tsx | 17 +++++++++++++++-- 5 files changed, 26 insertions(+), 3 deletions(-) create mode 100644 news/2 Fixes/11554.md diff --git a/news/2 Fixes/11554.md b/news/2 Fixes/11554.md new file mode 100644 index 000000000000..e2352638df84 --- /dev/null +++ b/news/2 Fixes/11554.md @@ -0,0 +1 @@ +Fix scrolling when clicking in the interactive window to not jump around. \ No newline at end of file diff --git a/package.json b/package.json index e2d8413913ee..4f07f8584cd9 100644 --- a/package.json +++ b/package.json @@ -1761,6 +1761,12 @@ "description": "Maximum size (in pixels) of text output in the Python Interactive window and Notebook Editor before a scrollbar appears. First enable scrolling for cell outputs in settings.", "scope": "resource" }, + "python.dataScience.alwaysScrollOnNewCell": { + "type": "boolean", + "default": false, + "description": "If a new cell comes in, scroll the interactive window to the bottom regardless of where the scroll bar is. The default is to only scroll if the current position was already at the bottom when the new cell is created", + "scope": "resource" + }, "python.dataScience.enableScrollingForCellOutputs": { "type": "boolean", "default": true, diff --git a/src/client/common/types.ts b/src/client/common/types.ts index 656af6d5ff22..ff33f32e19f0 100644 --- a/src/client/common/types.ts +++ b/src/client/common/types.ts @@ -389,6 +389,7 @@ export interface IDataScienceSettings { disableJupyterAutoStart?: boolean; jupyterCommandLineArguments: string[]; widgetScriptSources: WidgetCDNs[]; + alwaysScrollOnNewCell?: boolean; } export type WidgetCDNs = 'unpkg.com' | 'jsdelivr.com'; diff --git a/src/datascience-ui/history-react/interactivePanel.tsx b/src/datascience-ui/history-react/interactivePanel.tsx index 66a06e711a9e..0cbec0042ce3 100644 --- a/src/datascience-ui/history-react/interactivePanel.tsx +++ b/src/datascience-ui/history-react/interactivePanel.tsx @@ -373,7 +373,9 @@ ${buildSettingsCss(this.props.settings)}`} if (this.internalScrollCount > 0) { this.internalScrollCount -= 1; } else if (this.contentPanelRef.current) { - const isAtBottom = this.contentPanelRef.current.computeIsAtBottom(e.currentTarget); + const isAtBottom = this.props.settings?.alwaysScrollOnNewCell + ? true + : this.contentPanelRef.current.computeIsAtBottom(e.currentTarget); this.props.scroll(isAtBottom); } }; diff --git a/src/datascience-ui/interactive-common/contentPanel.tsx b/src/datascience-ui/interactive-common/contentPanel.tsx index fba2e3ad5be3..f8653aa48fa4 100644 --- a/src/datascience-ui/interactive-common/contentPanel.tsx +++ b/src/datascience-ui/interactive-common/contentPanel.tsx @@ -3,6 +3,7 @@ 'use strict'; import * as React from 'react'; +import * as fastDeepEqual from 'fast-deep-equal'; import { IDataScienceExtraSettings } from '../../client/datascience/types'; import { InputHistory } from './inputHistory'; import { ICellViewModel } from './mainState'; @@ -37,8 +38,12 @@ export class ContentPanel extends React.Component { public componentDidMount() { this.scrollToBottom(); } - public componentWillReceiveProps() { - this.scrollToBottom(); + public componentWillReceiveProps(prevProps: IContentPanelProps) { + // Scroll if we suddenly finished or updated a cell. This should happen on + // finish, updating output, etc. + if (!fastDeepEqual(prevProps.cellVMs.map(this.outputCheckable), this.props.cellVMs.map(this.outputCheckable))) { + this.scrollToBottom(); + } } public computeIsAtBottom(parent: HTMLDivElement): boolean { @@ -61,6 +66,14 @@ export class ContentPanel extends React.Component { ); } + private outputCheckable = (cellVM: ICellViewModel) => { + // Return the properties that if they change means a cell updated something + return { + outputs: cellVM.cell.data.outputs, + state: cellVM.cell.state + }; + }; + private renderCells = () => { return this.props.cellVMs.map((cellVM: ICellViewModel, index: number) => { return this.props.renderCell(cellVM, index); From 793850364d3e2ff1760e0a5a8b619c9a5f4c0532 Mon Sep 17 00:00:00 2001 From: Rich Chiodo Date: Thu, 7 May 2020 18:17:37 -0700 Subject: [PATCH 2/3] Update changelog --- CHANGELOG.md | 2 ++ news/2 Fixes/11554.md | 1 - 2 files changed, 2 insertions(+), 1 deletion(-) delete mode 100644 news/2 Fixes/11554.md diff --git a/CHANGELOG.md b/CHANGELOG.md index ab8c4a0e0d83..ec36802066db 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -80,6 +80,8 @@ ([#11579](https://github.com/Microsoft/vscode-python/issues/11579)) 1. When VS quits, make sure to save contents of notebook for next reopen. ([#11557](https://github.com/Microsoft/vscode-python/issues/11557)) +1. Fix scrolling when clicking in the interactive window to not jump around. + ([#11554](https://github.com/Microsoft/vscode-python/issues/11554)) ### Code Health diff --git a/news/2 Fixes/11554.md b/news/2 Fixes/11554.md deleted file mode 100644 index e2352638df84..000000000000 --- a/news/2 Fixes/11554.md +++ /dev/null @@ -1 +0,0 @@ -Fix scrolling when clicking in the interactive window to not jump around. \ No newline at end of file From 3923fc550a2b45e45161896eb6f7c9b307983bb7 Mon Sep 17 00:00:00 2001 From: Jim Griesmer Date: Thu, 7 May 2020 19:48:58 -0700 Subject: [PATCH 3/3] Update package.json --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 4f07f8584cd9..1c8bbf58fb27 100644 --- a/package.json +++ b/package.json @@ -1764,7 +1764,7 @@ "python.dataScience.alwaysScrollOnNewCell": { "type": "boolean", "default": false, - "description": "If a new cell comes in, scroll the interactive window to the bottom regardless of where the scroll bar is. The default is to only scroll if the current position was already at the bottom when the new cell is created", + "description": "Automatically scroll the interactive window to show the output of the last statement executed. If false, the interactive window will only automatically scroll if the bottom of the prior cell is visible.", "scope": "resource" }, "python.dataScience.enableScrollingForCellOutputs": {