More checkmate improvements

crates/compiler/checkmate/www/package.json

@@ -9,6 +9,7 @@
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.14.2",
     "react-router-hash-link": "^2.4.3",
+    "react-tooltip": "^5.19.0",
     "reactflow": "^11.7.4"
   },
   "scripts": {

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

@@ -1,15 +1,10 @@
 import React from "react";
 import FileInput, { LoadedEvents } from "./components/FileInput";
 import Ui from "./components/Ui";
-import data from "./checkmate.json";
-import { AllEvents } from "./schema";
 import { BrowserRouter } from "react-router-dom";
 
 export default function App() {
-  const [events, setEvents] = React.useState<LoadedEvents | null>({
-    kind: "ok",
-    events: data as AllEvents,
-  });
+  const [events, setEvents] = React.useState<LoadedEvents | null>(null);
 
   return (
     <BrowserRouter>

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

@@ -1,60 +1,28 @@
 import clsx from "clsx";
-import { EventEpoch } from "../../engine/engine";
-import { HashLink } from "react-router-hash-link";
-
-export enum EpochCellView {
-  Events,
-  Graph,
-}
-
-function invert(cell: EpochCellView): EpochCellView {
-  if (cell === EpochCellView.Events) {
-    return EpochCellView.Graph;
-  }
-  return EpochCellView.Events;
-}
-
-function asStr(cell: EpochCellView): string {
-  switch (cell) {
-    case EpochCellView.Events:
-      return "events";
-    case EpochCellView.Graph:
-      return "graph";
-  }
-}
 
 interface EpochCellProps {
-  view: EpochCellView;
-  epoch: EventEpoch;
   className?: string;
+  children?: React.ReactNode;
+  focus?: boolean;
 }
 
-const EPOCH_STYLES_ARRAY = [
-  "text-slate-900",
-  "font-mono",
-  "bg-slate-200",
-  "p-1",
-  "py-0",
-  "rounded-sm",
-  "ring-1",
-  "ring-slate-500",
-  "text-sm",
-];
-
-export const EPOCH_STYLES = clsx(...EPOCH_STYLES_ARRAY);
-
-export default function EpochCell({ epoch, className, view }: EpochCellProps) {
-  const invertedView = invert(view);
+export const EPOCH_STYLES =
+  "text-slate-900 font-mono bg-slate-200 p-1 py-0 rounded-sm text-sm transition ease-in-out duration-700 mr-2";
 
+export default function EpochCell({
+  className,
+  children,
+  focus,
+}: EpochCellProps) {
   return (
-    <HashLink smooth to={`#${asStr(invertedView)}-${epoch}`}>
-      <div
-        id={`${asStr(view)}-${epoch}`}
-        className={clsx(EPOCH_STYLES, className)}
-      >
-        {view === EpochCellView.Graph ? "Epoch " : ""}
-        {epoch}
-      </div>
-    </HashLink>
+    <span
+      className={clsx(
+        EPOCH_STYLES,
+        className,
+        focus === true ? "ring-2 ring-blue-500" : "ring-1 ring-slate-500"
+      )}
+    >
+      {children}
+    </span>
   );
 }

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

@@ -0,0 +1,18 @@
+import clsx from "clsx";
+import { Variable } from "../../schema";
+import { VariableName } from "./VariableName";
+
+export interface UnknownVariableProps {
+  variable: Variable;
+}
+
+export function UnknownVariable({
+  variable,
+}: UnknownVariableProps): JSX.Element {
+  return (
+    <div className={clsx("rounded-md whitespace-nowrap space-x-1 pr-1")}>
+      <VariableName className="inline-block" variable={variable} />
+      <span>???</span>
+    </div>
+  );
+}

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

@@ -4,6 +4,7 @@ import { QuerySubs, TypeDescriptor } from "../../engine/subs";
 import { Variable } from "../../schema";
 import DrawHeadConstructor from "../Content/HeadConstructor";
 import { contentStyles } from "./../Content";
+import { VariableName } from "./VariableName";
 
 interface VariableElProps {
   variable: Variable;
@@ -51,23 +52,6 @@ function Helper({
     desc: TypeDescriptor | undefined;
   }): JSX.Element {
   const { bg } = contentStyles(desc);
-  const varHeader =
-    !nested || raw ? (
-      <span
-        className={clsx(
-          "ring-1 ring-inset ring-black-100 px-1 bg-white rounded-md cursor",
-          nested ? "text-md" : "p-0.5"
-        )}
-        onClick={(e) => {
-          e.stopPropagation();
-          onClick?.(variable);
-        }}
-      >
-        {variable}
-      </span>
-    ) : (
-      <></>
-    );
   return (
     <span
       className={clsx(
@@ -76,7 +60,13 @@ function Helper({
         nested ? "text-sm" : "p-0.5 pl-0 text-base"
       )}
     >
-      {varHeader}
+      {(!nested || raw) && (
+        <VariableName
+          variable={variable}
+          onClick={onClick}
+          className={nested ? "text-md" : "p-0.5"}
+        />
+      )}
       {children ? <span className="px-1">{children}</span> : <></>}
     </span>
   );

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

@@ -0,0 +1,34 @@
+import clsx from "clsx";
+import { QuerySubs } from "../../engine/subs";
+import { Variable } from "../../schema";
+import { VariableName } from "./VariableName";
+
+export interface VariableLinkProps {
+  variable: Variable;
+  subs: QuerySubs;
+  onClick?: (variable: Variable) => void;
+}
+
+export function VariableLink({
+  variable,
+  subs,
+  onClick,
+}: VariableLinkProps): JSX.Element {
+  const root = subs.get_root_key(variable);
+
+  if (variable === root) {
+    throw new Error("VariableLink: variable is root");
+  }
+
+  return (
+    <div className={clsx("rounded-md whitespace-nowrap space-x-1")}>
+      <VariableName className="inline-block" variable={variable} />
+      <span>→</span>
+      <VariableName
+        className="inline-block"
+        variable={root}
+        onClick={onClick}
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,30 @@
+import clsx from "clsx";
+import { Variable } from "../../schema";
+
+export interface VariableNameProps {
+  variable: Variable;
+  onClick?: (variable: Variable) => void;
+  className?: string;
+}
+
+export function VariableName({
+  variable,
+  onClick,
+  className,
+}: VariableNameProps): JSX.Element {
+  return (
+    <span
+      className={clsx(
+        "ring-1 ring-inset ring-black-100 px-1 bg-white rounded-md",
+        onClick && "cursor-pointer",
+        className
+      )}
+      onClick={(e) => {
+        e.stopPropagation();
+        onClick?.(variable);
+      }}
+    >
+      {variable}
+    </span>
+  );
+}

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

@@ -64,3 +64,5 @@ export function contentStyles(desc: TypeDescriptor | undefined): ContentStyles {
       return { name: "Error", bg: "bg-red-400" };
   }
 }
+
+export const LinkStyles: ContentStyles = { name: "Link", bg: "bg-slate-500" };

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

@@ -10,17 +10,17 @@ interface VariableProps extends CommonProps {
 
 export function VariableEl({
   engine,
-  toggleVariableVis,
   epoch,
   variable,
+  graphEe,
 }: VariableProps): JSX.Element {
   engine.stepTo(epoch);
   return (
     <VariableElPretty
       variable={variable}
       subs={engine.subs}
       onClick={(variable: Variable) => {
-        toggleVariableVis(variable);
+        graphEe.emit("focusVariable", variable);
       }}
     ></VariableElPretty>
   );

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

@@ -1,8 +1,9 @@
+import { TypedEmitter } from "tiny-typed-emitter";
 import type { Engine, EventEpoch } from "../../engine/engine";
-import type { Variable } from "../../schema";
+import { GraphMessage } from "../../utils/events";
 
 export interface CommonProps {
-  currentEpoch: EventEpoch;
+  selectedEpochs: EventEpoch[];
   engine: Engine;
-  toggleVariableVis: (variable: Variable) => void;
+  graphEe: TypedEmitter<GraphMessage>;
 }