Add scrolltobottom (#17)

Author: rchiodo

.vscode/launch.json

@@ -5,10 +5,10 @@
         {
             "type": "node",
             "request": "launch",
-            "name": "Gulp hygiene-branch",
+            "name": "Gulp watch",
             "program": "${workspaceFolder}/node_modules/gulp/bin/gulp.js",
             "args": [
-                "hygiene-branch"
+                "watch"
             ]
         },
         {

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

@@ -11,6 +11,7 @@ import { Cell } from './cell';
 
 export interface IState {
     cells: ICell[];
+    busy: boolean;
 }
 
 export interface IMainPanelProps {
@@ -22,18 +23,21 @@ export class MainPanel extends React.Component<IMainPanelProps, IState> {
     // tslint:disable-next-line:no-any
     private messageHandlers: { [index: string]: (msg?: any) => void } = {
     };
+    private bottom: HTMLDivElement | undefined;
 
     // tslint:disable-next-line:max-func-body-length
     constructor(props: IMainPanelProps, state: IState) {
         super(props);
-        this.state = { cells: [] };
+        this.state = { cells: [], busy: false };
         this.updateState.bind(this);
         this.messageHandlers[HistoryMessages.UpdateState] = this.updateState;
 
         // Setup up some dummy cells for debugging when not running in vscode
         // This should show a gray rectangle in the cell.
         if (!PostOffice.canSendMessages() && !this.props.skipDefault) {
-            this.state = {cells: [
+            this.state = {
+                busy: false,
+                cells: [
                 {
                     input: 'get_ipython().run_line_magic("matplotlib", "inline")',
                     output: {
@@ -168,11 +172,20 @@ export class MainPanel extends React.Component<IMainPanelProps, IState> {
         }
     }
 
+    public componentDidMount() {
+        this.scrollToBottom();
+    }
+
+    public componentDidUpdate(prevProps, prevState) {
+        this.scrollToBottom();
+    }
+
     public render() {
         return (
             <div className='main-panel'>
                 <PostOffice messageHandlers={this.messageHandlers} />
                 {this.renderCells()}
+                <div ref={this.updateBottom} />
             </div>
         );
     }
@@ -185,6 +198,16 @@ export class MainPanel extends React.Component<IMainPanelProps, IState> {
         );
     }
 
+    private scrollToBottom = () => {
+        if (this.bottom) {
+            this.bottom.scrollIntoView({behavior: 'smooth'});
+        }
+    }
+
+    private updateBottom = (newBottom: HTMLDivElement) => {
+        this.bottom = newBottom;
+    }
+
     // tslint:disable-next-line:no-any
     private updateState = (payload?: any) => {
         if (payload) {

src/client/datascience/jupyterServer.ts

@@ -24,6 +24,7 @@ import { ICell, IJupyterServer } from './types';
 
 export class JupyterServer implements IJupyterServer, IDisposable {
     private static trackingTemps: boolean = false;
+    private static textPlainMimeType : string = 'text/plain';
     public isDisposed: boolean = false;
     private session: Session.ISession | undefined;
     private tempFile: temp.OpenFile | undefined;
@@ -165,8 +166,10 @@ export class JupyterServer implements IJupyterServer, IDisposable {
                 this.handleStreamMesssage(msg as KernelMessage.IStreamMsg, cell);
             } else if (KernelMessage.isDisplayDataMsg(msg)) {
                 this.handleDisplayData(msg as KernelMessage.IDisplayDataMsg, cell);
+            } else if (KernelMessage.isErrorMsg(msg)) {
+                this.handleError(msg as KernelMessage.IErrorMsg, cell);
             } else {
-                this.logger.logWarning(`Unknown message ${typeof msg}`);
+                this.logger.logWarning(`Unknown message ${msg.header.msg_type} : hasData=${'data' in msg.content}`);
             }
         };
 
@@ -193,21 +196,28 @@ export class JupyterServer implements IJupyterServer, IDisposable {
         }
     }
 
-    private handleStreamMesssage(msg: KernelMessage.IStreamMsg, cell: ICell) {
-        const mimeType = 'text/plain';
-
-        // Stream/concat the text together
-        if (cell.output.hasOwnProperty(mimeType)) {
-            cell.output[mimeType] = `${cell.output[mimeType].toString()}\n${msg.content.text}`;
+    private handleTextPlain(text: string, cell: ICell) {
+        if (cell.output.hasOwnProperty(JupyterServer.textPlainMimeType)) {
+            cell.output[JupyterServer.textPlainMimeType] = `${cell.output[JupyterServer.textPlainMimeType].toString()}\n${text}`;
         } else {
-            cell.output[mimeType] = msg.content.text;
+            cell.output[JupyterServer.textPlainMimeType] = text;
         }
     }
 
+    private handleStreamMesssage(msg: KernelMessage.IStreamMsg, cell: ICell) {
+        // Stream/concat the text together
+        this.handleTextPlain((msg.content.text), cell);
+    }
+
     private handleDisplayData(msg: KernelMessage.IDisplayDataMsg, cell: ICell) {
         cell.output = msg.content.data;
     }
 
+    private handleError(msg: KernelMessage.IErrorMsg, cell: ICell) {
+        // Stream/concat the text together
+        this.handleTextPlain((msg.content.evalue), cell);
+    }
+
     private async generateTempFile(notebookFile?: string) : Promise<temp.OpenFile> {
         // Make sure we cleanup these temp files.
         if (!JupyterServer.trackingTemps) {