Add padding, remove undefined and fix CI
This commit is contained in:
parent
c6c96a3e24
commit
4c1daab09f
|
@ -2,7 +2,6 @@
|
|||
"name": "@quri/squiggle-components",
|
||||
"version": "0.1.6",
|
||||
"dependencies": {
|
||||
"@emotion/react": "^11.8.2",
|
||||
"@quri/squiggle-lang": "0.2.2",
|
||||
"@testing-library/jest-dom": "^5.16.3",
|
||||
"@testing-library/react": "^12.1.2",
|
||||
|
@ -16,6 +15,7 @@
|
|||
"cross-env": "^7.0.3",
|
||||
"lodash": "^4.17.21",
|
||||
"react": "^17.0.2",
|
||||
"react-ace": "^9.5.0",
|
||||
"react-dom": "^17.0.2",
|
||||
"react-scripts": "5.0.0",
|
||||
"react-vega": "^7.4.4",
|
||||
|
@ -70,6 +70,7 @@
|
|||
"@storybook/node-logger": "^6.4.18",
|
||||
"@storybook/preset-create-react-app": "^4.0.0",
|
||||
"@storybook/react": "^6.4.18",
|
||||
"@types/styled-components": "^5.1.24",
|
||||
"@types/webpack": "^5.28.0",
|
||||
"prettier": "^2.6.0",
|
||||
"react-codejar": "^1.1.2",
|
||||
|
|
|
@ -16,8 +16,8 @@ export let CodeEditor : FC<CodeEditorProps> = (props) =>
|
|||
<AceEditor
|
||||
value={props.value}
|
||||
mode="golang"
|
||||
minLines={props.oneLine ? 1 : 10}
|
||||
theme="github"
|
||||
height={props.oneLine ? "1em" : "500px"}
|
||||
showGutter={false}
|
||||
highlightActiveLine={false}
|
||||
showPrintMargin={false}
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
import * as React from "react";
|
||||
import * as ReactDOM from "react-dom";
|
||||
import { SquiggleChart } from "./SquiggleChart";
|
||||
import { ReactCodeJar } from "react-codejar";
|
||||
import { CodeEditor } from "./CodeEditor";
|
||||
import type { exportEnv } from "@quri/squiggle-lang";
|
||||
|
||||
export interface SquiggleEditorProps {
|
||||
|
@ -46,25 +46,12 @@ export class SquiggleEditor extends React.Component<
|
|||
let props = this.props;
|
||||
return (
|
||||
<div>
|
||||
<ReactCodeJar
|
||||
code={expression}
|
||||
onUpdate={(e) => {
|
||||
<CodeEditor
|
||||
value={expression}
|
||||
onChange={(e) => {
|
||||
this.setState({ expression: e });
|
||||
}}
|
||||
style={{
|
||||
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}
|
||||
oneLine={true}
|
||||
/>
|
||||
<SquiggleChart
|
||||
squiggleString={expression}
|
||||
|
|
|
@ -3,7 +3,6 @@ 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,
|
||||
|
@ -29,64 +28,6 @@ function FieldFloat(Props: FieldFloatProps) {
|
|||
</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
|
||||
}
|
||||
|
@ -95,8 +36,7 @@ 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 [pointDistLength, setPointDistLength] = useState(1000)
|
||||
let [diagramStart, setDiagramStart] = useState(0)
|
||||
let [diagramStop, setDiagramStop] = useState(10)
|
||||
let [diagramCount, setDiagramCount] = useState(20)
|
||||
|
@ -116,11 +56,11 @@ let SquigglePlayground : FC<Props> = (props) => {
|
|||
<Card
|
||||
title="Distribution Form">
|
||||
<Form>
|
||||
<Row css={Styles.rows} >
|
||||
<Row gutter={16}>
|
||||
<Col span={24}>
|
||||
<CodeEditor value={squiggleString} onChange={setSquiggleString} oneLine={false}/> </Col>
|
||||
</Row>
|
||||
<Row css={Styles.rows}>
|
||||
<Row gutter={16}>
|
||||
<Col span={12}>
|
||||
<FieldFloat
|
||||
value={sampleCount}
|
||||
|
@ -140,12 +80,6 @@ let SquigglePlayground : FC<Props> = (props) => {
|
|||
label="Downsample To"
|
||||
/>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<FieldFloat
|
||||
value={kernelWidth}
|
||||
onChange={setKernelWidth}
|
||||
label="Kernel Width"
|
||||
/> </Col>
|
||||
<Col span={12}>
|
||||
<FieldFloat
|
||||
value={diagramStart}
|
||||
|
|
|
@ -4,8 +4,7 @@
|
|||
"@quri/squiggle-lang": ["../squiggle-lang/src/js"]
|
||||
},
|
||||
"module": "commonjs",
|
||||
"jsx": "react-jsx",
|
||||
"jsxImportSource": "@emotion/react",
|
||||
"jsx": "react",
|
||||
"resolveJsonModule": true,
|
||||
"noImplicitAny": false,
|
||||
"esModuleInterop": true,
|
||||
|
|
Loading…
Reference in New Issue
Block a user