Merge pull request #35 from curvenote/feat/more-outputs

feat/more outputs

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

@@ -1,6 +1,5 @@
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { useFetchAnyTruncatedContent } from './hooks';
-import { MinifiedOutput } from '@curvenote/nbtx/dist/minify/types';
 import { nanoid } from 'nanoid';
 import {
   selectIFrameReady,
@@ -9,29 +8,7 @@ import {
 import { State } from '~/store';
 import { useSelector } from 'react-redux';
 import { host, actions } from '@curvenote/connect';
-import type { IOutput } from '@jupyterlab/nbformat';
-
-function toIOutputs(minified: MinifiedOutput[]): IOutput[] {
-  return minified.map((m: MinifiedOutput) => {
-    switch (m.output_type) {
-      case 'stream':
-      case 'error': {
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        const { path, ...rest } = m;
-        return rest;
-      }
-      default: {
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        return {
-          ...m,
-          data: Object.entries(m.data).reduce((acc, [mimetype, payload]) => {
-            return { ...acc, [mimetype]: payload.content };
-          }, {}),
-        };
-      }
-    }
-  });
-}
+import { MinifiedOutput, convertToIOutputs } from '@curvenote/nbtx';
 
 export const NativeJupyterOutputs = ({
   id,
@@ -57,7 +34,7 @@ export const NativeJupyterOutputs = ({
     if (iframeRef.current == null || !rendererReady || !data) return;
     host.commsDispatch(
       iframeRef.current,
-      actions.connectHostSendContent(uid, toIOutputs(data)),
+      actions.connectHostSendContent(uid, convertToIOutputs(data)),
     );
   }, [id, iframeRef.current, rendererReady]);
 
@@ -70,15 +47,22 @@ export const NativeJupyterOutputs = ({
     return <div className="text-red-500">Error rendering output: {error.message}</div>;
   }
 
+  if (process.env.NODE_ENV === 'development')
+    console.debug('Output connecting to http://localhost:3003');
+  console.log({ height });
   return (
     <>
-      {loading && <div>Loading...</div>}
+      {loading && <div className="p-2.5">Loading...</div>}
       <iframe
         ref={iframeRef}
         id={uid}
         name={uid}
         title={uid}
-        src="https://next.curvenote.run"
+        src={
+          process.env.NODE_ENV === 'development' // TODO should this be in config.json?
+            ? 'http://localhost:3003'
+            : 'https://next.curvenote.run'
+        }
         width={'100%'}
         height={height ? height + 25 : 0}
         sandbox="allow-scripts"

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

@@ -4,8 +4,9 @@ import { MinifiedMimeOutput, MinifiedOutput } from '@curvenote/nbtx/dist/minify/
 import classNames from 'classnames';
 import { SafeOutputs } from './safe';
 import { NativeJupyterOutputs as JupyterOutputs } from './jupyter';
+import { OutputBlock } from './outputBlock';
 
-const DIRECT_OUTPUT_TYPES = new Set(['stream', 'error']);
+const DIRECT_OUTPUT_TYPES = new Set(['stream']);
 
 const DIRECT_MIME_TYPES = new Set([
   KnownCellOutputMimeTypes.TextPlain,
@@ -32,9 +33,17 @@ export function allOutputsAreSafe(
   }, true);
 }
 
+export function anyErrors(outputs: MinifiedOutput[]) {
+  return outputs.reduce(
+    (flag, output) => flag || output.output_type === 'error',
+    false,
+  );
+}
+
 export function Output(node: GenericNode) {
   const outputs: MinifiedOutput[] = node.data;
   const allSafe = allOutputsAreSafe(outputs, DIRECT_OUTPUT_TYPES, DIRECT_MIME_TYPES);
+  const hasError = anyErrors(outputs);
 
   let component;
   if (allSafe) {
@@ -54,7 +63,9 @@ export function Output(node: GenericNode) {
         'text-right': node.align === 'right',
       })}
     >
-      {component}
+      <OutputBlock allSafe={allSafe} hasError={hasError}>
+        {component}
+      </OutputBlock>
     </figure>
   );
 }

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

@@ -0,0 +1,24 @@
+import classNames from 'classnames';
+
+type Props = {
+  children?: React.ReactNode;
+  allSafe?: boolean;
+  hasError?: boolean;
+  className?: string;
+};
+
+export function OutputBlock(props: Props) {
+  const { children, allSafe, className } = props;
+
+  return (
+    <div
+      suppressHydrationWarning={!allSafe}
+      className={classNames('relative group not-prose overflow-auto mb-8', className, {
+        'p-2.5': allSafe,
+        'pl-0.5': !allSafe,
+      })}
+    >
+      {children}
+    </div>
+  );
+}

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

@@ -1,6 +1,6 @@
 import { KnownCellOutputMimeTypes } from '@curvenote/blocks/dist/blocks/types/jupyter';
 import { ensureString } from '@curvenote/blocks/dist/helpers';
-import {
+import type {
   MinifiedMimeBundle,
   MinifiedMimePayload,
   MinifiedOutput,
@@ -30,7 +30,10 @@ const RENDER_PRIORITY = [
   KnownCellOutputMimeTypes.ImageBmp,
 ];
 
-function OutputImage({ output }: { output: MinifiedOutput }) {
+function findSafeMimeOutputs(output: MinifiedOutput): {
+  image?: MinifiedMimePayload;
+  text?: MinifiedMimePayload;
+} {
   const data: MinifiedMimeBundle = output.data as MinifiedMimeBundle;
   const image = RENDER_PRIORITY.reduce(
     (acc: MinifiedMimePayload | undefined, mimetype) => {
@@ -39,8 +42,17 @@ function OutputImage({ output }: { output: MinifiedOutput }) {
     },
     undefined,
   );
-  if (!data || !image) return null;
-  const text = data['text/plain'];
+  const text = data && data['text/plain'];
+  return { image, text };
+}
+
+function OutputImage({
+  image,
+  text,
+}: {
+  image: MinifiedMimePayload;
+  text?: MinifiedMimePayload;
+}) {
   return <img src={image?.path} alt={text?.content ?? 'Image produced in Jupyter'} />;
 }
 
@@ -51,21 +63,18 @@ function SafeOutput({ output }: { output: MinifiedOutput }) {
         <MaybeLongContent
           content={ensureString(output.text)}
           path={output.path}
-          render={(content?: string) => <pre>{content}</pre>}
-        />
-      );
-    case 'error':
-      return (
-        <MaybeLongContent
-          content={ensureString(output.traceback)}
-          path={output.path}
-          render={(content?: string) => <pre>{content}</pre>}
+          render={(content?: string) => <div>{content}</div>}
         />
       );
     case 'display_data':
     case 'execute_result':
-    case 'update_display_data':
-      return <OutputImage output={output} />;
+    case 'update_display_data': {
+      const { image, text } = findSafeMimeOutputs(output);
+      if (!image && !text) return null;
+      if (image) return <OutputImage image={image} text={text} />;
+      if (text) return <div>{text.content}</div>;
+      return null;
+    }
     default:
       console.warn(`Unknown output_type ${output['output_type']}`);
       return null;

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.4",
+    "@curvenote/nbtx": "^0.1.6",
     "@curvenote/runtime": "^0.2.9",
     "@headlessui/react": "^1.5.0",
     "@heroicons/react": "^1.0.6",