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

packages/components/src/components/DistributionChart.tsx

@@ -28,7 +28,7 @@ export type DistributionPlottingSettings = {
   logX: boolean;
   /** Set the y scale to be exponential by deault */
   expY: boolean;
-  truncateTo95ci: boolean;
+  truncateToNthci: number;
 };
 
 export type DistributionChartProps = {
@@ -45,7 +45,7 @@ export const DistributionChart: React.FC<DistributionChartProps> = ({
   showControls,
   logX,
   expY,
-  truncateTo95ci,
+  truncateToNthci,
 }) => {
   const [isLogX, setLogX] = React.useState(logX);
   const [isExpY, setExpY] = React.useState(expY);
@@ -54,25 +54,33 @@ export const DistributionChart: React.FC<DistributionChartProps> = ({
   React.useEffect(() => setExpY(expY), [expY]);
 
   const [sized] = useSize((size) => {
-    const p3wrapped = distribution.inv(0.025);
+    const delta = truncateToNthci / 100 / 2;
-    const p97wrapped = distribution.inv(0.975);
+    if (truncateToNthci <= 0 || truncateToNthci > 100) {
-    if (p3wrapped.tag == "Error") {
       return (
-        <ErrorAlert heading="Distribution Calculation Error">
+        <ErrorAlert heading="Confidence interval error">
-          {distributionErrorToString(p3wrapped.value)}
+          {"Confidence interval must be between 0 and 100"}
-        </ErrorAlert>
-      );
-    } else if (p97wrapped.tag == "Error") {
-      return (
-        <ErrorAlert heading="Distribution Calculation Error">
-          {distributionErrorToString(p97wrapped.value)}
         </ErrorAlert>
       );
     }
-    const p3 = p3wrapped.value;
+    const pMinwrapped = distribution.inv(0.5 - delta);
-    const p97 = p97wrapped.value;
+    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(p3, p97);
+    const truncatedDistributionWrapper = distribution.truncate(pMin, pMax);
     if (truncatedDistributionWrapper.tag == "Error") {
       return (
         <ErrorAlert heading="Distribution Truncation For Display Error">
@@ -120,7 +128,7 @@ export const DistributionChart: React.FC<DistributionChartProps> = ({
           <Vega
             spec={spec}
             data={
-              truncateTo95ci
+              truncateToNthci != 100
                 ? {
                     con: shapeTruncated.value.continuous,
                     dis: shapeTruncated.value.discrete,

packages/components/src/components/SquiggleChart.tsx

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

packages/components/src/components/SquiggleEditor.tsx

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

packages/components/src/components/SquigglePlayground.tsx

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