From f5db5afe090ba441480511405ed10fa183eb0024 Mon Sep 17 00:00:00 2001 From: Sam Nolan Date: Thu, 23 Jun 2022 03:08:44 +0000 Subject: [PATCH 1/6] Add logX and expY props --- .../src/components/DistributionChart.tsx | 31 +++++++++++++------ .../src/components/FunctionChart.tsx | 4 +++ .../src/components/FunctionChart1Dist.tsx | 9 ++++-- .../src/components/SquiggleChart.tsx | 16 ++++++++-- .../src/components/SquiggleEditor.tsx | 24 ++++++++++++-- .../src/components/SquiggleItem.tsx | 24 +++++++------- 6 files changed, 80 insertions(+), 28 deletions(-) diff --git a/packages/components/src/components/DistributionChart.tsx b/packages/components/src/components/DistributionChart.tsx index f2ca811b..aaa07bea 100644 --- a/packages/components/src/components/DistributionChart.tsx +++ b/packages/components/src/components/DistributionChart.tsx @@ -19,25 +19,38 @@ import { } from "./DistributionVegaScales"; import { NumberShower } from "./NumberShower"; -type DistributionChartProps = { - distribution: Distribution; - width?: number; - height: number; +export type DistributionPlottingSettings = { /** Whether to show a summary of means, stdev, percentiles etc */ showSummary: boolean; /** Whether to show the user graph controls (scale etc) */ - showControls?: boolean; + showControls: boolean; + /** Set the x scale to be logarithmic by deault */ + logX: boolean; + /** Set the y scale to be exponential by deault */ + expY: boolean; }; +export type DistributionChartProps = { + distribution: Distribution; + width?: number; + height: number; +} & DistributionPlottingSettings; + export const DistributionChart: React.FC = ({ distribution, height, showSummary, width, - showControls = false, + showControls, + logX, + expY, }) => { - const [isLogX, setLogX] = React.useState(false); - const [isExpY, setExpY] = React.useState(false); + const [isLogX, setLogX] = React.useState(logX); + const [isExpY, setExpY] = React.useState(expY); + + React.useEffect(() => setLogX(logX), [logX]); + React.useEffect(() => setExpY(expY), [expY]); + const shape = distribution.pointSet(); const [sized] = useSize((size) => { if (shape.tag === "Error") { @@ -126,7 +139,7 @@ export const CheckBox: React.FC = ({ onChange(!value)} disabled={disabled} className="form-checkbox" diff --git a/packages/components/src/components/FunctionChart.tsx b/packages/components/src/components/FunctionChart.tsx index 7e8749a3..05e4d393 100644 --- a/packages/components/src/components/FunctionChart.tsx +++ b/packages/components/src/components/FunctionChart.tsx @@ -2,6 +2,7 @@ import * as React from "react"; import { lambdaValue, environment, runForeign } from "@quri/squiggle-lang"; import { FunctionChart1Dist } from "./FunctionChart1Dist"; import { FunctionChart1Number } from "./FunctionChart1Number"; +import { DistributionPlottingSettings } from "./DistributionChart"; import { ErrorAlert, MessageAlert } from "./Alert"; export type FunctionChartSettings = { @@ -13,6 +14,7 @@ export type FunctionChartSettings = { interface FunctionChartProps { fn: lambdaValue; chartSettings: FunctionChartSettings; + distributionPlotSettings: DistributionPlottingSettings; environment: environment; height: number; } @@ -21,6 +23,7 @@ export const FunctionChart: React.FC = ({ fn, chartSettings, environment, + distributionPlotSettings, height, }) => { if (fn.parameters.length > 1) { @@ -53,6 +56,7 @@ export const FunctionChart: React.FC = ({ chartSettings={chartSettings} environment={environment} height={height} + distributionPlotSettings={distributionPlotSettings} /> ); case "number": diff --git a/packages/components/src/components/FunctionChart1Dist.tsx b/packages/components/src/components/FunctionChart1Dist.tsx index 6c8b2766..650d2753 100644 --- a/packages/components/src/components/FunctionChart1Dist.tsx +++ b/packages/components/src/components/FunctionChart1Dist.tsx @@ -13,7 +13,10 @@ import { } from "@quri/squiggle-lang"; import { createClassFromSpec } from "react-vega"; import * as percentilesSpec from "../vega-specs/spec-percentiles.json"; -import { DistributionChart } from "./DistributionChart"; +import { + DistributionChart, + DistributionPlottingSettings, +} from "./DistributionChart"; import { NumberShower } from "./NumberShower"; import { ErrorAlert } from "./Alert"; @@ -44,6 +47,7 @@ export type FunctionChartSettings = { interface FunctionChart1DistProps { fn: lambdaValue; chartSettings: FunctionChartSettings; + distributionPlotSettings: DistributionPlottingSettings; environment: environment; height: number; } @@ -150,6 +154,7 @@ export const FunctionChart1Dist: React.FC = ({ fn, chartSettings, environment, + distributionPlotSettings, height, }) => { let [mouseOverlay, setMouseOverlay] = React.useState(0); @@ -175,7 +180,7 @@ export const FunctionChart1Dist: React.FC = ({ distribution={mouseItem.value.value} width={400} height={50} - showSummary={false} + {...distributionPlotSettings} /> ) : null; diff --git a/packages/components/src/components/SquiggleChart.tsx b/packages/components/src/components/SquiggleChart.tsx index 5aec9d26..f7bb7ace 100644 --- a/packages/components/src/components/SquiggleChart.tsx +++ b/packages/components/src/components/SquiggleChart.tsx @@ -37,6 +37,10 @@ export interface SquiggleChartProps { showTypes?: boolean; /** Whether to show graph controls (scale etc)*/ showControls?: boolean; + /** Set the x scale to be logarithmic by deault */ + logX?: boolean; + /** Set the y scale to be exponential by deault */ + expY?: boolean; } const defaultOnChange = () => {}; @@ -53,6 +57,8 @@ export const SquiggleChart: React.FC = ({ width, showTypes = false, showControls = false, + logX = false, + expY = false, chartSettings = defaultChartSettings, }) => { const { result } = useSquiggle({ @@ -67,14 +73,20 @@ export const SquiggleChart: React.FC = ({ return ; } + let distributionPlotSettings = { + showControls, + showSummary, + logX, + expY, + }; + return ( diff --git a/packages/components/src/components/SquiggleEditor.tsx b/packages/components/src/components/SquiggleEditor.tsx index 279d6ec6..cd51b7a0 100644 --- a/packages/components/src/components/SquiggleEditor.tsx +++ b/packages/components/src/components/SquiggleEditor.tsx @@ -54,6 +54,10 @@ export interface SquiggleEditorProps { showControls?: boolean; /** Whether to show a summary table */ showSummary?: boolean; + /** Whether to log the x coordinate on distribution charts */ + logX?: boolean; + /** Whether to exp the y coordinate on distribution charts */ + expY?: boolean; } export const SquiggleEditor: React.FC = ({ @@ -69,8 +73,14 @@ export const SquiggleEditor: React.FC = ({ showTypes = false, showControls = false, showSummary = false, + logX = false, + expY = false, }: SquiggleEditorProps) => { const [code, setCode] = useState(initialSquiggleString); + React.useEffect( + () => setCode(initialSquiggleString), + [initialSquiggleString] + ); const { result, observableRef } = useSquiggle({ code, @@ -86,6 +96,13 @@ export const SquiggleEditor: React.FC = ({ count: diagramCount, }; + const distributionPlotSettings = { + showControls, + showSummary, + logX, + expY, + }; + return (
@@ -95,9 +112,8 @@ export const SquiggleEditor: React.FC = ({ expression={result.value} width={width} height={200} - showSummary={showSummary} + distributionPlotSettings={distributionPlotSettings} showTypes={showTypes} - showControls={showControls} chartSettings={chartSettings} environment={environment ?? defaultEnvironment} /> @@ -136,6 +152,10 @@ export const SquigglePartial: React.FC = ({ jsImports = defaultImports, }: SquigglePartialProps) => { const [code, setCode] = useState(initialSquiggleString); + React.useEffect( + () => setCode(initialSquiggleString), + [initialSquiggleString] + ); const { result, observableRef } = useSquigglePartial({ code, diff --git a/packages/components/src/components/SquiggleItem.tsx b/packages/components/src/components/SquiggleItem.tsx index a64df99e..d05d7c1f 100644 --- a/packages/components/src/components/SquiggleItem.tsx +++ b/packages/components/src/components/SquiggleItem.tsx @@ -5,7 +5,10 @@ import { declaration, } from "@quri/squiggle-lang"; import { NumberShower } from "./NumberShower"; -import { DistributionChart } from "./DistributionChart"; +import { + DistributionChart, + DistributionPlottingSettings, +} from "./DistributionChart"; import { FunctionChart, FunctionChartSettings } from "./FunctionChart"; function getRange(x: declaration) { @@ -61,12 +64,9 @@ export interface SquiggleItemProps { expression: squiggleExpression; width?: number; height: number; - /** Whether to show a summary of statistics for distributions */ - showSummary: boolean; + distributionPlotSettings: DistributionPlottingSettings; /** Whether to show type information */ showTypes: boolean; - /** Whether to show users graph controls (scale etc) */ - showControls: boolean; /** Settings for displaying functions */ chartSettings: FunctionChartSettings; /** Environment for further function executions */ @@ -77,9 +77,8 @@ export const SquiggleItem: React.FC = ({ expression, width, height, - showSummary, + distributionPlotSettings, showTypes = false, - showControls = false, chartSettings, environment, }) => { @@ -104,10 +103,9 @@ export const SquiggleItem: React.FC = ({ ) : null} ); @@ -155,11 +153,10 @@ export const SquiggleItem: React.FC = ({ expression={r} width={width !== undefined ? width - 20 : width} height={50} + distributionPlotSettings={distributionPlotSettings} showTypes={showTypes} - showControls={showControls} chartSettings={chartSettings} environment={environment} - showSummary={showSummary} />
@@ -181,8 +178,7 @@ export const SquiggleItem: React.FC = ({ width={width !== undefined ? width - 20 : width} height={height / 3} showTypes={showTypes} - showSummary={showSummary} - showControls={showControls} + distributionPlotSettings={distributionPlotSettings} chartSettings={chartSettings} environment={environment} /> @@ -220,6 +216,7 @@ export const SquiggleItem: React.FC = ({ = ({ Date: Thu, 23 Jun 2022 03:16:35 +0000 Subject: [PATCH 2/6] Add logX and expY as playground settings --- .../src/components/SquigglePlayground.tsx | 30 ++++++++++++++++--- 1 file changed, 26 insertions(+), 4 deletions(-) diff --git a/packages/components/src/components/SquigglePlayground.tsx b/packages/components/src/components/SquigglePlayground.tsx index cf0544f6..7476193c 100644 --- a/packages/components/src/components/SquigglePlayground.tsx +++ b/packages/components/src/components/SquigglePlayground.tsx @@ -32,6 +32,10 @@ interface PlaygroundProps { showControls?: boolean; /** Whether to show the summary table in the playground */ showSummary?: boolean; + /** Whether to log the x coordinate on distribution charts */ + logX?: boolean; + /** Whether to exp the y coordinate on distribution charts */ + expY?: boolean; /** If code is set, component becomes controlled */ code?: string; onCodeChange?(expr: string): void; @@ -71,6 +75,8 @@ const schema = yup showControls: yup.boolean(), showSummary: yup.boolean(), showEditor: yup.boolean(), + logX: yup.boolean(), + expY: yup.boolean(), showSettingsPage: yup.boolean().default(false), diagramStart: yup .number() @@ -203,6 +209,8 @@ export const SquigglePlayground: FC = ({ showTypes = false, showControls = false, showSummary = false, + logX = false, + expY = false, code: controlledCode, onCodeChange, showEditor = true, @@ -219,10 +227,12 @@ export const SquigglePlayground: FC = ({ sampleCount: 1000, xyPointLength: 1000, chartHeight: 150, - showTypes: showTypes, - showControls: showControls, - showSummary: showSummary, - showEditor: showEditor, + showTypes, + showControls, + logX, + expY, + showSummary, + showEditor, leftSizePercent: 50, showSettingsPage: false, diagramStart: 0, @@ -313,6 +323,16 @@ export const SquigglePlayground: FC = ({
+ + = ({ showTypes={vars.showTypes} showControls={vars.showControls} showSummary={vars.showSummary} + logX={vars.logX} + expY={vars.expY} bindings={defaultBindings} jsImports={imports} /> From 3983fa8f0f60eeec5bb2638e2d1afd838c9dc0f8 Mon Sep 17 00:00:00 2001 From: Sam Nolan Date: Thu, 23 Jun 2022 03:21:24 +0000 Subject: [PATCH 3/6] Add errors when log on graphs with negative domain --- .../src/components/DistributionChart.tsx | 20 ++++++++++++------- 1 file changed, 13 insertions(+), 7 deletions(-) diff --git a/packages/components/src/components/DistributionChart.tsx b/packages/components/src/components/DistributionChart.tsx index aaa07bea..961178ff 100644 --- a/packages/components/src/components/DistributionChart.tsx +++ b/packages/components/src/components/DistributionChart.tsx @@ -76,13 +76,19 @@ export const DistributionChart: React.FC = ({ return (
- + {!(isLogX && massBelow0) ? ( + + ) : ( + + Cannot graph distribution with negative values on logarithmic scale. + + )}
{showSummary && }
From 2b8545ad04446a8d7ac34ee8651eae4d56637ace Mon Sep 17 00:00:00 2001 From: Sam Nolan Date: Thu, 23 Jun 2022 03:40:40 +0000 Subject: [PATCH 4/6] Fix 1 + distribution having reverse ordered points Fixes #595 --- .../Distributions/AlgebraicShapeCombination_test.res | 12 ++++++++++++ .../PointSetDist/AlgebraicShapeCombination.res | 2 +- 2 files changed, 13 insertions(+), 1 deletion(-) diff --git a/packages/squiggle-lang/__tests__/Distributions/AlgebraicShapeCombination_test.res b/packages/squiggle-lang/__tests__/Distributions/AlgebraicShapeCombination_test.res index 702b67a4..552799ac 100644 --- a/packages/squiggle-lang/__tests__/Distributions/AlgebraicShapeCombination_test.res +++ b/packages/squiggle-lang/__tests__/Distributions/AlgebraicShapeCombination_test.res @@ -14,4 +14,16 @@ describe("Combining Continuous and Discrete Distributions", () => { ), // Multiply distribution by -1 true, ) + makeTest( + "keep order of xs when first number is discrete and adding", + AlgebraicShapeCombination.isOrdered( + AlgebraicShapeCombination.combineShapesContinuousDiscrete( + #Add, + {xs: [0., 1.], ys: [1., 1.]}, + {xs: [1.], ys: [1.]}, + ~discretePosition=First, + ), + ), // 1 + distribution + true, + ) }) diff --git a/packages/squiggle-lang/src/rescript/Distributions/PointSetDist/AlgebraicShapeCombination.res b/packages/squiggle-lang/src/rescript/Distributions/PointSetDist/AlgebraicShapeCombination.res index a51de00d..2508e3df 100644 --- a/packages/squiggle-lang/src/rescript/Distributions/PointSetDist/AlgebraicShapeCombination.res +++ b/packages/squiggle-lang/src/rescript/Distributions/PointSetDist/AlgebraicShapeCombination.res @@ -214,7 +214,7 @@ let combineShapesContinuousDiscrete = ( // When this operation is flipped (like 1 - normal(5, 2)) then the // x axis coordinates would all come out the wrong order. So we need // to fill them out in the opposite direction - let index = discretePosition == First ? t1n - 1 - i : i + let index = discretePosition == First && op == #Subtract ? t1n - 1 - i : i Belt.Array.set( dxyShape, index, From 9338f745b804d036fc1e2e41722c1de7ad244b6b Mon Sep 17 00:00:00 2001 From: Sam Nolan Date: Thu, 23 Jun 2022 03:59:39 +0000 Subject: [PATCH 5/6] Fix prettier complaining about lock --- packages/squiggle-lang/package.json | 1 + yarn.lock | 4 ++-- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/squiggle-lang/package.json b/packages/squiggle-lang/package.json index f338e564..808a3da7 100644 --- a/packages/squiggle-lang/package.json +++ b/packages/squiggle-lang/package.json @@ -57,6 +57,7 @@ "moduleserve": "^0.9.1", "nyc": "^15.1.0", "peggy": "^2.0.1", + "prettier": "^2.7.1", "reanalyze": "^2.23.0", "rescript-fast-check": "^1.1.1", "ts-jest": "^27.1.4", diff --git a/yarn.lock b/yarn.lock index b1c89aa7..58d044d6 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4344,7 +4344,7 @@ dependencies: "@types/react" "*" -"@types/react@*", "@types/react@^18.0.1", "@types/react@^18.0.9": +"@types/react@*", "@types/react@^18.0.9": version "18.0.14" resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.14.tgz#e016616ffff51dba01b04945610fe3671fdbe06d" integrity sha512-x4gGuASSiWmo0xjDLpm5mPb52syZHJx02VKbqUKdLmKtAwIh63XClGsiTI1K6DO5q7ox4xAsQrU+Gl3+gGXF9Q== @@ -14791,7 +14791,7 @@ react-vega@^7.5.1: prop-types "^15.8.1" vega-embed "^6.5.1" -react@^18.0.0, react@^18.1.0: +react@^18.1.0: version "18.2.0" resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5" integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ== From 819e4ea709487f642a512feb3eae501743390233 Mon Sep 17 00:00:00 2001 From: Sam Nolan Date: Thu, 23 Jun 2022 07:32:23 +0000 Subject: [PATCH 6/6] Fix yarn lock --- yarn.lock | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/yarn.lock b/yarn.lock index 5f460cd2..ae8a6f60 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4351,7 +4351,7 @@ dependencies: "@types/react" "*" -"@types/react@*", "@types/react@^18.0.9": +"@types/react@*", "@types/react@^18.0.1", "@types/react@^18.0.9": version "18.0.14" resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.14.tgz#e016616ffff51dba01b04945610fe3671fdbe06d" integrity sha512-x4gGuASSiWmo0xjDLpm5mPb52syZHJx02VKbqUKdLmKtAwIh63XClGsiTI1K6DO5q7ox4xAsQrU+Gl3+gGXF9Q== @@ -14635,7 +14635,7 @@ react-vega@^7.5.1: prop-types "^15.8.1" vega-embed "^6.5.1" -react@^18.1.0: +react@^18.0.0, react@^18.1.0: version "18.2.0" resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5" integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==