1 files changed, 30 insertions, 10 deletions

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);
         });