legends, blues colors scheme, remove color setting

packages/components/src/components/DistributionChart.tsx

@@ -17,7 +17,7 @@ import {
 } from "../lib/distributionSpecBuilder";
 import { NumberShower } from "./NumberShower";
 import { Plot, parsePlot } from "../lib/plotParser";
-import { flattenResult, all } from "../lib/utility";
+import { flattenResult } from "../lib/utility";
 import { hasMassBelowZero } from "../lib/distributionUtils";
 
 export type DistributionPlottingSettings = {
@@ -52,6 +52,7 @@ export const DistributionChart: React.FC<DistributionChartProps> = (props) => {
       plot.distributions.map((x) =>
         resultMap(x.distribution.pointSet(), (shape) => ({
           name: x.name,
+          // color: x.color, // not supported yet
           continuous: shape.continuous,
           discrete: shape.discrete,
         }))
@@ -94,7 +95,7 @@ export const DistributionChart: React.FC<DistributionChartProps> = (props) => {
           />
         )}
         <div className="flex justify-center">
-          {showSummary && plot.distributions.length == 1 && (
+          {showSummary && plot.distributions.length === 1 && (
             <SummaryTable distribution={plot.distributions[0].distribution} />
           )}
         </div>

packages/components/src/components/SquigglePlayground.tsx

@@ -37,10 +37,7 @@ import { InputItem } from "./ui/InputItem";
 import { Text } from "./ui/Text";
 import { ViewSettings, viewSettingsSchema } from "./ViewSettings";
 import { HeadedSection } from "./ui/HeadedSection";
-import {
-  defaultColor,
-  defaultTickFormat,
-} from "../lib/distributionSpecBuilder";
+import { defaultTickFormat } from "../lib/distributionSpecBuilder";
 import { Button } from "./ui/Button";
 
 type PlaygroundProps = SquiggleChartProps & {
@@ -240,7 +237,6 @@ export const SquigglePlayground: FC<PlaygroundProps> = ({
   title,
   minX,
   maxX,
-  color = defaultColor,
   tickFormat = defaultTickFormat,
   distributionChartActions,
   code: controlledCode,
@@ -268,7 +264,6 @@ export const SquigglePlayground: FC<PlaygroundProps> = ({
       title,
       minX,
       maxX,
-      color,
       tickFormat,
       distributionChartActions,
       showSummary,

packages/components/src/components/SquiggleViewer/ItemSettingsMenu.tsx

@@ -6,10 +6,7 @@ import { Modal } from "../ui/Modal";
 import { ViewSettings, viewSettingsSchema } from "../ViewSettings";
 import { Path, pathAsString } from "./utils";
 import { ViewerContext } from "./ViewerContext";
-import {
-  defaultColor,
-  defaultTickFormat,
-} from "../../lib/distributionSpecBuilder";
+import { defaultTickFormat } from "../../lib/distributionSpecBuilder";
 import { PlaygroundContext } from "../SquigglePlayground";
 
 type Props = {
@@ -46,7 +43,6 @@ const ItemSettingsModal: React.FC<
       tickFormat:
         mergedSettings.distributionPlotSettings.format || defaultTickFormat,
       title: mergedSettings.distributionPlotSettings.title,
-      color: mergedSettings.distributionPlotSettings.color || defaultColor,
       minX: mergedSettings.distributionPlotSettings.minX,
       maxX: mergedSettings.distributionPlotSettings.maxX,
       distributionChartActions: mergedSettings.distributionPlotSettings.actions,
@@ -66,7 +62,6 @@ const ItemSettingsModal: React.FC<
           expY: vars.expY,
           format: vars.tickFormat,
           title: vars.title,
-          color: vars.color,
           minX: vars.minX,
           maxX: vars.maxX,
           actions: vars.distributionChartActions,

packages/components/src/components/ViewSettings.tsx

@@ -5,10 +5,7 @@ import { InputItem } from "./ui/InputItem";
 import { Checkbox } from "./ui/Checkbox";
 import { HeadedSection } from "./ui/HeadedSection";
 import { Text } from "./ui/Text";
-import {
-  defaultColor,
-  defaultTickFormat,
-} from "../lib/distributionSpecBuilder";
+import { defaultTickFormat } from "../lib/distributionSpecBuilder";
 
 export const viewSettingsSchema = yup.object({}).shape({
   chartHeight: yup.number().required().positive().integer().default(350),
@@ -18,7 +15,6 @@ export const viewSettingsSchema = yup.object({}).shape({
   expY: yup.boolean().required(),
   tickFormat: yup.string().default(defaultTickFormat),
   title: yup.string(),
-  color: yup.string().default(defaultColor).required(),
   minX: yup.number(),
   maxX: yup.number(),
   distributionChartActions: yup.boolean(),
@@ -114,12 +110,6 @@ export const ViewSettings: React.FC<{
               register={register}
               label="Tick Format"
             />
-            <InputItem
-              name="color"
-              type="color"
-              register={register}
-              label="Color"
-            />
           </div>
         </HeadedSection>
       </div>

packages/components/src/lib/distributionSpecBuilder.ts

@@ -10,8 +10,6 @@ export type DistributionChartSpecOptions = {
   minX?: number;
   /** The maximum x coordinate shown on the chart */
   maxX?: number;
-  /** The color of the chart */
-  color?: string;
   /** The title of the chart */
   title?: string;
   /** The formatting of the ticks */
@@ -57,14 +55,12 @@ export let expYScale: PowScale = {
 };
 
 export const defaultTickFormat = ".9~s";
-export const defaultColor = "#739ECC";
 
 export function buildVegaSpec(
   specOptions: DistributionChartSpecOptions
 ): VisualizationSpec {
   const {
     format = defaultTickFormat,
-    color = defaultColor,
     title,
     minX,
     maxX,
@@ -106,7 +102,7 @@ export function buildVegaSpec(
           data: "data",
           field: "name",
         },
-        range: { scheme: "category10" },
+        range: { scheme: "blues" },
       },
     ],
     axes: [
@@ -120,6 +116,7 @@ export function buildVegaSpec(
         domainOpacity: 0.0,
         format: format,
         tickCount: 10,
+        labelOverlap: "greedy",
       },
     ],
     marks: [
@@ -259,15 +256,38 @@ export function buildVegaSpec(
         ],
       },
     ],
-  };
-  if (title) {
-    spec = {
-      ...spec,
+    legends: [
+      {
+        fill: "color",
+        orient: "top",
+        labelFontSize: 12,
+        encode: {
+          symbols: {
+            update: {
+              fill: [
+                { test: "length(domain('color')) == 1", value: "transparent" },
+                { scale: "color", field: "value" },
+              ],
+            },
+          },
+          labels: {
+            interactive: true,
+            update: {
+              fill: [
+                { test: "length(domain('color')) == 1", value: "transparent" },
+                { value: "black" },
+              ],
+            },
+          },
+        },
+      },
+    ],
+    ...(title && {
       title: {
         text: title,
       },
-    };
-  }
+    }),
+  };
 
   return spec;
 }

packages/components/src/lib/plotParser.ts

@@ -1,7 +1,11 @@
 import * as yup from "yup";
 import { Distribution, result, squiggleExpression } from "@quri/squiggle-lang";
 
-export type LabeledDistribution = { name: string; distribution: Distribution };
+export type LabeledDistribution = {
+  name: string;
+  distribution: Distribution;
+  color?: string;
+};
 
 export type Plot = {
   distributions: LabeledDistribution[];
@@ -27,12 +31,18 @@ const schema = yup
         .of(
           yup.object().shape({
             tag: yup.mixed().oneOf(["record"]),
-            value: yup.object().shape({
+            value: yup.object({
               name: yup.object().shape({
                 tag: yup.mixed().oneOf(["string"]),
                 value: yup.string().required(),
               }),
-              distribution: yup.object().shape({
+              // color: yup
+              //   .object({
+              //     tag: yup.mixed().oneOf(["string"]),
+              //     value: yup.string().required(),
+              //   })
+              //   .default(undefined),
+              distribution: yup.object({
                 tag: yup.mixed().oneOf(["distribution"]),
                 value: yup.mixed(),
               }),
@@ -51,6 +61,7 @@ export function parsePlot(record: {
     return ok({
       distributions: plotRecord.distributions.value.map((x) => ({
         name: x.value.name.value,
+        // color: x.value.color?.value, // not supported yet
         distribution: x.value.distribution.value,
       })),
     });

packages/components/src/stories/SquiggleChart.stories.mdx

@@ -99,7 +99,20 @@ could be continuous, discrete or mixed.
   <Story
     name="Multiple plots"
     args={{
-      code: '{distributions: [{name: "one", distribution: mx(0.5, normal(0,1))}, {name: "two", distribution: mx(2, normal(5, 2))}]}',
+      code: `
+{
+  distributions: [
+    {
+      name: "one",
+      distribution: mx(0.5, normal(0,1))
+    },
+    {
+      name: "two",
+      distribution: mx(2, normal(5, 2)),
+    }
+  ]
+}
+`,
       width,
     }}
   >