Add padding, remove undefined and fix CI

This commit is contained in:
Sam Nolan 2022-04-01 13:16:06 +11:00
parent c6c96a3e24
commit 4c1daab09f
6 changed files with 74 additions and 1358 deletions

View File

@ -2,7 +2,6 @@
"name": "@quri/squiggle-components", "name": "@quri/squiggle-components",
"version": "0.1.6", "version": "0.1.6",
"dependencies": { "dependencies": {
"@emotion/react": "^11.8.2",
"@quri/squiggle-lang": "0.2.2", "@quri/squiggle-lang": "0.2.2",
"@testing-library/jest-dom": "^5.16.3", "@testing-library/jest-dom": "^5.16.3",
"@testing-library/react": "^12.1.2", "@testing-library/react": "^12.1.2",
@ -16,6 +15,7 @@
"cross-env": "^7.0.3", "cross-env": "^7.0.3",
"lodash": "^4.17.21", "lodash": "^4.17.21",
"react": "^17.0.2", "react": "^17.0.2",
"react-ace": "^9.5.0",
"react-dom": "^17.0.2", "react-dom": "^17.0.2",
"react-scripts": "5.0.0", "react-scripts": "5.0.0",
"react-vega": "^7.4.4", "react-vega": "^7.4.4",
@ -70,6 +70,7 @@
"@storybook/node-logger": "^6.4.18", "@storybook/node-logger": "^6.4.18",
"@storybook/preset-create-react-app": "^4.0.0", "@storybook/preset-create-react-app": "^4.0.0",
"@storybook/react": "^6.4.18", "@storybook/react": "^6.4.18",
"@types/styled-components": "^5.1.24",
"@types/webpack": "^5.28.0", "@types/webpack": "^5.28.0",
"prettier": "^2.6.0", "prettier": "^2.6.0",
"react-codejar": "^1.1.2", "react-codejar": "^1.1.2",

View File

@ -16,8 +16,8 @@ export let CodeEditor : FC<CodeEditorProps> = (props) =>
<AceEditor <AceEditor
value={props.value} value={props.value}
mode="golang" mode="golang"
minLines={props.oneLine ? 1 : 10}
theme="github" theme="github"
height={props.oneLine ? "1em" : "500px"}
showGutter={false} showGutter={false}
highlightActiveLine={false} highlightActiveLine={false}
showPrintMargin={false} showPrintMargin={false}

View File

@ -1,7 +1,7 @@
import * as React from "react"; import * as React from "react";
import * as ReactDOM from "react-dom"; import * as ReactDOM from "react-dom";
import { SquiggleChart } from "./SquiggleChart"; import { SquiggleChart } from "./SquiggleChart";
import { ReactCodeJar } from "react-codejar"; import { CodeEditor } from "./CodeEditor";
import type { exportEnv } from "@quri/squiggle-lang"; import type { exportEnv } from "@quri/squiggle-lang";
export interface SquiggleEditorProps { export interface SquiggleEditorProps {
@ -46,25 +46,12 @@ export class SquiggleEditor extends React.Component<
let props = this.props; let props = this.props;
return ( return (
<div> <div>
<ReactCodeJar <CodeEditor
code={expression} value={expression}
onUpdate={(e) => { onChange={(e) => {
this.setState({ expression: e }); this.setState({ expression: e });
}} }}
style={{ oneLine={true}
borderRadius: "6px",
width: "530px",
border: "1px solid grey",
fontFamily: "'Source Code Pro', monospace",
fontSize: "14px",
fontWeight: "400",
letterSpacing: "normal",
lineHeight: "20px",
padding: "10px",
tabSize: "4",
}}
highlight={highlight}
lineNumbers={false}
/> />
<SquiggleChart <SquiggleChart
squiggleString={expression} squiggleString={expression}

View File

@ -3,7 +3,6 @@ import { SquiggleChart } from "./SquiggleChart"
import CodeEditor from "./CodeEditor" import CodeEditor from "./CodeEditor"
import { Form, Input, Card, Row, Col } from "antd" import { Form, Input, Card, Row, Col } from "antd"
import 'antd/dist/antd.css'; import 'antd/dist/antd.css';
import { css } from '@emotion/react'
interface FieldFloatProps { interface FieldFloatProps {
label : string, label : string,
@ -29,64 +28,6 @@ function FieldFloat(Props: FieldFloatProps) {
</Form.Item> </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 { interface Props {
initialSquiggleString : string initialSquiggleString : string
} }
@ -95,8 +36,7 @@ let SquigglePlayground : FC<Props> = (props) => {
let [squiggleString, setSquiggleString] = useState(props.initialSquiggleString) let [squiggleString, setSquiggleString] = useState(props.initialSquiggleString)
let [sampleCount, setSampleCount] = useState(1000) let [sampleCount, setSampleCount] = useState(1000)
let [outputXYPoints, setOutputXYPoints] = useState(1000) let [outputXYPoints, setOutputXYPoints] = useState(1000)
let [pointDistLength, setPointDistLength] = useState(undefined) let [pointDistLength, setPointDistLength] = useState(1000)
let [kernelWidth, setKernelWidth] = useState(undefined)
let [diagramStart, setDiagramStart] = useState(0) let [diagramStart, setDiagramStart] = useState(0)
let [diagramStop, setDiagramStop] = useState(10) let [diagramStop, setDiagramStop] = useState(10)
let [diagramCount, setDiagramCount] = useState(20) let [diagramCount, setDiagramCount] = useState(20)
@ -116,11 +56,11 @@ let SquigglePlayground : FC<Props> = (props) => {
<Card <Card
title="Distribution Form"> title="Distribution Form">
<Form> <Form>
<Row css={Styles.rows} > <Row gutter={16}>
<Col span={24}> <Col span={24}>
<CodeEditor value={squiggleString} onChange={setSquiggleString} oneLine={false}/> </Col> <CodeEditor value={squiggleString} onChange={setSquiggleString} oneLine={false}/> </Col>
</Row> </Row>
<Row css={Styles.rows}> <Row gutter={16}>
<Col span={12}> <Col span={12}>
<FieldFloat <FieldFloat
value={sampleCount} value={sampleCount}
@ -140,12 +80,6 @@ let SquigglePlayground : FC<Props> = (props) => {
label="Downsample To" label="Downsample To"
/> />
</Col> </Col>
<Col span={12}>
<FieldFloat
value={kernelWidth}
onChange={setKernelWidth}
label="Kernel Width"
/> </Col>
<Col span={12}> <Col span={12}>
<FieldFloat <FieldFloat
value={diagramStart} value={diagramStart}

View File

@ -4,8 +4,7 @@
"@quri/squiggle-lang": ["../squiggle-lang/src/js"] "@quri/squiggle-lang": ["../squiggle-lang/src/js"]
}, },
"module": "commonjs", "module": "commonjs",
"jsx": "react-jsx", "jsx": "react",
"jsxImportSource": "@emotion/react",
"resolveJsonModule": true, "resolveJsonModule": true,
"noImplicitAny": false, "noImplicitAny": false,
"esModuleInterop": true, "esModuleInterop": true,

1329
yarn.lock

File diff suppressed because it is too large Load Diff