From 29b70db45b0d5da8cb163ccb062afe4579556fde Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Tue, 14 May 2024 23:50:41 -0400
Subject: fixed line chart rendering to update

---
 .../nodes/DataVizBox/components/LineChart.tsx      | 37 +++++++---------------
 1 file changed, 11 insertions(+), 26 deletions(-)

(limited to 'src')

diff --git a/src/client/views/nodes/DataVizBox/components/LineChart.tsx b/src/client/views/nodes/DataVizBox/components/LineChart.tsx
index 80edf2c36..ffced14f8 100644
--- a/src/client/views/nodes/DataVizBox/components/LineChart.tsx
+++ b/src/client/views/nodes/DataVizBox/components/LineChart.tsx
@@ -42,7 +42,7 @@ export interface LineChartProps {
 @observer
 export class LineChart extends ObservableReactComponent<LineChartProps> {
     private _disposers: { [key: string]: IReactionDisposer } = {};
-    private _lineChartRef: React.RefObject<HTMLDivElement> = React.createRef();
+    private _lineChartRef: HTMLDivElement | null = null;
     private _lineChartSvg: d3.Selection<SVGGElement, unknown, null, undefined> | undefined;
     @observable _currSelected: DataPoint | undefined = undefined;
 
@@ -83,17 +83,6 @@ export class LineChart extends ObservableReactComponent<LineChartProps> {
         Array.from(Object.keys(this._disposers)).forEach(key => this._disposers[key]());
     }
     componentDidMount() {
-        // draw chart
-        this._disposers.chartData = reaction(
-            () => ({ dataSet: this._lineChartData, w: this.width, h: this.height }),
-            ({ dataSet, w, h }) => {
-                if (dataSet) {
-                    this.drawChart([dataSet], this.rangeVals, w, h);
-                }
-            },
-            { fireImmediately: true }
-        );
-
         // coloring the selected point
         this.colorSelectedPt();
     }
@@ -169,16 +158,7 @@ export class LineChart extends ObservableReactComponent<LineChartProps> {
     }
 
     setupTooltip() {
-        return d3
-            .select(this._lineChartRef.current)
-            .append('div')
-            .attr('class', 'tooltip')
-            .style('opacity', 0)
-            .style('background', '#fff')
-            .style('border', '1px solid #ccc')
-            .style('padding', '5px')
-            .style('position', 'absolute')
-            .style('font-size', '12px');
+        return d3.select(this._lineChartRef).append('div').attr('class', 'tooltip').style('opacity', 0).style('background', '#fff').style('border', '1px solid #ccc').style('padding', '5px').style('position', 'absolute').style('font-size', '12px');
     }
 
     @action
@@ -261,8 +241,8 @@ export class LineChart extends ObservableReactComponent<LineChartProps> {
 
     drawChart = (dataSet: any[][], rangeVals: { xMin?: number; xMax?: number; yMin?: number; yMax?: number }, width: number, height: number) => {
         // clearing tooltip and the current chart
-        d3.select(this._lineChartRef.current).select('svg').remove();
-        d3.select(this._lineChartRef.current).select('.tooltip').remove();
+        d3.select(this._lineChartRef).select('svg').remove();
+        d3.select(this._lineChartRef).select('.tooltip').remove();
 
         let { xMin, xMax, yMin, yMax } = rangeVals;
         if (xMin === undefined || xMax === undefined || yMin === undefined || yMax === undefined) {
@@ -272,7 +252,7 @@ export class LineChart extends ObservableReactComponent<LineChartProps> {
         // adding svg
         const { margin } = this._props;
         const svg = (this._lineChartSvg = d3
-            .select(this._lineChartRef.current)
+            .select(this._lineChartRef)
             .append('svg')
             .attr('class', 'graph')
             .attr('width', `${width + margin.left + margin.right}`)
@@ -414,7 +394,12 @@ export class LineChart extends ObservableReactComponent<LineChartProps> {
                             fillWidth
                         />
                     </div>
-                    <div ref={this._lineChartRef} />
+                    <div
+                        ref={r => {
+                            this._lineChartRef = r;
+                            this.drawChart([this._lineChartData], this.rangeVals, this.width, this.height);
+                        }}
+                    />
                     {selectedPt !== 'none' ? (
                         <div className="selected-data">
                             {`Selected: ${selectedPt}`}
-- 
cgit v1.2.3-70-g09d2