filter one histogram bar onto child dataviz doc at a time

4 files changed, 36 insertions, 6 deletions

diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.scss b/src/client/views/nodes/DataVizBox/DataVizBox.scss
index e9a346fbe..a4f9dba73 100644
--- a/src/client/views/nodes/DataVizBox/DataVizBox.scss
+++ b/src/client/views/nodes/DataVizBox/DataVizBox.scss
@@ -32,6 +32,10 @@
     .liveSchema-checkBox {
         margin-bottom: -35px;
     }
+    .filterData-checkBox {
+        margin-left: 10px;
+        margin-bottom: -10px;
+    }
     
     .displaySchemaLive {
         margin-bottom: 20px;
diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.tsx b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
index a6de64d85..f316c6e0f 100644
--- a/src/client/views/nodes/DataVizBox/DataVizBox.tsx
+++ b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
@@ -347,7 +347,7 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() im
             axes: this.axes,
             titleCol: this.titleCol,
             //width: this.SidebarShown? this._props.PanelWidth()*.9/1.2: this._props.PanelWidth() * 0.9,
-            height: (this._props.PanelHeight() / scale - 32) /* height of 'change view' button */ * 0.9,
+            height: (this._props.PanelHeight() / scale - 55) /* height of 'change view' button */ * 0.8,
             width: ((this._props.PanelWidth() - this.sidebarWidth()) / scale) * 0.9,
             margin: { top: 10, right: 25, bottom: 75, left: 45 },
         };
@@ -401,11 +401,20 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() im
         GPTPopup.Instance.addDoc = this.sidebarAddDocument;
     };
 
+    // represents whether or not a data viz box created from a schema table displays live updates to the canvas
     @action
     changeLiveSchemaCheckbox = () => {
         this.layoutDoc.dataViz_schemaLive = !this.layoutDoc.dataViz_schemaLive
     }
 
+    // represents whether or not clicking on a peice of data in the visualization 
+    //      (i.e. a data point in a linechart, a bar on a histogram, or a slice of a pie chart)
+    //      filters the data onto a new data viz doc created off of this one
+    @action
+    changeFilteringCheckbox = () => {
+        this.layoutDoc.dataViz_filterSelection = !this.layoutDoc.dataViz_filterSelection
+    }
+
     specificContextMenu = (e: React.MouseEvent): void => {
         const cm = ContextMenu.Instance;
         const options = cm.findByDescription('Options...');
@@ -481,11 +490,17 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() im
                 {(this.layoutDoc && this.layoutDoc.dataViz_asSchema)?(
                     <div className={'displaySchemaLive'}>
                         <div className={'liveSchema-checkBox'} style={{ width: this._props.width }}>
-                        <Checkbox color="primary" onChange={this.changeLiveSchemaCheckbox} checked={this.layoutDoc.dataViz_schemaLive as boolean} />
-                        Display Live Updates to Canvas
+                            <Checkbox color="primary" onChange={this.changeLiveSchemaCheckbox} checked={this.layoutDoc.dataViz_schemaLive as boolean} />
+                            Display Live Updates to Canvas
+                        </div>
                     </div>
-                </div>
                 ) : null}
+                {this.layoutDoc._dataViz != DataVizView.TABLE?(
+                    <div className={'filterData-checkBox'}>
+                        <Checkbox color="primary" onChange={this.changeFilteringCheckbox} checked={this.layoutDoc.dataViz_filterSelection as boolean} />
+                        Select data to filter
+                    </div>)
+                : null }
 
                 {this.renderVizView}
 
diff --git a/src/client/views/nodes/DataVizBox/components/Chart.scss b/src/client/views/nodes/DataVizBox/components/Chart.scss
index cf0007cfd..47cad9649 100644
--- a/src/client/views/nodes/DataVizBox/components/Chart.scss
+++ b/src/client/views/nodes/DataVizBox/components/Chart.scss
@@ -15,8 +15,7 @@
         font-size: larger;
         display: flex;
         flex-direction: row;
-        margin-top: -20px;
-        margin-bottom: -20px;
+        margin-top: -35px;
     }
     .asHistogram-checkBox {
         align-items: left;
diff --git a/src/client/views/nodes/DataVizBox/components/Histogram.tsx b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
index 6672603f3..ff0262c15 100644
--- a/src/client/views/nodes/DataVizBox/components/Histogram.tsx
+++ b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
@@ -164,6 +164,18 @@ export class Histogram extends ObservableReactComponent<HistogramProps> {
                     sameAsCurrent = this._currSelected ? showSelected[xAxisTitle] == this._currSelected![xAxisTitle] && showSelected[yAxisTitle] == this._currSelected![yAxisTitle] : false;
                     this._currSelected = sameAsCurrent ? undefined : showSelected;
                     this.selectedData = sameAsCurrent ? undefined : d;
+
+                    // for filtering child dataviz docs
+                    const selectedRows = Cast(this._props.layoutDoc.dataViz_selectedRows, listSpec('number'), null);
+                    this._tableDataIds.forEach(rowID => {
+                        let match = true;
+                        Object.keys(showSelected).map(key => {
+                            if(key!='frequency' && this._props.records[rowID][key]!=showSelected[key]){
+                                match = false;
+                            }
+                        })
+                        if (match && !selectedRows?.includes(rowID)) selectedRows?.push(rowID);
+                    })
                 } else this.hoverOverData = d;
                 return true;
             }