toggle scheme dataviz box as live

3 files changed, 49 insertions, 18 deletions

diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.scss b/src/client/views/nodes/DataVizBox/DataVizBox.scss
index a3132dc6e..6b5738790 100644
--- a/src/client/views/nodes/DataVizBox/DataVizBox.scss
+++ b/src/client/views/nodes/DataVizBox/DataVizBox.scss
@@ -29,6 +29,10 @@
         }
     }
 
+    .liveSchema-checkBox {
+        margin-bottom: -35px;
+    }
+
     .dataviz-sidebar {
         position: absolute;
         right: 0;
diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.tsx b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
index 5a55ca764..1aef98131 100644
--- a/src/client/views/nodes/DataVizBox/DataVizBox.tsx
+++ b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
@@ -28,6 +28,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',
@@ -44,9 +45,9 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
     private _annotationLayer: React.RefObject<HTMLDivElement> = React.createRef();
     anchorMenuClick?: () => undefined | ((anchor: Doc) => void);
     crop: ((region: Doc | undefined, addCrop?: boolean) => Doc | undefined) | undefined;
-    @observable schemaDataVizChildren: any = undefined;
     @observable _marqueeing: number[] | undefined = undefined;
     @observable _savedAnnotations = new ObservableMap<number, HTMLDivElement[]>();
+
     @computed get annotationLayer() {
         TraceMobx();
         return <div className="dataVizBox-annotationLayer" style={{ height: this._props.PanelHeight(), width: this._props.PanelWidth() }} ref={this._annotationLayer} />;
@@ -80,6 +81,11 @@ 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();
+
     private _vizRenderer: LineChart | Histogram | PieChart | undefined;
     private _sidebarRef = React.createRef<SidebarAnnos>();
 
@@ -323,29 +329,45 @@ 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
     updateSchemaViz = () => {
-        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)]);
-        var current: { [key: string]: string }[] = [];
-        for (let i = 0; i < children.length; i++) {
-            var row: { [key: string]: string } = {};
-            if (children[i]) {
-                for (let j = 0; j < keys.length; j++) {
-                    var cell = children[i][keys[j]];
-                    if (cell && (cell as string)) cell = cell.toString().replace(/\,/g, '');
-                    row[keys[j]] = StrCast(cell);
+        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)]);
+
+            var current: { [key: string]: string }[] = [];
+            for (let i = 0; i < children.length; i++) {
+                var row: { [key: string]: string } = {};
+                if (children[i]) {
+                    for (let j = 0; j < keys.length; j++) {
+                        var cell = children[i][keys[j]];
+                        if (cell && (cell as string)) cell = cell.toString().replace(/\,/g, '');
+                        row[keys[j]] = StrCast(cell);
+                    }
                 }
+                current.push(row);
+            }
+
+            if (!DataVizBox.datasetSchemaOG.has(href)){
+                DataVizBox.datasetSchemaOG.set(href, current);
             }
-            current.push(row);
+            DataVizBox.dataset.set(href, current);
         }
-        DataVizBox.dataset.set(CsvCast(this.Document[this.fieldKey]).url.href, current);
+        else DataVizBox.dataset.set(href, DataVizBox.datasetSchemaOG.get(href));
     };
 
     render() {
+        if (this.layoutDoc.dataViz_schemaLive == undefined) this.layoutDoc.dataViz_schemaLive = true;
         if (this.layoutDoc && this.layoutDoc.dataViz_asSchema) {
-            this.schemaDataVizChildren = DocListCast(DocCast(this.layoutDoc.dataViz_asSchema)[Doc.LayoutFieldKey(DocCast(this.layoutDoc.dataViz_asSchema))]).length;
             this.updateSchemaViz();
         }
 
@@ -393,6 +415,13 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                     {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
diff --git a/src/client/views/nodes/DataVizBox/components/Chart.scss b/src/client/views/nodes/DataVizBox/components/Chart.scss
index 2f7dd0487..a17dc9599 100644
--- a/src/client/views/nodes/DataVizBox/components/Chart.scss
+++ b/src/client/views/nodes/DataVizBox/components/Chart.scss
@@ -19,8 +19,6 @@
         margin-bottom: -20px;
     }
     .asHistogram-checkBox {
-        // display: flex;
-        // flex-direction: row;
         align-items: left;
         align-self: left;
         align-content: left;