quantified.uncertainty/squiggle
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

playground renders code on second pass

Browse Source
This commit is contained in:
Vyacheslav Matyukhin 2022-07-27 21:28:21 +04:00
parent 9ec84d2c96
commit 329bb9432e
No known key found for this signature in database
GPG Key ID: 3D2A774C5489F96C
3 changed files with 21 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/components/src/components/SquiggleChart.tsx
View File

@ -88,6 +88,7 @@ export const SquiggleChart: React.FC<SquiggleChartProps> = React.memo(
environment, environment,
jsImports, jsImports,
onChange, onChange,
executionId,
}); });
const distributionPlotSettings = { const distributionPlotSettings = {

23
packages/components/src/components/SquigglePlayground.tsx
View File

@ -278,17 +278,18 @@ export const SquigglePlayground: FC<PlaygroundProps> = ({
executionId, executionId,
} = useRunnerState(code); } = useRunnerState(code);
const squiggleChart = ( const squiggleChart =
<SquiggleChart renderedCode === "" ? null : (
code={renderedCode} <SquiggleChart
executionId={executionId} code={renderedCode}
environment={env} executionId={executionId}
{...vars} environment={env}
bindings={defaultBindings} {...vars}
jsImports={imports} bindings={defaultBindings}
enableLocalSettings={true} jsImports={imports}
/> enableLocalSettings={true}
); />
);
const firstTab = vars.showEditor ? ( const firstTab = vars.showEditor ? (
<div className="border border-slate-200"> <div className="border border-slate-200">

12
packages/components/src/lib/hooks/useRunnerState.ts
View File

@ -1,4 +1,4 @@
import { useEffect, useReducer } from "react"; import { useLayoutEffect, useReducer } from "react";
type State = { type State = {
autorunMode: boolean; autorunMode: boolean;
@ -10,7 +10,7 @@ type State = {
const buildInitialState = (code: string): State => ({ const buildInitialState = (code: string): State => ({
autorunMode: true, autorunMode: true,
renderedCode: code, renderedCode: "",
runningState: "none", runningState: "none",
executionId: 1, executionId: 1,
}); });
@ -62,9 +62,13 @@ const reducer = (state: State, action: Action): State => {
export const useRunnerState = (code: string) => { export const useRunnerState = (code: string) => {
const [state, dispatch] = useReducer(reducer, buildInitialState(code)); const [state, dispatch] = useReducer(reducer, buildInitialState(code));
useEffect(() => { useLayoutEffect(() => {
if (state.runningState === "prepared") { if (state.runningState === "prepared") {
dispatch({ type: "RUN", code }); // this is necessary for async playground loading - otherwise it executes the code synchronously on the initial load
// (it's surprising that this is necessary, but empirically it _is_ necessary, both with `useEffect` and `useLayoutEffect`)
setTimeout(() => {
dispatch({ type: "RUN", code });
}, 0);
} else if (state.runningState === "run") { } else if (state.runningState === "run") {
dispatch({ type: "STOP_RUN" }); dispatch({ type: "STOP_RUN" });
} }