speedups for dataviz

3 files changed, 22 insertions, 14 deletions

diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.tsx b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
index c07ab5ba1..284923092 100644
--- a/src/client/views/nodes/DataVizBox/DataVizBox.tsx
+++ b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
@@ -15,6 +15,7 @@ import './DataVizBox.scss';
 import { Histogram } from './components/Histogram';
 import { PieChart } from './components/PieChart';
 import { Toggle, ToggleType, Type } from 'browndash-components';
+import { Utils } from '../../../../Utils';
 
 export enum DataVizView {
     TABLE = 'table',
@@ -162,7 +163,12 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         if (DataVizBox.pairSet.has(CsvCast(this.rootDoc[this.fieldKey]).url.href)) return;
         DataVizBox.pairSet.set(CsvCast(this.rootDoc[this.fieldKey]).url.href, []);
         fetch('/csvData?uri=' + this.dataUrl?.url.href) //
-            .then(res => res.json().then(action(res => !res.errno && DataVizBox.pairSet.set(CsvCast(this.rootDoc[this.fieldKey]).url.href, res))));
+            .then(res => res.json().then(action(res => {
+                if (!res.errno) {
+                    DataVizBox.pairSet.set(CsvCast(this.rootDoc[this.fieldKey]).url.href, res);
+                    if (!this.dataDoc.dataViz_rowGuids && this.pairs)  this.dataDoc.dataViz_rowGuids = new List<string>(this.pairs.map(row => Utils.GenerateGuid()));
+                }
+            })));
     }
 
     render() {
diff --git a/src/client/views/nodes/DataVizBox/components/PieChart.tsx b/src/client/views/nodes/DataVizBox/components/PieChart.tsx
index 213baa8a4..e730d54f0 100644
--- a/src/client/views/nodes/DataVizBox/components/PieChart.tsx
+++ b/src/client/views/nodes/DataVizBox/components/PieChart.tsx
@@ -13,6 +13,7 @@ import { ColorPicker, EditableText, Size, Type } from 'browndash-components';
 import { FaFillDrip } from 'react-icons/fa';
 import { listSpec } from '../../../../../fields/Schema';
 import { undoable } from '../../../../util/UndoManager';
+import { Utils } from '../../../../../Utils';
 
 export interface PieChartProps {
     rootDoc: Doc;
@@ -42,9 +43,11 @@ export class PieChart extends React.Component<PieChartProps> {
     private selectedData: any = undefined; // Selection of selected slice
     private hoverOverData: any = undefined; // Selection of slice being hovered over
 
+    @computed get rowGuids() {
+        return  StrListCast(this.props.layoutDoc.dataViz_rowGuids)
+    }
     // filters all data to just display selected data if brushed (created from an incoming link)
     @computed get _piechartData() {
-        var guids = StrListCast(this.props.layoutDoc.dataViz_rowGuids);
         if (this.props.axes.length < 1) return [];
         if (this.props.axes.length < 2) {
             var ax0 = this.props.axes[0];
@@ -52,7 +55,7 @@ export class PieChart extends React.Component<PieChartProps> {
                 this.byCategory = false;
             }
             return this.props.pairs
-                ?.filter(pair => (!this.incomingLinks.length ? true : this.incomingLinks[0]!.dataViz_selectedRows && StrListCast(this.incomingLinks[0].dataViz_selectedRows).includes(guids[this.props.pairs.indexOf(pair)])))
+                ?.filter(pair => (!this.incomingLinks.length ? true : this.incomingLinks[0]!.dataViz_selectedRows && StrListCast(this.incomingLinks[0].dataViz_selectedRows).includes(this.rowGuids[this.props.pairs.indexOf(pair)])))
                 .map(pair => ({ [ax0]: pair[this.props.axes[0]] }));
         }
         var ax0 = this.props.axes[0];
@@ -61,7 +64,7 @@ export class PieChart extends React.Component<PieChartProps> {
             this.byCategory = false;
         }
         return this.props.pairs
-            ?.filter(pair => (!this.incomingLinks.length ? true : this.incomingLinks[0]!.dataViz_selectedRows && StrListCast(this.incomingLinks[0].dataViz_selectedRows).includes(guids[this.props.pairs.indexOf(pair)])))
+            ?.filter(pair => (!this.incomingLinks.length ? true : this.incomingLinks[0]!.dataViz_selectedRows && StrListCast(this.incomingLinks[0].dataViz_selectedRows).includes(this.rowGuids[this.props.pairs.indexOf(pair)])))
             .map(pair => ({ [ax0]: pair[this.props.axes[0]], [ax1]: pair[this.props.axes[1]] }));
     }
 
diff --git a/src/client/views/nodes/DataVizBox/components/TableBox.tsx b/src/client/views/nodes/DataVizBox/components/TableBox.tsx
index 70483ac6f..e1c5aa125 100644
--- a/src/client/views/nodes/DataVizBox/components/TableBox.tsx
+++ b/src/client/views/nodes/DataVizBox/components/TableBox.tsx
@@ -33,9 +33,11 @@ interface TableBoxProps {
 export class TableBox extends React.Component<TableBoxProps> {
     // filters all data to just display selected data if brushed (created from an incoming link)
     @computed get _tableData() {
-        if (this.incomingLinks.length! <= 0) return this.props.pairs;
-        var guids = StrListCast(this.props.layoutDoc.dataViz_rowGuids);
-        return this.props.pairs?.filter(pair => this.incomingLinks[0]!.dataViz_selectedRows && StrListCast(this.incomingLinks[0].dataViz_selectedRows).includes(guids[this.props.pairs.indexOf(pair)]));
+        if (this.incomingLinks.length <= 0) return this.props.pairs;
+        return this.props.pairs?.filter(pair => StrListCast(this.incomingLinks[0]?.dataViz_selectedRows).includes(this.rowGuids[this.props.pairs.indexOf(pair)]));
+    }
+    @computed get rowGuids() {
+        return  StrListCast(this.props.layoutDoc.dataViz_rowGuids)
     }
 
     @computed get incomingLinks() {
@@ -47,9 +49,6 @@ export class TableBox extends React.Component<TableBoxProps> {
     }
 
     @computed get columns() {
-        if (!this.props.layoutDoc.dataViz_rowGuids) this.props.layoutDoc.dataViz_rowGuids = new List<string>();
-        const guids = Cast(this.props.layoutDoc.dataViz_rowGuids, listSpec('string'), null);
-        if (guids.length == 0) this.props.pairs.map(row => guids.push(Utils.GenerateGuid()));
         return this._tableData.length ? Array.from(Object.keys(this._tableData[0])).filter(header => header != '' && header != undefined) : [];
     }
 
@@ -59,9 +58,9 @@ export class TableBox extends React.Component<TableBoxProps> {
         const selected = Cast(this.props.layoutDoc.dataViz_selectedRows, listSpec('string'), null);
         const incomingSelected = this.incomingLinks.length ? StrListCast(this.incomingLinks[0].dataViz_selectedRows) : undefined;
         if (incomingSelected) {
-            selected.map(guid => {
-                if (!incomingSelected.includes(guid)) selected.splice(selected.indexOf(guid), 1);
-            }); // filters through selected to remove guids that were removed in the incoming data
+            const newsel = selected.filter(guid => incomingSelected.includes(guid));// filters through selected to remove guids that were removed in the incoming data
+            selected.length = 0;
+            selected.push(...newsel);
         }
     }
 
@@ -145,7 +144,7 @@ export class TableBox extends React.Component<TableBoxProps> {
                         <tbody>
                             {this._tableData?.map((p, i) => {
                                 var containsData = false;
-                                var guid = StrListCast(this.props.layoutDoc.dataViz_rowGuids)![this.props.pairs.indexOf(p)];
+                                var guid = this.rowGuids[this.props.pairs.indexOf(p)];
                                 this.columns.map(col => {
                                     if (p[col] != '' && p[col] != null && p[col] != undefined) containsData = true;
                                 });