Get projects working in Playgrounds

This commit is contained in:
Sam Nolan 2022-10-10 14:23:04 +11:00
parent 0f8e7ce6b6
commit 98454a87b5
6 changed files with 30 additions and 17 deletions

View File

@ -24,7 +24,7 @@ export const Alert: React.FC<{
children, children,
}) => { }) => {
return ( return (
<div className={clsx("rounded-md p-4", backgroundColor)}> <div className={clsx("rounded-md p-4", backgroundColor)} role="status">
<div className="flex"> <div className="flex">
<Icon <Icon
className={clsx("h-5 w-5 flex-shrink-0", iconColor)} className={clsx("h-5 w-5 flex-shrink-0", iconColor)}

View File

@ -71,7 +71,6 @@ type ProjectExecutionProps = {
}; };
const defaultOnChange = () => {}; const defaultOnChange = () => {};
const defaultImports: JsImports = {}; const defaultImports: JsImports = {};
const defaultContinues: string[] = [];
export const splitSquiggleChartSettings = (props: SquiggleChartProps) => { export const splitSquiggleChartSettings = (props: SquiggleChartProps) => {
const { const {
@ -125,7 +124,7 @@ export const SquiggleChart: React.FC<SquiggleChartProps> = React.memo(
width, width,
height = 200, height = 200,
enableLocalSettings = false, enableLocalSettings = false,
continues = defaultContinues, continues,
project, project,
environment, environment,
} = props; } = props;

View File

@ -35,7 +35,6 @@ export type SquiggleEditorProps = SquiggleChartProps & {
const defaultOnChange = () => {}; const defaultOnChange = () => {};
const defaultImports: JsImports = {}; const defaultImports: JsImports = {};
const defaultContinues: string[] = [];
export const SquiggleEditor: React.FC<SquiggleEditorProps> = (props) => { export const SquiggleEditor: React.FC<SquiggleEditorProps> = (props) => {
const [code, setCode] = useMaybeControlledValue({ const [code, setCode] = useMaybeControlledValue({
@ -55,7 +54,7 @@ export const SquiggleEditor: React.FC<SquiggleEditorProps> = (props) => {
width, width,
height = 200, height = 200,
enableLocalSettings = false, enableLocalSettings = false,
continues = defaultContinues, continues,
project, project,
} = props; } = props;

View File

@ -251,6 +251,8 @@ export const SquigglePlayground: FC<PlaygroundProps> = ({
onSettingsChange, onSettingsChange,
showEditor = true, showEditor = true,
showShareButton = false, showShareButton = false,
continues,
project,
}) => { }) => {
const [code, setCode] = useMaybeControlledValue({ const [code, setCode] = useMaybeControlledValue({
value: controlledCode, value: controlledCode,
@ -305,15 +307,9 @@ export const SquigglePlayground: FC<PlaygroundProps> = ({
executionId, executionId,
} = useRunnerState(code); } = useRunnerState(code);
const project = React.useMemo(() => {
const p = SqProject.create();
if (environment) {
p.setEnvironment(environment);
}
return p;
}, [environment]);
const resultAndBindings = useSquiggle({ const resultAndBindings = useSquiggle({
environment,
continues,
code, code,
project, project,
jsImports: imports, jsImports: imports,

View File

@ -45,7 +45,7 @@ export const VariableBox: React.FC<VariableBoxProps> = ({
: location.path.items[location.path.items.length - 1]; : location.path.items[location.path.items.length - 1];
return ( return (
<div> <div role={isTopLevel ? "status" : undefined}>
<header className="inline-flex space-x-1"> <header className="inline-flex space-x-1">
<Tooltip text={heading}> <Tooltip text={heading}>
<span <span

View File

@ -1,7 +1,11 @@
import { render, screen } from "@testing-library/react"; import { render, screen } from "@testing-library/react";
import React from "react"; import React from "react";
import "@testing-library/jest-dom"; import "@testing-library/jest-dom";
import { SquiggleChart, SquiggleEditor } from "../src/index"; import {
SquiggleChart,
SquiggleEditor,
SquigglePlayground,
} from "../src/index";
import { SqProject } from "@quri/squiggle-lang"; import { SqProject } from "@quri/squiggle-lang";
test("Chart logs nothing on render", async () => { test("Chart logs nothing on render", async () => {
@ -27,8 +31,23 @@ test("Project dependencies work in editors", async () => {
render(<SquiggleEditor code={"x = 1"} project={project} />); render(<SquiggleEditor code={"x = 1"} project={project} />);
const source = project.getSourceIds()[0]; const source = project.getSourceIds()[0];
render( const { container } = render(
<SquiggleEditor code={"x + 1"} project={project} continues={[source]} /> <SquiggleEditor code={"x + 1"} project={project} continues={[source]} />
); );
screen.getByText("2"); 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");
}); });