Show errors in FunctionChart

packages/components/src/SquiggleChart.tsx

@@ -216,11 +216,17 @@ export const FunctionChart: React.FC<{
     ) : (
       <></>
     );
-  let data = _rangeByCount(diagramStart, diagramStop, diagramCount)
+  let data1 = _rangeByCount(diagramStart, diagramStop, diagramCount);
+  let valueData = data1
     .map((x) => {
       let result = distPlusFn(x);
       if (result.tag === "Ok") {
-        let percentiles = getPercentiles(percentileArray, result.value);
+        return { x: x, value: result.value };
+      } else return null;
+    })
+    .filter((x) => x !== null)
+    .map(({ x, value }) => {
+      let percentiles = getPercentiles(percentileArray, value);
       return {
         x: x,
         p1: percentiles[0],
@@ -237,20 +243,30 @@ export const FunctionChart: React.FC<{
         p95: percentiles[11],
         p99: percentiles[12],
       };
-      } else {
-        console.log("Error", x, result);
-        return null;
-      }
+    });
+
+  let errorData = data1
+    .map((x) => {
+      let result = distPlusFn(x);
+      if (result.tag === "Error") {
+        return { x: x, error: result.value };
+      } else return null;
     })
     .filter((x) => x !== null);
+  let error2 = _.groupBy(errorData, (x) => x.error);
   return (
     <>
       <SquigglePercentilesChart
-        data={{ facet: data }}
+        data={{ facet: valueData }}
         actions={false}
         signalListeners={signalListeners}
       />
       {showChart}
+      {_.keysIn(error2).map((k) => (
+        <ShowError heading={k}>
+          {`Values: [${error2[k].map((r) => r.x.toFixed(2)).join(",")}]`}
+        </ShowError>
+      ))}
     </>
   );
 };
@@ -308,7 +324,6 @@ export const SquiggleChart: React.FC<SquiggleChartProps> = ({
     // At this point, we came across an error. What was our error?
     return <ShowError heading={"Parse Error"}>{result.value}</ShowError>;
   }
-  return <p>{"Invalid Response"}</p>;
 };
 
 function getPercentiles(percentiles: number[], t: DistPlus) {