Add setting to editor and playground

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/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/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">