Merge pull request #295 from brown-dash/data-visualization-sarah

Data visualization Sarah

1 files changed, 61 insertions, 25 deletions

diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.tsx b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
index e453bcee0..66a08f13e 100644
--- a/src/client/views/nodes/DataVizBox/DataVizBox.tsx
+++ b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
@@ -11,7 +11,7 @@ import { listSpec } from '../../../../fields/Schema';
 import { Cast, CsvCast, DocCast, NumCast, StrCast } from '../../../../fields/Types';
 import { CsvField } from '../../../../fields/URLField';
 import { TraceMobx } from '../../../../fields/util';
-import { Docs } from '../../../documents/Documents';
+import { DocUtils, Docs } from '../../../documents/Documents';
 import { DocumentManager } from '../../../util/DocumentManager';
 import { UndoManager, undoable } from '../../../util/UndoManager';
 import { ViewBoxAnnotatableComponent, ViewBoxInterface } from '../../DocComponent';
@@ -27,6 +27,7 @@ import { Histogram } from './components/Histogram';
 import { LineChart } from './components/LineChart';
 import { PieChart } from './components/PieChart';
 import { TableBox } from './components/TableBox';
+import { Checkbox } from '@mui/material';
 
 export enum DataVizView {
     TABLE = 'table',
@@ -85,6 +86,10 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() im
 
     // all datasets that have been retrieved from the server stored as a map from the dataset url to an array of records
     static dataset = new ObservableMap<string, { [key: string]: string }[]>();
+    // when a dataset comes from schema view, this stores the original dataset to refer back to
+    // href : dataset
+    static datasetSchemaOG = new ObservableMap<string, { [key: string]: string }[]>();
+
     private _vizRenderer: LineChart | Histogram | PieChart | undefined;
     private _sidebarRef = React.createRef<SidebarAnnos>();
 
@@ -103,10 +108,13 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() im
         return Cast(this.dataDoc[this.fieldKey], CsvField);
     }
     @computed.struct get axes() {
-        return StrListCast(this.layoutDoc.dataViz_axes);
+        return StrListCast(this.layoutDoc._dataViz_axes);
     }
-
-    selectAxes = (axes: string[]) => (this.layoutDoc.dataViz_axes = new List<string>(axes));
+    selectAxes = (axes: string[]) => (this.layoutDoc._dataViz_axes = new List<string>(axes));
+    @computed.struct get titleCol() {
+        return StrCast(this.layoutDoc._dataViz_titleCol);
+    }
+    selectTitleCol = (titleCol: string) => (this.layoutDoc._dataViz_titleCol = titleCol);
 
     @action // pinned / linked anchor doc includes selected rows, graph titles, and graph colors
     restoreView = (data: Doc) => {
@@ -258,6 +266,7 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() im
         if (!DataVizBox.dataset.has(CsvCast(this.dataDoc[this.fieldKey]).url.href)) this.fetchData();
         this._disposers.datavis = reaction(
             () => {
+                if (this.layoutDoc.dataViz_schemaLive==undefined) this.layoutDoc.dataViz_schemaLive = true; 
                 const getFrom = DocCast(this.layoutDoc.dataViz_asSchema);
                 const keys = Cast(getFrom?.schema_columnKeys, listSpec('string'))?.filter(key => key != 'text');
                 if (!keys) return;
@@ -274,10 +283,43 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() im
                         });
                         current.push(row);
                     });
+                    if (!this.layoutDoc._dataViz_schemaOG){ // makes a copy of the original table for the "live" toggle
+                        let csvRows = [];
+                        csvRows.push(keys.join(','));
+                        for (let i = 0; i < children.length-1; i++) {
+                            let eachRow = [];
+                            for (let j = 0; j < keys.length; j++) {
+                                var cell = children[i][keys[j]];
+                                if (cell && (cell as string)) cell = cell.toString().replace(/\,/g, '');
+                                eachRow.push(cell);
+                            }
+                            csvRows.push(eachRow);
+                        }
+                        const blob = new Blob([csvRows.join('\n')], { type: 'text/csv' });
+                        const options = { x: 0, y: 0, title: 'schemaTable for static dataviz', _width: 300, _height: 100, type: 'text/csv' };
+                        const file = new File([blob], 'schemaTable for static dataviz', options);
+                        const loading = Docs.Create.LoadingDocument(file, options);
+                        DocUtils.uploadFileToDoc(file, {}, loading);
+                        this.layoutDoc._dataViz_schemaOG = loading;
+                    }
+                    const ogDoc = this.layoutDoc._dataViz_schemaOG as Doc
+                    const ogHref = CsvCast(ogDoc[this.fieldKey])? CsvCast(ogDoc[this.fieldKey]).url.href : undefined;
+                    const href = CsvCast(this.Document[this.fieldKey]).url.href
+                    if (ogHref && !DataVizBox.datasetSchemaOG.has(href)){ // sets original dataset to the var
+                        const lastRow = current.pop();
+                        DataVizBox.datasetSchemaOG.set(href, current);
+                        current.push(lastRow!);
+                        fetch('/csvData?uri=' + ogHref)
+                            .then(res => res.json().then(action(res => !res.errno && DataVizBox.datasetSchemaOG.set(href, res))));
+                    }
                 return current;
             },
             current => {
-                current && DataVizBox.dataset.set(CsvCast(this.Document[this.fieldKey]).url.href, current);
+                if (current) {
+                   const href = CsvCast(this.Document[this.fieldKey]).url.href;
+                   if (this.layoutDoc.dataViz_schemaLive) DataVizBox.dataset.set(href, current);
+                   else DataVizBox.dataset.set(href, DataVizBox.datasetSchemaOG.get(href)!);
+                }
             },
             { fireImmediately: true }
         );
