Dev/ianhu/var exp div3

news/1 Enhancements/5389.md

@@ -0,0 +1 @@
+Add visual separation between the variable explorer and the rest of the Interactive Window content

news/2 Fixes/5734.md

@@ -0,0 +1 @@
+Fix horizontal scrolling in the Interactive Window

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';
 
@@ -62,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()
         };
@@ -138,22 +138,17 @@ 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-toolbar'>
+                    {this.renderToolbarPanel(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-variable'>
+                    {this.renderVariablePanel(baseTheme)}
                 </div>
-                <div className='main-panel-footer'>
-                    <div className='main-panel-inner'>
-                        {this.renderFooterPanel(baseTheme)}
-                    </div>
+                <div id='main-panel-content'>
+                    {this.renderContentPanel(baseTheme)}
+                </div>
+                <div id='main-panel-footer'>
+                    {this.renderFooterPanel(baseTheme)}
                 </div>
             </div>
         );
@@ -262,9 +257,14 @@ 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} />;
+    }
+
+    private renderVariablePanel(baseTheme: string) {
+        const variableProps = this.getVariableProps(baseTheme);
+        return <VariablePanel {...variableProps} />;
     }
 
     private renderContentPanel(baseTheme: string) {
@@ -345,11 +345,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.
@@ -393,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,
@@ -407,10 +401,9 @@ 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,
         collapseAll: this.collapseAll,
         expandAll: this.expandAll,
         export: this.export,
@@ -420,17 +413,23 @@ 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 {
+        busy: this.state.busy,
+        showDataExplorer: this.showDataViewer,
+        testMode: this.props.testMode,
+        variableExplorerRef: this.variableExplorerRef,
         refreshVariables: this.refreshVariables,
         variableExplorerToggled: this.variableExplorerToggled,
-        onHeightChange: this.onHeaderHeightChange,
         baseTheme: baseTheme
        };
     }

src/datascience-ui/history-react/contentPanel.css

@@ -1,8 +1,3 @@
-#content-panel-div {
-    height: 100%;
-    overflow: auto;
-}
-
 #cell-table {
     display: table;
     width: 100%;

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;

src/datascience-ui/history-react/mainPanel.css

@@ -11,10 +11,38 @@ body, html {
 #main-panel {
     background: var(--override-background, var(--vscode-editor-background));
     color: var(--override-foreground, var(--vscode-editor-foreground));
+    display: grid;
+    grid-template-rows: auto auto 1fr auto;
+    grid-template-columns: 1fr;
+    grid-template-areas:
+    "toolbar"
+    "variable"
+    "content"
+    "footer";
     height: 100%;
     width: 100%;
+    position: absolute;
+    overflow: hidden;
+}
+
+#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;
+    max-height: 100%;
+    overflow: auto;
+}
+#main-panel-footer {
+    grid-area: footer;
     overflow: hidden;
-    display: table;
 }
 
 .hide {
@@ -32,25 +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-content .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;
 }

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;
@@ -56,7 +55,6 @@ export function generateTestState(inputBlockToggled : (id: string) => void, file
         redoStack : [],
         submittedText: false,
         history: new InputHistory(),
-        contentTop: 24,
         rootStyle: darkStyle,
         tokenizerLoaded: true,
         editorOptions: {}

src/datascience-ui/history-react/headerPanel.tsx → src/datascience-ui/history-react/toolbarPanel.tsx

@@ -1,30 +1,24 @@
 // 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';
 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;
     canExpandAll: boolean;
     canExport: boolean;
     canUndo: boolean;
     canRedo: boolean;
     skipDefault?: boolean;
-    testMode?: boolean;
-    variableExplorerRef: React.RefObject<VariableExplorer>;
     addMarkdown(): void;
     collapseAll(): void;
     expandAll(): void;
@@ -34,21 +28,16 @@ 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')}>
@@ -76,26 +65,10 @@ export class HeaderPanel extends React.Component<IHeaderPanelProps> {
                         <Image baseTheme={this.props.baseTheme} class='cell-button-image' image={ImageName.Cancel}/>
                     </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;

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;
 }
@@ -126,12 +124,6 @@ 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
@@ -291,20 +283,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];

src/datascience-ui/history-react/variablePanel.css

@@ -0,0 +1,6 @@
+#variable-divider {
+    width: 100%;
+    border-top-color: var(--override-badge-background, var(--vscode-badge-background));
+    border-top-style: solid;
+    border-top-width: 2px;
+}