From c2ea9679a388dedf955832cd31e17ab4ba842b96 Mon Sep 17 00:00:00 2001
From: Ian Huff <ian.huff@gmail.com>
Date: Thu, 23 May 2019 14:19:53 -0700
Subject: [PATCH 1/7] First pass at working three pane grid

---
 .../history-react/MainPanel.tsx               | 65 +++++++++++++------
 .../history-react/contentPanel.tsx            |  2 +-
 .../history-react/headerPanel.tsx             | 20 +++---
 .../history-react/mainPanel.css               | 48 ++++++++++++--
 .../history-react/mainPanelState.ts           |  4 +-
 .../history-react/variableExplorer.tsx        | 34 +++++-----
 6 files changed, 119 insertions(+), 54 deletions(-)

diff --git a/src/datascience-ui/history-react/MainPanel.tsx b/src/datascience-ui/history-react/MainPanel.tsx
index f2c507118796..a19bffbefbc2 100644
--- a/src/datascience-ui/history-react/MainPanel.tsx
+++ b/src/datascience-ui/history-react/MainPanel.tsx
@@ -62,7 +62,7 @@ export class MainPanel extends React.Component<IMainPanelProps, IMainPanelState>
             redoStack : [],
             submittedText: false,
             history: new InputHistory(),
-            contentTop: 24,
+            //contentTop: 24,
             editCellVM: getSettings && getSettings().allowInput ? createEditableCellVM(1) : undefined,
             editorOptions: this.computeEditorOptions()
         };
@@ -130,6 +130,39 @@ export class MainPanel extends React.Component<IMainPanelProps, IMainPanelState>
 
         const baseTheme = this.computeBaseTheme();
 
+        //return (
+            //<div id='main-panel' ref={this.updateSelf}>
+                //<StyleInjector
+                    //expectingDark={baseTheme !== 'vscode-light'}
+                    //postOffice={this.postOffice}
+                    //darkChanged={this.darkChanged}
+                    //monacoThemeChanged={this.monacoThemeChanged}
+                    //ref={this.styleInjectorRef} />
+                //<div className='main-panel-header'>
+                    //<div className='main-panel-inner'>
+                    //<div className='main-panel-inner-relative'>
+                    //<div className='main-panel-scrollable'>
+                        //{this.renderHeaderPanel(baseTheme)}
+                        //</div>
+                        //</div>
+                    //</div>
+                //</div>
+                //<div className='main-panel-content'>
+                    //<div className='main-panel-inner'>
+                    //<div className='main-panel-inner-relative'>
+                        //<div className='main-panel-scrollable'>
+                            //{this.renderContentPanel(baseTheme)}
+                        //</div>
+                    //</div>
+                    //</div>
+                //</div>
+                //<div className='main-panel-footer'>
+                    //<div className='main-panel-inner'>
+                        //{this.renderFooterPanel(baseTheme)}
+                    //</div>
+                //</div>
+            //</div>
+        //);
         return (
             <div id='main-panel' ref={this.updateSelf}>
                 <StyleInjector
@@ -138,22 +171,14 @@ export class MainPanel extends React.Component<IMainPanelProps, IMainPanelState>
                     darkChanged={this.darkChanged}
                     monacoThemeChanged={this.monacoThemeChanged}
                     ref={this.styleInjectorRef} />
-                <div className='main-panel-header'>
-                    <div className='main-panel-inner'>
-                        {this.renderHeaderPanel(baseTheme)}
-                    </div>
+                <div id='main-panel-header'>
+                    {this.renderHeaderPanel(baseTheme)}
                 </div>
-                <div className='main-panel-content'>
-                    <div className='main-panel-inner'>
-                        <div className='main-panel-scrollable'>
-                            {this.renderContentPanel(baseTheme)}
-                        </div>
-                    </div>
+                <div id='main-panel-content'>
+                    {this.renderContentPanel(baseTheme)}
                 </div>
-                <div className='main-panel-footer'>
-                    <div className='main-panel-inner'>
-                        {this.renderFooterPanel(baseTheme)}
-                    </div>
+                <div id='main-panel-footer'>
+                    {this.renderFooterPanel(baseTheme)}
                 </div>
             </div>
         );
@@ -346,9 +371,9 @@ export class MainPanel extends React.Component<IMainPanelProps, IMainPanelState>
     }
 
     // Called by the header control when size changes (such as expanding variables)
-    private onHeaderHeightChange = (newHeight: number) => {
-        this.setState({contentTop: newHeight});
-    }
+    //private onHeaderHeightChange = (newHeight: number) => {
+        ////this.setState({contentTop: newHeight});
+    //}
 
     private darkChanged = (newDark: boolean) => {
         // update our base theme if allowed. Don't do this
@@ -393,7 +418,7 @@ export class MainPanel extends React.Component<IMainPanelProps, IMainPanelState>
         return {
             editorOptions: this.state.editorOptions,
             baseTheme: baseTheme,
-            contentTop: this.state.contentTop,
+            //contentTop: this.state.contentTop,
             cellVMs: this.state.cellVMs,
             history: this.state.history,
             testMode: this.props.testMode,
@@ -430,7 +455,7 @@ export class MainPanel extends React.Component<IMainPanelProps, IMainPanelState>
         canRedo: this.canRedo(),
         refreshVariables: this.refreshVariables,
         variableExplorerToggled: this.variableExplorerToggled,
-        onHeightChange: this.onHeaderHeightChange,
+        //onHeightChange: this.onHeaderHeightChange,
         baseTheme: baseTheme
        };
     }
