From a376f30189e847ac763c08288428de415f1ce081 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Tue, 10 Oct 2023 12:12:33 -0400
Subject: fixes for scrolling large datasets in TableBox

---
 src/client/views/nodes/DataVizBox/DataVizBox.tsx | 80 +++++++-----------------
 1 file changed, 24 insertions(+), 56 deletions(-)

(limited to 'src/client/views/nodes/DataVizBox/DataVizBox.tsx')

diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.tsx b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
index b9db5fe15..299494c83 100644
--- a/src/client/views/nodes/DataVizBox/DataVizBox.tsx
+++ b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
@@ -36,7 +36,7 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
     // all CSV records in the dataset (that aren't an empty row)
     @computed.struct get records() {
         var records = DataVizBox.dataset.get(CsvCast(this.rootDoc[this.fieldKey]).url.href);
-        return records?.filter(record => Object.keys(record).some(key => record[key]));
+        return records?.filter(record => Object.keys(record).some(key => record[key])) ?? [];
     }
 
     // currently chosen visualization type: line, pie, histogram, table
@@ -110,70 +110,38 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
 
     // toggles for user to decide which chart type to view the data in
     renderVizView = () => {
-        const width = this.props.PanelWidth() * 0.9;
-        const height = (this.props.PanelHeight() - 32) /* height of 'change view' button */ * 0.9;
-        const margin = { top: 10, right: 25, bottom: 75, left: 45 };
-        if (this.records) {
-            switch (this.dataVizView) {
-                case DataVizView.TABLE:
-                    return <TableBox layoutDoc={this.layoutDoc} records={this.records} axes={this.axes} height={height} width={width} margin={margin} rootDoc={this.rootDoc} docView={this.props.DocumentView} selectAxes={this.selectAxes} />;
-                case DataVizView.LINECHART:
-                    return (
-                        <LineChart
-                            layoutDoc={this.layoutDoc}
-                            ref={r => (this._vizRenderer = r ?? undefined)}
-                            height={height}
-                            width={width}
-                            fieldKey={this.fieldKey}
-                            margin={margin}
-                            rootDoc={this.rootDoc}
-                            axes={this.axes}
-                            records={this.records}
-                            dataDoc={this.dataDoc}
-                        />
-                    );
-                case DataVizView.HISTOGRAM:
-                    return (
-                        <Histogram
-                            layoutDoc={this.layoutDoc}
-                            ref={r => (this._vizRenderer = r ?? undefined)}
-                            height={height}
-                            width={width}
-                            fieldKey={this.fieldKey}
-                            margin={margin}
-                            rootDoc={this.rootDoc}
-                            axes={this.axes}
-                            records={this.records}
-                            dataDoc={this.dataDoc}
-                        />
-                    );
-                case DataVizView.PIECHART:
-                    return (
-                        <PieChart
-                            layoutDoc={this.layoutDoc}
-                            ref={r => (this._vizRenderer = r ?? undefined)}
-                            height={height}
-                            width={width}
-                            fieldKey={this.fieldKey}
-                            margin={margin}
-                            rootDoc={this.rootDoc}
-                            axes={this.axes}
-                            records={this.records}
-                            dataDoc={this.dataDoc}
-                        />
-                    );
-            }
+        const sharedProps = {
+            rootDoc: this.rootDoc,
+            layoutDoc: this.layoutDoc,
+            records: this.records,
+            axes: this.axes,
+            height: (this.props.PanelHeight() - 32) /* height of 'change view' button */ * 0.9,
+            width: this.props.PanelWidth() * 0.9,
+            margin: { top: 10, right: 25, bottom: 75, left: 45 },
+        };
+        if (!this.records.length) return 'no data/visualization';
+        switch (this.dataVizView) {
+            case DataVizView.TABLE:
+                return <TableBox {...sharedProps} docView={this.props.DocumentView} selectAxes={this.selectAxes} />;
+            case DataVizView.LINECHART:
+                return <LineChart {...sharedProps} dataDoc={this.dataDoc} fieldKey={this.fieldKey} ref={r => (this._vizRenderer = r ?? undefined)} />;
+            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)} />;
         }
-        return 'no data/visualization';
     };
 
     render() {
-        return !this.records?.length ? (
+        return !this.records.length ? (
             // displays how to get data into the DataVizBox if its empty
             <div className="start-message">To create a DataViz box, either import / drag a CSV file into your canvas or copy a data table and use the command 'ctrl + p' to bring the data table to your canvas.</div>
         ) : (
             <div
                 className="dataViz"
+                style={{
+                    pointerEvents: this.props.isContentActive() === true ? 'all' : 'none',
+                }}
                 onWheel={e => e.stopPropagation()}
                 ref={r =>
                     r?.addEventListener(
-- 
cgit v1.2.3-70-g09d2