tweak: Add debouncing for squiggle editor/playground

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

View File

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

View File

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