From 52695da2c5445ef27bf866d836ec7b12fad857a0 Mon Sep 17 00:00:00 2001 From: chvmvd Date: Sat, 3 Dec 2022 17:36:39 +0900 Subject: [PATCH 01/16] =?UTF-8?q?ipynb=E3=81=8B=E3=82=89=E7=9B=B4=E6=8E=A5?= =?UTF-8?q?=E5=8F=96=E3=82=8A=E5=87=BA=E3=81=99=E8=A8=AD=E5=AE=9A=E3=81=AB?= =?UTF-8?q?=E3=81=97=E3=81=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/ViewSource/ViewSource.tsx | 91 +++++++++++++++++++----- src/components/ViewSource/styles.css | 15 ---- 2 files changed, 72 insertions(+), 34 deletions(-) delete mode 100644 src/components/ViewSource/styles.css diff --git a/src/components/ViewSource/ViewSource.tsx b/src/components/ViewSource/ViewSource.tsx index 0cb0b397f..d0658f979 100644 --- a/src/components/ViewSource/ViewSource.tsx +++ b/src/components/ViewSource/ViewSource.tsx @@ -1,13 +1,61 @@ import React, { useState, useEffect } from "react"; import CodeBlock from "@theme/CodeBlock"; -import JupyterViewer from "react-jupyter-notebook"; import OpenInColab from "../OpenInColab/OpenInColab"; -import "./styles.css"; -function getSources(json) { - return json.cells - .filter((cell) => cell.cell_type === "code") - .map((cell) => cell.source.join("")); +type MarkdownCell = { cell_type: "markdown"; source: string }; +type CodeCell = { cell_type: "code"; source: string; outputs: string }; +type NotebookData = [...(MarkdownCell | CodeCell)[]]; + +// \n =>
+function getOutputs(outputs): string { + let html = ""; + for (const output of outputs) { + switch (output.output_type) { + case "stream": + html += output.text.join(""); + break; + case "execute_result": + if (output.data["text/plain"] != null) + html += output.data["text/plain"].join(""); + if (output.data["text/html"]) html += output.data["text/html"].join(""); + break; + case "error": + html += output.traceback.join(""); + break; + case "display_data": + if (output.data["text/plain"] != null) + html += output.data["text/plain"].join(""); + if (output.data["text/html"] != null) + html += output.data["text/html"].join(""); + if (output.data["application/javascript"] != null) + html += output.data["application/javascript"]; + if (output.data["image/png"] != null) html += output.data["image/png"]; + break; + } + } + return html; +} + +function getNotebookData(notebook): NotebookData { + const notebookData: NotebookData = []; + for (const cell of notebook.cells) { + switch (cell.cell_type) { + case "markdown": + notebookData.push({ + cell_type: "markdown", + source: cell.source.length === 0 ? null : cell.source.join(""), + }); + break; + case "code": + notebookData.push({ + cell_type: "code", + source: cell.source.length === 0 ? null : cell.source.join(""), + outputs: cell.outputs.length === 0 ? null : getOutputs(cell.outputs), + }); + break; + } + } + return notebookData; } /** @@ -24,30 +72,35 @@ export default function ViewSource({ path: string; noOutput?: boolean; }) { - const [sources, setSources] = useState([]); - const [content, setContent] = useState(); + const [notebookData, setNotebookData] = useState([]); useEffect(() => { fetch(path) .then((response) => response.json()) .then((json) => { - setSources(getSources(json)); - setContent(json); + setNotebookData(getNotebookData(json)); }); }, []); return ( <> - {sources.map((source, i) => ( + {notebookData.map((cell, i) => ( - {source} + {cell.cell_type === "markdown" && cell.source != null && cell.source} + {cell.cell_type === "code" && ( + <> + {cell.source != null && ( + {cell.source} + )} + {!noOutput && cell.outputs != null && ( +