diff --git a/src/datascience-ui/history-react/contentPanel.tsx b/src/datascience-ui/history-react/contentPanel.tsx
index 80ae1a05bbe5..7d6e1be7c602 100644
--- a/src/datascience-ui/history-react/contentPanel.tsx
+++ b/src/datascience-ui/history-react/contentPanel.tsx
@@ -14,7 +14,7 @@ import { InputHistory } from './inputHistory';
 
 export interface IContentPanelProps {
     baseTheme: string;
-    contentTop: number;
+    //contentTop: number;
     cellVMs: ICellViewModel[];
     history: InputHistory;
     testMode?: boolean;
diff --git a/src/datascience-ui/history-react/headerPanel.tsx b/src/datascience-ui/history-react/headerPanel.tsx
index 0075cd5ada8e..8852ae4c44b6 100644
--- a/src/datascience-ui/history-react/headerPanel.tsx
+++ b/src/datascience-ui/history-react/headerPanel.tsx
@@ -4,7 +4,7 @@
 import './headerPanel.css';
 
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+//import * as ReactDOM from 'react-dom';
 
 import { getLocString } from '../react-common/locReactSide';
 import { Progress } from '../react-common/progress';
@@ -37,7 +37,7 @@ export interface IHeaderPanelProps {
     showDataExplorer(targetVariable: string): void;
     refreshVariables(): void;
     variableExplorerToggled(open: boolean): void;
-    onHeightChange(newHeight: number): void;
+    //onHeightChange(newHeight: number): void;
 }
 
 export class HeaderPanel extends React.Component<IHeaderPanelProps> {
@@ -80,21 +80,21 @@ export class HeaderPanel extends React.Component<IHeaderPanelProps> {
                 <VariableExplorer baseTheme={this.props.baseTheme}
                  showDataExplorer={this.props.showDataExplorer}
                  refreshVariables={this.props.refreshVariables}
-                 onHeightChange={this.onVariableHeightChange}
+                 //onHeightChange={this.onVariableHeightChange}
                  variableExplorerToggled={this.props.variableExplorerToggled}
                  ref={this.props.variableExplorerRef} />
             </div>
         );
     }
 
-    private onVariableHeightChange = () => {
-        const divElement = ReactDOM.findDOMNode(this) as HTMLDivElement;
+    //private onVariableHeightChange = () => {
+        //const divElement = ReactDOM.findDOMNode(this) as HTMLDivElement;
 
-        if (divElement) {
-            const computeHeight = divElement.offsetHeight;
-            this.props.onHeightChange(computeHeight);
-        }
-    }
+        //if (divElement) {
+            //const computeHeight = divElement.offsetHeight;
+            //this.props.onHeightChange(computeHeight);
+        //}
+    //}
 
     private renderExtraButtons = () => {
         if (!this.props.skipDefault) {
diff --git a/src/datascience-ui/history-react/mainPanel.css b/src/datascience-ui/history-react/mainPanel.css
index 77df56cf114c..09579be0c1d4 100644
--- a/src/datascience-ui/history-react/mainPanel.css
+++ b/src/datascience-ui/history-react/mainPanel.css
@@ -8,13 +8,43 @@ body, html {
     overflow: hidden;
 }
 
-#main-panel {
+/*#main-panel {
     background: var(--override-background, var(--vscode-editor-background));
     color: var(--override-foreground, var(--vscode-editor-foreground));
     height: 100%;
     width: 100%;
     overflow: hidden;
     display: table;
+}*/
+
+#main-panel {
+    background: var(--override-background, var(--vscode-editor-background));
+    color: var(--override-foreground, var(--vscode-editor-foreground));
+    height: 100%;
+    width: 100%;
+    overflow: hidden;
+    display: grid;
+    grid-template-rows: auto 1fr auto;
+    grid-template-columns: 1fr;
+    grid-template-areas:
+    "header"
+    "content"
+    "footer";
+    height: 100%;
+    width: 100%;
+    position: absolute;
+}
+
+#main-panel-header {
+    grid-area: header;
+}
+#main-panel-content {
+    grid-area: content;
+    max-height: 100%;
+    overflow: auto;
+}
+#main-panel-footer {
+    grid-area: footer;
 }
 
 .hide {
@@ -33,7 +63,7 @@ body, html {
     border-top-style: solid;
     border-top-width: 1px;
 }
-
+/*
 .main-panel-header, .main-panel-content, .main-panel-footer {
     display: table-row;
 }
@@ -42,15 +72,25 @@ body, html {
     display: table-cell;
 }
 
-.main-panel-content .main-panel-inner {
+.main-panel-inner-relative {
     height: 100%;
     position: relative;
 }
 
+ .main-panel-content .main-panel-inner {
+    height: 100%;
+    position: relative;
+}
+
+.main-panel-header .main-panel-inner {
+    height: 100%;
+    position: relative;
+} 
+
 .main-panel-scrollable {
     position: absolute;
     left: 0; right: 0;
     top: 0; bottom: 0;
     overflow-y: auto;
     overflow-x: none;
-}
\ No newline at end of file
+} */
\ No newline at end of file
diff --git a/src/datascience-ui/history-react/mainPanelState.ts b/src/datascience-ui/history-react/mainPanelState.ts
index be0913cb5429..44a8877c5d21 100644
--- a/src/datascience-ui/history-react/mainPanelState.ts
+++ b/src/datascience-ui/history-react/mainPanelState.ts
@@ -23,7 +23,7 @@ export interface IMainPanelState {
     redoStack : ICellViewModel[][];
     submittedText: boolean;
     history: InputHistory;
-    contentTop: number;
+    //contentTop: number;
     rootStyle?: string;
     theme?: string;
     forceDark?: boolean;
@@ -56,7 +56,7 @@ export function generateTestState(inputBlockToggled : (id: string) => void, file
         redoStack : [],
         submittedText: false,
         history: new InputHistory(),
-        contentTop: 24,
+        //contentTop: 24,
         rootStyle: darkStyle,
         tokenizerLoaded: true,
         editorOptions: {}
diff --git a/src/datascience-ui/history-react/variableExplorer.tsx b/src/datascience-ui/history-react/variableExplorer.tsx
index d5c2ba101791..77ad1fe1ede3 100644
--- a/src/datascience-ui/history-react/variableExplorer.tsx
+++ b/src/datascience-ui/history-react/variableExplorer.tsx
@@ -4,7 +4,7 @@
 import './variableExplorer.css';
 
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+//import * as ReactDOM from 'react-dom';
 
 import { IJupyterVariable } from '../../client/datascience/types';
 import { getLocString } from '../react-common/locReactSide';
@@ -21,7 +21,7 @@ import './variableExplorerGrid.less';
 interface IVariableExplorerProps {
     baseTheme: string;
     refreshVariables(): void;
-    onHeightChange(): void;
+    //onHeightChange(): void;
     showDataExplorer(targetVariable: string): void;
     variableExplorerToggled(open: boolean): void;
 }
@@ -127,12 +127,12 @@ export class VariableExplorer extends React.Component<IVariableExplorerProps, IV
             }
         }
 
-        this.updateHeight();
+        //this.updateHeight();
     }
 
