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,6 +23,13 @@ export const FunctionChart: React.FC<FunctionChartProps> = ({
   environment,
   height,
 }: FunctionChartProps) => {
+  if (fn.parameters.length > 1) {
+    return (
+      <MessageBox heading="Function Display Not Supported">
+        Only functions with one parameter are displayed.
+      </MessageBox>
+    );
+  } else {
     let result1 = runForeign(fn, [chartSettings.start], environment);
     let result2 = runForeign(fn, [chartSettings.stop], environment);
     let getValidResult = () => {
@@ -63,12 +70,13 @@ export const FunctionChart: React.FC<FunctionChartProps> = ({
           );
         default:
           return (
-          <ErrorBox heading="No Viewer">
-            There is no function visualization for this type of function
-          </ErrorBox>
+            <MessageBox heading="Function Display Not Supported">
+              There is no function visualization for this type of output
+            </MessageBox>
           );
       }
     };
 
     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}>
+          <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
-          heading="String"
-          showTypes={showTypes}
-        >{`"${expression.value}"`}</VariableBox>
+        <VariableBox heading="String" showTypes={showTypes}>
+          <span className="text-slate-400">"</span>
+          <span className="text-slate-600 font-semibold">
+            {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,8 +179,11 @@ const SquiggleItem: React.FC<SquiggleItemProps> = ({
       return (
         <VariableBox heading="Record" showTypes={showTypes}>
           {Object.entries(expression.value).map(([key, r]) => (
-            <div key={key}>
-              <h3>{key}</h3>
+            <div key={key} className="flex flex-row pt-1">
+              <div className="flex-none pr-2">
+                <h3 className="text-slate-500 font-mono">{key}:</h3>
+              </div>
+              <div className="pl-2 pr-2 mb-2 grow bg-gray-50 border border-gray-100 rounded-sm">
                 <SquiggleItem
                   expression={r}
                   width={width !== undefined ? width - 20 : width}
@@ -182,6 +195,7 @@ const SquiggleItem: React.FC<SquiggleItemProps> = ({
                   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":
-  version "17.0.43"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.43.tgz#4adc142887dd4a2601ce730bc56c3436fdb07a55"
-  integrity sha512-8Q+LNpdxf057brvPu1lMtC5Vn7J119xrP1aq4qiaefNioQUYANF/CYeK4NsKorSZyUGJ66g0IM+4bbjwx45o2A==
+"@types/react@*", "@types/react@^18.0.1", "@types/react@^18.0.9":
+  version "18.0.9"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.9.tgz#d6712a38bd6cd83469603e7359511126f122e878"
+  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==