Fix scrolling (#11681)

* Fix scrolling

* Review feedback - fix scrolling on expand/collapse

news/2 Fixes/11554.md

@@ -0,0 +1 @@
+Fix scrolling when clicking in the interactive window to not jump around.

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,

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