-    public componentDidUpdate = () => {
-        this.updateHeight();
-    }
+    //public componentDidUpdate = () => {
+        //this.updateHeight();
+    //}
 
     // New variable data passed in via a ref
     // Help to keep us independent of main history window state if we choose to break out the variable explorer
@@ -291,19 +291,19 @@ export class VariableExplorer extends React.Component<IVariableExplorerProps, IV
         }
     }
 
-    private updateHeight = () => {
-        // Make sure we check for a new height so we don't get into an update loop
-        const divElement = ReactDOM.findDOMNode(this) as HTMLDivElement;
+    //private updateHeight = () => {
+        //// Make sure we check for a new height so we don't get into an update loop
+        //const divElement = ReactDOM.findDOMNode(this) as HTMLDivElement;
 
-        if (divElement) {
-            const newHeight = divElement.offsetHeight;
+        //if (divElement) {
+            //const newHeight = divElement.offsetHeight;
 
-            if (this.state.height !== newHeight) {
-                this.setState({height: newHeight});
-                this.props.onHeightChange();
-            }
-        }
-    }
+            //if (this.state.height !== newHeight) {
+                //this.setState({height: newHeight});
+                //this.props.onHeightChange();
+            //}
+        //}
+    //}
 
     private getRow = (index: number) => {
         if (index >= 0 && index < this.state.gridRows.length) {

From a1b963c557246ac669378d7e917256480c123457 Mon Sep 17 00:00:00 2001
From: Ian Huff <ian.huff@gmail.com>
Date: Fri, 24 May 2019 08:54:21 -0700
Subject: [PATCH 2/7] working, pre cleanup

---
 .../history-react/MainPanel.tsx               | 39 ++++++++++++++-----
 .../history-react/contentPanel.css            |  4 +-
 .../history-react/contentPanel.tsx            | 10 +++++
 .../history-react/headerPanel.css             |  3 --
 .../history-react/mainPanel.css               | 30 +++++++-------
 .../history-react/toolbarPanel.css            |  0
 .../{headerPanel.tsx => toolbarPanel.tsx}     | 32 +++------------
 .../history-react/variablePanel.css           |  8 ++++
 .../history-react/variablePanel.tsx           | 35 +++++++++++++++++
 9 files changed, 103 insertions(+), 58 deletions(-)
 delete mode 100644 src/datascience-ui/history-react/headerPanel.css
 create mode 100644 src/datascience-ui/history-react/toolbarPanel.css
 rename src/datascience-ui/history-react/{headerPanel.tsx => toolbarPanel.tsx} (77%)
 create mode 100644 src/datascience-ui/history-react/variablePanel.css
 create mode 100644 src/datascience-ui/history-react/variablePanel.tsx

diff --git a/src/datascience-ui/history-react/MainPanel.tsx b/src/datascience-ui/history-react/MainPanel.tsx
index a19bffbefbc2..0c8c614ebb3f 100644
--- a/src/datascience-ui/history-react/MainPanel.tsx
+++ b/src/datascience-ui/history-react/MainPanel.tsx
@@ -19,12 +19,13 @@ import { getSettings, updateSettings } from '../react-common/settingsReactSide';
 import { StyleInjector } from '../react-common/styleInjector';
 import { Cell, ICellViewModel } from './cell';
 import { ContentPanel, IContentPanelProps } from './contentPanel';
-import { HeaderPanel, IHeaderPanelProps } from './headerPanel';
 import { InputHistory } from './inputHistory';
 import { IntellisenseProvider } from './intellisenseProvider';
 import { createCellVM, createEditableCellVM, extractInputText, generateTestState, IMainPanelState } from './mainPanelState';
 import { initializeTokenizer, registerMonacoLanguage } from './tokenizer';
+import { IToolbarPanelProps, ToolbarPanel } from './toolbarPanel';
 import { VariableExplorer } from './variableExplorer';
+import { IVariablePanelProps, VariablePanel } from './variablePanel';
 
 import './mainPanel.css';
 
@@ -171,8 +172,11 @@ export class MainPanel extends React.Component<IMainPanelProps, IMainPanelState>
                     darkChanged={this.darkChanged}
                     monacoThemeChanged={this.monacoThemeChanged}
                     ref={this.styleInjectorRef} />
-                <div id='main-panel-header'>
-                    {this.renderHeaderPanel(baseTheme)}
+                <div id='main-panel-toolbar'>
+                    {this.renderToolbarPanel(baseTheme)}
+                </div>
+                <div id='main-panel-variable'>
+                    {this.renderVariablePanel(baseTheme)}
                 </div>
                 <div id='main-panel-content'>
                     {this.renderContentPanel(baseTheme)}
@@ -287,9 +291,19 @@ export class MainPanel extends React.Component<IMainPanelProps, IMainPanelState>
     //     this.addCell(cell);
     // }
 
-    private renderHeaderPanel(baseTheme: string) {
-        const headerProps = this.getHeaderProps(baseTheme);
-        return <HeaderPanel {...headerProps} />;
+    //private renderHeaderPanel(baseTheme: string) {
+        //const headerProps = this.getHeaderProps(baseTheme);
+        //return <HeaderPanel {...headerProps} />;
+    //}
+
+    private renderToolbarPanel(baseTheme: string) {
+        const toolbarProps = this.getToolbarProps(baseTheme);
+        return <ToolbarPanel {...toolbarProps} />;
+    }
+
+    private renderVariablePanel(baseTheme: string) {
+        const variableProps = this.getVariableProps(baseTheme);
+        return <VariablePanel {...variableProps} />;
     }
 
     private renderContentPanel(baseTheme: string) {
@@ -432,7 +446,7 @@ export class MainPanel extends React.Component<IMainPanelProps, IMainPanelState>
             onCodeChange: this.codeChange
         };
     }
-    private getHeaderProps = (baseTheme: string): IHeaderPanelProps => {
+    private getToolbarProps = (baseTheme: string): IToolbarPanelProps => {
        return {
         addMarkdown: this.addMarkdown,
         busy: this.state.busy,
@@ -445,17 +459,22 @@ export class MainPanel extends React.Component<IMainPanelProps, IMainPanelState>
         redo: this.redo,
         clearAll: this.clearAll,
         skipDefault: this.props.skipDefault,
-        showDataExplorer: this.showDataViewer,
         testMode: this.props.testMode,
-        variableExplorerRef: this.variableExplorerRef,
         canCollapseAll: this.canCollapseAll(),
         canExpandAll: this.canExpandAll(),
         canExport: this.canExport(),
         canUndo: this.canUndo(),
         canRedo: this.canRedo(),
+        baseTheme: baseTheme
+       };
+    }
+
+    private getVariableProps = (baseTheme: string): IVariablePanelProps => {
+       return {
+        showDataExplorer: this.showDataViewer,
+        variableExplorerRef: this.variableExplorerRef,
         refreshVariables: this.refreshVariables,
         variableExplorerToggled: this.variableExplorerToggled,
-        //onHeightChange: this.onHeaderHeightChange,
         baseTheme: baseTheme
        };
     }
diff --git a/src/datascience-ui/history-react/contentPanel.css b/src/datascience-ui/history-react/contentPanel.css
index 5addb281e286..39035c3cba44 100644
--- a/src/datascience-ui/history-react/contentPanel.css
+++ b/src/datascience-ui/history-react/contentPanel.css
@@ -1,7 +1,7 @@
-#content-panel-div {
+/* #content-panel-div {
     height: 100%;
     overflow: auto;
-}
+} */
 
 #cell-table {
     display: table;
diff --git a/src/datascience-ui/history-react/contentPanel.tsx b/src/datascience-ui/history-react/contentPanel.tsx
index 7d6e1be7c602..6a7cb5d86bb8 100644
--- a/src/datascience-ui/history-react/contentPanel.tsx
+++ b/src/datascience-ui/history-react/contentPanel.tsx
@@ -44,6 +44,16 @@ export class ContentPanel extends React.Component<IContentPanelProps> {
     }
 
     public render() {
+        //return(
+            //<div id='content-panel-div'>
+                //<div id='cell-table'>
+                    //<div id='cell-table-body'>
+                        //{this.renderCells()}
+                    //</div>
+                //</div>
+                //<div ref={this.updateBottom}/>
+            //</div>
+        //);
         return(
             <div id='content-panel-div'>
                 <div id='cell-table'>
diff --git a/src/datascience-ui/history-react/headerPanel.css b/src/datascience-ui/history-react/headerPanel.css
deleted file mode 100644
index 7d8bf7626afd..000000000000
--- a/src/datascience-ui/history-react/headerPanel.css
+++ /dev/null
@@ -1,3 +0,0 @@
-#header-panel-div {
-    height: auto;
-}
\ No newline at end of file
diff --git a/src/datascience-ui/history-react/mainPanel.css b/src/datascience-ui/history-react/mainPanel.css
index 09579be0c1d4..8093846b0ee6 100644
--- a/src/datascience-ui/history-react/mainPanel.css
+++ b/src/datascience-ui/history-react/mainPanel.css
@@ -8,35 +8,32 @@ body, html {
     overflow: hidden;
 }
 
-/*#main-panel {
-    background: var(--override-background, var(--vscode-editor-background));
-    color: var(--override-foreground, var(--vscode-editor-foreground));
-    height: 100%;
-    width: 100%;
-    overflow: hidden;
-    display: table;
-}*/
-
 #main-panel {
     background: var(--override-background, var(--vscode-editor-background));
     color: var(--override-foreground, var(--vscode-editor-foreground));
-    height: 100%;
-    width: 100%;
-    overflow: hidden;
     display: grid;
-    grid-template-rows: auto 1fr auto;
+    grid-template-rows: auto auto 1fr auto;
     grid-template-columns: 1fr;
     grid-template-areas:
-    "header"
+    "toolbar"
+    "variable"
     "content"
     "footer";
     height: 100%;
     width: 100%;
     position: absolute;
+    overflow: hidden;
 }
 
-#main-panel-header {
-    grid-area: header;
+#main-panel-toolbar {
+    grid-area: toolbar;
+    justify-self: end;
+    overflow: hidden;
+}
+
+#main-panel-variable {
+    grid-area: variable;
+    overflow: auto;
 }
 #main-panel-content {
     grid-area: content;
@@ -45,6 +42,7 @@ body, html {
 }
 #main-panel-footer {
     grid-area: footer;
+    overflow: hidden;
 }
 
 .hide {
diff --git a/src/datascience-ui/history-react/toolbarPanel.css b/src/datascience-ui/history-react/toolbarPanel.css
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/src/datascience-ui/history-react/headerPanel.tsx b/src/datascience-ui/history-react/toolbarPanel.tsx
similarity index 77%
rename from src/datascience-ui/history-react/headerPanel.tsx
rename to src/datascience-ui/history-react/toolbarPanel.tsx
index 8852ae4c44b6..f19bab2b098f 100644
--- a/src/datascience-ui/history-react/headerPanel.tsx
+++ b/src/datascience-ui/history-react/toolbarPanel.tsx
@@ -1,10 +1,9 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT License.
 'use strict';
-import './headerPanel.css';
+import './toolbarPanel.css';
 
 import * as React from 'react';
-//import * as ReactDOM from 'react-dom';
 
 import { getLocString } from '../react-common/locReactSide';
 import { Progress } from '../react-common/progress';
@@ -12,9 +11,8 @@ import { getSettings } from '../react-common/settingsReactSide';
 import { CellButton } from './cellButton';
 import { Image, ImageName } from './image';
 import { MenuBar } from './menuBar';
-import { VariableExplorer } from './variableExplorer';
 
-export interface IHeaderPanelProps {
+export interface IToolbarPanelProps {
     baseTheme: string;
     busy: boolean;
     canCollapseAll: boolean;
@@ -24,7 +22,6 @@ export interface IHeaderPanelProps {
     canRedo: boolean;
     skipDefault?: boolean;
     testMode?: boolean;
-    variableExplorerRef: React.RefObject<VariableExplorer>;
     addMarkdown(): void;
     collapseAll(): void;
     expandAll(): void;
@@ -34,21 +31,17 @@ export interface IHeaderPanelProps {
     undo(): void;
     redo(): void;
     clearAll(): void;
-    showDataExplorer(targetVariable: string): void;
-    refreshVariables(): void;
-    variableExplorerToggled(open: boolean): void;
-    //onHeightChange(newHeight: number): void;
 }
 
-export class HeaderPanel extends React.Component<IHeaderPanelProps> {
-    constructor(prop: IHeaderPanelProps) {
+export class ToolbarPanel extends React.Component<IToolbarPanelProps> {
+    constructor(prop: IToolbarPanelProps) {
         super(prop);
     }
 
     public render() {
         const progressBar = this.props.busy && !this.props.testMode ? <Progress /> : undefined;
         return(
-            <div id='header-panel-div'>
+            <div id='toolbar-panel'>
                 <MenuBar baseTheme={this.props.baseTheme}>
                     {this.renderExtraButtons()}
                     <CellButton baseTheme={this.props.baseTheme} onClick={this.props.collapseAll} disabled={!this.props.canCollapseAll} tooltip={getLocString('DataScience.collapseAll', 'Collapse all cell inputs')}>
@@ -77,25 +70,10 @@ export class HeaderPanel extends React.Component<IHeaderPanelProps> {
                     </CellButton>
                 </MenuBar>
                 {progressBar}
-                <VariableExplorer baseTheme={this.props.baseTheme}
-                 showDataExplorer={this.props.showDataExplorer}
-                 refreshVariables={this.props.refreshVariables}
-                 //onHeightChange={this.onVariableHeightChange}
-                 variableExplorerToggled={this.props.variableExplorerToggled}
-                 ref={this.props.variableExplorerRef} />
             </div>
         );
     }
 
-    //private onVariableHeightChange = () => {
-        //const divElement = ReactDOM.findDOMNode(this) as HTMLDivElement;
-
-        //if (divElement) {
-            //const computeHeight = divElement.offsetHeight;
-            //this.props.onHeightChange(computeHeight);
-        //}
-    //}
-
     private renderExtraButtons = () => {
         if (!this.props.skipDefault) {
             const baseTheme = getSettings().ignoreVscodeTheme ? 'vscode-light' : this.props.baseTheme;
diff --git a/src/datascience-ui/history-react/variablePanel.css b/src/datascience-ui/history-react/variablePanel.css
new file mode 100644
index 000000000000..a8a1b8a39932
--- /dev/null
+++ b/src/datascience-ui/history-react/variablePanel.css
@@ -0,0 +1,8 @@
+/*#header-panel-div {
+    height: auto;
+}*/
+
+#variable-divider {
+    width: 100%;
+    border-bottom: 2px solid magenta;    
+}
\ No newline at end of file
diff --git a/src/datascience-ui/history-react/variablePanel.tsx b/src/datascience-ui/history-react/variablePanel.tsx
new file mode 100644
index 000000000000..0a32c6bfdb53
--- /dev/null
+++ b/src/datascience-ui/history-react/variablePanel.tsx
@@ -0,0 +1,35 @@
+// Copyright (c) Microsoft Corporation. All rights reserved.
+// Licensed under the MIT License.
+'use strict';
+import './variablePanel.css';
+
+import * as React from 'react';
+
+import { VariableExplorer } from './variableExplorer';
+
+export interface IVariablePanelProps {
+    baseTheme: string;
+    variableExplorerRef: React.RefObject<VariableExplorer>;
+    showDataExplorer(targetVariable: string): void;
+    refreshVariables(): void;
+    variableExplorerToggled(open: boolean): void;
+}
+
+export class VariablePanel extends React.Component<IVariablePanelProps> {
+    constructor(prop: IVariablePanelProps) {
+        super(prop);
+    }
+
+    public render() {
+        return(
+                <div id='variable-panel'>
+                    <VariableExplorer baseTheme={this.props.baseTheme}
+                    showDataExplorer={this.props.showDataExplorer}
+                    refreshVariables={this.props.refreshVariables}
+                    variableExplorerToggled={this.props.variableExplorerToggled}
+                    ref={this.props.variableExplorerRef} />
+                    <div id='variable-divider'/>
+                </div>
+        );
+    }
+}

From bd6d02de9a9d83c90c421782a4af1f1c19f73e74 Mon Sep 17 00:00:00 2001
From: Ian Huff <ian.huff@gmail.com>
Date: Fri, 24 May 2019 09:04:44 -0700
Subject: [PATCH 3/7] some cleanup done

---
 .../history-react/MainPanel.tsx               |  5 ---
 .../history-react/contentPanel.css            |  5 ---
 .../history-react/contentPanel.tsx            | 10 ------
 .../history-react/mainPanel.css               | 33 +------------------
 .../history-react/mainPanelState.ts           |  1 -
 .../history-react/variableExplorer.tsx        | 20 -----------
 .../history-react/variablePanel.css           |  8 ++---
 7 files changed, 4 insertions(+), 78 deletions(-)

diff --git a/src/datascience-ui/history-react/MainPanel.tsx b/src/datascience-ui/history-react/MainPanel.tsx
index 0c8c614ebb3f..dd958e7ecedb 100644
--- a/src/datascience-ui/history-react/MainPanel.tsx
+++ b/src/datascience-ui/history-react/MainPanel.tsx
@@ -384,11 +384,6 @@ export class MainPanel extends React.Component<IMainPanelProps, IMainPanelState>
         return {};
     }
 
-    // Called by the header control when size changes (such as expanding variables)
-    //private onHeaderHeightChange = (newHeight: number) => {
-        ////this.setState({contentTop: newHeight});
-    //}
-
     private darkChanged = (newDark: boolean) => {
         // update our base theme if allowed. Don't do this
         // during testing as it will mess up the expected render count.
diff --git a/src/datascience-ui/history-react/contentPanel.css b/src/datascience-ui/history-react/contentPanel.css
index 39035c3cba44..1b93b248a7ca 100644
--- a/src/datascience-ui/history-react/contentPanel.css
+++ b/src/datascience-ui/history-react/contentPanel.css
@@ -1,8 +1,3 @@
-/* #content-panel-div {
-    height: 100%;
-    overflow: auto;
-} */
-
 #cell-table {
     display: table;
     width: 100%;
diff --git a/src/datascience-ui/history-react/contentPanel.tsx b/src/datascience-ui/history-react/contentPanel.tsx
index 6a7cb5d86bb8..7d6e1be7c602 100644
--- a/src/datascience-ui/history-react/contentPanel.tsx
+++ b/src/datascience-ui/history-react/contentPanel.tsx
@@ -44,16 +44,6 @@ export class ContentPanel extends React.Component<IContentPanelProps> {
     }
 
     public render() {
-        //return(
-            //<div id='content-panel-div'>
-                //<div id='cell-table'>
-                    //<div id='cell-table-body'>
-                        //{this.renderCells()}
-                    //</div>
-                //</div>
-                //<div ref={this.updateBottom}/>
-            //</div>
-        //);
         return(
             <div id='content-panel-div'>
                 <div id='cell-table'>
diff --git a/src/datascience-ui/history-react/mainPanel.css b/src/datascience-ui/history-react/mainPanel.css
index 8093846b0ee6..6657611f76dc 100644
--- a/src/datascience-ui/history-react/mainPanel.css
+++ b/src/datascience-ui/history-react/mainPanel.css
@@ -60,35 +60,4 @@ body, html {
     border-top-color: var(--override-widget-background, var(--vscode-editorGroupHeader-tabsBackground));
     border-top-style: solid;
     border-top-width: 1px;
-}
-/*
-.main-panel-header, .main-panel-content, .main-panel-footer {
-    display: table-row;
-}
-
-.main-panel-inner {
-    display: table-cell;
-}
-
-.main-panel-inner-relative {
-    height: 100%;
-    position: relative;
-}
-
- .main-panel-content .main-panel-inner {
-    height: 100%;
-    position: relative;
-}
-
-.main-panel-header .main-panel-inner {
-    height: 100%;
-    position: relative;
-} 
-
-.main-panel-scrollable {
-    position: absolute;
-    left: 0; right: 0;
-    top: 0; bottom: 0;
-    overflow-y: auto;
-    overflow-x: none;
-} */
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/src/datascience-ui/history-react/mainPanelState.ts b/src/datascience-ui/history-react/mainPanelState.ts
index 44a8877c5d21..30ff41059e90 100644
--- a/src/datascience-ui/history-react/mainPanelState.ts
+++ b/src/datascience-ui/history-react/mainPanelState.ts
@@ -56,7 +56,6 @@ export function generateTestState(inputBlockToggled : (id: string) => void, file
         redoStack : [],
         submittedText: false,
         history: new InputHistory(),
-        //contentTop: 24,
         rootStyle: darkStyle,
         tokenizerLoaded: true,
         editorOptions: {}
diff --git a/src/datascience-ui/history-react/variableExplorer.tsx b/src/datascience-ui/history-react/variableExplorer.tsx
index 77ad1fe1ede3..bf6869ad6ca4 100644
--- a/src/datascience-ui/history-react/variableExplorer.tsx
+++ b/src/datascience-ui/history-react/variableExplorer.tsx
@@ -126,14 +126,8 @@ export class VariableExplorer extends React.Component<IVariableExplorerProps, IV
                 this.setState({fontSize: newFontSize});
             }
         }
-
-        //this.updateHeight();
     }
 
-    //public componentDidUpdate = () => {
-        //this.updateHeight();
-    //}
-
     // New variable data passed in via a ref
     // Help to keep us independent of main history window state if we choose to break out the variable explorer
     public newVariablesData(newVariables: IJupyterVariable[]) {
@@ -291,20 +285,6 @@ export class VariableExplorer extends React.Component<IVariableExplorerProps, IV
         }
     }
 
-    //private updateHeight = () => {
-        //// Make sure we check for a new height so we don't get into an update loop
-        //const divElement = ReactDOM.findDOMNode(this) as HTMLDivElement;
-
-        //if (divElement) {
-            //const newHeight = divElement.offsetHeight;
-
-            //if (this.state.height !== newHeight) {
-                //this.setState({height: newHeight});
-                //this.props.onHeightChange();
-            //}
-        //}
-    //}
-
     private getRow = (index: number) => {
         if (index >= 0 && index < this.state.gridRows.length) {
             return this.state.gridRows[index];
diff --git a/src/datascience-ui/history-react/variablePanel.css b/src/datascience-ui/history-react/variablePanel.css
index a8a1b8a39932..4ccb8f2e72af 100644
--- a/src/datascience-ui/history-react/variablePanel.css
+++ b/src/datascience-ui/history-react/variablePanel.css
@@ -1,8 +1,6 @@
-/*#header-panel-div {
-    height: auto;
-}*/
-
 #variable-divider {
     width: 100%;
-    border-bottom: 2px solid magenta;    
+    border-top-color: var(--override-badge-background, var(--vscode-badge-background));
+    border-top-style: solid;
+    border-top-width: 2px;
 }
\ No newline at end of file

From 7c4efdf36f79a4ba3536df8c39ea904d8936b585 Mon Sep 17 00:00:00 2001
From: Ian Huff <ian.huff@gmail.com>
Date: Fri, 24 May 2019 09:12:53 -0700
Subject: [PATCH 4/7] more cleanup

---
 .../history-react/MainPanel.tsx               | 40 -------------------
 .../history-react/mainPanelState.ts           |  1 -
 .../history-react/variableExplorer.tsx        |  2 -
 3 files changed, 43 deletions(-)

diff --git a/src/datascience-ui/history-react/MainPanel.tsx b/src/datascience-ui/history-react/MainPanel.tsx
index dd958e7ecedb..69cfca434f94 100644
--- a/src/datascience-ui/history-react/MainPanel.tsx
+++ b/src/datascience-ui/history-react/MainPanel.tsx
@@ -63,7 +63,6 @@ export class MainPanel extends React.Component<IMainPanelProps, IMainPanelState>
             redoStack : [],
             submittedText: false,
             history: new InputHistory(),
-            //contentTop: 24,
             editCellVM: getSettings && getSettings().allowInput ? createEditableCellVM(1) : undefined,
             editorOptions: this.computeEditorOptions()
         };
@@ -131,39 +130,6 @@ export class MainPanel extends React.Component<IMainPanelProps, IMainPanelState>
 
         const baseTheme = this.computeBaseTheme();
 
-        //return (
-            //<div id='main-panel' ref={this.updateSelf}>
-                //<StyleInjector
-                    //expectingDark={baseTheme !== 'vscode-light'}
-                    //postOffice={this.postOffice}
-                    //darkChanged={this.darkChanged}
-                    //monacoThemeChanged={this.monacoThemeChanged}
-                    //ref={this.styleInjectorRef} />
-                //<div className='main-panel-header'>
-                    //<div className='main-panel-inner'>
-                    //<div className='main-panel-inner-relative'>
-                    //<div className='main-panel-scrollable'>
-                        //{this.renderHeaderPanel(baseTheme)}
-                        //</div>
-                        //</div>
-                    //</div>
-                //</div>
-                //<div className='main-panel-content'>
-                    //<div className='main-panel-inner'>
-                    //<div className='main-panel-inner-relative'>
-                        //<div className='main-panel-scrollable'>
-                            //{this.renderContentPanel(baseTheme)}
-                        //</div>
-                    //</div>
-                    //</div>
-                //</div>
-                //<div className='main-panel-footer'>
-                    //<div className='main-panel-inner'>
-                        //{this.renderFooterPanel(baseTheme)}
-                    //</div>
-                //</div>
-            //</div>
-        //);
         return (
             <div id='main-panel' ref={this.updateSelf}>
                 <StyleInjector
@@ -291,11 +257,6 @@ export class MainPanel extends React.Component<IMainPanelProps, IMainPanelState>
     //     this.addCell(cell);
     // }
 
-    //private renderHeaderPanel(baseTheme: string) {
-        //const headerProps = this.getHeaderProps(baseTheme);
-        //return <HeaderPanel {...headerProps} />;
-    //}
-
     private renderToolbarPanel(baseTheme: string) {
         const toolbarProps = this.getToolbarProps(baseTheme);
         return <ToolbarPanel {...toolbarProps} />;
@@ -427,7 +388,6 @@ export class MainPanel extends React.Component<IMainPanelProps, IMainPanelState>
         return {
             editorOptions: this.state.editorOptions,
             baseTheme: baseTheme,
-            //contentTop: this.state.contentTop,
             cellVMs: this.state.cellVMs,
             history: this.state.history,
             testMode: this.props.testMode,
diff --git a/src/datascience-ui/history-react/mainPanelState.ts b/src/datascience-ui/history-react/mainPanelState.ts
index 30ff41059e90..430def1f65a8 100644
--- a/src/datascience-ui/history-react/mainPanelState.ts
+++ b/src/datascience-ui/history-react/mainPanelState.ts
@@ -23,7 +23,6 @@ export interface IMainPanelState {
     redoStack : ICellViewModel[][];
     submittedText: boolean;
     history: InputHistory;
-    //contentTop: number;
     rootStyle?: string;
     theme?: string;
     forceDark?: boolean;
diff --git a/src/datascience-ui/history-react/variableExplorer.tsx b/src/datascience-ui/history-react/variableExplorer.tsx
index bf6869ad6ca4..414f8d48cdb1 100644
--- a/src/datascience-ui/history-react/variableExplorer.tsx
+++ b/src/datascience-ui/history-react/variableExplorer.tsx
@@ -4,7 +4,6 @@
 import './variableExplorer.css';
 
 import * as React from 'react';
-//import * as ReactDOM from 'react-dom';
 
 import { IJupyterVariable } from '../../client/datascience/types';
 import { getLocString } from '../react-common/locReactSide';
@@ -21,7 +20,6 @@ import './variableExplorerGrid.less';
 interface IVariableExplorerProps {
     baseTheme: string;
     refreshVariables(): void;
-    //onHeightChange(): void;
     showDataExplorer(targetVariable: string): void;
     variableExplorerToggled(open: boolean): void;
 }

From 90a09808eee656e15cc100892c0b059a8884968d Mon Sep 17 00:00:00 2001
From: Ian Huff <ian.huff@gmail.com>
Date: Fri, 24 May 2019 09:17:18 -0700
Subject: [PATCH 5/7] move cylon from toolbar to variable explorer

---
 src/datascience-ui/history-react/MainPanel.tsx     | 4 ++--
 src/datascience-ui/history-react/toolbarPanel.tsx  | 5 -----
 src/datascience-ui/history-react/variablePanel.tsx | 5 +++++
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/datascience-ui/history-react/MainPanel.tsx b/src/datascience-ui/history-react/MainPanel.tsx
index 69cfca434f94..3e293a81871b 100644
--- a/src/datascience-ui/history-react/MainPanel.tsx
+++ b/src/datascience-ui/history-react/MainPanel.tsx
@@ -404,7 +404,6 @@ export class MainPanel extends React.Component<IMainPanelProps, IMainPanelState>
     private getToolbarProps = (baseTheme: string): IToolbarPanelProps => {
        return {
         addMarkdown: this.addMarkdown,
-        busy: this.state.busy,
         collapseAll: this.collapseAll,
         expandAll: this.expandAll,
         export: this.export,
@@ -414,7 +413,6 @@ export class MainPanel extends React.Component<IMainPanelProps, IMainPanelState>
         redo: this.redo,
         clearAll: this.clearAll,
         skipDefault: this.props.skipDefault,
-        testMode: this.props.testMode,
         canCollapseAll: this.canCollapseAll(),
         canExpandAll: this.canExpandAll(),
         canExport: this.canExport(),
@@ -426,7 +424,9 @@ export class MainPanel extends React.Component<IMainPanelProps, IMainPanelState>
 
     private getVariableProps = (baseTheme: string): IVariablePanelProps => {
        return {
+        busy: this.state.busy,
         showDataExplorer: this.showDataViewer,
+        testMode: this.props.testMode,
         variableExplorerRef: this.variableExplorerRef,
         refreshVariables: this.refreshVariables,
         variableExplorerToggled: this.variableExplorerToggled,
diff --git a/src/datascience-ui/history-react/toolbarPanel.tsx b/src/datascience-ui/history-react/toolbarPanel.tsx
index f19bab2b098f..d5f2f46d5d42 100644
--- a/src/datascience-ui/history-react/toolbarPanel.tsx
+++ b/src/datascience-ui/history-react/toolbarPanel.tsx
@@ -6,7 +6,6 @@ import './toolbarPanel.css';
 import * as React from 'react';
 
 import { getLocString } from '../react-common/locReactSide';
-import { Progress } from '../react-common/progress';
 import { getSettings } from '../react-common/settingsReactSide';
 import { CellButton } from './cellButton';
 import { Image, ImageName } from './image';
@@ -14,14 +13,12 @@ import { MenuBar } from './menuBar';
 
 export interface IToolbarPanelProps {
     baseTheme: string;
-    busy: boolean;
     canCollapseAll: boolean;
     canExpandAll: boolean;
     canExport: boolean;
     canUndo: boolean;
     canRedo: boolean;
     skipDefault?: boolean;
-    testMode?: boolean;
     addMarkdown(): void;
     collapseAll(): void;
     expandAll(): void;
@@ -39,7 +36,6 @@ export class ToolbarPanel extends React.Component<IToolbarPanelProps> {
     }
 
     public render() {
-        const progressBar = this.props.busy && !this.props.testMode ? <Progress /> : undefined;
         return(
             <div id='toolbar-panel'>
                 <MenuBar baseTheme={this.props.baseTheme}>
@@ -69,7 +65,6 @@ export class ToolbarPanel extends React.Component<IToolbarPanelProps> {
                         <Image baseTheme={this.props.baseTheme} class='cell-button-image' image={ImageName.Cancel}/>
                     </CellButton>
                 </MenuBar>
-                {progressBar}
             </div>
         );
     }
diff --git a/src/datascience-ui/history-react/variablePanel.tsx b/src/datascience-ui/history-react/variablePanel.tsx
index 0a32c6bfdb53..7e3bcb7d456e 100644
--- a/src/datascience-ui/history-react/variablePanel.tsx
+++ b/src/datascience-ui/history-react/variablePanel.tsx
@@ -5,10 +5,13 @@ import './variablePanel.css';
 
 import * as React from 'react';
 
+import { Progress } from '../react-common/progress';
 import { VariableExplorer } from './variableExplorer';
 
 export interface IVariablePanelProps {
     baseTheme: string;
+    busy: boolean;
+    testMode?: boolean;
     variableExplorerRef: React.RefObject<VariableExplorer>;
     showDataExplorer(targetVariable: string): void;
     refreshVariables(): void;
@@ -21,8 +24,10 @@ export class VariablePanel extends React.Component<IVariablePanelProps> {
     }
 
     public render() {
+        const progressBar = this.props.busy && !this.props.testMode ? <Progress /> : undefined;
         return(
                 <div id='variable-panel'>
+                    {progressBar}
                     <VariableExplorer baseTheme={this.props.baseTheme}
                     showDataExplorer={this.props.showDataExplorer}
                     refreshVariables={this.props.refreshVariables}

From 83b6d614b337bf86155d9a11af26c97f3e950760 Mon Sep 17 00:00:00 2001
From: Ian Huff <ian.huff@gmail.com>
Date: Fri, 24 May 2019 09:27:30 -0700
Subject: [PATCH 6/7] add news

---
 news/1 Enhancements/5389.md | 1 +
 news/2 Fixes/5734.md        | 1 +
 2 files changed, 2 insertions(+)
 create mode 100644 news/1 Enhancements/5389.md
 create mode 100644 news/2 Fixes/5734.md

diff --git a/news/1 Enhancements/5389.md b/news/1 Enhancements/5389.md
new file mode 100644
index 000000000000..347df9673703
--- /dev/null
+++ b/news/1 Enhancements/5389.md	
@@ -0,0 +1 @@
+Add visual separation between the variable explorer and the rest of the Interactive Window content
\ No newline at end of file
diff --git a/news/2 Fixes/5734.md b/news/2 Fixes/5734.md
new file mode 100644
index 000000000000..c031a1c02fee
--- /dev/null
+++ b/news/2 Fixes/5734.md	
@@ -0,0 +1 @@
+Fix horizontal scrolling in the Interactive Window
\ No newline at end of file

From 89a4705488f6fa1ce825f745577da63ab4d5e28f Mon Sep 17 00:00:00 2001
From: Ian Huff <ian.huff@gmail.com>
Date: Fri, 24 May 2019 09:30:41 -0700
Subject: [PATCH 7/7] remove old comment

---
 src/datascience-ui/history-react/contentPanel.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/datascience-ui/history-react/contentPanel.tsx b/src/datascience-ui/history-react/contentPanel.tsx
index 7d6e1be7c602..39aeb497d179 100644
--- a/src/datascience-ui/history-react/contentPanel.tsx
+++ b/src/datascience-ui/history-react/contentPanel.tsx
@@ -14,7 +14,6 @@ import { InputHistory } from './inputHistory';
 
 export interface IContentPanelProps {
     baseTheme: string;
-    //contentTop: number;
     cellVMs: ICellViewModel[];
     history: InputHistory;
     testMode?: boolean;