From 07b7b26d605d18164910371cf77a2d0066a8d754 Mon Sep 17 00:00:00 2001
From: Conor Barnes <conorbarnes93@gmail.com>
Date: Tue, 30 Aug 2022 09:14:25 -0300
Subject: [PATCH] include sample band on sampleset story

---
 packages/components/src/components/DistributionChart.tsx  | 2 ++
 packages/components/src/components/SquiggleChart.tsx      | 8 ++++++--
 packages/components/src/lib/distributionSpecBuilder.ts    | 1 +
 packages/components/src/stories/SquiggleChart.stories.mdx | 3 ++-
 4 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/packages/components/src/components/DistributionChart.tsx b/packages/components/src/components/DistributionChart.tsx
index 1cedc372..1a055ea9 100644
--- a/packages/components/src/components/DistributionChart.tsx
+++ b/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) ? (
diff --git a/packages/components/src/components/SquiggleChart.tsx b/packages/components/src/components/SquiggleChart.tsx
index 7bc2e737..2d05c1be 100644
--- a/packages/components/src/components/SquiggleChart.tsx
+++ b/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,
     };
 
diff --git a/packages/components/src/lib/distributionSpecBuilder.ts b/packages/components/src/lib/distributionSpecBuilder.ts
index b1f49f23..07253c4c 100644
--- a/packages/components/src/lib/distributionSpecBuilder.ts
+++ b/packages/components/src/lib/distributionSpecBuilder.ts
@@ -218,6 +218,7 @@ export function buildVegaSpec(
                   },
                 },
               },
+             
             ],
           },
           {
diff --git a/packages/components/src/stories/SquiggleChart.stories.mdx b/packages/components/src/stories/SquiggleChart.stories.mdx
index 2a4aa48d..72f708d7 100644
--- a/packages/components/src/stories/SquiggleChart.stories.mdx
+++ b/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,