@@ -299,6 +341,7 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() im
             layoutDoc: this.layoutDoc,
             records: this.records,
             axes: this.axes,
+            titleCol: this.titleCol,
             //width: this.SidebarShown? this._props.PanelWidth()*.9/1.2: this._props.PanelWidth() * 0.9,
             height: (this._props.PanelHeight() / scale - 32) /* height of 'change view' button */ * 0.9,
             width: ((this._props.PanelWidth() - this.sidebarWidth()) / scale) * 0.9,
@@ -306,7 +349,7 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() im
         };
         if (!this.records.length) return 'no data/visualization';
         switch (this.dataVizView) {
-            case DataVizView.TABLE:     return <TableBox  {...sharedProps} docView={this.DocumentView} selectAxes={this.selectAxes} />;
+            case DataVizView.TABLE:     return <TableBox  {...sharedProps} docView={this.DocumentView} selectAxes={this.selectAxes} selectTitleCol={this.selectTitleCol}/>;
             case DataVizView.LINECHART: return <LineChart {...sharedProps} dataDoc={this.dataDoc} fieldKey={this.fieldKey} ref={r => (this._vizRenderer = r ?? undefined)} vizBox={this} />;
             case DataVizView.HISTOGRAM: return <Histogram {...sharedProps} dataDoc={this.dataDoc} fieldKey={this.fieldKey} ref={r => (this._vizRenderer = r ?? undefined)} />;
             case DataVizView.PIECHART:  return <PieChart  {...sharedProps} dataDoc={this.dataDoc} fieldKey={this.fieldKey} ref={r => (this._vizRenderer = r ?? undefined)} 
@@ -354,6 +397,11 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() im
         GPTPopup.Instance.addDoc = this.sidebarAddDocument;
     };
 
+    @action
+    changeLiveSchemaCheckbox = () => {
+        this.layoutDoc.dataViz_schemaLive = !this.layoutDoc.dataViz_schemaLive
+    }
+
     render() {
         const scale = this._props.NativeDimScaling?.() || 1;
         return !this.records.length ? (
@@ -379,27 +427,15 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() im
                     <Toggle text={'PIE CHART'} toggleType={ToggleType.BUTTON} type={Type.SEC} color={'black'} onClick={e => (this.layoutDoc._dataViz = DataVizView.PIECHART)} toggleStatus={this.layoutDoc._dataViz == -DataVizView.PIECHART} />
                 </div>
 
-                {/* <CollectionFreeFormView
-                    ref={this._ffref}
-                    {...this._props}
-                    setContentView={emptyFunction}
-                    renderDepth={this._props.renderDepth - 1}
-                    fieldKey={this.annotationKey}
-                    styleProvider={this._props.styleProvider}
-                    isAnnotationOverlay={true}
-                    annotationLayerHostsContent={false}
-                    PanelWidth={this._props.PanelWidth}
-                    PanelHeight={this._props.PanelHeight}
-                    select={emptyFunction}
-                    isAnyChildContentActive={returnFalse}
-                    whenChildContentsActiveChanged={this.whenChildContentsActiveChanged}
-                    removeDocument={this.removeDocument}
-                    moveDocument={this.moveDocument}
-                    addDocument={this.addDocument}>
-                    {this.renderVizView}
-                </CollectionFreeFormView> */}
+                {(this.layoutDoc && this.layoutDoc.dataViz_asSchema)?(
+                    <div className={'liveSchema-checkBox'} style={{ width: this._props.width }}>
+                    <Checkbox color="primary" onChange={this.changeLiveSchemaCheckbox} checked={this.layoutDoc.dataViz_schemaLive as boolean} />
+                    Display Live Updates to Canvas
+                </div>
+                ) : null}
 
                 {this.renderVizView}
+
                 <div className="dataviz-sidebar" style={{ width: `${this.sidebarWidthPercent}`, backgroundColor: `${this.sidebarColor}` }} onPointerDown={this.onPointerDown}>
                     <SidebarAnnos
                         ref={this._sidebarRef}