-
- ) : (
- <>
- )}
-
-
- );
- }
- case "string":
- return (
- {`"${expression.value}"`}
- );
- case "boolean":
- return (
-
- {expression.value.toString()}
-
- );
- case "symbol":
- return (
-
- {expression.value}
-
- );
- case "call":
- return (
-
- {expression.value}
-
- );
- case "array":
- return (
-
- {expression.value.map((r) => (
-
- ))}
-
- );
- case "record":
- return (
-
- {Object.entries(expression.value).map(([key, r]) => (
- <>
- {key}
-
-
- ))}
-
- );
- case "arraystring":
- return (
-
- {expression.value.map((r) => `"${r}"`)}
-
- );
- case "lambda":
- return (
-
- There is no viewer currently available for function types.
-
- );
- }
-};
+import { useSquiggle } from "../lib/hooks";
+import { SquiggleViewer } from "./SquiggleViewer";
export interface SquiggleChartProps {
/** The input string for squiggle */
- squiggleString?: string;
+ 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 */
- outputXYPoints?: number;
- kernelWidth?: number;
- pointDistLength?: number;
- /** If the result is a function, where the function starts */
+ environment?: environment;
+ /** If the result is a function, where the function domain starts */
diagramStart?: number;
- /** If the result is a function, where the function ends */
+ /** If the result is a function, where the function domain ends */
diagramStop?: number;
- /** If the result is a function, how many points along the function it samples */
+ /** If the result is a function, the amount of stops sampled */
diagramCount?: number;
- /** When the environment changes */
- onChange?(expr: squiggleExpression): void;
+ /** When the squiggle code gets reevaluated */
+ onChange?(expr: squiggleExpression | undefined): void;
/** CSS width of the element */
width?: number;
height?: number;
@@ -203,59 +35,90 @@ export interface SquiggleChartProps {
bindings?: bindings;
/** JS imported parameters */
jsImports?: jsImports;
- /** Whether to show type information about returns, default false */
- showTypes?: boolean;
- /** Whether to show graph controls (scale etc)*/
- showControls?: boolean;
+ /** 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 to show vega actions to the user, so they can copy the chart spec */
+ distributionChartActions?: boolean;
+ enableLocalSettings?: boolean;
}
-const ChartWrapper = styled.div`
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
- "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
- "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-`;
+const defaultOnChange = () => {};
-export const SquiggleChart: React.FC = ({
- squiggleString = "",
- sampleCount = 1000,
- outputXYPoints = 1000,
- onChange = () => {},
- height = 60,
- bindings = defaultBindings,
- jsImports = defaultImports,
- width,
- showTypes = false,
- showControls = false,
-}: SquiggleChartProps) => {
- let samplingInputs: samplingParams = {
- sampleCount: sampleCount,
- xyPointLength: outputXYPoints,
- };
- let expressionResult = run(
- squiggleString,
- bindings,
- samplingInputs,
- jsImports
- );
- let internal: JSX.Element;
- if (expressionResult.tag === "Ok") {
- let expression = expressionResult.value;
- onChange(expression);
- internal = (
- = React.memo(
+ ({
+ code = "",
+ executionId = 0,
+ environment,
+ onChange = defaultOnChange, // defaultOnChange must be constant, don't move its definition here
+ height = 200,
+ bindings = defaultBindings,
+ jsImports = defaultImports,
+ showSummary = false,
+ width,
+ logX = false,
+ expY = false,
+ diagramStart = 0,
+ diagramStop = 10,
+ diagramCount = 20,
+ tickFormat,
+ minX,
+ maxX,
+ color,
+ title,
+ distributionChartActions,
+ enableLocalSettings = false,
+ }) => {
+ const result = useSquiggle({
+ code,
+ bindings,
+ environment,
+ jsImports,
+ onChange,
+ executionId,
+ });
+
+ const distributionPlotSettings = {
+ showSummary,
+ logX,
+ expY,
+ format: tickFormat,
+ minX,
+ maxX,
+ color,
+ title,
+ actions: distributionChartActions,
+ };
+
+ const chartSettings = {
+ start: diagramStart,
+ stop: diagramStop,
+ count: diagramCount,
+ };
+
+ return (
+
);
- } else {
- internal = (
-
- {errorValueToString(expressionResult.value)}
-
- );
}
- return {internal};
-};
+);
diff --git a/packages/components/src/components/SquiggleContainer.tsx b/packages/components/src/components/SquiggleContainer.tsx
new file mode 100644
index 00000000..bb3f1db4
--- /dev/null
+++ b/packages/components/src/components/SquiggleContainer.tsx
@@ -0,0 +1,26 @@
+import React, { useContext } from "react";
+
+type Props = {
+ children: React.ReactNode;
+};
+
+type SquiggleContextShape = {
+ containerized: boolean;
+};
+const SquiggleContext = React.createContext({
+ containerized: false,
+});
+
+export const SquiggleContainer: React.FC = ({ children }) => {
+ const context = useContext(SquiggleContext);
+
+ if (context.containerized) {
+ return <>{children};
+ } else {
+ return (
+
+
{children}
+
+ );
+ }
+};
diff --git a/packages/components/src/components/SquiggleEditor.tsx b/packages/components/src/components/SquiggleEditor.tsx
index 572dbd76..027eecb9 100644
--- a/packages/components/src/components/SquiggleEditor.tsx
+++ b/packages/components/src/components/SquiggleEditor.tsx
@@ -1,224 +1,92 @@
-import * as React from "react";
-import * as ReactDOM from "react-dom";
-import { SquiggleChart } from "./SquiggleChart";
+import React from "react";
import { CodeEditor } from "./CodeEditor";
-import styled from "styled-components";
-import type {
- squiggleExpression,
- samplingParams,
- bindings,
- jsImports,
-} from "@quri/squiggle-lang";
-import {
- runPartial,
- errorValueToString,
- defaultImports,
- defaultBindings,
-} from "@quri/squiggle-lang";
-import { ErrorBox } from "./ErrorBox";
+import { environment, bindings, jsImports } from "@quri/squiggle-lang";
+import { defaultImports, defaultBindings } from "@quri/squiggle-lang";
+import { SquiggleContainer } from "./SquiggleContainer";
+import { SquiggleChart, SquiggleChartProps } from "./SquiggleChart";
+import { useSquigglePartial, useMaybeControlledValue } from "../lib/hooks";
+import { SquiggleErrorAlert } from "./SquiggleErrorAlert";
-export interface SquiggleEditorProps {
- /** The input string for squiggle */
- initialSquiggleString?: string;
- /** If the output requires monte carlo sampling, the amount of samples */
- sampleCount?: number;
- /** The amount of points returned to draw the distribution */
- outputXYPoints?: number;
- kernelWidth?: number;
- pointDistLength?: number;
- /** If the result is a function, where the function starts */
- diagramStart?: number;
- /** If the result is a function, where the function ends */
- diagramStop?: number;
- /** If the result is a function, how many points along the function it samples */
- diagramCount?: number;
- /** when the environment changes. Used again for notebook magic*/
- onChange?(expr: squiggleExpression): void;
- /** The width of the element */
- width?: number;
- /** Previous variable declarations */
- bindings?: bindings;
- /** JS Imports */
- jsImports?: jsImports;
- /** Whether to show detail about types of the returns, default false */
- showTypes?: boolean;
- /** Whether to give users access to graph controls */
- showControls: boolean;
-}
+const WrappedCodeEditor: React.FC<{
+ code: string;
+ setCode: (code: string) => void;
+}> = ({ code, setCode }) => (
+
- );
+export type SquiggleEditorProps = SquiggleChartProps & {
+ defaultCode?: string;
+ onCodeChange?: (code: string) => void;
};
-export function renderSquiggleEditorToDom(props: SquiggleEditorProps) {
- let parent = document.createElement("div");
- ReactDOM.render(
- {
- // Typescript complains on two levels here.
- // - Div elements don't have a value property
- // - Even if it did (like it was an input element), it would have to
- // be a string
- //
- // Which are reasonable in most web contexts.
- //
- // However we're using observable, neither of those things have to be
- // true there. div elements can contain the value property, and can have
- // the value be any datatype they wish.
- //
- // This is here to get the 'viewof' part of:
- // viewof env = cell('normal(0,1)')
- // to work
- // @ts-ignore
- parent.value = expr;
+export const SquiggleEditor: React.FC = (props) => {
+ const [code, setCode] = useMaybeControlledValue({
+ value: props.code,
+ defaultValue: props.defaultCode ?? "",
+ onChange: props.onCodeChange,
+ });
- parent.dispatchEvent(new CustomEvent("input"));
- if (props.onChange) props.onChange(expr);
- }}
- />,
- parent
+ let chartProps = { ...props, code };
+ return (
+
+
+
+
);
- return parent;
-}
+};
export interface SquigglePartialProps {
- /** The input string for squiggle */
- initialSquiggleString?: string;
- /** If the output requires monte carlo sampling, the amount of samples */
- sampleCount?: number;
- /** The amount of points returned to draw the distribution */
- outputXYPoints?: number;
- kernelWidth?: number;
- pointDistLength?: number;
- /** If the result is a function, where the function starts */
- diagramStart?: number;
- /** If the result is a function, where the function ends */
- diagramStop?: number;
- /** If the result is a function, how many points along the function it samples */
- diagramCount?: number;
+ /** The text inside the input (controlled) */
+ code?: string;
+ /** The default text inside the input (unControlled) */
+ defaultCode?: string;
/** when the environment changes. Used again for notebook magic*/
- onChange?(expr: bindings): void;
+ onChange?(expr: bindings | undefined): void;
+ /** When the code changes */
+ onCodeChange?(code: string): void;
/** Previously declared variables */
bindings?: bindings;
+ /** If the output requires monte carlo sampling, the amount of samples */
+ environment?: environment;
/** Variables imported from js */
jsImports?: jsImports;
- /** Whether to give users access to graph controls */
- showControls?: boolean;
}
-export let SquigglePartial: React.FC = ({
- initialSquiggleString = "",
+export const SquigglePartial: React.FC = ({
+ code: controlledCode,
+ defaultCode = "",
onChange,
+ onCodeChange,
bindings = defaultBindings,
- sampleCount = 1000,
- outputXYPoints = 1000,
+ environment,
jsImports = defaultImports,
}: SquigglePartialProps) => {
- let samplingInputs: samplingParams = {
- sampleCount: sampleCount,
- xyPointLength: outputXYPoints,
- };
- let [expression, setExpression] = React.useState(initialSquiggleString);
- let [error, setError] = React.useState(null);
+ const [code, setCode] = useMaybeControlledValue({
+ value: controlledCode,
+ defaultValue: defaultCode,
+ onChange: onCodeChange,
+ });
- let runSquiggleAndUpdateBindings = () => {
- let squiggleResult = runPartial(
- expression,
- bindings,
- samplingInputs,
- jsImports
- );
- if (squiggleResult.tag == "Ok") {
- if (onChange) onChange(squiggleResult.value);
- setError(null);
- } else {
- setError(errorValueToString(squiggleResult.value));
- }
- };
-
- React.useEffect(runSquiggleAndUpdateBindings, [expression]);
+ const result = useSquigglePartial({
+ code,
+ bindings,
+ environment,
+ jsImports,
+ onChange,
+ });
return (
-
+
+ You can import variables from JSON into your Squiggle code.
+ Variables are accessed with dollar signs. For example, "timeNow"
+ would be accessed as "$timeNow".
+
+
+
-
-
-
-
+
+
+ {importsAreValid ? (
+
+ ) : (
+
+ You must use valid JSON in this editor.
+
+ )}
+