use domain to feed sample for bottom band

packages/components/src/components/DistributionChart.tsx

@@ -48,9 +48,8 @@ export function makePlot(record: {
 export const DistributionChart: React.FC<DistributionChartProps> = (props) => {
   const { plot, height, showSummary, width, logX, actions = false } = props;
   // const [xAxis, setXAxis] = React.useState<"dateAndTime" | "numbers">("dateAndTime")
-  
   const [sized] = useSize((size) => {
-    let shapes = flattenResult(
+    const shapes = flattenResult(
       plot.distributions.map((x) =>
         resultMap(x.distribution.pointSet(), (shape) => ({
           name: x.name,
@@ -60,6 +59,7 @@ export const DistributionChart: React.FC<DistributionChartProps> = (props) => {
         }))
       )
     );
+
     if (shapes.tag === "Error") {
       return (
         <ErrorAlert heading="Distribution Error">
@@ -81,6 +81,7 @@ export const DistributionChart: React.FC<DistributionChartProps> = (props) => {
       shape.discrete.concat(shape.continuous)
     );
 
+    console.log({domain, data: shapes.value})
     return (
       <div style={{ width: widthProp }}>
         {logX && shapes.value.some(hasMassBelowZero) ? (

packages/components/src/lib/distributionSpecBuilder.ts

@@ -145,7 +145,35 @@ export function buildVegaSpec(
       },
     ],
     marks: [
-     
+      {
+        name: "sample_distributions",
+        "type": "group",
+        from: {
+          facet: {
+            name: "distribution_facet",
+            data: "domain",
+            groupby: ["name"],
+          },
+        },  
+        marks: [
+          {
+            "name": "samples",
+            "type": "rect",
+            "from": {"data": "distribution_facet"},
+            "encode": {
+              "enter": {
+                "x": {"scale": "xscale", "field":"x"},
+                "width": {"value": 0.5},
+    
+                "y": {"value": 25, "offset": {"signal": "height"}},
+                "height": {"value": 5},
+                "fill": {"value": "steelblue"},
+                "fillOpacity": {"value": 0.8}
+              }
+            }
+          },
+        ]
+      },
       {
         name: "all_distributions",
         type: "group",
@@ -216,22 +244,7 @@ export function buildVegaSpec(
               },
             },
             marks: [
-              {
-                "name": "samples",
-                "type": "rect",
-                "from": {"data": "discrete_facet"},
-                "encode": {
-                  "enter": {
-                    "x": {"scale": "xscale", "field":"x"},
-                    "width": {"value": 1},
-        
-                    "y": {"value": 25, "offset": {"signal": "height"}},
-                    "height": {"value": 5},
-                    "fill": {"value": "steelblue"},
-                    "fillOpacity": {"value": 0.8}
-                  }
-                }
-              },
+    
               {
                 type: "rect",
                 from: {