Merge remote-tracking branch 'origin/develop' into score-dist-on-scalar-resolution

packages/components/src/components/FunctionChart.tsx

@@ -76,28 +76,32 @@ export const FunctionChart: React.FC<FunctionChartProps> = ({
     chartSettings.count
   );
   type point = { x: number; value: result<Distribution, string> };
-  let valueData: point[] = data1.map((x) => {
-    let result = runForeign(fn, [x], environment);
-    if (result.tag === "Ok") {
-      if (result.value.tag == "distribution") {
-        return { x, value: { tag: "Ok", value: result.value.value } };
-      } else {
-        return {
-          x,
-          value: {
-            tag: "Error",
-            value:
-              "Cannot currently render functions that don't return distributions",
-          },
-        };
-      }
-    } else {
-      return {
-        x,
-        value: { tag: "Error", value: errorValueToString(result.value) },
-      };
-    }
-  });
+  let valueData: point[] = React.useMemo(
+    () =>
+      data1.map((x) => {
+        let result = runForeign(fn, [x], environment);
+        if (result.tag === "Ok") {
+          if (result.value.tag == "distribution") {
+            return { x, value: { tag: "Ok", value: result.value.value } };
+          } else {
+            return {
+              x,
+              value: {
+                tag: "Error",
+                value:
+                  "Cannot currently render functions that don't return distributions",
+              },
+            };
+          }
+        } else {
+          return {
+            x,
+            value: { tag: "Error", value: errorValueToString(result.value) },
+          };
+        }
+      }),
+    [environment, fn]
+  );
 
   let initialPartition: [
     { x: number; value: Distribution }[],
@@ -141,10 +145,10 @@ export const FunctionChart: React.FC<FunctionChartProps> = ({
       />
       {showChart}
       {_.entries(groupedErrors).map(([errorName, errorPoints]) => (
-        <ErrorBox heading={errorName}>
+        <ErrorBox key={errorName} heading={errorName}>
           Values:{" "}
           {errorPoints
-            .map((r) => <NumberShower number={r.x} />)
+            .map((r, i) => <NumberShower key={i} number={r.x} />)
             .reduce((a, b) => (
               <>
                 {a}, {b}

packages/components/src/components/SquiggleChart.tsx

@@ -148,8 +148,9 @@ const SquiggleItem: React.FC<SquiggleItemProps> = ({
     case "array":
       return (
         <VariableBox heading="Array" showTypes={showTypes}>
-          {expression.value.map((r) => (
+          {expression.value.map((r, i) => (
             <SquiggleItem
+              key={i}
               expression={r}
               width={width !== undefined ? width - 20 : width}
               height={50}
@@ -166,7 +167,7 @@ const SquiggleItem: React.FC<SquiggleItemProps> = ({
       return (
         <VariableBox heading="Record" showTypes={showTypes}>
           {Object.entries(expression.value).map(([key, r]) => (
-            <>
+            <div key={key}>
               <RecordKeyHeader>{key}</RecordKeyHeader>
               <SquiggleItem
                 expression={r}
@@ -178,14 +179,14 @@ const SquiggleItem: React.FC<SquiggleItemProps> = ({
                 chartSettings={chartSettings}
                 environment={environment}
               />
-            </>
+            </div>
           ))}
         </VariableBox>
       );
     case "arraystring":
       return (
         <VariableBox heading="Array String" showTypes={showTypes}>
-          {expression.value.map((r) => `"${r}"`)}
+          {expression.value.map((r) => `"${r}"`).join(", ")}
         </VariableBox>
       );
     case "lambda":

packages/squiggle-lang/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quri/squiggle-lang",
-  "version": "0.2.8",
+  "version": "0.2.9",
   "homepage": "https://squiggle-language.com",
   "license": "MIT",
   "scripts": {