got basic scroll focus to work

4 files changed, 75 insertions, 26 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();
diff --git a/src/client/views/nodes/DataVizBox/ChartInterface.ts b/src/client/views/nodes/DataVizBox/ChartInterface.ts
index 05ef35b95..494242ac5 100644
--- a/src/client/views/nodes/DataVizBox/ChartInterface.ts
+++ b/src/client/views/nodes/DataVizBox/ChartInterface.ts
@@ -9,6 +9,7 @@ export interface Chart {
     width: number;
     // TODO: nda - probably want to get rid of this to keep charts more generic
     _getAnchor: () => Doc;
+    setCurrSelected: (x: number, y: number) => void;
 }
 
 export interface ChartProps {
diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.tsx b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
index 944468a43..db677ff61 100644
--- a/src/client/views/nodes/DataVizBox/DataVizBox.tsx
+++ b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
@@ -68,16 +68,29 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         // use dataview to restore part of it and then pass on the rest to the chartbox
 
         // pseudocode
-        setTimeout(() => this._chartBox?.scrollFocus(doc, smooth)); /* smooth parameter true = do animations */
-        return 0;
+        return this._chartBox?.scrollFocus(doc, smooth);
     };
 
-    getAnchor() {
+    getAnchor = () => {
+        // TODO: nda - look into DocumentButtonBar and DocumentLinksButton
+
+        /*
+        if nothing selected:
+            return this.rootDoc
+        this part does not specify view type (doesn't change type when following the link)
+
+            // this slightly diff than the stuff below: 
+                below part returns an anchor that specifies the viewtype for the whole doc and nothing else
+                
+        */
+
         // store whatever information would allow me to reselect the same thing (store parameters I would pass to get the exact same element)
         const anchor =
             // this._COMPONENTNAME._getAnchor() ??
             this._chartBox?._getAnchor() ??
             Docs.Create.TextanchorDocument({
+                // when we clear selection -> we should have it so chartBox getAnchor returns undefined
+                // this is for when we want the whole doc (so when the chartBox getAnchor returns without a marker)
                 /*put in some options*/
             });
 
@@ -86,7 +99,7 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         this.addDocument(anchor);
         return anchor;
         // have some other function in code that
-    }
+    };
     constructor(props: any) {
         super(props);
         if (!this.rootDoc._dataVizView) {
@@ -119,6 +132,7 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
     }
 
     componentDidMount() {
+        this.props.setContentView?.(this);
         // this.createPairs();
         this.fetchData();
     }
diff --git a/src/client/views/nodes/DataVizBox/components/LineChart.tsx b/src/client/views/nodes/DataVizBox/components/LineChart.tsx
index 458ff5f23..d893b3e12 100644
--- a/src/client/views/nodes/DataVizBox/components/LineChart.tsx
+++ b/src/client/views/nodes/DataVizBox/components/LineChart.tsx
@@ -20,7 +20,7 @@ type minMaxRange = {
 interface SelectedDataPoint {
     x: number;
     y: number;
-    elem: d3.Selection<d3.BaseType, unknown, SVGGElement, unknown>;
+    elem?: d3.Selection<d3.BaseType, unknown, SVGGElement, unknown>;
 }
 
 @observer
@@ -39,6 +39,7 @@ export class LineChart extends React.Component<ChartProps> implements Chart {
         yMin: undefined,
         yMax: undefined,
     };
+    // TODO: nda - some sort of mapping that keeps track of the annotated points so we can easily remove when annotations list updates
 
     private _chartSvg: d3.Selection<SVGGElement, unknown, null, undefined> | undefined;
 
@@ -46,7 +47,7 @@ export class LineChart extends React.Component<ChartProps> implements Chart {
 
     // write the getanchor function that gets whatever I want as the link anchor
 
-    componentDidMount() {
+    componentDidMount = () => {
         this._dataReactionDisposer = reaction(
             () => this.props.chartData,
             chartData => {
@@ -55,6 +56,7 @@ export class LineChart extends React.Component<ChartProps> implements Chart {
             },
             { fireImmediately: true }
         );
+        // DocumentDecorations.Instance.Interacting
         this._heightReactionDisposer = reaction(() => this.props.height, this.drawChart.bind(this));
         this._widthReactionDisposer = reaction(() => this.props.width, this.drawChart.bind(this));
         reaction(
@@ -62,15 +64,19 @@ export class LineChart extends React.Component<ChartProps> implements Chart {
             annotations => {
                 // modify how d3 renders so that anything in this annotations list would be potentially highlighted in some way
                 // could be blue colored to make it look like anchor
-                this.drawAnnotations(this.props.chartData.data[0][4].x, this.props.chartData.data[0][4].y);
+                console.log(annotations);
+                // this.drawAnnotations()
+                // loop through annotations and draw them
+                annotations.forEach(a => {
+                    this.drawAnnotations(Number(a.x), Number(a.y));
+                });
+                // this.drawAnnotations(annotations.x, annotations.y);
             },
             { fireImmediately: true }
         );
 
-        setTimeout(() => {
-            this.props.setCurrChart(this);
-        });
-    }
+        this.props.setCurrChart(this);
+    };
 
     // gets called whenever the "data-annotations" fields gets updated
     drawAnnotations(dataX: number, dataY: number) {
@@ -85,18 +91,25 @@ export class LineChart extends React.Component<ChartProps> implements Chart {
             const y = element.getAttribute('data-y');
             if (x === dataX.toString() && y === dataY.toString()) {
                 element.classList.add('highlight');
-            } else {
-                element.classList.remove('highlight');
             }
+            // TODO: nda - this remove highlight code should go where we remove the links
+            // } else {
+            //     element.classList.remove('highlight');
+            // }
         }
     }
 
+    removeAnnotations(dataX: number, dataY: number) {
+        // loop through and remove any annotations that no longer exist
+    }
+
     _getAnchor() {
         // store whatever information would allow me to reselect the same thing (store parameters I would pass to get the exact same element)
 
         // TODO: nda - look at pdfviewer get anchor for args
         const doc = Docs.Create.TextanchorDocument({
             /*put in some options*/
+            title: 'line doc selection' + this._currSelected?.x,
         });
         // access curr selected from the charts
         doc.x = this._currSelected?.x;
@@ -144,6 +157,13 @@ export class LineChart extends React.Component<ChartProps> implements Chart {
         return tooltip;
     }
 
+    // TODO: nda - use this everyewhere we update currSelected?
+    @action
+    setCurrSelected(x: number, y: number) {
+        // TODO: nda - get rid of svg element in the list?
+        this._currSelected = { x: x, y: y };
+    }
+
     drawDataPoints(data: DataPoint[], idx: number, xScale: d3.ScaleLinear<number, number, never>, yScale: d3.ScaleLinear<number, number, never>) {
         if (this._chartSvg) {
             const circleClass = '.circle-' + idx;
@@ -237,7 +257,7 @@ export class LineChart extends React.Component<ChartProps> implements Chart {
             const selected = svg.selectAll('.datapoint').filter((d: any) => d['data-x'] === d0.x && d['data-y'] === d0.y);
             this._currSelected = { x: d0.x, y: d0.y, elem: selected };
             console.log('Getting here');
-            setTimeout(() => this.props.getAnchor());
+            // this.drawAnnotations(this._x, this._y);
             // this.props.getAnchor();
             console.log(this._currSelected);
         });