Scroll to epoch

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>
   );
 }