Move Playground to components
This commit is contained in:
parent
bc1a73b0af
commit
c6c96a3e24
1
.gitignore
vendored
1
.gitignore
vendored
|
@ -5,3 +5,4 @@ yarn-error.log
|
||||||
.parcel-cache
|
.parcel-cache
|
||||||
.DS_Store
|
.DS_Store
|
||||||
**/.sync.ffs_db
|
**/.sync.ffs_db
|
||||||
|
.direnv
|
||||||
|
|
|
@ -2,6 +2,7 @@
|
||||||
"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",
|
||||||
|
@ -11,6 +12,7 @@
|
||||||
"@types/node": "^17.0.16",
|
"@types/node": "^17.0.16",
|
||||||
"@types/react": "^17.0.43",
|
"@types/react": "^17.0.43",
|
||||||
"@types/react-dom": "^17.0.14",
|
"@types/react-dom": "^17.0.14",
|
||||||
|
"antd": "^4.19.3",
|
||||||
"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",
|
||||||
|
|
|
@ -8,15 +8,15 @@ import "ace-builds/src-noconflict/keybinding-vim";
|
||||||
|
|
||||||
interface CodeEditorProps {
|
interface CodeEditorProps {
|
||||||
value : string,
|
value : string,
|
||||||
onChange : (value: string) => void
|
onChange : (value: string) => void,
|
||||||
|
oneLine : boolean
|
||||||
}
|
}
|
||||||
|
|
||||||
export let CodeEditor : FC<CodeEditorProps> = (props) =>
|
export let CodeEditor : FC<CodeEditorProps> = (props) =>
|
||||||
<AceEditor
|
<AceEditor
|
||||||
value={props.value}
|
value={props.value}
|
||||||
mode="golang"
|
mode="golang"
|
||||||
height="400px"
|
minLines={props.oneLine ? 1 : 10}
|
||||||
width="100%"
|
|
||||||
theme="github"
|
theme="github"
|
||||||
showGutter={false}
|
showGutter={false}
|
||||||
highlightActiveLine={false}
|
highlightActiveLine={false}
|
||||||
|
@ -32,3 +32,4 @@ export let CodeEditor : FC<CodeEditorProps> = (props) =>
|
||||||
enableSnippets: true,
|
enableSnippets: true,
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
|
export default CodeEditor
|
|
@ -1,7 +1,8 @@
|
||||||
import { FC, useState } from "react"
|
import React, { FC, useState } from "react"
|
||||||
import { SquiggleChart } from "@quri/squiggle-components"
|
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 { css } from '@emotion/react'
|
import { css } from '@emotion/react'
|
||||||
|
|
||||||
interface FieldFloatProps {
|
interface FieldFloatProps {
|
||||||
|
@ -27,6 +28,7 @@ function FieldFloat(Props: FieldFloatProps) {
|
||||||
/>
|
/>
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
}
|
}
|
||||||
|
|
||||||
let rows = css`
|
let rows = css`
|
||||||
>.antCol:firstChild {
|
>.antCol:firstChild {
|
||||||
paddingLeft: 0.25em;
|
paddingLeft: 0.25em;
|
||||||
|
@ -85,8 +87,12 @@ var Styles = {
|
||||||
groupB: groupB
|
groupB: groupB
|
||||||
};
|
};
|
||||||
|
|
||||||
let DistBuilder : FC<{}> = (_: {}) => {
|
interface Props {
|
||||||
let [squiggleString, setSquiggleString] = useState("mm(normal(5,2), normal(10,2))")
|
initialSquiggleString : string
|
||||||
|
}
|
||||||
|
|
||||||
|
let SquigglePlayground : FC<Props> = (props) => {
|
||||||
|
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(undefined)
|
||||||
|
@ -105,14 +111,14 @@ let DistBuilder : FC<{}> = (_: {}) => {
|
||||||
pointDistLength={pointDistLength}
|
pointDistLength={pointDistLength}
|
||||||
/>
|
/>
|
||||||
return (
|
return (
|
||||||
<div className="grid grid-cols-2 gap-4">
|
<Row>
|
||||||
<div>
|
<Col span={12}>
|
||||||
<Card
|
<Card
|
||||||
title="Distribution Form">
|
title="Distribution Form">
|
||||||
<Form>
|
<Form>
|
||||||
<Row css={Styles.rows}>
|
<Row css={Styles.rows} >
|
||||||
<Col span={24}>
|
<Col span={24}>
|
||||||
<CodeEditor value={squiggleString} onChange={setSquiggleString} /> </Col>
|
<CodeEditor value={squiggleString} onChange={setSquiggleString} oneLine={false}/> </Col>
|
||||||
</Row>
|
</Row>
|
||||||
<Row css={Styles.rows}>
|
<Row css={Styles.rows}>
|
||||||
<Col span={12}>
|
<Col span={12}>
|
||||||
|
@ -163,9 +169,11 @@ let DistBuilder : FC<{}> = (_: {}) => {
|
||||||
</Row>
|
</Row>
|
||||||
</Form>
|
</Form>
|
||||||
</Card>
|
</Card>
|
||||||
</div>
|
</Col>
|
||||||
|
<Col span={12} >
|
||||||
{demoDist}
|
{demoDist}
|
||||||
</div>
|
</Col>
|
||||||
|
</Row>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
export default DistBuilder
|
export default SquigglePlayground;
|
|
@ -0,0 +1,22 @@
|
||||||
|
import SquigglePlayground from "../SquigglePlayground";
|
||||||
|
import { Canvas, Meta, Story, Props } from "@storybook/addon-docs";
|
||||||
|
|
||||||
|
<Meta title="Squiggle/SquigglePlayground" component={SquigglePlayground} />
|
||||||
|
|
||||||
|
export const Template = (props) => <SquigglePlayground {...props} />;
|
||||||
|
|
||||||
|
# Squiggle Playground
|
||||||
|
|
||||||
|
A Squiggle playground is an environment where you can play around with all settings,
|
||||||
|
including sampling settings, in squiggle.
|
||||||
|
|
||||||
|
<Canvas>
|
||||||
|
<Story
|
||||||
|
name="Normal"
|
||||||
|
args={{
|
||||||
|
initialSquiggleString: "normal(5,2)",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{Template.bind({})}
|
||||||
|
</Story>
|
||||||
|
</Canvas>
|
|
@ -4,7 +4,8 @@
|
||||||
"@quri/squiggle-lang": ["../squiggle-lang/src/js"]
|
"@quri/squiggle-lang": ["../squiggle-lang/src/js"]
|
||||||
},
|
},
|
||||||
"module": "commonjs",
|
"module": "commonjs",
|
||||||
"jsx": "react",
|
"jsx": "react-jsx",
|
||||||
|
"jsxImportSource": "@emotion/react",
|
||||||
"resolveJsonModule": true,
|
"resolveJsonModule": true,
|
||||||
"noImplicitAny": false,
|
"noImplicitAny": false,
|
||||||
"esModuleInterop": true,
|
"esModuleInterop": true,
|
||||||
|
|
16
packages/playground/.gitignore
vendored
16
packages/playground/.gitignore
vendored
|
@ -1,16 +0,0 @@
|
||||||
.DS_Store
|
|
||||||
.merlin
|
|
||||||
.bsb.lock
|
|
||||||
npm-debug.log
|
|
||||||
/node_modules/
|
|
||||||
.cache
|
|
||||||
.cache/*
|
|
||||||
dist
|
|
||||||
lib/*
|
|
||||||
*.cache
|
|
||||||
build
|
|
||||||
yarn-error.log
|
|
||||||
*.bs.js
|
|
||||||
# Local Netlify folder
|
|
||||||
.netlify
|
|
||||||
.idea
|
|
|
@ -1,21 +0,0 @@
|
||||||
# TODO: REVIVE PLAYGROUND.
|
|
||||||
|
|
||||||
# Squiggle Playground
|
|
||||||
|
|
||||||
This repository contains the squiggle playground, a small web interface
|
|
||||||
for playing around with squiggle concepts.
|
|
||||||
|
|
||||||
It depends on `@quri/squiggle-components` and `@quri/squiggle-lang` so both of them will
|
|
||||||
need to be packaged for this to work. This can be done from the root directory
|
|
||||||
with
|
|
||||||
|
|
||||||
```
|
|
||||||
yarn build:lang
|
|
||||||
yarn build:components
|
|
||||||
```
|
|
||||||
|
|
||||||
Then, starting the playground can be done with:
|
|
||||||
|
|
||||||
```
|
|
||||||
yarn parcel
|
|
||||||
```
|
|
|
@ -1,4 +0,0 @@
|
||||||
[[redirects]]
|
|
||||||
from = "/*"
|
|
||||||
to = "/index.html"
|
|
||||||
status = 200
|
|
|
@ -1,54 +0,0 @@
|
||||||
{
|
|
||||||
"name": "@quri/squiggle-playground",
|
|
||||||
"version": "0.1.0",
|
|
||||||
"homepage": "https://foretold-app.github.io/estiband/",
|
|
||||||
"scripts": {
|
|
||||||
"parcel": "parcel ./src/index.html",
|
|
||||||
"parcel-build": "parcel build ./src/index.html --no-source-maps --no-autoinstall --no-scope-hoist",
|
|
||||||
"deploy": "gh-pages -d dist",
|
|
||||||
"ci": "yarn parcel-build"
|
|
||||||
},
|
|
||||||
"keywords": [],
|
|
||||||
"author": "",
|
|
||||||
"license": "MIT",
|
|
||||||
"dependencies": {
|
|
||||||
"@emotion/react": "^11.8.1",
|
|
||||||
"@quri/squiggle-lang": "^0.2.2",
|
|
||||||
"ace-builds": "^1.4.12",
|
|
||||||
"antd": "^4.18.5",
|
|
||||||
"babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
|
|
||||||
"binary-search-tree": "0.2.6",
|
|
||||||
"css-loader": "^6.7.1",
|
|
||||||
"gh-pages": "3.2.3",
|
|
||||||
"jstat": "1.9.5",
|
|
||||||
"lenses-ppx": "6.1.10",
|
|
||||||
"less": "4.1.2",
|
|
||||||
"lodash": "4.17.21",
|
|
||||||
"mathjs": "10.4.1",
|
|
||||||
"moduleserve": "0.9.1",
|
|
||||||
"moment": "2.29.1",
|
|
||||||
"pdfast": "^0.2.0",
|
|
||||||
"rationale": "0.2.0",
|
|
||||||
"react": "17.0.2",
|
|
||||||
"react-ace": "^9.2.0",
|
|
||||||
"react-dom": "^17.0.2",
|
|
||||||
"react-use": "^17.3.2",
|
|
||||||
"react-vega": "^7.4.4",
|
|
||||||
"vega": "*",
|
|
||||||
"vega-embed": "6.20.8",
|
|
||||||
"vega-lite": "*"
|
|
||||||
},
|
|
||||||
"devDependencies": {
|
|
||||||
"@emotion/babel-plugin": "^11.7.2",
|
|
||||||
"@parcel/core": "^2.4.0",
|
|
||||||
"@types/react": "^17.0.43",
|
|
||||||
"autoprefixer": "^10.4.2",
|
|
||||||
"docsify": "^4.12.2",
|
|
||||||
"jest": "^27.5.1",
|
|
||||||
"parcel": "^2.4.0",
|
|
||||||
"postcss": "^8.4.7",
|
|
||||||
"postcss-cli": "^9.1.0",
|
|
||||||
"tailwindcss": "^3.0.23",
|
|
||||||
"typescript": "^4.6.3"
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -1,6 +0,0 @@
|
||||||
module.exports = {
|
|
||||||
plugins: {
|
|
||||||
tailwindcss: {},
|
|
||||||
autoprefixer: {},
|
|
||||||
},
|
|
||||||
}
|
|
|
@ -1,9 +0,0 @@
|
||||||
import React from 'react'
|
|
||||||
import { render } from "react-dom"
|
|
||||||
import DistBuilder from "./components/DistBuilder"
|
|
||||||
|
|
||||||
var root = document.querySelector("#app")
|
|
||||||
|
|
||||||
if (!(root == null)) {
|
|
||||||
render(<DistBuilder />, root)
|
|
||||||
}
|
|
|
@ -1,17 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<title>Squiggle Language</title>
|
|
||||||
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,900" rel="stylesheet">
|
|
||||||
<link href="./styles/antd.css" rel="stylesheet">
|
|
||||||
<link href="./styles/index.css" rel="stylesheet">
|
|
||||||
<script type="module" src="./Index.tsx" defer></script>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<div id="app" style="height: 100%"></div>
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
File diff suppressed because it is too large
Load Diff
|
@ -1,3 +0,0 @@
|
||||||
@tailwind base;
|
|
||||||
@tailwind components;
|
|
||||||
@tailwind utilities;
|
|
|
@ -1,9 +0,0 @@
|
||||||
module.exports = {
|
|
||||||
content: [
|
|
||||||
"./src/components/*.tsx"
|
|
||||||
],
|
|
||||||
theme: {
|
|
||||||
extend: {},
|
|
||||||
},
|
|
||||||
plugins: [],
|
|
||||||
}
|
|
|
@ -1,19 +0,0 @@
|
||||||
{
|
|
||||||
"compilerOptions": {
|
|
||||||
"module": "commonjs",
|
|
||||||
"jsx": "react-jsx",
|
|
||||||
"jsxImportSource": "@emotion/react",
|
|
||||||
"noImplicitAny": false,
|
|
||||||
"removeComments": true,
|
|
||||||
"preserveConstEnums": true,
|
|
||||||
"esModuleInterop": true,
|
|
||||||
"resolveJsonModule": true,
|
|
||||||
"outDir": "./dist",
|
|
||||||
"declarationDir": "./dist",
|
|
||||||
"declaration": true,
|
|
||||||
"sourceMap": true
|
|
||||||
},
|
|
||||||
"target": "ES6",
|
|
||||||
"include": ["src/**/*"],
|
|
||||||
"exclude": ["node_modules", "**/*.spec.ts"]
|
|
||||||
}
|
|
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user