Minor cleanup

This commit is contained in:
Ozzie Gooen 2022-05-26 16:16:40 -04:00
parent f393cfda9f
commit d38caff28f
4 changed files with 72 additions and 44 deletions

View File

@ -1,5 +1,4 @@
import * as React from "react"; import * as React from "react";
import _ from "lodash";
import type { Spec } from "vega"; import type { Spec } from "vega";
import { import {
Distribution, Distribution,
@ -31,8 +30,19 @@ export const FunctionChart: React.FC<FunctionChartProps> = ({
environment, environment,
height, height,
}: FunctionChartProps) => { }: FunctionChartProps) => {
let result = runForeign(fn, [chartSettings.start], environment); let result1 = runForeign(fn, [chartSettings.start], environment);
let resultType = result.tag === "Ok" ? result.value.tag : "Error"; let result2 = runForeign(fn, [chartSettings.stop], environment);
let getValidResult = () => {
if (result1.tag === "Ok") {
return result1;
} else if (result2.tag === "Ok") {
return result2;
} else {
return result1;
}
};
let validResult = getValidResult();
let resultType = validResult.tag === "Ok" ? validResult.value.tag : "Error";
let comp = () => { let comp = () => {
switch (resultType) { switch (resultType) {

View File

@ -51,10 +51,13 @@ interface FunctionChartProps {
type point = { x: number; value: result<number, string> }; type point = { x: number; value: result<number, string> };
let getFunctionImage = ({ chartSettings, fn, environment }) => { let getFunctionImage = ({ chartSettings, fn, environment }) => {
//We adjust the count, because the count is made for distributions, which are much more expensive to estimate
let adjustedCount = chartSettings.count * 20;
let chartPointsToRender = _rangeByCount( let chartPointsToRender = _rangeByCount(
chartSettings.start, chartSettings.start,
chartSettings.stop, chartSettings.stop,
chartSettings.count adjustedCount
); );
let chartPointsData: point[] = chartPointsToRender.map((x) => { let chartPointsData: point[] = chartPointsToRender.map((x) => {

View File

@ -172,7 +172,7 @@ const SquiggleItem: React.FC<SquiggleItemProps> = ({
<SquiggleItem <SquiggleItem
expression={r} expression={r}
width={width !== undefined ? width - 20 : width} width={width !== undefined ? width - 20 : width}
height={50} height={height / 3}
showTypes={showTypes} showTypes={showTypes}
showSummary={showSummary} showSummary={showSummary}
showControls={showControls} showControls={showControls}
@ -204,15 +204,17 @@ const SquiggleItem: React.FC<SquiggleItemProps> = ({
} }
case "lambda": case "lambda":
return ( return (
<FunctionChart <VariableBox heading="Function" showTypes={showTypes}>
fn={expression.value} <FunctionChart
chartSettings={chartSettings} fn={expression.value}
height={height} chartSettings={chartSettings}
environment={{ height={height}
sampleCount: environment.sampleCount / 10, environment={{
xyPointLength: environment.xyPointLength / 10, sampleCount: environment.sampleCount / 10,
}} xyPointLength: environment.xyPointLength / 10,
/> }}
/>
</VariableBox>
); );
} }
}; };
@ -255,7 +257,7 @@ export const SquiggleChart: React.FC<SquiggleChartProps> = ({
squiggleString = "", squiggleString = "",
environment, environment,
onChange = () => {}, onChange = () => {},
height = 60, height = 200,
bindings = defaultBindings, bindings = defaultBindings,
jsImports = defaultImports, jsImports = defaultImports,
showSummary = false, showSummary = false,

View File

@ -78,7 +78,8 @@ interface RowProps {
const Row = styled.div<RowProps>` const Row = styled.div<RowProps>`
display: grid; display: grid;
grid-template-columns: ${(p) => p.leftPercentage}% ${(p) => 100 - p.leftPercentage}%; grid-template-columns: ${(p) => p.leftPercentage}% ${(p) =>
100 - p.leftPercentage}%;
`; `;
const Col = styled.div``; const Col = styled.div``;
@ -115,10 +116,18 @@ const schema = yup
.min(10) .min(10)
.max(10000), .max(10000),
chartHeight: yup.number().required().positive().integer().default(350), chartHeight: yup.number().required().positive().integer().default(350),
leftSize: yup.number().required().positive().integer().min(10).max(100).default(50), leftSizePercent: yup
.number()
.required()
.positive()
.integer()
.min(10)
.max(100)
.default(50),
showTypes: yup.boolean(), showTypes: yup.boolean(),
showControls: yup.boolean(), showControls: yup.boolean(),
showSummary: yup.boolean(), showSummary: yup.boolean(),
showSettingsPage: yup.boolean().default(false),
}) })
.required(); .required();
@ -133,9 +142,6 @@ let SquigglePlayground: FC<PlaygroundProps> = ({
let [importString, setImportString] = useState("{}"); let [importString, setImportString] = useState("{}");
let [imports, setImports] = useState({}); let [imports, setImports] = useState({});
let [importsAreValid, setImportsAreValid] = useState(true); let [importsAreValid, setImportsAreValid] = useState(true);
let [showTypesInput, setShowTypesInput] = useState(showTypes);
let [showControlsInput, setShowControlsInput] = useState(showControls);
let [showSummaryInput, setShowSummaryInput] = useState(showSummary);
let [diagramStart, setDiagramStart] = useState(0); let [diagramStart, setDiagramStart] = useState(0);
let [diagramStop, setDiagramStop] = useState(10); let [diagramStop, setDiagramStop] = useState(10);
let [diagramCount, setDiagramCount] = useState(20); let [diagramCount, setDiagramCount] = useState(20);
@ -157,7 +163,8 @@ let SquigglePlayground: FC<PlaygroundProps> = ({
showTypes: showTypes, showTypes: showTypes,
showControls: showControls, showControls: showControls,
showSummary: showSummary, showSummary: showSummary,
leftSize: 50, leftSizePercent: 50,
showSettingsPage: false,
}, },
}); });
const vars = useWatch({ const vars = useWatch({
@ -178,30 +185,36 @@ let SquigglePlayground: FC<PlaygroundProps> = ({
}; };
return ( return (
<ShowBox height={height}> <ShowBox height={height}>
<input type="number" {...register("sampleCount")} /> <input type="checkbox" {...register("showSettingsPage")} />
<input type="number" {...register("xyPointLength")} /> <Row leftPercentage={vars.leftSizePercent || 50}>
<input type="number" {...register("chartHeight")} />
<input type="number" {...register("leftSize")} />
<input type="checkbox" {...register("showTypes")} />
<input type="checkbox" {...register("showControls")} />
<input type="checkbox" {...register("showSummary")} />
<Row leftPercentage={vars.leftSize || 50}>
<Col> <Col>
<CodeEditor {vars.showSettingsPage ? (
value={squiggleString} <div>
onChange={setSquiggleString} <input type="number" {...register("sampleCount")} />
oneLine={false} <input type="number" {...register("xyPointLength")} />
showGutter={true} <input type="number" {...register("chartHeight")} />
height={height - 3} <input type="number" {...register("leftSizePercent")} />
/> <input type="checkbox" {...register("showTypes")} />
<JsonEditor <input type="checkbox" {...register("showControls")} />
value={importString} <input type="checkbox" {...register("showSummary")} />
onChange={getChangeJson} <JsonEditor
oneLine={false} value={importString}
showGutter={true} onChange={getChangeJson}
height={100} oneLine={false}
/> showGutter={true}
{importsAreValid ? "Valid" : "INVALID"} height={100}
/>
{importsAreValid ? "Valid" : "Invalid"}
</div>
) : (
<CodeEditor
value={squiggleString}
onChange={setSquiggleString}
oneLine={false}
showGutter={true}
height={height - 3}
/>
)}
</Col> </Col>
<Col> <Col>
<Display maxHeight={height - 3}> <Display maxHeight={height - 3}>