Skip to content

Commit

Permalink
Let VSCode translate ascii/terminal characters in output (#12095)
Browse files Browse the repository at this point in the history 
For #10496
  • Loading branch information
@DonJayamanne
DonJayamanne committed Jun 2, 2020
1 parent 1a4acc7 commit 5cef0d9
Show file tree
Hide file tree
Showing 2 changed files with 8 additions and 90 deletions.
86 changes: 4 additions & 82 deletions src/client/datascience/notebook/helpers.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,10 +25,6 @@ import { createCodeCell, createMarkdownCell } from '../../../datascience-ui/comm
import { MARKDOWN_LANGUAGE, PYTHON_LANGUAGE } from '../../common/constants';
import { traceError, traceWarning } from '../../logging';
import { CellState, ICell, INotebookModel } from '../types';
// tslint:disable-next-line: no-var-requires no-require-imports
const ansiToHtml = require('ansi-to-html');
// tslint:disable-next-line: no-var-requires no-require-imports
const ansiRegex = require('ansi-regex');

/**
* Converts a NotebookModel into VSCode friendly format.
Expand Down Expand Up @@ -200,43 +196,14 @@ function isImagePngOrJpegMimeType(mimeType: string) {
return mimeType === 'image/png' || mimeType === 'image/jpeg';
}
function translateStreamOutput(output: nbformat.IStream): CellStreamOutput | CellDisplayOutput {
const text = concatMultilineStringOutput(output.text);
const hasAngleBrackets = text.includes('<');
const hasAnsiChars = ansiRegex().test(text);

if (!hasAngleBrackets && !hasAnsiChars) {
// Plain text output.
return {
outputKind: vscodeNotebookEnums.CellOutputKind.Text,
text
};
}

// Format the output, but ensure we have the plain text output as well.
const richOutput: CellDisplayOutput = {
// Do not return as `CellOutputKind.Text`. VSC will not translate ascii output correctly.
// Instead format the output as rich.
return {
outputKind: vscodeNotebookEnums.CellOutputKind.Rich,
data: {
['text/plain']: text
['text/plain']: concatMultilineStringOutput(output.text)
}
};

if (hasAngleBrackets) {
// Stream output needs to be wrapped in xmp so it
// show literally. Otherwise < chars start a new html element.
richOutput.data['text/html'] = `<xmp>${text}</xmp>`;
}
if (hasAnsiChars) {
// ansiToHtml is different between the tests running and webpack. figure out which one
try {
const ctor = ansiToHtml instanceof Function ? ansiToHtml : ansiToHtml.default;
const converter = new ctor(getAnsiToHtmlOptions());
richOutput.data['text/html'] = converter.toHtml(text);
} catch (ex) {
traceError(`Failed to convert Ansi text to HTML, ${text}`, ex);
}
}

return richOutput;
}
export function translateErrorOutput(output: nbformat.IError): CellErrorOutput {
return {
Expand All @@ -246,48 +213,3 @@ export function translateErrorOutput(output: nbformat.IError): CellErrorOutput {
traceback: output.traceback
};
}

function getAnsiToHtmlOptions(): { fg: string; bg: string; colors: string[] } {
// Here's the default colors for ansiToHtml. We need to use the
// colors from our current theme.
// const colors = {
// 0: '#000',
// 1: '#A00',
// 2: '#0A0',
// 3: '#A50',
// 4: '#00A',
// 5: '#A0A',
// 6: '#0AA',
// 7: '#AAA',
// 8: '#555',
// 9: '#F55',
// 10: '#5F5',
// 11: '#FF5',
// 12: '#55F',
// 13: '#F5F',
// 14: '#5FF',
// 15: '#FFF'
// };
return {
fg: 'var(--vscode-terminal-foreground)',
bg: 'var(--vscode-terminal-background)',
colors: [
'var(--vscode-terminal-ansiBlack)', // 0
'var(--vscode-terminal-ansiBrightRed)', // 1
'var(--vscode-terminal-ansiGreen)', // 2
'var(--vscode-terminal-ansiYellow)', // 3
'var(--vscode-terminal-ansiBrightBlue)', // 4
'var(--vscode-terminal-ansiMagenta)', // 5
'var(--vscode-terminal-ansiCyan)', // 6
'var(--vscode-terminal-ansiBrightBlack)', // 7
'var(--vscode-terminal-ansiWhite)', // 8
'var(--vscode-terminal-ansiRed)', // 9
'var(--vscode-terminal-ansiBrightGreen)', // 10
'var(--vscode-terminal-ansiBrightYellow)', // 11
'var(--vscode-terminal-ansiBlue)', // 12
'var(--vscode-terminal-ansiBrightMagenta)', // 13
'var(--vscode-terminal-ansiBrightCyan)', // 14
'var(--vscode-terminal-ansiBrightWhite)' // 15
]
};
}
12 changes: 4 additions & 8 deletions src/test/datascience/notebook/helpers.unit.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -124,12 +124,12 @@ suite('Data Science - NativeNotebook helpers', () => {
],
[
{
outputKind: vscodeNotebookEnums.CellOutputKind.Text,
text: 'Error'
outputKind: vscodeNotebookEnums.CellOutputKind.Rich,
data: { 'text/plain': 'Error' }
},
{
outputKind: vscodeNotebookEnums.CellOutputKind.Text,
text: 'NoError'
outputKind: vscodeNotebookEnums.CellOutputKind.Rich,
data: { 'text/plain': 'NoError' }
}
]
);
Expand All @@ -147,7 +147,6 @@ suite('Data Science - NativeNotebook helpers', () => {
{
outputKind: vscodeNotebookEnums.CellOutputKind.Rich,
data: {
'text/html': '<span style="color:var(--vscode-terminal-ansiYellow)">✅ </span> Loading\n',
'text/plain': '\u001b[K\u001b[33m✅ \u001b[0m Loading\n'
}
}
Expand All @@ -167,7 +166,6 @@ suite('Data Science - NativeNotebook helpers', () => {
{
outputKind: vscodeNotebookEnums.CellOutputKind.Rich,
data: {
'text/html': '<xmp>1 is < 2</xmp>',
'text/plain': '1 is < 2'
}
}
Expand All @@ -187,8 +185,6 @@ suite('Data Science - NativeNotebook helpers', () => {
{
outputKind: vscodeNotebookEnums.CellOutputKind.Rich,
data: {
'text/html':
'1 is < 2<span style="color:var(--vscode-terminal-ansiYellow)">✅ </span> Loading\n',
'text/plain': '1 is < 2\u001b[K\u001b[33m✅ \u001b[0m Loading\n'
}
}
Expand Down

0 comments on commit 5cef0d9

Please sign in to comment.