From 4574b7f03ccc85c4bebdbfd9475788456086704f Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Thu, 8 Aug 2024 12:27:40 -0400
Subject: many changes to add typing in place of 'any's etc

---
 .../views/nodes/DataVizBox/components/TableBox.tsx | 56 +++++++++++-----------
 1 file changed, 29 insertions(+), 27 deletions(-)

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

diff --git a/src/client/views/nodes/DataVizBox/components/TableBox.tsx b/src/client/views/nodes/DataVizBox/components/TableBox.tsx
index d2e82284e..7179356b2 100644
--- a/src/client/views/nodes/DataVizBox/components/TableBox.tsx
+++ b/src/client/views/nodes/DataVizBox/components/TableBox.tsx
@@ -1,5 +1,3 @@
-/* eslint-disable jsx-a11y/no-noninteractive-tabindex */
-/* eslint-disable jsx-a11y/no-static-element-interactions */
 import { Button, Type } from 'browndash-components';
 import { IReactionDisposer, action, computed, makeObservable, observable, reaction, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
@@ -24,7 +22,7 @@ const { DATA_VIZ_TABLE_ROW_HEIGHT } = require('../../../global/globalCssVariable
 interface TableBoxProps {
     Document: Doc;
     layoutDoc: Doc;
-    records: { [key: string]: any }[];
+    records: { [key: string]: unknown }[];
     selectAxes: (axes: string[]) => void;
     selectTitleCol: (titleCol: string) => void;
     axes: string[];
@@ -48,14 +46,14 @@ export class TableBox extends ObservableReactComponent<TableBoxProps> {
     @observable settingTitle: boolean = false; // true when setting a title column
     @observable hasRowsToFilter: boolean = false; // true when any rows are selected
     @observable filtering: boolean = false; // true when the filtering menu is open
-    @observable filteringColumn: any = ''; // column to filter
+    @observable filteringColumn = ''; // column to filter
     @observable filteringType: string = 'Value'; // "Value" or "Range"
-    filteringVal: any[] = ['', '']; // value or range to filter the column with
+    filteringVal = ['', '']; // value or range to filter the column with
 
     @observable _scrollTop = -1;
     @observable _tableHeight = 0;
     @observable _tableContainerHeight = 0;
-    constructor(props: any) {
+    constructor(props: TableBoxProps) {
         super(props);
         makeObservable(this);
     }
@@ -141,17 +139,21 @@ export class TableBox extends ObservableReactComponent<TableBoxProps> {
             e,
             moveEv => {
                 // dragging off a column to create a brushed DataVizBox
-                const sourceAnchorCreator = () => this._props.docView?.()!.Document!;
+                const sourceAnchorCreator = () => this._props.docView?.()?.Document || this._props.Document;
                 const targetCreator = (annotationOn: Doc | undefined) => {
-                    const embedding = Doc.MakeEmbedding(this._props.docView?.()!.Document!);
-                    embedding._dataViz = DataVizView.TABLE;
-                    embedding._dataViz_axes = new List<string>([col]);
-                    embedding._dataViz_parentViz = this._props.Document;
-                    embedding.annotationOn = annotationOn;
-                    embedding.histogramBarColors = Field.Copy(this._props.layoutDoc.histogramBarColors);
-                    embedding.defaultHistogramColor = this._props.layoutDoc.defaultHistogramColor;
-                    embedding.pieSliceColors = Field.Copy(this._props.layoutDoc.pieSliceColors);
-                    return embedding;
+                    const doc = this._props.docView?.()?.Document;
+                    if (doc) {
+                        const embedding = Doc.MakeEmbedding(doc);
+                        embedding._dataViz = DataVizView.TABLE;
+                        embedding._dataViz_axes = new List<string>([col]);
+                        embedding._dataViz_parentViz = this._props.Document;
+                        embedding.annotationOn = annotationOn;
+                        embedding.histogramBarColors = Field.Copy(this._props.layoutDoc.histogramBarColors);
+                        embedding.defaultHistogramColor = this._props.layoutDoc.defaultHistogramColor;
+                        embedding.pieSliceColors = Field.Copy(this._props.layoutDoc.pieSliceColors);
+                        return embedding;
+                    }
+                    return this._props.Document;
                 };
                 if (this._props.docView?.() && !ClientUtils.isClick(moveEv.clientX, moveEv.clientY, downX, downY, Date.now())) {
                     DragManager.StartAnchorAnnoDrag(moveEv.target instanceof HTMLElement ? [moveEv.target] : [], new DragManager.AnchorAnnoDragData(this._props.docView()!, sourceAnchorCreator, targetCreator), downX, downY, {
@@ -188,9 +190,9 @@ export class TableBox extends ObservableReactComponent<TableBoxProps> {
     /**
      * These functions handle the filtering popup for when the "filter" button is pressed to select rows
      */
-    filter = undoable((e: any) => {
-        let start: any;
-        let end: any;
+    filter = undoable((e: React.MouseEvent) => {
+        let start: string | number;
+        let end: string | number;
         if (this.filteringType === 'Range') {
             start = Number.isNaN(Number(this.filteringVal[0])) ? this.filteringVal[0] : Number(this.filteringVal[0]);
             end = Number.isNaN(Number(this.filteringVal[1])) ? this.filteringVal[1] : Number(this.filteringVal[1]);
@@ -204,8 +206,8 @@ export class TableBox extends ObservableReactComponent<TableBoxProps> {
                     }
                 }
             } else {
-                let compare = this._props.records[rowID][this.filteringColumn];
-                if (compare as Number) compare = Number(compare);
+                let compare = this._props.records[rowID][this.filteringColumn] as string | number;
+                if (Number(compare) == compare) compare = Number(compare);
                 if (start <= compare && compare <= end) {
                     if (!NumListCast(this._props.layoutDoc.dataViz_selectedRows).includes(rowID)) {
                         this.tableRowClick(e, rowID);
@@ -218,11 +220,11 @@ export class TableBox extends ObservableReactComponent<TableBoxProps> {
         this.filteringVal = ['', ''];
     }, 'filter table');
     @action
-    setFilterColumn = (e: any) => {
+    setFilterColumn = (e: React.ChangeEvent<HTMLSelectElement>) => {
         this.filteringColumn = e.currentTarget.value;
     };
     @action
-    setFilterType = (e: any) => {
+    setFilterType = (e: React.ChangeEvent<HTMLSelectElement>) => {
         this.filteringType = e.currentTarget.value;
     };
     changeFilterValue = action((e: React.ChangeEvent<HTMLInputElement>) => {
@@ -240,7 +242,7 @@ export class TableBox extends ObservableReactComponent<TableBoxProps> {
             <div className="tableBox-filterPopup" style={{ right: this._props.width * 0.05 }}>
                 <div className="tableBox-filterPopup-selectColumn">
                     Column:
-                    <select className="tableBox-filterPopup-selectColumn-each" value={this.filteringColumn !== '' ? this.filteringColumn : this.columns[0]} onChange={e => this.setFilterColumn(e)}>
+                    <select className="tableBox-filterPopup-selectColumn-each" value={this.filteringColumn !== '' ? this.filteringColumn : this.columns[0]} onChange={this.setFilterColumn}>
                         {this.columns.map(column => (
                             <option className="" key={column} value={column}>
                                 {' '}
@@ -250,7 +252,7 @@ export class TableBox extends ObservableReactComponent<TableBoxProps> {
                     </select>
                 </div>
                 <div className="tableBox-filterPopup-setValue">
-                    <select className="tableBox-filterPopup-setValue-each" value={this.filteringType} onChange={e => this.setFilterType(e)}>
+                    <select className="tableBox-filterPopup-setValue-each" value={this.filteringType} onChange={this.setFilterType}>
                         <option className="" key="Value" value="Value">
                             {' '}
                             {'Value'}{' '}
@@ -307,7 +309,7 @@ export class TableBox extends ObservableReactComponent<TableBoxProps> {
                     )}
                 </div>
                 <div className="tableBox-filterPopup-setFilter">
-                    <Button onClick={action(e => this.filter(e))} text="Set Filter" type={Type.SEC} color="black" />
+                    <Button onClick={this.filter} text="Set Filter" type={Type.SEC} color="black" />
                 </div>
             </div>
         );
@@ -451,7 +453,7 @@ export class TableBox extends ObservableReactComponent<TableBoxProps> {
                                                 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' }}>
-                                                        <div className="tableBox-cell">{this._props.records[rowId][col]}</div>
+                                                        <div className="tableBox-cell">{this._props.records[rowId][col] as string | number}</div>
                                                     </td>
                                                 );
                                             })}
-- 
cgit v1.2.3-70-g09d2