diff --git a/packages/components/src/components/SquiggleChart.tsx b/packages/components/src/components/SquiggleChart.tsx index 699a7e28..4297f032 100644 --- a/packages/components/src/components/SquiggleChart.tsx +++ b/packages/components/src/components/SquiggleChart.tsx @@ -33,18 +33,29 @@ const variableBox = { `, }; -export const VariableBox: React.FC<{ +interface VariableBoxProps { heading: string; children: React.ReactNode; -}> = ({ heading = "Error", children }) => { - return ( - - -

{heading}

-
- {children} -
- ); + showTypes?: boolean; +} + +export const VariableBox: React.FC = ({ + heading = "Error", + children, + showTypes = false, +}: VariableBoxProps) => { + if (showTypes) { + return ( + + +

{heading}

+
+ {children} +
+ ); + } 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 = ({ expression, width, height, + showTypes = false, }: SquiggleItemProps) => { switch (expression.tag) { case "number": return ( - + ); case "distribution": { let distType = expression.value.type(); return ( - - {distType === "Symbolic" ? ( + + {distType === "Symbolic" && showTypes ? ( <>
{expression.value.toString()}
@@ -89,21 +106,32 @@ const SquiggleItem: React.FC = ({ } case "string": return ( - {`"${expression.value}"`} + {`"${expression.value}"`} ); case "boolean": return ( - + {expression.value.toString()} ); case "symbol": - return {expression.value}; + return ( + + {expression.value} + + ); case "call": - return {expression.value}; + return ( + + {expression.value} + + ); case "array": return ( - + {expression.value.map((r) => ( ))} @@ -111,7 +139,7 @@ const SquiggleItem: React.FC = ({ ); case "record": return ( - + {Object.entries(expression.value).map(([key, r]) => ( <> {key} @@ -120,12 +148,6 @@ const SquiggleItem: React.FC = ({ ))} ); - default: - return ( - - {"We don't currently have a working viewer for record types."} - - ); } }; @@ -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 = ({ bindings = defaultBindings, jsImports = defaultImports, width = NaN, + showTypes = false, }: SquiggleChartProps) => { let samplingInputs: samplingParams = { sampleCount: sampleCount, @@ -186,7 +211,12 @@ export const SquiggleChart: React.FC = ({ let expression = expressionResult.value; onChange(expression); internal = ( - + ); } else { internal = ( diff --git a/packages/components/src/components/SquiggleEditor.tsx b/packages/components/src/components/SquiggleEditor.tsx index 23686a4f..2b546574 100644 --- a/packages/components/src/components/SquiggleEditor.tsx +++ b/packages/components/src/components/SquiggleEditor.tsx @@ -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 = ({ onChange, bindings = defaultBindings, jsImports = defaultImports, + showTypes = false, }: SquiggleEditorProps) => { let [expression, setExpression] = React.useState(initialSquiggleString); return ( @@ -87,6 +90,7 @@ export let SquiggleEditor: React.FC = ({ onChange={onChange} bindings={bindings} jsImports={jsImports} + showTypes={showTypes} /> );