Merge pull request #457 from quantified-uncertainty/no-types-mode

A simple showTypes prop
This commit is contained in:
Sam Nolan 2022-05-02 13:07:46 -04:00 committed by GitHub
commit 0c4305948f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 60 additions and 26 deletions

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} width={width - 20} height={50} />
))}
@ -111,7 +139,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>
@ -120,12 +148,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>
);
}
};
@ -153,6 +175,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`
@ -170,6 +194,7 @@ export const SquiggleChart: React.FC<SquiggleChartProps> = ({
bindings = defaultBindings,
jsImports = defaultImports,
width = NaN,
showTypes = false,
}: SquiggleChartProps) => {
let samplingInputs: samplingParams = {
sampleCount: sampleCount,
@ -186,7 +211,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>
);