From 5be148b368b4d6aca75a4951c430d985f79bcc8f Mon Sep 17 00:00:00 2001
From: David Kutugata <dakutuga@microsoft.com>
Date: Wed, 4 Sep 2019 11:06:52 -0700
Subject: [PATCH 1/3] 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.

---
 news/2 Fixes/6580.md                              |  2 ++
 src/datascience-ui/history-react/MainPanel.tsx    | 10 ++++++++--
 src/datascience-ui/history-react/contentPanel.tsx | 14 ++++++--------
 3 files changed, 16 insertions(+), 10 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..2ffb5e76fbb3
--- /dev/null
+++ b/news/2 Fixes/6580.md	
@@ -0,0 +1,2 @@
+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.
\ 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..a822fcf5a4f8 100644
--- a/src/datascience-ui/history-react/MainPanel.tsx
+++ b/src/datascience-ui/history-react/MainPanel.tsx
@@ -51,6 +51,7 @@ export class MainPanel extends React.Component<IMainPanelProps, IMainPanelState>
     private onigasmPromise: Deferred<ArrayBuffer> | undefined;
     private tmlangugePromise: Deferred<string> | undefined;
     private monacoIdToCellId: Map<string, string> = new Map<string, string>();
+    private isAtBottom = true;
 
     // tslint:disable-next-line:max-func-body-length
     constructor(props: IMainPanelProps, _state: IMainPanelState) {
@@ -151,7 +152,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 +162,10 @@ export class MainPanel extends React.Component<IMainPanelProps, IMainPanelState>
         );
     }
 
+    public handleScroll = (e: React.UIEvent<HTMLDivElement>) => {
+        this.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 +450,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,
+            isAtBottom: this.isAtBottom
         };
     }
     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..b1bd7e0debdd 100644
