samples in own shape

packages/components/src/components/DistributionChart.tsx

@@ -32,7 +32,6 @@ export type DistributionChartProps = {
   environment: environment;
   width?: number;
   height: number;
-  sample?: boolean;
   xAxisType?: "number" | "dateTime";
 } & DistributionPlottingSettings;
 
@@ -64,7 +63,7 @@ export const DistributionChart: React.FC<DistributionChartProps> = (props) => {
           name: x.name,
           // color: x.color, // not supported yet
           ...pointSet.asShape(),
-          samples: [] as number[],
+          // samples: [] as number[],
         }))
       )
     );
@@ -78,6 +77,7 @@ export const DistributionChart: React.FC<DistributionChartProps> = (props) => {
     }
 
     // if this is a sample set, include the samples
+    const samples: number[] = [];
     const sampleSets = plot?.distributions.filter(
       (dist) => dist.distribution.tag === SqDistributionTag.SampleSet
     );
@@ -85,7 +85,8 @@ export const DistributionChart: React.FC<DistributionChartProps> = (props) => {
       for (const { distribution } of sampleSets) {
         if (distribution.tag === SqDistributionTag.SampleSet) {
           // this conditional must be duplicated to please typescript, more elegant solution probably exists
-          shapes.value[0].samples.push(...distribution.value());
+          samples.push(...distribution.value());
+          // shapes.value[0].samples.push(...distribution.value());
         }
       }
     }
@@ -112,7 +113,7 @@ export const DistributionChart: React.FC<DistributionChartProps> = (props) => {
         ) : (
           <Vega
             spec={spec}
-            data={{ data: shapes.value, domain }}
+            data={{ data: shapes.value, domain, samples }}
             width={widthProp - 10}
             height={height}
             actions={actions}

packages/components/src/components/SquiggleChart.tsx

@@ -89,7 +89,7 @@ export const SquiggleChart: React.FC<SquiggleChartProps> = React.memo(
       onChange,
       executionId,
     });
-    
+
     const distributionPlotSettings = {
       showSummary,
       logX,

packages/components/src/lib/distributionSpecBuilder.ts

@@ -14,8 +14,6 @@ export type DistributionChartSpecOptions = {
   title?: string;
   /** The formatting of the ticks */
   format?: string;
-  /** Whether or not to show the band of sample data at the bottom */
-  sample?: boolean;
   /** Whether the x-axis should be dates or numbers */
   xAxisType?: "number" | "dateTime";
 };
@@ -77,14 +75,7 @@ const width = 500;
 export function buildVegaSpec(
   specOptions: DistributionChartSpecOptions
 ): VisualizationSpec {
-  const {
-    title,
-    minX,
-    maxX,
-    logX,
-    expY,
-    xAxisType = "number",
-  } = specOptions;
+  const { title, minX, maxX, logX, expY, xAxisType = "number" } = specOptions;
 
   const dateTime = xAxisType === "dateTime";
 
@@ -299,40 +290,23 @@ export function buildVegaSpec(
               },
             ],
           },
-          {
-            name: "sample_distributions",
-            type: "group",
-            from: {
-              facet: {
-                name: "sample_facet",
-                data: "distribution_facet",
-                field: "samples",
-              },
-            },
-            marks: [
-              {
-                name: "samples",
-                type: "rect",
-                from: { data: "sample_facet" },
-                encode: {
-                  enter: {
-                    x: { scale: "xscale", field: "data"},
-                    width: { value: 0.1 },
-
-                    y: { value: 25, offset: { signal: "height" } },
-                    height: { value: 5 },
-                    fill: {
-                      scale: "color",
-                      field: { parent: "name" },
-                    },
-                    fillOpacity: { value: 1 },
-                  },
-                },
-              },
-            ],
-          },
         ],
       },
+
+      {
+        name: "sampleset",
+        type: "rect",
+        from: { data: "samples" },
+        encode: {
+          enter: {
+            x: { scale: "xscale", field: "data" },
+            width: { value: 0.1 },
+
+            y: { value: 25, offset: { signal: "height" } },
+            height: { value: 5 },
+          },
+        },
+      },
       {
         type: "text",
         name: "announcer",