From 6441cf935238d8ed7c885d16f41ff0ac7c1fdbc3 Mon Sep 17 00:00:00 2001
From: David Kutugata <dakutuga@microsoft.com>
Date: Thu, 5 Sep 2019 14:05:50 -0700
Subject: [PATCH] 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.
---
 news/2 Fixes/6580.md                          |  6 ++++
 .../history-react/MainPanel.tsx               | 29 +++++++++++++++++--
 .../history-react/contentPanel.tsx            | 10 ++-----
 .../history-react/mainPanelState.ts           |  4 ++-
 4 files changed, 38 insertions(+), 11 deletions(-)
 create mode 100644 news/2 Fixes/6580.md

diff --git a/news/2 Fixes/6580.md b/news/2 Fixes/6580.md
new file mode 100644
index 000000000000..aa561e6c0150
--- /dev/null
+++ b/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
\ No newline at end of file
diff --git a/src/datascience-ui/history-react/MainPanel.tsx b/src/datascience-ui/history-react/MainPanel.tsx
index 5fdbbd56ec63..c8d9af4f3fd6 100644
--- a/src/datascience-ui/history-react/MainPanel.tsx
+++ b/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 => {
diff --git a/src/datascience-ui/history-react/contentPanel.tsx b/src/datascience-ui/history-react/contentPanel.tsx
index cb54e3f2e6fd..3e7b52877d36 100644
--- a/src/datascience-ui/history-react/contentPanel.tsx
+++ b/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);
         }
     }
 
diff --git a/src/datascience-ui/history-react/mainPanelState.ts b/src/datascience-ui/history-react/mainPanelState.ts
index 136dfea401fa..aed2e960722a 100644
--- a/src/datascience-ui/history-react/mainPanelState.ts
+++ b/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
     };
 }