A simple showTypes prop

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 (
-    <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 = (

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<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>
   );