From 7d88a7c69ef36732b75c617a84f2057432cf709b Mon Sep 17 00:00:00 2001 From: Ian Huff Date: Fri, 19 Apr 2019 11:03:43 -0700 Subject: [PATCH 1/3] variable explorer UI feedback fixes --- package.nls.json | 2 +- src/client/common/application/types.ts | 1 + src/client/common/application/webPanel.ts | 14 ++++++++++++++ src/client/datascience/data-viewing/dataViewer.ts | 9 +++++++++ src/client/datascience/webViewHost.ts | 8 ++++++++ src/datascience-ui/history-react/image.tsx | 6 ++++++ .../OpenInNewWindow/OpenInNewWindow_16x_vscode.svg | 3 +++ .../OpenInNewWindow_16x_vscode_dark.svg | 3 +++ .../history-react/variableExplorer.css | 4 ++++ .../history-react/variableExplorer.tsx | 9 +++++++++ .../variableExplorerButtonCellFormatter.tsx | 4 ++-- .../history-react/variableExplorerGrid.scss | 1 + types/react-data-grid.d.ts | 1 + 13 files changed, 62 insertions(+), 3 deletions(-) create mode 100644 src/datascience-ui/history-react/images/OpenInNewWindow/OpenInNewWindow_16x_vscode.svg create mode 100644 src/datascience-ui/history-react/images/OpenInNewWindow/OpenInNewWindow_16x_vscode_dark.svg diff --git a/package.nls.json b/package.nls.json index 6592103d2c73..1aff8870fb19 100644 --- a/package.nls.json +++ b/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 ...", diff --git a/src/client/common/application/types.ts b/src/client/common/application/types.ts index c46facabe3d6..efaaf555cc1c 100644 --- a/src/client/common/application/types.ts +++ b/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 diff --git a/src/client/common/application/webPanel.ts b/src/client/common/application/webPanel.ts index 04880a128d70..9ceae637efc5 100644 --- a/src/client/common/application/webPanel.ts +++ b/src/client/common/application/webPanel.ts @@ -72,6 +72,20 @@ export class WebPanel implements IWebPanel { } } + public get title(): string { + if (this.panel) { + return this.panel.title; + } + + return ''; + } + + 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) { diff --git a/src/client/datascience/data-viewing/dataViewer.ts b/src/client/datascience/data-viewing/dataViewer.ts index af6f01f442f2..87854688c574 100644 --- a/src/client/datascience/data-viewing/dataViewer.ts +++ b/src/client/datascience/data-viewing/dataViewer.ts @@ -51,6 +51,15 @@ export class DataViewer extends WebViewHost 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); diff --git a/src/client/datascience/webViewHost.ts b/src/client/datascience/webViewHost.ts index 44ef44e58e84..b1b12d26222a 100644 --- a/src/client/datascience/webViewHost.ts +++ b/src/client/datascience/webViewHost.ts @@ -87,6 +87,14 @@ export class WebViewHost implements IDisposable { } } + public setTitle(newTitle: string) { + if (!this.isDisposed) { + if (this.webPanel) { + this.webPanel.title = newTitle; + } + } + } + //tslint:disable-next-line:no-any protected onMessage(message: string, payload: any) { switch (message) { diff --git a/src/datascience-ui/history-react/image.tsx b/src/datascience-ui/history-react/image.tsx index 4ca80268f649..58400c8a05c3 100644 --- a/src/datascience-ui/history-react/image.tsx +++ b/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'), diff --git a/src/datascience-ui/history-react/images/OpenInNewWindow/OpenInNewWindow_16x_vscode.svg b/src/datascience-ui/history-react/images/OpenInNewWindow/OpenInNewWindow_16x_vscode.svg new file mode 100644 index 000000000000..7eab14a55c69 --- /dev/null +++ b/src/datascience-ui/history-react/images/OpenInNewWindow/OpenInNewWindow_16x_vscode.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/datascience-ui/history-react/images/OpenInNewWindow/OpenInNewWindow_16x_vscode_dark.svg b/src/datascience-ui/history-react/images/OpenInNewWindow/OpenInNewWindow_16x_vscode_dark.svg new file mode 100644 index 000000000000..344b42f15f54 --- /dev/null +++ b/src/datascience-ui/history-react/images/OpenInNewWindow/OpenInNewWindow_16x_vscode_dark.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/datascience-ui/history-react/variableExplorer.css b/src/datascience-ui/history-react/variableExplorer.css index a4d0e014d7c4..4c6ce7d041f1 100644 --- a/src/datascience-ui/history-react/variableExplorer.css +++ b/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; +} \ No newline at end of file diff --git a/src/datascience-ui/history-react/variableExplorer.tsx b/src/datascience-ui/history-react/variableExplorer.tsx index 2b82bf03e3ff..5c7429e2f296 100644 --- a/src/datascience-ui/history-react/variableExplorer.tsx +++ b/src/datascience-ui/history-react/variableExplorer.tsx @@ -92,6 +92,7 @@ export class VariableExplorer extends React.Component @@ -156,6 +157,14 @@ export class VariableExplorer extends React.Component { + // 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; diff --git a/src/datascience-ui/history-react/variableExplorerButtonCellFormatter.tsx b/src/datascience-ui/history-react/variableExplorerButtonCellFormatter.tsx index d40106ed7c0a..d1d37577e84d 100644 --- a/src/datascience-ui/history-react/variableExplorerButtonCellFormatter.tsx +++ b/src/datascience-ui/history-react/variableExplorerButtonCellFormatter.tsx @@ -30,8 +30,8 @@ export class VariableExplorerButtonCellFormatter extends React.Component - - + + ); diff --git a/src/datascience-ui/history-react/variableExplorerGrid.scss b/src/datascience-ui/history-react/variableExplorerGrid.scss index 7bee883ecf6c..4aad0c8ebc53 100644 --- a/src/datascience-ui/history-react/variableExplorerGrid.scss +++ b/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; diff --git a/types/react-data-grid.d.ts b/types/react-data-grid.d.ts index badf7352857e..9f9c9fe87481 100644 --- a/types/react-data-grid.d.ts +++ b/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 From c14e52f960d1a3971eedc1ae98e105e0d4a48214 Mon Sep 17 00:00:00 2001 From: Ian Huff Date: Fri, 19 Apr 2019 11:05:22 -0700 Subject: [PATCH 2/3] add new entry --- news/1 Enhancements/5274.md | 1 + 1 file changed, 1 insertion(+) create mode 100644 news/1 Enhancements/5274.md diff --git a/news/1 Enhancements/5274.md b/news/1 Enhancements/5274.md new file mode 100644 index 000000000000..fcc6a776438b --- /dev/null +++ b/news/1 Enhancements/5274.md @@ -0,0 +1 @@ +Variable explorer UI fixes via PM / designer \ No newline at end of file From 4e5bd3dd3afdea3658a643aa369ec25e507fa1b2 Mon Sep 17 00:00:00 2001 From: Ian Huff Date: Fri, 19 Apr 2019 11:59:07 -0700 Subject: [PATCH 3/3] review feedback --- src/client/common/application/webPanel.ts | 6 +----- src/client/datascience/webViewHost.ts | 6 ++---- 2 files changed, 3 insertions(+), 9 deletions(-) diff --git a/src/client/common/application/webPanel.ts b/src/client/common/application/webPanel.ts index 9ceae637efc5..a3ea5d7b5ac4 100644 --- a/src/client/common/application/webPanel.ts +++ b/src/client/common/application/webPanel.ts @@ -73,11 +73,7 @@ export class WebPanel implements IWebPanel { } public get title(): string { - if (this.panel) { - return this.panel.title; - } - - return ''; + return this.panel ? this.panel.title : ''; } public set title(newTitle: string) { diff --git a/src/client/datascience/webViewHost.ts b/src/client/datascience/webViewHost.ts index b1b12d26222a..ddd95e16de6c 100644 --- a/src/client/datascience/webViewHost.ts +++ b/src/client/datascience/webViewHost.ts @@ -88,10 +88,8 @@ export class WebViewHost implements IDisposable { } public setTitle(newTitle: string) { - if (!this.isDisposed) { - if (this.webPanel) { - this.webPanel.title = newTitle; - } + if (!this.isDisposed && this.webPanel) { + this.webPanel.title = newTitle; } }