1 files changed, 32 insertions, 31 deletions

diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.tsx b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
index 8365f4770..e453bcee0 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, makeObservable, observable, runInAction } from 'mobx';
+import { IReactionDisposer, ObservableMap, action, computed, makeObservable, observable, reaction, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
 import { emptyFunction, returnEmptyString, returnFalse, returnOne, setupMoveUpEvents } from '../../../../Utils';
@@ -40,9 +40,9 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() im
     private _mainCont: React.RefObject<HTMLDivElement> = React.createRef();
     private _marqueeref = React.createRef<MarqueeAnnotator>();
     private _annotationLayer: React.RefObject<HTMLDivElement> = React.createRef();
+    private _disposers: { [name: string]: IReactionDisposer } = {};
     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[]>();
 
@@ -256,12 +256,39 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() im
     componentDidMount() {
         this._props.setContentViewBox?.(this);
         if (!DataVizBox.dataset.has(CsvCast(this.dataDoc[this.fieldKey]).url.href)) this.fetchData();
+        this._disposers.datavis = reaction(
+            () => {
+                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 }[] = [];
+                children
+                    .filter(child => child)
+                    .forEach(child => {
+                        const row: { [key: string]: string } = {};
+                        keys.forEach(key => {
+                            var cell = child[key];
+                            if (cell && (cell as string)) cell = cell.toString().replace(/\,/g, '');
+                            row[key] = StrCast(cell);
+                        });
+                        current.push(row);
+                    });
+                return current;
+            },
+            current => {
+                current && DataVizBox.dataset.set(CsvCast(this.Document[this.fieldKey]).url.href, current);
+            },
+            { fireImmediately: true }
+        );
     }
 
     fetchData = () => {
-        DataVizBox.dataset.set(CsvCast(this.dataDoc[this.fieldKey]).url.href, []); // assign temporary dataset as a lock to prevent duplicate server requests
-        fetch('/csvData?uri=' + this.dataUrl?.url.href) //
-            .then(res => res.json().then(action(res => !res.errno && DataVizBox.dataset.set(CsvCast(this.dataDoc[this.fieldKey]).url.href, res))));
+        if (!this.Document.dataViz_asSchema) {
+            DataVizBox.dataset.set(CsvCast(this.dataDoc[this.fieldKey]).url.href, []); // assign temporary dataset as a lock to prevent duplicate server requests
+            fetch('/csvData?uri=' + this.dataUrl?.url.href) //
+                .then(res => res.json().then(action(res => !res.errno && DataVizBox.dataset.set(CsvCast(this.dataDoc[this.fieldKey]).url.href, res))));
+        }
     };
 
     // toggles for user to decide which chart type to view the data in
@@ -327,33 +354,7 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() im
         GPTPopup.Instance.addDoc = this.sidebarAddDocument;
     };
 
-    @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);
-                }
-            }
-            current.push(row);
-        }
-        DataVizBox.dataset.set(CsvCast(this.Document[this.fieldKey]).url.href, current);
-    };
-
     render() {
-        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();
-        }
-
         const scale = this._props.NativeDimScaling?.() || 1;
         return !this.records.length ? (
             // displays how to get data into the DataVizBox if its empty