Minor cleanup
This commit is contained in:
parent
f393cfda9f
commit
d38caff28f
|
@ -1,5 +1,4 @@
|
|||
import * as React from "react";
|
||||
import _ from "lodash";
|
||||
import type { Spec } from "vega";
|
||||
import {
|
||||
Distribution,
|
||||
|
@ -31,8 +30,19 @@ export const FunctionChart: React.FC<FunctionChartProps> = ({
|
|||
environment,
|
||||
height,
|
||||
}: FunctionChartProps) => {
|
||||
let result = runForeign(fn, [chartSettings.start], environment);
|
||||
let resultType = result.tag === "Ok" ? result.value.tag : "Error";
|
||||
let result1 = runForeign(fn, [chartSettings.start], environment);
|
||||
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 = () => {
|
||||
switch (resultType) {
|
||||
|
|
|
@ -51,10 +51,13 @@ interface FunctionChartProps {
|
|||
type point = { x: number; value: result<number, string> };
|
||||
|
||||
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(
|
||||
chartSettings.start,
|
||||
chartSettings.stop,
|
||||
chartSettings.count
|
||||
adjustedCount
|
||||
);
|
||||
|
||||
let chartPointsData: point[] = chartPointsToRender.map((x) => {
|
||||
|
|
|
@ -172,7 +172,7 @@ const SquiggleItem: React.FC<SquiggleItemProps> = ({
|
|||
<SquiggleItem
|
||||
expression={r}
|
||||
width={width !== undefined ? width - 20 : width}
|
||||
height={50}
|
||||
height={height / 3}
|
||||
showTypes={showTypes}
|
||||
showSummary={showSummary}
|
||||
showControls={showControls}
|
||||
|
@ -204,6 +204,7 @@ const SquiggleItem: React.FC<SquiggleItemProps> = ({
|
|||
}
|
||||
case "lambda":
|
||||
return (
|
||||
<VariableBox heading="Function" showTypes={showTypes}>
|
||||
<FunctionChart
|
||||
fn={expression.value}
|
||||
chartSettings={chartSettings}
|
||||
|
@ -213,6 +214,7 @@ const SquiggleItem: React.FC<SquiggleItemProps> = ({
|
|||
xyPointLength: environment.xyPointLength / 10,
|
||||
}}
|
||||
/>
|
||||
</VariableBox>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
@ -255,7 +257,7 @@ export const SquiggleChart: React.FC<SquiggleChartProps> = ({
|
|||
squiggleString = "",
|
||||
environment,
|
||||
onChange = () => {},
|
||||
height = 60,
|
||||
height = 200,
|
||||
bindings = defaultBindings,
|
||||
jsImports = defaultImports,
|
||||
showSummary = false,
|
||||
|
|
|
@ -78,7 +78,8 @@ interface RowProps {
|
|||
|
||||
const Row = styled.div<RowProps>`
|
||||
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``;
|
||||
|
||||
|
@ -115,10 +116,18 @@ const schema = yup
|
|||
.min(10)
|
||||
.max(10000),
|
||||
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(),
|
||||
showControls: yup.boolean(),
|
||||
showSummary: yup.boolean(),
|
||||
showSettingsPage: yup.boolean().default(false),
|
||||
})
|
||||
.required();
|
||||
|
||||
|
@ -133,9 +142,6 @@ let SquigglePlayground: FC<PlaygroundProps> = ({
|
|||
let [importString, setImportString] = useState("{}");
|
||||
let [imports, setImports] = useState({});
|
||||
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 [diagramStop, setDiagramStop] = useState(10);
|
||||
let [diagramCount, setDiagramCount] = useState(20);
|
||||
|
@ -157,7 +163,8 @@ let SquigglePlayground: FC<PlaygroundProps> = ({
|
|||
showTypes: showTypes,
|
||||
showControls: showControls,
|
||||
showSummary: showSummary,
|
||||
leftSize: 50,
|
||||
leftSizePercent: 50,
|
||||
showSettingsPage: false,
|
||||
},
|
||||
});
|
||||
const vars = useWatch({
|
||||
|
@ -178,22 +185,18 @@ let SquigglePlayground: FC<PlaygroundProps> = ({
|
|||
};
|
||||
return (
|
||||
<ShowBox height={height}>
|
||||
<input type="checkbox" {...register("showSettingsPage")} />
|
||||
<Row leftPercentage={vars.leftSizePercent || 50}>
|
||||
<Col>
|
||||
{vars.showSettingsPage ? (
|
||||
<div>
|
||||
<input type="number" {...register("sampleCount")} />
|
||||
<input type="number" {...register("xyPointLength")} />
|
||||
<input type="number" {...register("chartHeight")} />
|
||||
<input type="number" {...register("leftSize")} />
|
||||
<input type="number" {...register("leftSizePercent")} />
|
||||
<input type="checkbox" {...register("showTypes")} />
|
||||
<input type="checkbox" {...register("showControls")} />
|
||||
<input type="checkbox" {...register("showSummary")} />
|
||||
<Row leftPercentage={vars.leftSize || 50}>
|
||||
<Col>
|
||||
<CodeEditor
|
||||
value={squiggleString}
|
||||
onChange={setSquiggleString}
|
||||
oneLine={false}
|
||||
showGutter={true}
|
||||
height={height - 3}
|
||||
/>
|
||||
<JsonEditor
|
||||
value={importString}
|
||||
onChange={getChangeJson}
|
||||
|
@ -201,7 +204,17 @@ let SquigglePlayground: FC<PlaygroundProps> = ({
|
|||
showGutter={true}
|
||||
height={100}
|
||||
/>
|
||||
{importsAreValid ? "Valid" : "INVALID"}
|
||||
{importsAreValid ? "Valid" : "Invalid"}
|
||||
</div>
|
||||
) : (
|
||||
<CodeEditor
|
||||
value={squiggleString}
|
||||
onChange={setSquiggleString}
|
||||
oneLine={false}
|
||||
showGutter={true}
|
||||
height={height - 3}
|
||||
/>
|
||||
)}
|
||||
</Col>
|
||||
<Col>
|
||||
<Display maxHeight={height - 3}>
|
||||
|
|
Loading…
Reference in New Issue
Block a user