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

tweak: Add debouncing for squiggle editor/playground

Browse Source 
The lack of it was getting pretty annoying
This commit is contained in:
NunoSempere 2022-06-08 11:10:30 -04:00
parent b022ea2fae
commit c9c3f4d6d9
2 changed files with 38 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
packages/components/src/components/SquiggleEditor.tsx
View File

@ -57,18 +57,32 @@ export let SquiggleEditor: React.FC<SquiggleEditorProps> = ({
showControls = false,
showSummary = false,
}: SquiggleEditorProps) => {
const [expression, setExpression] = React.useState(initialSquiggleString);
const [editorExpression, setEditorExpression] = React.useState(
initialSquiggleString
);
const [intoSquiggleExpression, setIntoSquiggleExpression] = React.useState(
initialSquiggleString
);
const [intoSquiggleTimeout, setIntoSquiggleTimeout] = React.useState(null);
const chartSettings = {
start: diagramStart,
stop: diagramStop,
count: diagramCount,
};
const setEditorExpressionAndFeedIntoSquiggleWithDebouncing = (value) => {
setEditorExpression(value);
clearTimeout(intoSquiggleTimeout);
const newTimeout = setTimeout(() => {
setIntoSquiggleExpression(value);
}, 500);
setIntoSquiggleTimeout(newTimeout);
};
return (
<div>
<div className="border border-grey-200 p-2 m-4">
<CodeEditor
value={expression}
onChange={setExpression}
value={editorExpression}
onChange={setEditorExpressionAndFeedIntoSquiggleWithDebouncing}
oneLine={true}
showGutter={false}
height={20}
@ -77,7 +91,7 @@ export let SquiggleEditor: React.FC<SquiggleEditorProps> = ({
<SquiggleChart
width={width}
environment={environment}
squiggleString={expression}
squiggleString={intoSquiggleExpression}
chartSettings={chartSettings}
onChange={onChange}
bindings={bindings}

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

@ -200,7 +200,13 @@ const SquigglePlayground: FC<PlaygroundProps> = ({
showControls = false,
showSummary = false,
}) => {
const [squiggleString, setSquiggleString] = useState(initialSquiggleString);
const [editorExpression, setEditorExpression] = React.useState(
initialSquiggleString
);
const [intoSquiggleExpression, setIntoSquiggleExpression] = React.useState(
initialSquiggleString
);
const [intoSquiggleTimeout, setIntoSquiggleTimeout] = React.useState(null);
const [importString, setImportString] = useState("{}");
const [imports, setImports] = useState({});
const [importsAreValid, setImportsAreValid] = useState(true);
@ -232,6 +238,14 @@ const SquigglePlayground: FC<PlaygroundProps> = ({
sampleCount: Number(vars.sampleCount),
xyPointLength: Number(vars.xyPointLength),
};
const setEditorExpressionAndFeedIntoSquiggleWithDebouncing = (value) => {
setEditorExpression(value);
clearTimeout(intoSquiggleTimeout);
const newTimeout = setTimeout(() => {
setIntoSquiggleExpression(value);
}, 500);
setIntoSquiggleTimeout(newTimeout);
};
const getChangeJson = (r: string) => {
setImportString(r);
try {
@ -393,8 +407,10 @@ const SquigglePlayground: FC<PlaygroundProps> = ({
<Tab.Panel>
<div className="border border-slate-200">
<CodeEditor
value={squiggleString}
onChange={setSquiggleString}
value={editorExpression}
onChange={
setEditorExpressionAndFeedIntoSquiggleWithDebouncing
}
oneLine={false}
showGutter={true}
height={height - 1}
@ -410,7 +426,7 @@ const SquigglePlayground: FC<PlaygroundProps> = ({
<div className="w-1/2 p-2 pl-4">
<div style={{ maxHeight: height }}>
<SquiggleChart
squiggleString={squiggleString}
squiggleString={intoSquiggleExpression}
environment={env}
chartSettings={chartSettings}
height={vars.chartHeight}