Scroll to epoch

roc-lang · Jul 31, 2023 · 8069d3a · 8069d3a
1 parent e312903
commit 8069d3a
Show file tree

Hide file tree

Showing 6 changed files with 144 additions and 25 deletions.
diff --git a/crates/compiler/checkmate/www/package-lock.json b/crates/compiler/checkmate/www/package-lock.json
diff --git a/crates/compiler/checkmate/www/package.json b/crates/compiler/checkmate/www/package.json
@@ -7,6 +7,8 @@
     "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": {
@@ -40,6 +42,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",

diff --git a/crates/compiler/checkmate/www/src/App.tsx b/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>
   );
 }
 

diff --git a/crates/compiler/checkmate/www/src/components/Common/EpochCell.tsx b/crates/compiler/checkmate/www/src/components/Common/EpochCell.tsx
@@ -1,8 +1,30 @@
 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 {
-  noLeadingText?: boolean;
+  view: EpochCellView;
   epoch: EventEpoch;
   className?: string;
 }
@@ -21,15 +43,18 @@ const EPOCH_STYLES_ARRAY = [
 
 export const EPOCH_STYLES = clsx(...EPOCH_STYLES_ARRAY);
 
-export default function EpochCell({
-  epoch,
-  className,
-  noLeadingText,
-}: EpochCellProps) {
+export default function EpochCell({ epoch, className, view }: EpochCellProps) {
+  const invertedView = invert(view);
+
   return (
-    <div className={clsx(EPOCH_STYLES, className)}>
-      {noLeadingText ? "" : "Epoch "}
-      {epoch}
-    </div>
+    <HashLink smooth to={`#${asStr(invertedView)}-${epoch}`}>
+      <div
+        id={`${asStr(view)}-${epoch}`}
+        className={clsx(EPOCH_STYLES, className)}
+      >
+        {view === EpochCellView.Graph ? "Epoch " : ""}
+        {epoch}
+      </div>
+    </HashLink>
   );
 }
diff --git a/crates/compiler/checkmate/www/src/components/EventList.tsx b/crates/compiler/checkmate/www/src/components/EventList.tsx
@@ -4,7 +4,7 @@ import { EventEpoch } from "../engine/engine";
 import { lastSubEvent } from "../engine/event_util";
 import { UnificationMode, Event } from "../schema";
 import { Refine } from "../utils/refine";
-import EpochCell from "./Common/EpochCell";
+import EpochCell, { EpochCellView } from "./Common/EpochCell";
 import { CommonProps } from "./EventItem/types";
 import { VariableEl } from "./EventItem/Variable";
 
@@ -97,7 +97,7 @@ function Unification(props: UnificationProps): JSX.Element {
     if (!containsCurrentEpoch) return null;
     return (
       <EpochCell
-        noLeadingText
+        view={EpochCellView.Events}
         epoch={currentEpoch}
         className="inline-block align-middle mr-2"
       ></EpochCell>

diff --git a/crates/compiler/checkmate/www/src/components/Graph/VariablesGraph.tsx b/crates/compiler/checkmate/www/src/components/Graph/VariablesGraph.tsx
@@ -31,7 +31,7 @@ import VariableNode, {
 import { SubsSnapshot } from "../../engine/subs";
 import { KeydownHandler } from "../Events";
 import { TypedEmitter } from "tiny-typed-emitter";
-import EpochCell from "../Common/EpochCell";
+import EpochCell, { EpochCellView } from "../Common/EpochCell";
 
 export interface VariablesGraphProps {
   subs: SubsSnapshot;
@@ -447,7 +447,7 @@ function Graph({
       }}
     >
       <Panel position="top-left">
-        <EpochCell epoch={subs.epoch}></EpochCell>
+        <EpochCell view={EpochCellView.Graph} epoch={subs.epoch}></EpochCell>
       </Panel>
       <Panel position="top-right">
         <LayoutPanel