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

Added simple input component for SquigglePlayground

Browse Source
This commit is contained in:
Ozzie Gooen 2022-05-26 18:39:06 -04:00
parent 7f6fe1a0aa
commit afb7613bcc
2 changed files with 51 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -11,7 +11,6 @@ import { yupResolver } from "@hookform/resolvers/yup";
import { import {
defaultBindings, defaultBindings,
environment, environment,
defaultImports,
} from "@quri/squiggle-lang"; } from "@quri/squiggle-lang";
interface FieldFloatProps { interface FieldFloatProps {
@ -131,9 +130,19 @@ const schema = yup
}) })
.required(); .required();
type InputProps = {
label: string;
};
const InputItem: React.FC<InputProps> = ({ label, children }) => (
<div>
<label>{label}</label>
{children}
</div>
);
let SquigglePlayground: FC<PlaygroundProps> = ({ let SquigglePlayground: FC<PlaygroundProps> = ({
initialSquiggleString = "", initialSquiggleString = "",
height = 300, height = 500,
showTypes = false, showTypes = false,
showControls = false, showControls = false,
showSummary = false, showSummary = false,
@ -189,23 +198,45 @@ let SquigglePlayground: FC<PlaygroundProps> = ({
<Row leftPercentage={vars.leftSizePercent || 50}> <Row leftPercentage={vars.leftSizePercent || 50}>
<Col> <Col>
{vars.showSettingsPage ? ( {vars.showSettingsPage ? (
<div> <>
<input type="number" {...register("sampleCount")} /> <InputItem label="Sample Count">
<input type="number" {...register("xyPointLength")} /> <input type="number" {...register("sampleCount")} />
<input type="number" {...register("chartHeight")} /> </InputItem>
<input type="number" {...register("leftSizePercent")} /> <InputItem label="XYPointLength Count">
<input type="checkbox" {...register("showTypes")} /> <input type="number" {...register("xyPointLength")} />
<input type="checkbox" {...register("showControls")} /> </InputItem>
<input type="checkbox" {...register("showSummary")} /> <InputItem label="Chart Height (in Pixels)">
<JsonEditor <input type="number" {...register("chartHeight")} />
value={importString} </InputItem>
onChange={getChangeJson} <InputItem label="Show Types">
oneLine={false} <input type="checkbox" {...register("showTypes")} />
showGutter={true} </InputItem>
height={100} <InputItem label="Show Controls">
/> <input type="checkbox" {...register("showControls")} />
{importsAreValid ? "Valid" : "Invalid"} </InputItem>
</div> <InputItem label="Show Summary Statistics">
<input type="checkbox" {...register("showSummary")} />
</InputItem>
<InputItem label="Editor Width">
<input
type="range"
min="1"
max="100"
className="slider"
{...register("leftSizePercent")}
/>
</InputItem>
<InputItem label="Json Editor for imports">
<JsonEditor
value={importString}
onChange={getChangeJson}
oneLine={false}
showGutter={true}
height={100}
/>
{importsAreValid ? "Valid" : "Invalid"}
</InputItem>
</>
) : ( ) : (
<CodeEditor <CodeEditor
value={squiggleString} value={squiggleString}

2
packages/components/src/stories/SquigglePlayground.stories.mdx
View File

@ -16,7 +16,7 @@ including sampling settings, in squiggle.
name="Normal" name="Normal"
args={{ args={{
initialSquiggleString: "normal(5,2)", initialSquiggleString: "normal(5,2)",
height: 500, height: 800,
}} }}
> >
{Template.bind({})} {Template.bind({})}