Expose number precision setting

packages/components/src/components/SquiggleChart.tsx

@@ -46,6 +46,8 @@ export type SquiggleChartProps = {
   /** Whether to show vega actions to the user, so they can copy the chart spec */
   distributionChartActions?: boolean;
   enableLocalSettings?: boolean;
+  /** Precision to show numbers */
+  numberPrecision?: number;
 } & (StandaloneExecutionProps | ProjectExecutionProps);
 
 // Props needed for a standalone execution
@@ -121,6 +123,7 @@ export const SquiggleChart: React.FC<SquiggleChartProps> = React.memo(
       height = 200,
       enableLocalSettings = false,
       continues = defaultContinues,
+      numberPrecision,
     } = props;
 
     const p = React.useMemo(() => {
@@ -151,6 +154,7 @@ export const SquiggleChart: React.FC<SquiggleChartProps> = React.memo(
         result={valueToRender}
         width={width}
         height={height}
+        numberPrecision={numberPrecision}
         distributionPlotSettings={distributionPlotSettings}
         chartSettings={chartSettings}
         environment={p.getEnvironment()}

packages/components/src/components/SquiggleViewer/ExpressionViewer.tsx

@@ -68,9 +68,12 @@ export const ExpressionViewer: React.FC<Props> = ({ value, width }) => {
     case SqValueTag.Number:
       return (
         <VariableBox value={value} heading="Number">
-          {() => (
+          {(settings) => (
             <div className="font-semibold text-slate-600">
-              <NumberShower precision={3} number={value.value} />
+              <NumberShower
+                precision={settings.numberPrecision}
+                number={value.value}
+              />
             </div>
           )}
         </VariableBox>

packages/components/src/components/SquiggleViewer/ViewerContext.ts

@@ -29,6 +29,7 @@ export const ViewerContext = React.createContext<ViewerContextShape>({
     },
     environment: defaultEnvironment,
     height: 150,
+    numberPrecision: 3,
   }),
   setSettings() {},
   enableLocalSettings: false,

packages/components/src/components/SquiggleViewer/index.tsx

@@ -23,6 +23,7 @@ type Props = {
   /** Environment for further function executions */
   environment: environment;
   enableLocalSettings?: boolean;
+  numberPrecision?: number;
 };
 
 type Settings = {
@@ -38,6 +39,7 @@ export const SquiggleViewer: React.FC<Props> = ({
   distributionPlotSettings,
   chartSettings,
   environment,
+  numberPrecision = 3,
   enableLocalSettings = false,
 }) => {
   // can't store settings in the state because we don't want to rerender the entire tree on every change
@@ -74,10 +76,18 @@ export const SquiggleViewer: React.FC<Props> = ({
           ...(localSettings.environment || {}),
         },
         height: localSettings.height || height,
+        numberPrecision: localSettings.numberPrecision || numberPrecision,
       };
       return result;
     },
-    [distributionPlotSettings, chartSettings, environment, height, getSettings]
+    [
+      distributionPlotSettings,
+      chartSettings,
+      environment,
+      height,
+      getSettings,
+      numberPrecision,
+    ]
   );
 
   return (

packages/components/src/components/SquiggleViewer/utils.ts

@@ -8,6 +8,7 @@ export type LocalItemSettings = {
   chartSettings?: Partial<FunctionChartSettings>;
   height?: number;
   environment?: Partial<environment>;
+  numberPrecision?: number;
 };
 
 export type MergedItemSettings = {
@@ -15,6 +16,7 @@ export type MergedItemSettings = {
   chartSettings: FunctionChartSettings;
   height: number;
   environment: environment;
+  numberPrecision: number;
 };
 
 export const locationAsString = (location: SqValueLocation) =>

packages/components/test/number.test.tsx

@@ -0,0 +1,16 @@
+import { render } from "@testing-library/react";
+import React from "react";
+import "@testing-library/jest-dom";
+import { SquiggleChart } from "../src/index";
+
+test("Precision", async () => {
+  const { container: highPrecision } = render(
+    <SquiggleChart code={"1.25476"} numberPrecision={5} />
+  );
+  expect(highPrecision).toHaveTextContent("1.2548");
+
+  const { container: lowPrecision } = render(
+    <SquiggleChart code={"1.25476"} numberPrecision={2} />
+  );
+  expect(lowPrecision).toHaveTextContent("1.3");
+});