WIP Console view

packages/editor/package.json

@@ -99,7 +99,8 @@
     "y-protocols": "^1.0.5",
     "yjs": "^13.5.16",
     "zxcvbn": "^4.4.2",
-    "react-router-dom": "^6.2.2"
+    "react-router-dom": "^6.2.2",
+    "console-feed": "^3.3.0"
   },
   "scripts": {
     "copytypes:self": "rimraf public/types && tsc --declaration --stripInternal --emitDeclarationOnly --noEmit false --declarationDir public/types/@typecell-org/editor",

packages/editor/src/runtime/executor/components/Console.tsx

@@ -0,0 +1,60 @@
+import { ObservableMap } from "mobx";
+import { observer } from "mobx-react-lite";
+import React from "react";
+import { ConsoleOutput } from "./ConsoleOutput";
+import { Console as ConsoleComponent } from "console-feed";
+
+type Props = {
+  modelPath: string;
+  outputs: ObservableMap<string, ConsoleOutput>;
+};
+
+const Console: React.FC<Props> = observer((props) => {
+  const consoleOutput = props.outputs.get(props.modelPath);
+
+  let output = (consoleOutput?.events || []).map((event, i) => {
+    return {
+      id: event.id,
+      data: event.arguments,
+      method: event.method,
+    };
+  });
+
+  // Return blank in case there are no console events
+  if (!output.length) {
+    return <></>;
+  }
+
+  return (
+    <>
+      <div style={{ minHeight: "100px", width: "40%" }}></div>
+      <div style={consoleStyle}>
+        <ConsoleComponent
+          styles={{
+            LOG_AMOUNT_COLOR: "white",
+            // Somehow unable to change the amount background color. Line below doesn't work
+            LOG_INFO_AMOUNT_BACKROUND: "#0060ff",
+          }}
+          logs={output}
+          variant="light"
+        />
+      </div>
+    </>
+  );
+});
+
+const consoleStyle = {
+  borderLeft: "1px solid #eeeeee",
+  width: "40%",
+  maxHeight: "100%",
+  height: "100%",
+  overflow: "auto",
+  display: "flex",
+  "flex-direction": "column-reverse",
+  position: "absolute" as "absolute",
+  bottom: "-1px",
+  right: "0",
+  backgroundColor: "white",
+};
+
+export default Console;

packages/editor/src/runtime/executor/components/ConsoleOutput.ts

@@ -0,0 +1,50 @@
+import { makeObservable, observable, runInAction } from "mobx";
+import { lifecycle } from "vscode-lib";
+import { ConsolePayload } from "../../../../../engine/types/Engine";
+
+interface ConsoleEvent extends ConsolePayload {
+  id: string;
+}
+
+/**
+ * Keeps track of console output for a cell. Appends new events to the events array.
+ */
+export class ConsoleOutput extends lifecycle.Disposable {
+  private autorunDisposer: (() => void) | undefined;
+  // Keep track of id's so every new event always has a unique id.
+  private idIncrement = 1;
+  public events: ConsoleEvent[] = [];
+
+  constructor() {
+    super();
+    makeObservable(this, {
+      events: observable.shallow,
+    });
+  }
+
+  public async appendEvent(consolePayload: ConsolePayload) {
+    runInAction(() => {
+      if (consolePayload.method === "clear") {
+        this.events = [];
+      } else {
+        if (this.events.length >= 999) {
+          // Remove the first event when this arbitrary limit is reached to prevent memory issues.
+          this.events.shift();
+        }
+
+        this.idIncrement++;
+        this.events.push({
+          id: this.idIncrement.toString(),
+          ...consolePayload,
+        });
+      }
+    });
+  }
+
+  public dispose() {
+    if (this.autorunDisposer) {
+      this.autorunDisposer();
+    }
+    super.dispose();
+  }
+}

packages/editor/src/runtime/executor/executionHosts/sandboxed/iframesandbox/Frame.tsx

@@ -3,6 +3,7 @@ import { useCallback, useEffect, useRef } from "react";
 import Output from "../../../components/Output";
 import { FrameConnection } from "./FrameConnection";
 import "./Frame.css";
+import Console from "../../../components/Console";
 
 // The sandbox frame where end-user code gets evaluated.
 // It is loaded from index.iframe.ts
@@ -106,8 +107,9 @@ export const Frame = observer((props: {}) => {
               style={getOutputOuterStyle(positions.x, positions.y)}
               onMouseMove={onMouseMoveOutput}>
               <div style={outputInnerStyle}>
-                <Output modelPath={id} outputs={connection.outputs} />
+                <Output modelPath={id} outputs={connection.modelOutputs} />
               </div>
+              <Console modelPath={id} outputs={connection.consoleOutputs} />
             </div>
           );
         })}
@@ -122,11 +124,12 @@ const getOutputOuterStyle = (x: number, y: number) => ({
   position: "absolute" as "absolute",
   padding: "10px",
   width: "100%",
+  display: "flex",
 });
 
 const outputInnerStyle = {
-  maxWidth: "100%",
-  width: "100%",
+  overflow: "auto",
+  flex: "1",
 };
 
 const containerStyle = { position: "relative" as "relative" };