diff --git a/packages/components/src/components/SquiggleChart.tsx b/packages/components/src/components/SquiggleChart.tsx index b935a932..c796b931 100644 --- a/packages/components/src/components/SquiggleChart.tsx +++ b/packages/components/src/components/SquiggleChart.tsx @@ -4,12 +4,19 @@ import { environment, defaultEnvironment, resultMap, - SqValueLocation, SqValueTag, } from "@quri/squiggle-lang"; import { useSquiggle } from "../lib/hooks"; import { SquiggleViewer } from "./SquiggleViewer"; +type jsImports = + | number + | string + | jsImports[] + | { + [k: string]: jsImports; + }; + export interface SquiggleChartProps { /** The input string for squiggle */ code?: string; @@ -31,7 +38,7 @@ export interface SquiggleChartProps { width?: number; height?: number; /** JS imported parameters */ - // jsImports?: jsImports; + jsImports?: jsImports; /** Whether to show a summary of the distribution */ showSummary?: boolean; /** Set the x scale to be logarithmic by deault */ @@ -54,6 +61,7 @@ export interface SquiggleChartProps { } const defaultOnChange = () => {}; +const defaultImports = {}; export const SquiggleChart: React.FC = React.memo( ({ @@ -62,7 +70,7 @@ export const SquiggleChart: React.FC = React.memo( environment, onChange = defaultOnChange, // defaultOnChange must be constant, don't move its definition here height = 200, - // jsImports = defaultImports, + jsImports = defaultImports, showSummary = false, width, logX = false, @@ -81,7 +89,7 @@ export const SquiggleChart: React.FC = React.memo( const { result, bindings } = useSquiggle({ code, environment, - // jsImports, + jsImports, onChange, executionId, }); diff --git a/packages/components/src/lib/hooks/useSquiggle.ts b/packages/components/src/lib/hooks/useSquiggle.ts index 1086a684..1a6b3c18 100644 --- a/packages/components/src/lib/hooks/useSquiggle.ts +++ b/packages/components/src/lib/hooks/useSquiggle.ts @@ -1,10 +1,18 @@ -import { environment, run, SqValue } from "@quri/squiggle-lang"; +import { environment, SqProject, SqValue } from "@quri/squiggle-lang"; import { useEffect, useMemo } from "react"; +export type jsImports = + | number + | string + | jsImports[] + | { + [k: string]: jsImports; + }; + type SquiggleArgs = { code: string; executionId?: number; - // jsImports?: jsImports; + jsImports?: jsImports; environment?: environment; onChange?: (expr: SqValue | undefined) => void; }; @@ -12,10 +20,22 @@ type SquiggleArgs = { export const useSquiggle = (args: SquiggleArgs) => { const result = useMemo( () => { - const result = run(args.code, { - environment: args.environment, - }); - return result; + const project = SqProject.create(); + project.setSource("main", args.code); + if (args.environment) { + project.setEnvironment(args.environment); + } + if (args.jsImports) { + console.log(JSON.stringify(args.jsImports)); + project.setSource( + "zzz", // due to bug in topology implementation, can be renamed later + "imports = " + JSON.stringify(args.jsImports) + ); + } + project.run("main"); + const result = project.getResult("main"); + const bindings = project.getBindings("main"); + return { result, bindings }; }, // eslint-disable-next-line react-hooks/exhaustive-deps [