Merge branch 'master' into agent-paper-main

5 files changed, 27 insertions, 30 deletions

diff --git a/src/client/views/nodes/DataVizBox/components/Chart.scss b/src/client/views/nodes/DataVizBox/components/Chart.scss
index ff1fa343d..a22e1153c 100644
--- a/src/client/views/nodes/DataVizBox/components/Chart.scss
+++ b/src/client/views/nodes/DataVizBox/components/Chart.scss
@@ -91,7 +91,7 @@
         margin: 5px;
         margin-left: 25px;
         margin-right: 10px;
-        margin-bottom: 0;
+        margin-bottom: 0px;
         .tableBox-table {
             height: 100%;
             width: 100%;
@@ -101,7 +101,7 @@
                     text-overflow: ellipsis;
                     width: 100%;
                     white-space: pre;
-                    max-width: 150;
+                    max-width: 150px;
                     overflow: hidden;
                     margin-left: 2px;
                 }
diff --git a/src/client/views/nodes/DataVizBox/components/Histogram.tsx b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
index a7c4a00b0..f51683991 100644
--- a/src/client/views/nodes/DataVizBox/components/Histogram.tsx
+++ b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
@@ -413,6 +413,10 @@ export class Histogram extends ObservableReactComponent<HistogramProps> {
         });
     };
 
