bars stay selected on refresh / componentdidmount

1 files changed, 44 insertions, 4 deletions

diff --git a/src/client/views/nodes/DataVizBox/components/Histogram.tsx b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
index 14cfda559..12e2be341 100644
--- a/src/client/views/nodes/DataVizBox/components/Histogram.tsx
+++ b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
@@ -105,11 +105,29 @@ export class Histogram extends ObservableReactComponent<HistogramProps> {
         Array.from(Object.keys(this._disposers)).forEach(key => this._disposers[key]());
     }
     componentDidMount() {
+        // draw histogram
         this._disposers.chartData = reaction(
             () => ({ dataSet: this._histogramData, w: this.width, h: this.height }),
             ({ dataSet, w, h }) => dataSet!.length > 0 && this.drawChart(dataSet, w, h),
             { fireImmediately: true }
         );
+
+        // restore selected bars
+        var svg = this._histogramSvg;
+        if (svg) {
+            const selectedDataBars = StrListCast(this._props.layoutDoc.dataViz_histogram_selectedData)
+            svg.selectAll('rect').attr('class', (d: any) => {
+                let selected = false;
+                selectedDataBars.map(eachSelectedData => {
+                    if (d[0]==eachSelectedData) selected = true;
+                })
+                if (selected){
+                    this.selectedData.push(d);
+                    return 'histogram-bar hover'
+                }
+                else return 'histogram-bar';
+            });
+        }
     }
 
     @action
@@ -164,6 +182,7 @@ export class Histogram extends ObservableReactComponent<HistogramProps> {
                     // for when a bar is selected - not just hovered over
                     sameAsCurrent = this._currSelected ? showSelected[xAxisTitle] == this._currSelected![xAxisTitle] && showSelected[yAxisTitle] == this._currSelected![yAxisTitle] : false;
                     let sameAsAny = false;
+                    const selectedDataBars = Cast(this._props.layoutDoc.dataViz_histogram_selectedData, listSpec('number'), null);
                     this.selectedData.map(eachData => {
                         if (!sameAsAny){
                             let match = true;
@@ -174,14 +193,17 @@ export class Histogram extends ObservableReactComponent<HistogramProps> {
                                 sameAsAny = true;
                                 let index = this.selectedData.indexOf(eachData)
                                 this.selectedData.splice(index, 1);
+                                selectedDataBars.splice(index, 1);
                                 this._currSelected = undefined;
                             }
                         }
                     })
                     if(!sameAsAny) {
                         this.selectedData.push(d);
+                        selectedDataBars.push(d[0]);
                         this._currSelected = this.selectedData.length>1? undefined : showSelected;
                     }
+                    console.log(selectedDataBars.length)
 
                     // for filtering child dataviz docs
                     if (this._props.layoutDoc.dataViz_filterSelection){
@@ -357,7 +379,6 @@ export class Histogram extends ObservableReactComponent<HistogramProps> {
                     if (d[0]==eachSelectedData[0]) selected = true;
                 })
                 return (hoverOverBar && hoverOverBar[0] == d[0]) || selected ? 'histogram-bar hover' : 'histogram-bar';
-                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);
@@ -451,9 +472,11 @@ export class Histogram extends ObservableReactComponent<HistogramProps> {
         barColors.forEach(each => each.split('::')[0] === barName && barColors.splice(barColors.indexOf(each), 1));
     };
 
-    updateBarColors = () => {
+    // reloads the bar colors and selected bars
+    updateSavedUI = () => {
         var svg = this._histogramSvg;
-        if (svg)
+        if (svg) {
+            // bar color
             svg.selectAll('rect').attr('fill', (d: any) => {
                 var barColor;
                 const barColors = StrListCast(this._props.layoutDoc.dataViz_histogram_barColors).map(each => each.split('::'));
@@ -466,10 +489,26 @@ export class Histogram extends ObservableReactComponent<HistogramProps> {
                 });
                 return barColor ? StrCast(barColor) : StrCast(this._props.layoutDoc.dataViz_histogram_defaultColor);
             });
+            // selected bars
+            // const selectedDataBars = StrListCast(this._props.layoutDoc.dataViz_histogram_selectedData)
+            // let filledSelectedData = this.selectedData.length>0;
+            // console.log(selectedDataBars.length)
+            // svg.selectAll('rect').attr('class', (d: any) => {
+            //     let selected = false;
+            //     selectedDataBars.map(eachSelectedData => {
+            //         if (d[0]==eachSelectedData) selected = true;
+            //     })
+            //     if (selected){
+            //         if (!filledSelectedData) this.selectedData.push(d);
+            //         return 'histogram-bar hover'
+            //     }
+            //     else return 'histogram-bar';
+            // });
+        }
     };
 
     render() {
-        this.updateBarColors();
+        this.updateSavedUI();
         this._histogramData;
         var curSelectedBarName = '';
         var titleAccessor: any = 'dataViz_histogram_title';
@@ -478,6 +517,7 @@ export class Histogram extends ObservableReactComponent<HistogramProps> {
         if (!this._props.layoutDoc[titleAccessor]) this._props.layoutDoc[titleAccessor] = this.defaultGraphTitle;
         if (!this._props.layoutDoc.dataViz_histogram_defaultColor) this._props.layoutDoc.dataViz_histogram_defaultColor = '#69b3a2';
         if (!this._props.layoutDoc.dataViz_histogram_barColors) this._props.layoutDoc.dataViz_histogram_barColors = new List<string>();
+        if (!this._props.layoutDoc.dataViz_histogram_selectedData) this._props.layoutDoc.dataViz_histogram_selectedData = new List<string>();
         var selected = 'none';
         if (this._currSelected) {
             curSelectedBarName = StrCast(this._currSelected![this._props.axes[0]].replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, ''));