Minor cleanup
This commit is contained in:
parent
f393cfda9f
commit
d38caff28f
|
@ -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) {
|
||||||
|
|
|
@ -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) => {
|
||||||
|
|
|
@ -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,
|
||||||
|
|
|
@ -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}>
|
||||||
|
|
Loading…
Reference in New Issue
Block a user