Mobile support

packages/components/src/components/DistributionChart.tsx

@@ -6,7 +6,6 @@ import { distributionErrorToString } from "@quri/squiggle-lang";
 import { createClassFromSpec } from "react-vega";
 import * as chartSpecification from "../vega-specs/spec-distributions.json";
 import { ErrorBox } from "./ErrorBox";
-import styled from "styled-components";
 
 let SquiggleVegaChart = createClassFromSpec({
   spec: chartSpecification as Spec,
@@ -14,18 +13,34 @@ let SquiggleVegaChart = createClassFromSpec({
 
 type DistributionChartProps = {
   distribution: Distribution;
-  width: number;
+  width?: number;
   height: number;
 };
 
 export const DistributionChart: React.FC<DistributionChartProps> = ({
   distribution,
-  width,
   height,
+  width,
 }: DistributionChartProps) => {
+  // This code with refs and effects is a bit messy, and it's because we were
+  // having a large amount of trouble getting vega charts to be responsive. This
+  // is the solution we ended up with
+  const ref = React.useRef(null);
+  const [actualWidth, setActualWidth] = React.useState(undefined);
+
+  React.useEffect(() => {
+    // @ts-ignore
+    let getWidth = () => (ref.current ? ref.current.offsetWidth : 0);
+
+    window.addEventListener("resize", () => setActualWidth(getWidth()));
+
+    setActualWidth(getWidth());
+  }, [ref.current]);
+
   let shape = distribution.pointSet();
   if (shape.tag === "Ok") {
-    let widthProp = width ? width - 20 : undefined;
+    let widthProp = width ? width - 20 : actualWidth;
+    console.log("widthProp", widthProp);
     var result = (
       <SquiggleVegaChart
         data={{ con: shape.value.continuous, dis: shape.value.discrete }}
@@ -41,5 +56,5 @@ export const DistributionChart: React.FC<DistributionChartProps> = ({
       </ErrorBox>
     );
   }
-  return result;
+  return <div ref={ref}>{result}</div>;
 };

packages/components/src/components/SquiggleChart.tsx

@@ -52,7 +52,7 @@ let RecordKeyHeader = styled.h3``;
 export interface SquiggleItemProps {
   /** The input string for squiggle */
   expression: squiggleExpression;
-  width: number;
+  width?: number;
   height: number;
 }
 
@@ -105,7 +105,11 @@ const SquiggleItem: React.FC<SquiggleItemProps> = ({
       return (
         <VariableBox heading="Array">
           {expression.value.map((r) => (
-            <SquiggleItem expression={r} width={width - 20} height={50} />
+            <SquiggleItem
+              expression={r}
+              width={width ? width - 20 : width}
+              height={50}
+            />
           ))}
         </VariableBox>
       );
@@ -115,7 +119,11 @@ const SquiggleItem: React.FC<SquiggleItemProps> = ({
           {Object.entries(expression.value).map(([key, r]) => (
             <>
               <RecordKeyHeader>{key}</RecordKeyHeader>
-              <SquiggleItem expression={r} width={width - 20} height={50} />
+              <SquiggleItem
+                expression={r}
+                width={width ? width - 20 : width}
+                height={50}
+              />
             </>
           ))}
         </VariableBox>
@@ -144,8 +152,6 @@ export interface SquiggleChartProps {
   diagramStop?: number;
   /** If the result is a function, how many points along the function it samples */
   diagramCount?: number;
-  /** variables declared before this expression */
-  environment?: unknown;
   /** When the environment changes */
   onChange?(expr: squiggleExpression): void;
   /** CSS width of the element */
@@ -171,7 +177,7 @@ export const SquiggleChart: React.FC<SquiggleChartProps> = ({
   height = 60,
   bindings = defaultBindings,
   jsImports = defaultImports,
-  width = NaN,
+  width,
 }: SquiggleChartProps) => {
   let samplingInputs: samplingParams = {
     sampleCount: sampleCount,

packages/components/src/components/SquiggleEditor.tsx

@@ -32,16 +32,14 @@ export interface SquiggleEditorProps {
   diagramStop?: number;
   /** If the result is a function, how many points along the function it samples */
   diagramCount?: number;
-  /** The environment, other variables that were already declared */
-  environment?: unknown;
   /** when the environment changes. Used again for notebook magic*/
   onChange?(expr: squiggleExpression): void;
   /** The width of the element */
   width: number;
   /** Previous variable declarations */
-  bindings: bindings;
+  bindings?: bindings;
   /** JS Imports */
-  jsImports: jsImports;
+  jsImports?: jsImports;
 }
 
 const Input = styled.div`
@@ -52,7 +50,7 @@ const Input = styled.div`
 
 export let SquiggleEditor: React.FC<SquiggleEditorProps> = ({
   initialSquiggleString = "",
-  width = 500,
+  width,
   sampleCount,
   outputXYPoints,
   kernelWidth,
@@ -61,7 +59,6 @@ export let SquiggleEditor: React.FC<SquiggleEditorProps> = ({
   diagramStop,
   diagramCount,
   onChange,
-  environment,
   bindings = defaultBindings,
   jsImports = defaultImports,
 }: SquiggleEditorProps) => {
@@ -87,7 +84,6 @@ export let SquiggleEditor: React.FC<SquiggleEditorProps> = ({
         diagramStart={diagramStart}
         diagramStop={diagramStop}
         diagramCount={diagramCount}
-        environment={environment}
         onChange={onChange}
         bindings={bindings}
         jsImports={jsImports}