Merge branch 'develop' into mobile-support
This commit is contained in:
commit
8df5a661fb
|
@ -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
|
@ -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 = (
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
|
|
|
@ -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",
|
||||
|
|
16
yarn.lock
16
yarn.lock
|
@ -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"
|
||||
|
|
Loading…
Reference in New Issue
Block a user