1 files changed, 24 insertions, 17 deletions
diff --git a/src/client/views/nodes/DataVizBox/components/LineChart.tsx b/src/client/views/nodes/DataVizBox/components/LineChart.tsx
index d893b3e12..e5f7dc4f4 100644
--- a/src/client/views/nodes/DataVizBox/components/LineChart.tsx
+++ b/src/client/views/nodes/DataVizBox/components/LineChart.tsx
@@ -9,6 +9,10 @@ import { Docs } from '../../../../documents/Documents';
 import { Doc, DocListCast } from '../../../../../fields/Doc';
 import { Chart, ChartProps } from '../ChartInterface';
 import './Chart.scss';
+import { List } from '../../../../../fields/List';
+import { PinProps, PresBox } from '../../trails';
+import { listSpec } from '../../../../../fields/Schema';
+import { Cast } from '../../../../../fields/Types';
 
 type minMaxRange = {
     xMin: number | undefined;
@@ -103,21 +107,25 @@ export class LineChart extends React.Component<ChartProps> implements Chart {
         // loop through and remove any annotations that no longer exist
     }
 
-    _getAnchor() {
+    restoreView = (data: Doc) => {
+        const coords = Cast(data.presDataViz, listSpec('number'), null);
+        if ((coords && this._currSelected?.x !== coords[0]) || this._currSelected?.y !== coords[1]) {
+            this.setCurrSelected(coords[0], coords[1]);
+            return true;
+        }
+        return false;
+    };
+    _getAnchor = (pinProps?: PinProps) => {
         // 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({
+        const anchor = 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;
-        doc.y = this._currSelected?.y;
-        doc.chartType = 'line';
-        return doc;
+        PresBox.pinDocView(anchor, { pinDocLayout: pinProps?.pinDocLayout, pinData: { ...(pinProps?.pinData ?? {}), dataviz: this._currSelected ? [this._currSelected.x, this._currSelected.y] : undefined } }, this.props.dataDoc);
+        return anchor;
         // have some other function in code that
-    }
+    };
 
     componentWillUnmount() {
         if (this._dataReactionDisposer) {
@@ -132,7 +140,7 @@ export class LineChart extends React.Component<ChartProps> implements Chart {
     }
 
     tooltipContent(data: DataPoint) {
-        return `<b>x: ${data.x} y: ${data.y}</b>`;
+        return `<b>(${data.x},${data.y})</b>`;
     }
 
     @computed get height(): number {
@@ -235,7 +243,7 @@ export class LineChart extends React.Component<ChartProps> implements Chart {
         const mousemove = action((e: any) => {
             const bisect = d3.bisector((d: DataPoint) => d.x).left;
             const xPos = d3.pointer(e)[0];
-            const x0 = bisect(data, xScale.invert(xPos));
+            const x0 = bisect(data, xScale.invert(xPos - 25));
             const d0 = data[x0];
             this._x = d0.x;
             this._y = d0.y;
@@ -243,23 +251,22 @@ export class LineChart extends React.Component<ChartProps> implements Chart {
             // TODO: nda - implement tooltips
             tooltip.transition().duration(300).style('opacity', 0.9);
             // TODO: nda - updating the inner html could be deadly cause injection attacks!
-            tooltip.html(() => this.tooltipContent(d0)).style('transform', `translate(${xScale(d0.x) - (this.width + margin.left + margin.right) + 30}px,${yScale(d0.y) + 30}px)`);
+            tooltip
+                .html(() => this.tooltipContent(d0))
+                .style('pointer-events', 'none')
+                .style('transform', `translate(${xScale(d0.x) - this.width / 2 + 12}px,${yScale(d0.y) + 30}px)`);
         });
 
         const onPointClick = action((e: any) => {
             const bisect = d3.bisector((d: DataPoint) => d.x).left;
             const xPos = d3.pointer(e)[0];
-            const x0 = bisect(data, xScale.invert(xPos));
+            const x0 = bisect(data, xScale.invert(xPos - 25));
             const d0 = data[x0];
             this._x = d0.x;
             this._y = d0.y;
             // find .circle-d1 with data-x = d0.x and data-y = d0.y
             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');
-            // this.drawAnnotations(this._x, this._y);
-            // this.props.getAnchor();
-            console.log(this._currSelected);
         });
 
         this._chartSvg