Compare commits

...

2 Commits

Author SHA1 Message Date
Sam Nolan
5c23aa12ec Add setting to editor and playground 2022-10-12 14:57:35 +11:00
Sam Nolan
387f28c1c9 Expose number precision setting 2022-10-12 14:45:08 +11:00
10 changed files with 61 additions and 3 deletions

View File

@ -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()}

View File

@ -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}

View File

@ -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,

View File

@ -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>

View File

@ -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,

View File

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

View File

@ -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 (

View File

@ -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) =>

View File

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

View File

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