--- a/src/datascience-ui/history-react/contentPanel.tsx
+++ b/src/datascience-ui/history-react/contentPanel.tsx
@@ -24,6 +24,7 @@ export interface IContentPanelProps {
     skipNextScroll: boolean;
     monacoTheme: string | undefined;
     editorOptions: monacoEditor.editor.IEditorOptions;
+    isAtBottom: boolean;
     enableGather?: boolean;
     gotoCellCode(index: number): void;
     copyCellCode(index: number): void;
@@ -39,7 +40,7 @@ export class ContentPanel extends React.Component<IContentPanelProps> {
     private bottomRef: React.RefObject<HTMLDivElement> = React.createRef<HTMLDivElement>();
     private containerRef: React.RefObject<HTMLDivElement> = React.createRef<HTMLDivElement>();
     private cellRefs: Map<string, React.RefObject<HTMLDivElement>> = new Map<string, React.RefObject<HTMLDivElement>>();
-    private throttledScrollIntoView = throttle(this.scrollIntoView.bind(this), 100);
+    private throttledScrollIntoView = throttle(this.scrollIntoView.bind(this), 1500);
     constructor(prop: IContentPanelProps) {
         super(prop);
     }
@@ -49,7 +50,9 @@ export class ContentPanel extends React.Component<IContentPanelProps> {
     }
 
     public componentDidUpdate() {
-        this.scrollToBottom();
+        if (this.props.isAtBottom) {
+            this.scrollToBottom();
+        }
     }
 
     public render() {
@@ -122,12 +125,7 @@ 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) {
+        if (this.bottomRef.current) {
             this.bottomRef.current.scrollIntoView({ behavior: 'auto', block: 'start', inline: 'nearest' });
         }
     }

From 64d02028ba375e978207747311d2f7eec7b261aa Mon Sep 17 00:00:00 2001
From: David Kutugata <dakutuga@microsoft.com>
Date: Thu, 5 Sep 2019 10:51:54 -0700
Subject: [PATCH 2/3] handle the scroll in the MainPanel, tested to work with:
 - regular code, -dataframes, -big and regular plots.

---
 .../history-react/MainPanel.tsx               | 22 +++++++++++++++----
 .../history-react/contentPanel.tsx            | 10 ++++-----
 .../history-react/mainPanelState.ts           |  4 +++-
 3 files changed, 25 insertions(+), 11 deletions(-)

diff --git a/src/datascience-ui/history-react/MainPanel.tsx b/src/datascience-ui/history-react/MainPanel.tsx
index a822fcf5a4f8..d3732f068301 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>;
@@ -51,7 +52,6 @@ export class MainPanel extends React.Component<IMainPanelProps, IMainPanelState>
     private onigasmPromise: Deferred<ArrayBuffer> | undefined;
     private tmlangugePromise: Deferred<string> | undefined;
     private monacoIdToCellId: Map<string, string> = new Map<string, string>();
-    private isAtBottom = true;
 
     // tslint:disable-next-line:max-func-body-length
     constructor(props: IMainPanelProps, _state: IMainPanelState) {
@@ -69,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
@@ -162,8 +163,21 @@ export class MainPanel extends React.Component<IMainPanelProps, IMainPanelState>
         );
     }
 
+    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>) => {
-        this.isAtBottom = e.currentTarget.scrollHeight - e.currentTarget.scrollTop === e.currentTarget.clientHeight;
+        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
@@ -451,7 +465,7 @@ export class MainPanel extends React.Component<IMainPanelProps, IMainPanelState>
             expandImage: this.showPlot,
             gatherCode: this.gatherCode,
             enableGather: this.state.enableGather,
-            isAtBottom: this.isAtBottom
+            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 b1bd7e0debdd..3e7b52877d36 100644
--- a/src/datascience-ui/history-react/contentPanel.tsx
+++ b/src/datascience-ui/history-react/contentPanel.tsx
@@ -24,7 +24,6 @@ export interface IContentPanelProps {
     skipNextScroll: boolean;
     monacoTheme: string | undefined;
     editorOptions: monacoEditor.editor.IEditorOptions;
-    isAtBottom: boolean;
     enableGather?: boolean;
     gotoCellCode(index: number): void;
     copyCellCode(index: number): void;
@@ -34,13 +33,14 @@ 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> {
     private bottomRef: React.RefObject<HTMLDivElement> = React.createRef<HTMLDivElement>();
     private containerRef: React.RefObject<HTMLDivElement> = React.createRef<HTMLDivElement>();
     private cellRefs: Map<string, React.RefObject<HTMLDivElement>> = new Map<string, React.RefObject<HTMLDivElement>>();
-    private throttledScrollIntoView = throttle(this.scrollIntoView.bind(this), 1500);
+    private throttledScrollIntoView = throttle(this.scrollIntoView.bind(this), 100);
     constructor(prop: IContentPanelProps) {
         super(prop);
     }
@@ -50,9 +50,7 @@ export class ContentPanel extends React.Component<IContentPanelProps> {
     }
 
     public componentDidUpdate() {
-        if (this.props.isAtBottom) {
-            this.scrollToBottom();
-        }
+        this.scrollToBottom();
     }
 
     public render() {
@@ -126,7 +124,7 @@ export class ContentPanel extends React.Component<IContentPanelProps> {
         // 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.bottomRef.current.scrollIntoView({ behavior: 'auto', block: 'start', inline: 'nearest' });
+            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
     };
 }
 

From 9420427efce74459aa7917a47a639263837a28a7 Mon Sep 17 00:00:00 2001
From: David Kutugata <dakutuga@microsoft.com>
Date: Thu, 5 Sep 2019 13:33:03 -0700
Subject: [PATCH 3/3] Added some comments.

---
 news/2 Fixes/6580.md                           | 6 +++++-
 src/datascience-ui/history-react/MainPanel.tsx | 3 +++
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/news/2 Fixes/6580.md b/news/2 Fixes/6580.md
index 2ffb5e76fbb3..aa561e6c0150 100644
--- a/news/2 Fixes/6580.md	
+++ b/news/2 Fixes/6580.md	
@@ -1,2 +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.
\ No newline at end of file
+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 d3732f068301..c8d9af4f3fd6 100644
--- a/src/datascience-ui/history-react/MainPanel.tsx
+++ b/src/datascience-ui/history-react/MainPanel.tsx
@@ -163,6 +163,9 @@ 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;