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

packages/components/src/components/FunctionChart.tsx

@@ -76,7 +76,9 @@ export const FunctionChart: React.FC<FunctionChartProps> = ({
     chartSettings.count
   );
   type point = { x: number; value: result<Distribution, string> };
-  let valueData: point[] = data1.map((x) => {
+  let valueData: point[] = React.useMemo(
+    () =>
+      data1.map((x) => {
         let result = runForeign(fn, [x], environment);
         if (result.tag === "Ok") {
           if (result.value.tag == "distribution") {
@@ -97,7 +99,9 @@ export const FunctionChart: React.FC<FunctionChartProps> = ({
             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": {