Minor styling to functions, strings, numbers

2022-05-30 20:33:47 -07:00 · 2022-05-30 20:33:47 -07:00 · ddc8763f77
commit ddc8763f77
parent 5e0dc6e4ed
5 changed files with 115 additions and 70 deletions
--- a/packages/components/src/components/ErrorBox.tsx
+++ b/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;
@ -18,4 +19,23 @@ export const ErrorBox: React.FC<{
      </div>
    </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>
+  );
 };
--- a/packages/components/src/components/FunctionChart.tsx
+++ b/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);
-  let result2 = runForeign(fn, [chartSettings.stop], environment);
-  let getValidResult = () => {
-    if (result1.tag === "Ok") {
-      return result1;
-    } else if (result2.tag === "Ok") {
-      return result2;
-    } else {
-      return result1;
-    }
-  };
-  let validResult = getValidResult();
-  let resultType = validResult.tag === "Ok" ? validResult.value.tag : "Error";
+  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 = () => {
+      if (result1.tag === "Ok") {
+        return result1;
+      } else if (result2.tag === "Ok") {
+        return result2;
+      } else {
+        return result1;
+      }
+    };
+    let validResult = getValidResult();
+    let resultType = validResult.tag === "Ok" ? validResult.value.tag : "Error";

-  let component = () => {
-    switch (resultType) {
-      case "distribution":
-        return (
-          <FunctionChart1Dist
-            fn={fn}
-            chartSettings={chartSettings}
-            environment={environment}
-            height={height}
-          />
-        );
-      case "number":
-        return (
-          <FunctionChart1Number
-            fn={fn}
-            chartSettings={chartSettings}
-            environment={environment}
-            height={height}
-          />
-        );
-      case "Error":
-        return (
-          <ErrorBox heading="Error">The function failed to be run</ErrorBox>
-        );
-      default:
-        return (
-          <ErrorBox heading="No Viewer">
-            There is no function visualization for this type of function
-          </ErrorBox>
-        );
-    }
-  };
+    let component = () => {
+      switch (resultType) {
+        case "distribution":
+          return (
+            <FunctionChart1Dist
+              fn={fn}
+              chartSettings={chartSettings}
+              environment={environment}
+              height={height}
+            />
+          );
+        case "number":
+          return (
+            <FunctionChart1Number
+              fn={fn}
+              chartSettings={chartSettings}
+              environment={environment}
+              height={height}
+            />
+          );
+        case "Error":
+          return (
+            <ErrorBox heading="Error">The function failed to be run</ErrorBox>
+          );
+        default:
+          return (
+            <MessageBox heading="Function Display Not Supported">
+              There is no function visualization for this type of output
+            </MessageBox>
+          );
+      }
+    };

-  return component();
+    return component();
+  }
 };
--- a/packages/components/src/components/SquiggleChart.tsx
+++ b/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
-          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,18 +179,22 @@ const SquiggleItem: React.FC<SquiggleItemProps> = ({
      return (
        <VariableBox heading="Record" showTypes={showTypes}>
          {Object.entries(expression.value).map(([key, r]) => (
-            <div key={key}>
-              <h3>{key}</h3>
-              <SquiggleItem
-                expression={r}
-                width={width !== undefined ? width - 20 : width}
-                height={height / 3}
-                showTypes={showTypes}
-                showSummary={showSummary}
-                showControls={showControls}
-                chartSettings={chartSettings}
-                environment={environment}
-              />
+            <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}
+                  height={height / 3}
+                  showTypes={showTypes}
+                  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}
--- a/packages/components/src/vega-specs/spec-distributions.json
+++ b/packages/components/src/vega-specs/spec-distributions.json
@ -48,7 +48,7 @@
            "value": 0
          },
          "fill": {
-            "value": "#4C78A8"
+            "value": "#739ECC"
          },
          "interpolate": {
            "value": "monotone"
--- a/yarn.lock
+++ b/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==