From 387f28c1c9c1599f3fa4457147c74586ad2db3cb Mon Sep 17 00:00:00 2001
From: Sam Nolan <samnolan555@gmail.com>
Date: Wed, 12 Oct 2022 14:45:08 +1100
Subject: [PATCH] Expose number precision setting

---
 .../components/src/components/SquiggleChart.tsx  |  4 ++++
 .../SquiggleViewer/ExpressionViewer.tsx          |  7 +++++--
 .../components/SquiggleViewer/ViewerContext.ts   |  1 +
 .../src/components/SquiggleViewer/index.tsx      | 12 +++++++++++-
 .../src/components/SquiggleViewer/utils.ts       |  2 ++
 packages/components/test/number.test.tsx         | 16 ++++++++++++++++
 6 files changed, 39 insertions(+), 3 deletions(-)
 create mode 100644 packages/components/test/number.test.tsx

diff --git a/packages/components/src/components/SquiggleChart.tsx b/packages/components/src/components/SquiggleChart.tsx
index 215031a7..84e57997 100644
--- a/packages/components/src/components/SquiggleChart.tsx
+++ b/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()}
diff --git a/packages/components/src/components/SquiggleViewer/ExpressionViewer.tsx b/packages/components/src/components/SquiggleViewer/ExpressionViewer.tsx
index 1c041dbf..eff4b274 100644
--- a/packages/components/src/components/SquiggleViewer/ExpressionViewer.tsx
+++ b/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>
diff --git a/packages/components/src/components/SquiggleViewer/ViewerContext.ts b/packages/components/src/components/SquiggleViewer/ViewerContext.ts
index 71b44126..75f13c6f 100644
--- a/packages/components/src/components/SquiggleViewer/ViewerContext.ts
+++ b/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,
diff --git a/packages/components/src/components/SquiggleViewer/index.tsx b/packages/components/src/components/SquiggleViewer/index.tsx
index 17e9fdee..1f9ab974 100644
--- a/packages/components/src/components/SquiggleViewer/index.tsx
+++ b/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 (
diff --git a/packages/components/src/components/SquiggleViewer/utils.ts b/packages/components/src/components/SquiggleViewer/utils.ts
index f23de043..dab48281 100644
--- a/packages/components/src/components/SquiggleViewer/utils.ts
+++ b/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) =>
diff --git a/packages/components/test/number.test.tsx b/packages/components/test/number.test.tsx
new file mode 100644
index 00000000..868e56fd
--- /dev/null
+++ b/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");
+});