aws-northstar
Version:
NorthStar Design System
142 lines (138 loc) • 9.26 kB
JavaScript
/** *******************************************************************************************************************
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
Licensed under the Apache License, Version 2.0 (the "License").
You may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License. *
******************************************************************************************************************** */
import React, { useMemo } from 'react';
import Grid from '../../layouts/Grid';
import Container from '../../layouts/Container';
import ReactMarkdown from 'react-markdown';
import parse from 'html-react-parser';
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { coy } from 'react-syntax-highlighter/dist/cjs/styles/prism';
import Heading from '../../components/Heading';
import Paper from '../../layouts/Paper';
// cats an array of lines together
const sourceLines = (lines) => lines.join('');
const ansiControlRegex = /[\u001b\u009b][[()#;?]*(?:[0-9]{1,4}(?:;[0-9]{0,4})*)?[0-9A-ORZcf-nqry=><]/g;
const redCellColor = '#FDD';
const greenCellColor = '#DFD';
const plainCellStyle = {
padding: '0',
margin: '0',
border: '1px solid #AAA',
};
const indentedCellStyle = {
padding: '0px 8px 0px 8px',
margin: '0px 0px',
border: '1px solid #AAA',
};
const JupyterNotebookCellRenderTemplate = ({ idColumnContent, bodyColumnContent, bodyColumnStyle, }) => {
return (React.createElement(React.Fragment, null,
React.createElement(Grid, { item: true, xs: 1 }, idColumnContent),
React.createElement(Grid, { item: true, xs: 11 },
React.createElement(Paper, { variant: "outlined", style: bodyColumnStyle }, bodyColumnContent))));
};
// -- renders a cell of type 'markdown'
const JupyterNotebookMarkdownCell = ({ cell, executionCount: execution_count, language, }) => {
return (React.createElement(JupyterNotebookCellRenderTemplate, { idColumnContent: '', bodyColumnContent: React.createElement(ReactMarkdown, { children: sourceLines(cell.source) }), bodyColumnStyle: indentedCellStyle }));
};
// -- renders a cell of type 'heading'
const JupyterNotebookHeadingCell = ({ cell, executionCount: execution_count, language, }) => {
return (React.createElement(JupyterNotebookCellRenderTemplate, { idColumnContent: '', bodyColumnContent: React.createElement(Container, { style: {
marginBottom: '0px',
boxShadow: 'none',
} },
React.createElement(Heading, { variant: "h1" }, cell.source[0])), bodyColumnStyle: indentedCellStyle }));
};
// -- renders a cell of type 'stream'
const JupyterNotebookOutputStreamCell = ({ cell, executionCount, output, language, }) => {
return (React.createElement(JupyterNotebookCellRenderTemplate, { idColumnContent: `Out [${executionCount}]`, bodyColumnContent: React.createElement(ReactMarkdown, { children: '**[' + output.name + ']**\n```\n ' + sourceLines(output.text) + '```' }), bodyColumnStyle: {
padding: '0px 8px 0px 8px',
margin: '0px 0px',
backgroundColor: output.name === 'stderr' ? redCellColor : greenCellColor,
border: '1px solid #AAA',
} }));
};
// -- renders a cell of type 'error'
const JupyterNotebookOutputErrorCell = ({ cell, executionCount, output, language, }) => {
return (React.createElement(JupyterNotebookCellRenderTemplate, { idColumnContent: `In [${executionCount}]`, bodyColumnContent: React.createElement(ReactMarkdown, { children: '**[' +
output.evalue +
']**\n```\n ' +
sourceLines(output.traceback).replace(ansiControlRegex, // strip out ansi control sequences common in output traces
'') +
'\n```' }), bodyColumnStyle: {
padding: '0px 8px 0px 8px',
margin: '0px 0px',
border: '1px solid #AAA',
backgroundColor: redCellColor,
} }));
};
// -- renders various data cell types (html, png, text)
const JupyterNotebookOutputDataCell = ({ cell, executionCount, output, language, }) => {
return (React.createElement(JupyterNotebookCellRenderTemplate, { idColumnContent: `Out [${executionCount}]`, bodyColumnContent: React.createElement(Container, { style: {
marginBottom: '0px',
boxShadow: 'none',
} }, output.data['text/html'] ? (parse(sourceLines(output.data['text/html']), { trim: true })) : output.data['image/png'] ? (React.createElement("img", { src: 'data:image/png;base64,' + output.data['image/png'].replace(/\n/g, ''), alt: 'notebook diagram' })) : output.data['text/plain'] ? (React.createElement(ReactMarkdown, { children: '```\n' + sourceLines(output.data['text/plain']) + '\n```' })) : (React.createElement("b", null, "unknown"))), bodyColumnStyle: plainCellStyle }));
};
// -- helper class used in syntax highlighting the code
const CodeBlock = ({ inline = false, className, children }) => {
const match = /language-(\w+)/.exec(className || '');
const codeLanguage = useMemo(() => {
const langs = ['python', 'java', 'javascript', 'c++', 'typescript', 'objective-c', 'json'];
return langs.find((lang) => { var _a; return (_a = match === null || match === void 0 ? void 0 : match[1]) === null || _a === void 0 ? void 0 : _a.startsWith(lang); }) || 'javascript';
}, [match]);
return (React.createElement(SyntaxHighlighter, { language: codeLanguage, style: coy }, children));
};
// -- renders a cell of type 'code'
const JupyterNotebookCodeCell = ({ cell, executionCount, language }) => {
var _a, _b, _c, _d;
return (React.createElement(React.Fragment, null,
((_b = (_a = cell.metadata) === null || _a === void 0 ? void 0 : _a.jupyter) === null || _b === void 0 ? void 0 : _b.outputs_hidden) ? (React.createElement(React.Fragment, null)) : (React.createElement(JupyterNotebookCellRenderTemplate, { idColumnContent: `In [${executionCount}]`, bodyColumnContent: React.createElement(ReactMarkdown, { components: { code: CodeBlock }, children: '```' + language + '\n\n' + sourceLines(cell.source) + '\n```' }), bodyColumnStyle: plainCellStyle })),
((_d = (_c = cell.metadata) === null || _c === void 0 ? void 0 : _c.jupyter) === null || _d === void 0 ? void 0 : _d.source_hidden) ? (React.createElement(React.Fragment, null)) : (cell.outputs.map((output, outputIdx) => {
if (output.output_type === 'stream') {
return (React.createElement(JupyterNotebookOutputStreamCell, { key: `stream-${executionCount}-${outputIdx}`, cell: cell, executionCount: executionCount, output: output, language: language }));
}
else if (output.output_type === 'execute_result' || output.output_type === 'display_data') {
return (React.createElement(JupyterNotebookOutputDataCell, { key: `exec-${executionCount}-${outputIdx}`, cell: cell, executionCount: executionCount, output: output, language: language }));
}
else if (output.output_type === 'error') {
return (React.createElement(JupyterNotebookOutputErrorCell, { key: `error-${executionCount}-${outputIdx}`, cell: cell, executionCount: executionCount, output: output, language: language }));
}
else {
return React.createElement(React.Fragment, null);
}
}))));
};
// -- router to render the two main input cell types
const JupyterNotebookCell = ({ cell, executionCount, language }) => {
switch (cell.cell_type) {
case 'markdown':
return React.createElement(JupyterNotebookMarkdownCell, { cell: cell, executionCount: executionCount, language: language });
case 'code':
return React.createElement(JupyterNotebookCodeCell, { cell: cell, executionCount: executionCount, language: language });
case 'heading':
return React.createElement(JupyterNotebookHeadingCell, { cell: cell, executionCount: executionCount, language: language });
default:
return React.createElement(React.Fragment, null);
}
};
/**
* Renders a Jupyter Notebook Viewer.
*/
const JupyterNotebook = ({ notebookData }) => {
var _a;
const notebook = JSON.parse(notebookData);
return (React.createElement(Grid, { container: true, spacing: 1, alignItems: "flex-start", alignContent: "flex-start" }, (_a = notebook.cells) === null || _a === void 0 ? void 0 : _a.map((cell, index) => {
var _a;
return (React.createElement(JupyterNotebookCell, { key: `cell-${index}`, cell: cell, executionCount: (_a = cell.execution_count) !== null && _a !== void 0 ? _a : '', language: notebook.metadata.kernelspec.language }));
})));
};
export default JupyterNotebook;