feat: Ask for % confidence interval, not for toggle.

Toggle propagated to all elements,
and as such this commit might serve as a template
for how to do a similar thing in the future

packages/components/src/components/DistributionChart.tsx

@@ -28,6 +28,7 @@ export type DistributionPlottingSettings = {
   logX: boolean;
   /** Set the y scale to be exponential by deault */
   expY: boolean;
+  truncateToNthci: number;
 };
 
 export type DistributionChartProps = {
@@ -44,6 +45,7 @@ export const DistributionChart: React.FC<DistributionChartProps> = ({
   showControls,
   logX,
   expY,
+  truncateToNthci,
 }) => {
   const [isLogX, setLogX] = React.useState(logX);
   const [isExpY, setExpY] = React.useState(expY);
@@ -51,8 +53,54 @@ export const DistributionChart: React.FC<DistributionChartProps> = ({
   React.useEffect(() => setLogX(logX), [logX]);
   React.useEffect(() => setExpY(expY), [expY]);
 
-  const shape = distribution.pointSet();
   const [sized] = useSize((size) => {
+    const delta = truncateToNthci / 100 / 2;
+    if (truncateToNthci <= 0 || truncateToNthci > 100) {
+      return (
+        <ErrorAlert heading="Confidence interval error">
+          {"Confidence interval must be between 0 and 100"}
+        </ErrorAlert>
+      );
+    }
+    const pMinwrapped = distribution.inv(0.5 - delta);
+    const pMaxwrapped = distribution.inv(0.5 + delta);
+    if (pMinwrapped.tag == "Error") {
+      return (
+        <ErrorAlert heading="Distribution Calculation Error">
+          {distributionErrorToString(pMinwrapped.value)}
+        </ErrorAlert>
+      );
+    } else if (pMaxwrapped.tag == "Error") {
+      return (
+        <ErrorAlert heading="Distribution Calculation Error">
+          {distributionErrorToString(pMaxwrapped.value)}
+        </ErrorAlert>
+      );
+    }
+    const pMin = pMinwrapped.value;
+    const pMax = pMaxwrapped.value;
+
+    const truncatedDistributionWrapper = distribution.truncate(pMin, pMax);
+    if (truncatedDistributionWrapper.tag == "Error") {
+      return (
+        <ErrorAlert heading="Distribution Truncation For Display Error">
+          {distributionErrorToString(truncatedDistributionWrapper.value)}
+        </ErrorAlert>
+      );
+    }
+    const truncatedDistribution = truncatedDistributionWrapper.value;
+
+    const shape = distribution.pointSet();
+    const shapeTruncated = truncatedDistribution.pointSet(); // distribution.pointSet();
+
+    if (shapeTruncated.tag === "Error") {
+      return (
+        <ErrorAlert heading="Distribution Error">
+          {distributionErrorToString(shapeTruncated.value)}
+        </ErrorAlert>
+      );
+    }
+
     if (shape.tag === "Error") {
       return (
         <ErrorAlert heading="Distribution Error">
@@ -79,7 +127,14 @@ export const DistributionChart: React.FC<DistributionChartProps> = ({
         {!(isLogX && massBelow0) ? (
           <Vega
             spec={spec}
-            data={{ con: shape.value.continuous, dis: shape.value.discrete }}
+            data={
+              truncateToNthci != 100
+                ? {
+                    con: shapeTruncated.value.continuous,
+                    dis: shapeTruncated.value.discrete,
+                  }
+                : { con: shape.value.continuous, dis: shape.value.discrete }
+            }
             width={widthProp - 10}
             height={height}
             actions={false}

packages/components/src/components/SquiggleChart.tsx

@@ -41,6 +41,8 @@ export interface SquiggleChartProps {
   logX?: boolean;
   /** Set the y scale to be exponential by deault */
   expY?: boolean;
+  /** Display 94% interval; useful for thin lognormals */
+  truncateToNthci?: number;
 }
 
 const defaultOnChange = () => {};
@@ -59,6 +61,7 @@ export const SquiggleChart: React.FC<SquiggleChartProps> = ({
   showControls = false,
   logX = false,
   expY = false,
+  truncateToNthci = 100,
   chartSettings = defaultChartSettings,
 }) => {
   const { result } = useSquiggle({
@@ -78,6 +81,7 @@ export const SquiggleChart: React.FC<SquiggleChartProps> = ({
     showSummary,
     logX,
     expY,
+    truncateToNthci,
   };
 
   return (

packages/components/src/components/SquiggleEditor.tsx

@@ -58,6 +58,8 @@ export interface SquiggleEditorProps {
   logX?: boolean;
   /** Whether to exp the y coordinate on distribution charts */
   expY?: boolean;
+  /** Display 94% interval; useful for thin lognormals */
+  truncateToNthci?: number;
 }
 
 export const SquiggleEditor: React.FC<SquiggleEditorProps> = ({
@@ -75,6 +77,7 @@ export const SquiggleEditor: React.FC<SquiggleEditorProps> = ({
   showSummary = false,
   logX = false,
   expY = false,
+  truncateToNthci = 100,
 }: SquiggleEditorProps) => {
   const [code, setCode] = useState(initialSquiggleString);
   React.useEffect(
@@ -101,6 +104,7 @@ export const SquiggleEditor: React.FC<SquiggleEditorProps> = ({
     showSummary,
     logX,
     expY,
+    truncateToNthci,
   };
 
   return (

packages/components/src/components/SquigglePlayground.tsx

@@ -36,6 +36,8 @@ interface PlaygroundProps {
   logX?: boolean;
   /** Whether to exp the y coordinate on distribution charts */
   expY?: boolean;
+  /** Display 94% interval; useful for thin lognormals */
+  truncateToNthci?: number;
   /** If code is set, component becomes controlled */
   code?: string;
   onCodeChange?(expr: string): void;
@@ -78,6 +80,7 @@ const schema = yup
     showEditor: yup.boolean(),
     logX: yup.boolean(),
     expY: yup.boolean(),
+    truncateToNthci: yup.number().required().min(0).max(100).default(100),
     showSettingsPage: yup.boolean().default(false),
     diagramStart: yup
       .number()
@@ -212,6 +215,7 @@ export const SquigglePlayground: FC<PlaygroundProps> = ({
   showSummary = false,
   logX = false,
   expY = false,
+  truncateToNthci = 100,
   code: controlledCode,
   onCodeChange,
   onSettingsChange,
@@ -233,6 +237,7 @@ export const SquigglePlayground: FC<PlaygroundProps> = ({
       showControls,
       logX,
       expY,
+      truncateToNthci,
       showSummary,
       showEditor,
       leftSizePercent: 50,
@@ -340,6 +345,12 @@ export const SquigglePlayground: FC<PlaygroundProps> = ({
               name="expY"
               label="Show y scale exponentially"
             />
+            <InputItem
+              name="truncateToNthci"
+              type="number"
+              register={register}
+              label="Show nth percentile confidence interval (useful for thin lognormals)"
+            />
             <Checkbox
               register={register}
               name="showControls"
@@ -432,6 +443,7 @@ export const SquigglePlayground: FC<PlaygroundProps> = ({
       showSummary={vars.showSummary}
       logX={vars.logX}
       expY={vars.expY}
+      truncateToNthci={vars.truncateToNthci}
       bindings={defaultBindings}
       jsImports={imports}
     />