include sample band on sampleset story

packages/components/src/components/DistributionChart.tsx

@@ -110,6 +110,8 @@ export const DistributionChart: React.FC<DistributionChartProps> = (props) => {
           })
         : shapes.value;
 
+    console.log({ data });
+    
     return (
       <div style={{ width: widthProp }}>
         {logX && shapes.value.some(hasMassBelowZero) ? (

packages/components/src/components/SquiggleChart.tsx

@@ -51,7 +51,9 @@ export interface SquiggleChartProps {
   minX?: number;
   /** Specify the upper bound of the x scale */
   maxX?: number;
-  // /** Whether the x-axis should be dates or numbers */
+  // /** Whether to include the sample band below the chart */
+  sample?: boolean;
+  /** Whether the x-axis should be dates or numbers */
   xAxis?: "number" | "dateTime";
   /** Whether to show vega actions to the user, so they can copy the chart spec */
   distributionChartActions?: boolean;
@@ -81,6 +83,7 @@ export const SquiggleChart: React.FC<SquiggleChartProps> = React.memo(
     maxX,
     color,
     title,
+    sample = false,
     xAxis = "number",
     distributionChartActions,
     enableLocalSettings = false,
@@ -93,7 +96,7 @@ export const SquiggleChart: React.FC<SquiggleChartProps> = React.memo(
       onChange,
       executionId,
     });
-
+    console.log({ result });
     const distributionPlotSettings = {
       showSummary,
       logX,
@@ -104,6 +107,7 @@ export const SquiggleChart: React.FC<SquiggleChartProps> = React.memo(
       color,
       title,
       xAxis,
+      sample,
       actions: distributionChartActions,
     };
 

packages/components/src/lib/distributionSpecBuilder.ts

@@ -218,6 +218,7 @@ export function buildVegaSpec(
                   },
                 },
               },
+             
             ],
           },
           {

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

@@ -59,6 +59,7 @@ could be continuous, discrete or mixed.
     args={{
       code: "SampleSet.fromDist(normal(5,2))",
       width,
+      sample: true,
     }}
   >
     {Template.bind({})}
@@ -85,7 +86,7 @@ could be continuous, discrete or mixed.
   <Story
     name="Date Distribution"
     args={{
-      code: "mx(10^12, 10^12 + 10^11, 10^12 + 2 * 10^11)",
+      code: "mx(1661819770311, 1661829770311, 1661839770311)",
       width,
       xAxis: "dateTime",
       width,