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 = ({ = ({