Merge branch 'develop' into mobile-support

packages/components/package.json

@@ -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",

packages/components/src/components/SquiggleChart.tsx

@@ -33,10 +33,18 @@ const variableBox = {
   `,
 };
 
-export const VariableBox: React.FC<{
+interface VariableBoxProps {
   heading: string;
   children: React.ReactNode;
-}> = ({ heading = "Error", children }) => {
+  showTypes?: boolean;
+}
+
+export const VariableBox: React.FC<VariableBoxProps> = ({
+  heading = "Error",
+  children,
+  showTypes = false,
+}: VariableBoxProps) => {
+  if (showTypes) {
     return (
       <variableBox.Component>
         <variableBox.Heading>
@@ -45,6 +53,9 @@ export const VariableBox: React.FC<{
         <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})`}>
+        <VariableBox
-          {distType === "Symbolic" ? (
+          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 = (

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

packages/squiggle-lang/package.json

@@ -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",

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":
+"@types/node@*", "@types/node@^17.0.31", "@types/node@^17.0.5":
-  version "17.0.30"
+  version "17.0.31"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-17.0.30.tgz#2c6e8512acac70815e8176aa30c38025067880ef"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-17.0.31.tgz#a5bb84ecfa27eec5e1c802c6bbf8139bdb163a5d"
-  integrity sha512-oNBIZjIqyHYP8VCNAV9uEytXVeXG2oR0w9lgAXro20eugRQfY002qr3CUl6BAe+Yf/z3CRjPdz27Pu6WWtuSRw==
+  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:
+ts-loader@^9.3.0:
-  version "9.2.9"
+  version "9.3.0"
-  resolved "https://registry.yarnpkg.com/ts-loader/-/ts-loader-9.2.9.tgz#0653e07fa1b4f225d0ca57a84fddbfd43d930f9e"
+  resolved "https://registry.yarnpkg.com/ts-loader/-/ts-loader-9.3.0.tgz#980f4dbfb60e517179e15e10ed98e454b132159f"
-  integrity sha512-b0+vUY2/enb0qYtDQuNlDnJ9900NTiPiJcDJ6sY7ax1CCCwXfYIqPOMm/BwW7jsF1km+Oz8W9s31HLuD+FLIMg==
+  integrity sha512-2kLLAdAD+FCKijvGKi9sS0OzoqxLCF3CxHpok7rVgCZ5UldRzH0TkbwG9XECKjBzHsAewntC5oDaI/FwKzEUog==
   dependencies:
     chalk "^4.1.0"
     enhanced-resolve "^5.0.0"