Merge pull request #58 from curvenote/feat/streams-to-jp

feat/streams-to-jp

app/myst-to-react/output/jupyter.tsx

@@ -8,7 +8,11 @@ import {
 import { State } from '~/store';
 import { useSelector } from 'react-redux';
 import { host, actions } from '@curvenote/connect';
-import { MinifiedOutput, convertToIOutputs } from '@curvenote/nbtx';
+import {
+  MinifiedOutput,
+  convertToIOutputs,
+  fetchAndEncodeOutputImages,
+} from '@curvenote/nbtx';
 
 export const NativeJupyterOutputs = ({
   id,
@@ -32,10 +36,12 @@ export const NativeJupyterOutputs = ({
 
   useEffect(() => {
     if (iframeRef.current == null || !rendererReady || !data) return;
-    host.commsDispatch(
-      iframeRef.current,
-      actions.connectHostSendContent(uid, convertToIOutputs(data)),
-    );
+    fetchAndEncodeOutputImages(convertToIOutputs(data)).then((outputs) => {
+      host.commsDispatch(
+        iframeRef.current,
+        actions.connectHostSendContent(uid, outputs),
+      );
+    });
   }, [id, iframeRef.current, rendererReady]);
 
   useEffect(() => {

app/myst-to-react/output/output.tsx

@@ -6,29 +6,40 @@ import { SafeOutputs } from './safe';
 import { NativeJupyterOutputs as JupyterOutputs } from './jupyter';
 import { OutputBlock } from './outputBlock';
 
-const DIRECT_OUTPUT_TYPES = new Set(['stream']);
+const DIRECT_OUTPUT_TYPES = new Set([]);
 
 const DIRECT_MIME_TYPES = new Set([
-  KnownCellOutputMimeTypes.TextPlain,
   KnownCellOutputMimeTypes.ImagePng,
   KnownCellOutputMimeTypes.ImageGif,
   KnownCellOutputMimeTypes.ImageJpeg,
   KnownCellOutputMimeTypes.ImageBmp,
 ]) as Set<string>;
 
+function anImageAndPlainTextOnly(directMimeTypes: Set<string>, mimetypes: string[]) {
+  return (
+    mimetypes.length === 2 &&
+    mimetypes.includes('text/plain') &&
+    mimetypes.reduce(
+      (flag: boolean, mt: string) => flag || directMimeTypes.has(mt),
+      false,
+    )
+  );
+}
+
 export function allOutputsAreSafe(
   outputs: MinifiedOutput[],
   directOutputTypes: Set<string>,
   directMimeTypes: Set<string>,
 ) {
   return outputs.reduce((flag, output) => {
+    if (directOutputTypes.has(output.output_type)) return true;
+    const data = (output as MinifiedMimeOutput).data;
+    const mimetypes = data ? Object.keys(data) : [];
     const safe =
-      directOutputTypes.has(output.output_type) ||
-      ('data' in output &&
-        Boolean(output.data) &&
-        Object.keys((output as MinifiedMimeOutput).data).every((mimetype) =>
-          directMimeTypes.has(mimetype),
-        ));
+      'data' in output &&
+      Boolean(output.data) &&
+      (mimetypes.every((mimetype) => directMimeTypes.has(mimetype)) ||
+        anImageAndPlainTextOnly(directMimeTypes, mimetypes));
     return flag && safe;
   }, true);
 }

package.json

@@ -20,7 +20,7 @@
     "@curvenote/blocks": "^1.3.4",
     "@curvenote/components": "^0.3.4",
     "@curvenote/connect": "^0.0.3",
-    "@curvenote/nbtx": "^0.1.6",
+    "@curvenote/nbtx": "^0.1.7",
     "@curvenote/runtime": "^0.2.9",
     "@headlessui/react": "^1.5.0",
     "@heroicons/react": "^1.0.6",