fixed up dataviz to work again. fixed point selection, tooltips, making and following links

1 files changed, 29 insertions, 34 deletions

diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.tsx b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
index db677ff61..68766e8dc 100644
--- a/src/client/views/nodes/DataVizBox/DataVizBox.tsx
+++ b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
@@ -2,7 +2,7 @@ import { action, computed, observable } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
 import { Doc } from '../../../../fields/Doc';
-import { Cast, StrCast } from '../../../../fields/Types';
+import { BoolCast, Cast, StrCast } from '../../../../fields/Types';
 import { CsvField } from '../../../../fields/URLField';
 import { Docs } from '../../../documents/Documents';
 import { ViewBoxAnnotatableComponent } from '../../DocComponent';
@@ -10,6 +10,7 @@ import { FieldViewProps, FieldView } from '../FieldView';
 import { ChartBox } from './ChartBox';
 import './DataVizBox.scss';
 import { TableBox } from './components/TableBox';
+import { PinProps } from '../trails';
 
 enum DataVizView {
     TABLE = 'table',
@@ -54,40 +55,23 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
     };
 
     @computed get currView() {
-        if (this.rootDoc._dataVizView) {
-            return StrCast(this.rootDoc._dataVizView);
-        } else {
-            return 'table';
-        }
+        return StrCast(this.rootDoc._dataVizView, 'table');
     }
 
-    scrollFocus = (doc: Doc, smooth: boolean) => {
-        // reconstruct the view based on the anchor ->
-        // keep track of the datavizbox view and the type of chart we're rendering
-
-        // use dataview to restore part of it and then pass on the rest to the chartbox
-
-        // pseudocode
-        return this._chartBox?.scrollFocus(doc, smooth);
+    @action
+    restoreView = (data: Doc) => {
+        const changed = this.currView !== data.dataView && (this.rootDoc._dataVizView = data.dataView);
+        const func = () => this._chartBox?.restoreView(data);
+        if (changed) {
+            setTimeout(func);
+            return changed ? true : false;
+        }
+        return func() ?? false;
     };
 
-    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)
+    getAnchor = (addAsAnnotation?: boolean, pinProps?: PinProps) => {
         const anchor =
-            // this._COMPONENTNAME._getAnchor() ??
-            this._chartBox?._getAnchor() ??
+            this._chartBox?.getAnchor(pinProps) ??
             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)
@@ -98,7 +82,6 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
 
         this.addDocument(anchor);
         return anchor;
-        // have some other function in code that
     };
     constructor(props: any) {
         super(props);
@@ -117,7 +100,7 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
             case 'table':
                 return <TableBox pairs={this.pairs} />;
             case 'histogram':
-                return <ChartBox getAnchor={this.getAnchor} setChartBox={this.setChartBox} rootDoc={this.rootDoc} pairs={this.pairs} dataDoc={this.dataDoc} />;
+                return <ChartBox height={this.props.PanelHeight() - 32 /* height of 'change view' button */} getAnchor={this.getAnchor} setChartBox={this.setChartBox} rootDoc={this.rootDoc} pairs={this.pairs} dataDoc={this.dataDoc} />;
             // case "histogram":
             //     return (<HistogramBox rootDoc={this.rootDoc} pairs={this.pairs}/>)
         }
@@ -152,7 +135,7 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
     @action changeViewHandler(e: React.MouseEvent<HTMLButtonElement>) {
         e.preventDefault();
         e.stopPropagation();
-        this.rootDoc._dataVizView = this.currView == 'table' ? 'histogram' : 'table';
+        this.rootDoc._dataVizView = this.currView === 'table' ? 'histogram' : 'table';
     }
 
     render() {
@@ -161,7 +144,19 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         }
 
         return (
-            <div className="dataViz">
+            <div
+                className="dataViz"
+                onWheel={e => e.stopPropagation()}
+                ref={r =>
+                    r?.addEventListener(
+                        'wheel', // if scrollTop is 0, then don't let wheel trigger scroll on any container (which it would since onScroll won't be triggered on this)
+                        (e: WheelEvent) => {
+                            if (!r.scrollTop && e.deltaY <= 0) e.preventDefault();
+                            e.stopPropagation();
+                        },
+                        { passive: false }
+                    )
+                }>
                 <button onClick={e => this.changeViewHandler(e)}>Change View</button>
                 {this.selectView}
             </div>