Compare commits
4 Commits
refactor-c
...
develop
Author | SHA1 | Date | |
---|---|---|---|
|
9e2eace05e | ||
|
a0000cd179 | ||
|
98454a87b5 | ||
|
0f8e7ce6b6 |
|
@ -24,7 +24,7 @@ export const Alert: React.FC<{
|
|||
children,
|
||||
}) => {
|
||||
return (
|
||||
<div className={clsx("rounded-md p-4", backgroundColor)}>
|
||||
<div className={clsx("rounded-md p-4", backgroundColor)} role="status">
|
||||
<div className="flex">
|
||||
<Icon
|
||||
className={clsx("h-5 w-5 flex-shrink-0", iconColor)}
|
||||
|
|
|
@ -55,10 +55,7 @@ export const CodeEditor: FC<CodeEditorProps> = ({
|
|||
editorProps={{
|
||||
$blockScrolling: true,
|
||||
}}
|
||||
setOptions={{
|
||||
enableBasicAutocompletion: false,
|
||||
enableLiveAutocompletion: false,
|
||||
}}
|
||||
setOptions={{}}
|
||||
commands={[
|
||||
{
|
||||
name: "submit",
|
||||
|
|
|
@ -1,5 +1,10 @@
|
|||
import * as React from "react";
|
||||
import { SqValue, environment, SqProject } from "@quri/squiggle-lang";
|
||||
import {
|
||||
SqValue,
|
||||
environment,
|
||||
SqProject,
|
||||
defaultEnvironment,
|
||||
} from "@quri/squiggle-lang";
|
||||
import { useSquiggle } from "../lib/hooks";
|
||||
import { SquiggleViewer } from "./SquiggleViewer";
|
||||
import { JsImports } from "../lib/jsImports";
|
||||
|
@ -66,7 +71,6 @@ type ProjectExecutionProps = {
|
|||
};
|
||||
const defaultOnChange = () => {};
|
||||
const defaultImports: JsImports = {};
|
||||
const defaultContinues: string[] = [];
|
||||
|
||||
export const splitSquiggleChartSettings = (props: SquiggleChartProps) => {
|
||||
const {
|
||||
|
@ -120,24 +124,15 @@ export const SquiggleChart: React.FC<SquiggleChartProps> = React.memo(
|
|||
width,
|
||||
height = 200,
|
||||
enableLocalSettings = false,
|
||||
continues = defaultContinues,
|
||||
continues,
|
||||
project,
|
||||
environment,
|
||||
} = props;
|
||||
|
||||
const p = React.useMemo(() => {
|
||||
if (props.project) {
|
||||
return props.project;
|
||||
} else {
|
||||
const p = SqProject.create();
|
||||
if (props.environment) {
|
||||
p.setEnvironment(props.environment);
|
||||
}
|
||||
return p;
|
||||
}
|
||||
}, [props.project, props.environment]);
|
||||
|
||||
const resultAndBindings = useSquiggle({
|
||||
environment,
|
||||
continues,
|
||||
project: p,
|
||||
project,
|
||||
code,
|
||||
jsImports,
|
||||
onChange,
|
||||
|
@ -153,7 +148,9 @@ export const SquiggleChart: React.FC<SquiggleChartProps> = React.memo(
|
|||
height={height}
|
||||
distributionPlotSettings={distributionPlotSettings}
|
||||
chartSettings={chartSettings}
|
||||
environment={p.getEnvironment()}
|
||||
environment={
|
||||
project ? project.getEnvironment() : environment ?? defaultEnvironment
|
||||
}
|
||||
enableLocalSettings={enableLocalSettings}
|
||||
/>
|
||||
);
|
||||
|
|
|
@ -54,17 +54,13 @@ export const SquiggleEditor: React.FC<SquiggleEditorProps> = (props) => {
|
|||
width,
|
||||
height = 200,
|
||||
enableLocalSettings = false,
|
||||
continues,
|
||||
project,
|
||||
} = props;
|
||||
|
||||
const project = React.useMemo(() => {
|
||||
const p = SqProject.create();
|
||||
if (environment) {
|
||||
p.setEnvironment(environment);
|
||||
}
|
||||
return p;
|
||||
}, [environment]);
|
||||
|
||||
const resultAndBindings = useSquiggle({
|
||||
environment,
|
||||
continues,
|
||||
code,
|
||||
project,
|
||||
jsImports,
|
||||
|
|
|
@ -251,6 +251,8 @@ export const SquigglePlayground: FC<PlaygroundProps> = ({
|
|||
onSettingsChange,
|
||||
showEditor = true,
|
||||
showShareButton = false,
|
||||
continues,
|
||||
project,
|
||||
}) => {
|
||||
const [code, setCode] = useMaybeControlledValue({
|
||||
value: controlledCode,
|
||||
|
@ -305,15 +307,9 @@ export const SquigglePlayground: FC<PlaygroundProps> = ({
|
|||
executionId,
|
||||
} = useRunnerState(code);
|
||||
|
||||
const project = React.useMemo(() => {
|
||||
const p = SqProject.create();
|
||||
if (environment) {
|
||||
p.setEnvironment(environment);
|
||||
}
|
||||
return p;
|
||||
}, [environment]);
|
||||
|
||||
const resultAndBindings = useSquiggle({
|
||||
environment,
|
||||
continues,
|
||||
code: renderedCode,
|
||||
project,
|
||||
jsImports: imports,
|
||||
|
|
|
@ -45,7 +45,7 @@ export const VariableBox: React.FC<VariableBoxProps> = ({
|
|||
: location.path.items[location.path.items.length - 1];
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div role={isTopLevel ? "status" : undefined}>
|
||||
<header className="inline-flex space-x-1">
|
||||
<Tooltip text={heading}>
|
||||
<span
|
||||
|
|
|
@ -4,16 +4,18 @@ import {
|
|||
SqProject,
|
||||
SqRecord,
|
||||
SqValue,
|
||||
environment,
|
||||
} from "@quri/squiggle-lang";
|
||||
import { useEffect, useMemo } from "react";
|
||||
import { JsImports, jsImportsToSquiggleCode } from "../jsImports";
|
||||
import * as uuid from "uuid";
|
||||
|
||||
type SquiggleArgs = {
|
||||
environment?: environment;
|
||||
code: string;
|
||||
executionId?: number;
|
||||
jsImports?: JsImports;
|
||||
project: SqProject;
|
||||
project?: SqProject;
|
||||
continues?: string[];
|
||||
onChange?: (expr: SqValue | undefined, sourceName: string) => void;
|
||||
};
|
||||
|
@ -27,15 +29,25 @@ const importSourceName = (sourceName: string) => "imports-" + sourceName;
|
|||
const defaultContinues = [];
|
||||
|
||||
export const useSquiggle = (args: SquiggleArgs): ResultAndBindings => {
|
||||
const project = useMemo(() => {
|
||||
if (args.project) {
|
||||
return args.project;
|
||||
} else {
|
||||
const p = SqProject.create();
|
||||
if (args.environment) {
|
||||
p.setEnvironment(args.environment);
|
||||
}
|
||||
return p;
|
||||
}
|
||||
}, [args.project, args.environment]);
|
||||
|
||||
const sourceName = useMemo(() => uuid.v4(), []);
|
||||
|
||||
const env = args.project.getEnvironment();
|
||||
const env = project.getEnvironment();
|
||||
const continues = args.continues || defaultContinues;
|
||||
|
||||
const result = useMemo(
|
||||
() => {
|
||||
const project = args.project;
|
||||
|
||||
project.setSource(sourceName, args.code);
|
||||
let fullContinues = continues;
|
||||
if (args.jsImports && Object.keys(args.jsImports).length) {
|
||||
|
@ -59,7 +71,7 @@ export const useSquiggle = (args: SquiggleArgs): ResultAndBindings => {
|
|||
args.executionId,
|
||||
sourceName,
|
||||
continues,
|
||||
args.project,
|
||||
project,
|
||||
env,
|
||||
]
|
||||
);
|
||||
|
@ -75,11 +87,11 @@ export const useSquiggle = (args: SquiggleArgs): ResultAndBindings => {
|
|||
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
args.project.removeSource(sourceName);
|
||||
if (args.project.getSource(importSourceName(sourceName)))
|
||||
args.project.removeSource(importSourceName(sourceName));
|
||||
project.removeSource(sourceName);
|
||||
if (project.getSource(importSourceName(sourceName)))
|
||||
project.removeSource(importSourceName(sourceName));
|
||||
};
|
||||
}, [args.project, sourceName]);
|
||||
}, [project, sourceName]);
|
||||
|
||||
return result;
|
||||
};
|
||||
|
|
|
@ -1,9 +1,14 @@
|
|||
import { render } from "@testing-library/react";
|
||||
import { render, screen } from "@testing-library/react";
|
||||
import React from "react";
|
||||
import "@testing-library/jest-dom";
|
||||
import { SquiggleChart } from "../src/index";
|
||||
import {
|
||||
SquiggleChart,
|
||||
SquiggleEditor,
|
||||
SquigglePlayground,
|
||||
} from "../src/index";
|
||||
import { SqProject } from "@quri/squiggle-lang";
|
||||
|
||||
test("Logs nothing on render", async () => {
|
||||
test("Chart logs nothing on render", async () => {
|
||||
const { unmount } = render(<SquiggleChart code={"normal(0, 1)"} />);
|
||||
unmount();
|
||||
|
||||
|
@ -11,3 +16,38 @@ test("Logs nothing on render", async () => {
|
|||
expect(console.warn).not.toBeCalled();
|
||||
expect(console.error).not.toBeCalled();
|
||||
});
|
||||
|
||||
test("Editor logs nothing on render", async () => {
|
||||
const { unmount } = render(<SquiggleEditor code={"normal(0, 1)"} />);
|
||||
unmount();
|
||||
|
||||
expect(console.log).not.toBeCalled();
|
||||
expect(console.warn).not.toBeCalled();
|
||||
expect(console.error).not.toBeCalled();
|
||||
});
|
||||
|
||||
test("Project dependencies work in editors", async () => {
|
||||
const project = SqProject.create();
|
||||
|
||||
render(<SquiggleEditor code={"x = 1"} project={project} />);
|
||||
const source = project.getSourceIds()[0];
|
||||
const { container } = render(
|
||||
<SquiggleEditor code={"x + 1"} project={project} continues={[source]} />
|
||||
);
|
||||
expect(container).toHaveTextContent("2");
|
||||
});
|
||||
|
||||
test("Project dependencies work in playgrounds", async () => {
|
||||
const project = SqProject.create();
|
||||
project.setSource("depend", "x = 1");
|
||||
|
||||
render(
|
||||
<SquigglePlayground
|
||||
code={"x + 1"}
|
||||
project={project}
|
||||
continues={["depend"]}
|
||||
/>
|
||||
);
|
||||
// We must await here because SquigglePlayground loads results asynchronously
|
||||
expect(await screen.findByRole("status")).toHaveTextContent("2");
|
||||
});
|
||||
|
|
Loading…
Reference in New Issue
Block a user