142 lines
3.8 KiB
TypeScript
142 lines
3.8 KiB
TypeScript
import * as React from "react";
|
|
import {
|
|
SqValue,
|
|
environment,
|
|
defaultEnvironment,
|
|
resultMap,
|
|
SqValueTag,
|
|
SqProject,
|
|
} from "@quri/squiggle-lang";
|
|
import { useSquiggle } from "../lib/hooks";
|
|
import { SquiggleViewer } from "./SquiggleViewer";
|
|
import { JsImports } from "../lib/jsImports";
|
|
|
|
export interface SquiggleChartProps {
|
|
/** The input string for squiggle */
|
|
code?: string;
|
|
/** Allows to re-run the code if code hasn't changed */
|
|
executionId?: number;
|
|
/** If the output requires monte carlo sampling, the amount of samples */
|
|
sampleCount?: number;
|
|
/** The amount of points returned to draw the distribution */
|
|
environment?: environment;
|
|
/** If the result is a function, where the function domain starts */
|
|
diagramStart?: number;
|
|
/** If the result is a function, where the function domain ends */
|
|
diagramStop?: number;
|
|
/** If the result is a function, the amount of stops sampled */
|
|
diagramCount?: number;
|
|
/** When the squiggle code gets reevaluated */
|
|
onChange?(expr: SqValue | undefined, sourceName: string): void;
|
|
/** CSS width of the element */
|
|
width?: number;
|
|
height?: number;
|
|
/** JS imported parameters */
|
|
jsImports?: JsImports;
|
|
/** Whether to show a summary of the distribution */
|
|
showSummary?: boolean;
|
|
/** Set the x scale to be logarithmic by deault */
|
|
logX?: boolean;
|
|
/** Set the y scale to be exponential by deault */
|
|
expY?: boolean;
|
|
/** How to format numbers on the x axis */
|
|
tickFormat?: string;
|
|
/** Title of the graphed distribution */
|
|
title?: string;
|
|
/** Color of the graphed distribution */
|
|
color?: string;
|
|
/** Specify the lower bound of the x scale */
|
|
minX?: number;
|
|
/** Specify the upper bound of the x scale */
|
|
maxX?: number;
|
|
/** Whether the x-axis should be dates or numbers */
|
|
xAxisType?: "number" | "dateTime";
|
|
/** Whether to show vega actions to the user, so they can copy the chart spec */
|
|
distributionChartActions?: boolean;
|
|
enableLocalSettings?: boolean;
|
|
/** The project that this execution is part of */
|
|
project?: SqProject;
|
|
/** The name of the squiggle execution source. Defaults to "main" */
|
|
sourceName?: string;
|
|
/** The sources that this execution continues */
|
|
includes?: string[];
|
|
}
|
|
|
|
const defaultOnChange = () => {};
|
|
const defaultImports: JsImports = {};
|
|
|
|
export const SquiggleChart: React.FC<SquiggleChartProps> = React.memo(
|
|
({
|
|
code,
|
|
executionId = 0,
|
|
environment,
|
|
onChange = defaultOnChange, // defaultOnChange must be constant, don't move its definition here
|
|
height = 200,
|
|
jsImports = defaultImports,
|
|
showSummary = false,
|
|
width,
|
|
logX = false,
|
|
expY = false,
|
|
diagramStart = 0,
|
|
diagramStop = 10,
|
|
diagramCount = 20,
|
|
tickFormat,
|
|
minX,
|
|
maxX,
|
|
color,
|
|
title,
|
|
xAxisType = "number",
|
|
distributionChartActions,
|
|
enableLocalSettings = false,
|
|
sourceName,
|
|
includes = [],
|
|
project = SqProject.create(),
|
|
}) => {
|
|
const { result, bindings } = useSquiggle({
|
|
sourceName,
|
|
includes,
|
|
project,
|
|
code,
|
|
environment,
|
|
jsImports,
|
|
onChange,
|
|
executionId,
|
|
});
|
|
|
|
const distributionPlotSettings = {
|
|
showSummary,
|
|
logX,
|
|
expY,
|
|
format: tickFormat,
|
|
minX,
|
|
maxX,
|
|
color,
|
|
title,
|
|
xAxisType,
|
|
actions: distributionChartActions,
|
|
};
|
|
|
|
const chartSettings = {
|
|
start: diagramStart,
|
|
stop: diagramStop,
|
|
count: diagramCount,
|
|
};
|
|
|
|
const resultToRender = resultMap(result, (value) =>
|
|
value.tag === SqValueTag.Void ? bindings.asValue() : value
|
|
);
|
|
|
|
return (
|
|
<SquiggleViewer
|
|
result={resultToRender}
|
|
width={width}
|
|
height={height}
|
|
distributionPlotSettings={distributionPlotSettings}
|
|
chartSettings={chartSettings}
|
|
environment={environment ?? defaultEnvironment}
|
|
enableLocalSettings={enableLocalSettings}
|
|
/>
|
|
);
|
|
}
|
|
);
|