Minor styling to functions, strings, numbers

packages/components/src/components/ErrorBox.tsx

@@ -1,5 +1,6 @@
 import * as React from "react";
 import { XCircleIcon } from "@heroicons/react/solid";
+import { InformationCircleIcon } from "@heroicons/react/solid";
 
 export const ErrorBox: React.FC<{
   heading: string;
@@ -19,3 +20,22 @@ export const ErrorBox: React.FC<{
     </div>
   );
 };
+
+export const MessageBox: React.FC<{
+  heading: string;
+  children: React.ReactNode;
+}> = ({ heading = "Note", children }) => {
+  return (
+    <div className="rounded-md bg-slate-100 p-4">
+      <div className="flex">
+        <div className="flex-shrink-0">
+          <InformationCircleIcon className="h-5 w-5 text-slate-400" aria-hidden="true" />
+        </div>
+        <div className="ml-3">
+          <h3 className="text-sm font-medium text-slate-700">{heading}</h3>
+          <div className="mt-2 text-sm text-slate-700">{children}</div>
+        </div>
+      </div>
+    </div>
+  );
+};

packages/components/src/components/FunctionChart.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import { lambdaValue, environment, runForeign } from "@quri/squiggle-lang";
 import { FunctionChart1Dist } from "./FunctionChart1Dist";
 import { FunctionChart1Number } from "./FunctionChart1Number";
