Merge branch 'develop' into squiggle-editor-bindings

This commit is contained in:
Sam Nolan 2022-04-29 13:51:31 +00:00
commit 8f879b7168
9 changed files with 80 additions and 39 deletions

View File

@ -1,12 +1,22 @@
# Squiggle
[![Packages check](https://github.com/quantified-uncertainty/squiggle/actions/workflows/ci.yml/badge.svg)](https://github.com/quantified-uncertainty/squiggle/actions/workflows/ci.yml)
[![npm version](https://badge.fury.io/js/@quri%2Fsquiggle-lang.svg)](https://www.npmjs.com/package/@quri/squiggle-lang)
[![npm version](https://badge.fury.io/js/@quri%2Fsquiggle-components.svg)](https://www.npmjs.com/package/@quri/squiggle-components)
[![npm version - lang](https://badge.fury.io/js/@quri%2Fsquiggle-lang.svg)](https://www.npmjs.com/package/@quri/squiggle-lang)
[![npm version - components](https://badge.fury.io/js/@quri%2Fsquiggle-components.svg)](https://www.npmjs.com/package/@quri/squiggle-components)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://github.com/quantified-uncertainty/squiggle/blob/develop/LICENSE)
[![codecov](https://codecov.io/gh/quantified-uncertainty/squiggle/branch/develop/graph/badge.svg?token=QRLBL5CQ7C)](https://codecov.io/gh/quantified-uncertainty/squiggle)
This is an experimental DSL/language for making probabilistic estimates. The full story can be found [here](https://www.lesswrong.com/s/rDe8QE5NvXcZYzgZ3).
_An estimation language_.
## Get started
- [Gallery](https://www.squiggle-language.com/docs/Discussions/Gallery)
- [Squiggle playground](https://squiggle-language.com/playground)
- [Language basics](https://www.squiggle-language.com/docs/Features/Language)
- [Squiggle functions source of truth](https://www.squiggle-language.com/docs/Features/Functions)
- [Known bugs](https://www.squiggle-language.com/docs/Discussions/Bugs)
- [Original lesswrong sequence](https://www.lesswrong.com/s/rDe8QE5NvXcZYzgZ3)
- [Author your squiggle models as Observable notebooks](https://observablehq.com/@hazelfire/squiggle)
## Our deployments
@ -27,7 +37,7 @@ the packages can be found in `packages`.
- `@quri/squiggle-components` in `packages/components` contains React components that
can be passed squiggle strings as props, and return a presentation of the result
of the calculation.
- `@quri/squiggle-website` in `packages/website` The main descriptive website for squiggle,
- `packages/website` is the main descriptive website for squiggle,
it is hosted at `squiggle-language.com`.
The playground depends on the components library which then depends on the language. This means that if you wish to work on the components library, you will need to build (no need to bundle) the language, and as of this writing playground doesn't really work.

View File

@ -1,8 +1,26 @@
[![npm version](https://badge.fury.io/js/@quri%2Fsquiggle-components.svg)](https://www.npmjs.com/package/@quri/squiggle-components)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://github.com/quantified-uncertainty/squiggle/blob/develop/LICENSE)
# Squiggle Components
This package contains all the components for squiggle. These can be used either as a library or hosted as a [storybook](https://storybook.js.org/).
# Build for development
# Usage in a `react` project
For example, in a fresh `create-react-app` project
```sh
yarn add @quri/squiggle-components
```
Add to `App.js`:
```jsx
import { SquiggleEditor } from "@quri/squiggle-components";
<SquiggleEditor initialSquiggleString="x = beta(3, 10); x + 20" />;
```
# Build storybook for development
We assume that you had run `yarn` at monorepo level, installing dependencies.
@ -24,6 +42,5 @@ yarn start
And build artefacts for production,
```sh
yarn bundle # builds components library
yarn build # builds storybook app
```

View File

@ -1,11 +1,10 @@
{
"name": "@quri/squiggle-components",
"version": "0.2.13",
"version": "0.2.14",
"license": "MIT",
"dependencies": {
"antd": "^4.20.1",
"react-ace": "10.1.0",
"@quri/squiggle-lang": "^0.2.6",
"@quri/squiggle-lang": "^0.2.7",
"react-dom": "^18.1.0",
"vega": "^5.22.1",
"vega-embed": "^6.20.6",

View File

@ -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;
};

View File

@ -154,6 +154,12 @@ export interface SquiggleChartProps {
bindings?: bindings;
}
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,
@ -163,11 +169,6 @@ export const SquiggleChart: React.FC<SquiggleChartProps> = ({
bindings = {},
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,
@ -178,15 +179,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>;
};

View File

@ -1,11 +1,9 @@
import _ from "lodash";
import React, { FC, useState } from "react";
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,10 +12,19 @@ interface FieldFloatProps {
onChange: (value: number) => void;
}
const Input = styled.input``;
const FormItem = (props: { label: string; children: ReactElement }) => (
<div>
<label>{props.label}</label>
{props.children}
</div>
);
function FieldFloat(Props: FieldFloatProps) {
let [contents, setContents] = useState(Props.value + "");
return (
<Form.Item label={Props.label}>
<FormItem label={Props.label}>
<Input
value={contents}
className={Props.className ? Props.className : ""}
@ -29,7 +36,7 @@ function FieldFloat(Props: FieldFloatProps) {
}
}}
/>
</Form.Item>
</FormItem>
);
}
@ -65,6 +72,12 @@ const Display = styled.div<TitleProps>`
max-height: ${(props) => props.maxHeight}px;
`;
const Row = styled.div`
display: grid;
grid-template-columns: 1fr 1fr;
`;
const Col = styled.div``;
let SquigglePlayground: FC<Props> = ({
initialSquiggleString = "",
height = 300,
@ -79,7 +92,7 @@ let SquigglePlayground: FC<Props> = ({
return (
<ShowBox height={height}>
<Row>
<Col span={12}>
<Col>
<CodeEditor
value={squiggleString}
onChange={setSquiggleString}
@ -88,7 +101,7 @@ let SquigglePlayground: FC<Props> = ({
height={height - 3}
/>
</Col>
<Col span={12}>
<Col>
<Display maxHeight={height - 3}>
<SquiggleChart
squiggleString={squiggleString}

View File

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

View File

@ -1,3 +1,6 @@
[![npm version](https://badge.fury.io/js/@quri%2Fsquiggle-lang.svg)](https://www.npmjs.com/package/@quri/squiggle-lang)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://github.com/quantified-uncertainty/squiggle/blob/develop/LICENSE)
# Squiggle language
## Build for development
@ -15,13 +18,16 @@ Other:
```sh
yarn start # listens to files and recompiles at every mutation
yarn test
yarn test:watch # keeps an active session and runs all tests at every mutation
# where o := open in osx and o := xdg-open in linux,
yarn coverage; o _coverage/index.html # produces coverage report and opens it in browser
yarn coverage:rescript; o _coverage/index.html # produces coverage report and opens it in browser
```
## Information
## Distributing this package or using this package from other monorepo packages
As it says in the other `packages/*/README.md`s, building this package is an essential step of building other packages.
# Information
Squiggle is a language for representing probability distributions, as well as functions that return probability distributions. Its original intended use is for improving epistemics around EA decisions.
@ -34,11 +40,3 @@ This package is mainly written in [ReScript](https://rescript-lang.org/), but ha
ReScript has an interesting philosophy of not providing much in the way of effective build tools. Every ReScript file is compiled into `.bs.js` and `.gen.ts` files with the same name and same location, and then you can use these files in other `.js` files to create your program. To generate these files to build the package, you run `yarn build`.
`.gen.ts` files are created by the [`@genType`](https://rescript-lang.org/docs/gentype/latest/getting-started) decorator, which creates typescript typings for needed parts of the codebase so that they can be easily used in typescript. These .gen.ts files reference the .bs.js files generated by rescript.
### Errors regarding the `rationale` package
You may notice sometimes, that there are errors about the `rationale` package. If you ever get these errors, `yarn build` should fix this issue. These errors occur because `yarn build` also needs to create build files that are in `node_modules`. So if you replace `node_modules` you may need to rebuild to get those files back.
## Distributing this package or using this package from other monorepo packages
As it says in the other `packages/*/README.md`s, building this package is an essential step of building other packages.

View File

@ -5005,7 +5005,7 @@ ansi-to-html@^0.6.11:
dependencies:
entities "^2.0.0"
antd@^4.20.0, antd@^4.20.1:
antd@^4.20.0:
version "4.20.1"
resolved "https://registry.yarnpkg.com/antd/-/antd-4.20.1.tgz#6cd5a406c7172d61a5d0693ea52ee908650cf674"
integrity sha512-asKxOV0a6AijqonbcXkO08/q+XvqS/HmGfaRIS6ZH1ALR3FS2q+kTW52rJZO9rfoOb/ldPhEBVSWiNrbiB+uCQ==