last

1 files changed, 16 insertions, 2 deletions

diff --git a/src/client/views/nodes/DataVizBox/components/Histogram.tsx b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
index 46a264386..68cb768d1 100644
--- a/src/client/views/nodes/DataVizBox/components/Histogram.tsx
+++ b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
@@ -45,6 +45,7 @@ export class Histogram extends React.Component<HistogramProps> {
     private maxBins = 15; // maximum number of bins that is readable on a normal sized doc
     @observable _currSelected: any | undefined = undefined;
     private curBarSelected: any = undefined;
+    private selectTry: any = 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() {
@@ -376,23 +377,32 @@ export class Histogram extends React.Component<HistogramProps> {
                       && showSelected[yAxisTitle]==this._currSelected![yAxisTitle])
                         : false;
                     this._currSelected = sameAsCurrent? undefined: showSelected;
+                    this.selectTry = sameAsCurrent? undefined: d;
                     return true
                 }
                 return false;
             });
+            // console.log(this.curBarSelected.groups[0][0].data==selected)
             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');
-            if (sameAsCurrent!) this.curBarSelected = undefined;
+            if (sameAsCurrent!) {
+                selected.attr('class', 'histogram-bar')
+                this.curBarSelected = undefined;
+            }
             else {
                 selected.attr('class', 'histogram-bar hover')
+                selected.attr('stroke', 'blue')
                 this.curBarSelected = selected;
             }
+            console.log(this._currSelected)
+            console.log(this.selectTry)
         });
         svg.on('click', onPointClick);
 
+        var selected = this.selectTry;
         svg.append("text")
             .attr("transform", "translate(" + (width/2) + " ," + (height+40) + ")")
             .style("text-anchor", "middle")
@@ -423,7 +433,11 @@ export class Histogram extends React.Component<HistogramProps> {
                     : function(d) { 
                         return height - y(d.length)})
               .attr("width", eachRectWidth)
-              .attr("class", 'histogram-bar')
+              .attr("class", selected? 
+                    function(d) {
+                        console.log(d[0]==selected[0], d)
+                        return (selected && selected[0]==d[0])? 'histogram-bar hover' : 'histogram-bar';
+                    }: function(d) {return 'histogram-bar'})
               .attr("fill", (d)=>{ return this.props.layoutDoc['histogramBarColors-'+d[0]]? StrCast(this.props.layoutDoc['histogramBarColors-'+d[0]]) : StrCast(this.props.layoutDoc['defaultHistogramColor'])})
     };