quantified.uncertainty/squiggle
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'develop' into reducer-modules

Browse Source
This commit is contained in:
Umur Ozkul 2022-07-11 16:59:44 +02:00
commit 1b3626aeee
27 changed files with 890 additions and 658 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/components/README.md
View File

@ -20,7 +20,7 @@ Add to `App.js`:
```jsx
import { SquiggleEditor } from "@quri/squiggle-components";
<SquiggleEditor
initialSquiggleString="x = beta($alpha, 10); x + $shift"
defaultCode="x = beta($alpha, 10); x + $shift"
jsImports={{ alpha: 3, shift: 20 }}
/>;
```
@ -50,7 +50,7 @@ export function DynamicSquiggleChart({ squiggleString }) {
} else {
return (
<SquiggleChart
squiggleString={squiggleString}
defaultCode={squiggleString}
width={445}
height={200}
showSummary={true}

5
packages/components/package.json
View File

@ -8,7 +8,8 @@
"@hookform/resolvers": "^2.9.3",
"@quri/squiggle-lang": "^0.2.8",
"@react-hook/size": "^2.1.2",
"clsx": "^1.2.0",
"clsx": "^1.1.1",
"framer-motion": "^6.4.1",
"lodash": "^4.17.21",
"react": "^18.1.0",
"react-ace": "^10.1.0",
@ -38,7 +39,6 @@
"@types/lodash": "^4.14.182",
"@types/node": "^18.0.0",
"@types/react": "^18.0.9",
"@types/react-dom": "^18.0.5",
"@types/styled-components": "^5.1.24",
"@types/webpack": "^5.28.0",
"cross-env": "^7.0.3",
@ -47,7 +47,6 @@
"postcss-import": "^14.1.0",
"postcss-loader": "^7.0.0",
"react": "^18.1.0",
"react-dom": "^18.2.0",
"react-scripts": "^5.0.1",
"style-loader": "^3.3.1",
"tailwindcss": "^3.1.3",

15
packages/components/src/components/CodeEditor.tsx
View File

@ -1,5 +1,5 @@
import _ from "lodash";
import React, { FC, useMemo } from "react";
import React, { FC, useMemo, useRef } from "react";
import AceEditor from "react-ace";
import "ace-builds/src-noconflict/mode-golang";
@ -8,6 +8,7 @@ import "ace-builds/src-noconflict/theme-github";
interface CodeEditorProps {
value: string;
onChange: (value: string) => void;
onSubmit?: () => void;
oneLine?: boolean;
width?: number;
height: number;
@ -17,6 +18,7 @@ interface CodeEditorProps {
export const CodeEditor: FC<CodeEditorProps> = ({
value,
onChange,
onSubmit,
oneLine = false,
showGutter = false,
height,
@ -24,6 +26,10 @@ export const CodeEditor: FC<CodeEditorProps> = ({
const lineCount = value.split("\n").length;
const id = useMemo(() => _.uniqueId(), []);
// this is necessary because AceEditor binds commands on mount, see https://github.com/securingsincity/react-ace/issues/684
const onSubmitRef = useRef<typeof onSubmit | null>(null);
onSubmitRef.current = onSubmit;
return (
<AceEditor
value={value}
@ -46,6 +52,13 @@ export const CodeEditor: FC<CodeEditorProps> = ({
enableBasicAutocompletion: false,
enableLiveAutocompletion: false,
}}
commands={[
{
name: "submit",
bindKey: { mac: "Cmd-Enter", win: "Ctrl-Enter" },
exec: () => onSubmitRef.current?.(),
},
]}
/>
);
};

34
packages/components/src/components/SquiggleChart.tsx
View File

@ -8,20 +8,23 @@ import {
defaultBindings,
defaultEnvironment,
} from "@quri/squiggle-lang";
import { FunctionChartSettings } from "./FunctionChart";
import { useSquiggle } from "../lib/hooks";
import { SquiggleErrorAlert } from "./SquiggleErrorAlert";
import { SquiggleItem } from "./SquiggleItem";
export interface SquiggleChartProps {
/** The input string for squiggle */
squiggleString?: string;
code?: string;
/** If the output requires monte carlo sampling, the amount of samples */
sampleCount?: number;
/** The amount of points returned to draw the distribution */
environment?: environment;
/** If the result is a function, where the function starts, ends and the amount of stops */
chartSettings?: FunctionChartSettings;
/** If the result is a function, where the function domain starts */
diagramStart?: number;
/** If the result is a function, where the function domain ends */
diagramStop?: number;
/** If the result is a function, the amount of stops sampled */
diagramCount?: number;
/** When the squiggle code gets reevaluated */
onChange?(expr: squiggleExpression | undefined): void;
/** CSS width of the element */
@ -44,10 +47,10 @@ export interface SquiggleChartProps {
}
const defaultOnChange = () => {};
const defaultChartSettings = { start: 0, stop: 10, count: 20 };
export const SquiggleChart: React.FC<SquiggleChartProps> = ({
squiggleString = "",
export const SquiggleChart: React.FC<SquiggleChartProps> = React.memo(
({
code = "",
environment,
onChange = defaultOnChange, // defaultOnChange must be constant, don't move its definition here
height = 200,
@ -59,10 +62,12 @@ export const SquiggleChart: React.FC<SquiggleChartProps> = ({
showControls = false,
logX = false,
expY = false,
chartSettings = defaultChartSettings,
diagramStart = 0,
diagramStop = 10,
diagramCount = 100,
}) => {
const { result } = useSquiggle({
code: squiggleString,
const result = useSquiggle({
code,
bindings,
environment,
jsImports,
@ -80,6 +85,12 @@ export const SquiggleChart: React.FC<SquiggleChartProps> = ({
expY,
};
let chartSettings = {
start: diagramStart,
stop: diagramStop,
count: diagramCount,
};
return (
<SquiggleItem
expression={result.value}
@ -91,4 +102,5 @@ export const SquiggleChart: React.FC<SquiggleChartProps> = ({
environment={environment ?? defaultEnvironment}
/>
);
};
}
);

154
packages/components/src/components/SquiggleEditor.tsx
View File

@ -1,18 +1,11 @@
import React, { useState } from "react";
import * as ReactDOM from "react-dom";
import React from "react";
import { CodeEditor } from "./CodeEditor";
import {
squiggleExpression,
environment,
bindings,
jsImports,
defaultEnvironment,
} from "@quri/squiggle-lang";
import { environment, bindings, jsImports } from "@quri/squiggle-lang";
import { defaultImports, defaultBindings } from "@quri/squiggle-lang";
import { SquiggleContainer } from "./SquiggleContainer";
import { useSquiggle, useSquigglePartial } from "../lib/hooks";
import { SquiggleChart, SquiggleChartProps } from "./SquiggleChart";
import { useSquigglePartial, useMaybeControlledValue } from "../lib/hooks";
import { SquiggleErrorAlert } from "./SquiggleErrorAlert";
import { SquiggleItem } from "./SquiggleItem";
const WrappedCodeEditor: React.FC<{
code: string;
@ -29,113 +22,36 @@ const WrappedCodeEditor: React.FC<{
</div>
);
export interface SquiggleEditorProps {
/** The input string for squiggle */
initialSquiggleString?: string;
/** The width of the element */
width?: 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 | undefined): void;
/** Previous variable declarations */
bindings?: bindings;
/** If the output requires monte carlo sampling, the amount of samples */
environment?: environment;
/** 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;
/** Whether to show a summary table */
showSummary?: boolean;
/** Whether to log the x coordinate on distribution charts */
logX?: boolean;
/** Whether to exp the y coordinate on distribution charts */
expY?: boolean;
}
export type SquiggleEditorProps = SquiggleChartProps & {
defaultCode?: string;
onCodeChange?: (code: string) => void;
};
export const SquiggleEditor: React.FC<SquiggleEditorProps> = ({
initialSquiggleString = "",
width,
diagramStart = 0,
diagramStop = 10,
diagramCount = 20,
onChange,
bindings = defaultBindings,
environment,
jsImports = defaultImports,
showTypes = false,
showControls = false,
showSummary = false,
logX = false,
expY = false,
}: SquiggleEditorProps) => {
const [code, setCode] = useState(initialSquiggleString);
React.useEffect(
() => setCode(initialSquiggleString),
[initialSquiggleString]
);
const { result, observableRef } = useSquiggle({
code,
bindings,
environment,
jsImports,
onChange,
export const SquiggleEditor: React.FC<SquiggleEditorProps> = (props) => {
const [code, setCode] = useMaybeControlledValue({
value: props.code,
defaultValue: props.defaultCode ?? "",
onChange: props.onCodeChange,
});
const chartSettings = {
start: diagramStart,
stop: diagramStop,
count: diagramCount,
};
const distributionPlotSettings = {
showControls,
showSummary,
logX,
expY,
};
let chartProps = { ...props, code };
return (
<div ref={observableRef}>
<SquiggleContainer>
<WrappedCodeEditor code={code} setCode={setCode} />
{result.tag === "Ok" ? (
<SquiggleItem
expression={result.value}
width={width}
height={200}
distributionPlotSettings={distributionPlotSettings}
showTypes={showTypes}
chartSettings={chartSettings}
environment={environment ?? defaultEnvironment}
/>
) : (
<SquiggleErrorAlert error={result.value} />
)}
<SquiggleChart {...chartProps} />
</SquiggleContainer>
</div>
);
};
export function renderSquiggleEditorToDom(props: SquiggleEditorProps) {
const parent = document.createElement("div");
ReactDOM.render(<SquiggleEditor {...props} />, parent);
return parent;
}
export interface SquigglePartialProps {
/** The input string for squiggle */
initialSquiggleString?: string;
/** 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 | 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 */
@ -145,19 +61,21 @@ export interface SquigglePartialProps {
}
export const SquigglePartial: React.FC<SquigglePartialProps> = ({
initialSquiggleString = "",
code: controlledCode,
defaultCode = "",
onChange,
onCodeChange,
bindings = defaultBindings,
environment,
jsImports = defaultImports,
}: SquigglePartialProps) => {
const [code, setCode] = useState(initialSquiggleString);
React.useEffect(
() => setCode(initialSquiggleString),
[initialSquiggleString]
);
const [code, setCode] = useMaybeControlledValue<string>({
value: controlledCode,
defaultValue: defaultCode,
onChange: onCodeChange,
});
const { result, observableRef } = useSquigglePartial({
const result = useSquigglePartial({
code,
bindings,
environment,
@ -166,19 +84,9 @@ export const SquigglePartial: React.FC<SquigglePartialProps> = ({
});
return (
<div ref={observableRef}>
<SquiggleContainer>
<WrappedCodeEditor code={code} setCode={setCode} />
{result.tag !== "Ok" ? (
<SquiggleErrorAlert error={result.value} />
) : null}
{result.tag !== "Ok" ? <SquiggleErrorAlert error={result.value} /> : null}
</SquiggleContainer>
</div>
);
};
export function renderSquigglePartialToDom(props: SquigglePartialProps) {
const parent = document.createElement("div");
ReactDOM.render(<SquigglePartial {...props} />, parent);
return parent;
}

420
packages/components/src/components/SquigglePlayground.tsx
View File

@ -1,15 +1,18 @@
import React, { FC, Fragment, useState, useEffect } from "react";
import ReactDOM from "react-dom";
import React, { FC, useState, useEffect, useMemo } from "react";
import { Path, useForm, UseFormRegister, useWatch } from "react-hook-form";
import * as yup from "yup";
import { useMaybeControlledValue } from "../lib/hooks";
import { yupResolver } from "@hookform/resolvers/yup";
import { Tab } from "@headlessui/react";
import {
ChartSquareBarIcon,
CheckCircleIcon,
CodeIcon,
CogIcon,
CurrencyDollarIcon,
EyeIcon,
PauseIcon,
PlayIcon,
RefreshIcon,
} from "@heroicons/react/solid";
import clsx from "clsx";
@ -20,10 +23,13 @@ import { CodeEditor } from "./CodeEditor";
import { JsonEditor } from "./JsonEditor";
import { ErrorAlert, SuccessAlert } from "./Alert";
import { SquiggleContainer } from "./SquiggleContainer";
import { Toggle } from "./ui/Toggle";
import { Checkbox } from "./ui/Checkbox";
import { StyledTab } from "./ui/StyledTab";
interface PlaygroundProps {
/** The initial squiggle string to put in the playground */
initialSquiggleString?: string;
defaultCode?: string;
/** How many pixels high is the playground */
height?: number;
/** Whether to show the types of outputs in the playground */
@ -44,9 +50,7 @@ interface PlaygroundProps {
showEditor?: boolean;
}
const schema = yup
.object()
.shape({
const schema = yup.object({}).shape({
sampleCount: yup
.number()
.required()
@ -72,76 +76,19 @@ const schema = yup
.min(10)
.max(100)
.default(50),
showTypes: yup.boolean(),
showControls: yup.boolean(),
showSummary: yup.boolean(),
showEditor: yup.boolean(),
logX: yup.boolean(),
expY: yup.boolean(),
showTypes: yup.boolean().required(),
showControls: yup.boolean().required(),
showSummary: yup.boolean().required(),
showEditor: yup.boolean().required(),
logX: yup.boolean().required(),
expY: yup.boolean().required(),
showSettingsPage: yup.boolean().default(false),
diagramStart: yup
.number()
.required()
.positive()
.integer()
.default(0)
.min(0),
diagramStop: yup
.number()
.required()
.positive()
.integer()
.default(10)
.min(0),
diagramCount: yup
.number()
.required()
.positive()
.integer()
.default(20)
.min(2),
})
.required();
diagramStart: yup.number().required().positive().integer().default(0).min(0),
diagramStop: yup.number().required().positive().integer().default(10).min(0),
diagramCount: yup.number().required().positive().integer().default(20).min(2),
});
type StyledTabProps = {
name: string;
icon: (props: React.ComponentProps<"svg">) => JSX.Element;
};
const StyledTab: React.FC<StyledTabProps> = ({ name, icon: Icon }) => {
return (
<Tab key={name} as={Fragment}>
{({ selected }) => (
<button className="group flex rounded-md focus:outline-none focus-visible:ring-offset-gray-100">
<span
className={clsx(
"p-1 pl-2.5 pr-3.5 rounded-md flex items-center text-sm font-medium",
selected && "bg-white shadow-sm ring-1 ring-black ring-opacity-5"
)}
>
<Icon
className={clsx(
"-ml-0.5 mr-2 h-4 w-4",
selected
? "text-slate-500"
: "text-gray-400 group-hover:text-gray-900"
)}
/>
<span
className={clsx(
selected
? "text-gray-900"
: "text-gray-600 group-hover:text-gray-900"
)}
>
{name}
</span>
</span>
</button>
)}
</Tab>
);
};
type FormFields = yup.InferType<typeof schema>;
const HeadedSection: FC<{ title: string; children: React.ReactNode }> = ({
title,
@ -182,96 +129,9 @@ function InputItem<T>({
);
}
function Checkbox<T>({
name,
label,
const SamplingSettings: React.FC<{ register: UseFormRegister<FormFields> }> = ({
register,
}: {
name: Path<T>;
label: string;
register: UseFormRegister<T>;
}) {
return (
<label className="flex items-center">
<input
type="checkbox"
{...register(name)}
className="form-checkbox focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
/>
{/* Clicking on the div makes the checkbox lose focus while mouse button is pressed, leading to annoying blinking; I couldn't figure out how to fix this. */}
<div className="ml-3 text-sm font-medium text-gray-700">{label}</div>
</label>
);
}
export const SquigglePlayground: FC<PlaygroundProps> = ({
initialSquiggleString = "",
height = 500,
showTypes = false,
showControls = false,
showSummary = false,
logX = false,
expY = false,
code: controlledCode,
onCodeChange,
onSettingsChange,
showEditor = true,
}) => {
const [uncontrolledCode, setUncontrolledCode] = useState(
initialSquiggleString
);
const [importString, setImportString] = useState("{}");
const [imports, setImports] = useState({});
const [importsAreValid, setImportsAreValid] = useState(true);
const { register, control } = useForm({
resolver: yupResolver(schema),
defaultValues: {
sampleCount: 1000,
xyPointLength: 1000,
chartHeight: 150,
showTypes,
showControls,
logX,
expY,
showSummary,
showEditor,
leftSizePercent: 50,
showSettingsPage: false,
diagramStart: 0,
diagramStop: 10,
diagramCount: 20,
},
});
const vars = useWatch({
control,
});
useEffect(() => {
onSettingsChange?.(vars);
}, [vars, onSettingsChange]);
const chartSettings = {
start: Number(vars.diagramStart),
stop: Number(vars.diagramStop),
count: Number(vars.diagramCount),
};
const env: environment = {
sampleCount: Number(vars.sampleCount),
xyPointLength: Number(vars.xyPointLength),
};
const getChangeJson = (r: string) => {
setImportString(r);
try {
setImports(JSON.parse(r));
setImportsAreValid(true);
} catch (e) {
setImportsAreValid(false);
}
};
const code = controlledCode ?? uncontrolledCode;
const samplingSettings = (
}) => (
<div className="space-y-6 p-3 max-w-xl">
<div>
<InputItem
@ -296,15 +156,17 @@ export const SquigglePlayground: FC<PlaygroundProps> = ({
/>
<div className="mt-2">
<Text>
When distributions are converted into PointSet shapes, we need to
know how many coordinates to use.
When distributions are converted into PointSet shapes, we need to know
how many coordinates to use.
</Text>
</div>
</div>
</div>
);
const viewSettings = (
const ViewSettings: React.FC<{ register: UseFormRegister<FormFields> }> = ({
register,
}) => (
<div className="space-y-6 p-3 divide-y divide-gray-200 max-w-xl">
<HeadedSection title="General Display Settings">
<div className="space-y-4">
@ -358,10 +220,10 @@ export const SquigglePlayground: FC<PlaygroundProps> = ({
<HeadedSection title="Function Display Settings">
<div className="space-y-6">
<Text>
When displaying functions of single variables that return numbers
or distributions, we need to use defaults for the x-axis. We need
to select a minimum and maximum value of x to sample, and a number
n of the number of points to sample.
When displaying functions of single variables that return numbers or
distributions, we need to use defaults for the x-axis. We need to
select a minimum and maximum value of x to sample, and a number n of
the number of points to sample.
</Text>
<div className="space-y-4">
<InputItem
@ -389,7 +251,28 @@ export const SquigglePlayground: FC<PlaygroundProps> = ({
</div>
);
const inputVariableSettings = (
const InputVariablesSettings: React.FC<{
initialImports: any; // TODO - any json type
setImports: (imports: any) => void;
}> = ({ initialImports, setImports }) => {
const [importString, setImportString] = useState(() =>
JSON.stringify(initialImports)
);
const [importsAreValid, setImportsAreValid] = useState(true);
const onChange = (value: string) => {
setImportString(value);
let imports = {} as any;
try {
imports = JSON.parse(value);
setImportsAreValid(true);
} catch (e) {
setImportsAreValid(false);
}
setImports(imports);
};
return (
<div className="p-3 max-w-3xl">
<HeadedSection title="Import Variables from JSON">
<div className="space-y-6">
@ -401,7 +284,7 @@ export const SquigglePlayground: FC<PlaygroundProps> = ({
<div className="border border-slate-200 mt-6 mb-2">
<JsonEditor
value={importString}
onChange={getChangeJson}
onChange={onChange}
oneLine={false}
showGutter={true}
height={150}
@ -420,12 +303,146 @@ export const SquigglePlayground: FC<PlaygroundProps> = ({
</HeadedSection>
</div>
);
};
const RunControls: React.FC<{
autorunMode: boolean;
isRunning: boolean;
isStale: boolean;
onAutorunModeChange: (value: boolean) => void;
run: () => void;
}> = ({ autorunMode, isRunning, isStale, onAutorunModeChange, run }) => {
const CurrentPlayIcon = isRunning ? RefreshIcon : PlayIcon;
return (
<div className="flex space-x-1 items-center">
{autorunMode ? null : (
<button onClick={run}>
<CurrentPlayIcon
className={clsx(
"w-8 h-8",
isRunning && "animate-spin",
isStale ? "text-indigo-500" : "text-gray-400"
)}
/>
</button>
)}
<Toggle
texts={["Autorun", "Paused"]}
icons={[CheckCircleIcon, PauseIcon]}
status={autorunMode}
onChange={onAutorunModeChange}
/>
</div>
);
};
const useRunnerState = (code: string) => {
const [autorunMode, setAutorunMode] = useState(true);
const [renderedCode, setRenderedCode] = useState(code); // used in manual run mode only
const [isRunning, setIsRunning] = useState(false); // used in manual run mode only
// This part is tricky and fragile; we need to re-render first to make sure that the icon is spinning,
// and only then evaluate the squiggle code (which freezes the UI).
// Also note that `useEffect` execution order matters here.
// Hopefully it'll all go away after we make squiggle code evaluation async.
useEffect(() => {
if (renderedCode === code && isRunning) {
// It's not possible to put this after `setRenderedCode(code)` below because React would apply
// `setIsRunning` and `setRenderedCode` together and spinning icon will disappear immediately.
setIsRunning(false);
}
}, [renderedCode, code, isRunning]);
useEffect(() => {
if (!autorunMode && isRunning) {
setRenderedCode(code); // TODO - force run even if code hasn't changed
}
}, [autorunMode, code, isRunning]);
const run = () => {
// The rest will be handled by useEffects above, but we need to update the spinner first.
setIsRunning(true);
};
return {
run,
renderedCode: autorunMode ? code : renderedCode,
isRunning,
autorunMode,
setAutorunMode: (newValue: boolean) => {
if (!newValue) setRenderedCode(code);
setAutorunMode(newValue);
},
};
};
export const SquigglePlayground: FC<PlaygroundProps> = ({
defaultCode = "",
height = 500,
showTypes = false,
showControls = false,
showSummary = false,
logX = false,
expY = false,
code: controlledCode,
onCodeChange,
onSettingsChange,
showEditor = true,
}) => {
const [code, setCode] = useMaybeControlledValue({
value: controlledCode,
defaultValue: defaultCode,
onChange: onCodeChange,
});
const [imports, setImports] = useState({});
const { register, control } = useForm({
resolver: yupResolver(schema),
defaultValues: {
sampleCount: 1000,
xyPointLength: 1000,
chartHeight: 150,
showTypes,
showControls,
logX,
expY,
showSummary,
showEditor,
leftSizePercent: 50,
showSettingsPage: false,
diagramStart: 0,
diagramStop: 10,
diagramCount: 20,
},
});
const vars = useWatch({
control,
});
useEffect(() => {
onSettingsChange?.(vars);
}, [vars, onSettingsChange]);
const env: environment = useMemo(
() => ({
sampleCount: Number(vars.sampleCount),
xyPointLength: Number(vars.xyPointLength),
}),
[vars.sampleCount, vars.xyPointLength]
);
const { run, autorunMode, setAutorunMode, isRunning, renderedCode } =
useRunnerState(code);
const squiggleChart = (
<SquiggleChart
squiggleString={code}
code={renderedCode}
environment={env}
chartSettings={chartSettings}
diagramStart={Number(vars.diagramStart)}
diagramStop={Number(vars.diagramStop)}
diagramCount={Number(vars.diagramCount)}
height={vars.chartHeight}
showTypes={vars.showTypes}
showControls={vars.showControls}
@ -441,13 +458,8 @@ export const SquigglePlayground: FC<PlaygroundProps> = ({
<div className="border border-slate-200">
<CodeEditor
value={code}
onChange={(newCode) => {
if (controlledCode === undefined) {
// uncontrolled mode
setUncontrolledCode(newCode);
}
onCodeChange?.(newCode);
}}
onChange={setCode}
onSubmit={run}
oneLine={false}
showGutter={true}
height={height - 1}
@ -458,12 +470,21 @@ export const SquigglePlayground: FC<PlaygroundProps> = ({
);
const tabs = (
<Tab.Panels>
<Tab.Panel>{firstTab}</Tab.Panel>
<Tab.Panel>{samplingSettings}</Tab.Panel>
<Tab.Panel>{viewSettings}</Tab.Panel>
<Tab.Panel>{inputVariableSettings}</Tab.Panel>
</Tab.Panels>
<StyledTab.Panels>
<StyledTab.Panel>{firstTab}</StyledTab.Panel>
<StyledTab.Panel>
<SamplingSettings register={register} />
</StyledTab.Panel>
<StyledTab.Panel>
<ViewSettings register={register} />
</StyledTab.Panel>
<StyledTab.Panel>
<InputVariablesSettings
initialImports={imports}
setImports={setImports}
/>
</StyledTab.Panel>
</StyledTab.Panels>
);
const withEditor = (
@ -477,9 +498,10 @@ export const SquigglePlayground: FC<PlaygroundProps> = ({
return (
<SquiggleContainer>
<Tab.Group>
<StyledTab.Group>
<div className="pb-4">
<Tab.List className="flex w-fit p-0.5 mt-2 rounded-md bg-slate-100 hover:bg-slate-200">
<div className="flex justify-between items-center mt-2">
<StyledTab.List>
<StyledTab
name={vars.showEditor ? "Code" : "Display"}
icon={vars.showEditor ? CodeIcon : EyeIcon}
@ -487,16 +509,18 @@ export const SquigglePlayground: FC<PlaygroundProps> = ({
<StyledTab name="Sampling Settings" icon={CogIcon} />
<StyledTab name="View Settings" icon={ChartSquareBarIcon} />
<StyledTab name="Input Variables" icon={CurrencyDollarIcon} />
</Tab.List>
</StyledTab.List>
<RunControls
autorunMode={autorunMode}
isStale={renderedCode !== code}
run={run}
isRunning={isRunning}
onAutorunModeChange={setAutorunMode}
/>
</div>
{vars.showEditor ? withEditor : withoutEditor}
</div>
</Tab.Group>
</StyledTab.Group>
</SquiggleContainer>
);
};
export function renderSquigglePlaygroundToDom(props: PlaygroundProps) {
const parent = document.createElement("div");
ReactDOM.render(<SquigglePlayground {...props} />, parent);
return parent;
}

24
packages/components/src/components/ui/Checkbox.tsx Normal file
View File

@ -0,0 +1,24 @@
import React from "react";
import { Path, UseFormRegister } from "react-hook-form";
export function Checkbox<T>({
name,
label,
register,
}: {
name: Path<T>;
label: string;
register: UseFormRegister<T>;
}) {
return (
<label className="flex items-center">
<input
type="checkbox"
{...register(name)}
className="form-checkbox focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
/>
{/* Clicking on the div makes the checkbox lose focus while mouse button is pressed, leading to annoying blinking; I couldn't figure out how to fix this. */}
<div className="ml-3 text-sm font-medium text-gray-700">{label}</div>
</label>
);
}

60
packages/components/src/components/ui/StyledTab.tsx Normal file
View File

@ -0,0 +1,60 @@
import React, { Fragment } from "react";
import { Tab } from "@headlessui/react";
import clsx from "clsx";
type StyledTabProps = {
name: string;
icon: (props: React.ComponentProps<"svg">) => JSX.Element;
};
type StyledTabType = React.FC<StyledTabProps> & {
List: React.FC<{ children: React.ReactNode }>;
Group: typeof Tab.Group;
Panels: typeof Tab.Panels;
Panel: typeof Tab.Panel;
};
export const StyledTab: StyledTabType = ({ name, icon: Icon }) => {
return (
<Tab as={Fragment}>
{({ selected }) => (
<button className="group flex rounded-md focus:outline-none focus-visible:ring-offset-gray-100">
<span
className={clsx(
"p-1 pl-2.5 pr-3.5 rounded-md flex items-center text-sm font-medium",
selected && "bg-white shadow-sm ring-1 ring-black ring-opacity-5"
)}
>
<Icon
className={clsx(
"-ml-0.5 mr-2 h-4 w-4",
selected
? "text-slate-500"
: "text-gray-400 group-hover:text-gray-900"
)}
/>
<span
className={clsx(
selected
? "text-gray-900"
: "text-gray-600 group-hover:text-gray-900"
)}
>
{name}
</span>
</span>
</button>
)}
</Tab>
);
};
StyledTab.List = ({ children }) => (
<Tab.List className="flex w-fit p-0.5 rounded-md bg-slate-100 hover:bg-slate-200">
{children}
</Tab.List>
);
StyledTab.Group = Tab.Group;
StyledTab.Panels = Tab.Panels;
StyledTab.Panel = Tab.Panel;

41
packages/components/src/components/ui/Toggle.tsx Normal file
View File

@ -0,0 +1,41 @@
import clsx from "clsx";
import { motion } from "framer-motion";
import React from "react";
type IconType = (props: React.ComponentProps<"svg">) => JSX.Element;
type Props = {
status: boolean;
onChange: (status: boolean) => void;
texts: [string, string];
icons: [IconType, IconType];
};
export const Toggle: React.FC<Props> = ({
texts: [onText, offText],
icons: [OnIcon, OffIcon],
status,
onChange,
}) => {
const CurrentIcon = status ? OnIcon : OffIcon;
return (
<motion.button
layout
transition={{ duration: 0.2 }}
className={clsx(
"rounded-full py-1 bg-indigo-500 text-white text-xs font-semibold flex items-center space-x-1",
status ? "bg-indigo-500" : "bg-gray-400",
status ? "pl-1 pr-3" : "pl-3 pr-1",
!status && "flex-row-reverse space-x-reverse"
)}
onClick={() => onChange(!status)}
>
<motion.div layout transition={{ duration: 0.2 }}>
<CurrentIcon className="w-6 h-6" />
</motion.div>
<motion.span layout transition={{ duration: 0.2 }}>
{status ? onText : offText}
</motion.span>
</motion.button>
);
};

12
packages/components/src/index.ts
View File

@ -1,14 +1,6 @@
export { SquiggleChart } from "./components/SquiggleChart";
export {
SquiggleEditor,
SquigglePartial,
renderSquiggleEditorToDom,
renderSquigglePartialToDom,
} from "./components/SquiggleEditor";
export {
SquigglePlayground,
renderSquigglePlaygroundToDom,
} from "./components/SquigglePlayground";
export { SquiggleEditor, SquigglePartial } from "./components/SquiggleEditor";
export { SquigglePlayground } from "./components/SquigglePlayground";
export { SquiggleContainer } from "./components/SquiggleContainer";
export { mergeBindings } from "@quri/squiggle-lang";

43
packages/components/src/lib/hooks.ts
View File

@ -5,7 +5,7 @@ import {
run,
runPartial,
} from "@quri/squiggle-lang";
import { useEffect, useMemo, useRef } from "react";
import { useEffect, useMemo, useState } from "react";
type SquiggleArgs<T extends ReturnType<typeof run | typeof runPartial>> = {
code: string;
@ -19,37 +19,18 @@ const useSquiggleAny = <T extends ReturnType<typeof run | typeof runPartial>>(
args: SquiggleArgs<T>,
f: (...args: Parameters<typeof run>) => T
) => {
// We're using observable, where div elements can have a `value` property:
// https://observablehq.com/@observablehq/introduction-to-views
//
// This is here to get the 'viewof' part of:
// viewof env = cell('normal(0,1)')
// to work
const ref = useRef<
HTMLDivElement & { value?: Extract<T, { tag: "Ok" }>["value"] }
>(null);
const result: T = useMemo<T>(
() => f(args.code, args.bindings, args.environment, args.jsImports),
[f, args.code, args.bindings, args.environment, args.jsImports]
);
useEffect(() => {
if (!ref.current) return;
ref.current.value = result.tag === "Ok" ? result.value : undefined;
ref.current.dispatchEvent(new CustomEvent("input"));
}, [result]);
const { onChange } = args;
useEffect(() => {
onChange?.(result.tag === "Ok" ? result.value : undefined);
}, [result, onChange]);
return {
result, // squiggleExpression or externalBindings
observableRef: ref, // can be passed to outermost <div> if you want to use your component as an observablehq's view
};
return result;
};
export const useSquigglePartial = (
@ -61,3 +42,23 @@ export const useSquigglePartial = (
export const useSquiggle = (args: SquiggleArgs<ReturnType<typeof run>>) => {
return useSquiggleAny(args, run);
};
type ControlledValueArgs<T> = {
value?: T;
defaultValue: T;
onChange?: (x: T) => void;
};
export function useMaybeControlledValue<T>(
args: ControlledValueArgs<T>
): [T, (x: T) => void] {
let [uncontrolledValue, setUncontrolledValue] = useState(args.defaultValue);
let value = args.value ?? uncontrolledValue;
let onChange = (newValue: T) => {
if (args.value === undefined) {
// uncontrolled mode
setUncontrolledValue(newValue);
}
args.onChange?.(newValue);
};
return [value, onChange];
}

27
packages/components/src/stories/SquiggleChart.stories.mdx
View File

@ -29,7 +29,7 @@ could be continuous, discrete or mixed.
<Story
name="Continuous Symbolic"
args={{
squiggleString: "normal(5,2)",
code: "normal(5,2)",
width,
}}
>
@ -43,7 +43,7 @@ could be continuous, discrete or mixed.
<Story
name="Continuous Pointset"
args={{
squiggleString: "toPointSet(normal(5,2))",
code: "toPointSet(normal(5,2))",
width,
}}
>
@ -57,7 +57,7 @@ could be continuous, discrete or mixed.
<Story
name="Continuous SampleSet"
args={{
squiggleString: "toSampleSet(normal(5,2), 1000)",
code: "toSampleSet(normal(5,2), 1000)",
width,
}}
>
@ -71,7 +71,7 @@ could be continuous, discrete or mixed.
<Story
name="Discrete"
args={{
squiggleString: "mx(0, 1, 3, 5, 8, 10, [0.1, 0.8, 0.5, 0.3, 0.2, 0.1])",
code: "mx(0, 1, 3, 5, 8, 10, [0.1, 0.8, 0.5, 0.3, 0.2, 0.1])",
width,
}}
>
@ -85,8 +85,7 @@ could be continuous, discrete or mixed.
<Story
name="Mixed"
args={{
squiggleString:
"mx(0, 1, 3, 5, 8, normal(8, 1), [0.1, 0.3, 0.4, 0.35, 0.2, 0.8])",
code: "mx(0, 1, 3, 5, 8, normal(8, 1), [0.1, 0.3, 0.4, 0.35, 0.2, 0.8])",
width,
}}
>
@ -103,7 +102,7 @@ to allow large and small numbers being printed cleanly.
<Story
name="Constant"
args={{
squiggleString: "500000000",
code: "500000000",
width,
}}
>
@ -117,7 +116,7 @@ to allow large and small numbers being printed cleanly.
<Story
name="Array"
args={{
squiggleString: "[normal(5,2), normal(10,1), normal(40,2), 400000]",
code: "[normal(5,2), normal(10,1), normal(40,2), 400000]",
width,
}}
>
@ -131,7 +130,7 @@ to allow large and small numbers being printed cleanly.
<Story
name="Error"
args={{
squiggleString: "f(x) = normal(",
code: "f(x) = normal(",
width,
}}
>
@ -145,7 +144,7 @@ to allow large and small numbers being printed cleanly.
<Story
name="Boolean"
args={{
squiggleString: "3 == 3",
code: "3 == 3",
width,
}}
>
@ -159,7 +158,7 @@ to allow large and small numbers being printed cleanly.
<Story
name="Function to Distribution"
args={{
squiggleString: "foo(t) = normal(t,2)*normal(5,3); foo",
code: "foo(t) = normal(t,2)*normal(5,3); foo",
width,
}}
>
@ -173,7 +172,7 @@ to allow large and small numbers being printed cleanly.
<Story
name="Function to Number"
args={{
squiggleString: "foo(t) = t^2; foo",
code: "foo(t) = t^2; foo",
width,
}}
>
@ -187,7 +186,7 @@ to allow large and small numbers being printed cleanly.
<Story
name="Record"
args={{
squiggleString: "{foo: 35 to 50, bar: [1,2,3]}",
code: "{foo: 35 to 50, bar: [1,2,3]}",
width,
}}
>
@ -201,7 +200,7 @@ to allow large and small numbers being printed cleanly.
<Story
name="String"
args={{
squiggleString: '"Lucky day!"',
code: '"Lucky day!"',
width,
}}
>

17
packages/components/src/stories/SquiggleEditor.stories.mdx
View File

@ -14,7 +14,20 @@ the distribution.
<Story
name="Normal"
args={{
initialSquiggleString: "normal(5,2)",
defaultCode: "normal(5,2)",
}}
>
{Template.bind({})}
</Story>
</Canvas>
It's also possible to create a controlled version of the same component
<Canvas>
<Story
name="Controlled"
args={{
code: "normal(5,2)",
}}
>
{Template.bind({})}
@ -27,7 +40,7 @@ You can also name variables like so:
<Story
name="Variables"
args={{
initialSquiggleString: "x = 2\nnormal(x,2)",
defaultCode: "x = 2\nnormal(x,2)",
}}
>
{Template.bind({})}

6
packages/components/src/stories/SquigglePartial.stories.mdx
View File

@ -15,7 +15,7 @@ instead returns bindings that can be used by further Squiggle Editors.
<Story
name="Standalone"
args={{
initialSquiggleString: "x = normal(5,2)",
defaultCode: "x = normal(5,2)",
}}
>
{Template.bind({})}
@ -36,12 +36,12 @@ instead returns bindings that can be used by further Squiggle Editors.
<>
<SquigglePartial
{...props}
initialSquiggleString={props.initialPartialString}
defaultCode={props.initialPartialString}
onChange={setBindings}
/>
<SquiggleEditor
{...props}
initialSquiggleString={props.initialEditorString}
defaultCode={props.initialEditorString}
bindings={bindings}
/>
</>

2
packages/components/src/stories/SquigglePlayground.stories.mdx
View File

@ -14,7 +14,7 @@ including sampling settings, in squiggle.
<Story
name="Normal"
args={{
initialSquiggleString: "normal(5,2)",
defaultCode: "normal(5,2)",
height: 800,
}}
>

17
packages/squiggle-lang/__tests__/Distributions/Symbolic_test.res
View File

@ -77,6 +77,23 @@ describe("(Symbolic) mean", () => {
meanValue->unpackFloat->expect->ExpectJs.toBeFalsy
})
testAll(
"of beta distributions from mean and standard dev",
list{(0.39, 0.1), (0.08, 0.1), (0.8, 0.3)},
tup => {
let (mean, stdev) = tup
let betaDistribution = SymbolicDist.Beta.fromMeanAndStdev(mean, stdev)
let meanValue =
betaDistribution->E.R2.fmap(d =>
run(FromDist(ToFloat(#Mean), d->DistributionTypes.Symbolic))
)
switch meanValue {
| Ok(value) => value->unpackFloat->expect->toBeCloseTo(mean)
| Error(err) => err->expect->toBe("shouldn't happen")
}
},
)
testAll(
"of lognormal distributions",
list{(2.0, 4.0), (1e-7, 1e-2), (-1e6, 10.0), (1e3, -1e2), (-1e8, -1e4), (1e2, 1e-5)},

20
packages/squiggle-lang/src/rescript/Distributions/SymbolicDist/SymbolicDist.res
View File

@ -124,6 +124,26 @@ module Beta = {
let sample = (t: t) => Jstat.Beta.sample(t.alpha, t.beta)
let mean = (t: t) => Ok(Jstat.Beta.mean(t.alpha, t.beta))
let toString = ({alpha, beta}: t) => j`Beta($alpha,$beta)`
let fromMeanAndSampleSize = (mean, sampleSize) => {
// https://en.wikipedia.org/wiki/Beta_distribution#Mean_and_sample_size
let alpha = mean *. sampleSize
let beta = (1.0 -. mean) *. sampleSize
make(alpha, beta)
}
let fromMeanAndStdev = (mean, stdev) => {
// https://en.wikipedia.org/wiki/Beta_distribution#Mean_and_variance
if !(0.0 < stdev && stdev <= 0.5) {
Error("Stdev must be in in between 0 and 0.5.")
} else if !(0.0 <= mean && mean <= 1.0) {
Error("Mean must be in between 0 and 1.0.")
} else {
let var = stdev *. stdev
let sampleSize = mean *. (1.0 -. mean) /. var -. 1.0
fromMeanAndSampleSize(mean, sampleSize)
}
}
}
module Lognormal = {

8
packages/squiggle-lang/src/rescript/FunctionRegistry/FunctionRegistry_Library.res
View File

@ -117,8 +117,12 @@ lognormal({mean: 5, stdev: 2})`,
),
Function.make(
~name="Beta",
~examples=`beta(20, 25)`,
~definitions=[TwoArgDist.make("beta", twoArgs(SymbolicDist.Beta.make))],
~examples=`beta(20, 25)
beta({mean: 0.39, stdev: 0.1})`,
~definitions=[
TwoArgDist.make("beta", twoArgs(SymbolicDist.Beta.make)),
TwoArgDist.makeRecordMeanStdev("beta", twoArgs(SymbolicDist.Beta.fromMeanAndStdev)),
],
(),
),
Function.make(

2
packages/vscode-ext/package.json
View File

@ -149,7 +149,7 @@
},
"dependencies": {
"vscode-languageclient": "^8.0.1",
"vscode-languageserver": "^7.0.0",
"vscode-languageserver": "^8.0.1",
"vscode-languageserver-textdocument": "^1.0.5",
"@quri/squiggle-lang": "^0.2.11"
}

2
packages/website/docs/Api/DistGeneric.mdx
View File

@ -70,12 +70,14 @@ uniform(10, 12);
```
beta: (distribution|number, distribution|number) => distribution
beta: (dict<{mean: distribution|number, stdev: distribution|number}>) => distribution
```
**Examples**
```javascript
beta(20, 25);
beta({ mean: 0.39, stdev: 0.1 });
```
### cauchy

4
packages/website/docs/Discussions/Bugs.mdx
View File

@ -16,7 +16,7 @@ If you take the pointwise mixture of two distributions with very different means
In the following case, the mean of the mixture should be equal to the sum of the means of the parts. These are shown as the first two displayed variables. These variables diverge as the underlying distributions change.
<SquiggleEditor
initialSquiggleString={`dist1 = {value: normal(1,1), weight: 1}
defaultCode={`dist1 = {value: normal(1,1), weight: 1}
dist2 = {value: normal(100000000000,1), weight: 1}
totalWeight = dist1.weight + dist2.weight
distMixture = mixture(dist1.value, dist2.value, [dist1.weight, dist2.weight])
@ -30,7 +30,7 @@ separateMeansCombined = (mean(dist1.value) * (dist1.weight) + mean(dist2.value)
The means of sample set distributions can vary dramatically, especially as the numbers get high.
<SquiggleEditor
initialSquiggleString={`symbolicDist = 5 to 50333333
defaultCode={`symbolicDist = 5 to 50333333
sampleSetDist = toSampleSet(symbolicDist)
[mean(symbolicDist), mean(sampleSetDist), symbolicDist, sampleSetDist]`}
/>

71
packages/website/docs/Guides/DistributionCreation.mdx
View File

@ -22,22 +22,22 @@ If both values are above zero, a `lognormal` distribution is used. If not, a `no
When <code>5 to 10</code> is entered, both numbers are positive, so it
generates a lognormal distribution with 5th and 95th percentiles at 5 and
10.
<SquiggleEditor initialSquiggleString="5 to 10" />
<SquiggleEditor defaultCode="5 to 10" />
</TabItem>
<TabItem value="ex3" label="to(5,10)">
<code>5 to 10</code> does the same thing as <code>to(5,10)</code>.
<SquiggleEditor initialSquiggleString="to(5,10)" />
<SquiggleEditor defaultCode="to(5,10)" />
</TabItem>
<TabItem value="ex2" label="-5 to 5">
When <code>-5 to 5</code> is entered, there's negative values, so it
generates a normal distribution. This has 5th and 95th percentiles at 5 and
10.
<SquiggleEditor initialSquiggleString="-5 to -3" />
<SquiggleEditor defaultCode="-5 to -3" />
</TabItem>
<TabItem value="ex4" label="1 to 10000">
It's very easy to generate distributions with very long tails. If this
happens, you can click the "log x scale" box to view this using a log scale.
<SquiggleEditor initialSquiggleString="1 to 10000" />
<SquiggleEditor defaultCode="1 to 10000" />
</TabItem>
</Tabs>
@ -76,16 +76,16 @@ The `mixture` mixes combines multiple distributions to create a mixture. You can
<Tabs>
<TabItem value="ex1" label="Simple" default>
<SquiggleEditor initialSquiggleString="mixture(1 to 2, 5 to 8, 9 to 10)" />
<SquiggleEditor defaultCode="mixture(1 to 2, 5 to 8, 9 to 10)" />
</TabItem>
<TabItem value="ex2" label="With Weights">
<SquiggleEditor initialSquiggleString="mixture(1 to 2, 5 to 8, 9 to 10, [0.1, 0.1, 0.8])" />
<SquiggleEditor defaultCode="mixture(1 to 2, 5 to 8, 9 to 10, [0.1, 0.1, 0.8])" />
</TabItem>
<TabItem value="ex3" label="With Continuous and Discrete Inputs">
<SquiggleEditor initialSquiggleString="mixture(1 to 5, 8 to 10, 1, 3, 20)" />
<SquiggleEditor defaultCode="mixture(1 to 5, 8 to 10, 1, 3, 20)" />
</TabItem>
<TabItem value="ex4" label="Array of Distributions Input">
<SquiggleEditor initialSquiggleString="mx([1 to 2, exponential(1)], [1,1])" />
<SquiggleEditor defaultCode="mx([1 to 2, exponential(1)], [1,1])" />
</TabItem>
</Tabs>
@ -111,7 +111,7 @@ The `mixture` mixes combines multiple distributions to create a mixture. You can
In this case, I have a 20% chance of spending 0 time with it. I might estimate my hours with,
</p>
<SquiggleEditor
initialSquiggleString={`hours_the_project_will_take = 5 to 20
defaultCode={`hours_the_project_will_take = 5 to 20
chance_of_doing_anything = 0.8
mx(hours_the_project_will_take, 0, [chance_of_doing_anything, 1 - chance_of_doing_anything])`}
/>
@ -125,7 +125,7 @@ mx(hours_the_project_will_take, 0, [chance_of_doing_anything, 1 - chance_of_doin
very wide, just in case they were dramatically off for some weird reason.
</p>
<SquiggleEditor
initialSquiggleString={`forecast = 3 to 30
defaultCode={`forecast = 3 to 30
chance_completely_wrong = 0.05
forecast_if_completely_wrong = -100 to 200
mx(forecast, forecast_if_completely_wrong, [1-chance_completely_wrong, chance_completely_wrong])`}
@ -141,10 +141,10 @@ Creates a [normal distribution](https://en.wikipedia.org/wiki/Normal_distributio
<Tabs>
<TabItem value="ex1" label="normal(5,1)" default>
<SquiggleEditor initialSquiggleString="normal(5, 1)" />
<SquiggleEditor defaultCode="normal(5, 1)" />
</TabItem>
<TabItem value="ex2" label="normal(100000000000, 100000000000)">
<SquiggleEditor initialSquiggleString="normal(100000000000, 100000000000)" />
<SquiggleEditor defaultCode="normal(100000000000, 100000000000)" />
</TabItem>
</Tabs>
@ -165,7 +165,7 @@ Creates a [log-normal distribution](https://en.wikipedia.org/wiki/Log-normal_dis
you take the log of our lognormal distribution. They can be difficult to directly reason about.
Because of this complexity, we recommend typically using the <a href="#to">to</a> syntax instead of estimating `mu` and `sigma` directly.
<SquiggleEditor initialSquiggleString="lognormal(0, 0.7)" />
<SquiggleEditor defaultCode="lognormal(0, 0.7)" />
### Arguments
@ -185,7 +185,7 @@ Because of this complexity, we recommend typically using the <a href="#to">to</a
are identical:
</p>
<SquiggleEditor
initialSquiggleString={`normalMean = 10
defaultCode={`normalMean = 10
normalStdDev = 2
logOfLognormal = log(lognormal(normalMean, normalStdDev))
[logOfLognormal, normal(normalMean, normalStdDev)]`}
@ -198,7 +198,7 @@ logOfLognormal = log(lognormal(normalMean, normalStdDev))
Creates a [uniform distribution](<https://en.wikipedia.org/wiki/Uniform_distribution_(continuous)>) with the given low and high values.
<SquiggleEditor initialSquiggleString="uniform(3,7)" />
<SquiggleEditor defaultCode="uniform(3,7)" />
### Arguments
@ -236,19 +236,19 @@ with values at 1 and 2. Therefore, this is the same as `mixture(pointMass(1),poi
<Tabs>
<TabItem value="ex1" label="pointMass(3)" default>
<SquiggleEditor initialSquiggleString="pointMass(3)" />
<SquiggleEditor defaultCode="pointMass(3)" />
</TabItem>
<TabItem value="ex3" label="mixture(1,3,5)">
<SquiggleEditor initialSquiggleString="mixture(1,3,5)" />
<SquiggleEditor defaultCode="mixture(1,3,5)" />
</TabItem>
<TabItem value="ex2" label="normal(5,2) * 6">
<SquiggleEditor initialSquiggleString="normal(5,2) * 6" />
<SquiggleEditor defaultCode="normal(5,2) * 6" />
</TabItem>
<TabItem value="ex4" label="dotAdd(normal(5,2), 6)">
<SquiggleEditor initialSquiggleString="dotAdd(normal(5,2), 6)" />
<SquiggleEditor defaultCode="dotAdd(normal(5,2), 6)" />
</TabItem>
<TabItem value="ex5" label="dotMultiply(normal(5,2), 6)">
<SquiggleEditor initialSquiggleString="dotMultiply(normal(5,2), 6)" />
<SquiggleEditor defaultCode="dotMultiply(normal(5,2), 6)" />
</TabItem>
</Tabs>
@ -259,24 +259,31 @@ with values at 1 and 2. Therefore, this is the same as `mixture(pointMass(1),poi
## Beta
`beta(alpha:number, beta:number)`
`beta({mean: number, stdev: number})`
Creates a [beta distribution](https://en.wikipedia.org/wiki/Beta_distribution) with the given `alpha` and `beta` values. For a good summary of the beta distribution, see [this explanation](https://stats.stackexchange.com/a/47782) on Stack Overflow.
<Tabs>
<TabItem value="ex1" label="beta(10, 20)" default>
<SquiggleEditor initialSquiggleString="beta(10,20)" />
<SquiggleEditor defaultCode="beta(10,20)" />
</TabItem>
<TabItem value="ex2" label="beta(1000, 1000)">
<SquiggleEditor initialSquiggleString="beta(1000, 2000)" />
<SquiggleEditor defaultCode="beta(1000, 2000)" />
</TabItem>
<TabItem value="ex3" label="beta(1, 10)">
<SquiggleEditor initialSquiggleString="beta(1, 10)" />
<SquiggleEditor defaultCode="beta(1, 10)" />
</TabItem>
<TabItem value="ex4" label="beta(10, 1)">
<SquiggleEditor initialSquiggleString="beta(10, 1)" />
<SquiggleEditor defaultCode="beta(10, 1)" />
</TabItem>
<TabItem value="ex5" label="beta(0.8, 0.8)">
<SquiggleEditor initialSquiggleString="beta(0.8, 0.8)" />
<SquiggleEditor defaultCode="beta(0.8, 0.8)" />
</TabItem>
<TabItem
value="from mean and standard deviation"
label="beta({mean: 0.39, stdev: 0.1})"
>
<SquiggleEditor initialSquiggleString="beta({mean: 0.39, stdev: 0.1})" />
</TabItem>
</Tabs>
@ -295,16 +302,16 @@ Creates a [beta distribution](https://en.wikipedia.org/wiki/Beta_distribution) w
<summary>Examples</summary>
<Tabs>
<TabItem value="ex1" label="beta(0.3, 0.3)" default>
<SquiggleEditor initialSquiggleString="beta(0.3, 0.3)" />
<SquiggleEditor defaultCode="beta(0.3, 0.3)" />
</TabItem>
<TabItem value="ex2" label="beta(0.5, 0.5)">
<SquiggleEditor initialSquiggleString="beta(0.5, 0.5)" />
<SquiggleEditor defaultCode="beta(0.5, 0.5)" />
</TabItem>
<TabItem value="ex3" label="beta(0.8, 0.8)">
<SquiggleEditor initialSquiggleString="beta(.8,.8)" />
<SquiggleEditor defaultCode="beta(.8,.8)" />
</TabItem>
<TabItem value="ex4" label="beta(0.9, 0.9)">
<SquiggleEditor initialSquiggleString="beta(.9,.9)" />
<SquiggleEditor defaultCode="beta(.9,.9)" />
</TabItem>
</Tabs>
</details>
@ -316,7 +323,7 @@ Creates a [beta distribution](https://en.wikipedia.org/wiki/Beta_distribution) w
Creates an [exponential distribution](https://en.wikipedia.org/wiki/Exponential_distribution) with the given rate.
<SquiggleEditor initialSquiggleString="exponential(4)" />
<SquiggleEditor defaultCode="exponential(4)" />
### Arguments
@ -334,7 +341,7 @@ Creates a [triangular distribution](https://en.wikipedia.org/wiki/Triangular_dis
- `mode`: Number greater than `low`
- `high`: Number greater than `mode`
<SquiggleEditor initialSquiggleString="triangular(1, 2, 4)" />
<SquiggleEditor defaultCode="triangular(1, 2, 4)" />
## FromSamples
@ -342,7 +349,7 @@ Creates a [triangular distribution](https://en.wikipedia.org/wiki/Triangular_dis
Creates a sample set distribution using an array of samples.
<SquiggleEditor initialSquiggleString="fromSamples([1,2,3,4,6,5,5,5])" />
<SquiggleEditor defaultCode="fromSamples([1,2,3,4,6,5,5,5])" />
### Arguments

58
packages/website/docs/Guides/Functions.mdx
View File

@ -16,7 +16,7 @@ the value of one random sample chosen from the first distribution and the value
chosen from the second distribution.
<SquiggleEditor
initialSquiggleString={`dist1 = 1 to 10
defaultCode={`dist1 = 1 to 10
dist2 = triangular(1,2,3)
dist1 + dist2`}
/>
@ -28,7 +28,7 @@ the distribution of the value of one random sample chosen from the first distrib
the value of one random sample chosen from the second distribution.
<SquiggleEditor
initialSquiggleString={`dist1 = 1 to 10
defaultCode={`dist1 = 1 to 10
dist2 = triangular(1,2,3)
dist1 - dist2`}
/>
@ -40,14 +40,14 @@ the value of one random sample chosen from the first distribution times the valu
chosen from the second distribution.
<SquiggleEditor
initialSquiggleString={`dist1 = 1 to 10
defaultCode={`dist1 = 1 to 10
dist2 = triangular(1,2,3)
dist1 * dist2`}
/>
We also provide concatenation of two distributions as a syntax sugar for `*`
<SquiggleEditor initialSquiggleString="(0.1 to 1) triangular(1,2,3)" />
<SquiggleEditor defaultCode="(0.1 to 1) triangular(1,2,3)" />
### Division
@ -58,7 +58,7 @@ chosen from the second distribution. If the second distribution has some values
tends to be particularly unstable.
<SquiggleEditor
initialSquiggleString={`dist1 = 1 to 10
defaultCode={`dist1 = 1 to 10
dist2 = triangular(1,2,3)
dist1 / dist2`}
/>
@ -69,12 +69,12 @@ A projection over a contracted x-axis. The exponentiation operation represents t
the exponentiation of the value of one random sample chosen from the first distribution to the power of
the value one random sample chosen from the second distribution.
<SquiggleEditor initialSquiggleString={`(0.1 to 1) ^ beta(2, 3)`} />
<SquiggleEditor defaultCode={`(0.1 to 1) ^ beta(2, 3)`} />
### Taking the base `e` exponential
<SquiggleEditor
initialSquiggleString={`dist = triangular(1,2,3)
defaultCode={`dist = triangular(1,2,3)
exp(dist)`}
/>
@ -83,19 +83,19 @@ exp(dist)`}
A projection over a stretched x-axis.
<SquiggleEditor
initialSquiggleString={`dist = triangular(1,2,3)
defaultCode={`dist = triangular(1,2,3)
log(dist)`}
/>
<SquiggleEditor
initialSquiggleString={`dist = beta(1,2)
defaultCode={`dist = beta(1,2)
log10(dist)`}
/>
Base `x`
<SquiggleEditor
initialSquiggleString={`x = 2
defaultCode={`x = 2
dist = beta(2,3)
log(dist, x)`}
/>
@ -114,7 +114,7 @@ For every point on the x-axis, operate the corresponding points in the y axis of
TODO: this isn't in the new interpreter/parser yet.
<SquiggleEditor
initialSquiggleString={`dist1 = 1 to 10
defaultCode={`dist1 = 1 to 10
dist2 = triangular(1,2,3)
dist1 .+ dist2`}
/>
@ -124,7 +124,7 @@ dist1 .+ dist2`}
TODO: this isn't in the new interpreter/parser yet.
<SquiggleEditor
initialSquiggleString={`dist1 = 1 to 10
defaultCode={`dist1 = 1 to 10
dist2 = triangular(1,2,3)
dist1 .- dist2`}
/>
@ -132,7 +132,7 @@ dist1 .- dist2`}
### Pointwise multiplication
<SquiggleEditor
initialSquiggleString={`dist1 = 1 to 10
defaultCode={`dist1 = 1 to 10
dist2 = triangular(1,2,3)
dist1 .* dist2`}
/>
@ -140,7 +140,7 @@ dist1 .* dist2`}
### Pointwise division
<SquiggleEditor
initialSquiggleString={`dist1 = uniform(0,20)
defaultCode={`dist1 = uniform(0,20)
dist2 = normal(10,8)
dist1 ./ dist2`}
/>
@ -148,7 +148,7 @@ dist1 ./ dist2`}
### Pointwise exponentiation
<SquiggleEditor
initialSquiggleString={`dist1 = 1 to 10
defaultCode={`dist1 = 1 to 10
dist2 = triangular(1,2,3)
dist1 .^ dist2`}
/>
@ -160,7 +160,7 @@ dist1 .^ dist2`}
The `pdf(dist, x)` function returns the density of a distribution at the
given point x.
<SquiggleEditor initialSquiggleString="pdf(normal(0,1),0)" />
<SquiggleEditor defaultCode="pdf(normal(0,1),0)" />
#### Validity
@ -172,7 +172,7 @@ given point x.
The `cdf(dist, x)` gives the cumulative probability of the distribution
or all values lower than x. It is the inverse of `quantile`.
<SquiggleEditor initialSquiggleString="cdf(normal(0,1),0)" />
<SquiggleEditor defaultCode="cdf(normal(0,1),0)" />
#### Validity
@ -185,7 +185,7 @@ The `quantile(dist, prob)` gives the value x or which the probability for all va
lower than x is equal to prob. It is the inverse of `cdf`. In the literature, it
is also known as the quantiles function.
<SquiggleEditor initialSquiggleString="quantile(normal(0,1),0.5)" />
<SquiggleEditor defaultCode="quantile(normal(0,1),0.5)" />
#### Validity
@ -196,29 +196,29 @@ is also known as the quantiles function.
The `mean(distribution)` function gives the mean (expected value) of a distribution.
<SquiggleEditor initialSquiggleString="mean(normal(5, 10))" />
<SquiggleEditor defaultCode="mean(normal(5, 10))" />
### Sampling a distribution
The `sample(distribution)` samples a given distribution.
<SquiggleEditor initialSquiggleString="sample(normal(0, 10))" />
<SquiggleEditor defaultCode="sample(normal(0, 10))" />
## Converting between distribution formats
Recall the [three formats of distributions](https://develop--squiggle-documentation.netlify.app/docs/Discussions/Three-Types-Of-Distributions). We can force any distribution into `SampleSet` format
<SquiggleEditor initialSquiggleString="toSampleSet(normal(5, 10))" />
<SquiggleEditor defaultCode="toSampleSet(normal(5, 10))" />
Or `PointSet` format
<SquiggleEditor initialSquiggleString="toPointSet(normal(5, 10))" />
<SquiggleEditor defaultCode="toPointSet(normal(5, 10))" />
### `toSampleSet` has two signatures
Above, we saw the unary `toSampleSet`, which uses an internal hardcoded number of samples. If you'd like to provide the number of samples, it has a binary signature as well (floored)
<SquiggleEditor initialSquiggleString="[toSampleSet(0.1 to 1, 100.1), toSampleSet(0.1 to 1, 5000), toSampleSet(0.1 to 1, 20000)]" />
<SquiggleEditor defaultCode="[toSampleSet(0.1 to 1, 100.1), toSampleSet(0.1 to 1, 5000), toSampleSet(0.1 to 1, 20000)]" />
#### Validity
@ -230,13 +230,13 @@ Some distribution operations (like horizontal shift) return an unnormalized dist
We provide a `normalize` function
<SquiggleEditor initialSquiggleString="normalize((0.1 to 1) + triangular(0.1, 1, 10))" />
<SquiggleEditor defaultCode="normalize((0.1 to 1) + triangular(0.1, 1, 10))" />
#### Validity - Input to `normalize` must be a dist
We provide a predicate `isNormalized`, for when we have simple control flow
<SquiggleEditor initialSquiggleString="isNormalized((0.1 to 1) * triangular(0.1, 1, 10))" />
<SquiggleEditor defaultCode="isNormalized((0.1 to 1) * triangular(0.1, 1, 10))" />
#### Validity
@ -246,7 +246,7 @@ We provide a predicate `isNormalized`, for when we have simple control flow
You may like to debug by right clicking your browser and using the _inspect_ functionality on the webpage, and viewing the _console_ tab. Then, wrap your squiggle output with `inspect` to log an internal representation.
<SquiggleEditor initialSquiggleString="inspect(toSampleSet(0.1 to 1, 100))" />
<SquiggleEditor defaultCode="inspect(toSampleSet(0.1 to 1, 100))" />
Save for a logging side effect, `inspect` does nothing to input and returns it.
@ -254,12 +254,12 @@ Save for a logging side effect, `inspect` does nothing to input and returns it.
You can cut off from the left
<SquiggleEditor initialSquiggleString="truncateLeft(0.1 to 1, 0.5)" />
<SquiggleEditor defaultCode="truncateLeft(0.1 to 1, 0.5)" />
You can cut off from the right
<SquiggleEditor initialSquiggleString="truncateRight(0.1 to 1, 0.5)" />
<SquiggleEditor defaultCode="truncateRight(0.1 to 1, 0.5)" />
You can cut off from both sides
<SquiggleEditor initialSquiggleString="truncate(0.1 to 1, 0.5, 1.5)" />
<SquiggleEditor defaultCode="truncate(0.1 to 1, 0.5, 1.5)" />

12
packages/website/docs/Guides/Language.mdx
View File

@ -9,22 +9,22 @@ import { SquiggleEditor } from "../../src/components/SquiggleEditor";
### Distributions
<SquiggleEditor initialSquiggleString={`mixture(1 to 2, 3, [0.3, 0.7])`} />
<SquiggleEditor defaultCode={`mixture(1 to 2, 3, [0.3, 0.7])`} />
### Numbers
<SquiggleEditor initialSquiggleString="4.32" />
<SquiggleEditor defaultCode="4.32" />
### Arrays
<SquiggleEditor
initialSquiggleString={`[beta(1,10), 4, isNormalized(toSampleSet(1 to 2))]`}
defaultCode={`[beta(1,10), 4, isNormalized(toSampleSet(1 to 2))]`}
/>
### Records
<SquiggleEditor
initialSquiggleString={`d = {dist: triangular(0, 1, 2), weight: 0.25}
defaultCode={`d = {dist: triangular(0, 1, 2), weight: 0.25}
d.dist`}
/>
@ -33,7 +33,7 @@ d.dist`}
A statement assigns expressions to names. It looks like `<symbol> = <expression>`
<SquiggleEditor
initialSquiggleString={`value_of_work = 10 to 70
defaultCode={`value_of_work = 10 to 70
5 + value_of_work / 75`}
/>
@ -42,7 +42,7 @@ A statement assigns expressions to names. It looks like `<symbol> = <expression>
We can define functions
<SquiggleEditor
initialSquiggleString={`ozzie_estimate(t) = lognormal(t^(1.1), 0.5)
defaultCode={`ozzie_estimate(t) = lognormal(t^(1.1), 0.5)
nuno_estimate(t, m) = mixture(normal(-5, 1), lognormal(m, t / 1.25))
ozzie_estimate(1) * nuno_estimate(1, 1)`}
/>

2
packages/website/docs/Introduction.md
View File

@ -10,7 +10,7 @@ Squiggle is an _estimation language_, and a syntax for _calculating and expressi
- [Gallery](./Discussions/Gallery)
- [Squiggle playground](/playground)
- [Language basics](./Guides/Language)
- [Squiggle functions source of truth](./docs/Guides/Functions)
- [Squiggle functions source of truth](./Guides/Functions)
- [Known bugs](./Discussions/Bugs)
- [Original lesswrong sequence](https://www.lesswrong.com/s/rDe8QE5NvXcZYzgZ3)
- [Author your squiggle models as Observable notebooks](https://observablehq.com/@hazelfire/squiggle)

9
packages/website/src/pages/playground.js
View File

@ -36,11 +36,16 @@ function setHashData(data) {
}
export default function PlaygroundPage() {
const hashData = getHashData();
if (hashData.initialSquiggleString) {
hashData.defaultCode = String(hashData.initialSquiggleString);
delete hashData.initialSquiggleString;
}
const playgroundProps = {
initialSquiggleString: "normal(0,1)",
defaultCode: "normal(0,1)",
height: 700,
showTypes: true,
...getHashData(),
...hashData,
onCodeChange: (code) => setHashData({ initialSquiggleString: code }),
onSettingsChange: (settings) => {
const { showTypes, showControls, showSummary, showEditor } = settings;

141
yarn.lock
View File

@ -1802,6 +1802,18 @@
url-loader "^4.1.1"
webpack "^5.72.1"
"@emotion/is-prop-valid@^0.8.2":
version "0.8.8"
resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz#db28b1c4368a259b60a97311d6a952d4fd01ac1a"
integrity sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==
dependencies:
"@emotion/memoize" "0.7.4"
"@emotion/memoize@0.7.4":
version "0.7.4"
resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.4.tgz#19bf0f5af19149111c40d98bb0cf82119f5d9eeb"
integrity sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==
"@eslint/eslintrc@^1.3.0":
version "1.3.0"
resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-1.3.0.tgz#29f92c30bb3e771e4a2048c95fa6855392dfac4f"
@ -2237,6 +2249,59 @@
resolved "https://registry.yarnpkg.com/@mdx-js/util/-/util-1.6.22.tgz#219dfd89ae5b97a8801f015323ffa4b62f45718b"
integrity sha512-H1rQc1ZOHANWBvPcW+JpGwr+juXSxM8Q8YCkm3GhZd8REu1fHR3z99CErO1p9pkcfcxZnMdIZdIsXkOHY0NilA==
"@motionone/animation@^10.10.1":
version "10.10.1"
resolved "https://registry.yarnpkg.com/@motionone/animation/-/animation-10.10.1.tgz#d3d3ecb11c6d7507a104b080f31b07be9bc7056d"
integrity sha512-iX839/Ir5wT7hVX0yCZYjcDhHAOkVR5hIhVBTf37qEUD693uVwrxC2i1BI9vMVPc1rIoFtftYjOtwoO9Oq/aog==
dependencies:
"@motionone/easing" "^10.9.0"
"@motionone/types" "^10.9.0"
"@motionone/utils" "^10.9.0"
tslib "^2.3.1"
"@motionone/dom@^10.11.0":
version "10.11.0"
resolved "https://registry.yarnpkg.com/@motionone/dom/-/dom-10.11.0.tgz#dc2e46b0e21044cc9ae89a994cd6725eac09e48b"
integrity sha512-ST56HBslkeoeDwqRFWafkD+JT5FEwlHqB2K2KGaQh6wo6zfKQ9xwjQcqgDiBv2gg6s8ycjHAdFS6dnMHQ5hXKw==
dependencies:
"@motionone/animation" "^10.10.1"
"@motionone/generators" "^10.9.0"
"@motionone/types" "^10.9.0"
"@motionone/utils" "^10.9.0"
hey-listen "^1.0.8"
tslib "^2.3.1"
"@motionone/easing@^10.9.0":
version "10.9.0"
resolved "https://registry.yarnpkg.com/@motionone/easing/-/easing-10.9.0.tgz#42910c70dd30e1bbba27a9612ce03bca022d0da7"
integrity sha512-FYIr3HlQEb7aE5LOpY6BPQUaPyKeJt6VfGA+npy73+JIGqoVOjbrdZ1ZQxzTXqO76mG3UZvv1+twrDamRQsxFw==
dependencies:
"@motionone/utils" "^10.9.0"
tslib "^2.3.1"
"@motionone/generators@^10.9.0":
version "10.9.0"
resolved "https://registry.yarnpkg.com/@motionone/generators/-/generators-10.9.0.tgz#46f3e706f45a9566db7e0ce62d677c884813cdaa"
integrity sha512-BOkHx4qQswJV+z/6k05qdvRENE4hG606NI5cIPTsLtSuksnRn83utuj/15VTNoFeYHuTdhwzxvIPvlPVayIGTg==
dependencies:
"@motionone/types" "^10.9.0"
"@motionone/utils" "^10.9.0"
tslib "^2.3.1"
"@motionone/types@^10.9.0":
version "10.9.0"
resolved "https://registry.yarnpkg.com/@motionone/types/-/types-10.9.0.tgz#7caa9c1b746dd30bcf6104ce9c82a5a928385da2"
integrity sha512-ZcEDfsrS2ym9+vExV7+59avkzEO/PLkNj16uaDvbWhi0Q/vOZ72j2LQTrtDLWVyZRIeUaB/i8DJP017Gj6UYQw==
"@motionone/utils@^10.9.0":
version "10.9.0"
resolved "https://registry.yarnpkg.com/@motionone/utils/-/utils-10.9.0.tgz#a68fe41fe37e4365b07dfc676f014a0e43b8beb2"
integrity sha512-5IgmwQ8TdH1HsQ9d2QZeBCu9+HkqjoYRYItRpmusoyiedPMZaKdU3pr3qFP5nbAj68Ww2sTUxgEZEOF20qJA6w==
dependencies:
"@motionone/types" "^10.9.0"
hey-listen "^1.0.8"
tslib "^2.3.1"
"@mrmlnc/readdir-enhanced@^2.2.1":
version "2.2.1"
resolved "https://registry.yarnpkg.com/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz#524af240d1a360527b730475ecfa1344aa540dde"
@ -4316,7 +4381,7 @@
resolved "https://registry.yarnpkg.com/@types/range-parser/-/range-parser-1.2.4.tgz#cd667bcfdd025213aafb7ca5915a932590acdcdc"
integrity sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw==
"@types/react-dom@^18.0.0", "@types/react-dom@^18.0.5":
"@types/react-dom@^18.0.0":
version "18.0.5"
resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.0.5.tgz#330b2d472c22f796e5531446939eacef8378444a"
integrity sha512-OWPWTUrY/NIrjsAPkAk1wW9LZeIjSvkXRhclsFO8CZcZGCOg2G0YZy4ft+rOyYxy8B7ui5iZzi9OkDebZ7/QSA==
@ -9149,6 +9214,27 @@ fragment-cache@^0.2.1:
dependencies:
map-cache "^0.2.2"
framer-motion@^6.4.1:
version "6.4.1"
resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-6.4.1.tgz#d351a96d80bea5736af4175e6307bc63bb4daed1"
integrity sha512-JiVnG3p0mO9yWxjNx3xxJaKP4hTWdm6oIbzfMJZEMtoOahSNoDTRZA/mFPzfVNj2foKwFPOLFv/lw8UUZjyUqA==
dependencies:
"@motionone/dom" "^10.11.0"
framesync "6.0.1"
hey-listen "^1.0.8"
popmotion "11.0.3"
style-value-types "5.0.0"
tslib "^2.1.0"
optionalDependencies:
"@emotion/is-prop-valid" "^0.8.2"
framesync@6.0.1:
version "6.0.1"
resolved "https://registry.yarnpkg.com/framesync/-/framesync-6.0.1.tgz#5e32fc01f1c42b39c654c35b16440e07a25d6f20"
integrity sha512-fUY88kXvGiIItgNC7wcTOl0SNRCVXMKSWW2Yzfmn7EKNc+MpCzcz9DhdHcdjbrtN3c6R4H5dTY2jiCpPdysEjA==
dependencies:
tslib "^2.1.0"
fresh@0.5.2:
version "0.5.2"
resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.5.2.tgz#3d8cadd90d976569fa835ab1f8e4b23a105605a7"
@ -9816,6 +9902,11 @@ he@^1.2.0:
resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
hey-listen@^1.0.8:
version "1.0.8"
resolved "https://registry.yarnpkg.com/hey-listen/-/hey-listen-1.0.8.tgz#8e59561ff724908de1aa924ed6ecc84a56a9aa68"
integrity sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q==
highlight.js@^10.4.1, highlight.js@~10.7.0:
version "10.7.3"
resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-10.7.3.tgz#697272e3991356e40c3cac566a74eef681756531"
@ -13390,6 +13481,16 @@ polished@^4.2.2:
dependencies:
"@babel/runtime" "^7.17.8"
popmotion@11.0.3:
version "11.0.3"
resolved "https://registry.yarnpkg.com/popmotion/-/popmotion-11.0.3.tgz#565c5f6590bbcddab7a33a074bb2ba97e24b0cc9"
integrity sha512-Y55FLdj3UxkR7Vl3s7Qr4e9m0onSnP8W7d/xQLsoJM40vs6UKHFdygs6SWryasTZYqugMjm3BepCF4CWXDiHgA==
dependencies:
framesync "6.0.1"
hey-listen "^1.0.8"
style-value-types "5.0.0"
tslib "^2.1.0"
posix-character-classes@^0.1.0:
version "0.1.1"
resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab"
@ -16410,6 +16511,14 @@ style-to-object@0.3.0, style-to-object@^0.3.0:
dependencies:
inline-style-parser "0.1.1"
style-value-types@5.0.0:
version "5.0.0"
resolved "https://registry.yarnpkg.com/style-value-types/-/style-value-types-5.0.0.tgz#76c35f0e579843d523187989da866729411fc8ad"
integrity sha512-08yq36Ikn4kx4YU6RD7jWEv27v4V+PUsOGa4n/as8Et3CuODMJQ00ENeAVXAeydX4Z2j1XHZF1K2sX4mGl18fA==
dependencies:
hey-listen "^1.0.8"
tslib "^2.1.0"
stylehacks@^5.1.0:
version "5.1.0"
resolved "https://registry.yarnpkg.com/stylehacks/-/stylehacks-5.1.0.tgz#a40066490ca0caca04e96c6b02153ddc39913520"
@ -16967,7 +17076,7 @@ tslib@^1.8.1:
resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
tslib@^2.0.0, tslib@^2.0.1, tslib@^2.0.3, tslib@^2.1.0, tslib@^2.4.0:
tslib@^2.0.0, tslib@^2.0.1, tslib@^2.0.3, tslib@^2.1.0, tslib@^2.3.1, tslib@^2.4.0:
version "2.4.0"
resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.4.0.tgz#7cecaa7f073ce680a05847aa77be941098f36dc3"
integrity sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==
@ -17950,11 +18059,6 @@ vsce-yarn-patch@^1.66.2:
yauzl "^2.3.1"
yazl "^2.2.2"
vscode-jsonrpc@6.0.0:
version "6.0.0"
resolved "https://registry.yarnpkg.com/vscode-jsonrpc/-/vscode-jsonrpc-6.0.0.tgz#108bdb09b4400705176b957ceca9e0880e9b6d4e"
integrity sha512-wnJA4BnEjOSyFMvjZdpiOwhSq9uDoK8e/kpRJDTaMYzwlkrhG1fwDIZI94CLsLzlCK5cIbMMtFlJlfR57Lavmg==
vscode-jsonrpc@8.0.1:
version "8.0.1"
resolved "https://registry.yarnpkg.com/vscode-jsonrpc/-/vscode-jsonrpc-8.0.1.tgz#f30b0625ebafa0fb3bc53e934ca47b706445e57e"
@ -17969,14 +18073,6 @@ vscode-languageclient@^8.0.1:
semver "^7.3.5"
vscode-languageserver-protocol "3.17.1"
vscode-languageserver-protocol@3.16.0:
version "3.16.0"
resolved "https://registry.yarnpkg.com/vscode-languageserver-protocol/-/vscode-languageserver-protocol-3.16.0.tgz#34135b61a9091db972188a07d337406a3cdbe821"
integrity sha512-sdeUoAawceQdgIfTI+sdcwkiK2KU+2cbEYA0agzM2uqaUy2UpnnGHtWTHVEtS0ES4zHU0eMFRGN+oQgDxlD66A==
dependencies:
vscode-jsonrpc "6.0.0"
vscode-languageserver-types "3.16.0"
vscode-languageserver-protocol@3.17.1:
version "3.17.1"
resolved "https://registry.yarnpkg.com/vscode-languageserver-protocol/-/vscode-languageserver-protocol-3.17.1.tgz#e801762c304f740208b6c804a0cf21f2c87509ed"
@ -17990,22 +18086,17 @@ vscode-languageserver-textdocument@^1.0.5:
resolved "https://registry.yarnpkg.com/vscode-languageserver-textdocument/-/vscode-languageserver-textdocument-1.0.5.tgz#838769940ece626176ec5d5a2aa2d0aa69f5095c"
integrity sha512-1ah7zyQjKBudnMiHbZmxz5bYNM9KKZYz+5VQLj+yr8l+9w3g+WAhCkUkWbhMEdC5u0ub4Ndiye/fDyS8ghIKQg==
vscode-languageserver-types@3.16.0:
version "3.16.0"
resolved "https://registry.yarnpkg.com/vscode-languageserver-types/-/vscode-languageserver-types-3.16.0.tgz#ecf393fc121ec6974b2da3efb3155644c514e247"
integrity sha512-k8luDIWJWyenLc5ToFQQMaSrqCHiLwyKPHKPQZ5zz21vM+vIVUSvsRpcbiECH4WR88K2XZqc4ScRcZ7nk/jbeA==
vscode-languageserver-types@3.17.1:
version "3.17.1"
resolved "https://registry.yarnpkg.com/vscode-languageserver-types/-/vscode-languageserver-types-3.17.1.tgz#c2d87fa7784f8cac389deb3ff1e2d9a7bef07e16"
integrity sha512-K3HqVRPElLZVVPtMeKlsyL9aK0GxGQpvtAUTfX4k7+iJ4mc1M+JM+zQwkgGy2LzY0f0IAafe8MKqIkJrxfGGjQ==
vscode-languageserver@^7.0.0:
version "7.0.0"
resolved "https://registry.yarnpkg.com/vscode-languageserver/-/vscode-languageserver-7.0.0.tgz#49b068c87cfcca93a356969d20f5d9bdd501c6b0"
integrity sha512-60HTx5ID+fLRcgdHfmz0LDZAXYEV68fzwG0JWwEPBode9NuMYTIxuYXPg4ngO8i8+Ou0lM7y6GzaYWbiDL0drw==
vscode-languageserver@^8.0.1:
version "8.0.1"
resolved "https://registry.yarnpkg.com/vscode-languageserver/-/vscode-languageserver-8.0.1.tgz#56bd7a01f5c88af075a77f1d220edcb30fc4bdc7"
integrity sha512-sn7SjBwWm3OlmLtgg7jbM0wBULppyL60rj8K5HF0ny/MzN+GzPBX1kCvYdybhl7UW63V5V5tRVnyB8iwC73lSQ==
dependencies:
vscode-languageserver-protocol "3.16.0"
vscode-languageserver-protocol "3.17.1"
vscode-uri@^3.0.3:
version "3.0.3"