set up subscription to outputs

src-tauri/src/main.rs

@@ -83,7 +83,10 @@ impl AppState {
 
                 let finished_output = &output_handler.lock().await.output;
 
-                window.emit("output", finished_output.clone()).unwrap();
+                window.emit(
+                    format!("cell-outputs-{}", cell_id).as_str(),
+                    Some(finished_output.clone()),
+                    ).unwrap();
                 return true;
             }
         }

src/components/Cell.tsx

@@ -4,7 +4,8 @@ import { useCell } from "@/hooks/useCell";
 import { Editor } from "@/components//Editor";
 
 const Cell = ({ cellId }: { cellId: string }) => {
-  const { executeCell, executionState, executionCount } = useCell(cellId);
+  const { executeCell, executionState, executionCount, outputs } =
+    useCell(cellId);
 
   let actionIcon = "▶";
   let showExecutionCountAs = executionCount === null ? " " : executionCount;
@@ -24,16 +25,25 @@ const Cell = ({ cellId }: { cellId: string }) => {
   }
 
   return (
-    <div className="bg-gray-100 p-4 rounded flex items-start">
-      <Button
-        variant="ghost"
-        className="font-mono text-sm group w-14 h-full pt-0 pb-0 m-0"
-        onClick={executeCell}
-      >
-        [<div className="group-hover:block hidden">{actionIcon}</div>
-        <span className="group-hover:hidden">{showExecutionCountAs}</span>]
-      </Button>
-      <Editor cellId={cellId} className="mr-2 pt-0 pb-0 text-sm" language="python"/>
+    <div>
+      <div className="bg-gray-100 p-4 rounded flex items-start">
+        <Button
+          variant="ghost"
+          className="font-mono text-sm group w-14 h-full pt-0 pb-0 m-0"
+          onClick={executeCell}
+        >
+          [<div className="group-hover:block hidden">{actionIcon}</div>
+          <span className="group-hover:hidden">{showExecutionCountAs}</span>]
+        </Button>
+        <Editor
+          cellId={cellId}
+          className="mr-2 pt-0 pb-0 text-sm"
+          language="python"
+        />
+      </div>
+      {outputs && outputs.length > 0 ? (
+        <pre>{JSON.stringify(outputs, 2, null)}</pre>
+      ) : null}
     </div>
   );
 };

src/hooks/useCell.ts

@@ -10,14 +10,16 @@ enum ExecutionState {
   Submitted = "submitted"
 }
 
-type Action = { type: 'setSubmitted' } | { type: 'reset' };
+type Action = { type: 'setSubmitted' } | { type: 'reset' } | {type: "setOutputs", outputs: []}
 
 type CellState = {
   executionState: ExecutionState;
+  outputs: [];
 }
 
 const initialState: CellState = {
-  executionState: ExecutionState.Idle
+  executionState: ExecutionState.Idle,
+  outputs: []
 };
 
 function cellReducer(state: CellState, action: Action) {
@@ -26,7 +28,8 @@ function cellReducer(state: CellState, action: Action) {
       return { ...state, executionState: ExecutionState.Submitted };
     case 'reset':
       return { ...state, executionState: ExecutionState.Idle };
-    // Handle other actions here
+    case 'setOutputs':
+      return {...state, outputs: action.outputs }
     default:
       return state;
   }
@@ -58,28 +61,22 @@ export function useCell(cellId: string) {
   }, [cellId]);
 
   useEffect(() => {
-    let isMounted = true;
-
     const setupListener = async () => {
-      const unlisten = await listen(`cell-${cellId}`, (event) => {
-        if (isMounted) {
-          console.log(event);
-          // Update state based on event here
-        }
+      const unlisten = await listen(`cell-outputs-${cellId}`, (event) => {
+        // Q(Kyle): Do we need to check if the event.windowLabel matches ours
+        const outputs = event.payload as [];
+
+        dispatch({type: "setOutputs", outputs})
+
       });
 
       return () => {
-        isMounted = false;
         unlisten();
       };
     };
 
     setupListener();
-
-    return () => {
-      isMounted = false;
-    };
   }, [cellId]);
 
-  return { ...state, content, executeCell, updateCell, executionCount: null };
+  return { ...state, content, executeCell, updateCell, executionCount: null};
 }