check the position of the scroll in the interactive (#7198)

* check the position of the scroll in the interactive
window, if it is at the bottom, the screen stays at the
bottom, and if not, the screen stays in place.
Throttling of the scroll was increased to help with
consistency on rapidly appearing plots.

* handle the scroll in the MainPanel, tested to work
with: - regular code, -dataframes, -big and regular plots.

* Added some comments.

Author: David Kutugata

news/2 Fixes/6580.md

@@ -0,0 +1,6 @@
+Changed the way scrolling is treated. Now we only check for the position of the scroll, the size of the cell won't matter.
+Still the interactive window will snap to the bottom if you already are at the bottom, and will stay in place if you are not. Like a chat window.
+Tested to work with: 
+- regular code
+- dataframes
+- big and regular plots

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

@@ -41,6 +41,7 @@ export class MainPanel extends React.Component<IMainPanelProps, IMainPanelState>
     private stackLimit = 10;
     private updateCount = 0;
     private renderCount = 0;
+    private internalScrollCount = 0;
     private editCellRef: Cell | null = null;
     private mainPanel: HTMLDivElement | null = null;
     private variableExplorerRef: React.RefObject<VariableExplorer>;
@@ -68,7 +69,8 @@ export class MainPanel extends React.Component<IMainPanelProps, IMainPanelState>
             editorOptions: this.computeEditorOptions(),
             currentExecutionCount: 0,
             debugging: false,
-            enableGather: getSettings && getSettings().enableGather
+            enableGather: getSettings && getSettings().enableGather,
+            isAtBottom: true
         };
 
         // Add test state if necessary
@@ -151,7 +153,7 @@ export class MainPanel extends React.Component<IMainPanelProps, IMainPanelState>
                 <section id='main-panel-variable' aria-label={getLocString('DataScience.collapseVariableExplorerLabel', 'Variables')}>
                     {this.renderVariablePanel(baseTheme)}
                 </section>
-                <main id='main-panel-content'>
+                <main id='main-panel-content' onScroll={this.handleScroll}>
                     {this.renderContentPanel(baseTheme)}
                 </main>
                 <section id='main-panel-footer' aria-label={getLocString('DataScience.editSection', 'Input new cells here')}>
@@ -161,6 +163,26 @@ export class MainPanel extends React.Component<IMainPanelProps, IMainPanelState>
         );
     }
 
+    // This handles the scrolling. Its called from the props of contentPanel.
+    // We only scroll when the state indicates we are at the bottom of the interactive window,
+    // otherwise it sometimes scrolls when the user wasn't at the bottom.
+    public scrollDiv = (div: HTMLDivElement) => {
+        if (this.state.isAtBottom) {
+            this.internalScrollCount += 1;
+            div.scrollIntoView({ behavior: 'auto', block: 'start', inline: 'nearest' });
+        }
+    }
+
+    public handleScroll = (e: React.UIEvent<HTMLDivElement>) => {
+        if (this.internalScrollCount > 0) {
+            this.internalScrollCount -= 1;
+        } else {
+            this.setState({
+                isAtBottom: e.currentTarget.scrollHeight - e.currentTarget.scrollTop === e.currentTarget.clientHeight
+            });
+        }
+    }
+
     // tslint:disable-next-line:no-any cyclomatic-complexity max-func-body-length
     public handleMessage = (msg: string, payload?: any) => {
         switch (msg) {
@@ -445,7 +467,8 @@ export class MainPanel extends React.Component<IMainPanelProps, IMainPanelState>
             openLink: this.openLink,
             expandImage: this.showPlot,
             gatherCode: this.gatherCode,
-            enableGather: this.state.enableGather
+            enableGather: this.state.enableGather,
+            scrollToBottom: this.scrollDiv
         };
     }
     private getToolbarProps = (baseTheme: string): IToolbarPanelProps => {

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

@@ -33,6 +33,7 @@ export interface IContentPanelProps {
     onCodeCreated(code: string, file: string, cellId: string, modelId: string): void;
     openLink(uri: monacoEditor.Uri): void;
     expandImage(imageHtml: string): void;
+    scrollToBottom(div: HTMLDivElement): void;
 }
 
 export class ContentPanel extends React.Component<IContentPanelProps> {
@@ -122,13 +123,8 @@ export class ContentPanel extends React.Component<IContentPanelProps> {
     private scrollIntoView() {
         // Force auto here as smooth scrolling can be canceled by updates to the window
         // from elsewhere (and keeping track of these would make this hard to maintain)
-        if (this.bottomRef.current
-            // This condition prevents window to scroll down when user is not near the bottom.
-            // We increase window.innerHeight by 20% to still snap to the bottom when creating
-            // multiple default plots. User needs to do about 3 'scrolls' up from the bottom
-            // to prevent the window to snap to the bottom.
-            && this.bottomRef.current.getBoundingClientRect().bottom <= window.innerHeight * 1.2) {
-            this.bottomRef.current.scrollIntoView({ behavior: 'auto', block: 'start', inline: 'nearest' });
+        if (this.bottomRef.current) {
+            this.props.scrollToBottom(this.bottomRef.current);
         }
     }
 

src/datascience-ui/history-react/mainPanelState.ts

@@ -32,6 +32,7 @@ export interface IMainPanelState {
     currentExecutionCount: number;
     debugging: boolean;
     enableGather?: boolean;
+    isAtBottom: boolean;
 }
 
 // tslint:disable-next-line: no-multiline-string
@@ -63,7 +64,8 @@ export function generateTestState(inputBlockToggled: (id: string) => void, fileP
         editorOptions: {},
         currentExecutionCount: 0,
         debugging: false,
-        enableGather: false
+        enableGather: false,
+        isAtBottom: true
     };
 }