+    setChartRef = (r: HTMLDivElement | null) => {
+        this._histogramRef = r;
+        r && this.drawChart(this._histogramData, this.width, this.height);
+    };
     render() {
         if (!this.selectedBins) this.layoutDoc.dataViz_histogram_selectedBins = new List<string>();
 
@@ -446,12 +450,7 @@ export class Histogram extends ObservableReactComponent<HistogramProps> {
                             size={Size.XSMALL}
                         />
                     </div>
-                    <div
-                        ref={r => {
-                            this._histogramRef = r;
-                            r && this.drawChart(this._histogramData, this.width, this.height);
-                        }}
-                    />
+                    <div ref={this.setChartRef} />
                     {selected !== 'none' ? (
                         <div className="selected-data">
                             Selected: {selected}
diff --git a/src/client/views/nodes/DataVizBox/components/LineChart.tsx b/src/client/views/nodes/DataVizBox/components/LineChart.tsx
index 80fadf178..732681e05 100644
--- a/src/client/views/nodes/DataVizBox/components/LineChart.tsx
+++ b/src/client/views/nodes/DataVizBox/components/LineChart.tsx
@@ -347,6 +347,10 @@ export class LineChart extends ObservableReactComponent<LineChartProps> {
             .style('pointer-events', 'none')
             .style('transform', `translate(${xScale(d0.x) - this.width}px,${yScale(d0.y)}px)`);
     }
+    setLineRef = (r: HTMLDivElement | null) => {
+        this._lineChartRef = r;
+        this.drawChart([this._lineChartData], this.rangeVals, this.width, this.height);
+    };
 
     render() {
         const selectedPt = this._currSelected ? `{ ${this._props.axes[0]}: ${this._currSelected.x} ${this._props.axes[1]}: ${this._currSelected.y} }` : 'none';
@@ -378,12 +382,7 @@ export class LineChart extends ObservableReactComponent<LineChartProps> {
                             fillWidth
                         />
                     </div>
-                    <div
-                        ref={r => {
-                            this._lineChartRef = r;
-                            this.drawChart([this._lineChartData], this.rangeVals, this.width, this.height);
-                        }}
-                    />
+                    <div ref={this.setLineRef} />
                     {selectedPt !== 'none' ? (
                         <div className="selected-data">
                             {`Selected: ${selectedPt}`}
diff --git a/src/client/views/nodes/DataVizBox/components/PieChart.tsx b/src/client/views/nodes/DataVizBox/components/PieChart.tsx
index 0ae70786f..cf476b8d0 100644
--- a/src/client/views/nodes/DataVizBox/components/PieChart.tsx
+++ b/src/client/views/nodes/DataVizBox/components/PieChart.tsx
@@ -373,10 +373,10 @@ export class PieChart extends ObservableReactComponent<PieChartProps> {
         const sliceName = StrCast(sliceTitle) ? StrCast(sliceTitle).replace(/\$/g, '').replace(/%/g, '').replace(/#/g, '').replace(/</g, '') : sliceTitle;
 
         const sliceColors = Cast(this._props.layoutDoc.dataViz_pie_sliceColors, listSpec('string'), null);
-        sliceColors.forEach(each => {
+        sliceColors?.forEach(each => {
             if (each.split('::')[0] === sliceName) sliceColors.splice(sliceColors.indexOf(each), 1);
         });
-        sliceColors.push(StrCast(sliceName + '::' + color));
+        sliceColors?.push(StrCast(sliceName + '::' + color));
     };
 
     @action changeHistogramCheckBox = () => {
@@ -384,6 +384,10 @@ export class PieChart extends ObservableReactComponent<PieChartProps> {
         this.drawChart(this._pieChartData, this.width, this.height);
     };
 
+    setChartRef = (r: HTMLDivElement | null) => {
+        this._piechartRef = r;
+        this.drawChart(this._pieChartData, this.width, this.height);
+    };
     render() {
         let titleAccessor = 'dataViz_pie_title';
         if (this._props.axes.length === 2) titleAccessor = titleAccessor + this._props.axes[0] + '-' + this._props.axes[1];
@@ -443,12 +447,7 @@ export class PieChart extends ObservableReactComponent<PieChartProps> {
                             Organize data as histogram
                         </div>
                     ) : null}
-                    <div
-                        ref={r => {
-                            this._piechartRef = r;
-                            this.drawChart(this._pieChartData, this.width, this.height);
-                        }}
-                    />
+                    <div ref={this.setChartRef} />
                     {selected !== 'none' ? (
                         <div className="selected-data">
                             Selected: {selected}
diff --git a/src/client/views/nodes/DataVizBox/components/TableBox.tsx b/src/client/views/nodes/DataVizBox/components/TableBox.tsx
index ad2731109..cc08cf269 100644
--- a/src/client/views/nodes/DataVizBox/components/TableBox.tsx
+++ b/src/client/views/nodes/DataVizBox/components/TableBox.tsx
@@ -100,7 +100,7 @@ export class TableBox extends ObservableReactComponent<TableBoxProps> {
         return this._props.docView?.()?.screenToViewTransform().Scale || 1;
     }
     @computed get rowHeight() {
-        return (this.viewScale * this._tableHeight) / this._tableDataIds.length;
+        return (this.viewScale * this._tableHeight) / (this._tableDataIds.length + 1); // add 1 for header row
     }
     @computed get startID() {
         return this.rowHeight ? Math.max(Math.floor(this._scrollTop / this.rowHeight) - 1, 0) : 0;
@@ -400,12 +400,12 @@ export class TableBox extends ObservableReactComponent<TableBoxProps> {
                                     this._tableHeight = r?.getBoundingClientRect().height ?? 0;
                                 }
                             })}>
-                            <div style={{ height: this.startID * Number(DATA_VIZ_TABLE_ROW_HEIGHT) }} />
                             <thead>
+                                <tr style={{ height: this.startID * Number(DATA_VIZ_TABLE_ROW_HEIGHT.replace("px","")) }} />
                                 <tr>
-                                    {this.columns.map(col => (
+                                    {this.columns.map((col, i) => (
                                         <th
-                                            key={this.columns.indexOf(col)}
+                                            key={i}
                                             style={{
                                                 color:
                                                     this._props.axes.slice().reverse().lastElement() === col
@@ -440,7 +440,7 @@ export class TableBox extends ObservableReactComponent<TableBoxProps> {
                             <tbody>
                                 {this._tableDataIds
                                     .filter((rowId, i) => this.startID - 2 <= i && i <= this.endID + 2)
-                                    ?.map(rowId => (
+                                    .map(rowId => (
                                         <tr
                                             key={rowId}
                                             className={`tableBox-row ${this.columns[0]}`}
@@ -456,22 +456,22 @@ export class TableBox extends ObservableReactComponent<TableBoxProps> {
                                                             : '',
                                                 border: rowId === this._props.specHighlightedRow ? `solid 3px ${Colors.MEDIUM_BLUE}` : '',
                                             }}>
-                                            {this.columns.map(col => {
+                                            {this.columns.map((col, i) => {
                                                 let colSelected = false;
                                                 if (this._props.axes.length > 2) colSelected = this._props.axes[0] === col || this._props.axes[1] === col || this._props.axes[2] === col;
                                                 else if (this._props.axes.length > 1) colSelected = this._props.axes[0] === col || this._props.axes[1] === col;
                                                 else if (this._props.axes.length > 0) colSelected = this._props.axes[0] === col;
                                                 if (this._props.titleCol === col) colSelected = true;
                                                 return (
-                                                    <td key={this.columns.indexOf(col)} style={{ border: colSelected ? '3px solid black' : '1px solid black', fontWeight: colSelected ? 'bolder' : 'normal' }}>
+                                                    <td key={i} style={{ border: (colSelected ? '3' : '1') + 'px solid black', fontWeight: colSelected ? 'bolder' : 'normal' }}>
                                                         <div className="tableBox-cell">{this._props.records[rowId][col] as string | number}</div>
                                                     </td>
                                                 );
                                             })}
                                         </tr>
                                     ))}
+                                <tr style={{ display: this._tableDataIds.length - this.endID ? undefined : 'none', height: (this._tableDataIds.length - this.endID) * Number(DATA_VIZ_TABLE_ROW_HEIGHT.replace("px","")) }} />
                             </tbody>
-                            <div style={{ height: (this._tableDataIds.length - this.endID) * Number(DATA_VIZ_TABLE_ROW_HEIGHT) }} />
                         </table>
                     </div>
                 </div>