Allow settings to be edited by component users

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),
+    },
+  },
 }

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});
 
-/**
+export interface SquiggleChartProps {
- * Primary UI component for user interaction
+  /** The input string for squiggle */
- */
+  squiggleString : string,
-export const SquiggleChart = ({ squiggleString }: { 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<SquiggleChartProps> = 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 start = props.diagramStart ? props.diagramStart : 0
-            let x = i /10;
+          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 (

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';
 
 <Meta title="Squiggle/SquiggleChart" component={ SquiggleChart } />
 
-export const Template = ({squiggleString}) => <SquiggleChart squiggleString={squiggleString} />
+export const Template = SquiggleChart
 
 # Squiggle Chart
 
@@ -79,3 +79,4 @@ over the axis between x = 0 and 10.
   </Story>
 </Canvas>
 
+<Props of={SquiggleChart} />

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)
+}

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={
+    ~samplingInputs,
-      sampleCount: Some(10000),
-      outputXYPoints: Some(10000),
-      kernelWidth: None,
-      pointDistLength: Some(1000),
-    },
     ~squiggleString,
     ~environment=[]->Belt.Map.String.fromArray,
     (),