fix: show outputs on reopen

Author: pankgeorg

renderer/components/PlutoOutput.tsx

@@ -11,6 +11,7 @@ import {
   useEffect,
   setup_mathjax,
   useState,
+  useErrorBoundary,
 } from "@plutojl/rainbow/ui";
 import { type RendererContext } from "vscode-notebook-renderer";
 
@@ -40,21 +41,23 @@ const cutMime = (s: { msg: string }, l = 88) => {
 
 export function PlutoOutput({ state, context }: PlutoOutputProps) {
   useMathjaxEffect();
+  const [error, resetError] = useErrorBoundary();
+
   const [localState, setLocalState] = useState(state);
   const [progress, setProgress] = useState<any>(null);
   const [terminal, setTerminal] = useState<any>(null);
   const [logs, setLogs] = useState<any>(null);
   useEffect(() => {
     // Listen for messages from the controller
     const d = context.onDidReceiveMessage?.((message) => {
-      if (message.cell_id !== state.cell_id) {
+      if (message.cell_id !== localState.cell_id) {
         return;
       }
       // Placeholder: Handle different message types from controller
       switch (message.type) {
         case "setState": {
           const state = message.state as CellResultData;
-          setLocalState(state);
+          setLocalState({ ...state });
 
           const logs = state.logs.filter((log) => {
             return (
@@ -82,45 +85,51 @@ export function PlutoOutput({ state, context }: PlutoOutputProps) {
     });
     return () => d?.dispose();
   }, [state.cell_id, context]);
-
-  return html`
-  ${
-    state.running && progress
-      ? html`<div>
-          <label for=${`progress_${state.cell_id}`}> ${progress}% </label
-          ><progress
-            style="width: 240px;"
-            id=${`progress_${state.cell_id}`}
-            max="100"
-            value=${progress}
-          ></progress>
-        </div>`
-      : null
+  if (error) {
+    return html`<div onclick=${resetError}>
+      An error occured. Click <button onClick=${resetError}>here</button> to
+      reset the view
+      <details>
+        <summary>View error</summary>
+        (Thank you for using a pre-release. This is on us. Please copy-paste
+        this and send it our way! Sorry again!)
+        <pre>${JSON.stringify(error)}</pre>
+      </details>
+    </div>`;
   }
-  <${OutputBody}
-    persist_js_state="${true}"
+  return html` ${localState.running && progress
+    ? html`<div>
+        <label for=${`progress_${localState.cell_id}`}> ${progress}% </label
+        ><progress
+          style="width: 240px;"
+          id=${`progress_${localState.cell_id}`}
+          max="100"
+          value=${progress}
+        ></progress>
+      </div>`
+    : null}
+  ${localState.output?.mime
+    ? html`<${OutputBody}
+    persist_js_state="${localState.output.persist_js_state}"
     body="${localState.output?.body}"
     mime="${localState.output?.mime}"
     sanitize_html="${false /* Maybe reconsider */}"
-  ></${OutputBody}>
-  ${
-    terminal?.length
-      ? html`<details>
+  ></${OutputBody}>`
+    : "Loading..."}
+  ${terminal?.length
+    ? html`<details>
           <summary>stdout</summary>
           <${ANSITextOutput}
             body="${terminal.map(cutMime).join("\n")}"
           ></${ANSITextOutput}>
         </details>`
-      : null
-  }
-  ${
-    logs?.length
-      ? html`<details open>
+    : null}
+  ${logs?.length
+    ? html`<details open>
           <summary>Logs</summary>
             <${ANSITextOutput} 
                body="${logs.map(cutMime).join("\n")}"
              ></${ANSITextOutput}>
         </details>`
-      : null
-  }`;
+    : null}`;
 }

src/controller.ts

@@ -270,7 +270,7 @@ export class PlutoNotebookController {
     if (segment2 === "output") {
       // Handle final output/result update
       const execution = this.startExecution(cellId, notebook);
-      execution.replaceOutput([formatCellOutput(currentCellState)]);
+      // execution.replaceOutput([formatCellOutput(currentCellState)]);
 
       this.outputChannel.appendLine(
         `[OUTPUT] Cell ${cellId} for notebook ${notebook.uri} output updated.`

src/plutoSerializer.ts

@@ -59,17 +59,34 @@ export function createVsCodeCellFromPlutoCell(
     code,
     isMarkdown ? "markdown" : "julia"
   );
-  const results = notebookData.cell_results[plutoCellId] ?? null;
-  if (results !== null) {
-    // Add output if available
-    cellData.outputs = [formatCellOutput(results)];
-  }
+
+  const results = notebookData.cell_results[plutoCellId] ?? {
+    cell_id: plutoCellId,
+    output: {
+      body: undefined,
+      has_pluto_hook_features: false,
+      last_run_timestamp: 0,
+      mime: "text/plain",
+      persist_js_state: false,
+      rootassignee: "",
+    },
+    running: false,
+    errored: false,
+    queued: true,
+    runtime: 0,
+    depends_on_disabled_cells: false,
+    depends_on_skipped_cells: false,
+    downstream_cells_map: {},
+    precedence_heuristic: 0,
+    logs: [],
+    published_object_keys: [""],
+    upstream_cells_map: {},
+  };
+  cellData.outputs = [formatCellOutput(results)];
   cellData.metadata = {
     pluto_cell_id: plutoCellId,
     ...cellInput.metadata,
   };
-  // TODO add outputs
-  // cellData.outputs = [];
   return cellData;
 }
 /**