From 73114c6a478b6f5f03b82d00e53cb48f6ffdae97 Mon Sep 17 00:00:00 2001 From: Sam Nolan Date: Tue, 1 Mar 2022 18:43:35 +1100 Subject: [PATCH] Allow settings to be edited by component users --- packages/components/.storybook/main.js | 11 +++- packages/components/src/SquiggleChart.tsx | 55 +++++++++++-------- .../src/stories/SquiggleChart.stories.mdx | 5 +- packages/squiggle-lang/src/js/index.ts | 14 ++++- .../src/rescript/ProgramEvaluator.res | 9 +-- 5 files changed, 61 insertions(+), 33 deletions(-) diff --git a/packages/components/.storybook/main.js b/packages/components/.storybook/main.js index 500362af..1562ddbf 100644 --- a/packages/components/.storybook/main.js +++ b/packages/components/.storybook/main.js @@ -22,5 +22,14 @@ module.exports = { "framework": "@storybook/react", "core": { "builder": "webpack5" - } + }, + typescript: { + check: false, + checkOptions: {}, + reactDocgen: 'react-docgen-typescript', + reactDocgenTypescriptOptions: { + shouldExtractLiteralValuesFromEnum: true, + propFilter: (prop) => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true), + }, + }, } diff --git a/packages/components/src/SquiggleChart.tsx b/packages/components/src/SquiggleChart.tsx index c1939863..277e55c5 100644 --- a/packages/components/src/SquiggleChart.tsx +++ b/packages/components/src/SquiggleChart.tsx @@ -1,9 +1,8 @@ import * as React from 'react'; -import * as PropTypes from 'prop-types'; import * as _ from 'lodash'; import type { Spec } from 'vega'; import { run } from '@squiggle/lang'; -import type { DistPlus } from '@squiggle/lang'; +import type { DistPlus, SamplingInputs } from '@squiggle/lang'; import { createClassFromSpec } from 'react-vega'; import * as chartSpecification from './spec-distributions.json' import * as percentilesSpec from './spec-pertentiles.json' @@ -12,12 +11,34 @@ let SquiggleVegaChart = createClassFromSpec({'spec': chartSpecification as Spec} let SquigglePercentilesChart = createClassFromSpec({'spec': percentilesSpec as Spec}); -/** - * Primary UI component for user interaction - */ -export const SquiggleChart = ({ squiggleString }: { squiggleString: string}) => { +export interface SquiggleChartProps { + /** The input string for squiggle */ + squiggleString : string, + + /** If the output requires monte carlo sampling, the amount of samples */ + sampleCount? : number, + /** The amount of points returned to draw the distribution */ + outputXYPoints? : number, + kernelWidth? : number, + pointDistLength? : number, + /** If the result is a function, where the function starts */ + diagramStart? : number, + /** If the result is a function, where the function ends */ + diagramStop? : number, + /** If the result is a function, how many points along the function it samples */ + diagramCount? : number +} - let result = run(squiggleString); +export const SquiggleChart : React.FC = props => { + let samplingInputs : SamplingInputs = { + sampleCount : props.sampleCount, + outputXYPoints : props.outputXYPoints, + kernelWidth : props.kernelWidth, + pointDistLength : props.pointDistLength + } + + + let result = run(props.squiggleString, samplingInputs); console.log(result) if (result.tag === "Ok") { let chartResults = result.value.map(chartResult => { @@ -112,8 +133,11 @@ export const SquiggleChart = ({ squiggleString }: { squiggleString: string}) => } else if(chartResult.NAME === "Function"){ // We are looking at a function. In this case, we draw a Percentiles chart - let data = _.range(0,10,0.1).map((_,i) => { - let x = i /10; + let start = props.diagramStart ? props.diagramStart : 0 + let stop = props.diagramStop ? props.diagramStop : 10 + let count = props.diagramCount ? props.diagramCount : 0.1 + let step = (stop - start)/ count + let data = _.range(start, stop, step).map(x => { if(chartResult.NAME=="Function"){ let result = chartResult.VAL(x); if(result.tag == "Ok"){ @@ -242,19 +266,6 @@ function getPercentiles(percentiles:number[], t : DistPlus) { } } -SquiggleChart.propTypes = { - /** - * Squiggle String - */ - squiggleString : PropTypes.string -}; - -SquiggleChart.defaultProps = { -squggleString: "normal(5, 2)" - -}; - - function MakeNumberShower(props: {number: number, precision :number}){ let numberWithPresentation = numberShow(props.number, props.precision); return ( diff --git a/packages/components/src/stories/SquiggleChart.stories.mdx b/packages/components/src/stories/SquiggleChart.stories.mdx index b2245b1d..cabd6b38 100644 --- a/packages/components/src/stories/SquiggleChart.stories.mdx +++ b/packages/components/src/stories/SquiggleChart.stories.mdx @@ -1,9 +1,9 @@ import { SquiggleChart } from '../SquiggleChart' -import { Canvas, Meta, Story } from '@storybook/addon-docs'; +import { Canvas, Meta, Story, Props } from '@storybook/addon-docs'; -export const Template = ({squiggleString}) => +export const Template = SquiggleChart # Squiggle Chart @@ -79,3 +79,4 @@ over the axis between x = 0 and 10. + diff --git a/packages/squiggle-lang/src/js/index.ts b/packages/squiggle-lang/src/js/index.ts index 955e60f7..dc54c532 100644 --- a/packages/squiggle-lang/src/js/index.ts +++ b/packages/squiggle-lang/src/js/index.ts @@ -1,3 +1,15 @@ import {runAll} from '../rescript/ProgramEvaluator.gen'; +import type { Inputs_SamplingInputs_t as SamplingInputs } from '../rescript/ProgramEvaluator.gen'; +export type { SamplingInputs } export type {t as DistPlus} from '../rescript/pointSetDist/DistPlus.gen'; -export let run = runAll + +export let defaultSamplingInputs : SamplingInputs = { + sampleCount : 10000, + outputXYPoints : 10000, + pointDistLength : 1000 +} + +export function run(squiggleString : string, samplingInputs? : SamplingInputs) { + let si : SamplingInputs = samplingInputs ? samplingInputs : defaultSamplingInputs + return runAll(squiggleString, si) +} diff --git a/packages/squiggle-lang/src/rescript/ProgramEvaluator.res b/packages/squiggle-lang/src/rescript/ProgramEvaluator.res index 5be5be22..8ab8b4c8 100644 --- a/packages/squiggle-lang/src/rescript/ProgramEvaluator.res +++ b/packages/squiggle-lang/src/rescript/ProgramEvaluator.res @@ -193,14 +193,9 @@ let evaluateProgram = (inputs: Inputs.inputs) => @genType -let runAll = (squiggleString: string) => { +let runAll = (squiggleString: string, samplingInputs: Inputs.SamplingInputs.t) => { let inputs = Inputs.make( - ~samplingInputs={ - sampleCount: Some(10000), - outputXYPoints: Some(10000), - kernelWidth: None, - pointDistLength: Some(1000), - }, + ~samplingInputs, ~squiggleString, ~environment=[]->Belt.Map.String.fromArray, (),