Merge branch 'develop' into Umur-reducer-dev
This commit is contained in:
Umur Ozkul
commit
2dc204e222
2
.github/workflows/ci.yml
vendored
2
.github/workflows/ci.yml
vendored
|
|
@ -154,5 +154,7 @@ jobs:
|
|||
run: cd ../../ && yarn
|
||||
- name: Build rescript in squiggle-lang
|
||||
run: cd ../squiggle-lang && yarn build
|
||||
- name: Build components
|
||||
run: cd ../components && yarn build
|
||||
- name: Build website assets
|
||||
run: yarn build
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
"dependencies": {
|
||||
"@headlessui/react": "^1.6.4",
|
||||
"@heroicons/react": "^1.0.6",
|
||||
"@hookform/resolvers": "^2.8.10",
|
||||
"@hookform/resolvers": "^2.9.0",
|
||||
"@quri/squiggle-lang": "^0.2.8",
|
||||
"@react-hook/size": "^2.1.2",
|
||||
"lodash": "^4.17.21",
|
||||
|
|
@ -22,40 +22,42 @@
|
|||
},
|
||||
"devDependencies": {
|
||||
"@babel/plugin-proposal-private-property-in-object": "^7.17.12",
|
||||
"@storybook/addon-actions": "^6.5.6",
|
||||
"@storybook/addon-essentials": "^6.5.6",
|
||||
"@storybook/addon-links": "^6.5.6",
|
||||
"@storybook/builder-webpack5": "^6.5.6",
|
||||
"@storybook/manager-webpack5": "^6.5.6",
|
||||
"@storybook/addon-actions": "^6.5.7",
|
||||
"@storybook/addon-essentials": "^6.5.7",
|
||||
"@storybook/addon-links": "^6.5.7",
|
||||
"@storybook/builder-webpack5": "^6.5.7",
|
||||
"@storybook/manager-webpack5": "^6.5.7",
|
||||
"@storybook/node-logger": "^6.5.6",
|
||||
"@storybook/preset-create-react-app": "^4.1.1",
|
||||
"@storybook/react": "^6.5.6",
|
||||
"@storybook/preset-create-react-app": "^4.1.2",
|
||||
"@storybook/react": "^6.5.7",
|
||||
"@tailwindcss/forms": "^0.5.2",
|
||||
"@testing-library/jest-dom": "^5.16.4",
|
||||
"@testing-library/react": "^13.3.0",
|
||||
"@testing-library/user-event": "^14.2.0",
|
||||
"@types/jest": "^27.5.0",
|
||||
"@types/lodash": "^4.14.182",
|
||||
"@types/node": "^17.0.36",
|
||||
"@types/node": "^17.0.40",
|
||||
"@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",
|
||||
"mini-css-extract-plugin": "^2.6.0",
|
||||
"postcss-loader": "^7.0.0",
|
||||
"react-scripts": "^5.0.1",
|
||||
"style-loader": "^3.3.1",
|
||||
"tailwindcss": "^3.0.24",
|
||||
"ts-loader": "^9.3.0",
|
||||
"tsconfig-paths-webpack-plugin": "^3.5.2",
|
||||
"typescript": "^4.7.2",
|
||||
"typescript": "^4.7.3",
|
||||
"web-vitals": "^2.1.4",
|
||||
"webpack": "^5.72.1",
|
||||
"webpack": "^5.73.0",
|
||||
"webpack-cli": "^4.9.2",
|
||||
"webpack-dev-server": "^4.9.0"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "cross-env REACT_APP_FAST_REFRESH=false && start-storybook -p 6006 -s public",
|
||||
"build": "tsc -b && build-storybook -s public",
|
||||
"build": "tsc -b && tailwindcss -i ./src/tailwind.css -o ./dist/main.css && build-storybook -s public",
|
||||
"bundle": "webpack",
|
||||
"all": "yarn bundle && yarn build",
|
||||
"lint": "prettier --check .",
|
||||
|
|
|
|||
7
packages/components/postcss.config.js
Normal file
7
packages/components/postcss.config.js
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
module.exports = {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
cssnano: {},
|
||||
},
|
||||
};
|
||||
|
|
@ -10,23 +10,32 @@ export const Alert: React.FC<{
|
|||
backgroundColor: string;
|
||||
headingColor: string;
|
||||
bodyColor: string;
|
||||
icon: React.ReactNode;
|
||||
children: React.ReactNode;
|
||||
icon: (props: React.ComponentProps<"svg">) => JSX.Element;
|
||||
iconColor: string;
|
||||
children?: React.ReactNode;
|
||||
}> = ({
|
||||
heading = "Error",
|
||||
backgroundColor,
|
||||
headingColor,
|
||||
bodyColor,
|
||||
icon,
|
||||
icon: Icon,
|
||||
iconColor,
|
||||
children,
|
||||
}) => {
|
||||
return (
|
||||
<div className={`rounded-md p-4 ${backgroundColor}`}>
|
||||
<div className="flex">
|
||||
<div className="flex-shrink-0">{icon}</div>
|
||||
<Icon
|
||||
className={`h-5 w-5 flex-shrink-0 ${iconColor}`}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<div className="ml-3">
|
||||
<h3 className={`text-sm font-medium ${headingColor}`}>{heading}</h3>
|
||||
<header className={`text-sm font-medium ${headingColor}`}>
|
||||
{heading}
|
||||
</header>
|
||||
{children && React.Children.count(children) ? (
|
||||
<div className={`mt-2 text-sm ${bodyColor}`}>{children}</div>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -35,49 +44,42 @@ export const Alert: React.FC<{
|
|||
|
||||
export const ErrorAlert: React.FC<{
|
||||
heading: string;
|
||||
children: React.ReactNode;
|
||||
}> = ({ heading = "Error", children }) => (
|
||||
children?: React.ReactNode;
|
||||
}> = (props) => (
|
||||
<Alert
|
||||
heading={heading}
|
||||
children={children}
|
||||
{...props}
|
||||
backgroundColor="bg-red-100"
|
||||
headingColor="text-red-800"
|
||||
bodyColor="text-red-700"
|
||||
icon={<XCircleIcon className="h-5 w-5 text-red-400" aria-hidden="true" />}
|
||||
icon={XCircleIcon}
|
||||
iconColor="text-red-400"
|
||||
/>
|
||||
);
|
||||
|
||||
export const MessageAlert: React.FC<{
|
||||
heading: string;
|
||||
children: React.ReactNode;
|
||||
}> = ({ heading = "Error", children }) => (
|
||||
children?: React.ReactNode;
|
||||
}> = (props) => (
|
||||
<Alert
|
||||
heading={heading}
|
||||
children={children}
|
||||
{...props}
|
||||
backgroundColor="bg-slate-100"
|
||||
headingColor="text-slate-700"
|
||||
bodyColor="text-slate-700"
|
||||
icon={
|
||||
<InformationCircleIcon
|
||||
className="h-5 w-5 text-slate-400"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
}
|
||||
icon={InformationCircleIcon}
|
||||
iconColor="text-slate-400"
|
||||
/>
|
||||
);
|
||||
|
||||
export const SuccessAlert: React.FC<{
|
||||
heading: string;
|
||||
children: React.ReactNode;
|
||||
}> = ({ heading = "Error", children }) => (
|
||||
children?: React.ReactNode;
|
||||
}> = (props) => (
|
||||
<Alert
|
||||
heading={heading}
|
||||
children={children}
|
||||
{...props}
|
||||
backgroundColor="bg-green-50"
|
||||
headingColor="text-green-800"
|
||||
bodyColor="text-green-700"
|
||||
icon={
|
||||
<CheckCircleIcon className="h-5 w-5 text-green-400" aria-hidden="true" />
|
||||
}
|
||||
icon={CheckCircleIcon}
|
||||
iconColor="text-green-400"
|
||||
/>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -14,13 +14,13 @@ interface CodeEditorProps {
|
|||
showGutter?: boolean;
|
||||
}
|
||||
|
||||
export let CodeEditor: FC<CodeEditorProps> = ({
|
||||
export const CodeEditor: FC<CodeEditorProps> = ({
|
||||
value,
|
||||
onChange,
|
||||
oneLine = false,
|
||||
showGutter = false,
|
||||
height,
|
||||
}: CodeEditorProps) => {
|
||||
}) => {
|
||||
let lineCount = value.split("\n").length;
|
||||
let id = _.uniqueId();
|
||||
return (
|
||||
|
|
@ -48,4 +48,3 @@ export let CodeEditor: FC<CodeEditorProps> = ({
|
|||
/>
|
||||
);
|
||||
};
|
||||
export default CodeEditor;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
import * as React from "react";
|
||||
import _ from "lodash";
|
||||
import {
|
||||
Distribution,
|
||||
result,
|
||||
|
|
@ -34,16 +33,24 @@ export const DistributionChart: React.FC<DistributionChartProps> = ({
|
|||
showSummary,
|
||||
width,
|
||||
showControls = false,
|
||||
}: DistributionChartProps) => {
|
||||
let [isLogX, setLogX] = React.useState(false);
|
||||
let [isExpY, setExpY] = React.useState(false);
|
||||
let shape = distribution.pointSet();
|
||||
const [sized, _] = useSize((size) => {
|
||||
if (shape.tag === "Ok") {
|
||||
let massBelow0 =
|
||||
}) => {
|
||||
const [isLogX, setLogX] = React.useState(false);
|
||||
const [isExpY, setExpY] = React.useState(false);
|
||||
const shape = distribution.pointSet();
|
||||
const [sized] = useSize((size) => {
|
||||
if (shape.tag === "Error") {
|
||||
return (
|
||||
<ErrorAlert heading="Distribution Error">
|
||||
{distributionErrorToString(shape.value)}
|
||||
</ErrorAlert>
|
||||
);
|
||||
}
|
||||
|
||||
const massBelow0 =
|
||||
shape.value.continuous.some((x) => x.x <= 0) ||
|
||||
shape.value.discrete.some((x) => x.x <= 0);
|
||||
let spec = buildVegaSpec(isLogX, isExpY);
|
||||
const spec = buildVegaSpec(isLogX, isExpY);
|
||||
|
||||
let widthProp = width ? width : size.width;
|
||||
if (widthProp < 20) {
|
||||
console.warn(
|
||||
|
|
@ -52,26 +59,8 @@ export const DistributionChart: React.FC<DistributionChartProps> = ({
|
|||
widthProp = 20;
|
||||
}
|
||||
|
||||
// Check whether we should disable the checkbox
|
||||
var logCheckbox = (
|
||||
<CheckBox label="Log X scale" value={isLogX} onChange={setLogX} />
|
||||
);
|
||||
if (massBelow0) {
|
||||
logCheckbox = (
|
||||
<CheckBox
|
||||
label="Log X scale"
|
||||
value={isLogX}
|
||||
onChange={setLogX}
|
||||
disabled={true}
|
||||
tooltip={
|
||||
"Your distribution has mass lower than or equal to 0. Log only works on strictly positive values."
|
||||
}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
var result = (
|
||||
<div style={{ width: widthProp + "px" }}>
|
||||
return (
|
||||
<div style={{ width: widthProp }}>
|
||||
<Vega
|
||||
spec={spec}
|
||||
data={{ con: shape.value.continuous, dis: shape.value.discrete }}
|
||||
|
|
@ -84,21 +73,24 @@ export const DistributionChart: React.FC<DistributionChartProps> = ({
|
|||
</div>
|
||||
{showControls && (
|
||||
<div>
|
||||
{logCheckbox}
|
||||
<CheckBox
|
||||
label="Log X scale"
|
||||
value={isLogX}
|
||||
onChange={setLogX}
|
||||
// Check whether we should disable the checkbox
|
||||
{...(massBelow0
|
||||
? {
|
||||
disabled: true,
|
||||
tooltip:
|
||||
"Your distribution has mass lower than or equal to 0. Log only works on strictly positive values.",
|
||||
}
|
||||
: {})}
|
||||
/>
|
||||
<CheckBox label="Exp Y scale" value={isExpY} onChange={setExpY} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
var result = (
|
||||
<ErrorAlert heading="Distribution Error">
|
||||
{distributionErrorToString(shape.value)}
|
||||
</ErrorAlert>
|
||||
);
|
||||
}
|
||||
|
||||
return result;
|
||||
});
|
||||
return sized;
|
||||
};
|
||||
|
|
@ -121,13 +113,13 @@ interface CheckBoxProps {
|
|||
tooltip?: string;
|
||||
}
|
||||
|
||||
export const CheckBox = ({
|
||||
export const CheckBox: React.FC<CheckBoxProps> = ({
|
||||
label,
|
||||
onChange,
|
||||
value,
|
||||
disabled = false,
|
||||
tooltip,
|
||||
}: CheckBoxProps) => {
|
||||
}) => {
|
||||
return (
|
||||
<span title={tooltip}>
|
||||
<input
|
||||
|
|
@ -141,22 +133,39 @@ export const CheckBox = ({
|
|||
);
|
||||
};
|
||||
|
||||
const TableHeadCell: React.FC<{ children: React.ReactNode }> = ({
|
||||
children,
|
||||
}) => (
|
||||
<th className="border border-slate-200 bg-slate-50 py-1 px-2 text-slate-500 font-semibold">
|
||||
{children}
|
||||
</th>
|
||||
);
|
||||
|
||||
const Cell: React.FC<{ children: React.ReactNode }> = ({ children }) => (
|
||||
<td className="border border-slate-200 py-1 px-2 text-slate-900">
|
||||
{children}
|
||||
</td>
|
||||
);
|
||||
|
||||
type SummaryTableProps = {
|
||||
distribution: Distribution;
|
||||
};
|
||||
|
||||
const SummaryTable: React.FC<SummaryTableProps> = ({
|
||||
distribution,
|
||||
}: SummaryTableProps) => {
|
||||
let mean = distribution.mean();
|
||||
let p5 = distribution.inv(0.05);
|
||||
let p10 = distribution.inv(0.1);
|
||||
let p25 = distribution.inv(0.25);
|
||||
let p50 = distribution.inv(0.5);
|
||||
let p75 = distribution.inv(0.75);
|
||||
let p90 = distribution.inv(0.9);
|
||||
let p95 = distribution.inv(0.95);
|
||||
let unwrapResult = (
|
||||
const SummaryTable: React.FC<SummaryTableProps> = ({ distribution }) => {
|
||||
const mean = distribution.mean();
|
||||
const stdev = distribution.stdev();
|
||||
const p5 = distribution.inv(0.05);
|
||||
const p10 = distribution.inv(0.1);
|
||||
const p25 = distribution.inv(0.25);
|
||||
const p50 = distribution.inv(0.5);
|
||||
const p75 = distribution.inv(0.75);
|
||||
const p90 = distribution.inv(0.9);
|
||||
const p95 = distribution.inv(0.95);
|
||||
|
||||
const hasResult = (x: result<number, distributionError>): boolean =>
|
||||
x.tag === "Ok";
|
||||
|
||||
const unwrapResult = (
|
||||
x: result<number, distributionError>
|
||||
): React.ReactNode => {
|
||||
if (x.tag === "Ok") {
|
||||
|
|
@ -170,24 +179,12 @@ const SummaryTable: React.FC<SummaryTableProps> = ({
|
|||
}
|
||||
};
|
||||
|
||||
let TableHeadCell: React.FC<{ children: React.ReactNode }> = ({
|
||||
children,
|
||||
}) => (
|
||||
<th className="border border-slate-200 bg-slate-50 py-1 px-2 text-slate-500 font-semibold">
|
||||
{children}
|
||||
</th>
|
||||
);
|
||||
let Cell: React.FC<{ children: React.ReactNode }> = ({ children }) => (
|
||||
<td className="border border-slate-200 py-1 px-2 text-slate-900 ">
|
||||
{children}
|
||||
</td>
|
||||
);
|
||||
|
||||
return (
|
||||
<table className="border border-collapse border-slate-400">
|
||||
<thead className="bg-slate-50">
|
||||
<tr>
|
||||
<TableHeadCell>{"Mean"}</TableHeadCell>
|
||||
{hasResult(stdev) && <TableHeadCell>{"Stdev"}</TableHeadCell>}
|
||||
<TableHeadCell>{"5%"}</TableHeadCell>
|
||||
<TableHeadCell>{"10%"}</TableHeadCell>
|
||||
<TableHeadCell>{"25%"}</TableHeadCell>
|
||||
|
|
@ -200,6 +197,7 @@ const SummaryTable: React.FC<SummaryTableProps> = ({
|
|||
<tbody>
|
||||
<tr>
|
||||
<Cell>{unwrapResult(mean)}</Cell>
|
||||
{hasResult(stdev) && <Cell>{unwrapResult(stdev)}</Cell>}
|
||||
<Cell>{unwrapResult(p5)}</Cell>
|
||||
<Cell>{unwrapResult(p10)}</Cell>
|
||||
<Cell>{unwrapResult(p25)}</Cell>
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ export const FunctionChart: React.FC<FunctionChartProps> = ({
|
|||
chartSettings,
|
||||
environment,
|
||||
height,
|
||||
}: FunctionChartProps) => {
|
||||
}) => {
|
||||
if (fn.parameters.length > 1) {
|
||||
return (
|
||||
<MessageAlert heading="Function Display Not Supported">
|
||||
|
|
|
|||
|
|
@ -151,7 +151,7 @@ export const FunctionChart1Dist: React.FC<FunctionChart1DistProps> = ({
|
|||
chartSettings,
|
||||
environment,
|
||||
height,
|
||||
}: FunctionChart1DistProps) => {
|
||||
}) => {
|
||||
let [mouseOverlay, setMouseOverlay] = React.useState(0);
|
||||
function handleHover(_name: string, value: unknown) {
|
||||
setMouseOverlay(value as number);
|
||||
|
|
@ -170,16 +170,14 @@ export const FunctionChart1Dist: React.FC<FunctionChart1DistProps> = ({
|
|||
},
|
||||
};
|
||||
let showChart =
|
||||
mouseItem.tag === "Ok" && mouseItem.value.tag == "distribution" ? (
|
||||
mouseItem.tag === "Ok" && mouseItem.value.tag === "distribution" ? (
|
||||
<DistributionChart
|
||||
distribution={mouseItem.value.value}
|
||||
width={400}
|
||||
height={50}
|
||||
showSummary={false}
|
||||
/>
|
||||
) : (
|
||||
<></>
|
||||
);
|
||||
) : null;
|
||||
|
||||
let getPercentilesMemoized = React.useMemo(
|
||||
() => getPercentiles({ chartSettings, fn, environment }),
|
||||
|
|
|
|||
|
|
@ -14,15 +14,15 @@ interface CodeEditorProps {
|
|||
showGutter?: boolean;
|
||||
}
|
||||
|
||||
export let JsonEditor: FC<CodeEditorProps> = ({
|
||||
export const JsonEditor: FC<CodeEditorProps> = ({
|
||||
value,
|
||||
onChange,
|
||||
oneLine = false,
|
||||
showGutter = false,
|
||||
height,
|
||||
}: CodeEditorProps) => {
|
||||
let lineCount = value.split("\n").length;
|
||||
let id = _.uniqueId();
|
||||
}) => {
|
||||
const lineCount = value.split("\n").length;
|
||||
const id = _.uniqueId();
|
||||
return (
|
||||
<AceEditor
|
||||
value={value}
|
||||
|
|
@ -47,5 +47,3 @@ export let JsonEditor: FC<CodeEditorProps> = ({
|
|||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default JsonEditor;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
import * as React from "react";
|
||||
import _ from "lodash";
|
||||
|
||||
const orderOfMagnitudeNum = (n: number) => {
|
||||
return Math.pow(10, n);
|
||||
|
|
@ -74,25 +73,23 @@ export interface NumberShowerProps {
|
|||
precision?: number;
|
||||
}
|
||||
|
||||
export let NumberShower: React.FC<NumberShowerProps> = ({
|
||||
export const NumberShower: React.FC<NumberShowerProps> = ({
|
||||
number,
|
||||
precision = 2,
|
||||
}: NumberShowerProps) => {
|
||||
let numberWithPresentation = numberShow(number, precision);
|
||||
}) => {
|
||||
const numberWithPresentation = numberShow(number, precision);
|
||||
return (
|
||||
<span>
|
||||
{numberWithPresentation.value}
|
||||
{numberWithPresentation.symbol}
|
||||
{numberWithPresentation.power ? (
|
||||
<span>
|
||||
{"\u00b710"}
|
||||
{"\u00b7" /* dot symbol */}10
|
||||
<span style={{ fontSize: "0.6em", verticalAlign: "super" }}>
|
||||
{numberWithPresentation.power}
|
||||
</span>
|
||||
</span>
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
) : null}
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
import * as React from "react";
|
||||
import _ from "lodash";
|
||||
import {
|
||||
run,
|
||||
errorValueToString,
|
||||
|
|
@ -28,6 +27,7 @@ function getRange<a>(x: declaration<a>) {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
function getChartSettings<a>(x: declaration<a>): FunctionChartSettings {
|
||||
let range = getRange(x);
|
||||
let min = range.floats ? range.floats.min : 0;
|
||||
|
|
@ -49,12 +49,12 @@ export const VariableBox: React.FC<VariableBoxProps> = ({
|
|||
heading = "Error",
|
||||
children,
|
||||
showTypes = false,
|
||||
}: VariableBoxProps) => {
|
||||
}) => {
|
||||
if (showTypes) {
|
||||
return (
|
||||
<div className="bg-white border border-grey-200 m-2">
|
||||
<div className="border-b border-grey-200 p-3">
|
||||
<h3 className="font-mono">{heading}</h3>
|
||||
<header className="font-mono">{heading}</header>
|
||||
</div>
|
||||
<div className="p-3">{children}</div>
|
||||
</div>
|
||||
|
|
@ -90,7 +90,7 @@ const SquiggleItem: React.FC<SquiggleItemProps> = ({
|
|||
showControls = false,
|
||||
chartSettings,
|
||||
environment,
|
||||
}: SquiggleItemProps) => {
|
||||
}) => {
|
||||
switch (expression.tag) {
|
||||
case "number":
|
||||
return (
|
||||
|
|
@ -108,12 +108,8 @@ const SquiggleItem: React.FC<SquiggleItemProps> = ({
|
|||
showTypes={showTypes}
|
||||
>
|
||||
{distType === "Symbolic" && showTypes ? (
|
||||
<>
|
||||
<div>{expression.value.toString()}</div>
|
||||
</>
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
) : null}
|
||||
<DistributionChart
|
||||
distribution={expression.value}
|
||||
height={height}
|
||||
|
|
@ -157,9 +153,9 @@ const SquiggleItem: React.FC<SquiggleItemProps> = ({
|
|||
return (
|
||||
<VariableBox heading="Array" showTypes={showTypes}>
|
||||
{expression.value.map((r, i) => (
|
||||
<div key={i} className="flex flex-row pt-1">
|
||||
<div key={i} className="flex pt-1">
|
||||
<div className="flex-none bg-slate-100 rounded-sm px-1">
|
||||
<h3 className="text-slate-400 font-mono">{i}</h3>
|
||||
<header className="text-slate-400 font-mono">{i}</header>
|
||||
</div>
|
||||
<div className="px-2 mb-2 grow">
|
||||
<SquiggleItem
|
||||
|
|
@ -181,12 +177,13 @@ const SquiggleItem: React.FC<SquiggleItemProps> = ({
|
|||
case "record":
|
||||
return (
|
||||
<VariableBox heading="Record" showTypes={showTypes}>
|
||||
<div className="space-y-3">
|
||||
{Object.entries(expression.value).map(([key, r]) => (
|
||||
<div key={key} className="flex flex-row pt-1">
|
||||
<div className="flex-none pr-2">
|
||||
<h3 className="text-slate-500 font-mono">{key}:</h3>
|
||||
<div key={key} className="flex space-x-2">
|
||||
<div className="flex-none">
|
||||
<header className="text-slate-500 font-mono">{key}:</header>
|
||||
</div>
|
||||
<div className="pl-2 pr-2 mb-2 grow bg-gray-50 border border-gray-100 rounded-sm">
|
||||
<div className="px-2 grow bg-gray-50 border border-gray-100 rounded-sm">
|
||||
<SquiggleItem
|
||||
expression={r}
|
||||
width={width !== undefined ? width - 20 : width}
|
||||
|
|
@ -200,6 +197,7 @@ const SquiggleItem: React.FC<SquiggleItemProps> = ({
|
|||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</VariableBox>
|
||||
);
|
||||
case "arraystring":
|
||||
|
|
@ -285,7 +283,7 @@ export interface SquiggleChartProps {
|
|||
showControls?: boolean;
|
||||
}
|
||||
|
||||
let defaultChartSettings = { start: 0, stop: 10, count: 20 };
|
||||
const defaultChartSettings = { start: 0, stop: 10, count: 20 };
|
||||
|
||||
export const SquiggleChart: React.FC<SquiggleChartProps> = ({
|
||||
squiggleString = "",
|
||||
|
|
@ -299,14 +297,20 @@ export const SquiggleChart: React.FC<SquiggleChartProps> = ({
|
|||
showTypes = false,
|
||||
showControls = false,
|
||||
chartSettings = defaultChartSettings,
|
||||
}: SquiggleChartProps) => {
|
||||
}) => {
|
||||
let expressionResult = run(squiggleString, bindings, environment, jsImports);
|
||||
let e = environment ? environment : defaultEnvironment;
|
||||
let internal: JSX.Element;
|
||||
if (expressionResult.tag === "Ok") {
|
||||
if (expressionResult.tag !== "Ok") {
|
||||
return (
|
||||
<ErrorAlert heading={"Parse Error"}>
|
||||
{errorValueToString(expressionResult.value)}
|
||||
</ErrorAlert>
|
||||
);
|
||||
}
|
||||
|
||||
let e = environment ?? defaultEnvironment;
|
||||
let expression = expressionResult.value;
|
||||
onChange(expression);
|
||||
internal = (
|
||||
return (
|
||||
<SquiggleItem
|
||||
expression={expression}
|
||||
width={width}
|
||||
|
|
@ -318,12 +322,4 @@ export const SquiggleChart: React.FC<SquiggleChartProps> = ({
|
|||
environment={e}
|
||||
/>
|
||||
);
|
||||
} else {
|
||||
internal = (
|
||||
<ErrorAlert heading={"Parse Error"}>
|
||||
{errorValueToString(expressionResult.value)}
|
||||
</ErrorAlert>
|
||||
);
|
||||
}
|
||||
return internal;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -57,8 +57,8 @@ export let SquiggleEditor: React.FC<SquiggleEditorProps> = ({
|
|||
showControls = false,
|
||||
showSummary = false,
|
||||
}: SquiggleEditorProps) => {
|
||||
let [expression, setExpression] = React.useState(initialSquiggleString);
|
||||
let chartSettings = {
|
||||
const [expression, setExpression] = React.useState(initialSquiggleString);
|
||||
const chartSettings = {
|
||||
start: diagramStart,
|
||||
stop: diagramStop,
|
||||
count: diagramCount,
|
||||
|
|
@ -150,17 +150,17 @@ export let SquigglePartial: React.FC<SquigglePartialProps> = ({
|
|||
environment,
|
||||
jsImports = defaultImports,
|
||||
}: SquigglePartialProps) => {
|
||||
let [expression, setExpression] = React.useState(initialSquiggleString);
|
||||
let [error, setError] = React.useState<string | null>(null);
|
||||
const [expression, setExpression] = React.useState(initialSquiggleString);
|
||||
const [error, setError] = React.useState<string | null>(null);
|
||||
|
||||
let runSquiggleAndUpdateBindings = () => {
|
||||
let squiggleResult = runPartial(
|
||||
const runSquiggleAndUpdateBindings = () => {
|
||||
const squiggleResult = runPartial(
|
||||
expression,
|
||||
bindings,
|
||||
environment,
|
||||
jsImports
|
||||
);
|
||||
if (squiggleResult.tag == "Ok") {
|
||||
if (squiggleResult.tag === "Ok") {
|
||||
if (onChange) onChange(squiggleResult.value);
|
||||
setError(null);
|
||||
} else {
|
||||
|
|
@ -181,11 +181,7 @@ export let SquigglePartial: React.FC<SquigglePartialProps> = ({
|
|||
height={20}
|
||||
/>
|
||||
</div>
|
||||
{error !== null ? (
|
||||
<ErrorAlert heading="Error">{error}</ErrorAlert>
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
{error !== null ? <ErrorAlert heading="Error">{error}</ErrorAlert> : null}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,19 +1,21 @@
|
|||
import _ from "lodash";
|
||||
import React, { FC, ReactElement, useState } from "react";
|
||||
import React, { FC, Fragment, useState } from "react";
|
||||
import ReactDOM from "react-dom";
|
||||
import { SquiggleChart } from "./SquiggleChart";
|
||||
import CodeEditor from "./CodeEditor";
|
||||
import JsonEditor from "./JsonEditor";
|
||||
import { useForm, useWatch } from "react-hook-form";
|
||||
import { Path, useForm, UseFormRegister, useWatch } from "react-hook-form";
|
||||
import * as yup from "yup";
|
||||
import { yupResolver } from "@hookform/resolvers/yup";
|
||||
import { defaultBindings, environment } from "@quri/squiggle-lang";
|
||||
import { Tab } from "@headlessui/react";
|
||||
import { CodeIcon } from "@heroicons/react/solid";
|
||||
import { CogIcon } from "@heroicons/react/solid";
|
||||
import { ChartSquareBarIcon } from "@heroicons/react/solid";
|
||||
import { CurrencyDollarIcon } from "@heroicons/react/solid";
|
||||
import { Fragment } from "react";
|
||||
import {
|
||||
ChartSquareBarIcon,
|
||||
CodeIcon,
|
||||
CogIcon,
|
||||
CurrencyDollarIcon,
|
||||
} from "@heroicons/react/solid";
|
||||
|
||||
import { defaultBindings, environment } from "@quri/squiggle-lang";
|
||||
|
||||
import { SquiggleChart } from "./SquiggleChart";
|
||||
import { CodeEditor } from "./CodeEditor";
|
||||
import { JsonEditor } from "./JsonEditor";
|
||||
import { ErrorAlert, SuccessAlert } from "./Alert";
|
||||
|
||||
interface PlaygroundProps {
|
||||
|
|
@ -85,49 +87,20 @@ const schema = yup
|
|||
})
|
||||
.required();
|
||||
|
||||
type InputProps = {
|
||||
label: string;
|
||||
children: ReactElement;
|
||||
};
|
||||
|
||||
const InputItem: React.FC<InputProps> = ({ label, children }) => (
|
||||
<div className="col-span-4">
|
||||
<label className="block text-sm font-medium text-gray-600">{label}</label>
|
||||
<div className="mt-1">{children}</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
let numberStyle =
|
||||
"max-w-lg block w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:max-w-xs sm:text-sm border-gray-300 rounded-md";
|
||||
|
||||
function classNames(...classes: string[]) {
|
||||
return classes.filter(Boolean).join(" ");
|
||||
}
|
||||
|
||||
type StyledTabProps = {
|
||||
name: string;
|
||||
iconName: string;
|
||||
icon: (props: React.ComponentProps<"svg">) => JSX.Element;
|
||||
};
|
||||
|
||||
const StyledTab: React.FC<StyledTabProps> = ({ name, iconName }) => {
|
||||
let iconStyle = (isSelected: boolean) =>
|
||||
classNames(
|
||||
"-ml-0.5 mr-2 h-4 w-4 ",
|
||||
isSelected ? "text-slate-500" : "text-gray-400 group-hover:text-gray-900"
|
||||
);
|
||||
|
||||
let icon = (selected: boolean) =>
|
||||
({
|
||||
code: <CodeIcon className={iconStyle(selected)} />,
|
||||
cog: <CogIcon className={iconStyle(selected)} />,
|
||||
squareBar: <ChartSquareBarIcon className={iconStyle(selected)} />,
|
||||
dollar: <CurrencyDollarIcon className={iconStyle(selected)} />,
|
||||
}[iconName]);
|
||||
|
||||
const StyledTab: React.FC<StyledTabProps> = ({ name, icon: Icon }) => {
|
||||
return (
|
||||
<Tab key={name} as={Fragment}>
|
||||
{({ selected }) => (
|
||||
<button className="flex rounded-md focus:outline-none focus-visible:ring-offset-gray-100 ">
|
||||
<button className="group flex rounded-md focus:outline-none focus-visible:ring-offset-gray-100">
|
||||
<span
|
||||
className={classNames(
|
||||
"p-1 pl-2.5 pr-3.5 rounded-md flex items-center text-sm font-medium",
|
||||
|
|
@ -136,7 +109,14 @@ const StyledTab: React.FC<StyledTabProps> = ({ name, iconName }) => {
|
|||
: ""
|
||||
)}
|
||||
>
|
||||
{icon(selected)}
|
||||
<Icon
|
||||
className={classNames(
|
||||
"-ml-0.5 mr-2 h-4 w-4",
|
||||
selected
|
||||
? "text-slate-500"
|
||||
: "text-gray-400 group-hover:text-gray-900"
|
||||
)}
|
||||
/>
|
||||
<span
|
||||
className={
|
||||
selected
|
||||
|
|
@ -153,17 +133,77 @@ const StyledTab: React.FC<StyledTabProps> = ({ name, iconName }) => {
|
|||
);
|
||||
};
|
||||
|
||||
let SquigglePlayground: FC<PlaygroundProps> = ({
|
||||
const HeadedSection: FC<{ title: string; children: React.ReactNode }> = ({
|
||||
title,
|
||||
children,
|
||||
}) => (
|
||||
<div>
|
||||
<header className="text-lg leading-6 font-medium text-gray-900">
|
||||
{title}
|
||||
</header>
|
||||
<div className="mt-4">{children}</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const Text: FC<{ children: React.ReactNode }> = ({ children }) => (
|
||||
<p className="text-sm text-gray-500">{children}</p>
|
||||
);
|
||||
|
||||
function InputItem<T>({
|
||||
name,
|
||||
label,
|
||||
type,
|
||||
register,
|
||||
}: {
|
||||
name: Path<T>;
|
||||
label: string;
|
||||
type: "number";
|
||||
register: UseFormRegister<T>;
|
||||
}) {
|
||||
const numberStyle =
|
||||
"max-w-lg block w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:max-w-xs sm:text-sm border-gray-300 rounded-md";
|
||||
|
||||
return (
|
||||
<label className="block">
|
||||
<div className="text-sm font-medium text-gray-600 mb-1">{label}</div>
|
||||
<input type={type} {...register(name)} className={numberStyle} />
|
||||
</label>
|
||||
);
|
||||
}
|
||||
|
||||
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="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>
|
||||
);
|
||||
}
|
||||
|
||||
const SquigglePlayground: FC<PlaygroundProps> = ({
|
||||
initialSquiggleString = "",
|
||||
height = 500,
|
||||
showTypes = false,
|
||||
showControls = false,
|
||||
showSummary = false,
|
||||
}: PlaygroundProps) => {
|
||||
let [squiggleString, setSquiggleString] = useState(initialSquiggleString);
|
||||
let [importString, setImportString] = useState("{}");
|
||||
let [imports, setImports] = useState({});
|
||||
let [importsAreValid, setImportsAreValid] = useState(true);
|
||||
}) => {
|
||||
const [squiggleString, setSquiggleString] = useState(initialSquiggleString);
|
||||
const [importString, setImportString] = useState("{}");
|
||||
const [imports, setImports] = useState({});
|
||||
const [importsAreValid, setImportsAreValid] = useState(true);
|
||||
const { register, control } = useForm({
|
||||
resolver: yupResolver(schema),
|
||||
defaultValues: {
|
||||
|
|
@ -183,16 +223,16 @@ let SquigglePlayground: FC<PlaygroundProps> = ({
|
|||
const vars = useWatch({
|
||||
control,
|
||||
});
|
||||
let chartSettings = {
|
||||
const chartSettings = {
|
||||
start: Number(vars.diagramStart),
|
||||
stop: Number(vars.diagramStop),
|
||||
count: Number(vars.diagramCount),
|
||||
};
|
||||
let env: environment = {
|
||||
const env: environment = {
|
||||
sampleCount: Number(vars.sampleCount),
|
||||
xyPointLength: Number(vars.xyPointLength),
|
||||
};
|
||||
let getChangeJson = (r: string) => {
|
||||
const getChangeJson = (r: string) => {
|
||||
setImportString(r);
|
||||
try {
|
||||
setImports(JSON.parse(r));
|
||||
|
|
@ -202,149 +242,118 @@ let SquigglePlayground: FC<PlaygroundProps> = ({
|
|||
}
|
||||
};
|
||||
|
||||
let samplingSettings = (
|
||||
const samplingSettings = (
|
||||
<div className="space-y-6 p-3 max-w-xl">
|
||||
<InputItem label="Sample Count">
|
||||
<>
|
||||
<input
|
||||
<div>
|
||||
<InputItem
|
||||
name="sampleCount"
|
||||
type="number"
|
||||
{...register("sampleCount")}
|
||||
className={numberStyle}
|
||||
label="Sample Count"
|
||||
register={register}
|
||||
/>
|
||||
<p className="mt-2 text-sm text-gray-500">
|
||||
<div className="mt-2">
|
||||
<Text>
|
||||
How many samples to use for Monte Carlo simulations. This can
|
||||
occasionally be overridden by specific Squiggle programs.
|
||||
</p>
|
||||
</>
|
||||
</InputItem>
|
||||
<InputItem label="Coordinate Count (For PointSet Shapes)">
|
||||
<>
|
||||
<input
|
||||
</Text>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<InputItem
|
||||
name="xyPointLength"
|
||||
type="number"
|
||||
{...register("xyPointLength")}
|
||||
className={numberStyle}
|
||||
register={register}
|
||||
label="Coordinate Count (For PointSet Shapes)"
|
||||
/>
|
||||
<p className="mt-2 text-sm text-gray-500">
|
||||
<div className="mt-2">
|
||||
<Text>
|
||||
When distributions are converted into PointSet shapes, we need to
|
||||
know how many coordinates to use.
|
||||
</p>
|
||||
</>
|
||||
</InputItem>
|
||||
</Text>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
let viewSettings = (
|
||||
const viewSettings = (
|
||||
<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">
|
||||
<InputItem
|
||||
name="chartHeight"
|
||||
type="number"
|
||||
register={register}
|
||||
label="Chart Height (in pixels)"
|
||||
/>
|
||||
<Checkbox
|
||||
name="showTypes"
|
||||
register={register}
|
||||
label="Show information about displayed types"
|
||||
/>
|
||||
</div>
|
||||
</HeadedSection>
|
||||
|
||||
<div className="pt-8">
|
||||
<HeadedSection title="Distribution Display Settings">
|
||||
<div className="space-y-2">
|
||||
<h3 className="text-lg leading-6 font-medium text-gray-900 pb-2">
|
||||
General Display Settings
|
||||
</h3>
|
||||
<InputItem label="Chart Height (in pixels)">
|
||||
<input
|
||||
type="number"
|
||||
{...register("chartHeight")}
|
||||
className={numberStyle}
|
||||
<Checkbox
|
||||
register={register}
|
||||
name="showControls"
|
||||
label="Show toggles to adjust scale of x and y axes"
|
||||
/>
|
||||
</InputItem>
|
||||
<div className="relative flex items-start pt-3">
|
||||
<div className="flex items-center h-5">
|
||||
<input
|
||||
type="checkbox"
|
||||
{...register("showTypes")}
|
||||
className="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
|
||||
<Checkbox
|
||||
register={register}
|
||||
name="showSummary"
|
||||
label="Show summary statistics"
|
||||
/>
|
||||
</div>
|
||||
<div className="ml-3 text-sm">
|
||||
<label className="font-medium text-gray-700">
|
||||
Show information about displayed types.
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</HeadedSection>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2 pt-8">
|
||||
<h3 className="text-lg leading-6 font-medium text-gray-900 pb-2">
|
||||
Distribution Display Settings
|
||||
</h3>
|
||||
|
||||
<div className="relative flex items-start">
|
||||
<div className="flex items-center h-5">
|
||||
<input
|
||||
type="checkbox"
|
||||
{...register("showControls")}
|
||||
className="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
|
||||
/>
|
||||
</div>
|
||||
<div className="ml-3 text-sm">
|
||||
<label className="font-medium text-gray-700">
|
||||
Show toggles to adjust scale of x and y axes
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div className="relative flex items-start">
|
||||
<div className="flex items-center h-5">
|
||||
<input
|
||||
type="checkbox"
|
||||
{...register("showSummary")}
|
||||
className="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
|
||||
/>
|
||||
</div>
|
||||
<div className="ml-3 text-sm">
|
||||
<label className="font-medium text-gray-700">
|
||||
Show summary statistics
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2 pt-8">
|
||||
<h3 className="text-lg leading-6 font-medium text-gray-900 pb-2">
|
||||
Function Display Settings
|
||||
</h3>
|
||||
|
||||
<p className="mt-2 text-sm text-gray-500">
|
||||
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.
|
||||
</p>
|
||||
<div className="pt-4 grid grid-cols-1 gap-y-4 gap-x-4">
|
||||
<InputItem label="Min X Value">
|
||||
<input
|
||||
<div className="pt-8">
|
||||
<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.
|
||||
</Text>
|
||||
<div className="space-y-4">
|
||||
<InputItem
|
||||
type="number"
|
||||
{...register("diagramStart")}
|
||||
className={numberStyle}
|
||||
name="diagramStart"
|
||||
register={register}
|
||||
label="Min X Value"
|
||||
/>
|
||||
</InputItem>
|
||||
<InputItem label="Max X Value">
|
||||
<input
|
||||
<InputItem
|
||||
type="number"
|
||||
{...register("diagramStop")}
|
||||
className={numberStyle}
|
||||
name="diagramStop"
|
||||
register={register}
|
||||
label="Max X Value"
|
||||
/>
|
||||
</InputItem>
|
||||
<InputItem label="Points between X min and X max to sample">
|
||||
<input
|
||||
<InputItem
|
||||
type="number"
|
||||
{...register("diagramCount")}
|
||||
className={numberStyle}
|
||||
name="diagramCount"
|
||||
register={register}
|
||||
label="Points between X min and X max to sample"
|
||||
/>
|
||||
</InputItem>
|
||||
</div>
|
||||
</div>
|
||||
</HeadedSection>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
let inputVariableSettings = (
|
||||
<div className="space-y-6 p-3 max-w-3xl">
|
||||
<h3 className="text-lg leading-6 font-medium text-gray-900">
|
||||
Import Variables from JSON
|
||||
</h3>
|
||||
<p className="mt-2 text-sm text-gray-500">
|
||||
You can import variables from JSON into your Squiggle code. Variables
|
||||
are accessed with dollar signs. For example, "timeNow" would be accessed
|
||||
as "$timeNow".
|
||||
</p>
|
||||
const inputVariableSettings = (
|
||||
<div className="p-3 max-w-3xl">
|
||||
<HeadedSection title="Import Variables from JSON">
|
||||
<div className="space-y-6">
|
||||
<Text>
|
||||
You can import variables from JSON into your Squiggle code.
|
||||
Variables are accessed with dollar signs. For example, "timeNow"
|
||||
would be accessed as "$timeNow".
|
||||
</Text>
|
||||
<div className="border border-slate-200 mt-6 mb-2">
|
||||
<JsonEditor
|
||||
value={importString}
|
||||
|
|
@ -356,30 +365,29 @@ let SquigglePlayground: FC<PlaygroundProps> = ({
|
|||
</div>
|
||||
<div className="p-1 pt-2">
|
||||
{importsAreValid ? (
|
||||
<SuccessAlert heading="Valid Json">
|
||||
<></>
|
||||
</SuccessAlert>
|
||||
<SuccessAlert heading="Valid JSON" />
|
||||
) : (
|
||||
<ErrorAlert heading="Invalid JSON">
|
||||
You must use valid json in this editor.
|
||||
You must use valid JSON in this editor.
|
||||
</ErrorAlert>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</HeadedSection>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<Tab.Group>
|
||||
<div className=" flex-col flex">
|
||||
<div className="pb-4">
|
||||
<Tab.List className="p-0.5 rounded-md bg-slate-100 hover:bg-slate-200 inline-flex">
|
||||
<StyledTab name="Code" iconName="code" />
|
||||
<StyledTab name="Sampling Settings" iconName="cog" />
|
||||
<StyledTab name="View Settings" iconName="squareBar" />
|
||||
<StyledTab name="Input Variables" iconName="dollar" />
|
||||
<Tab.List className="flex w-fit p-0.5 rounded-md bg-slate-100 hover:bg-slate-200">
|
||||
<StyledTab name="Code" icon={CodeIcon} />
|
||||
<StyledTab name="Sampling Settings" icon={CogIcon} />
|
||||
<StyledTab name="View Settings" icon={ChartSquareBarIcon} />
|
||||
<StyledTab name="Input Variables" icon={CurrencyDollarIcon} />
|
||||
</Tab.List>
|
||||
</div>
|
||||
<div className="flex" style={{ height: height + "px" }}>
|
||||
<div className="flex" style={{ height }}>
|
||||
<div className="w-1/2">
|
||||
<Tab.Panels>
|
||||
<Tab.Panel>
|
||||
|
|
@ -400,7 +408,7 @@ let SquigglePlayground: FC<PlaygroundProps> = ({
|
|||
</div>
|
||||
|
||||
<div className="w-1/2 p-2 pl-4">
|
||||
<div style={{ maxHeight: height + "px" }}>
|
||||
<div style={{ maxHeight: height }}>
|
||||
<SquiggleChart
|
||||
squiggleString={squiggleString}
|
||||
environment={env}
|
||||
|
|
@ -415,13 +423,12 @@ let SquigglePlayground: FC<PlaygroundProps> = ({
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Tab.Group>
|
||||
);
|
||||
};
|
||||
export default SquigglePlayground;
|
||||
export function renderSquigglePlaygroundToDom(props: PlaygroundProps) {
|
||||
let parent = document.createElement("div");
|
||||
const parent = document.createElement("div");
|
||||
ReactDOM.render(<SquigglePlayground {...props} />, parent);
|
||||
return parent;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,9 +5,9 @@ export {
|
|||
renderSquiggleEditorToDom,
|
||||
renderSquigglePartialToDom,
|
||||
} from "./components/SquiggleEditor";
|
||||
import SquigglePlayground, {
|
||||
export {
|
||||
default as SquigglePlayground,
|
||||
renderSquigglePlaygroundToDom,
|
||||
} from "./components/SquigglePlayground";
|
||||
export { SquigglePlayground, renderSquigglePlaygroundToDom };
|
||||
|
||||
export { mergeBindings } from "@quri/squiggle-lang";
|
||||
|
|
|
|||
|
|
@ -1 +0,0 @@
|
|||
{"version":3,"file":"SquiggleChart.stories.js","sourceRoot":"","sources":["SquiggleChart.stories.tsx"],"names":[],"mappings":";;;AAAA,6BAA8B;AAC9B,iDAA+C;AAG/C,qBAAe;IACb,KAAK,EAAE,uBAAuB;IAC9B,SAAS,EAAE,6BAAa;CACzB,CAAA;AAED,IAAM,QAAQ,GAAG,UAAC,EAAgB;QAAf,cAAc,oBAAA;IAAM,OAAA,oBAAC,6BAAa,IAAC,cAAc,EAAE,cAAc,GAAI;AAAjD,CAAiD,CAAA;AAE3E,QAAA,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,eAAO,CAAC,IAAI,GAAG;IACb,cAAc,EAAE,cAAc;CAC/B,CAAC"}
|
||||
|
|
@ -1,24 +1,26 @@
|
|||
const path = require("path");
|
||||
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
|
||||
|
||||
module.exports = {
|
||||
mode: "production",
|
||||
devtool: "source-map",
|
||||
profile: true,
|
||||
entry: "./src/index.ts",
|
||||
entry: ["./src/index.ts", "./src/tailwind.css"],
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.tsx?$/,
|
||||
loader: "ts-loader",
|
||||
options: { projectReferences: true, transpileOnly: true },
|
||||
options: { projectReferences: true },
|
||||
exclude: /node_modules/,
|
||||
},
|
||||
{
|
||||
test: /\.css$/i,
|
||||
use: ["style-loader", "css-loader"],
|
||||
use: [MiniCssExtractPlugin.loader, "css-loader", "postcss-loader"],
|
||||
},
|
||||
],
|
||||
},
|
||||
plugins: [new MiniCssExtractPlugin()],
|
||||
resolve: {
|
||||
extensions: [".js", ".tsx", ".ts"],
|
||||
alias: {
|
||||
|
|
|
|||
|
|
@ -232,6 +232,7 @@ describe("Peggy parse", () => {
|
|||
})
|
||||
describe("unit", () => {
|
||||
testParse("1m", "{(::fromUnit_m 1)}")
|
||||
testParse("1M", "{(::fromUnit_M 1)}")
|
||||
testParse("1m+2cm", "{(::add (::fromUnit_m 1) (::fromUnit_cm 2))}")
|
||||
})
|
||||
})
|
||||
|
|
|
|||
|
|
@ -56,14 +56,14 @@
|
|||
"lodash": "^4.17.21",
|
||||
"moduleserve": "^0.9.1",
|
||||
"nyc": "^15.1.0",
|
||||
"peggy": "^2.0.0",
|
||||
"peggy": "^2.0.1",
|
||||
"reanalyze": "^2.22.0",
|
||||
"rescript-fast-check": "^1.1.1",
|
||||
"ts-jest": "^27.1.4",
|
||||
"ts-loader": "^9.3.0",
|
||||
"ts-node": "^10.8.0",
|
||||
"typescript": "^4.7.2",
|
||||
"webpack": "^5.72.1",
|
||||
"ts-node": "^10.8.1",
|
||||
"typescript": "^4.7.3",
|
||||
"webpack": "^5.73.0",
|
||||
"webpack-cli": "^4.9.2"
|
||||
},
|
||||
"source": "./src/js/index.ts",
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@ import {
|
|||
import { result, resultMap, Ok } from "./types";
|
||||
import {
|
||||
Constructors_mean,
|
||||
Constructors_stdev,
|
||||
Constructors_sample,
|
||||
Constructors_pdf,
|
||||
Constructors_cdf,
|
||||
|
|
@ -69,6 +70,10 @@ export class Distribution {
|
|||
return Constructors_mean({ env: this.env }, this.t);
|
||||
}
|
||||
|
||||
stdev(): result<number, distributionError> {
|
||||
return Constructors_stdev({ env: this.env }, this.t);
|
||||
}
|
||||
|
||||
sample(): result<number, distributionError> {
|
||||
return Constructors_sample({ env: this.env }, this.t);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -265,6 +265,8 @@ module Constructors = {
|
|||
module C = DistributionTypes.Constructors.UsingDists
|
||||
open OutputLocal
|
||||
let mean = (~env, dist) => C.mean(dist)->run(~env)->toFloatR
|
||||
let stdev = (~env, dist) => C.stdev(dist)->run(~env)->toFloatR
|
||||
let variance = (~env, dist) => C.variance(dist)->run(~env)->toFloatR
|
||||
let sample = (~env, dist) => C.sample(dist)->run(~env)->toFloatR
|
||||
let cdf = (~env, dist, f) => C.cdf(dist, f)->run(~env)->toFloatR
|
||||
let inv = (~env, dist, f) => C.inv(dist, f)->run(~env)->toFloatR
|
||||
|
|
|
|||
|
|
@ -49,6 +49,10 @@ module Constructors: {
|
|||
@genType
|
||||
let mean: (~env: env, genericDist) => result<float, error>
|
||||
@genType
|
||||
let stdev: (~env: env, genericDist) => result<float, error>
|
||||
@genType
|
||||
let variance: (~env: env, genericDist) => result<float, error>
|
||||
@genType
|
||||
let sample: (~env: env, genericDist) => result<float, error>
|
||||
@genType
|
||||
let cdf: (~env: env, genericDist, float) => result<float, error>
|
||||
|
|
|
|||
|
|
@ -30,9 +30,9 @@ module Error = {
|
|||
@genType
|
||||
let toString = (err: error): string =>
|
||||
switch err {
|
||||
| NotYetImplemented => "Function Not Yet Implemented"
|
||||
| NotYetImplemented => "Function not yet implemented"
|
||||
| Unreachable => "Unreachable"
|
||||
| DistributionVerticalShiftIsInvalid => "Distribution Vertical Shift is Invalid"
|
||||
| DistributionVerticalShiftIsInvalid => "Distribution vertical shift is invalid"
|
||||
| ArgumentError(s) => `Argument Error ${s}`
|
||||
| LogarithmOfDistributionError(s) => `Logarithm of input error: ${s}`
|
||||
| SampleSetError(TooFewSamples) => "Too Few Samples"
|
||||
|
|
@ -68,6 +68,11 @@ module DistributionOperation = {
|
|||
| #Mean
|
||||
| #Sample
|
||||
| #IntegralSum
|
||||
| #Mode
|
||||
| #Stdev
|
||||
| #Min
|
||||
| #Max
|
||||
| #Variance
|
||||
]
|
||||
|
||||
type toScaleFn = [
|
||||
|
|
@ -117,6 +122,11 @@ module DistributionOperation = {
|
|||
| ToFloat(#Cdf(r)) => `cdf(${E.Float.toFixed(r)})`
|
||||
| ToFloat(#Inv(r)) => `inv(${E.Float.toFixed(r)})`
|
||||
| ToFloat(#Mean) => `mean`
|
||||
| ToFloat(#Min) => `min`
|
||||
| ToFloat(#Max) => `max`
|
||||
| ToFloat(#Stdev) => `stdev`
|
||||
| ToFloat(#Variance) => `variance`
|
||||
| ToFloat(#Mode) => `mode`
|
||||
| ToFloat(#Pdf(r)) => `pdf(${E.Float.toFixed(r)})`
|
||||
| ToFloat(#Sample) => `sample`
|
||||
| ToFloat(#IntegralSum) => `integralSum`
|
||||
|
|
@ -151,6 +161,8 @@ module Constructors = {
|
|||
module UsingDists = {
|
||||
@genType
|
||||
let mean = (dist): t => FromDist(ToFloat(#Mean), dist)
|
||||
let stdev = (dist): t => FromDist(ToFloat(#Stdev), dist)
|
||||
let variance = (dist): t => FromDist(ToFloat(#Variance), dist)
|
||||
let sample = (dist): t => FromDist(ToFloat(#Sample), dist)
|
||||
let cdf = (dist, x): t => FromDist(ToFloat(#Cdf(x)), dist)
|
||||
let inv = (dist, x): t => FromDist(ToFloat(#Inv(x)), dist)
|
||||
|
|
|
|||
|
|
@ -108,7 +108,7 @@ let toFloatOperation = (
|
|||
) => {
|
||||
switch distToFloatOperation {
|
||||
| #IntegralSum => Ok(integralEndY(t))
|
||||
| (#Pdf(_) | #Cdf(_) | #Inv(_) | #Mean | #Sample) as op => {
|
||||
| (#Pdf(_) | #Cdf(_) | #Inv(_) | #Mean | #Sample | #Min | #Max) as op => {
|
||||
let trySymbolicSolution = switch (t: t) {
|
||||
| Symbolic(r) => SymbolicDist.T.operate(op, r)->E.R.toOption
|
||||
| _ => None
|
||||
|
|
@ -118,6 +118,8 @@ let toFloatOperation = (
|
|||
| (SampleSet(sampleSet), #Mean) => SampleSetDist.mean(sampleSet)->Some
|
||||
| (SampleSet(sampleSet), #Sample) => SampleSetDist.sample(sampleSet)->Some
|
||||
| (SampleSet(sampleSet), #Inv(r)) => SampleSetDist.percentile(sampleSet, r)->Some
|
||||
| (SampleSet(sampleSet), #Min) => SampleSetDist.min(sampleSet)->Some
|
||||
| (SampleSet(sampleSet), #Max) => SampleSetDist.max(sampleSet)->Some
|
||||
| _ => None
|
||||
}
|
||||
|
||||
|
|
@ -130,6 +132,16 @@ let toFloatOperation = (
|
|||
}
|
||||
}
|
||||
}
|
||||
| (#Stdev | #Variance | #Mode) as op =>
|
||||
switch t {
|
||||
| SampleSet(s) =>
|
||||
switch op {
|
||||
| #Stdev => SampleSetDist.stdev(s)->Ok
|
||||
| #Variance => SampleSetDist.variance(s)->Ok
|
||||
| #Mode => SampleSetDist.mode(s)->Ok
|
||||
}
|
||||
| _ => Error(DistributionTypes.NotYetImplemented)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -254,6 +254,8 @@ let operate = (distToFloatOp: Operation.distToFloatOperation, s): float =>
|
|||
| #Inv(f) => inv(f, s)
|
||||
| #Sample => sample(s)
|
||||
| #Mean => T.mean(s)
|
||||
| #Min => T.minX(s)
|
||||
| #Max => T.maxX(s)
|
||||
}
|
||||
|
||||
let toSparkline = (t: t, bucketCount): result<string, PointSetTypes.sparklineError> =>
|
||||
|
|
|
|||
|
|
@ -449,6 +449,8 @@ module T = {
|
|||
| #Cdf(f) => Ok(cdf(f, s))
|
||||
| #Pdf(f) => Ok(pdf(f, s))
|
||||
| #Inv(f) => Ok(inv(f, s))
|
||||
| #Min => Ok(min(s))
|
||||
| #Max => Ok(max(s))
|
||||
| #Sample => Ok(sample(s))
|
||||
| #Mean => mean(s)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -264,6 +264,9 @@ basicLiteral
|
|||
identifier 'identifier'
|
||||
= ([_a-z]+[_a-z0-9]i*) {return nodeIdentifier(text())}
|
||||
|
||||
unitIdentifier 'identifier'
|
||||
= ([_a-zA-Z]+[_a-z0-9]i*) {return nodeIdentifier(text())}
|
||||
|
||||
dollarIdentifier '$identifier'
|
||||
= ([\$_a-z]+[\$_a-z0-9]i*) {return nodeIdentifier(text())}
|
||||
|
||||
|
|
@ -271,7 +274,7 @@ string 'string'
|
|||
= characters:("'" @([^'])* "'") {return nodeString(characters.join(''))}
|
||||
/ characters:('"' @([^"])* '"') {return nodeString(characters.join(''))}
|
||||
|
||||
number = number:(float / integer) unit:identifier?
|
||||
number = number:(float / integer) unit:unitIdentifier?
|
||||
{
|
||||
if (unit === null)
|
||||
{ return number }
|
||||
|
|
|
|||
|
|
@ -0,0 +1,27 @@
|
|||
module EV = ReducerInterface_ExpressionValue
|
||||
type expressionValue = EV.expressionValue
|
||||
|
||||
let dispatch = (call: EV.functionCall, _: DistributionOperation.env): option<
|
||||
result<expressionValue, QuriSquiggleLang.Reducer_ErrorValue.errorValue>,
|
||||
> => {
|
||||
switch call {
|
||||
| ("toString", [EvDate(t)]) => EV.EvString(DateTime.Date.toString(t))->Ok->Some
|
||||
| ("makeDateFromYear", [EvNumber(year)]) =>
|
||||
switch DateTime.Date.makeFromYear(year) {
|
||||
| Ok(t) => EV.EvDate(t)->Ok->Some
|
||||
| Error(e) => Reducer_ErrorValue.RETodo(e)->Error->Some
|
||||
}
|
||||
| ("dateFromNumber", [EvNumber(f)]) => EV.EvDate(DateTime.Date.fromFloat(f))->Ok->Some
|
||||
| ("toNumber", [EvDate(f)]) => EV.EvNumber(DateTime.Date.toFloat(f))->Ok->Some
|
||||
| ("subtract", [EvDate(d1), EvDate(d2)]) =>
|
||||
switch DateTime.Date.subtract(d1, d2) {
|
||||
| Ok(d) => EV.EvTimeDuration(d)->Ok
|
||||
| Error(e) => Error(RETodo(e))
|
||||
}->Some
|
||||
| ("subtract", [EvDate(d1), EvTimeDuration(d2)]) =>
|
||||
EV.EvDate(DateTime.Date.subtractDuration(d1, d2))->Ok->Some
|
||||
| ("add", [EvDate(d1), EvTimeDuration(d2)]) =>
|
||||
EV.EvDate(DateTime.Date.addDuration(d1, d2))->Ok->Some
|
||||
| _ => None
|
||||
}
|
||||
}
|
||||
|
|
@ -1,32 +1,7 @@
|
|||
module EV = ReducerInterface_ExpressionValue
|
||||
type expressionValue = EV.expressionValue
|
||||
|
||||
let dateDispatch = (call: EV.functionCall, _: DistributionOperation.env): option<
|
||||
result<expressionValue, QuriSquiggleLang.Reducer_ErrorValue.errorValue>,
|
||||
> => {
|
||||
switch call {
|
||||
| ("toString", [EvDate(t)]) => EV.EvString(DateTime.Date.toString(t))->Ok->Some
|
||||
| ("makeDateFromYear", [EvNumber(year)]) =>
|
||||
switch DateTime.Date.makeFromYear(year) {
|
||||
| Ok(t) => EV.EvDate(t)->Ok->Some
|
||||
| Error(e) => Reducer_ErrorValue.RETodo(e)->Error->Some
|
||||
}
|
||||
| ("dateFromNumber", [EvNumber(f)]) => EV.EvDate(DateTime.Date.fromFloat(f))->Ok->Some
|
||||
| ("toNumber", [EvDate(f)]) => EV.EvNumber(DateTime.Date.toFloat(f))->Ok->Some
|
||||
| ("subtract", [EvDate(d1), EvDate(d2)]) =>
|
||||
switch DateTime.Date.subtract(d1, d2) {
|
||||
| Ok(d) => EV.EvTimeDuration(d)->Ok
|
||||
| Error(e) => Error(RETodo(e))
|
||||
}->Some
|
||||
| ("subtract", [EvDate(d1), EvTimeDuration(d2)]) =>
|
||||
EV.EvDate(DateTime.Date.subtractDuration(d1, d2))->Ok->Some
|
||||
| ("add", [EvDate(d1), EvTimeDuration(d2)]) =>
|
||||
EV.EvDate(DateTime.Date.addDuration(d1, d2))->Ok->Some
|
||||
| _ => None
|
||||
}
|
||||
}
|
||||
|
||||
let durationDispatch = (call: EV.functionCall, _: DistributionOperation.env): option<
|
||||
let dispatch = (call: EV.functionCall, _: DistributionOperation.env): option<
|
||||
result<expressionValue, QuriSquiggleLang.Reducer_ErrorValue.errorValue>,
|
||||
> => {
|
||||
switch call {
|
||||
|
|
@ -55,16 +30,3 @@ let durationDispatch = (call: EV.functionCall, _: DistributionOperation.env): op
|
|||
| _ => None
|
||||
}
|
||||
}
|
||||
|
||||
let dispatch = (call: EV.functionCall, env: DistributionOperation.env): option<
|
||||
result<expressionValue, QuriSquiggleLang.Reducer_ErrorValue.errorValue>,
|
||||
> => {
|
||||
switch dateDispatch(call, env) {
|
||||
| Some(r) => Some(r)
|
||||
| None =>
|
||||
switch durationDispatch(call, env) {
|
||||
| Some(r) => Some(r)
|
||||
| None => None
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -14,14 +14,26 @@ type expressionValue = ExpressionValue.expressionValue
|
|||
Map external calls of Reducer
|
||||
*/
|
||||
|
||||
// I expect that it's important to build this first, so it doesn't get recalculated for each tryRegistry() call.
|
||||
let registry = FunctionRegistry_Library.registry
|
||||
|
||||
let tryRegistry = ((fnName, args): ExpressionValue.functionCall, env) => {
|
||||
FunctionRegistry_Core.Registry.matchAndRun(~registry, ~fnName, ~args, ~env)->E.O2.fmap(
|
||||
E.R2.errMap(_, s => Reducer_ErrorValue.RETodo(s)),
|
||||
)
|
||||
}
|
||||
|
||||
let dispatch = (call: ExpressionValue.functionCall, environment, chain): result<
|
||||
expressionValue,
|
||||
'e,
|
||||
> =>
|
||||
switch ReducerInterface_GenericDistribution.dispatch(call, environment) {
|
||||
| Some(r) => r
|
||||
| None =>
|
||||
ReducerInterface_DateTime.dispatch(call, environment) |> E.O.default(chain(call, environment))
|
||||
> => {
|
||||
E.A.O.firstSomeFn([
|
||||
() => ReducerInterface_GenericDistribution.dispatch(call, environment),
|
||||
() => ReducerInterface_Date.dispatch(call, environment),
|
||||
() => ReducerInterface_Duration.dispatch(call, environment),
|
||||
() => ReducerInterface_Number.dispatch(call, environment),
|
||||
() => tryRegistry(call, environment),
|
||||
])->E.O2.default(chain(call, environment))
|
||||
}
|
||||
/*
|
||||
If your dispatch is too big you can divide it into smaller dispatches and pass the call so that it gets called finally.
|
||||
|
|
|
|||
|
|
@ -209,7 +209,18 @@ let dispatchToGenericOutput = (
|
|||
| ("sample", [EvDistribution(dist)]) => Helpers.toFloatFn(#Sample, dist, ~env)
|
||||
| ("sampleN", [EvDistribution(dist), EvNumber(n)]) =>
|
||||
Some(FloatArray(GenericDist.sampleN(dist, Belt.Int.fromFloat(n))))
|
||||
| ("mean", [EvDistribution(dist)]) => Helpers.toFloatFn(#Mean, dist, ~env)
|
||||
| (("mean" | "stdev" | "variance" | "min" | "max" | "mode") as op, [EvDistribution(dist)]) => {
|
||||
let fn = switch op {
|
||||
| "mean" => #Mean
|
||||
| "stdev" => #Stdev
|
||||
| "variance" => #Variance
|
||||
| "min" => #Min
|
||||
| "max" => #Max
|
||||
| "mode" => #Mode
|
||||
| _ => #Mean
|
||||
}
|
||||
Helpers.toFloatFn(fn, dist, ~env)
|
||||
}
|
||||
| ("integralSum", [EvDistribution(dist)]) => Helpers.toFloatFn(#IntegralSum, dist, ~env)
|
||||
| ("toString", [EvDistribution(dist)]) => Helpers.toStringFn(ToString, dist, ~env)
|
||||
| ("toSparkline", [EvDistribution(dist)]) =>
|
||||
|
|
@ -350,20 +361,5 @@ let genericOutputToReducerValue = (o: DistributionOperation.outputType): result<
|
|||
| GenDistError(err) => Error(REDistributionError(err))
|
||||
}
|
||||
|
||||
// I expect that it's important to build this first, so it doesn't get recalculated for each tryRegistry() call.
|
||||
let registry = FunctionRegistry_Library.registry
|
||||
|
||||
let tryRegistry = ((fnName, args): ExpressionValue.functionCall, env) => {
|
||||
FunctionRegistry_Core.Registry.matchAndRun(~registry, ~fnName, ~args, ~env)->E.O2.fmap(
|
||||
E.R2.errMap(_, s => Reducer_ErrorValue.RETodo(s)),
|
||||
)
|
||||
}
|
||||
|
||||
let dispatch = (call: ExpressionValue.functionCall, environment) => {
|
||||
let regularDispatch =
|
||||
let dispatch = (call: ExpressionValue.functionCall, environment) =>
|
||||
dispatchToGenericOutput(call, environment)->E.O2.fmap(genericOutputToReducerValue)
|
||||
switch regularDispatch {
|
||||
| Some(x) => Some(x)
|
||||
| None => tryRegistry(call, environment)
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,45 @@
|
|||
module EV = ReducerInterface_ExpressionValue
|
||||
type expressionValue = EV.expressionValue
|
||||
|
||||
module ScientificUnit = {
|
||||
let nameToMultiplier = str =>
|
||||
switch str {
|
||||
| "n" => Some(1E-9)
|
||||
| "m" => Some(1E-3)
|
||||
| "k" => Some(1E3)
|
||||
| "M" => Some(1E6)
|
||||
| "B" => Some(1E9)
|
||||
| "G" => Some(1E9)
|
||||
| "T" => Some(1E12)
|
||||
| "P" => Some(1E15)
|
||||
| _ => None
|
||||
}
|
||||
|
||||
let getMultiplier = (r: string) => {
|
||||
let match = Js.String2.match_(r, %re(`/fromUnit_([_a-zA-Z]*)/`))
|
||||
switch match {
|
||||
| Some([_, unit]) => nameToMultiplier(unit)
|
||||
| _ => None
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
let dispatch = (call: EV.functionCall, _: DistributionOperation.env): option<
|
||||
result<expressionValue, QuriSquiggleLang.Reducer_ErrorValue.errorValue>,
|
||||
> => {
|
||||
switch call {
|
||||
| (
|
||||
("fromUnit_n"
|
||||
| "fromUnit_m"
|
||||
| "fromUnit_k"
|
||||
| "fromUnit_M"
|
||||
| "fromUnit_B"
|
||||
| "fromUnit_G"
|
||||
| "fromUnit_T"
|
||||
| "fromUnit_P") as op,
|
||||
[EvNumber(f)],
|
||||
) =>
|
||||
op->ScientificUnit.getMultiplier->E.O2.fmap(multiplier => EV.EvNumber(f *. multiplier)->Ok)
|
||||
| _ => None
|
||||
}
|
||||
}
|
||||
|
|
@ -26,6 +26,8 @@ type distToFloatOperation = [
|
|||
| #Inv(float)
|
||||
| #Mean
|
||||
| #Sample
|
||||
| #Min
|
||||
| #Max
|
||||
]
|
||||
|
||||
module Convolution = {
|
||||
|
|
|
|||
|
|
@ -19,27 +19,7 @@ const config = {
|
|||
organizationName: "quantified-uncertainty", // Usually your GitHub org/user name.
|
||||
projectName: "squiggle", // Usually your repo name.
|
||||
|
||||
plugins: [
|
||||
"docusaurus-tailwindcss",
|
||||
() => ({
|
||||
configureWebpack(config, isServer, utils, content) {
|
||||
return {
|
||||
resolve: {
|
||||
alias: {
|
||||
"@quri/squiggle-components": path.resolve(
|
||||
__dirname,
|
||||
"../components/src"
|
||||
),
|
||||
"@quri/squiggle-lang": path.resolve(
|
||||
__dirname,
|
||||
"../squiggle-lang/src/js"
|
||||
),
|
||||
},
|
||||
},
|
||||
};
|
||||
},
|
||||
}),
|
||||
],
|
||||
plugins: [],
|
||||
|
||||
presets: [
|
||||
[
|
||||
|
|
@ -61,7 +41,10 @@ const config = {
|
|||
"https://github.com/quantified-uncertainty/squiggle/tree/develop/packages/website/",
|
||||
},
|
||||
theme: {
|
||||
customCss: require.resolve("./src/css/custom.css"),
|
||||
customCss: [
|
||||
require.resolve("./src/css/custom.css"),
|
||||
require.resolve("@quri/squiggle-components/dist/main.css"),
|
||||
],
|
||||
},
|
||||
}),
|
||||
],
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
[build]
|
||||
base = "packages/website/"
|
||||
command = "cd ../squiggle-lang && yarn build && cd ../website && yarn build"
|
||||
command = "cd ../squiggle-lang && yarn build && cd ../components && yarn build && cd ../website && yarn build"
|
||||
publish = "build/"
|
||||
ignore = "node -e 'process.exitCode = process.env.BRANCH.includes(\"dependabot\") ? 0 : 1' && git diff --quiet $CACHED_COMMIT_REF $COMMIT_REF ../"
|
||||
|
||||
|
|
|
|||
|
|
@ -4,10 +4,6 @@
|
|||
* work well for content-centric websites.
|
||||
*/
|
||||
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
/* You can override the default Infima variables here. */
|
||||
:root {
|
||||
--ifm-color-primary: #2488df;
|
||||
|
|
|
|||
7
packages/website/tailwind.config.js
Normal file
7
packages/website/tailwind.config.js
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
module.exports = {
|
||||
content: ["./src/**/*.{html,tsx,ts,js,jsx}"],
|
||||
theme: {
|
||||
extend: {},
|
||||
},
|
||||
plugins: [require("@tailwindcss/forms")],
|
||||
};
|
||||
1
packages/website/webpack.config.js
Normal file
1
packages/website/webpack.config.js
Normal file
|
|
@ -0,0 +1 @@
|
|||
module.exports = {};
|
||||
Loading…
Reference in New Issue
Block a user