fix #1199

packages/components/src/components/Alert.tsx

@@ -30,7 +30,7 @@ export const Alert: React.FC<{
           className={clsx("h-5 w-5 flex-shrink-0", iconColor)}
           aria-hidden="true"
         />
-        <div className="ml-3">
+        <div className="ml-3 grow">
           <header className={clsx("text-sm font-medium", headingColor)}>
             {heading}
           </header>

packages/components/src/components/FunctionChart.tsx

@@ -1,9 +1,15 @@
 import * as React from "react";
-import { SqLambda, environment, SqValueTag } from "@quri/squiggle-lang";
+import {
+  SqLambda,
+  environment,
+  SqValueTag,
+  SqError,
+} from "@quri/squiggle-lang";
 import { FunctionChart1Dist } from "./FunctionChart1Dist";
 import { FunctionChart1Number } from "./FunctionChart1Number";
 import { DistributionPlottingSettings } from "./DistributionChart";
-import { ErrorAlert, MessageAlert } from "./Alert";
+import { MessageAlert } from "./Alert";
+import { SquiggleErrorAlert } from "./SquiggleErrorAlert";
 
 export type FunctionChartSettings = {
   start: number;
@@ -19,6 +25,25 @@ interface FunctionChartProps {
   height: number;
 }
 
+const FunctionCallErrorAlert = ({ error }: { error: SqError }) => {
+  const [expanded, setExpanded] = React.useState(false);
+  if (expanded) {
+  }
+  return (
+    <MessageAlert heading="Function Display Failed">
+      <div className="space-y-2">
+        <span
+          className="underline decoration-dashed cursor-pointer"
+          onClick={() => setExpanded(!expanded)}
+        >
+          {expanded ? "Hide" : "Show"} error details
+        </span>
+        {expanded ? <SquiggleErrorAlert error={error} /> : null}
+      </div>
+    </MessageAlert>
+  );
+};
+
 export const FunctionChart: React.FC<FunctionChartProps> = ({
   fn,
   chartSettings,
@@ -26,7 +51,8 @@ export const FunctionChart: React.FC<FunctionChartProps> = ({
   distributionPlotSettings,
   height,
 }) => {
-  if (fn.parameters.length > 1) {
+  console.log(fn.parameters().length);
+  if (fn.parameters().length !== 1) {
     return (
       <MessageAlert heading="Function Display Not Supported">
         Only functions with one parameter are displayed.
@@ -47,9 +73,7 @@ export const FunctionChart: React.FC<FunctionChartProps> = ({
   const validResult = getValidResult();
 
   if (validResult.tag === "Error") {
-    return (
-      <ErrorAlert heading="Error">{validResult.value.toString()}</ErrorAlert>
-    );
+    return <FunctionCallErrorAlert error={validResult.value} />;
   }
 
   switch (validResult.value.tag) {

packages/components/src/components/SquiggleViewer/VariableBox.tsx

@@ -1,4 +1,4 @@
-import { SqValue, SqValueLocation } from "@quri/squiggle-lang";
+import { SqValue } from "@quri/squiggle-lang";
 import React, { useContext, useReducer } from "react";
 import { Tooltip } from "../ui/Tooltip";
 import { LocalItemSettings, MergedItemSettings } from "./utils";
@@ -70,7 +70,7 @@ export const VariableBox: React.FC<VariableBoxProps> = ({
         <div className="flex w-full">
           {location.path.items.length ? (
             <div
-              className="border-l-2 border-slate-200 hover:border-indigo-600 w-4 cursor-pointer"
+              className="shrink-0 border-l-2 border-slate-200 hover:border-indigo-600 w-4 cursor-pointer"
               onClick={toggleCollapsed}
             ></div>
           ) : null}