Merge pull request #36 from QURIresearch/squiggle-settings
Allow settings to be edited by component users
This commit is contained in:
commit
d170449008
|
@ -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),
|
||||
},
|
||||
},
|
||||
}
|
||||
|
|
|
@ -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<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 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 (
|
||||
|
|
|
@ -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} />
|
||||
|
|
|
@ -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)
|
||||
}
|
||||
|
|
|
@ -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,
|
||||
(),
|
||||
|
|
Loading…
Reference in New Issue
Block a user