Merge pull request #5717 from roc-lang/checkmate-ui-improvements

Checkmate UI improvements

crates/compiler/checkmate/www/package.json

@@ -4,15 +4,19 @@
   "private": true,
   "dependencies": {
     "@dagrejs/dagre": "^1.0.2",
+    "elkjs": "^0.8.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.14.2",
+    "react-router-hash-link": "^2.4.3",
     "reactflow": "^11.7.4"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "build:codegen && react-scripts build",
     "build:codegen": "node ./scripts/gen_schema_dts.js",
     "check": "tsc",
+    "lint": "eslint src/ scripts/",
     "eject": "react-scripts eject"
   },
   "eslintConfig": {
@@ -39,6 +43,7 @@
     "@types/node": "^16.18.38",
     "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",
+    "@types/react-router-hash-link": "^2.4.6",
     "clsx": "^2.0.0",
     "json-schema-to-typescript": "^13.0.2",
     "react-scripts": "5.0.1",

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

@@ -3,6 +3,7 @@ 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>({
@@ -11,14 +12,16 @@ export default function App() {
   });
 
   return (
-    <div className="w-screen h-screen p-2 bg-gray-100 flex flex-col">
-      <div>
-        <FileInput setResult={setEvents} />
+    <BrowserRouter>
+      <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>
-      <div className="flex-1 overflow-hidden">
-        <EventsWrapper events={events} />
-      </div>
-    </div>
+    </BrowserRouter>
   );
 }
 

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

@@ -0,0 +1,60 @@
+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;
+}
+
+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);
+
+  return (
+    <HashLink smooth to={`#${asStr(invertedView)}-${epoch}`}>
+      <div
+        id={`${asStr(view)}-${epoch}`}
+        className={clsx(EPOCH_STYLES, className)}
+      >
+        {view === EpochCellView.Graph ? "Epoch " : ""}
+        {epoch}
+      </div>
+    </HashLink>
+  );
+}

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

@@ -1,20 +1,20 @@
-import { EventIndex } from "../../engine/engine";
+import { EventEpoch } from "../../engine/engine";
 import { Variable } from "../../schema";
 import { VariableElPretty } from "../Common/Variable";
 import { CommonProps } from "./types";
 
 interface VariableProps extends CommonProps {
-  index: EventIndex;
+  epoch: EventEpoch;
   variable: Variable;
 }
 
 export function VariableEl({
   engine,
   toggleVariableVis,
-  index,
+  epoch,
   variable,
 }: VariableProps): JSX.Element {
-  engine.stepTo(index);
+  engine.stepTo(epoch);
   return (
     <VariableElPretty
       variable={variable}

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

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