1 files changed, 26 insertions, 12 deletions

diff --git a/src/client/views/nodes/DataVizBox/ChartBox.tsx b/src/client/views/nodes/DataVizBox/ChartBox.tsx
index 34eee8ee8..c229e5471 100644
--- a/src/client/views/nodes/DataVizBox/ChartBox.tsx
+++ b/src/client/views/nodes/DataVizBox/ChartBox.tsx
@@ -39,9 +39,9 @@ export class ChartBox extends React.Component<ChartBoxProps> {
         }
     }
 
-    setCurrChart(chart: Chart) {
+    setCurrChart = (chart: Chart) => {
         this.currChart = chart;
-    }
+    };
 
     @action
     generateChartData() {
@@ -69,14 +69,14 @@ export class ChartBox extends React.Component<ChartBoxProps> {
         this.props.rootDoc._chartData = JSON.stringify(data);
     }
 
-    componentDidMount() {
+    componentDidMount = () => {
         this.generateChartData();
         // setting timeout to allow rerender cycle of the actual chart tof inish
-        setTimeout(() => {
-            this.props.setChartBox(this);
-        });
+        // setTimeout(() => {
+        this.props.setChartBox(this);
+        // });
         // this.props.setChartBox(this);
-    }
+    };
 
     @action
     onClickChangeChart = (e: React.MouseEvent<HTMLButtonElement>) => {
@@ -86,11 +86,25 @@ export class ChartBox extends React.Component<ChartBoxProps> {
         this.props.rootDoc._currChartView = e.currentTarget.value.toLowerCase();
     };
 
-    scrollFocus(doc: Doc, smooth: boolean) {}
-
-    handleDotClick = (e: any) => {
-        console.log(e);
-    };
+    scrollFocus(doc: Doc, smooth: boolean): number | undefined {
+        // if x and y exist on this
+        // then highlight/focus the x and y position (datapoint)
+        // highlight for a few seconds and then remove (set a timer to unhighlight after a period of time,
+        //  to be consistent, use 5 seconds and highlight color is orange)
+        // if x and y don't exist => link to whole doc => dash will take care of focusing on the entire doc
+        // return value is how long this action takes
+        //  undefined => immediately, 0 => introduces a timeout
+        //  number in ms => won't do any of the focus or call the automated highlighting thing until this timeout expires
+        //      in this case probably number in ms doesn't matter
+
+        // for now could just update the currSelected in linechart to be what doc.x and doc.y
+
+        if (this.currChart && doc.x && doc.y) {
+            // update curr selected
+            this.currChart.setCurrSelected(Number(doc.x), Number(doc.y));
+        }
+        return 0;
+    }
 
     _getAnchor() {
         return this.currChart?._getAnchor();