mirror of
https://github.com/roc-lang/roc.git
synced 2025-08-04 12:18:19 +00:00
Scroll to epoch
This commit is contained in:
parent
e3129032e8
commit
8069d3ad34
6 changed files with 144 additions and 25 deletions
96
crates/compiler/checkmate/www/package-lock.json
generated
96
crates/compiler/checkmate/www/package-lock.json
generated
|
@ -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",
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue