live schema toggle works on refresh

3 files changed, 51 insertions, 18 deletions

diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index 8268a47d8..de4f01014 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -2005,15 +2005,14 @@ ScriptingGlobals.add(function datavizFromSchema(doc: Doc) {
             csvRows.push(eachRow);
         }
         const blob = new Blob([csvRows.join('\n')], { type: 'text/csv' });
-        const options = { x: 0, y: -300, title: 'schemaTable', _width: 300, _height: 100, type: 'text/csv' };
+        const options = { x: 0, y: 0, title: 'schemaTable', _width: 300, _height: 100, type: 'text/csv' };
         const file = new File([blob], 'schemaTable', options);
         const loading = Docs.Create.LoadingDocument(file, options);
         loading.presentation_openInLightbox = true;
         DocUtils.uploadFileToDoc(file, {}, loading);
 
         if (view.ComponentView?.addDocument) {
-            //  loading.dataViz_fromSchema = true;
-            loading.dataViz_asSchema = view.layoutDoc;
+            loading._dataViz_asSchema = view.layoutDoc;
             SchemaCSVPopUp.Instance.setView(view);
             SchemaCSVPopUp.Instance.setTarget(view.layoutDoc);
             SchemaCSVPopUp.Instance.setDataVizDoc(loading);
diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss
index 02131ae22..da9da8fbe 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss
@@ -18,17 +18,21 @@
 
         .schema-add {
             position: relative;
-            height: 30;
+            height: 35;
             display: flex;
             align-items: center;
+            top: -10px;
             width: 100%;
             text-align: right;
             background: lightgray;
             .editableView-container-editing {
                 width: 100%;
+                height: 35px;
+                margin: 20px;
             }
             .editableView-input {
                 width: 100%;
+                margin: 20px;
                 float: right;
                 text-align: right;
                 background: yellow;
diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.tsx b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
index 1aef98131..6d060f535 100644
--- a/src/client/views/nodes/DataVizBox/DataVizBox.tsx
+++ b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
@@ -1,6 +1,6 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Colors, Toggle, ToggleType, Type } from 'browndash-components';
-import { ObservableMap, action, computed, observable, runInAction } from 'mobx';
+import { ObservableMap, action, computed, makeObservable, observable, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
 import { emptyFunction, returnEmptyString, returnFalse, returnOne, setupMoveUpEvents } from '../../../../Utils';
@@ -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 } from '../../DocComponent';
@@ -40,13 +40,13 @@ export enum DataVizView {
 @observer
 export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
     private _mainCont: React.RefObject<HTMLDivElement> = React.createRef();
-    private _ffref = React.createRef<CollectionFreeFormView>();
     private _marqueeref = React.createRef<MarqueeAnnotator>();
     private _annotationLayer: React.RefObject<HTMLDivElement> = React.createRef();
     anchorMenuClick?: () => undefined | ((anchor: Doc) => void);
     crop: ((region: Doc | undefined, addCrop?: boolean) => Doc | undefined) | undefined;
     @observable _marqueeing: number[] | undefined = undefined;
     @observable _savedAnnotations = new ObservableMap<number, HTMLDivElement[]>();
+    @observable schemaBoxLength: any = 0;
 
     @computed get annotationLayer() {
         TraceMobx();
@@ -81,10 +81,9 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
 
     // 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 Map();
+    static datasetSchemaOG = new ObservableMap<string, { [key: string]: string }[]>();
 
     private _vizRenderer: LineChart | Histogram | PieChart | undefined;
     private _sidebarRef = React.createRef<SidebarAnnos>();
@@ -104,10 +103,10 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         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));
 
     @action // pinned / linked anchor doc includes selected rows, graph titles, and graph colors
     restoreView = (data: Doc) => {
@@ -331,19 +330,52 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
     @action
     changeLiveSchemaCheckbox = () => {
         this.layoutDoc.dataViz_schemaLive = !this.layoutDoc.dataViz_schemaLive
-        console.log(this.layoutDoc.dataViz_schemaLive)
         this.updateSchemaViz();
     }
 
     @action
+    setDataset(href: any, data: any) {
+        DataVizBox.dataset.set(href, data);
+    }
+
+    @action
     updateSchemaViz = () => {
         const href = CsvCast(this.Document[this.fieldKey]).url.href;
+
         if (this.layoutDoc.dataViz_schemaLive || !DataVizBox.datasetSchemaOG.has(href)){
             const getFrom = DocCast(this.layoutDoc.dataViz_asSchema);
             const keys = Cast(getFrom.schema_columnKeys, listSpec('string'))?.filter(key => key != 'text');
             if (!keys) return;
             const children = DocListCast(getFrom[Doc.LayoutFieldKey(getFrom)]);
 
+            if (!this.layoutDoc._dataViz_schemaOG){
+                let csvRows = [];
+                csvRows.push(keys.join(','));
+                for (let i = 0; i < children.length; 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;
+            if (ogHref && !DataVizBox.datasetSchemaOG.has(href)){
+                DataVizBox.datasetSchemaOG.set(href, []);
+                fetch('/csvData?uri=' + ogHref)
+                    .then(res => res.json().then(action(res => !res.errno && DataVizBox.datasetSchemaOG.set(href, res))));
+            }
+
             var current: { [key: string]: string }[] = [];
             for (let i = 0; i < children.length; i++) {
                 var row: { [key: string]: string } = {};
@@ -356,13 +388,11 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                 }
                 current.push(row);
             }
-
-            if (!DataVizBox.datasetSchemaOG.has(href)){
-                DataVizBox.datasetSchemaOG.set(href, current);
-            }
-            DataVizBox.dataset.set(href, current);
+            this.setDataset(href, current);
+        }
+        else {
+            this.setDataset(href, DataVizBox.datasetSchemaOG.get(href));
         }
-        else DataVizBox.dataset.set(href, DataVizBox.datasetSchemaOG.get(href));
     };
 
     render() {