Variable Explorer UI cleanup

news/1 Enhancements/5274.md

@@ -0,0 +1 @@
+Variable explorer UI fixes via PM / designer

package.nls.json

@@ -241,7 +241,7 @@
     "DataScience.variableExplorerTypeColumn": "Type",
     "DataScience.variableExplorerSizeColumn": "Size",
     "DataScience.variableExplorerValueColumn": "Value",
-    "DataScience.showDataExplorerTooltip": "Show variable in data explorer.",
+    "DataScience.showDataExplorerTooltip": "Show variable in data viewer.",
     "DataScience.dataExplorerInvalidVariableFormat": "'{0}' is not an active variable.",
     "DataScience.jupyterGetVariablesExecutionError": "Failure during variable extraction:\r\n{0}",
     "DataScience.loadingMessage": "loading ...",

src/client/common/application/types.ts

@@ -879,6 +879,7 @@ export type WebPanelMessage = {
 // Wraps the VS Code webview panel
 export const IWebPanel = Symbol('IWebPanel');
 export interface IWebPanel {
+    title: string;
     /**
      * Makes the webpanel show up.
      * @return A Promise that can be waited on

src/client/common/application/webPanel.ts

@@ -72,6 +72,16 @@ export class WebPanel implements IWebPanel {
         }
     }
 
+    public get title(): string {
+        return this.panel ? this.panel.title : '';
+    }
+
+    public set title(newTitle: string) {
+        if (this.panel) {
+            this.panel.title = newTitle;
+        }
+    }
+
     // tslint:disable-next-line:no-any
     private async load(mainScriptPath: string, embeddedCss?: string, settings?: any) {
         if (this.panel) {

src/client/datascience/data-viewing/dataViewer.ts

@@ -51,6 +51,15 @@ export class DataViewer extends WebViewHost<IDataViewerMapping> implements IData
             // Fill in our variable's beginning data
             this.variable = await this.prepVariable(variable);
 
+            // Create our new title with the variable name
+            let newTitle = `${localize.DataScience.dataExplorerTitle()} - ${variable.name}`;
+            const TRIM_LENGTH = 40;
+            if (newTitle.length > TRIM_LENGTH) {
+                newTitle = `${newTitle.substr(0, TRIM_LENGTH)}...`;
+            }
+
+            super.setTitle(newTitle);
+
             // Then show our web panel. Eventually we need to consume the data
             await super.show(true);
 

src/client/datascience/webViewHost.ts

@@ -87,6 +87,12 @@ export class WebViewHost<IMapping> implements IDisposable {
         }
     }
 
+    public setTitle(newTitle: string) {
+        if (!this.isDisposed && this.webPanel) {
+            this.webPanel.title = newTitle;
+        }
+    }
+
     //tslint:disable-next-line:no-any
     protected onMessage(message: string, payload: any) {
         switch (message) {

src/datascience-ui/history-react/image.tsx

@@ -15,6 +15,7 @@ export enum ImageName {
     ExpandAll,
     GoToSourceCode,
     Interrupt,
+    OpenInNewWindow,
     PopIn,
     PopOut,
     Redo,
@@ -51,6 +52,11 @@ const images: { [key: string] : { light: string; dark: string } } = {
             light: require('./images/Interrupt/Interrupt_16x_vscode.svg'),
             dark : require('./images/Interrupt/Interrupt_16x_vscode_dark.svg')
         },
+    OpenInNewWindow:
+        {
+            light: require('./images/OpenInNewWindow/OpenInNewWindow_16x_vscode.svg'),
+            dark : require('./images/OpenInNewWindow/OpenInNewWindow_16x_vscode_dark.svg')
+        },
     PopIn:
         {
             light: require('./images/PopIn/PopIn_16x_vscode.svg'),

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

@@ -2,3 +2,7 @@
     margin: 5px;
     background-color: var(--vscode-editor-background);
 }
+
+#variable-explorer-data-grid {
+    margin: 4px;
+}

src/datascience-ui/history-react/variableExplorer.tsx

@@ -92,6 +92,7 @@ export class VariableExplorer extends React.Component<IVariableExplorerProps, IV
                                 minHeight = {this.state.gridHeight}
                                 headerRowHeight = {this.state.fontSize + 9}
                                 rowHeight = {this.state.fontSize + 9}
+                                onRowDoubleClick = {this.rowDoubleClick}
                             />
                         </div>
                     </div>
@@ -156,6 +157,14 @@ export class VariableExplorer extends React.Component<IVariableExplorerProps, IV
         this.props.variableExplorerToggled(!this.state.open);
     }
 
+    private rowDoubleClick = (_rowIndex: number, row: IGridRow) => {
+        // On row double click, see if data explorer is supported and open it if it is
+        if (row.buttons && row.buttons.supportsDataExplorer !== undefined
+            && row.buttons.name && row.buttons.supportsDataExplorer) {
+            this.props.showDataExplorer(row.buttons.name);
+        }
+    }
+
     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;

src/datascience-ui/history-react/variableExplorerButtonCellFormatter.tsx

@@ -30,8 +30,8 @@ export class VariableExplorerButtonCellFormatter extends React.Component<IVariab
             if (this.props.value.supportsDataExplorer) {
                 return(
                     <div className={className}>
-                        <CellButton baseTheme={this.props.baseTheme} tooltip={getLocString('DataScience.showDataExplorerTooltip', 'Show variable in data explorer.')} onClick={this.onDataExplorerClick}>
-                            <Image baseTheme={this.props.baseTheme} class='cell-button-image' image={ImageName.CollapseAll}/>
+                        <CellButton baseTheme={this.props.baseTheme} tooltip={getLocString('DataScience.showDataExplorerTooltip', 'Show variable in data viewer.')} onClick={this.onDataExplorerClick}>
+                            <Image baseTheme={this.props.baseTheme} class='cell-button-image' image={ImageName.OpenInNewWindow}/>
                         </CellButton>
                     </div>
                 );

src/datascience-ui/history-react/variableExplorerGrid.scss

@@ -13,6 +13,7 @@
 }
 
 #variable-explorer-data-grid .react-grid-Main {
+    font-family: var(--code-font-family);
     background-color: var(--vscode-editor-background);
     color: var(--vscode-editor-foreground);
     outline: none;

types/react-data-grid.d.ts

@@ -252,6 +252,7 @@ declare namespace AdazzleReactDataGrid {
          * @param row object behind the row
          */
         onRowClick?: (rowIdx: number, row: T) => void
+        onRowDoubleClick?: (rowIdx: number, row: T) => void
 
         /**
          * An event function called when a row is expanded with the toggle