cleaned up highlighting selected points in lineChart

1 files changed, 23 insertions, 46 deletions

diff --git a/src/client/views/nodes/DataVizBox/components/LineChart.tsx b/src/client/views/nodes/DataVizBox/components/LineChart.tsx
index d055d269c..c2f5388a2 100644
--- a/src/client/views/nodes/DataVizBox/components/LineChart.tsx
+++ b/src/client/views/nodes/DataVizBox/components/LineChart.tsx
@@ -1,6 +1,6 @@
 import { Button, EditableText, Size } from 'browndash-components';
 import * as d3 from 'd3';
-import { IReactionDisposer, action, computed, makeObservable, observable } from 'mobx';
+import { IReactionDisposer, action, computed, makeObservable, observable, reaction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
 import { Doc, NumListCast, StrListCast } from '../../../../../fields/Doc';
@@ -52,6 +52,13 @@ export class LineChart extends ObservableReactComponent<LineChartProps> {
         makeObservable(this);
     }
 
+    @computed get titleAccessor() {
+        let titleAccessor: any = 'dataViz_lineChart_title';
+        if (this._props.axes.length === 2) titleAccessor = titleAccessor + this._props.axes[0] + '-' + this._props.axes[1];
+        else if (this._props.axes.length > 0) titleAccessor += this._props.axes[0];
+        return titleAccessor;
+    }
+
     @computed get _tableDataIds() {
         return !this.parentViz ? this._props.records.map((rec, i) => i) : NumListCast(this.parentViz.dataViz_selectedRows);
     }
@@ -84,7 +91,9 @@ export class LineChart extends ObservableReactComponent<LineChartProps> {
     }
     componentDidMount() {
         // coloring the selected point
-        this.colorSelectedPt();
+        if (!this._props.layoutDoc[this.titleAccessor]) this._props.layoutDoc[this.titleAccessor] = this.defaultGraphTitle;
+        if (!this._props.layoutDoc.dataViz_lineChart_selectedData) this._props.layoutDoc.dataViz_lineChart_selectedData = new List<string>();
+        this._disposers.selector = reaction(() => StrListCast(this._props.layoutDoc.dataViz_lineChart_selectedData).slice(), this.colorSelectedPts, { fireImmediately: true });
     }
 
     // anything that doesn't need to be recalculated should just be stored as drawCharts (i.e. computed values) and drawChart is gonna iterate over these observables and generate svgs based on that
@@ -98,19 +107,6 @@ export class LineChart extends ObservableReactComponent<LineChartProps> {
         }
     };
 
