1 files changed, 123 insertions, 43 deletions

diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.tsx b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
index 592723ee9..db677ff61 100644
--- a/src/client/views/nodes/DataVizBox/DataVizBox.tsx
+++ b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
@@ -1,90 +1,170 @@
-import { action, computed, observable } from "mobx";
-import { observer } from "mobx-react";
-import * as React from "react";
-import { StrCast } from "../../../../fields/Types";
-import { ViewBoxBaseComponent } from "../../DocComponent";
-import { FieldViewProps, FieldView } from "../FieldView";
-import "./DataVizBox.scss";
-import { HistogramBox } from "./HistogramBox";
-import { TableBox } from "./TableBox";
+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 { CsvField } from '../../../../fields/URLField';
+import { Docs } from '../../../documents/Documents';
+import { ViewBoxAnnotatableComponent } from '../../DocComponent';
+import { FieldViewProps, FieldView } from '../FieldView';
+import { ChartBox } from './ChartBox';
+import './DataVizBox.scss';
+import { TableBox } from './components/TableBox';
 
 enum DataVizView {
-    TABLE = "table",
-    HISTOGRAM= "histogram"
+    TABLE = 'table',
+    HISTOGRAM = 'histogram',
 }
 
-
 @observer
-export class DataVizBox extends ViewBoxBaseComponent<FieldViewProps>() {
-    @observable private pairs: {x: number, y:number}[] = [{x: 1, y:2}];
+export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
+    // says we have an object and any string
+    // 2 ways of doing it
+    // @observable private pairs: { [key: string]: number | string | undefined }[] = [];
+    // @observable private pairs: { [key: string]: FieldResult }[] = [];
+    @observable private pairs: { x: number; y: number }[] = [];
+    private _chartBox: ChartBox | undefined;
+    // // another way would be store a schema that defines the type of data we are expecting from an imported doc
+
+    // method1() {
+    //     this.pairs[0].x = 3;
+    // }
+
+    // method() {
+    //     // this.pairs[0].x = 3;
+    //     // go through the pairs
+    //     const x = this.pairs[0].x;
+    //     if (typeof x == 'number') {
+    //         let x1 = Number(x);
+    //         // let x1 = NumCast(x);
+    //     }
+    // }
+
+    // could use field result
+    // [key: string]: FieldResult;
+    // instead of numeric x,y in there,
 
     // TODO: nda - make this use enum values instead
     // @observable private currView: DataVizView = DataVizView.TABLE;
+
+    // TODO: nda - use onmousedown and onmouseup when dragging and changing height and width to update the height and width props only when dragging stops
+
+    setChartBox = (chartBox: ChartBox) => {
+        this._chartBox = chartBox;
+    };
+
     @computed get currView() {
         if (this.rootDoc._dataVizView) {
             return StrCast(this.rootDoc._dataVizView);
         } else {
-            return "table";
+            return '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);
+    };
+
+    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*/
+            });
+
+        anchor.dataView = this.currView;
+
+        this.addDocument(anchor);
+        return anchor;
+        // have some other function in code that
+    };
     constructor(props: any) {
         super(props);
         if (!this.rootDoc._dataVizView) {
             // TODO: nda - this might not always want to default to "table"
-            this.rootDoc._dataVizView = "table";
+            this.rootDoc._dataVizView = 'table';
         }
     }
 
-    public static LayoutString(fieldKey: string) {  return FieldView.LayoutString(DataVizBox, fieldKey);  }
-
-    @action
-    private createPairs() {
-        const xVals: number[] = [0, 1, 2, 3, 4, 5];
-        // const yVals: number[] = [10, 20, 30, 40, 50, 60];
-        const yVals: number[] = [1, 2, 3, 4, 5, 6];
-        let pairs: {
-            x: number,
-            y:number
-        }[] = [];
-        if (xVals.length != yVals.length) return pairs;
-        for (let i = 0; i < xVals.length; i++) {
-            pairs.push({x: xVals[i], y: yVals[i]});
-        }
-        this.pairs = pairs;
-        return pairs;
+    public static LayoutString(fieldKey: string) {
+        return FieldView.LayoutString(DataVizBox, fieldKey);
     }
 
     @computed get selectView() {
-        switch(this.currView) {
-            case "table":
-                return (<TableBox pairs={this.pairs} />)
-            case "histogram":
-                return (<HistogramBox rootDoc={this.rootDoc} pairs={this.pairs}/>)                
+        switch (this.currView) {
+            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} />;
+            // case "histogram":
+            //     return (<HistogramBox rootDoc={this.rootDoc} pairs={this.pairs}/>)
         }
     }
 
     @computed get pairVals() {
-        return this.createPairs();
+        return fetch('/csvData?uri=' + this.dataUrl?.url.href).then(res => res.json());
+    }
+
+    @computed get dataUrl() {
+        return Cast(this.dataDoc[this.fieldKey], CsvField);
     }
 
     componentDidMount() {
-        this.createPairs();
+        this.props.setContentView?.(this);
+        // this.createPairs();
+        this.fetchData();
+    }
+
+    fetchData() {
+        const uri = this.dataUrl?.url.href;
+        fetch('/csvData?uri=' + uri).then(res =>
+            res.json().then(
+                action(res => {
+                    this.pairs = res;
+                })
+            )
+        );
     }
 
     // handle changing the view using a button
     @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() {
+        if (this.pairs.length == 0) {
+            return <div>Loading...</div>;
+        }
+
         return (
             <div className="dataViz">
-                <button onClick={(e) => this.changeViewHandler(e)}>Change View</button>
+                <button onClick={e => this.changeViewHandler(e)}>Change View</button>
                 {this.selectView}
             </div>
         );
     }
-}
\ No newline at end of file
+}