Scroll to epoch

This commit is contained in:
Ayaz Hafiz 2023-07-31 18:18:41 -05:00
parent e3129032e8
commit 8069d3ad34
No known key found for this signature in database
GPG key ID: 0E2A37416A25EF58
6 changed files with 144 additions and 25 deletions

View file

@ -12,6 +12,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"
},
"devDependencies": {
@ -20,6 +22,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",
@ -3663,6 +3666,14 @@
"react-dom": ">=17"
}
},
"node_modules/@remix-run/router": {
"version": "1.7.2",
"resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.7.2.tgz",
"integrity": "sha512-7Lcn7IqGMV+vizMPoEl5F0XDshcdDYtMI6uJLQdQz5CfZAwy3vvGKYSUk789qndt5dEC4HfSjviSYlSoHGL2+A==",
"engines": {
"node": ">=14"
}
},
"node_modules/@rollup/plugin-babel": {
"version": "5.3.1",
"resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@ -4398,6 +4409,12 @@
"@types/node": "*"
}
},
"node_modules/@types/history": {
"version": "4.7.11",
"resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.11.tgz",
"integrity": "sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA==",
"dev": true
},
"node_modules/@types/html-minifier-terser": {
"version": "6.1.0",
"resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz",
@ -4545,6 +4562,38 @@
"@types/react": "*"
}
},
"node_modules/@types/react-router": {
"version": "5.1.20",
"resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-5.1.20.tgz",
"integrity": "sha512-jGjmu/ZqS7FjSH6owMcD5qpq19+1RS9DeVRqfl1FeBMxTDQAGwlMWOcs52NDoXaNKyG3d1cYQFMs9rCrb88o9Q==",
"dev": true,
"dependencies": {
"@types/history": "^4.7.11",
"@types/react": "*"
}
},
"node_modules/@types/react-router-dom": {
"version": "5.3.3",
"resolved": "https://registry.npmjs.org/@types/react-router-dom/-/react-router-dom-5.3.3.tgz",
"integrity": "sha512-kpqnYK4wcdm5UaWI3fLcELopqLrHgLqNsdpHauzlQktfkHL3npOSwtj1Uz9oKBAzs7lFtVkV8j83voAz2D8fhw==",
"dev": true,
"dependencies": {
"@types/history": "^4.7.11",
"@types/react": "*",
"@types/react-router": "*"
}
},
"node_modules/@types/react-router-hash-link": {
"version": "2.4.6",
"resolved": "https://registry.npmjs.org/@types/react-router-hash-link/-/react-router-hash-link-2.4.6.tgz",
"integrity": "sha512-JOV4Q1N60tJJUPisS/u1jiXn8c4jX7ThQf8XavzZYIWOIv0RP17nbyI9YgEZh1r3APXpP9ZkU1ytrlv+1+8jcw==",
"dev": true,
"dependencies": {
"@types/history": "^4.7.11",
"@types/react": "*",
"@types/react-router-dom": "^5.3.0"
}
},
"node_modules/@types/resolve": {
"version": "1.17.1",
"resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
@ -13480,7 +13529,6 @@
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
"integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
"dev": true,
"engines": {
"node": ">=0.10.0"
}
@ -15399,7 +15447,6 @@
"version": "15.8.1",
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
"integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
"dev": true,
"dependencies": {
"loose-envify": "^1.4.0",
"object-assign": "^4.1.1",
@ -15409,8 +15456,7 @@
"node_modules/prop-types/node_modules/react-is": {
"version": "16.13.1",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
"dev": true
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
},
"node_modules/proxy-addr": {
"version": "2.0.7",
@ -15750,6 +15796,48 @@
"node": ">=0.10.0"
}
},
"node_modules/react-router": {
"version": "6.14.2",
"resolved": "https://registry.npmjs.org/react-router/-/react-router-6.14.2.tgz",
"integrity": "sha512-09Zss2dE2z+T1D03IheqAFtK4UzQyX8nFPWx6jkwdYzGLXd5ie06A6ezS2fO6zJfEb/SpG6UocN2O1hfD+2urQ==",
"dependencies": {
"@remix-run/router": "1.7.2"
},
"engines": {
"node": ">=14"
},
"peerDependencies": {
"react": ">=16.8"
}
},
"node_modules/react-router-dom": {
"version": "6.14.2",
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.14.2.tgz",
"integrity": "sha512-5pWX0jdKR48XFZBuJqHosX3AAHjRAzygouMTyimnBPOLdY3WjzUSKhus2FVMihUFWzeLebDgr4r8UeQFAct7Bg==",
"dependencies": {
"@remix-run/router": "1.7.2",
"react-router": "6.14.2"
},
"engines": {
"node": ">=14"
},
"peerDependencies": {
"react": ">=16.8",
"react-dom": ">=16.8"
}
},
"node_modules/react-router-hash-link": {
"version": "2.4.3",
"resolved": "https://registry.npmjs.org/react-router-hash-link/-/react-router-hash-link-2.4.3.tgz",
"integrity": "sha512-NU7GWc265m92xh/aYD79Vr1W+zAIXDWp3L2YZOYP4rCqPnJ6LI6vh3+rKgkidtYijozHclaEQTAHaAaMWPVI4A==",
"dependencies": {
"prop-types": "^15.7.2"
},
"peerDependencies": {
"react": ">=15",
"react-router-dom": ">=4"
}
},
"node_modules/react-scripts": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",

View file

@ -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",

View file

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

View file

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

View file

@ -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>

View file

@ -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