check the position of the scroll in the interactive

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