Merge pull request #753 from quantified-uncertainty/graph-settings

Add logX and expY props

packages/components/src/components/DistributionChart.tsx

@@ -19,25 +19,38 @@ import {
 } from "./DistributionVegaScales";
 import { NumberShower } from "./NumberShower";
 
-type DistributionChartProps = {
+export type DistributionPlottingSettings = {
-  distribution: Distribution;
-  width?: number;
-  height: number;
   /** 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<DistributionChartProps> = ({
   distribution,
   height,
   showSummary,
   width,
-  showControls = false,
+  showControls,
+  logX,
+  expY,
 }) => {
-  const [isLogX, setLogX] = React.useState(false);
+  const [isLogX, setLogX] = React.useState(logX);
-  const [isExpY, setExpY] = React.useState(false);
+  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") {
@@ -63,6 +76,7 @@ export const DistributionChart: React.FC<DistributionChartProps> = ({
 
     return (
       <div style={{ width: widthProp }}>
+        {!(isLogX && massBelow0) ? (
           <Vega
             spec={spec}
             data={{ con: shape.value.continuous, dis: shape.value.discrete }}
@@ -70,6 +84,11 @@ export const DistributionChart: React.FC<DistributionChartProps> = ({
             height={height}
             actions={false}
           />
+        ) : (
+          <ErrorAlert heading="Log Domain Error">
+            Cannot graph distribution with negative values on logarithmic scale.
+          </ErrorAlert>
+        )}
         <div className="flex justify-center">
           {showSummary && <SummaryTable distribution={distribution} />}
         </div>
@@ -126,7 +145,7 @@ export const CheckBox: React.FC<CheckBoxProps> = ({
     <span title={tooltip}>
       <input
         type="checkbox"
-        value={value + ""}
+        checked={value}
         onChange={() => onChange(!value)}
         disabled={disabled}
         className="form-checkbox"

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<FunctionChartProps> = ({
   fn,
   chartSettings,
   environment,
+  distributionPlotSettings,
   height,
 }) => {
   if (fn.parameters.length > 1) {
@@ -53,6 +56,7 @@ export const FunctionChart: React.FC<FunctionChartProps> = ({
           chartSettings={chartSettings}
           environment={environment}
           height={height}
+          distributionPlotSettings={distributionPlotSettings}
         />
       );
     case "number":

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<FunctionChart1DistProps> = ({
   fn,
   chartSettings,
   environment,
+  distributionPlotSettings,
   height,
 }) => {
   let [mouseOverlay, setMouseOverlay] = React.useState(0);
@@ -175,7 +180,7 @@ export const FunctionChart1Dist: React.FC<FunctionChart1DistProps> = ({
         distribution={mouseItem.value.value}
         width={400}
         height={50}
-        showSummary={false}
+        {...distributionPlotSettings}
       />
     ) : null;
 

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<SquiggleChartProps> = ({
   width,
   showTypes = false,
   showControls = false,
+  logX = false,
+  expY = false,
   chartSettings = defaultChartSettings,
 }) => {
   const { result } = useSquiggle({
@@ -67,14 +73,20 @@ export const SquiggleChart: React.FC<SquiggleChartProps> = ({
     return <SquiggleErrorAlert error={result.value} />;
   }
 
+  let distributionPlotSettings = {
+    showControls,
+    showSummary,
+    logX,
+    expY,
+  };
+
   return (
     <SquiggleItem
       expression={result.value}
       width={width}
       height={height}
-      showSummary={showSummary}
+      distributionPlotSettings={distributionPlotSettings}
       showTypes={showTypes}
-      showControls={showControls}
       chartSettings={chartSettings}
       environment={environment ?? defaultEnvironment}
     />

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<SquiggleEditorProps> = ({
@@ -69,8 +73,14 @@ export const SquiggleEditor: React.FC<SquiggleEditorProps> = ({
   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<SquiggleEditorProps> = ({
     count: diagramCount,
   };
 
+  const distributionPlotSettings = {
+    showControls,
+    showSummary,
+    logX,
+    expY,
+  };
+
   return (
     <div ref={observableRef}>
       <SquiggleContainer>
@@ -95,9 +112,8 @@ export const SquiggleEditor: React.FC<SquiggleEditorProps> = ({
             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<SquigglePartialProps> = ({
   jsImports = defaultImports,
 }: SquigglePartialProps) => {
   const [code, setCode] = useState(initialSquiggleString);
+  React.useEffect(
+    () => setCode(initialSquiggleString),
+    [initialSquiggleString]
+  );
 
   const { result, observableRef } = useSquigglePartial({
     code,

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<a>(x: declaration<a>) {
@@ -61,12 +64,9 @@ export interface SquiggleItemProps {
   expression: squiggleExpression;
   width?: number;
   height: number;
-  /** Whether to show a summary of statistics for distributions */
+  distributionPlotSettings: DistributionPlottingSettings;
-  showSummary: boolean;
   /** 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<SquiggleItemProps> = ({
   expression,
   width,
   height,
-  showSummary,
+  distributionPlotSettings,
   showTypes = false,
-  showControls = false,
   chartSettings,
   environment,
 }) => {
@@ -104,10 +103,9 @@ export const SquiggleItem: React.FC<SquiggleItemProps> = ({
           ) : null}
           <DistributionChart
             distribution={expression.value}
+            {...distributionPlotSettings}
             height={height}
             width={width}
-            showSummary={showSummary}
-            showControls={showControls}
           />
         </VariableBox>
       );
@@ -155,11 +153,10 @@ export const SquiggleItem: React.FC<SquiggleItemProps> = ({
                   expression={r}
                   width={width !== undefined ? width - 20 : width}
                   height={50}
+                  distributionPlotSettings={distributionPlotSettings}
                   showTypes={showTypes}
-                  showControls={showControls}
                   chartSettings={chartSettings}
                   environment={environment}
-                  showSummary={showSummary}
                 />
               </div>
             </div>
@@ -181,8 +178,7 @@ export const SquiggleItem: React.FC<SquiggleItemProps> = ({
                     width={width !== undefined ? width - 20 : width}
                     height={height / 3}
                     showTypes={showTypes}
-                    showSummary={showSummary}
+                    distributionPlotSettings={distributionPlotSettings}
-                    showControls={showControls}
                     chartSettings={chartSettings}
                     environment={environment}
                   />
@@ -220,6 +216,7 @@ export const SquiggleItem: React.FC<SquiggleItemProps> = ({
           <FunctionChart
             fn={expression.value}
             chartSettings={chartSettings}
+            distributionPlotSettings={distributionPlotSettings}
             height={height}
             environment={{
               sampleCount: environment.sampleCount / 10,
@@ -234,6 +231,7 @@ export const SquiggleItem: React.FC<SquiggleItemProps> = ({
           <FunctionChart
             fn={expression.value.fn}
             chartSettings={getChartSettings(expression.value)}
+            distributionPlotSettings={distributionPlotSettings}
             height={height}
             environment={{
               sampleCount: environment.sampleCount / 10,

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;
@@ -72,6 +76,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()
@@ -204,6 +210,8 @@ export const SquigglePlayground: FC<PlaygroundProps> = ({
   showTypes = false,
   showControls = false,
   showSummary = false,
+  logX = false,
+  expY = false,
   code: controlledCode,
   onCodeChange,
   onSettingsChange,
@@ -221,10 +229,12 @@ export const SquigglePlayground: FC<PlaygroundProps> = ({
       sampleCount: 1000,
       xyPointLength: 1000,
       chartHeight: 150,
-      showTypes: showTypes,
+      showTypes,
-      showControls: showControls,
+      showControls,
-      showSummary: showSummary,
+      logX,
-      showEditor: showEditor,
+      expY,
+      showSummary,
+      showEditor,
       leftSizePercent: 50,
       showSettingsPage: false,
       diagramStart: 0,
@@ -320,6 +330,16 @@ export const SquigglePlayground: FC<PlaygroundProps> = ({
       <div className="pt-8">
         <HeadedSection title="Distribution Display Settings">
           <div className="space-y-2">
+            <Checkbox
+              register={register}
+              name="logX"
+              label="Show x scale logarithmically"
+            />
+            <Checkbox
+              register={register}
+              name="expY"
+              label="Show y scale exponentially"
+            />
             <Checkbox
               register={register}
               name="showControls"
@@ -410,6 +430,8 @@ export const SquigglePlayground: FC<PlaygroundProps> = ({
       showTypes={vars.showTypes}
       showControls={vars.showControls}
       showSummary={vars.showSummary}
+      logX={vars.logX}
+      expY={vars.expY}
       bindings={defaultBindings}
       jsImports={imports}
     />