-import { ErrorBox } from "./ErrorBox";
+import { ErrorBox, MessageBox } from "./ErrorBox";
 
 export type FunctionChartSettings = {
   start: number;
@@ -23,52 +23,60 @@ export const FunctionChart: React.FC<FunctionChartProps> = ({
   environment,
   height,
 }: FunctionChartProps) => {
-  let result1 = runForeign(fn, [chartSettings.start], environment);
+  if (fn.parameters.length > 1) {
-  let result2 = runForeign(fn, [chartSettings.stop], environment);
+    return (
-  let getValidResult = () => {
+      <MessageBox heading="Function Display Not Supported">
-    if (result1.tag === "Ok") {
+        Only functions with one parameter are displayed.
-      return result1;
+      </MessageBox>
-    } else if (result2.tag === "Ok") {
+    );
-      return result2;
+  } else {
-    } else {
+    let result1 = runForeign(fn, [chartSettings.start], environment);
-      return result1;
+    let result2 = runForeign(fn, [chartSettings.stop], environment);
-    }
+    let getValidResult = () => {
-  };
+      if (result1.tag === "Ok") {
-  let validResult = getValidResult();
+        return result1;
-  let resultType = validResult.tag === "Ok" ? validResult.value.tag : "Error";
+      } else if (result2.tag === "Ok") {
+        return result2;
+      } else {
+        return result1;
+      }
+    };
+    let validResult = getValidResult();
+    let resultType = validResult.tag === "Ok" ? validResult.value.tag : "Error";
 
-  let component = () => {
+    let component = () => {
-    switch (resultType) {
+      switch (resultType) {
-      case "distribution":
+        case "distribution":
-        return (
+          return (
-          <FunctionChart1Dist
+            <FunctionChart1Dist
-            fn={fn}
+              fn={fn}
-            chartSettings={chartSettings}
+              chartSettings={chartSettings}
-            environment={environment}
+              environment={environment}
-            height={height}
+              height={height}
-          />
+            />
-        );
+          );
-      case "number":
+        case "number":
-        return (
+          return (
-          <FunctionChart1Number
+            <FunctionChart1Number
-            fn={fn}
+              fn={fn}
-            chartSettings={chartSettings}
+              chartSettings={chartSettings}
-            environment={environment}
+              environment={environment}
-            height={height}
+              height={height}
-          />
+            />
-        );
+          );
-      case "Error":
+        case "Error":
-        return (
+          return (
-          <ErrorBox heading="Error">The function failed to be run</ErrorBox>
+            <ErrorBox heading="Error">The function failed to be run</ErrorBox>
-        );
+          );
-      default:
+        default:
-        return (
+          return (
-          <ErrorBox heading="No Viewer">
+            <MessageBox heading="Function Display Not Supported">
-            There is no function visualization for this type of function
+              There is no function visualization for this type of output
-          </ErrorBox>
+            </MessageBox>
-        );
+          );
-    }
+      }
-  };
+    };
 
-  return component();
+    return component();
+  }
 };

packages/components/src/components/SquiggleChart.tsx

@@ -95,7 +95,9 @@ const SquiggleItem: React.FC<SquiggleItemProps> = ({
     case "number":
       return (
         <VariableBox heading="Number" showTypes={showTypes}>
-          <NumberShower precision={3} number={expression.value} />
+          <div className="font-semibold text-slate-600">
+            <NumberShower precision={3} number={expression.value} />
+          </div>
         </VariableBox>
       );
     case "distribution": {
@@ -124,10 +126,13 @@ const SquiggleItem: React.FC<SquiggleItemProps> = ({
     }
     case "string":
       return (
-        <VariableBox
+        <VariableBox heading="String" showTypes={showTypes}>
-          heading="String"
+          <span className="text-slate-400">"</span>
-          showTypes={showTypes}
+          <span className="text-slate-600 font-semibold">
-        >{`"${expression.value}"`}</VariableBox>
+            {expression.value}
+          </span>
+          <span className="text-slate-400">"</span>
+        </VariableBox>
       );
     case "boolean":
       return (
@@ -138,7 +143,12 @@ const SquiggleItem: React.FC<SquiggleItemProps> = ({
     case "symbol":
       return (
         <VariableBox heading="Symbol" showTypes={showTypes}>
+          <span className="text-slate-500 mr-2">
+          Undefined Symbol:
+          </span>
+          <span className="text-slate-600">
           {expression.value}
+          </span>
         </VariableBox>
       );
     case "call":
@@ -169,18 +179,22 @@ const SquiggleItem: React.FC<SquiggleItemProps> = ({
       return (
         <VariableBox heading="Record" showTypes={showTypes}>
           {Object.entries(expression.value).map(([key, r]) => (
-            <div key={key}>
+            <div key={key} className="flex flex-row pt-1">
-              <h3>{key}</h3>
+              <div className="flex-none pr-2">
-              <SquiggleItem
+                <h3 className="text-slate-500 font-mono">{key}:</h3>
-                expression={r}
+              </div>
-                width={width !== undefined ? width - 20 : width}
+              <div className="pl-2 pr-2 mb-2 grow bg-gray-50 border border-gray-100 rounded-sm">
-                height={height / 3}
+                <SquiggleItem
-                showTypes={showTypes}
+                  expression={r}
-                showSummary={showSummary}
+                  width={width !== undefined ? width - 20 : width}
-                showControls={showControls}
+                  height={height / 3}
-                chartSettings={chartSettings}
+                  showTypes={showTypes}
-                environment={environment}
+                  showSummary={showSummary}
-              />
+                  showControls={showControls}
+                  chartSettings={chartSettings}
+                  environment={environment}
+                />
+              </div>
             </div>
           ))}
         </VariableBox>
@@ -207,6 +221,9 @@ const SquiggleItem: React.FC<SquiggleItemProps> = ({
     case "lambda":
       return (
         <VariableBox heading="Function" showTypes={showTypes}>
+          <div className="text-amber-700 bg-amber-100 rounded-md font-mono p-1 pl-2 mb-3 mt-1 text-sm">{`function(${expression.value.parameters.join(
+            ","
+          )})`}</div>
           <FunctionChart
             fn={expression.value}
             chartSettings={chartSettings}

packages/components/src/vega-specs/spec-distributions.json

@@ -48,7 +48,7 @@
             "value": 0
           },
           "fill": {
-            "value": "#4C78A8"
+            "value": "#739ECC"
           },
           "interpolate": {
             "value": "monotone"

yarn.lock

@@ -4305,10 +4305,10 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react@*", "@types/react@17.0.43", "@types/react@^18.0.9":
+"@types/react@*", "@types/react@^18.0.1", "@types/react@^18.0.9":
-  version "17.0.43"
+  version "18.0.9"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.43.tgz#4adc142887dd4a2601ce730bc56c3436fdb07a55"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.9.tgz#d6712a38bd6cd83469603e7359511126f122e878"
-  integrity sha512-8Q+LNpdxf057brvPu1lMtC5Vn7J119xrP1aq4qiaefNioQUYANF/CYeK4NsKorSZyUGJ66g0IM+4bbjwx45o2A==
+  integrity sha512-9bjbg1hJHUm4De19L1cHiW0Jvx3geel6Qczhjd0qY5VKVE2X5+x77YxAepuCwVh4vrgZJdgEJw48zrhRIeF4Nw==
   dependencies:
     "@types/prop-types" "*"
     "@types/scheduler" "*"
@@ -14522,7 +14522,7 @@ react-vega@^7.5.1:
     prop-types "^15.8.1"
     vega-embed "^6.5.1"
 
-react@^18.1.0:
+react@^18.0.0, react@^18.1.0:
   version "18.1.0"
   resolved "https://registry.yarnpkg.com/react/-/react-18.1.0.tgz#6f8620382decb17fdc5cc223a115e2adbf104890"
   integrity sha512-4oL8ivCz5ZEPyclFQXaNksK3adutVS8l2xzZU0cqEFrE9Sb7fC0EFK5uEk74wIreL1DERyjvsU915j1pcT2uEQ==