Bug fix to get docs to show correctly

packages/components/src/components/SquiggleChart.tsx

@@ -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
+      <SquiggleItem expression={expression} width={_width} height={height} />
-        expression={expression}
-        width={width - 20}
-        height={height}
-      />
     );
   } else {
     // At this point, we came across an error. What was our error?

packages/components/src/stories/SquiggleChart.stories.mdx

@@ -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({})}