click to select for pie charts + some histograms

5 files changed, 65 insertions, 14 deletions

diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.scss b/src/client/views/nodes/DataVizBox/DataVizBox.scss
index 424f8b0f1..b3cbc89aa 100644
--- a/src/client/views/nodes/DataVizBox/DataVizBox.scss
+++ b/src/client/views/nodes/DataVizBox/DataVizBox.scss
@@ -1,5 +1,5 @@
 .dataviz {
-    overflow: auto;
+    overflow: hidden;
     height: 100%;
 
     .datatype-button{
diff --git a/src/client/views/nodes/DataVizBox/components/Chart.scss b/src/client/views/nodes/DataVizBox/components/Chart.scss
index 6c3d59879..808300c2c 100644
--- a/src/client/views/nodes/DataVizBox/components/Chart.scss
+++ b/src/client/views/nodes/DataVizBox/components/Chart.scss
@@ -56,4 +56,8 @@
         // change the color of the circle element to be red
         fill: red;
     }
+
+    .selected-data{
+        text-align: center;
+    }
 }
diff --git a/src/client/views/nodes/DataVizBox/components/Histogram.tsx b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
index 34fc9ce82..b8be9bd13 100644
--- a/src/client/views/nodes/DataVizBox/components/Histogram.tsx
+++ b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
@@ -38,7 +38,7 @@ export class Histogram extends React.Component<HistogramProps> {
     private _histogramRef: React.RefObject<HTMLDivElement> = React.createRef();
     private _histogramSvg: d3.Selection<SVGGElement, unknown, null, undefined> | undefined;
     private numericalData: boolean = false;
-    @observable _currSelected: SelectedDataPoint | undefined = undefined;
+    @observable _currSelected: any | undefined = undefined;
     // TODO: nda - some sort of mapping that keeps track of the annotated points so we can easily remove when annotations list updates
 
     @computed get _histogramData() {
@@ -329,14 +329,33 @@ export class Histogram extends React.Component<HistogramProps> {
 
         const onPointClick = action((e: any) => {
             var pointerX = d3.pointer(e)[0];
+            var index = -1;
+            var sameAsCurrent: boolean;
             const selected = svg.selectAll('.histogram-bar').filter((d: any) => {
-                if ((d.x0*eachRectWidth ) <= pointerX && pointerX <= (d.x1*eachRectWidth )){
-                    console.log(d)
+                index++;
+                var left = this.numericalData? d.x0-1: d.x0;
+                var right = (this.numericalData && d.x0!=d.x1)? d.x1-1: d.x1;
+                if ((left*eachRectWidth ) <= pointerX && pointerX <= (right*eachRectWidth )){
+                    // var showSelected = !this.numericalData? dataSet[index] : this.props.pairs[index];
+                    var showSelected = dataSet[index]
+                    showSelected['frequency'] = d.length;
+                    console.log('showSelected', showSelected)
+                    console.log('current', this._currSelected)
+                    sameAsCurrent = this._currSelected? 
+                        (showSelected[Object.keys(showSelected)[0]]==this._currSelected![Object.keys(showSelected)[0]] 
+                      && showSelected[Object.keys(showSelected)[1]]==this._currSelected![Object.keys(showSelected)[1]])
+                        : false;
+                    this._currSelected = sameAsCurrent? undefined: showSelected;
                     return true
                 }
                 return false;
             });
-            selected.attr('class')=='histogram-bar hover'? selected.attr('class', 'histogram-bar'): selected.attr('class', 'histogram-bar hover')
+            // selected.attr('class')=='histogram-bar hover'? selected.attr('class', 'histogram-bar'): selected.attr('class', 'histogram-bar hover')
+            const elements = document.querySelectorAll('.histogram-bar');
+            for (let i = 0; i < elements.length; i++) {
+                elements[i].classList.remove('hover');
+            }
+            if (!sameAsCurrent!) selected.attr('class', 'histogram-bar hover');
         });
 
         svg.on('click', onPointClick);
@@ -367,10 +386,20 @@ export class Histogram extends React.Component<HistogramProps> {
 
     render() {
         
+        var selected: string;
+        if (this._currSelected){
+            selected = '{ ';
+            Object.keys(this._currSelected).map(key => {
+                key!=''? selected += key + ': ' + this._currSelected[key] + ', ': '';
+            })
+            selected = selected.substring(0, selected.length-2);
+            selected += ' }';
+        }
+        else selected = 'none';
         return (
             this.props.axes.length >= 1 && (this.incomingSelected? this.incomingSelected.length>0 : true) ? (
             <div ref={this._histogramRef} className="chart-container">
-                <span> {`Selected: ${Object.keys(this._histogramData[0])[0]}`}</span>
+                <span className={'selected-data'}> {`Selected: ${selected}`}</span>
             </div>
             ) : <span className="chart-container"> {'first use table view to select a column to graph'}</span>
         );
diff --git a/src/client/views/nodes/DataVizBox/components/LineChart.tsx b/src/client/views/nodes/DataVizBox/components/LineChart.tsx
index dfb9f54c1..cb6ba6fe7 100644
--- a/src/client/views/nodes/DataVizBox/components/LineChart.tsx
+++ b/src/client/views/nodes/DataVizBox/components/LineChart.tsx
@@ -339,7 +339,7 @@ export class LineChart extends React.Component<LineChartProps> {
         const selectedPt = this._currSelected ? `x: ${this._currSelected.x} y: ${this._currSelected.y}` : 'none';
         return (
             <div ref={this._lineChartRef} className="chart-container">
-                <span> {this.props.axes.length < 2 ? 'first use table view to select two axes to plot' : `Selected: ${selectedPt}`}</span>
+                <span className={'selected-data'}> {this.props.axes.length < 2 ? 'first use table view to select two axes to plot' : `Selected: ${selectedPt}`}</span>
             </div>
         );
     }
diff --git a/src/client/views/nodes/DataVizBox/components/PieChart.tsx b/src/client/views/nodes/DataVizBox/components/PieChart.tsx
index 0d3c74c32..6241e6221 100644
--- a/src/client/views/nodes/DataVizBox/components/PieChart.tsx
+++ b/src/client/views/nodes/DataVizBox/components/PieChart.tsx
@@ -38,7 +38,7 @@ export class PieChart extends React.Component<PieChartProps> {
     private _piechartRef: React.RefObject<HTMLDivElement> = React.createRef();
     private _piechartSvg: d3.Selection<SVGGElement, unknown, null, undefined> | undefined;
     private byCategory: boolean = true; // whether the data is organized by category or by specified number percentages/ratios
-    @observable _currSelected: SelectedDataPoint | undefined = undefined;
+    @observable _currSelected: any | undefined = undefined;
     // TODO: nda - some sort of mapping that keeps track of the annotated points so we can easily remove when annotations list updates
 
     @computed get _piechartData() {
@@ -284,8 +284,8 @@ export class PieChart extends React.Component<PieChartProps> {
         const onPointClick = action((e: any) => {
             // check the 4 'corners' of each slice and see if the pointer is within those bounds to get the slice the user clicked on
             const pointer = d3.pointer(e);
-            var selectedSlice;
             var index = -1;
+            var sameAsCurrent: boolean;
             const selected = svg.selectAll('.slice').filter((d: any) => {
                 index++;
                 var p1 = [0,0];
@@ -305,14 +305,22 @@ export class PieChart extends React.Component<PieChartProps> {
                 if (Math.min(p4[1], p1[1])<=pointer[1] && pointer[1]<=Math.max(p4[1], p1[1])){
                     if (pointer[0] <= (pointer[1]-p4[1])*(p1[0]-p4[0])/(p1[1]-p4[1])+p4[0]) lineCrossCount++; }
                 if (lineCrossCount % 2 != 0) {
-                    selectedSlice = pieDataSet[index];
+                    var showSelected = this.byCategory? pieDataSet[index] : this.props.pairs[index];
+                    sameAsCurrent = (this.byCategory && this._currSelected)? 
+                        (showSelected[Object.keys(showSelected)[0]]==this._currSelected![Object.keys(showSelected)[0]] 
+                      && showSelected[Object.keys(showSelected)[1]]==this._currSelected![Object.keys(showSelected)[1]])
+                        : 
+                        this._currSelected===showSelected;
+                    this._currSelected = sameAsCurrent? undefined: showSelected;
                     return true;
                 }
                 return false;
             });
-            console.log('selectedSlice', selectedSlice)
-            
-            selected.attr('class')=='slice hover'? selected.attr('class', 'slice'): selected.attr('class', 'slice hover')
+            const elements = document.querySelectorAll('.slice');
+            for (let i = 0; i < elements.length; i++) {
+                elements[i].classList.remove('hover');
+            }
+            if (!sameAsCurrent!) selected.attr('class', 'slice hover');
         });
 
         var percentField = Object.keys(pieDataSet[0])[0]
@@ -352,10 +360,20 @@ export class PieChart extends React.Component<PieChartProps> {
 
     render() {
 
+        var selected: string;
+        if (this._currSelected){
+            selected = '{ ';
+            Object.keys(this._currSelected).map(key => {
+                key!=''? selected += key + ': ' + this._currSelected[key] + ', ': '';
+            })
+            selected = selected.substring(0, selected.length-2);
+            selected += ' }';
+        }
+        else selected = 'none';
         return (
             this.props.axes.length >= 1 && (this.incomingSelected? this.incomingSelected.length>0 : true) ? (
             <div ref={this._piechartRef} className="chart-container">
-                <span> {`Selected: ${Object.keys(this._piechartData[0])[0]}`}</span>
+                <span className={'selected-data'}> {`Selected: ${selected}`}</span>
             </div>
             ) : <span className="chart-container"> {'first use table view to select a column to graph'}</span>
         );