Changed squiggle display heights to be more reasonable

packages/components/src/components/SquiggleEditor.tsx

@@ -26,6 +26,7 @@ export interface SquiggleEditorProps {
   diagramStart?: number;
   /** If the result is a function, where the function ends */
   diagramStop?: number;
+  height?: number;
   /** If the result is a function, how many points along the function it samples */
   diagramCount?: number;
   /** when the environment changes. Used again for notebook magic*/
@@ -51,6 +52,7 @@ export let SquiggleEditor: React.FC<SquiggleEditorProps> = ({
   diagramStart = 0,
   diagramStop = 10,
   diagramCount = 20,
+  height = 200,
   onChange,
   bindings = defaultBindings,
   jsImports = defaultImports,
@@ -78,6 +80,7 @@ export let SquiggleEditor: React.FC<SquiggleEditorProps> = ({
         </div>
         <SquiggleChart
           width={width}
+          height={height}
           environment={environment}
           squiggleString={expression}
           chartSettings={chartSettings}

packages/website/docs/Guides/DistributionCreation.mdx

@@ -22,22 +22,26 @@ If both values are above zero, a `lognormal` distribution is used. If not, a `no
     When <code>5 to 10</code> is entered, both numbers are positive, so it
     generates a lognormal distribution with 5th and 95th percentiles at 5 and
     10.
-    <SquiggleEditor initialSquiggleString="5 to 10" />
+    <SquiggleEditor initialSquiggleString="5 to 10" height={60} />
   </TabItem>
   <TabItem value="ex3" label="to(5,10)">
     <code>5 to 10</code> does the same thing as <code>to(5,10)</code>.
-    <SquiggleEditor initialSquiggleString="to(5,10)" />
+    <SquiggleEditor initialSquiggleString="to(5,10)" height={60} width={600} />
   </TabItem>
   <TabItem value="ex2" label="-5 to 5">
     When <code>-5 to 5</code> is entered, there's negative values, so it
     generates a normal distribution. This has 5th and 95th percentiles at 5 and
     10.
-    <SquiggleEditor initialSquiggleString="-5 to -3" />
+    <SquiggleEditor initialSquiggleString="-5 to -3" height={60} width={600} />
   </TabItem>
   <TabItem value="ex4" label="1 to 10000">
     It's very easy to generate distributions with very long tails. If this
     happens, you can click the "log x scale" box to view this using a log scale.
-    <SquiggleEditor initialSquiggleString="1 to 10000" />
+    <SquiggleEditor
+      initialSquiggleString="1 to 10000"
+      height={60}
+      width={600}
+    />
   </TabItem>
 </Tabs>
 
@@ -76,16 +80,31 @@ The `mixture` mixes combines multiple distributions to create a mixture. You can
 
 <Tabs>
   <TabItem value="ex1" label="Simple" default>
-    <SquiggleEditor initialSquiggleString="mixture(1 to 2, 5 to 8, 9 to 10)" />
+    <SquiggleEditor
+      initialSquiggleString="mixture(1 to 2, 5 to 8, 9 to 10)"
+      height={60}
+    />
   </TabItem>
   <TabItem value="ex2" label="With Weights">
-    <SquiggleEditor initialSquiggleString="mixture(1 to 2, 5 to 8, 9 to 10, [0.1, 0.1, 0.8])" />
+    <SquiggleEditor
+      initialSquiggleString="mixture(1 to 2, 5 to 8, 9 to 10, [0.1, 0.1, 0.8])"
+      height={60}
+      width={600}
+    />
   </TabItem>
   <TabItem value="ex3" label="With Continuous and Discrete Inputs">
-    <SquiggleEditor initialSquiggleString="mixture(1 to 5, 8 to 10, 1, 3, 20)" />
+    <SquiggleEditor
+      initialSquiggleString="mixture(1 to 5, 8 to 10, 1, 3, 20)"
+      height={60}
+      width={600}
+    />
   </TabItem>
   <TabItem value="ex4" label="Array of Distributions Input">
-    <SquiggleEditor initialSquiggleString="mx([1 to 2, exponential(1)], [1,1])" />
+    <SquiggleEditor
+      initialSquiggleString="mx([1 to 2, exponential(1)], [1,1])"
+      height={60}
+      width={600}
+    />
   </TabItem>
 </Tabs>
 
@@ -113,7 +132,7 @@ The `mixture` mixes combines multiple distributions to create a mixture. You can
   <SquiggleEditor
     initialSquiggleString={`hours_the_project_will_take = 5 to 20
 chance_of_doing_anything = 0.8
-mx(hours_the_project_will_take, 0, [chance_of_doing_anything, 1 - chance_of_doing_anything])`}
+mx(hours_the_project_will_take, 0, [chance_of_doing_anything, 1 - chance_of_doing_anything])`} height={60}
   />
 </details>
 
@@ -128,7 +147,7 @@ mx(hours_the_project_will_take, 0, [chance_of_doing_anything, 1 - chance_of_doin
   initialSquiggleString={`forecast = 3 to 30
 chance_completely_wrong = 0.05
 forecast_if_completely_wrong = -100 to 200
-mx(forecast, forecast_if_completely_wrong, [1-chance_completely_wrong, chance_completely_wrong])`}
+mx(forecast, forecast_if_completely_wrong, [1-chance_completely_wrong, chance_completely_wrong])`} height={60}
 />
 
 </details>
@@ -141,10 +160,14 @@ Creates a [normal distribution](https://en.wikipedia.org/wiki/Normal_distributio
 
 <Tabs>
   <TabItem value="ex1" label="normal(5,1)" default>
-    <SquiggleEditor initialSquiggleString="normal(5, 1)" />
+    <SquiggleEditor initialSquiggleString="normal(5, 1)" height={60} />
   </TabItem>
   <TabItem value="ex2" label="normal(100000000000, 100000000000)">
-    <SquiggleEditor initialSquiggleString="normal(100000000000, 100000000000)" />
+    <SquiggleEditor
+      initialSquiggleString="normal(100000000000, 100000000000)"
+      height={60}
+      width={600}
+    />
   </TabItem>
 </Tabs>
 
@@ -165,7 +188,7 @@ Creates a [log-normal distribution](https://en.wikipedia.org/wiki/Log-normal_dis
 you take the log of our lognormal distribution. They can be difficult to directly reason about.
 Because of this complexity, we recommend typically using the <a href="#to">to</a> syntax instead of estimating `mu` and `sigma` directly.
 
-<SquiggleEditor initialSquiggleString="lognormal(0, 0.7)" />
+<SquiggleEditor initialSquiggleString="lognormal(0, 0.7)" height={60} />
 
 ### Arguments
 
@@ -189,7 +212,8 @@ Because of this complexity, we recommend typically using the <a href="#to">to</a
 normalStdDev = 2
 logOfLognormal = log(lognormal(normalMean, normalStdDev))
 [logOfLognormal, normal(normalMean, normalStdDev)]`}
-  />
+  />{" "}
+  height={60}
 </details>
 
 ## Uniform
@@ -198,7 +222,7 @@ logOfLognormal = log(lognormal(normalMean, normalStdDev))
 
 Creates a [uniform distribution](<https://en.wikipedia.org/wiki/Uniform_distribution_(continuous)>) with the given low and high values.
 
-<SquiggleEditor initialSquiggleString="uniform(3,7)" />
+<SquiggleEditor initialSquiggleString="uniform(3,7)" height={60} />
 
 ### Arguments
 
@@ -236,19 +260,35 @@ with values at 1 and 2. Therefore, this is the same as `mixture(pointMass(1),poi
 
 <Tabs>
   <TabItem value="ex1" label="pointMass(3)" default>
-    <SquiggleEditor initialSquiggleString="pointMass(3)" />
+    <SquiggleEditor initialSquiggleString="pointMass(3)" height={60} />
   </TabItem>
   <TabItem value="ex3" label="mixture(1,3,5)">
-    <SquiggleEditor initialSquiggleString="mixture(1,3,5)" />
+    <SquiggleEditor
+      initialSquiggleString="mixture(1,3,5)"
+      height={60}
+      width={600}
+    />
   </TabItem>
   <TabItem value="ex2" label="normal(5,2) * 6">
-    <SquiggleEditor initialSquiggleString="normal(5,2) * 6" />
+    <SquiggleEditor
+      initialSquiggleString="normal(5,2) * 6"
+      height={60}
+      width={600}
+    />
   </TabItem>
   <TabItem value="ex4" label="dotAdd(normal(5,2), 6)">
-    <SquiggleEditor initialSquiggleString="dotAdd(normal(5,2), 6)" />
+    <SquiggleEditor
+      initialSquiggleString="dotAdd(normal(5,2), 6)"
+      height={60}
+      width={600}
+    />
   </TabItem>
   <TabItem value="ex5" label="dotMultiply(normal(5,2), 6)">
-    <SquiggleEditor initialSquiggleString="dotMultiply(normal(5,2), 6)" />
+    <SquiggleEditor
+      initialSquiggleString="dotMultiply(normal(5,2), 6)"
+      height={60}
+      width={600}
+    />
   </TabItem>
 </Tabs>
 
@@ -264,19 +304,35 @@ Creates a [beta distribution](https://en.wikipedia.org/wiki/Beta_distribution) w
 
 <Tabs>
   <TabItem value="ex1" label="beta(10, 20)" default>
-    <SquiggleEditor initialSquiggleString="beta(10,20)" />
+    <SquiggleEditor initialSquiggleString="beta(10,20)" height={60} />
   </TabItem>
   <TabItem value="ex2" label="beta(1000, 1000)">
-    <SquiggleEditor initialSquiggleString="beta(1000, 2000)" />
+    <SquiggleEditor
+      initialSquiggleString="beta(1000, 2000)"
+      height={60}
+      width={600}
+    />
   </TabItem>
   <TabItem value="ex3" label="beta(1, 10)">
-    <SquiggleEditor initialSquiggleString="beta(1, 10)" />
+    <SquiggleEditor
+      initialSquiggleString="beta(1, 10)"
+      height={60}
+      width={600}
+    />
   </TabItem>
   <TabItem value="ex4" label="beta(10, 1)">
-    <SquiggleEditor initialSquiggleString="beta(10, 1)" />
+    <SquiggleEditor
+      initialSquiggleString="beta(10, 1)"
+      height={60}
+      width={600}
+    />
   </TabItem>
   <TabItem value="ex5" label="beta(0.8, 0.8)">
-    <SquiggleEditor initialSquiggleString="beta(0.8, 0.8)" />
+    <SquiggleEditor
+      initialSquiggleString="beta(0.8, 0.8)"
+      height={60}
+      width={600}
+    />
   </TabItem>
 </Tabs>
 
@@ -295,16 +351,28 @@ Creates a [beta distribution](https://en.wikipedia.org/wiki/Beta_distribution) w
     <summary>Examples</summary>
     <Tabs>
       <TabItem value="ex1" label="beta(0.3, 0.3)" default>
-        <SquiggleEditor initialSquiggleString="beta(0.3, 0.3)" />
+        <SquiggleEditor initialSquiggleString="beta(0.3, 0.3)" height={60} />
       </TabItem>
       <TabItem value="ex2" label="beta(0.5, 0.5)">
-        <SquiggleEditor initialSquiggleString="beta(0.5, 0.5)" />
+        <SquiggleEditor
+          initialSquiggleString="beta(0.5, 0.5)"
+          height={60}
+          width={600}
+        />
       </TabItem>
       <TabItem value="ex3" label="beta(0.8, 0.8)">
-        <SquiggleEditor initialSquiggleString="beta(.8,.8)" />
+        <SquiggleEditor
+          initialSquiggleString="beta(.8,.8)"
+          height={60}
+          width={600}
+        />
       </TabItem>
       <TabItem value="ex4" label="beta(0.9, 0.9)">
-        <SquiggleEditor initialSquiggleString="beta(.9,.9)" />
+        <SquiggleEditor
+          initialSquiggleString="beta(.9,.9)"
+          height={60}
+          width={600}
+        />
       </TabItem>
     </Tabs>
   </details>
@@ -316,7 +384,7 @@ Creates a [beta distribution](https://en.wikipedia.org/wiki/Beta_distribution) w
 
 Creates an [exponential distribution](https://en.wikipedia.org/wiki/Exponential_distribution) with the given rate.
 
-<SquiggleEditor initialSquiggleString="exponential(4)" />
+<SquiggleEditor initialSquiggleString="exponential(4)" height={60} />
 
 ### Arguments
 
@@ -334,7 +402,7 @@ Creates a [triangular distribution](https://en.wikipedia.org/wiki/Triangular_dis
 - `mode`: Number greater than `low`
 - `high`: Number greater than `mode`
 
-<SquiggleEditor initialSquiggleString="triangular(1, 2, 4)" />
+<SquiggleEditor initialSquiggleString="triangular(1, 2, 4)" height={60} />
 
 ## FromSamples
 
@@ -342,7 +410,10 @@ Creates a [triangular distribution](https://en.wikipedia.org/wiki/Triangular_dis
 
 Creates a sample set distribution using an array of samples.
 
-<SquiggleEditor initialSquiggleString="fromSamples([1,2,3,4,6,5,5,5])" />
+<SquiggleEditor
+  initialSquiggleString="fromSamples([1,2,3,4,6,5,5,5])"
+  height={60}
+/>
 
 ### Arguments
 

packages/website/docs/Guides/Functions.mdx

@@ -19,6 +19,7 @@ chosen from the second distribution.
   initialSquiggleString={`dist1 = 1 to 10
 dist2 = triangular(1,2,3)
 dist1 + dist2`}
+  height={60}
 />
 
 ### Subtraction
@@ -31,6 +32,7 @@ the value of one random sample chosen from the second distribution.
   initialSquiggleString={`dist1 = 1 to 10
 dist2 = triangular(1,2,3)
 dist1 - dist2`}
+  height={60}
 />
 
 ### Multiplication
@@ -43,12 +45,9 @@ chosen from the second distribution.
   initialSquiggleString={`dist1 = 1 to 10
 dist2 = triangular(1,2,3)
 dist1 * dist2`}
+  height={60}
 />
 
-We also provide concatenation of two distributions as a syntax sugar for `*`
-
-<SquiggleEditor initialSquiggleString="(0.1 to 1) triangular(1,2,3)" />
-
 ### Division
 
 A proportional scaling (normally a shrinking if the second distribution has values higher than 1).
@@ -61,6 +60,7 @@ tends to be particularly unstable.
   initialSquiggleString={`dist1 = 1 to 10
 dist2 = triangular(1,2,3)
 dist1 / dist2`}
+  height={60}
 />
 
 ### Exponentiation
@@ -69,13 +69,14 @@ A projection over a contracted x-axis. The exponentiation operation represents t
 the exponentiation of the value of one random sample chosen from the first distribution to the power of
 the value one random sample chosen from the second distribution.
 
-<SquiggleEditor initialSquiggleString={`(0.1 to 1) ^ beta(2, 3)`} />
+<SquiggleEditor initialSquiggleString={`(0.1 to 1) ^ beta(2, 3)`} height={60} />
 
 ### Taking the base `e` exponential
 
 <SquiggleEditor
   initialSquiggleString={`dist = triangular(1,2,3)
 exp(dist)`}
+  height={60}
 />
 
 ### Taking logarithms
@@ -85,19 +86,22 @@ A projection over a stretched x-axis.
 <SquiggleEditor
   initialSquiggleString={`dist = triangular(1,2,3)
 log(dist)`}
+  height={60}
 />
 
 <SquiggleEditor
-  initialSquiggleString={`dist = beta(1,2)
+  initialSquiggleString={`dist = beta(1,2)+1
 log10(dist)`}
+  height={60}
 />
 
 Base `x`
 
 <SquiggleEditor
   initialSquiggleString={`x = 2
-dist = beta(2,3)
+dist = beta(2,3)+1
 log(dist, x)`}
+  height={60}
 />
 
 #### Validity
@@ -111,22 +115,20 @@ For every point on the x-axis, operate the corresponding points in the y axis of
 
 **Pointwise operations are done with `PointSetDist` internals rather than `SampleSetDist` internals**.
 
-TODO: this isn't in the new interpreter/parser yet.
-
 <SquiggleEditor
   initialSquiggleString={`dist1 = 1 to 10
 dist2 = triangular(1,2,3)
 dist1 .+ dist2`}
+  height={60}
 />
 
 ### Pointwise subtraction
 
-TODO: this isn't in the new interpreter/parser yet.
-
 <SquiggleEditor
   initialSquiggleString={`dist1 = 1 to 10
 dist2 = triangular(1,2,3)
 dist1 .- dist2`}
+  height={60}
 />
 
 ### Pointwise multiplication
@@ -135,6 +137,7 @@ dist1 .- dist2`}
   initialSquiggleString={`dist1 = 1 to 10
 dist2 = triangular(1,2,3)
 dist1 .* dist2`}
+  height={60}
 />
 
 ### Pointwise division
@@ -143,6 +146,7 @@ dist1 .* dist2`}
   initialSquiggleString={`dist1 = uniform(0,20)
 dist2 = normal(10,8)
 dist1 ./ dist2`}
+  height={60}
 />
 
 ### Pointwise exponentiation
@@ -151,6 +155,7 @@ dist1 ./ dist2`}
   initialSquiggleString={`dist1 = 1 to 10
 dist2 = triangular(1,2,3)
 dist1 .^ dist2`}
+  height={60}
 />
 
 ## Standard functions on distributions
@@ -160,7 +165,7 @@ dist1 .^ dist2`}
 The `pdf(dist, x)` function returns the density of a distribution at the
 given point x.
 
-<SquiggleEditor initialSquiggleString="pdf(normal(0,1),0)" />
+<SquiggleEditor initialSquiggleString="pdf(normal(0,1),0)" height={60} />
 
 #### Validity
 
@@ -172,7 +177,7 @@ given point x.
 The `cdf(dist, x)` gives the cumulative probability of the distribution
 or all values lower than x. It is the inverse of `quantile`.
 
-<SquiggleEditor initialSquiggleString="cdf(normal(0,1),0)" />
+<SquiggleEditor initialSquiggleString="cdf(normal(0,1),0)" height={60} />
 
 #### Validity
 
@@ -185,7 +190,7 @@ The `quantile(dist, prob)` gives the value x or which the probability for all va
 lower than x is equal to prob. It is the inverse of `cdf`. In the literature, it
 is also known as the quantiles function.
 
-<SquiggleEditor initialSquiggleString="quantile(normal(0,1),0.5)" />
+<SquiggleEditor initialSquiggleString="quantile(normal(0,1),0.5)" height={60} />
 
 #### Validity
 
@@ -196,29 +201,35 @@ is also known as the quantiles function.
 
 The `mean(distribution)` function gives the mean (expected value) of a distribution.
 
-<SquiggleEditor initialSquiggleString="mean(normal(5, 10))" />
+<SquiggleEditor initialSquiggleString="mean(normal(5, 10))" height={60} />
 
 ### Sampling a distribution
 
 The `sample(distribution)` samples a given distribution.
 
-<SquiggleEditor initialSquiggleString="sample(normal(0, 10))" />
+<SquiggleEditor initialSquiggleString="sample(normal(0, 10))" height={60} />
 
 ## Converting between distribution formats
 
 Recall the [three formats of distributions](https://develop--squiggle-documentation.netlify.app/docs/Discussions/Three-Types-Of-Distributions). We can force any distribution into `SampleSet` format
 
-<SquiggleEditor initialSquiggleString="toSampleSet(normal(5, 10))" />
+<SquiggleEditor
+  initialSquiggleString="toSampleSet(normal(5, 10))"
+  height={60}
+/>
 
 Or `PointSet` format
 
-<SquiggleEditor initialSquiggleString="toPointSet(normal(5, 10))" />
+<SquiggleEditor initialSquiggleString="toPointSet(normal(5, 10))" height={60} />
 
 ### `toSampleSet` has two signatures
 
 Above, we saw the unary `toSampleSet`, which uses an internal hardcoded number of samples. If you'd like to provide the number of samples, it has a binary signature as well (floored)
 
-<SquiggleEditor initialSquiggleString="[toSampleSet(0.1 to 1, 100.1), toSampleSet(0.1 to 1, 5000), toSampleSet(0.1 to 1, 20000)]" />
+<SquiggleEditor
+  initialSquiggleString="[toSampleSet(0.1 to 1, 100.1), toSampleSet(0.1 to 1, 5000), toSampleSet(0.1 to 1, 20000)]"
+  height={60}
+/>
 
 #### Validity
 
@@ -230,13 +241,19 @@ Some distribution operations (like horizontal shift) return an unnormalized dist
 
 We provide a `normalize` function
 
-<SquiggleEditor initialSquiggleString="normalize((0.1 to 1) + triangular(0.1, 1, 10))" />
+<SquiggleEditor
+  initialSquiggleString="normalize((0.1 to 1) + triangular(0.1, 1, 10))"
+  height={60}
+/>
 
 #### Validity - Input to `normalize` must be a dist
 
 We provide a predicate `isNormalized`, for when we have simple control flow
 
-<SquiggleEditor initialSquiggleString="isNormalized((0.1 to 1) * triangular(0.1, 1, 10))" />
+<SquiggleEditor
+  initialSquiggleString="isNormalized((0.1 to 1) * triangular(0.1, 1, 10))"
+  height={60}
+/>
 
 #### Validity
 
@@ -246,20 +263,28 @@ We provide a predicate `isNormalized`, for when we have simple control flow
 
 You may like to debug by right clicking your browser and using the _inspect_ functionality on the webpage, and viewing the _console_ tab. Then, wrap your squiggle output with `inspect` to log an internal representation.
 
-<SquiggleEditor initialSquiggleString="inspect(toSampleSet(0.1 to 1, 100))" />
+<SquiggleEditor
+  initialSquiggleString="inspect(toSampleSet(0.1 to 1, 100))"
+  height={60}
+/>
 
 Save for a logging side effect, `inspect` does nothing to input and returns it.
 
 ## Truncate
 
-You can cut off from the left
+You can truncate the left side, the right side, or both.
 
-<SquiggleEditor initialSquiggleString="truncateLeft(0.1 to 1, 0.5)" />
+<SquiggleEditor
+  initialSquiggleString="truncateLeft(0.1 to 1, 0.5)"
+  height={40}
+/>
 
-You can cut off from the right
+<SquiggleEditor
+  initialSquiggleString="truncateRight(0.1 to 1, 0.5)"
+  height={40}
+/>
 
-<SquiggleEditor initialSquiggleString="truncateRight(0.1 to 1, 0.5)" />
+<SquiggleEditor
-
+  initialSquiggleString="truncate(0.1 to 1, 0.5, 1.5)"
-You can cut off from both sides
+  height={40}
-
+/>
-<SquiggleEditor initialSquiggleString="truncate(0.1 to 1, 0.5, 1.5)" />