diff --git a/packages/components/src/components/SquiggleChart.tsx b/packages/components/src/components/SquiggleChart.tsx index 4dd57a1f..5d4c21fc 100644 --- a/packages/components/src/components/SquiggleChart.tsx +++ b/packages/components/src/components/SquiggleChart.tsx @@ -5,6 +5,7 @@ import { defaultEnvironment, resultMap, SqValueTag, + SqProject, } from "@quri/squiggle-lang"; import { useSquiggle } from "../lib/hooks"; import { SquiggleViewer } from "./SquiggleViewer"; @@ -53,6 +54,12 @@ export interface SquiggleChartProps { /** 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 = () => {}; @@ -60,7 +67,7 @@ const defaultImports: JsImports = {}; export const SquiggleChart: React.FC = React.memo( ({ - code = "", + code, executionId = 0, environment, onChange = defaultOnChange, // defaultOnChange must be constant, don't move its definition here @@ -81,8 +88,14 @@ export const SquiggleChart: React.FC = React.memo( xAxisType = "number", distributionChartActions, enableLocalSettings = false, + sourceName = "main", + includes = [], + project = SqProject.create(), }) => { const { result, bindings } = useSquiggle({ + sourceName, + includes, + project, code, environment, jsImports, diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts index bbd0d178..dd6f9a94 100644 --- a/packages/components/src/index.ts +++ b/packages/components/src/index.ts @@ -2,3 +2,4 @@ export { SquiggleChart } from "./components/SquiggleChart"; export { SquiggleEditor } from "./components/SquiggleEditor"; export { SquigglePlayground } from "./components/SquigglePlayground"; export { SquiggleContainer } from "./components/SquiggleContainer"; +export * as squiggle from "@quri/squiggle-lang" diff --git a/packages/components/src/lib/hooks/useSquiggle.ts b/packages/components/src/lib/hooks/useSquiggle.ts index 5916ac54..e6336eea 100644 --- a/packages/components/src/lib/hooks/useSquiggle.ts +++ b/packages/components/src/lib/hooks/useSquiggle.ts @@ -3,29 +3,38 @@ import { useEffect, useMemo } from "react"; import { JsImports, jsImportsToSquiggleCode } from "../jsImports"; type SquiggleArgs = { - code: string; + code?: string; executionId?: number; jsImports?: JsImports; environment?: environment; + project: SqProject; + sourceName: string; + includes: string[]; onChange?: (expr: SqValue | undefined) => void; }; export const useSquiggle = (args: SquiggleArgs) => { const result = useMemo( () => { - const project = SqProject.create(); - project.setSource("main", args.code); + const project = args.project; + let code = project.getSource(args.sourceName) + if(args.code) { + code = args.code + } + project.setSource(args.sourceName, code ?? ""); + let includes = args.includes; if (args.environment) { project.setEnvironment(args.environment); } if (args.jsImports && Object.keys(args.jsImports).length) { const importsSource = jsImportsToSquiggleCode(args.jsImports); project.setSource("imports", importsSource); - project.setContinues("main", ["imports"]); + includes.push("imports") } - project.run("main"); - const result = project.getResult("main"); - const bindings = project.getBindings("main"); + project.setContinues(args.sourceName, includes); + project.run(args.sourceName); + const result = project.getResult(args.sourceName); + const bindings = project.getBindings(args.sourceName); return { result, bindings }; }, // eslint-disable-next-line react-hooks/exhaustive-deps