fixed width stuff, playground, and fonts after antd factor-out

Value: [1e-3 to 2e-2]

packages/components/src/components/DistributionChart.tsx

@@ -6,6 +6,7 @@ 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,
@@ -24,19 +25,21 @@ export const DistributionChart: React.FC<DistributionChartProps> = ({
 }: DistributionChartProps) => {
   let shape = distribution.pointSet();
   if (shape.tag === "Ok") {
-    return (
+    let widthProp = width ? width - 20 : undefined;
+    var result = (
       <SquiggleVegaChart
         data={{ con: shape.value.continuous, dis: shape.value.discrete }}
-        width={width - 20}
+        width={widthProp}
         height={height}
         actions={false}
       />
     );
   } else {
-    return (
+    var result = (
       <ErrorBox heading="Distribution Error">
         {distributionErrorToString(shape.value)}
       </ErrorBox>
     );
   }
+  return result;
 };

packages/components/src/components/SquiggleChart.tsx

@@ -150,6 +150,12 @@ export interface SquiggleChartProps {
   height?: number;
 }
 
+const ChartWrapper = styled.div`
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
+    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+`;
+
 export const SquiggleChart: React.FC<SquiggleChartProps> = ({
   squiggleString = "",
   sampleCount = 1000,
@@ -158,11 +164,6 @@ export const SquiggleChart: React.FC<SquiggleChartProps> = ({
   height = 60,
   width = NaN,
 }: SquiggleChartProps) => {
-  const target = React.useRef(null);
-  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,
@@ -173,15 +174,14 @@ export const SquiggleChart: React.FC<SquiggleChartProps> = ({
     let expression = expressionResult.value;
     onChange(expression);
     internal = (
-      <SquiggleItem expression={expression} width={_width} height={height} />
+      <SquiggleItem expression={expression} width={width} height={height} />
     );
   } else {
-    // At this point, we came across an error. What was our error?
     internal = (
       <ErrorBox heading={"Parse Error"}>
         {errorValueToString(expressionResult.value)}
       </ErrorBox>
     );
   }
-  return <div ref={target}>{internal}</div>;
+  return <ChartWrapper>{internal}</ChartWrapper>;
 };

packages/components/src/components/SquigglePlayground.tsx

@@ -3,9 +3,7 @@ import React, { FC, ReactElement, useState } from "react";
 import ReactDOM from "react-dom";
 import { SquiggleChart } from "./SquiggleChart";
 import CodeEditor from "./CodeEditor";
-// import { Form, Input, Row, Col } from "antd";
 import styled from "styled-components";
-// import "antd/dist/antd.css";
 
 interface FieldFloatProps {
   label: string;
@@ -14,14 +12,14 @@ interface FieldFloatProps {
   onChange: (value: number) => void;
 }
 
-const Input = styled.input``
+const Input = styled.input``;
 
-const FormItem = (props: {label:string, children:ReactElement}) => (
+const FormItem = (props: { label: string; children: ReactElement }) => (
   <div>
     <label>{props.label}</label>
     {props.children}
-    </div>
-)
+  </div>
+);
 
 function FieldFloat(Props: FieldFloatProps) {
   let [contents, setContents] = useState(Props.value + "");
@@ -74,8 +72,11 @@ const Display = styled.div<TitleProps>`
   max-height: ${(props) => props.maxHeight}px;
 `;
 
-const Row = styled.div``
-const Col = styled.div``
+const Row = styled.div`
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+`;
+const Col = styled.div``;
 
 let SquigglePlayground: FC<Props> = ({
   initialSquiggleString = "",

packages/components/src/vega-specs/spec-distributions.json

@@ -3,6 +3,7 @@
   "description": "A basic area chart example",
   "width": 500,
   "height": 100,
+  "autosize": "fit",
   "padding": 5,
   "data": [
     {