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/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 {
+  const { title, minX, maxX, logX, expY, xAxisType = "number" } = specOptions;
-    title,
-    minX,
-    maxX,
-    logX,
-    expY,
-    xAxisType = "number",
-  } = specOptions;
 
   const dateTime = xAxisType === "dateTime";
 
@@ -299,21 +290,13 @@ export function buildVegaSpec(
               },
             ],
           },
-          {
+        ],
-            name: "sample_distributions",
-            type: "group",
-            from: {
-              facet: {
-                name: "sample_facet",
-                data: "distribution_facet",
-                field: "samples",
       },
-            },
+
-            marks: [
       {
-                name: "samples",
+        name: "sampleset",
         type: "rect",
-                from: { data: "sample_facet" },
+        from: { data: "samples" },
         encode: {
           enter: {
             x: { scale: "xscale", field: "data" },
@@ -321,18 +304,9 @@ export function buildVegaSpec(
 
             y: { value: 25, offset: { signal: "height" } },
             height: { value: 5 },
-                    fill: {
-                      scale: "color",
-                      field: { parent: "name" },
-                    },
-                    fillOpacity: { value: 1 },
           },
         },
       },
-            ],
-          },
-        ],
-      },
       {
         type: "text",
         name: "announcer",