From 36a34ed8b3be3f0db156fcce09842a2c45193cea Mon Sep 17 00:00:00 2001
From: srichman333 <sarah_n_richman@brown.edu>
Date: Mon, 7 Aug 2023 15:03:45 -0400
Subject: histogram hover vs click

---
 .../nodes/DataVizBox/components/Histogram.tsx      | 81 ++++++++++++++--------
 1 file changed, 52 insertions(+), 29 deletions(-)

(limited to 'src')

diff --git a/src/client/views/nodes/DataVizBox/components/Histogram.tsx b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
index cb882cf4a..092718e17 100644
--- a/src/client/views/nodes/DataVizBox/components/Histogram.tsx
+++ b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
@@ -46,6 +46,7 @@ export class Histogram extends React.Component<HistogramProps> {
     @observable _currSelected: any | undefined = undefined;
     private curBarSelected: any = undefined;
     private selectedData: any = undefined;
+    private hoverOverData: 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() {
@@ -214,6 +215,39 @@ export class Histogram extends React.Component<HistogramProps> {
         return data;
     }
 
+    highlightSelectedBar = (changeSelectedVariables: boolean, svg: any, eachRectWidth: any, pointerX: any, xAxisTitle: any, yAxisTitle: any, histDataSet: any) => {
+        var sameAsCurrent: boolean;
+        var barCounter = -1;
+        const selected = svg.selectAll('.histogram-bar').filter((d: any) => {
+            barCounter++;
+            if ((barCounter*eachRectWidth ) <= pointerX && pointerX <= ((barCounter+1)*eachRectWidth)){
+                var showSelected = this.numericalYData? this._histogramData.filter((data: { [x: string]: any; }) => data[xAxisTitle].replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, '')==d[0])[0] 
+                : histDataSet.filter((data: { [x: string]: any; }) => data[xAxisTitle].replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, '')==d[0])[0];
+                if (this.numericalXData){
+                    if (d[0] && d[1] && d[0]!=d[1]){
+                        showSelected = {[xAxisTitle]: (d3.min(d) + " to " + d3.max(d)), frequency: d.length}
+                    }
+                    else if (!this.numericalYData) showSelected = {[xAxisTitle]: showSelected[xAxisTitle], frequency: d.length}
+                } 
+                if (changeSelectedVariables){
+                    sameAsCurrent = this._currSelected? 
+                        (showSelected[xAxisTitle]==this._currSelected![xAxisTitle] 
+                    && showSelected[yAxisTitle]==this._currSelected![yAxisTitle])
+                        : false;
+                    this._currSelected = sameAsCurrent? undefined: showSelected;
+                    this.selectedData = sameAsCurrent? undefined: d;
+                }
+                else this.hoverOverData = d;
+                return true
+            }
+            return false;
+        });
+        if (changeSelectedVariables){
+            if (sameAsCurrent!) this.curBarSelected = undefined;
+            else this.curBarSelected = selected;
+        }
+    }
+
     drawChart = (dataSet: any, width: number, height: number) => {
         d3.select(this._histogramRef.current).select('svg').remove();
         d3.select(this._histogramRef.current).select('.tooltip').remove();
@@ -320,35 +354,24 @@ export class Histogram extends React.Component<HistogramProps> {
             .attr("transform", "translate(" + translateXAxis + ", " + height + ")")
             .call(xAxis)
         
-        const onPointClick = action((e: any) => {
-            var pointerX = d3.pointer(e)[0];
-            var sameAsCurrent: boolean;
-            var barCounter = -1;
-            const selected = svg.selectAll('.histogram-bar').filter((d: any) => {
-                barCounter++;
-                if ((barCounter*eachRectWidth ) <= pointerX && pointerX <= ((barCounter+1)*eachRectWidth)){
-                    var showSelected = this.numericalYData? this._histogramData.filter((data: { [x: string]: any; }) => data[xAxisTitle].replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, '')==d[0])[0] 
-                    : histDataSet.filter((data: { [x: string]: any; }) => data[xAxisTitle].replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, '')==d[0])[0];
-                    if (this.numericalXData){
-                        if (d[0] && d[1] && d[0]!=d[1]){
-                            showSelected = {[xAxisTitle]: (d3.min(d) + " to " + d3.max(d)), frequency: d.length}
-                        }
-                        else if (!this.numericalYData) showSelected = {[xAxisTitle]: showSelected[xAxisTitle], frequency: d.length}
-                    } 
-                    sameAsCurrent = this._currSelected? 
-                        (showSelected[xAxisTitle]==this._currSelected![xAxisTitle] 
-                      && showSelected[yAxisTitle]==this._currSelected![yAxisTitle])
-                        : false;
-                    this._currSelected = sameAsCurrent? undefined: showSelected;
-                    this.selectedData = sameAsCurrent? undefined: d;
-                    return true
-                }
-                return false;
-            });
-            if (sameAsCurrent!) this.curBarSelected = undefined;
-            else this.curBarSelected = selected;
-        });
-        svg.on('click', onPointClick);
+        const onPointClick = action((e: any) => this.highlightSelectedBar(true, svg, eachRectWidth, d3.pointer(e)[0], xAxisTitle, yAxisTitle, histDataSet));
+        const onHover = action((e: any) => {
+            const selected = this.highlightSelectedBar(false, svg, eachRectWidth, d3.pointer(e)[0], xAxisTitle, yAxisTitle, histDataSet)
+            updateHighlights();
+        })
+        const mouseOut = action((e: any) => {
+            this.hoverOverData = undefined;
+            updateHighlights();
+        })
+        const updateHighlights = () => {
+            const hoverOverBar = this.hoverOverData;
+            const selectedData = this.selectedData;
+            svg.selectAll('rect').attr("class", function(d) { return ((hoverOverBar && hoverOverBar[0]==d[0]) || selectedData && selectedData[0]==d[0])? 'histogram-bar hover' : 'histogram-bar'; })
+        }
+
+        svg.on('click', onPointClick)
+            .on('mouseover', onHover)
+            .on('mouseout', mouseOut)
 
         var selected = this.selectedData;
         svg.append("text")
-- 
cgit v1.2.3-70-g09d2