-    // draws red annotation on data points when selected
-    drawAnnotations = (dataX: number, dataY: number, selected?: boolean) => {
-        const elements = document.querySelectorAll('.datapoint');
-        for (let i = 0; i < elements.length; i++) {
-            const element = elements[i];
-            const x = element.getAttribute('data-x');
-            const y = element.getAttribute('data-y');
-            if (x === dataX.toString() && y === dataY.toString()) {
-                element.classList.add(selected ? 'selected' : 'brushed');
-            }
-        }
-    };
-
     // create a document anchor that stores whatever is needed to reconstruct the viewing state (selection,zoom,etc)
     getAnchor = (pinProps?: PinProps) => {
         const anchor = Docs.Create.ConfigDocument({
@@ -122,23 +118,20 @@ export class LineChart extends ObservableReactComponent<LineChartProps> {
         return anchor;
     };
 
-    private colorSelectedPt() {
+    private colorSelectedPts = () => {
         const elements = document.querySelectorAll('.datapoint');
         for (let i = 0; i < elements.length; i++) {
-            const x = Number(elements[i].getAttribute('data-x'));
-            const y = Number(elements[i].getAttribute('data-y'));
+            const dx = Number(elements[i].getAttribute('data-x'));
+            const dy = Number(elements[i].getAttribute('data-y'));
             const selectedDataBars = StrListCast(this._props.layoutDoc.dataViz_lineChart_selectedData);
-            let selected = false;
-            selectedDataBars.forEach(eachSelectedData => {
-                // parse each selected point into x,y
-                const xy = eachSelectedData.split(',');
-                if (Number(xy[0]) === x && Number(xy[1]) === y) selected = true;
+            const selected = selectedDataBars.some(eachSelectedData => {
+                const [sx, sy] = eachSelectedData.split(','); // parse each selected point into x,y
+                return Number(sx) === dx && Number(sy) === dy;
             });
-            if (selected) {
-                this.drawAnnotations(x, y, false);
-            }
+            if (selected) elements[i].classList.add('brushed');
+            else elements[i].classList.remove('brushed');
         }
-    }
+    };
 
     @computed get height() {
         return this._props.height - this._props.margin.top - this._props.margin.bottom;
@@ -195,17 +188,6 @@ export class LineChart extends ObservableReactComponent<LineChartProps> {
                 }
             });
         }
-
-        // coloring the selected point
-        const elements = document.querySelectorAll('.datapoint');
-        for (let i = 0; i < elements.length; i++) {
-            const x = Number(elements[i].getAttribute('data-x'));
-            const y = Number(elements[i].getAttribute('data-y'));
-            if (x === d.x && y === d.y) {
-                if (ptWasSelected) elements[i].classList.remove('brushed');
-                else elements[i].classList.add('brushed');
-            }
-        }
     }
 
     drawDataPoints(data: DataPoint[], idx: number, xScale: d3.ScaleLinear<number, number, never>, yScale: d3.ScaleLinear<number, number, never>, higlightFocusPt: any, tooltip: any) {
@@ -234,7 +216,6 @@ export class LineChart extends ObservableReactComponent<LineChartProps> {
                     // find .circle-d1 with data-x = d0.x and data-y = d0.y
                     this.setCurrSelected(d0);
                     this.updateTooltip(higlightFocusPt, xScale, d0, yScale, tooltip);
-                    this.colorSelectedPt();
                 });
         }
     }
@@ -341,6 +322,7 @@ export class LineChart extends ObservableReactComponent<LineChartProps> {
             .attr('width', 20)
             .style('text-anchor', 'middle')
             .text(this._props.axes[1]);
+        this.colorSelectedPts();
     };
 
     private updateTooltip(
@@ -360,11 +342,6 @@ export class LineChart extends ObservableReactComponent<LineChartProps> {
     }
 
     render() {
-        let titleAccessor: any = 'dataViz_lineChart_title';
-        if (this._props.axes.length === 2) titleAccessor = titleAccessor + this._props.axes[0] + '-' + this._props.axes[1];
-        else if (this._props.axes.length > 0) titleAccessor += this._props.axes[0];
-        if (!this._props.layoutDoc[titleAccessor]) this._props.layoutDoc[titleAccessor] = this.defaultGraphTitle;
-        if (!this._props.layoutDoc.dataViz_lineChart_selectedData) this._props.layoutDoc.dataViz_lineChart_selectedData = new List<string>();
         const selectedPt = this._currSelected ? `{ ${this._props.axes[0]}: ${this._currSelected.x} ${this._props.axes[1]}: ${this._currSelected.y} }` : 'none';
         let selectedTitle = '';
         if (this._currSelected && this._props.titleCol) {
@@ -382,10 +359,10 @@ export class LineChart extends ObservableReactComponent<LineChartProps> {
                 <div className="chart-container" style={{ width: this._props.width + this._props.margin.right }}>
                     <div className="graph-title">
                         <EditableText
-                            val={StrCast(this._props.layoutDoc[titleAccessor])}
+                            val={StrCast(this._props.layoutDoc[this.titleAccessor])}
                             setVal={undoable(
                                 action(val => {
-                                    this._props.layoutDoc[titleAccessor] = val as string;
+                                    this._props.layoutDoc[this.titleAccessor] = val as string;
                                 }),
                                 'Change Graph Title'
                             )}