A bunch of improvements

crates/compiler/checkmate/www/package.json

@@ -3,8 +3,10 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@dagrejs/dagre": "^1.0.2",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "reactflow": "^11.7.4"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -41,6 +43,7 @@
     "json-schema-to-typescript": "^13.0.2",
     "react-scripts": "5.0.1",
     "tailwindcss": "^3.3.3",
+    "tiny-typed-emitter": "^2.1.0",
     "typescript": "^4.9.5"
   }
 }

crates/compiler/checkmate/www/src/App.tsx

@@ -11,9 +11,13 @@ export default function App() {
   });
 
   return (
-    <div className="w-screen h-screen p-2 bg-gray-100">
-      <FileInput setResult={setEvents} />
-      <EventsWrapper events={events} />
+    <div className="w-screen h-screen p-2 bg-gray-100 flex flex-col">
+      <div>
+        <FileInput setResult={setEvents} />
+      </div>
+      <div className="flex-1 overflow-hidden">
+        <EventsWrapper events={events} />
+      </div>
     </div>
   );
 }

crates/compiler/checkmate/www/src/components/Common/Variable.tsx

@@ -0,0 +1,29 @@
+import clsx from "clsx";
+import { Variable } from "../../schema";
+import { ContentStyles } from "./../Content";
+
+export function VariableElHelp({
+  variable,
+  styles,
+  onClick,
+}: {
+  variable: Variable;
+  styles: ContentStyles;
+  onClick?: () => void;
+}): JSX.Element {
+  const { name, bg } = styles;
+  return (
+    <span className={clsx("py-0 pl-0 pr-1 rounded-md", bg)}>
+      <span
+        className="ring-1 ring-inset ring-black-100 mr-1 px-1 bg-white rounded-md cursor"
+        onClick={(e) => {
+          e.stopPropagation();
+          onClick?.();
+        }}
+      >
+        {variable}
+      </span>
+      {name}
+    </span>
+  );
+}

crates/compiler/checkmate/www/src/components/Variable.tsx → crates/compiler/checkmate/www/src/components/Content/index.ts

@@ -1,40 +1,12 @@
-import clsx from "clsx";
-import { Engine, EventIndex } from "../engine/engine";
-import { TypeDescriptor } from "../engine/subs";
-import { Variable } from "../schema";
-import { assertExhaustive } from "../utils/exhaustive";
+import { TypeDescriptor } from "../../engine/subs";
+import { assertExhaustive } from "../../utils/exhaustive";
 
