squiggle/packages/components/src/SquigglePlayground.tsx

import React, { FC, useState } from "react"
import { SquiggleChart } from "./SquiggleChart"
import CodeEditor from "./CodeEditor"
import { Form, Input, Card, Row, Col } from "antd"
import 'antd/dist/antd.css';
import { css } from '@emotion/react'

interface FieldFloatProps {
  label : string,
  className? : string,
  value : number,
  onChange : (value: number) => void,
}

function FieldFloat(Props: FieldFloatProps) {
  let [contents, setContents] = useState(Props.value + "");
  return <Form.Item label={Props.label}>
    <Input 
      value={contents} 
      className={Props.className ? Props.className : ""}
      onChange={(e) => setContents(e.target.value)}
      onBlur={(_) => {
        let result = parseFloat(contents);
        if(result != NaN) {
          Props.onChange(result)
        }
      }}
      />
  </Form.Item> 
}

let rows = css`
  >.antCol:firstChild {
    paddingLeft: 0.25em;
    paddingRight: 0.125em;
  }
  >.antCol:lastChild {
    paddingLeft: 0.125em;
    paddingRight: 0.25em;
  }
  >.antCol:not(:lastChild):not(:lastChild) {
    paddingLeft: 0.125em;
    paddingRight: 0.125em;
  }
  `

let parent = css`
  .antImportNumber {
    width: 100%;
  }

  .anticon {
    verticalAlign: "zero";
  }
  `
var form = css`
  backgroundColor: #eee;
  padding: 1em;
  `
var dist = css`
  padding: 1em;
  `

var spacer = css`
  marginTop: 1em;
  `

var groupA = css`
  .antInputNumberInputs {
    backgroundColor: #fff7db;
  }
  `

var groupB = css`
  .antInputNumberInput {
    backgroundColor: #eaf4ff;
  }
  `

var Styles = {
  rows: rows,
  parent: parent,
  form: form,
  dist: dist,
  spacer: spacer,
  groupA: groupA,
  groupB: groupB
};

interface Props {
  initialSquiggleString : string
}

let SquigglePlayground : FC<Props> = (props) => {
  let [squiggleString, setSquiggleString] = useState(props.initialSquiggleString)
  let [sampleCount, setSampleCount] = useState(1000)
  let [outputXYPoints, setOutputXYPoints] = useState(1000)
  let [pointDistLength, setPointDistLength] = useState(undefined)
  let [kernelWidth, setKernelWidth] = useState(undefined)
  let [diagramStart, setDiagramStart] = useState(0)
  let [diagramStop, setDiagramStop] = useState(10)
  let [diagramCount, setDiagramCount] = useState(20)
  var demoDist = 
    <SquiggleChart
      squiggleString={squiggleString}
      sampleCount={sampleCount}
      outputXYPoints={outputXYPoints}
      diagramStart={diagramStart}
      diagramStop={diagramStop}
      diagramCount={diagramCount}
      pointDistLength={pointDistLength}
      />
  return (
    <Row>
      <Col span={12}>
        <Card
          title="Distribution Form">
          <Form>
            <Row css={Styles.rows} >
              <Col span={24}> 
                <CodeEditor value={squiggleString} onChange={setSquiggleString} oneLine={false}/> </Col>
            </Row>
            <Row css={Styles.rows}>
              <Col span={12}> 
                <FieldFloat 
                  value={sampleCount} 
                  label="Sample Count"
                  onChange={setSampleCount}
                  /> </Col>
              <Col span={12}>
                <FieldFloat
                  value={outputXYPoints}
                  onChange={setOutputXYPoints}
                  label="Output XY-points" />
              </Col>
              <Col span={12}>
                <FieldFloat 
                   value={pointDistLength}
                   onChange={setPointDistLength}
                   label="Downsample To"
                   />
              </Col>
              <Col span={12}> 
                <FieldFloat 
                  value={kernelWidth}
                  onChange={setKernelWidth}
                  label="Kernel Width" 
                  /> </Col>
              <Col span={12}>
                <FieldFloat 
                  value={diagramStart}
                  onChange={setDiagramStart}
                  label="Diagram Start"
                  />
              </Col>
              <Col span={12}> 
                <FieldFloat 
                  value={diagramStop}
                  onChange={setDiagramStop}
                  label="Diagram Stop"
                  /> </Col>
              <Col span={12}>
                <FieldFloat 
                  value={diagramCount}
                  onChange={setDiagramCount}
                  label="Diagram Count" 
                  />
              </Col>
            </Row>
          </Form>
        </Card>
      </Col>
      <Col span={12} >
        {demoDist}
      </Col>
    </Row>
  )
}
export default SquigglePlayground;