Merge pull request #458 from quantified-uncertainty/real-log-scales

Real log scales

packages/components/src/components/DistributionChart.tsx

@@ -1,16 +1,18 @@
 import * as React from "react";
 import _ from "lodash";
-import type { Spec } from "vega";
 import type { Distribution } from "@quri/squiggle-lang";
 import { distributionErrorToString } from "@quri/squiggle-lang";
-import { createClassFromSpec } from "react-vega";
+import { Vega, VisualizationSpec } from "react-vega";
 import * as chartSpecification from "../vega-specs/spec-distributions.json";
 import { ErrorBox } from "./ErrorBox";
 import { useSize } from "react-use";
-
+import {
-let SquiggleVegaChart = createClassFromSpec({
+  linearXScale,
-  spec: chartSpecification as Spec,
+  logXScale,
-});
+  linearYScale,
+  expYScale,
+} from "./DistributionVegaScales";
+import styled from "styled-components";
 
 type DistributionChartProps = {
   distribution: Distribution;
@@ -23,13 +25,24 @@ export const DistributionChart: React.FC<DistributionChartProps> = ({
   height,
   width,
 }: DistributionChartProps) => {
+  let [isLogX, setLogX] = React.useState(false);
+  let [isExpY, setExpY] = React.useState(false);
+  let shape = distribution.pointSet();
   const [sized, _] = useSize((size) => {
-    let shape = distribution.pointSet();
+    var disableLog = false;
-    let widthProp = width !== undefined ? width - 20 : size.width - 10;
     if (shape.tag === "Ok") {
-      return (
+      let massBelow0 =
+        shape.value.continuous.some((x) => x.x <= 0) ||
+        shape.value.discrete.some((x) => x.x <= 0);
+      if (massBelow0) {
+        disableLog = true;
+      }
+      let spec = buildVegaSpec(isLogX, isExpY);
+      let widthProp = width ? width - 20 : size.width - 10;
+      var result = (
         <div>
-          <SquiggleVegaChart
+          <Vega
+            spec={spec}
             data={{ con: shape.value.continuous, dis: shape.value.discrete }}
             width={widthProp}
             height={height}
@@ -38,14 +51,75 @@ export const DistributionChart: React.FC<DistributionChartProps> = ({
         </div>
       );
     } else {
-      return (
+      var result = (
-        <div>
+        <ErrorBox heading="Distribution Error">
-          <ErrorBox heading="Distribution Error">
+          {distributionErrorToString(shape.value)}
-            {distributionErrorToString(shape.value)}
+        </ErrorBox>
-          </ErrorBox>
-        </div>
       );
     }
+    return (
+      <>
+        {result}
+        <div>
+          {disableLog ? (
+            <CheckBox
+              label="Log X scale"
+              value={isLogX}
+              onChange={setLogX}
+              disabled={true}
+              tooltip={
+                "Your distribution has mass lower than or equal to 0. Log only works on strictly positive values."
+              }
+            />
+          ) : (
+            <CheckBox label="Log X scale" value={isLogX} onChange={setLogX} />
+          )}
+          <CheckBox label="Exp Y scale" value={isExpY} onChange={setExpY} />
+        </div>
+      </>
+    );
   });
   return sized;
 };
+
+function buildVegaSpec(isLogX: boolean, isExpY: boolean): VisualizationSpec {
+  return {
+    ...chartSpecification,
+    scales: [
+      isLogX ? logXScale : linearXScale,
+      isExpY ? expYScale : linearYScale,
+    ],
+  } as VisualizationSpec;
+}
+
+interface CheckBoxProps {
+  label: string;
+  onChange: (x: boolean) => void;
+  value: boolean;
+  disabled?: boolean;
+  tooltip?: string;
+}
+
+const Label = styled.label<{ disabled: boolean }>`
+  ${(props) => props.disabled && "color: #999;"}
+`;
+
+export const CheckBox = ({
+  label,
+  onChange,
+  value,
+  disabled = false,
+  tooltip,
+}: CheckBoxProps) => {
+  return (
+    <span title={tooltip}>
+      <input
+        type="checkbox"
+        value={value + ""}
+        onChange={() => onChange(!value)}
+        disabled={disabled}
+      />
+      <Label disabled={disabled}>{label}</Label>
+    </span>
+  );
+};

packages/components/src/components/DistributionVegaScales.ts

@@ -0,0 +1,80 @@
+import type { LogScale, LinearScale, PowScale } from "vega";
+export let linearXScale: LinearScale = {
+  name: "xscale",
+  type: "linear",
+  range: "width",
+  zero: false,
+  nice: false,
+  domain: {
+    fields: [
+      {
+        data: "con",
+        field: "x",
+      },
+      {
+        data: "dis",
+        field: "x",
+      },
+    ],
+  },
+};
+export let linearYScale: LinearScale = {
+  name: "yscale",
+  type: "linear",
+  range: "height",
+  zero: true,
+  domain: {
+    fields: [
+      {
+        data: "con",
+        field: "y",
+      },
+      {
+        data: "dis",
+        field: "y",
+      },
+    ],
+  },
+};
+
+export let logXScale: LogScale = {
+  name: "xscale",
+  type: "log",
+  range: "width",
+  zero: false,
+  base: 10,
+  nice: false,
+  domain: {
+    fields: [
+      {
+        data: "con",
+        field: "x",
+      },
+      {
+        data: "dis",
+        field: "x",
+      },
+    ],
+  },
+};
+
+export let expYScale: PowScale = {
+  name: "yscale",
+  type: "pow",
+  exponent: 0.1,
+  range: "height",
+  zero: true,
+  nice: false,
+  domain: {
+    fields: [
+      {
+        data: "con",
+        field: "y",
+      },
+      {
+        data: "dis",
+        field: "y",
+      },
+    ],
+  },
+};

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

@@ -3,7 +3,6 @@
   "description": "A basic area chart example",
   "width": 500,
   "height": 100,
-  "autosize": "fit",
   "padding": 5,
   "data": [
     {
@@ -13,72 +12,8 @@
       "name": "dis"
     }
   ],
-  "signals": [
+  "signals": [],
-    {
+  "scales": [],
-      "name": "xscale",
-      "description": "The transform of the x scale",
-      "value": false,
-      "bind": {
-        "input": "checkbox",
-        "name": "log x scale"
-      }
-    },
-    {
-      "name": "yscale",
-      "description": "The transform of the y scale",
-      "value": false,
-      "bind": {
-        "input": "checkbox",
-        "name": "log y scale"
-      }
-    }
-  ],
-  "scales": [
-    {
-      "name": "xscale",
-      "type": "pow",
-      "exponent": {
-        "signal": "xscale ? 0.1 : 1"
-      },
-      "range": "width",
-      "zero": false,
-      "nice": false,
-      "domain": {
-        "fields": [
-          {
-            "data": "con",
-            "field": "x"
-          },
-          {
-            "data": "dis",
-            "field": "x"
-          }
-        ]
-      }
-    },
-    {
-      "name": "yscale",
-      "type": "pow",
-      "exponent": {
-        "signal": "yscale ? 0.1 : 1"
-      },
-      "range": "height",
-      "nice": true,
-      "zero": true,
-      "domain": {
-        "fields": [
-          {
-            "data": "con",
-            "field": "y"
-          },
-          {
-            "data": "dis",
-            "field": "y"
-          }
-        ]
-      }
-    }
-  ],
   "axes": [
     {
       "orient": "bottom",

packages/squiggle-lang/src/js/index.ts

@@ -11,6 +11,7 @@ export {
   makeSampleSetDist,
   errorValueToString,
   distributionErrorToString,
+  distributionError,
 } from "../rescript/TypescriptInterface.gen";
 export type {
   samplingParams,
@@ -26,9 +27,9 @@ import {
   convertRawToTypescript,
 } from "./rescript_interop";
 import { result, resultMap, tag, tagged } from "./types";
-import { Distribution } from "./distribution";
+import { Distribution, shape } from "./distribution";
 
-export { Distribution, squiggleExpression, result, resultMap };
+export { Distribution, squiggleExpression, result, resultMap, shape };
 
 export let defaultSamplingInputs: samplingParams = {
   sampleCount: 10000,