Add setting to editor and playground

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/SquiggleEditor.tsx

@@ -53,6 +53,7 @@ export const SquiggleEditor: React.FC<SquiggleEditorProps> = (props) => {
     executionId = 0,
     width,
     height = 200,
+    numberPrecision,
     enableLocalSettings = false,
   } = props;
 
@@ -86,6 +87,7 @@ export const SquiggleEditor: React.FC<SquiggleEditorProps> = (props) => {
         result={valueToRender}
         width={width}
         height={height}
+        numberPrecision={numberPrecision}
         distributionPlotSettings={distributionPlotSettings}
         chartSettings={chartSettings}
         environment={environment ?? defaultEnvironment}

packages/components/src/components/SquigglePlayground.tsx

@@ -278,6 +278,7 @@ export const SquigglePlayground: FC<PlaygroundProps> = ({
       diagramStart: 0,
       diagramStop: 10,
       diagramCount: 20,
+      numberPrecision: 3,
     },
   });
   const vars = useWatch({
@@ -332,6 +333,7 @@ export const SquigglePlayground: FC<PlaygroundProps> = ({
           result={valueToRender}
           environment={environment}
           height={vars.chartHeight || 150}
+          numberPrecision={vars.numberPrecision}
           distributionPlotSettings={{
             showSummary: vars.showSummary ?? false,
             logX: vars.logX ?? false,

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/ItemSettingsMenu.tsx

@@ -38,6 +38,7 @@ const ItemSettingsModal: React.FC<
       // this is a mess and should be fixed
       showEditor: true, // doesn't matter
       chartHeight: mergedSettings.height,
+      numberPrecision: mergedSettings.numberPrecision,
       showSummary: mergedSettings.distributionPlotSettings.showSummary,
       logX: mergedSettings.distributionPlotSettings.logX,
       expY: mergedSettings.distributionPlotSettings.expY,

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/src/components/ViewSettings.tsx

@@ -21,6 +21,13 @@ export const viewSettingsSchema = yup.object({}).shape({
   diagramStart: yup.number().required().positive().integer().default(0).min(0),
   diagramStop: yup.number().required().positive().integer().default(10).min(0),
   diagramCount: yup.number().required().positive().integer().default(20).min(2),
+  numberPrecision: yup
+    .number()
+    .required()
+    .integer()
+    .positive()
+    .default(3)
+    .min(0),
 });
 
 type FormFields = yup.InferType<typeof viewSettingsSchema>;
@@ -57,6 +64,16 @@ export const ViewSettings: React.FC<{
         </div>
       </HeadedSection>
 
+      <div className="pt-8">
+        <HeadedSection title="Number Display Settings">
+          <InputItem
+            name="numberPrecision"
+            type="number"
+            register={register}
+            label="Chart Height (in pixels)"
+          />
+        </HeadedSection>
+      </div>
       <div className="pt-8">
         <HeadedSection title="Distribution Display Settings">
           <div className="space-y-2">

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");
+});