-interface VariableProps {
-  engine: Engine;
-  index: EventIndex;
-  variable: Variable;
-}
-
-export function VariableEl({
-  engine,
-  index,
-  variable,
-}: VariableProps): JSX.Element {
-  engine.stepTo(index);
-  const desc = engine.subs.get_root(variable);
-  const { name, bg } = contentStyles(desc);
-
-  return (
-    <span className={clsx("py-0 pl-0 pr-1 rounded-md", bg)}>
-      <span className="ring-1 ring-inset ring-black-100 mr-1 px-1 bg-white rounded-md">
-        {variable}
-      </span>
-      {name}
-    </span>
-  );
-}
-
-interface ContentStyles {
+export interface ContentStyles {
   name: string;
   bg: string;
 }
 
-function contentStyles(desc: TypeDescriptor | undefined): ContentStyles {
+export function contentStyles(desc: TypeDescriptor | undefined): ContentStyles {
   if (!desc) {
     return { name: "???", bg: "bg-red-500" };
   }

crates/compiler/checkmate/www/src/components/EventItem/Variable.tsx

@@ -0,0 +1,30 @@
+import { EventIndex } from "../../engine/engine";
+import { Variable } from "../../schema";
+import { contentStyles } from "../Content";
+import { VariableElHelp } from "../Common/Variable";
+import { CommonProps } from "./types";
+
+interface VariableProps extends CommonProps {
+  index: EventIndex;
+  variable: Variable;
+}
+
+export function VariableEl({
+  engine,
+  toggleVariableVis,
+  index,
+  variable,
+}: VariableProps): JSX.Element {
+  engine.stepTo(index);
+  const desc = engine.subs.get_root(variable);
+  const styles = contentStyles(desc);
+  return (
+    <VariableElHelp
+      variable={variable}
+      styles={styles}
+      onClick={() => {
+        toggleVariableVis(variable);
+      }}
+    ></VariableElHelp>
+  );
+}

crates/compiler/checkmate/www/src/components/EventItem/types.ts

@@ -0,0 +1,7 @@
+import type { Engine } from "../../engine/engine";
+import type { Variable } from "../../schema";
+
+export interface CommonProps {
+  engine: Engine;
+  toggleVariableVis: (variable: Variable) => void;
+}

crates/compiler/checkmate/www/src/components/EventList.tsx

@@ -0,0 +1,142 @@
+import clsx from "clsx";
+import React from "react";
+import { EventIndex } from "../engine/engine";
+import { lastSubEvent } from "../engine/event_util";
+import { UnificationMode, Event } from "../schema";
+import { Refine } from "../utils/refine";
+import { CommonProps } from "./EventItem/types";
+import { VariableEl } from "./EventItem/Variable";
+
+interface EventListProps extends CommonProps {
+  events: Event[];
+  root?: boolean;
+}
+
+const MT = "mt-2.5";
+const UNFOCUSED = "opacity-40";
+
+export default function EventList(props: EventListProps): JSX.Element {
+  const { events, root } = props;
+  return (
+    <ul className={clsx(MT, root ? "ml-2" : "ml-[1.5em]")}>
+      {events.map((event, i) => (
+        <li key={i} className={MT}>
+          <OneEvent {...props} event={event} />
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+interface OneEventProps extends CommonProps {
+  event: Event;
+}
+
+function OneEvent(props: OneEventProps): JSX.Element {
+  const { event } = props;
+  switch (event.type) {
+    case "Unification":
+      return <Unification {...props} event={event} />;
+    case "VariableUnified":
+      return <></>;
+    case "VariableSetDescriptor":
+      return <></>;
+  }
+}
+
+const DROPDOWN_CLOSED = "▶";
+const DROPDOWN_OPEN = "▼";
+
+const UN_UNKNOWN = "💭";
+const UN_SUCCESS = "✅";
+const UN_FAILURE = "❌";
+
+interface UnificationProps extends CommonProps {
+  event: Refine<Event, "Unification">;
+}
+
+function Unification(props: UnificationProps): JSX.Element {
+  const { engine, event } = props;
+  const { mode, subevents, success } = event;
+
+  const beforeUnificationIndex = engine.getEventIndex(event);
+  const afterUnificationIndex = engine.getEventIndex(lastSubEvent(event));
+
+  const leftVar = (index: EventIndex) => (
+    <VariableEl {...props} index={index} variable={event.left} />
+  );
+  const rightVar = (index: EventIndex) => (
+    <VariableEl {...props} index={index} variable={event.right} />
+  );
+
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  const modeIcon = <UnificationModeIcon mode={mode} />;
+
+  const resultIcon = success ? UN_SUCCESS : UN_FAILURE;
+  const resultHeadline = <Headline icon={resultIcon}></Headline>;
+  const topHeadline = (
+    <Headline icon={isOpen ? UN_UNKNOWN : resultIcon}></Headline>
+  );
+
+  function getHeadline(index: EventIndex) {
+    return (
+      <button onClick={() => setIsOpen(!isOpen)} className="w-full text-left">
+        <span
+          className={clsx("mr-2", isOpen ? "text-slate-500" : "text-slate-400")}
+        >
+          {isOpen ? DROPDOWN_OPEN : DROPDOWN_CLOSED}
+        </span>
+        {topHeadline} {leftVar(index)} {modeIcon} {rightVar(index)}
+      </button>
+    );
+  }
+
+  if (!isOpen) {
+    const headLine = getHeadline(afterUnificationIndex);
+    return <div className={UNFOCUSED}>{headLine}</div>;
+  } else {
+    const dropdownTransparent = (
+      <span className="text-transparent mr-2">{DROPDOWN_OPEN}</span>
+    );
+
+    const headlineBefore = getHeadline(beforeUnificationIndex);
+
+    const headlineAfter = (
+      <div className={MT}>
+        {dropdownTransparent}
+        {resultHeadline} {leftVar(afterUnificationIndex)} {modeIcon}{" "}
+        {rightVar(afterUnificationIndex)}
+      </div>
+    );
+
+    return (
+      <div
+        className={clsx(
+          "relative z-[1]",
+          "before:content-[''] before:border-l before:border-slate-500 before:z-[-1]",
+          "before:absolute before:w-0 before:h-[calc(100%-1.5rem)] before:top-[1rem] before:left-[0.3rem]"
+        )}
+      >
+        <div>{headlineBefore}</div>
+        <EventList {...props} root={false} engine={engine} events={subevents} />
+        {headlineAfter}
+      </div>
+    );
+  }
+}
+
+function Headline({ icon }: { icon: string }): JSX.Element {
+  return <span className="">{icon}</span>;
+}
+
+function UnificationModeIcon({ mode }: { mode: UnificationMode }): JSX.Element {
+  switch (mode.type) {
+    case "Eq":
+      return <>~</>;
+    case "Present":
+      return <>+=</>;
+    case "LambdaSetSpecialization":
+      return <>|~|</>;
+  }
+}

crates/compiler/checkmate/www/src/components/Events/index.ts

@@ -0,0 +1,3 @@
+import { Variable } from "../../schema";
+
+export type ToggleVariableHandler = (variable: Variable) => void;