Merge branch 'develop' into mobile-support

This commit is contained in:
Sam Nolan 2022-05-02 17:09:23 +00:00
commit 8df5a661fb
6 changed files with 71 additions and 38 deletions

View File

@ -31,7 +31,7 @@
"@testing-library/user-event": "^14.1.1",
"@types/jest": "^27.4.0",
"@types/lodash": "^4.14.182",
"@types/node": "^17.0.29",
"@types/node": "^17.0.31",
"@types/react": "^18.0.3",
"@types/react-dom": "^18.0.2",
"@types/styled-components": "^5.1.24",
@ -39,7 +39,7 @@
"cross-env": "^7.0.3",
"react-scripts": "^5.0.1",
"style-loader": "^3.3.1",
"ts-loader": "^9.2.9",
"ts-loader": "^9.3.0",
"tsconfig-paths-webpack-plugin": "^3.5.2",
"typescript": "^4.6.3",
"web-vitals": "^2.1.4",

File diff suppressed because one or more lines are too long

View File

@ -33,18 +33,29 @@ const variableBox = {
`,
};
export const VariableBox: React.FC<{
interface VariableBoxProps {
heading: string;
children: React.ReactNode;
}> = ({ heading = "Error", children }) => {
return (
<variableBox.Component>
<variableBox.Heading>
<h3>{heading}</h3>
</variableBox.Heading>
<variableBox.Body>{children}</variableBox.Body>
</variableBox.Component>
);
showTypes?: boolean;
}
export const VariableBox: React.FC<VariableBoxProps> = ({
heading = "Error",
children,
showTypes = false,
}: VariableBoxProps) => {
if (showTypes) {
return (
<variableBox.Component>
<variableBox.Heading>
<h3>{heading}</h3>
</variableBox.Heading>
<variableBox.Body>{children}</variableBox.Body>
</variableBox.Component>
);
} else {
return <>{children}</>;
}
};
let RecordKeyHeader = styled.h3``;
@ -54,25 +65,31 @@ export interface SquiggleItemProps {
expression: squiggleExpression;
width?: number;
height: number;
/** Whether to show type information */
showTypes?: boolean;
}
const SquiggleItem: React.FC<SquiggleItemProps> = ({
expression,
width,
height,
showTypes = false,
}: SquiggleItemProps) => {
switch (expression.tag) {
case "number":
return (
<VariableBox heading="Number">
<VariableBox heading="Number" showTypes={showTypes}>
<NumberShower precision={3} number={expression.value} />
</VariableBox>
);
case "distribution": {
let distType = expression.value.type();
return (
<VariableBox heading={`Distribution (${distType})`}>
{distType === "Symbolic" ? (
<VariableBox
heading={`Distribution (${distType})`}
showTypes={showTypes}
>
{distType === "Symbolic" && showTypes ? (
<>
<div>{expression.value.toString()}</div>
</>
@ -89,21 +106,32 @@ const SquiggleItem: React.FC<SquiggleItemProps> = ({
}
case "string":
return (
<VariableBox heading="String">{`"${expression.value}"`}</VariableBox>
<VariableBox
heading="String"
showTypes={showTypes}
>{`"${expression.value}"`}</VariableBox>
);
case "boolean":
return (
<VariableBox heading="Boolean">
<VariableBox heading="Boolean" showTypes={showTypes}>
{expression.value.toString()}
</VariableBox>
);
case "symbol":
return <VariableBox heading="Symbol">{expression.value}</VariableBox>;
return (
<VariableBox heading="Symbol" showTypes={showTypes}>
{expression.value}
</VariableBox>
);
case "call":
return <VariableBox heading="Call">{expression.value}</VariableBox>;
return (
<VariableBox heading="Call" showTypes={showTypes}>
{expression.value}
</VariableBox>
);
case "array":
return (
<VariableBox heading="Array">
<VariableBox heading="Array" showTypes={showTypes}>
{expression.value.map((r) => (
<SquiggleItem
expression={r}
@ -115,7 +143,7 @@ const SquiggleItem: React.FC<SquiggleItemProps> = ({
);
case "record":
return (
<VariableBox heading="Record">
<VariableBox heading="Record" showTypes={showTypes}>
{Object.entries(expression.value).map(([key, r]) => (
<>
<RecordKeyHeader>{key}</RecordKeyHeader>
@ -128,12 +156,6 @@ const SquiggleItem: React.FC<SquiggleItemProps> = ({
))}
</VariableBox>
);
default:
return (
<ErrorBox heading="No Viewer">
{"We don't currently have a working viewer for record types."}
</ErrorBox>
);
}
};
@ -161,6 +183,8 @@ export interface SquiggleChartProps {
bindings?: bindings;
/** JS imported parameters */
jsImports?: jsImports;
/** Whether to show type information about returns, default false */
showTypes?: boolean;
}
const ChartWrapper = styled.div`
@ -178,6 +202,7 @@ export const SquiggleChart: React.FC<SquiggleChartProps> = ({
bindings = defaultBindings,
jsImports = defaultImports,
width,
showTypes = false,
}: SquiggleChartProps) => {
let samplingInputs: samplingParams = {
sampleCount: sampleCount,
@ -194,7 +219,12 @@ export const SquiggleChart: React.FC<SquiggleChartProps> = ({
let expression = expressionResult.value;
onChange(expression);
internal = (
<SquiggleItem expression={expression} width={width} height={height} />
<SquiggleItem
expression={expression}
width={width}
height={height}
showTypes={showTypes}
/>
);
} else {
internal = (

View File

@ -40,6 +40,8 @@ export interface SquiggleEditorProps {
bindings?: bindings;
/** JS Imports */
jsImports?: jsImports;
/** Whether to show detail about types of the returns, default false */
showTypes?: boolean;
}
const Input = styled.div`
@ -61,6 +63,7 @@ export let SquiggleEditor: React.FC<SquiggleEditorProps> = ({
onChange,
bindings = defaultBindings,
jsImports = defaultImports,
showTypes = false,
}: SquiggleEditorProps) => {
let [expression, setExpression] = React.useState(initialSquiggleString);
return (
@ -87,6 +90,7 @@ export let SquiggleEditor: React.FC<SquiggleEditorProps> = ({
onChange={onChange}
bindings={bindings}
jsImports={jsImports}
showTypes={showTypes}
/>
</div>
);

View File

@ -55,7 +55,7 @@
"nyc": "^15.1.0",
"reanalyze": "^2.19.0",
"ts-jest": "^27.1.4",
"ts-loader": "^9.2.8",
"ts-loader": "^9.3.0",
"ts-node": "^10.7.0",
"typescript": "^4.6.3",
"webpack": "^5.72.0",

View File

@ -4075,10 +4075,10 @@
"@types/node" "*"
form-data "^3.0.0"
"@types/node@*", "@types/node@^17.0.29", "@types/node@^17.0.5":
version "17.0.30"
resolved "https://registry.yarnpkg.com/@types/node/-/node-17.0.30.tgz#2c6e8512acac70815e8176aa30c38025067880ef"
integrity sha512-oNBIZjIqyHYP8VCNAV9uEytXVeXG2oR0w9lgAXro20eugRQfY002qr3CUl6BAe+Yf/z3CRjPdz27Pu6WWtuSRw==
"@types/node@*", "@types/node@^17.0.31", "@types/node@^17.0.5":
version "17.0.31"
resolved "https://registry.yarnpkg.com/@types/node/-/node-17.0.31.tgz#a5bb84ecfa27eec5e1c802c6bbf8139bdb163a5d"
integrity sha512-AR0x5HbXGqkEx9CadRH3EBYx/VkiUgZIhP4wvPn/+5KIsgpNoyFaRlVe0Zlx9gRtg8fA06a9tskE2MSN7TcG4Q==
"@types/node@^14.0.10":
version "14.18.16"
@ -16946,10 +16946,10 @@ ts-jest@^27.1.4:
semver "7.x"
yargs-parser "20.x"
ts-loader@^9.2.8, ts-loader@^9.2.9:
version "9.2.9"
resolved "https://registry.yarnpkg.com/ts-loader/-/ts-loader-9.2.9.tgz#0653e07fa1b4f225d0ca57a84fddbfd43d930f9e"
integrity sha512-b0+vUY2/enb0qYtDQuNlDnJ9900NTiPiJcDJ6sY7ax1CCCwXfYIqPOMm/BwW7jsF1km+Oz8W9s31HLuD+FLIMg==
ts-loader@^9.3.0:
version "9.3.0"
resolved "https://registry.yarnpkg.com/ts-loader/-/ts-loader-9.3.0.tgz#980f4dbfb60e517179e15e10ed98e454b132159f"
integrity sha512-2kLLAdAD+FCKijvGKi9sS0OzoqxLCF3CxHpok7rVgCZ5UldRzH0TkbwG9XECKjBzHsAewntC5oDaI/FwKzEUog==
dependencies:
chalk "^4.1.0"
enhanced-resolve "^5.0.0"