Port scrolling fix to release (#11688)

* Fix scrolling (#11681)

* Fix scrolling

* Review feedback - fix scrolling on expand/collapse

* Update changelog

* Update package.json

Co-authored-by: Jim Griesmer <[email protected]>

Author: rchiodo

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
 

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": "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": {
                     "type": "boolean",
                     "default": true,

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';

src/datascience-ui/history-react/interactivePanel.tsx

@@ -373,7 +373,9 @@ ${buildSettingsCss(this.props.settings)}`}</style>
         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);
         }
     };

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<IContentPanelProps> {
     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<IContentPanelProps> {
         );
     }
 
+    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);