Merge pull request #457 from quantified-uncertainty/no-types-mode
A simple showTypes prop
This commit is contained in:
commit
0c4305948f
|
@ -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 = (
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
|
|
Loading…
Reference in New Issue
Block a user