From 0eafe46d05d6ae5914ca8e2ea8a4901346c95bda Mon Sep 17 00:00:00 2001 From: David Kutugata Date: Thu, 31 Oct 2019 15:02:26 -0700 Subject: [PATCH 1/4] made all outputs a single jsx element --- .../interactive-common/cellOutput.tsx | 101 ++++++++++-------- 1 file changed, 55 insertions(+), 46 deletions(-) diff --git a/src/datascience-ui/interactive-common/cellOutput.tsx b/src/datascience-ui/interactive-common/cellOutput.tsx index 5f3450df4147..c5a933baeb07 100644 --- a/src/datascience-ui/interactive-common/cellOutput.tsx +++ b/src/datascience-ui/interactive-common/cellOutput.tsx @@ -345,59 +345,68 @@ export class CellOutput extends React.Component { // tslint:disable-next-line: max-func-body-length private renderOutputs(outputs: nbformat.IOutput[]): JSX.Element[] { - return outputs.map(this.renderOutput); + // return outputs.map(this.renderOutput); + return [this.renderOutput(outputs)]; } - private renderOutput = (output: nbformat.IOutput, index: number): JSX.Element => { - const transformed = this.transformOutput(output); - let mimetype = transformed.mimeType; - - // If that worked, use the transform - if (mimetype) { - // Get the matching React.Component for that mimetype - const Transform = transforms[mimetype]; - - // Create a default set of properties - const style: React.CSSProperties = { - }; - - // Create a scrollbar style if necessary - if (transformed.renderWithScrollbars && this.props.maxTextSize) { - style.overflowX = 'auto'; - style.overflowY = 'auto'; - style.maxHeight = `${this.props.maxTextSize}px`; - } - - let className = transformed.isText ? 'cell-output-text' : 'cell-output-html'; - className = transformed.isError ? `${className} cell-output-error` : className; - - // If we are not theming plots then wrap them in a white span - if (transformed.outputSpanClassName) { - return ( -
- + private renderOutput = (outputs: nbformat.IOutput[]): JSX.Element => { + const buffer: JSX.Element[] = []; + const transformedList: ICellOutput[] = []; + outputs.forEach(output => { + transformedList.push(this.transformOutput(output)); + }); + + transformedList.forEach(transformed => { + let mimetype = transformed.mimeType; + + // If that worked, use the transform + if (mimetype) { + // Get the matching React.Component for that mimetype + const Transform = transforms[mimetype]; + + let className = transformed.isText ? 'cell-output-text' : 'cell-output-html'; + className = transformed.isError ? `${className} cell-output-error` : className; + + // If we are not theming plots then wrap them in a white span + if (transformed.outputSpanClassName) { + buffer.push( +
+ + {transformed.extraButton} + + +
+ ); + } else { + buffer.push( +
{transformed.extraButton} - -
- ); +
+ ); + } + } + + if (transformed.data) { + const keys = Object.keys(transformed.data); + mimetype = keys.length > 0 ? keys[0] : 'unknown'; } else { - return ( -
- {transformed.extraButton} - -
- ); + mimetype = 'unknown'; } - } + const str: string = this.getUnknownMimeTypeFormatString().format(mimetype); + buffer.push(
{str}
); + }); - if (output.data) { - const keys = Object.keys(output.data); - mimetype = keys.length > 0 ? keys[0] : 'unknown'; - } else { - mimetype = 'unknown'; + // Create a default set of properties + const style: React.CSSProperties = { + }; + + // Create a scrollbar style if necessary + if (transformedList.some(transformed => transformed.renderWithScrollbars) && this.props.maxTextSize) { + style.overflowY = 'auto'; + style.maxHeight = `${this.props.maxTextSize}px`; } - const str: string = this.getUnknownMimeTypeFormatString().format(mimetype); - return
{str}
; + + return
{buffer}
; } } From 4c91cc62212130f7b8bb28982ec181709227fb7d Mon Sep 17 00:00:00 2001 From: David Kutugata Date: Thu, 31 Oct 2019 15:39:22 -0700 Subject: [PATCH 2/4] fixed a bug, error with mimetype would show every time --- .../interactive-common/cellOutput.tsx | 22 +++++++++---------- 1 file changed, 10 insertions(+), 12 deletions(-) diff --git a/src/datascience-ui/interactive-common/cellOutput.tsx b/src/datascience-ui/interactive-common/cellOutput.tsx index c5a933baeb07..1c90f90d154b 100644 --- a/src/datascience-ui/interactive-common/cellOutput.tsx +++ b/src/datascience-ui/interactive-common/cellOutput.tsx @@ -351,10 +351,8 @@ export class CellOutput extends React.Component { private renderOutput = (outputs: nbformat.IOutput[]): JSX.Element => { const buffer: JSX.Element[] = []; - const transformedList: ICellOutput[] = []; - outputs.forEach(output => { - transformedList.push(this.transformOutput(output)); - }); + let transformedList: ICellOutput[] = []; + transformedList = outputs.map(this.transformOutput); transformedList.forEach(transformed => { let mimetype = transformed.mimeType; @@ -385,16 +383,16 @@ export class CellOutput extends React.Component { ); } - } - - if (transformed.data) { - const keys = Object.keys(transformed.data); - mimetype = keys.length > 0 ? keys[0] : 'unknown'; } else { - mimetype = 'unknown'; + if (transformed.data) { + const keys = Object.keys(transformed.data); + mimetype = keys.length > 0 ? keys[0] : 'unknown'; + } else { + mimetype = 'unknown'; + } + const str: string = this.getUnknownMimeTypeFormatString().format(mimetype); + buffer.push(
{str}
); } - const str: string = this.getUnknownMimeTypeFormatString().format(mimetype); - buffer.push(
{str}
); }); // Create a default set of properties From 4b2c59fb11ca73910fa2149ee0cb8d639af34e95 Mon Sep 17 00:00:00 2001 From: David Kutugata Date: Thu, 31 Oct 2019 15:50:47 -0700 Subject: [PATCH 3/4] removed 1 useless line --- src/datascience-ui/interactive-common/cellOutput.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/datascience-ui/interactive-common/cellOutput.tsx b/src/datascience-ui/interactive-common/cellOutput.tsx index 1c90f90d154b..959bf4934cab 100644 --- a/src/datascience-ui/interactive-common/cellOutput.tsx +++ b/src/datascience-ui/interactive-common/cellOutput.tsx @@ -351,8 +351,7 @@ export class CellOutput extends React.Component { private renderOutput = (outputs: nbformat.IOutput[]): JSX.Element => { const buffer: JSX.Element[] = []; - let transformedList: ICellOutput[] = []; - transformedList = outputs.map(this.transformOutput); + const transformedList = outputs.map(this.transformOutput); transformedList.forEach(transformed => { let mimetype = transformed.mimeType; From d5c5ce70b2a569dc3db524c85c9d5f0004179f1b Mon Sep 17 00:00:00 2001 From: David Kutugata Date: Fri, 1 Nov 2019 09:47:37 -0700 Subject: [PATCH 4/4] removed useless comment --- src/datascience-ui/interactive-common/cellOutput.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/datascience-ui/interactive-common/cellOutput.tsx b/src/datascience-ui/interactive-common/cellOutput.tsx index 959bf4934cab..7bed5cfffdf3 100644 --- a/src/datascience-ui/interactive-common/cellOutput.tsx +++ b/src/datascience-ui/interactive-common/cellOutput.tsx @@ -345,7 +345,6 @@ export class CellOutput extends React.Component { // tslint:disable-next-line: max-func-body-length private renderOutputs(outputs: nbformat.IOutput[]): JSX.Element[] { - // return outputs.map(this.renderOutput); return [this.renderOutput(outputs)]; }