Bug fix to get docs to show correctly

This commit is contained in:
Ozzie Gooen 2022-04-15 14:51:08 -04:00
parent 4918ee790a
commit 3d10d8e6a5
2 changed files with 18 additions and 7 deletions

View File

@ -142,24 +142,24 @@ export const SquiggleChart: React.FC<SquiggleChartProps> = ({
environment = [],
onEnvChange = () => {},
height = 60,
width = NaN,
}: SquiggleChartProps) => {
const target = React.useRef(null);
const [width] = useSize(target);
const [componentWidth] = useSize(target);
// I would have wanted to just use componentWidth, but this created infinite loops with SquiggleChart.stories.
//So you can manually add a width, as an escape hatch.
let _width = width || componentWidth;
let samplingInputs: samplingParams = {
sampleCount: sampleCount,
xyPointLength: outputXYPoints,
};
let expressionResult = run(squiggleString, samplingInputs, environment);
let internal = <></>;
let internal: JSX.Element;
if (expressionResult.tag === "Ok") {
onEnvChange(environment);
let expression = expressionResult.value;
internal = (
<SquiggleItem
expression={expression}
width={width - 20}
height={height}
/>
<SquiggleItem expression={expression} width={_width} height={height} />
);
} else {
// At this point, we came across an error. What was our error?

View File

@ -4,6 +4,11 @@ import { Canvas, Meta, Story, Props } from "@storybook/addon-docs";
<Meta title="Squiggle/SquiggleChart" component={SquiggleChart} />
export const Template = SquiggleChart;
/*
We have to hardcode a width here, because otherwise some interaction with
Storybook creates an infinite loop with the internal width
*/
const width = 500;
# Squiggle Chart
@ -25,6 +30,7 @@ could be continuous, discrete or mixed.
name="Normal"
args={{
squiggleString: "normal(5,2)",
width,
}}
>
{Template.bind({})}
@ -38,6 +44,7 @@ could be continuous, discrete or mixed.
name="Discrete"
args={{
squiggleString: "mx(0, 1, 3, 5, 8, 10, [0.1, 0.8, 0.5, 0.3, 0.2, 0.1])",
width,
}}
>
{Template.bind({})}
@ -52,6 +59,7 @@ could be continuous, discrete or mixed.
args={{
squiggleString:
"mx(0, 1, 3, 5, 8, normal(8, 1), [0.1, 0.3, 0.4, 0.35, 0.2, 0.8])",
width,
}}
>
{Template.bind({})}
@ -68,6 +76,7 @@ to allow large and small numbers being printed cleanly.
name="Constant"
args={{
squiggleString: "500000000",
width,
}}
>
{Template.bind({})}
@ -85,6 +94,7 @@ The default is show 10 points between 0 and 10.
name="Function"
args={{
squiggleString: "f(x) = normal(x^2,(x+.1)^1.8)\nf",
width,
}}
>
{Template.bind({})}
@ -98,6 +108,7 @@ The default is show 10 points between 0 and 10.
name="Error"
args={{
squiggleString: "f(x) = normal(",
width,
}}
>
{Template.bind({})}