Merge branch 'restoringEslint' into sarah-ai-visualization

4 files changed, 518 insertions, 528 deletions

diff --git a/src/client/views/nodes/DataVizBox/components/Histogram.tsx b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
index 110626923..14d7e9bf6 100644
--- a/src/client/views/nodes/DataVizBox/components/Histogram.tsx
+++ b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
@@ -1,7 +1,7 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { ColorPicker, EditableText, IconButton, Size, Type } from 'browndash-components';
 import * as d3 from 'd3';
-import { IReactionDisposer, action, computed, makeObservable, observable, reaction } from 'mobx';
+import { IReactionDisposer, action, computed, makeObservable, observable } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
 import { FaFillDrip } from 'react-icons/fa';
@@ -12,7 +12,7 @@ import { Cast, DocCast, StrCast } from '../../../../../fields/Types';
 import { Docs } from '../../../../documents/Documents';
 import { undoable } from '../../../../util/UndoManager';
 import { ObservableReactComponent } from '../../../ObservableReactComponent';
-import { PinProps, PresBox } from '../../trails';
+import { PinProps, PinDocView } from '../../../PinFuncs';
 import { scaleCreatorNumerical, yAxisCreator } from '../utils/D3Utils';
 import './Chart.scss';
 
@@ -37,7 +37,7 @@ export interface HistogramProps {
 @observer
 export class Histogram extends ObservableReactComponent<HistogramProps> {
     private _disposers: { [key: string]: IReactionDisposer } = {};
-    private _histogramRef: React.RefObject<HTMLDivElement> = React.createRef();
+    private _histogramRef: HTMLDivElement | null = null;
     private _histogramSvg: d3.Selection<SVGGElement, unknown, null, undefined> | undefined;
     private numericalXData: boolean = false; // whether the data is organized by numbers rather than categoreis
     private numericalYData: boolean = false; // whether the y axis is controlled by provided data rather than frequency
@@ -63,14 +63,13 @@ export class Histogram extends ObservableReactComponent<HistogramProps> {
     @computed get _histogramData() {
         if (this._props.axes.length < 1) return [];
         if (this._props.axes.length < 2) {
-            var ax0 = this._props.axes[0];
-            if (!/[A-Za-z-:]/.test(this._props.records[0][ax0])){
+            const ax0 = this._props.axes[0];
+            if (!/[A-Za-z-:]/.test(this._props.records[0][ax0])) {
                 this.numericalXData = true;
             }
             return this._tableData.map(record => ({ [ax0]: record[this._props.axes[0]] }));
         }
-        var ax0 = this._props.axes[0];
-        var ax1 = this._props.axes[1];
+        const [ax0, ax1] = this._props.axes;
         if (!/[A-Za-z-:]/.test(this._props.records[0][ax0])) {
             this.numericalXData = true;
         }
@@ -81,11 +80,11 @@ export class Histogram extends ObservableReactComponent<HistogramProps> {
     }
 
     @computed get defaultGraphTitle() {
-        var ax0 = this._props.axes[0];
-        var ax1 = this._props.axes.length > 1 ? this._props.axes[1] : undefined;
+        const [ax0, ax1] = this._props.axes;
         if (this._props.axes.length < 2 || !ax1 || !/\d/.test(this._props.records[0][ax1]) || !this.numericalYData) {
             return ax0 + ' Histogram';
-        } else return ax0 + ' by ' + ax1 + ' Histogram';
+        }
+        return ax0 + ' by ' + ax1 + ' Histogram';
     }
 
     @computed get parentViz() {
@@ -104,39 +103,30 @@ export class Histogram extends ObservableReactComponent<HistogramProps> {
         Array.from(Object.keys(this._disposers)).forEach(key => this._disposers[key]());
     }
     componentDidMount() {
-        // draw histogram
-        this._disposers.chartData = reaction(
-            () => ({ dataSet: this._histogramData, w: this.width, h: this.height }),
-            ({ dataSet, w, h }) => dataSet!.length > 0 && this.drawChart(dataSet, w, h),
-            { fireImmediately: true }
-        );
-
         // restore selected bars
-        var svg = this._histogramSvg;
+        const svg = this._histogramSvg;
         if (svg) {
-            const selectedDataBars = StrListCast(this._props.layoutDoc.dataViz_histogram_selectedData)
+            const selectedDataBars = StrListCast(this._props.layoutDoc.dataViz_histogram_selectedData);
             svg.selectAll('rect').attr('class', (d: any) => {
                 let selected = false;
                 selectedDataBars.forEach(eachSelectedData => {
-                    if (d[0]==eachSelectedData) selected = true;
-                })
-                if (selected){
+                    if (d[0] === eachSelectedData) selected = true;
+                });
+                if (selected) {
                     this.selectedData.push(d);
-                    return 'histogram-bar hover'
+                    return 'histogram-bar hover';
                 }
-                else return 'histogram-bar';
+                return 'histogram-bar';
             });
         }
     }
 
-    @action
-    restoreView = (data: Doc) => {};
     // create a document anchor that stores whatever is needed to reconstruct the viewing state (selection,zoom,etc)
     getAnchor = (pinProps?: PinProps) => {
         const anchor = Docs.Create.ConfigDocument({
             title: 'histogram doc selection' + this._currSelected,
         });
-        PresBox.pinDocView(anchor, { pinDocLayout: pinProps?.pinDocLayout, pinData: pinProps?.pinData }, this._props.Document);
+        PinDocView(anchor, { pinDocLayout: pinProps?.pinDocLayout, pinData: pinProps?.pinData }, this._props.Document);
         return anchor;
     };
 
@@ -150,70 +140,70 @@ export class Histogram extends ObservableReactComponent<HistogramProps> {
 
     // cleans data by converting numerical data to numbers and taking out empty cells
     data = (dataSet: any) => {
-        var validData = dataSet.filter((d: { [x: string]: unknown }) => !Object.keys(dataSet[0]).some(key => !d[key] || Number.isNaN(d[key])));
+        const validData = dataSet.filter((d: { [x: string]: unknown }) => !Object.keys(dataSet[0]).some(key => !d[key] || isNaN(d[key] as any)));
         const field = dataSet[0] ? Object.keys(dataSet[0])[0] : undefined;
         return !field
             ? []
             : validData.map((d: { [x: string]: any }) =>
                   !this.numericalXData //
                       ? d[field]
-                      : +d[field!].replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, '')
+                      : +d[field!].replace(/\$/g, '').replace(/%/g, '').replace(/</g, '')
               );
     };
 
     // outlines the bar selected / hovered over
     highlightSelectedBar = (changeSelectedVariables: boolean, svg: any, eachRectWidth: any, pointerX: any, xAxisTitle: any, yAxisTitle: any, histDataSet: any) => {
-        var sameAsCurrent: boolean;
-        var barCounter = -1;
+        let barCounter = -1;
         const selected = svg.selectAll('.histogram-bar').filter((d: any) => {
             barCounter++; // uses the order of bars and width of each bar to find which one the pointer is over
-            if (barCounter * eachRectWidth <= pointerX && pointerX <= (barCounter + 1) * eachRectWidth) {
-                var showSelected = this.numericalYData
-                    ? this._histogramData.filter((data: { [x: string]: any }) => StrCast(data[xAxisTitle]).replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, '') == d[0])[0]
-                    : histDataSet.filter((data: { [x: string]: any }) => data[xAxisTitle].replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, '') == d[0])[0];
+            if (d.length && barCounter * eachRectWidth <= pointerX && pointerX <= (barCounter + 1) * eachRectWidth) {
+                let showSelected = this.numericalYData
+                    ? this._histogramData.filter((data: { [x: string]: any }) => StrCast(data[xAxisTitle]).replace(/\$/g, '').replace(/%/g, '').replace(/</g, '') == d[0])[0]
+                    : histDataSet.filter((data: { [x: string]: any }) => data[xAxisTitle].replace(/\$/g, '').replace(/%/g, '').replace(/</g, '') == d[0])[0];
                 if (this.numericalXData) {
                     // calculating frequency
-                    if (d[0] && d[1] && d[0] != d[1]) {
+                    if (d[0] && d[1] && d[0] !== d[1]) {
                         showSelected = { [xAxisTitle]: d3.min(d) + ' to ' + d3.max(d), frequency: d.length };
                     } else if (!this.numericalYData) showSelected = { [xAxisTitle]: showSelected[xAxisTitle], frequency: d.length };
                 }
                 if (changeSelectedVariables) {
                     // for when a bar is selected - not just hovered over
-                    sameAsCurrent = this._currSelected ? showSelected[xAxisTitle] == this._currSelected![xAxisTitle] && showSelected[yAxisTitle] == this._currSelected![yAxisTitle] : false;
                     let sameAsAny = false;
                     const selectedDataBars = Cast(this._props.layoutDoc.dataViz_histogram_selectedData, listSpec('number'), null);
                     this.selectedData.forEach(eachData => {
-                        if (!sameAsAny){
+                        if (!sameAsAny) {
                             let match = true;
                             Object.keys(d).forEach(key => {
-                                if (d[key] != eachData[key]) match = false;
-                            })
+                                if (d[key] !== eachData[key]) match = false;
+                            });
                             if (match) {
                                 sameAsAny = true;
-                                let index = this.selectedData.indexOf(eachData)
+                                const index = this.selectedData.indexOf(eachData);
                                 this.selectedData.splice(index, 1);
                                 selectedDataBars.splice(index, 1);
                                 this._currSelected = undefined;
                             }
                         }
-                    })
-                    if(!sameAsAny) {
+                    });
+                    if (!sameAsAny) {
                         this.selectedData.push(d);
                         selectedDataBars.push(d[0]);
-                        this._currSelected = this.selectedData.length>1? undefined : showSelected;
+                        this._currSelected = this.selectedData.length > 1 ? undefined : showSelected;
                     }
 
                     // for filtering child dataviz docs
-                    if (this._props.layoutDoc.dataViz_filterSelection){
+                    if (this._props.layoutDoc.dataViz_filterSelection) {
                         const selectedRows = Cast(this._props.layoutDoc.dataViz_selectedRows, listSpec('number'), null);
                         this._tableDataIds.forEach(rowID => {
                             let match = false;
-                            for (let i=0; i<d.length; i++){
-                                if (this._props.records[rowID][xAxisTitle].replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, '') == d[i]) match = true;
+                            for (let i = 0; i < d.length; i++) {
+                                console.log('Compare: ' + this._props.records[rowID][xAxisTitle].replace(/\$/g, '').replace(/%/g, '').replace(/</g, '') + ' = ' + d[i]);
+                                if (this._props.records[rowID][xAxisTitle].replace(/\$/g, '').replace(/%/g, '').replace(/</g, '') == d[i]) match = true;
                             }
-                            if (match && !selectedRows?.includes(rowID)) selectedRows?.push(rowID); // adding to filtered rows
+                            if (match && !selectedRows?.includes(rowID))
+                                selectedRows?.push(rowID); // adding to filtered rows
                             else if (match && sameAsAny) selectedRows.splice(selectedRows.indexOf(rowID), 1); // removing from filtered rows
-                        })
+                        });
                     }
                 } else this.hoverOverData = d;
                 return true;
@@ -228,23 +218,24 @@ export class Histogram extends ObservableReactComponent<HistogramProps> {
 
     // draws the histogram
     drawChart = (dataSet: any, width: number, height: number) => {
-        d3.select(this._histogramRef.current).select('svg').remove();
-        d3.select(this._histogramRef.current).select('.tooltip').remove();
+        if (dataSet?.length <= 0) return;
+        d3.select(this._histogramRef).select('svg').remove();
+        d3.select(this._histogramRef).select('.tooltip').remove();
 
         const data = this.data(dataSet);
         const xAxisTitle = Object.keys(dataSet[0])[0];
         const yAxisTitle = this.numericalYData ? Object.keys(dataSet[0])[1] : 'frequency';
         const uniqueArr: unknown[] = [...new Set(data)];
-        var numBins = this.numericalXData && Number.isInteger(data[0]) ? this.rangeVals.xMax! - this.rangeVals.xMin! : uniqueArr.length;
-        var translateXAxis = !this.numericalXData || numBins < this.maxBins ? width / (numBins + 1) / 2 : 0;
+        let numBins = this.numericalXData && Number.isInteger(data[0]) ? this.rangeVals.xMax! - this.rangeVals.xMin! : uniqueArr.length;
+        let translateXAxis = !this.numericalXData || numBins < this.maxBins ? width / (numBins + 1) / 2 : 0;
         if (numBins > this.maxBins) numBins = this.maxBins;
         const startingPoint = this.numericalXData ? this.rangeVals.xMin! : 0;
         const endingPoint = this.numericalXData ? this.rangeVals.xMax! : numBins;
 
         // converts data into Objects
-        var histDataSet = dataSet.filter((d: { [x: string]: unknown }) => !Object.keys(dataSet[0]).some(key => !d[key] || Number.isNaN(d[key])));
+        let histDataSet = dataSet.filter((d: { [x: string]: unknown }) => !Object.keys(dataSet[0]).some(key => !d[key] || isNaN(d[key] as any)));
         if (!this.numericalXData) {
-            var histStringDataSet: { [x: string]: unknown }[] = [];
+            const histStringDataSet: { [x: string]: unknown }[] = [];
             if (this.numericalYData) {
                 for (let i = 0; i < dataSet.length; i++) {
                     histStringDataSet.push({ [yAxisTitle]: dataSet[i][yAxisTitle], [xAxisTitle]: dataSet[i][xAxisTitle] });
@@ -254,7 +245,7 @@ export class Histogram extends ObservableReactComponent<HistogramProps> {
                     histStringDataSet.push({ [yAxisTitle]: 0, [xAxisTitle]: uniqueArr[i] });
                 }
                 for (let i = 0; i < data.length; i++) {
-                    let barData = histStringDataSet.filter(each => each[xAxisTitle] == data[i]);
+                    const barData = histStringDataSet.filter(each => each[xAxisTitle] == data[i]);
                     histStringDataSet.filter(each => each[xAxisTitle] == data[i])[0][yAxisTitle] = Number(barData[0][yAxisTitle]) + 1;
                 }
             }
@@ -262,31 +253,29 @@ export class Histogram extends ObservableReactComponent<HistogramProps> {
         }
 
         // initial graph and binning data for histogram
-        var svg = (this._histogramSvg = d3
-            .select(this._histogramRef.current)
+        const svg = (this._histogramSvg = d3
+            .select(this._histogramRef)
             .append('svg')
             .attr('class', 'graph')
             .attr('width', width + this._props.margin.right + this._props.margin.left)
             .attr('height', height + this._props.margin.top + this._props.margin.bottom)
             .append('g')
             .attr('transform', 'translate(' + this._props.margin.left + ',' + this._props.margin.top + ')'));
-        var x = d3
+        let x = d3
             .scaleLinear()
             .domain(this.numericalXData ? [startingPoint!, endingPoint!] : [0, numBins])
             .range([0, width]);
-        var histogram = d3
+        const histogram = d3
             .histogram()
-            .value(function (d) {
-                return d;
-            })
+            .value(d => d)
             .domain([startingPoint!, endingPoint!])
             .thresholds(x.ticks(numBins));
-        var bins = histogram(data);
-        var eachRectWidth = width / bins.length;
-        var graphStartingPoint = bins[0].x1 && bins[1] ? bins[0].x1! - (bins[1].x1! - bins[1].x0!) : 0;
+        const bins = histogram(data);
+        let eachRectWidth = width / bins.length;
+        const graphStartingPoint = bins[0].x1 && bins[1] ? bins[0].x1! - (bins[1].x1! - bins[1].x0!) : 0;
         bins[0].x0 = graphStartingPoint;
         x = x.domain([graphStartingPoint, endingPoint]).range([0, Number.isInteger(this.rangeVals.xMin!) ? width - eachRectWidth : width]);
-        var xAxis;
+        let xAxis;
 
         // more calculations based on bins
         // x-axis
@@ -295,7 +284,7 @@ export class Histogram extends ObservableReactComponent<HistogramProps> {
             // uniqueArr.sort()
             histDataSet.sort();
             for (let i = 0; i < data.length; i++) {
-                var index = 0;
+                let index = 0;
                 for (let j = 0; j < uniqueArr.length; j++) {
                     if (uniqueArr[j] == data[i]) {
                         index = j;
@@ -305,7 +294,9 @@ export class Histogram extends ObservableReactComponent<HistogramProps> {
             }
             bins.pop();
             eachRectWidth = width / bins.length;
-            bins.forEach(d => (d.x0 = d.x0!));
+            bins.forEach(d => {
+                d.x0 = d.x0!;
+            });
             xAxis = d3
                 .axisBottom(x)
                 .ticks(bins.length > 1 ? bins.length - 1 : 1)
@@ -315,12 +306,12 @@ export class Histogram extends ObservableReactComponent<HistogramProps> {
             x.domain([0, bins.length - 1]);
             translateXAxis = eachRectWidth / 2;
         } else {
-            var allSame = true;
-            for (var i = 0; i < bins.length; i++) {
+            let allSame = true;
+            for (let i = 0; i < bins.length; i++) {
                 if (bins[i] && bins[i][0]) {
-                    var compare = bins[i][0];
+                    const compare = bins[i][0];
                     for (let j = 1; j < bins[i].length; j++) {
-                        if (bins[i][j] != compare) allSame = false;
+                        if (bins[i][j] !== compare) allSame = false;
                     }
                 }
             }
@@ -329,8 +320,8 @@ export class Histogram extends ObservableReactComponent<HistogramProps> {
                 eachRectWidth = width / bins.length;
             } else {
                 eachRectWidth = width / (bins.length + 1);
-                var tickDiff = bins.length >= 2 ? bins[bins.length - 2].x1! - bins[bins.length - 2].x0! : 0;
-                var curDomain = x.domain();
+                const tickDiff = bins.length >= 2 ? bins[bins.length - 2].x1! - bins[bins.length - 2].x0! : 0;
+                const curDomain = x.domain();
                 x.domain([curDomain[0], curDomain[0] + tickDiff * bins.length]);
             }
 
@@ -338,16 +329,13 @@ export class Histogram extends ObservableReactComponent<HistogramProps> {
             x.range([0, width - eachRectWidth]);
         }
         // y-axis
-        const maxFrequency = this.numericalYData
-            ? d3.max(histDataSet, function (d: any) {
-                  return d[yAxisTitle] ? Number(d[yAxisTitle]!.replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, '')) : 0;
-              })
-            : d3.max(bins, function (d) {
-                  return d.length;
-              });
-        var y = d3.scaleLinear().range([height, 0]);
+        const maxFrequency = this.numericalYData ? 
+              d3.max(histDataSet, (d: any) => (d[yAxisTitle] ? Number(d[yAxisTitle]!.replace(/\$/g, '')
+                .replace(/%/g, '').replace(/</g, '')) : 0)) : 
+              d3.max(bins, d => d.length); // prettier-ignore
+        const y = d3.scaleLinear().range([height, 0]);
         y.domain([0, +maxFrequency!]);
-        var yAxis = d3.axisLeft(y).ticks(maxFrequency!);
+        const yAxis = d3.axisLeft(y).ticks(maxFrequency!);
         if (this.numericalYData) {
             const yScale = scaleCreatorNumerical(0, Number(maxFrequency), height, 0);
             yAxisCreator(svg.append('g'), width, yScale);
@@ -362,20 +350,22 @@ export class Histogram extends ObservableReactComponent<HistogramProps> {
         const onPointClick = action((e: any) => this.highlightSelectedBar(true, svg, eachRectWidth, d3.pointer(e)[0], xAxisTitle, yAxisTitle, histDataSet));
         const onHover = action((e: any) => {
             this.highlightSelectedBar(false, svg, eachRectWidth, d3.pointer(e)[0], xAxisTitle, yAxisTitle, histDataSet);
+            // eslint-disable-next-line no-use-before-define
             updateHighlights();
         });
-        const mouseOut = action((e: any) => {
+        const mouseOut = action(() => {
             this.hoverOverData = undefined;
+            // eslint-disable-next-line no-use-before-define
             updateHighlights();
         });
         const updateHighlights = () => {
             const hoverOverBar = this.hoverOverData;
-            const selectedData = this.selectedData;
-            svg.selectAll('rect').attr('class', function (d: any) {
+            const { selectedData } = this;
+            svg.selectAll('rect').attr('class', (d: any) => {
                 let selected = false;
                 selectedData.forEach(eachSelectedData => {
-                    if (d[0]==eachSelectedData[0]) selected = true;
-                })
+                    if (d[0] === eachSelectedData[0]) selected = true;
+                });
                 return (hoverOverBar && hoverOverBar[0] == d[0]) || selected ? 'histogram-bar hover' : 'histogram-bar';
             });
         };
@@ -387,7 +377,7 @@ export class Histogram extends ObservableReactComponent<HistogramProps> {
             .style('text-anchor', 'middle')
             .text(xAxisTitle);
         svg.append('text')
-            .attr('transform', 'rotate(-90)' + ' ' + 'translate( 0, ' + -10 + ')')
+            .attr('transform', 'rotate(-90) translate( 0, ' + -10 + ')')
             .attr('x', -(height / 2))
             .attr('y', -20)
             .style('text-anchor', 'middle')
@@ -395,7 +385,7 @@ export class Histogram extends ObservableReactComponent<HistogramProps> {
         d3.format('.0f');
 
         // draw bars
-        var selected = this.selectedData;
+        const selected = this.selectedData;
         svg.selectAll('rect')
             .data(bins)
             .enter()
@@ -403,49 +393,34 @@ export class Histogram extends ObservableReactComponent<HistogramProps> {
             .attr(
                 'transform',
                 this.numericalYData
-                    ? function (d) {
-                          const eachData = histDataSet.filter((data: { [x: string]: number }) => {
-                              return data[xAxisTitle] == d[0];
-                          });
-                          const length = eachData.length ? StrCast(eachData[0][yAxisTitle]).replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, '') : 0;
+                    ? d => {
+                          const eachData = histDataSet.filter((hData: { [x: string]: number }) => hData[xAxisTitle] == d[0]);
+                          const length = eachData.length ? StrCast(eachData[0][yAxisTitle]).replace(/\$/g, '').replace(/%/g, '').replace(/</g, '') : 0;
                           return 'translate(' + x(d.x0!) + ',' + y(Number(length)) + ')';
                       }
-                    : function (d) {
-                          return 'translate(' + x(d.x0!) + ',' + y(d.length) + ')';
-                      }
+                    : d => 'translate(' + x(d.x0!) + ',' + y(d.length) + ')'
             )
             .attr(
                 'height',
                 this.numericalYData
-                    ? function (d) {
-                          const eachData = histDataSet.filter((data: { [x: string]: number }) => {
-                              return data[xAxisTitle] == d[0];
-                          });
-                          const length = eachData.length ? StrCast(eachData[0][yAxisTitle]).replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, '') : 0;
+                    ? d => {
+                          const eachData = histDataSet.filter((hData: { [x: string]: number }) => hData[xAxisTitle] == d[0]);
+                          const length = eachData.length ? StrCast(eachData[0][yAxisTitle]).replace(/\$/g, '').replace(/%/g, '').replace(/</g, '') : 0;
                           return height - y(Number(length));
                       }
-                    : function (d) {
-                          return height - y(d.length);
-                      }
+                    : d => height - y(d.length)
             )
             .attr('width', eachRectWidth)
-            .attr(
-                'class',
-                    function (d) {
-                        let selectThisData = false;
-                        selected.forEach(eachSelectedData => {
-                            if (d[0]==eachSelectedData[0]) selectThisData = true;
-                        })
-                        return selectThisData ? 'histogram-bar hover' : 'histogram-bar';
-                    }
-            )
+            .attr('class', selected ? d => (selected && selected[0] == d[0] ? 'histogram-bar hover' : 'histogram-bar') : () => 'histogram-bar')
             .attr('fill', d => {
-                var barColor;
+                let barColor;
                 const barColors = StrListCast(this._props.layoutDoc.dataViz_histogram_barColors).map(each => each.split('::'));
                 barColors.forEach(each => {
+                    // eslint-disable-next-line prefer-destructuring
                     if (d[0] && d[0].toString() && each[0] == d[0].toString()) barColor = each[1];
                     else {
                         const range = StrCast(each[0]).split(' to ');
+                        // eslint-disable-next-line prefer-destructuring
                         if (Number(range[0]) <= d[0] && d[0] <= Number(range[1])) barColor = each[1];
                     }
                 });
@@ -455,7 +430,7 @@ export class Histogram extends ObservableReactComponent<HistogramProps> {
 
     @action changeSelectedColor = (color: string) => {
         this.curBarSelected.attr('fill', color);
-        const barName = StrCast(this._currSelected[this._props.axes[0]].replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, ''));
+        const barName = StrCast(this._currSelected[this._props.axes[0]].replace(/\$/g, '').replace(/%/g, '').replace(/</g, ''));
 
         const barColors = Cast(this._props.layoutDoc.dataViz_histogram_barColors, listSpec('string'), null);
         barColors.forEach(each => each.split('::')[0] === barName && barColors.splice(barColors.indexOf(each), 1));
@@ -464,7 +439,7 @@ export class Histogram extends ObservableReactComponent<HistogramProps> {
 
     @action eraseSelectedColor = () => {
         this.curBarSelected.attr('fill', this._props.layoutDoc.dataViz_histogram_defaultColor);
-        const barName = StrCast(this._currSelected[this._props.axes[0]].replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, ''));
+        const barName = StrCast(this._currSelected[this._props.axes[0]].replace(/\$/g, '').replace(/%/g, '').replace(/</g, ''));
 
         const barColors = Cast(this._props.layoutDoc.dataViz_histogram_barColors, listSpec('string'), null);
         barColors.forEach(each => each.split('::')[0] === barName && barColors.splice(barColors.indexOf(each), 1));
@@ -472,16 +447,18 @@ export class Histogram extends ObservableReactComponent<HistogramProps> {
 
     // reloads the bar colors and selected bars
     updateSavedUI = () => {
-        var svg = this._histogramSvg;
+        const svg = this._histogramSvg;
         if (svg) {
             // bar color
             svg.selectAll('rect').attr('fill', (d: any) => {
-                var barColor;
+                let barColor;
                 const barColors = StrListCast(this._props.layoutDoc.dataViz_histogram_barColors).map(each => each.split('::'));
                 barColors.forEach(each => {
+                    // eslint-disable-next-line prefer-destructuring
                     if (d[0] && d[0].toString() && each[0] == d[0].toString()) barColor = each[1];
                     else {
                         const range = StrCast(each[0]).split(' to ');
+                        // eslint-disable-next-line prefer-destructuring
                         if (Number(range[0]) <= d[0] && d[0] <= Number(range[1])) barColor = each[1];
                     }
                 });
@@ -493,40 +470,42 @@ export class Histogram extends ObservableReactComponent<HistogramProps> {
     render() {
         this.updateSavedUI();
         this._histogramData;
-        var curSelectedBarName = '';
-        var titleAccessor: any = 'dataViz_histogram_title';
-        if (this._props.axes.length == 2) titleAccessor = titleAccessor + this._props.axes[0] + '-' + this._props.axes[1];
-        else if (this._props.axes.length > 0) titleAccessor = titleAccessor + this._props.axes[0];
+        let curSelectedBarName = '';
+        let titleAccessor: any = 'dataViz_histogram_title';
+        if (this._props.axes.length === 2) titleAccessor = titleAccessor + this._props.axes[0] + '-' + this._props.axes[1];
+        else if (this._props.axes.length > 0) titleAccessor += this._props.axes[0];
         if (!this._props.layoutDoc[titleAccessor]) this._props.layoutDoc[titleAccessor] = this.defaultGraphTitle;
         if (!this._props.layoutDoc.dataViz_histogram_defaultColor) this._props.layoutDoc.dataViz_histogram_defaultColor = '#69b3a2';
         if (!this._props.layoutDoc.dataViz_histogram_barColors) this._props.layoutDoc.dataViz_histogram_barColors = new List<string>();
         if (!this._props.layoutDoc.dataViz_histogram_selectedData) this._props.layoutDoc.dataViz_histogram_selectedData = new List<string>();
-        var selected = 'none';
+        let selected = 'none';
         if (this._currSelected) {
-            curSelectedBarName = StrCast(this._currSelected![this._props.axes[0]].replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, ''));
+            curSelectedBarName = StrCast(this._currSelected![this._props.axes[0]].replace(/\$/g, '').replace(/%/g, '').replace(/</g, ''));
             selected = '{ ';
-            Object.keys(this._currSelected).forEach(key =>
+            Object.keys(this._currSelected).forEach(key => {
                 key //
                     ? (selected += key + ': ' + this._currSelected[key] + ', ')
-                    : ''
-            );
+                    : '';
+            });
             selected = selected.substring(0, selected.length - 2) + ' }';
-            if (this._props.titleCol!="" && (!this._currSelected["frequency"] || this._currSelected["frequency"]<10)){
-                selected+= "\n" + this._props.titleCol + ": "
+            if (this._props.titleCol !== '' && (!this._currSelected.frequency || this._currSelected.frequency < 10)) {
+                selected += '\n' + this._props.titleCol + ': ';
                 this._tableData.forEach(each => {
-                    if (this._currSelected[this._props.axes[0]]==each[this._props.axes[0]]) {
-                        if (this._props.axes[1]){
-                            if (this._currSelected[this._props.axes[1]]==each[this._props.axes[1]]) selected+= each[this._props.titleCol] + ", ";
-                        }
-                        else selected+= each[this._props.titleCol] + ", ";
+                    if (this._currSelected[this._props.axes[0]] === each[this._props.axes[0]]) {
+                        if (this._props.axes[1]) {
+                            if (this._currSelected[this._props.axes[1]] === each[this._props.axes[1]]) selected += each[this._props.titleCol] + ', ';
+                        } else selected += each[this._props.titleCol] + ', ';
                     }
-                })
-                selected = selected.slice(0,-1).slice(0,-1);
+                });
+                selected = selected.slice(0, -1).slice(0, -1);
             }
         }
-        var selectedBarColor;
-        var barColors = StrListCast(this._props.layoutDoc.histogramBarColors).map(each => each.split('::'));
-        barColors.forEach(each => each[0] === curSelectedBarName && (selectedBarColor = each[1]));
+        let selectedBarColor;
+        const barColors = StrListCast(this._props.layoutDoc.histogramBarColors).map(each => each.split('::'));
+        barColors.forEach(each => {
+            // eslint-disable-next-line prefer-destructuring
+            each[0] === curSelectedBarName && (selectedBarColor = each[1]);
+        });
 
         if (this._histogramData.length > 0 || !this.parentViz) {
             return this._props.axes.length >= 1 ? (
@@ -535,55 +514,63 @@ export class Histogram extends ObservableReactComponent<HistogramProps> {
                         <EditableText
                             val={StrCast(this._props.layoutDoc[titleAccessor])}
                             setVal={undoable(
-                                action(val => (this._props.layoutDoc[titleAccessor] = val as string)),
+                                action(val => {
+                                    this._props.layoutDoc[titleAccessor] = val as string;
+                                }),
                                 'Change Graph Title'
                             )}
-                            color={'black'}
+                            color="black"
                             size={Size.LARGE}
                             fillWidth
                         />
                         &nbsp; &nbsp;
                         <ColorPicker
-                            tooltip={'Change Default Bar Color'}
+                            tooltip="Change Default Bar Color"
                             type={Type.SEC}
                             icon={<FaFillDrip />}
                             selectedColor={StrCast(this._props.layoutDoc.dataViz_histogram_defaultColor)}
-                            setFinalColor={undoable(color => (this._props.layoutDoc.dataViz_histogram_defaultColor = color), 'Change Default Bar Color')}
-                            setSelectedColor={undoable(color => (this._props.layoutDoc.dataViz_histogram_defaultColor = color), 'Change Default Bar Color')}
+                            setFinalColor={undoable(color => {
+                                this._props.layoutDoc.dataViz_histogram_defaultColor = color;
+                            }, 'Change Default Bar Color')}
+                            setSelectedColor={undoable(color => {
+                                this._props.layoutDoc.dataViz_histogram_defaultColor = color;
+                            }, 'Change Default Bar Color')}
                             size={Size.XSMALL}
                         />
                     </div>
-                    <div ref={this._histogramRef} />
-                    {selected != 'none' ? (
-                        <div className={'selected-data'}>
+                    <div
+                        ref={r => {
+                            this._histogramRef = r;
+                            r && this.drawChart(this._histogramData, this.width, this.height);
+                        }}
+                    />
+                    {selected !== 'none' ? (
+                        <div className="selected-data">
                             Selected: {selected}
                             &nbsp; &nbsp;
                             <ColorPicker
-                                tooltip={'Change Bar Color'}
+                                tooltip="Change Bar Color"
                                 type={Type.SEC}
                                 icon={<FaFillDrip />}
-                                selectedColor={selectedBarColor ? selectedBarColor : this.curBarSelected.attr('fill')}
+                                selectedColor={selectedBarColor || this.curBarSelected.attr('fill')}
                                 setFinalColor={undoable(color => this.changeSelectedColor(color), 'Change Selected Bar Color')}
                                 setSelectedColor={undoable(color => this.changeSelectedColor(color), 'Change Selected Bar Color')}
                                 size={Size.XSMALL}
                             />
                             &nbsp;
                             <IconButton
-                                icon={<FontAwesomeIcon icon={'eraser'} />}
+                                icon={<FontAwesomeIcon icon="eraser" />}
                                 size={Size.XSMALL}
-                                color={'black'}
+                                color="black"
                                 type={Type.SEC}
-                                tooltip={'Revert to the default bar color'}
-                                onClick={undoable(
-                                    action(() => this.eraseSelectedColor()),
-                                    'Change Selected Bar Color'
-                                )}
+                                tooltip="Revert to the default bar color" //
+                                onClick={undoable(this.eraseSelectedColor, 'Change Selected Bar Color')}
                             />
                         </div>
                     ) : null}
                 </div>
             ) : (
-                <span className="chart-container"> {'first use table view to select a column to graph'}</span>
+                <span className="chart-container"> first use table view to select a column to graph</span>
             );
         }
         // when it is a brushed table and the incoming table doesn't have any rows selected
diff --git a/src/client/views/nodes/DataVizBox/components/LineChart.tsx b/src/client/views/nodes/DataVizBox/components/LineChart.tsx
index e79f4cde5..80edf2c36 100644
--- a/src/client/views/nodes/DataVizBox/components/LineChart.tsx
+++ b/src/client/views/nodes/DataVizBox/components/LineChart.tsx
@@ -3,23 +3,20 @@ import * as d3 from 'd3';
 import { IReactionDisposer, action, computed, makeObservable, observable, reaction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
-import { Doc, DocListCast, NumListCast, StrListCast } from '../../../../../fields/Doc';
+import { Doc, NumListCast, StrListCast } from '../../../../../fields/Doc';
 import { List } from '../../../../../fields/List';
 import { listSpec } from '../../../../../fields/Schema';
 import { Cast, DocCast, StrCast } from '../../../../../fields/Types';
 import { Docs } from '../../../../documents/Documents';
-import { DocumentManager } from '../../../../util/DocumentManager';
 import { undoable } from '../../../../util/UndoManager';
+import {} from '../../../DocComponent';
 import { ObservableReactComponent } from '../../../ObservableReactComponent';
-import { PinProps, PresBox } from '../../trails';
+import { PinDocView, PinProps } from '../../../PinFuncs';
+import { DocumentView } from '../../DocumentView';
 import { DataVizBox } from '../DataVizBox';
-import { createLineGenerator, drawLine, minMaxRange, scaleCreatorNumerical, xAxisCreator, xGrid, yAxisCreator, yGrid } from '../utils/D3Utils';
+import { DataPoint, createLineGenerator, drawLine, minMaxRange, scaleCreatorNumerical, xAxisCreator, xGrid, yAxisCreator, yGrid } from '../utils/D3Utils';
 import './Chart.scss';
 
-export interface DataPoint {
-    x: number;
-    y: number;
-}
 export interface SelectedDataPoint extends DataPoint {
     elem?: d3.Selection<d3.BaseType, unknown, SVGGElement, unknown>;
 }
@@ -47,8 +44,7 @@ export class LineChart extends ObservableReactComponent<LineChartProps> {
     private _disposers: { [key: string]: IReactionDisposer } = {};
     private _lineChartRef: React.RefObject<HTMLDivElement> = React.createRef();
     private _lineChartSvg: d3.Selection<SVGGElement, unknown, null, undefined> | undefined;
-    @observable _currSelected: any | undefined = undefined;
-    private selectedData: any[] = []; // array of selected data points
+    @observable _currSelected: DataPoint | undefined = undefined;
 
     // TODO: nda - some sort of mapping that keeps track of the annotated points so we can easily remove when annotations list updates
     constructor(props: any) {
@@ -64,7 +60,6 @@ export class LineChart extends ObservableReactComponent<LineChartProps> {
         return !this.parentViz ? this._props.records : this._tableDataIds.map(rowId => this._props.records[rowId]);
     }
     @computed get _lineChartData() {
-        var guids = StrListCast(this._props.layoutDoc.dataViz_rowIds);
         if (this._props.axes.length <= 1) return [];
         return this._tableData.map(record => ({ x: Number(record[this._props.axes[0]]), y: Number(record[this._props.axes[1]]) })).sort((a, b) => (a.x < b.x ? -1 : 1));
     }
@@ -77,7 +72,7 @@ export class LineChart extends ObservableReactComponent<LineChartProps> {
     @computed get incomingHighlited() {
         // return selected x and y axes
         // otherwise, use the selection of whatever is linked to us
-        const incomingVizBox = DocumentManager.Instance.getFirstDocumentView(this.parentViz)?.ComponentView as DataVizBox;
+        const incomingVizBox = DocumentView.getFirstDocumentView(this.parentViz)?.ComponentView as DataVizBox;
         const highlitedRowIds = NumListCast(incomingVizBox?.layoutDoc?.dataViz_highlitedRows);
         return this._tableData.filter((record, i) => highlitedRowIds.includes(this._tableDataIds[i])); // get all the datapoints they have selected field set by incoming anchor
     }
@@ -100,21 +95,7 @@ export class LineChart extends ObservableReactComponent<LineChartProps> {
         );
 
         // coloring the selected point
-        const elements = document.querySelectorAll('.datapoint');
-        for (let i = 0; i < elements.length; i++) {
-            const x = Number(elements[i].getAttribute('data-x'));
-            const y = Number(elements[i].getAttribute('data-y'));
-            const selectedDataBars = StrListCast(this._props.layoutDoc.dataViz_lineChart_selectedData)
-            let selected = false;
-            selectedDataBars.forEach(eachSelectedData => { 
-                // parse each selected point into x,y
-                let xy = eachSelectedData.split(',');
-                if (Number(xy[0])===x && Number(xy[1])===y) selected = true;
-            })
-            if (selected) {
-                this.drawAnnotations(x, y, false);
-            }
-        }
+        this.colorSelectedPt();
     }
 
     // anything that doesn't need to be recalculated should just be stored as drawCharts (i.e. computed values) and drawChart is gonna iterate over these observables and generate svgs based on that
@@ -141,20 +122,35 @@ export class LineChart extends ObservableReactComponent<LineChartProps> {
         }
     };
 
-    @action
-    restoreView = (data: Doc) => {};
-
     // create a document anchor that stores whatever is needed to reconstruct the viewing state (selection,zoom,etc)
     getAnchor = (pinProps?: PinProps) => {
         const anchor = Docs.Create.ConfigDocument({
             //
-            title: 'line doc selection' + this._currSelected?.x,
+            title: 'line doc selection' + (this._currSelected?.x ?? ''),
         });
-        PresBox.pinDocView(anchor, { pinDocLayout: pinProps?.pinDocLayout, pinData: pinProps?.pinData }, this._props.Document);
+        PinDocView(anchor, { pinDocLayout: pinProps?.pinDocLayout, pinData: pinProps?.pinData }, this._props.Document);
         anchor.config_dataVizSelection = this._currSelected ? new List<number>([this._currSelected.x, this._currSelected.y]) : undefined;
         return anchor;
     };
 
+    private colorSelectedPt() {
+        const elements = document.querySelectorAll('.datapoint');
+        for (let i = 0; i < elements.length; i++) {
+            const x = Number(elements[i].getAttribute('data-x'));
+            const y = Number(elements[i].getAttribute('data-y'));
+            const selectedDataBars = StrListCast(this._props.layoutDoc.dataViz_lineChart_selectedData);
+            let selected = false;
+            selectedDataBars.forEach(eachSelectedData => {
+                // parse each selected point into x,y
+                const xy = eachSelectedData.split(',');
+                if (Number(xy[0]) === x && Number(xy[1]) === y) selected = true;
+            });
+            if (selected) {
+                this.drawAnnotations(x, y, false);
+            }
+        }
+    }
+
     @computed get height() {
         return this._props.height - this._props.margin.top - this._props.margin.bottom;
     }
@@ -164,11 +160,12 @@ export class LineChart extends ObservableReactComponent<LineChartProps> {
     }
 
     @computed get defaultGraphTitle() {
-        var ax0 = this._props.axes[0];
-        var ax1 = this._props.axes.length > 1 ? this._props.axes[1] : undefined;
+        const ax0 = this._props.axes[0];
+        const ax1 = this._props.axes.length > 1 ? this._props.axes[1] : undefined;
         if (this._props.axes.length < 2 || !/\d/.test(this._props.records[0][ax0]) || !ax1) {
             return ax0 + ' Line Chart';
-        } else return ax1 + ' by ' + ax0 + ' Line Chart';
+        }
+        return ax1 + ' by ' + ax0 + ' Line Chart';
     }
 
     setupTooltip() {
@@ -186,35 +183,37 @@ export class LineChart extends ObservableReactComponent<LineChartProps> {
 
     @action
     setCurrSelected(d: DataPoint) {
-        let sameAsAny = false;
+        let ptWasSelected = false;
         const selectedDatapoints = Cast(this._props.layoutDoc.dataViz_lineChart_selectedData, listSpec('string'), null);
-        this.selectedData.forEach(eachData => {
-            if (!sameAsAny){
-                if (eachData.x==d.x && eachData.y==d.y) {
-                    sameAsAny = true;
-                    let index = this.selectedData.indexOf(eachData)
-                    this.selectedData.splice(index, 1);
+        selectedDatapoints?.forEach(eachData => {
+            if (!ptWasSelected) {
+                const [dx, dy] = eachData.split(',');
+                if (Number(dx) === d.x && Number(dy) === d.y) {
+                    ptWasSelected = true;
+                    const index = selectedDatapoints.indexOf(eachData);
                     selectedDatapoints.splice(index, 1);
                     this._currSelected = undefined;
                 }
             }
-        })
-        if(!sameAsAny) {
-            this.selectedData.push(d);
-            selectedDatapoints.push(d.x + "," + d.y);
-            this._currSelected = this.selectedData.length>1? undefined : d;
+        });
+        if (!ptWasSelected) {
+            selectedDatapoints.push(d.x + ',' + d.y);
+            this._currSelected = selectedDatapoints.length > 1 ? undefined : d;
         }
 
         // for filtering child dataviz docs
-        if (this._props.layoutDoc.dataViz_filterSelection){
+        if (this._props.layoutDoc.dataViz_filterSelection) {
             const selectedRows = Cast(this._props.layoutDoc.dataViz_selectedRows, listSpec('number'), null);
             this._tableDataIds.forEach(rowID => {
-                if (this._props.records[rowID][this._props.axes[0]].replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, '')==d.x 
-                && this._props.records[rowID][this._props.axes[1]].replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, '')==d.y) {
-                    if (!selectedRows?.includes(rowID)) selectedRows?.push(rowID); // adding to filtered rows
-                    else if (sameAsAny) selectedRows.splice(selectedRows.indexOf(rowID), 1); // removing from filtered rows
+                if (
+                    Number(this._props.records[rowID][this._props.axes[0]].replace(/\$/g, '').replace(/%/g, '').replace(/</g, '')) === d.x && //
+                    Number(this._props.records[rowID][this._props.axes[1]].replace(/\$/g, '').replace(/%/g, '').replace(/</g, '')) === d.y
+                ) {
+                    if (!selectedRows?.includes(rowID))
+                        selectedRows?.push(rowID); // adding to filtered rows
+                    else if (ptWasSelected) selectedRows.splice(selectedRows.indexOf(rowID), 1); // removing from filtered rows
                 }
-            })
+            });
         }
 
         // coloring the selected point
@@ -222,14 +221,14 @@ export class LineChart extends ObservableReactComponent<LineChartProps> {
         for (let i = 0; i < elements.length; i++) {
             const x = Number(elements[i].getAttribute('data-x'));
             const y = Number(elements[i].getAttribute('data-y'));
-            if (x===d.x && y===d.y) {
-                if (sameAsAny) elements[i].classList.remove('brushed');
+            if (x === d.x && y === d.y) {
+                if (ptWasSelected) elements[i].classList.remove('brushed');
                 else elements[i].classList.add('brushed');
             }
         }
     }
 
-    drawDataPoints(data: DataPoint[], idx: number, xScale: d3.ScaleLinear<number, number, never>, yScale: d3.ScaleLinear<number, number, never>) {
+    drawDataPoints(data: DataPoint[], idx: number, xScale: d3.ScaleLinear<number, number, never>, yScale: d3.ScaleLinear<number, number, never>, higlightFocusPt: any, tooltip: any) {
         if (this._lineChartSvg) {
             const circleClass = '.circle-' + idx;
             this._lineChartSvg
@@ -241,7 +240,22 @@ export class LineChart extends ObservableReactComponent<LineChartProps> {
                 .attr('cx', d => xScale(d.x))
                 .attr('cy', d => yScale(d.y))
                 .attr('data-x', d => d.x)
-                .attr('data-y', d => d.y);
+                .attr('data-y', d => d.y)
+                .on('mouseenter', e => {
+                    const d0 = { x: Number(e.target.getAttribute('data-x')), y: Number(e.target.getAttribute('data-y')) };
+                    this.updateTooltip(higlightFocusPt, xScale, d0, yScale, tooltip);
+                    higlightFocusPt.style('display', null);
+                })
+                .on('mouseleave', () => {
+                    tooltip?.transition().duration(300).style('opacity', 0);
+                })
+                .on('click', (e: any) => {
+                    const d0 = { x: Number(e.target.getAttribute('data-x')), y: Number(e.target.getAttribute('data-y')) };
+                    // find .circle-d1 with data-x = d0.x and data-y = d0.y
+                    this.setCurrSelected(d0);
+                    this.updateTooltip(higlightFocusPt, xScale, d0, yScale, tooltip);
+                    this.colorSelectedPt();
+                });
         }
     }
 
@@ -250,13 +264,13 @@ export class LineChart extends ObservableReactComponent<LineChartProps> {
         d3.select(this._lineChartRef.current).select('svg').remove();
         d3.select(this._lineChartRef.current).select('.tooltip').remove();
 
-        var { xMin, xMax, yMin, yMax } = rangeVals;
+        let { xMin, xMax, yMin, yMax } = rangeVals;
         if (xMin === undefined || xMax === undefined || yMin === undefined || yMax === undefined) {
             return;
         }
 
         // adding svg
-        const margin = this._props.margin;
+        const { margin } = this._props;
         const svg = (this._lineChartSvg = d3
             .select(this._lineChartRef.current)
             .append('svg')
@@ -266,18 +280,19 @@ export class LineChart extends ObservableReactComponent<LineChartProps> {
             .append('g')
             .attr('transform', `translate(${margin.left}, ${margin.top})`));
 
-        var validSecondData;
-        if (this._props.axes.length>2){ // for when there are 2 lines on the chart
-            var next = this._tableData.map(record => ({ x: Number(record[this._props.axes[0]]), y: Number(record[this._props.axes[2]]) })).sort((a, b) => (a.x < b.x ? -1 : 1));
+        let validSecondData;
+        if (this._props.axes.length > 2) {
+            // for when there are 2 lines on the chart
+            const next = this._tableData.map(record => ({ x: Number(record[this._props.axes[0]]), y: Number(record[this._props.axes[2]]) })).sort((a, b) => (a.x < b.x ? -1 : 1));
             validSecondData = next.filter(d => {
-                if (!d.x || Number.isNaN(d.x) || !d.y || Number.isNaN(d.y)) return false;
+                if (!d.x || isNaN(d.x) || !d.y || isNaN(d.y)) return false;
                 return true;
             });
-            var secondDataRange = minMaxRange([validSecondData]);
-            if (secondDataRange.xMax!>xMax) xMax = secondDataRange.xMax;
-            if (secondDataRange.yMax!>yMax) yMax = secondDataRange.yMax;
-            if (secondDataRange.xMin!<xMin) xMin = secondDataRange.xMin;
-            if (secondDataRange.yMin!<yMin) yMin = secondDataRange.yMin;
+            const secondDataRange = minMaxRange([validSecondData]);
+            if (secondDataRange.xMax! > xMax) xMax = secondDataRange.xMax;
+            if (secondDataRange.yMax! > yMax) yMax = secondDataRange.yMax;
+            if (secondDataRange.xMin! < xMin) xMin = secondDataRange.xMin;
+            if (secondDataRange.yMin! < yMin) yMin = secondDataRange.yMin;
         }
 
         // creating the x and y scales
@@ -291,84 +306,47 @@ export class LineChart extends ObservableReactComponent<LineChartProps> {
         xAxisCreator(svg.append('g'), height, xScale);
         yAxisCreator(svg.append('g'), width, yScale);
 
+        const higlightFocusPt = svg.append('g').style('display', 'none');
+        higlightFocusPt.append('circle').attr('r', 5).attr('class', 'circle');
+        const tooltip = this.setupTooltip();
+
         if (validSecondData) {
             drawLine(svg.append('path'), validSecondData, lineGen, true);
-            this.drawDataPoints(validSecondData, 0, xScale, yScale);
-            svg.append('path').attr("stroke", "red");
+            this.drawDataPoints(validSecondData, 0, xScale, yScale, higlightFocusPt, tooltip);
+            svg.append('path').attr('stroke', 'red');
 
             // legend
-            var color = d3.scaleOrdinal()
-                .range(["black", "blue"])
-                .domain([this._props.axes[1], this._props.axes[2]])
-            svg.selectAll("mydots")
+            const color: any = d3.scaleOrdinal().range(['black', 'blue']).domain([this._props.axes[1], this._props.axes[2]]);
+            svg.selectAll('mydots')
                 .data([this._props.axes[1], this._props.axes[2]])
                 .enter()
-                .append("circle")
-                    .attr("cx", 5)
-                    .attr("cy", function(d,i){ return -30 + i*15})
-                    .attr("r", 7)
-                    .style("fill", function(d){ return color(d)})
-            svg.selectAll("mylabels")
+                .append('circle')
+                .attr('cx', 5)
+                .attr('cy', (d, i) => -30 + i * 15)
+                .attr('r', 7)
+                .style('fill', d => color(d));
+            svg.selectAll('mylabels')
                 .data([this._props.axes[1], this._props.axes[2]])
                 .enter()
-                .append("text")
-                    .attr("x", 25)
-                    .attr("y", function(d,i){ return -30 + i*15})
-                    .style("fill", function(d){ return color(d)})
-                    .text(function(d){ return d})
-                    .attr("text-anchor", "left")
-                    .style("alignment-baseline", "middle")
+                .append('text')
+                .attr('x', 25)
+                .attr('y', (d, i) => -30 + i * 15)
+                .style('fill', d => color(d))
+                .text(d => d)
+                .attr('text-anchor', 'left')
+                .style('alignment-baseline', 'middle');
         }
 
         // get valid data points
         const data = dataSet[0];
-        var validData = data.filter(d => {
-            Object.keys(data[0]).map(key => {
-                if (!d[key] || Number.isNaN(d[key])) return false;
-            });
-            return true;
-        });
+        const keys = Object.keys(data[0]);
+        const validData = data.filter(d => !keys.some(key => isNaN(d[key])));
 
         // draw the plot line
         drawLine(svg.append('path'), validData, lineGen, false);
-        // draw the datapoint circle
-        this.drawDataPoints(validData, 0, xScale, yScale);
-
-        const higlightFocusPt = svg.append('g').style('display', 'none');
-        higlightFocusPt.append('circle').attr('r', 5).attr('class', 'circle');
-        const tooltip = this.setupTooltip();
-        // add all the tooltipContent to the tooltip
-        const mousemove = action((e: any) => {
-            const bisect = d3.bisector((d: DataPoint) => d.x).left;
-            const xPos = d3.pointer(e)[0];
-            const x0 = Math.min(data.length - 1, bisect(data, xScale.invert(xPos - 5))); // shift x by -5 so that you can reach points on the left-side axis
-            const d0 = data[x0];
-            if (d0) this.updateTooltip(higlightFocusPt, xScale, d0, yScale, tooltip);
-
-            this.updateTooltip(higlightFocusPt, xScale, d0, yScale, tooltip);
-        });
-
-        const onPointClick = action((e: any) => {
-            const bisect = d3.bisector((d: DataPoint) => d.x).left;
-            const xPos = d3.pointer(e)[0];
-            const x0 = bisect(data, xScale.invert(xPos - 5)); // shift x by -5 so that you can reach points on the left-side axis
-            const d0 = data[x0];
-            // find .circle-d1 with data-x = d0.x and data-y = d0.y
-            this.setCurrSelected(d0);
-            this.updateTooltip(higlightFocusPt, xScale, d0, yScale, tooltip);
-        });
 
-        svg.append('rect')
-            .attr('class', 'overlay')
-            .attr('width', width)
-            .attr('height', this.height + margin.top + margin.bottom)
-            .attr('fill', 'none')
-            .attr('translate', `translate(${margin.left}, ${-(margin.top + margin.bottom)})`)
-            .style('opacity', 0)
-            .on('mouseover', () => higlightFocusPt.style('display', null))
-            .on('mouseout', () => tooltip.transition().duration(300).style('opacity', 0))
-            .on('mousemove', mousemove)
-            .on('click', onPointClick);
+        // draw the datapoint circle
+        this.drawDataPoints(validData, 0, xScale, yScale, higlightFocusPt, tooltip);
 
         // axis titles
         svg.append('text')
@@ -376,7 +354,7 @@ export class LineChart extends ObservableReactComponent<LineChartProps> {
             .style('text-anchor', 'middle')
             .text(this._props.axes[0]);
         svg.append('text')
-            .attr('transform', 'rotate(-90)' + ' ' + 'translate( 0, ' + -10 + ')')
+            .attr('transform', 'rotate(-90) translate(0, -10)')
             .attr('x', -(height / 2))
             .attr('y', -30)
             .attr('height', 20)
@@ -402,58 +380,61 @@ export class LineChart extends ObservableReactComponent<LineChartProps> {
     }
 
     render() {
-        var titleAccessor: any = 'dataViz_lineChart_title';
-        if (this._props.axes.length == 2) titleAccessor = titleAccessor + this._props.axes[0] + '-' + this._props.axes[1];
-        else if (this._props.axes.length > 0) titleAccessor = titleAccessor + this._props.axes[0];
+        let titleAccessor: any = 'dataViz_lineChart_title';
+        if (this._props.axes.length === 2) titleAccessor = titleAccessor + this._props.axes[0] + '-' + this._props.axes[1];
+        else if (this._props.axes.length > 0) titleAccessor += this._props.axes[0];
         if (!this._props.layoutDoc[titleAccessor]) this._props.layoutDoc[titleAccessor] = this.defaultGraphTitle;
         if (!this._props.layoutDoc.dataViz_lineChart_selectedData) this._props.layoutDoc.dataViz_lineChart_selectedData = new List<string>();
         const selectedPt = this._currSelected ? `{ ${this._props.axes[0]}: ${this._currSelected.x} ${this._props.axes[1]}: ${this._currSelected.y} }` : 'none';
-        var selectedTitle = "";
-        if (this._currSelected && this._props.titleCol){
-            selectedTitle+= "\n" + this._props.titleCol + ": "
+        let selectedTitle = '';
+        if (this._currSelected && this._props.titleCol) {
+            selectedTitle += '\n' + this._props.titleCol + ': ';
             this._tableData.forEach(each => {
-                 var mapThisEntry = false;
-                if (this._currSelected.x==each[this._props.axes[0]] && this._currSelected.y==each[this._props.axes[1]]) mapThisEntry = true;
-                else if (this._currSelected.y==each[this._props.axes[0]] && this._currSelected.x==each[this._props.axes[1]]) mapThisEntry = true;
-                if (mapThisEntry) selectedTitle += each[this._props.titleCol] + ", ";
-            })
-            selectedTitle = selectedTitle.slice(0,-1).slice(0,-1);
+                let mapThisEntry = false;
+                if (this._currSelected?.x === each[this._props.axes[0]] && this._currSelected?.y === each[this._props.axes[1]]) mapThisEntry = true;
+                else if (this._currSelected?.y === each[this._props.axes[0]] && this._currSelected?.x === each[this._props.axes[1]]) mapThisEntry = true;
+                if (mapThisEntry) selectedTitle += each[this._props.titleCol] + ', ';
+            });
+            selectedTitle = selectedTitle.slice(0, -1).slice(0, -1);
         }
-        if (this._lineChartData.length > 0 || !this.parentViz || this.parentViz.length == 0) {
+        if (this._lineChartData.length > 0 || !this.parentViz || this.parentViz.length === 0) {
             return this._props.axes.length >= 2 && /\d/.test(this._props.records[0][this._props.axes[0]]) && /\d/.test(this._props.records[0][this._props.axes[1]]) ? (
                 <div className="chart-container" style={{ width: this._props.width + this._props.margin.right }}>
                     <div className="graph-title">
                         <EditableText
                             val={StrCast(this._props.layoutDoc[titleAccessor])}
                             setVal={undoable(
-                                action(val => (this._props.layoutDoc[titleAccessor] = val as string)),
+                                action(val => {
+                                    this._props.layoutDoc[titleAccessor] = val as string;
+                                }),
                                 'Change Graph Title'
                             )}
-                            color={'black'}
+                            color="black"
                             size={Size.LARGE}
                             fillWidth
                         />
                     </div>
                     <div ref={this._lineChartRef} />
-                    {selectedPt != 'none' ? (
-                        <div className={'selected-data'}>
+                    {selectedPt !== 'none' ? (
+                        <div className="selected-data">
                             {`Selected: ${selectedPt}`}
                             {`${selectedTitle}`}
                             <Button
-                                onClick={e => {
+                                onClick={() => {
                                     this._props.vizBox.sidebarBtnDown;
                                     this._props.vizBox.sidebarAddDocument;
-                                }}></Button>
+                                }}
+                            />
                         </div>
                     ) : null}
                 </div>
             ) : (
-                <span className="chart-container"> {'first use table view to select two numerical axes to plot'}</span>
-            );
-        } else
-            return (
-                // when it is a brushed table and the incoming table doesn't have any rows selected
-                <div className="chart-container">Selected rows of data from the incoming DataVizBox to display.</div>
+                <span className="chart-container"> first use table view to select two numerical axes to plot</span>
             );
+        }
+        return (
+            // when it is a brushed table and the incoming table doesn't have any rows selected
+            <div className="chart-container">Selected rows of data from the incoming DataVizBox to display.</div>
+        );
     }
 }
diff --git a/src/client/views/nodes/DataVizBox/components/PieChart.tsx b/src/client/views/nodes/DataVizBox/components/PieChart.tsx
index 5c341e0b4..c82496f1a 100644
--- a/src/client/views/nodes/DataVizBox/components/PieChart.tsx
+++ b/src/client/views/nodes/DataVizBox/components/PieChart.tsx
@@ -12,7 +12,7 @@ import { Cast, DocCast, StrCast } from '../../../../../fields/Types';
 import { Docs } from '../../../../documents/Documents';
 import { undoable } from '../../../../util/UndoManager';
 import { ObservableReactComponent } from '../../../ObservableReactComponent';
-import { PinProps, PresBox } from '../../trails';
+import { PinProps, PinDocView } from '../../../PinFuncs';
 import './Chart.scss';
 
 export interface PieChartProps {
@@ -36,7 +36,7 @@ export interface PieChartProps {
 @observer
 export class PieChart extends ObservableReactComponent<PieChartProps> {
     private _disposers: { [key: string]: IReactionDisposer } = {};
-    private _piechartRef: React.RefObject<HTMLDivElement> = React.createRef();
+    private _piechartRef: HTMLDivElement | null = null;
     private _piechartSvg: d3.Selection<SVGGElement, unknown, null, undefined> | undefined;
     private curSliceSelected: any = undefined; // d3 data of selected slice for when just one slice is selected
     private selectedData: any[] = []; // array of selected slices
@@ -74,8 +74,8 @@ export class PieChart extends ObservableReactComponent<PieChartProps> {
     }
 
     @computed get defaultGraphTitle() {
-        var ax0 = this._props.axes[0];
-        var ax1 = this._props.axes.length > 1 ? this._props.axes[1] : undefined;
+        const ax0 = this._props.axes[0];
+        const ax1 = this._props.axes.length > 1 ? this._props.axes[1] : undefined;
         if (this._props.axes.length < 2 || !/\d/.test(this._props.records[0][ax0]) || !ax1) {
             return ax0 + ' Pie Chart';
         }
@@ -90,40 +90,32 @@ export class PieChart extends ObservableReactComponent<PieChartProps> {
         Array.from(Object.keys(this._disposers)).forEach(key => this._disposers[key]());
     }
     componentDidMount() {
-        // draw chart
-        this._disposers.chartData = reaction(
-            () => ({ dataSet: this._pieChartData, w: this.width, h: this.height }),
-            ({ dataSet, w, h }) => dataSet!.length > 0 && this.drawChart(dataSet, w, h),
-            { fireImmediately: true }
-        );
         // restore selected slices
-        var svg = this._piechartSvg;
+        const svg = this._piechartSvg;
         if (svg && this._pieChartData[0]) {
-            let key = Object.keys(this._pieChartData[0])[0]
-            const selectedDataBars = StrListCast(this._props.layoutDoc.dataViz_pie_selectedData)
+            const key = Object.keys(this._pieChartData[0])[0];
+            const selectedDataBars = StrListCast(this._props.layoutDoc.dataViz_pie_selectedData);
             svg.selectAll('path').attr('class', (d: any) => {
                 let selected = false;
                 selectedDataBars.forEach(eachSelectedData => {
-                    if (d[key]==eachSelectedData) selected = true;
-                })
-                if (selected){
+                    if (d[key] === eachSelectedData) selected = true;
+                });
+                if (selected) {
                     this.selectedData.push(d);
-                    return 'slice hover'
+                    return 'slice hover';
                 }
-                else return 'slice';
+                return 'slice';
             });
         }
     }
 
-    @action
-    restoreView = (data: Doc) => {};
     // create a document anchor that stores whatever is needed to reconstruct the viewing state (selection,zoom,etc)
     getAnchor = (pinProps?: PinProps) => {
         const anchor = Docs.Create.ConfigDocument({
             //
             title: 'piechart doc selection' + this._currSelected,
         });
-        PresBox.pinDocView(anchor, { pinDocLayout: pinProps?.pinDocLayout, pinData: pinProps?.pinData }, this._props.Document);
+        PinDocView(anchor, { pinDocLayout: pinProps?.pinDocLayout, pinData: pinProps?.pinData }, this._props.Document);
         return anchor;
     };
 
@@ -137,30 +129,29 @@ export class PieChart extends ObservableReactComponent<PieChartProps> {
 
     // cleans data by converting numerical data to numbers and taking out empty cells
     data = (dataSet: any) => {
-        const validData = dataSet.filter((d: { [x: string]: unknown }) => !Object.keys(dataSet[0]).some(key => !d[key] || Number.isNaN(d[key])));
+        const validData = dataSet.filter((d: { [x: string]: unknown }) => !Object.keys(dataSet[0]).some(key => !d[key] /* || isNaN(d[key] as any) */));
         const field = dataSet[0] ? Object.keys(dataSet[0])[0] : undefined;
         return !field
             ? undefined
             : validData.map((d: { [x: string]: any }) =>
                   this.byCategory
                       ? d[field] //
-                      : +d[field].replace(/\$/g, '').replace(/\%/g, '').replace(/\#/g, '').replace(/\</g, '')
+                      : +d[field].replace(/\$/g, '').replace(/%/g, '').replace(/#/g, '').replace(/</g, '')
               );
     };
 
     // outlines the slice selected / hovered over
     highlightSelectedSlice = (changeSelectedVariables: boolean, svg: any, arc: any, radius: any, pointer: any, pieDataSet: any) => {
-        var index = -1;
-        var sameAsCurrent: boolean;
+        let index = -1;
         const selected = svg.selectAll('.slice').filter((d: any) => {
             index++;
-            var p1 = [0, 0]; // center of pie
-            var p3 = [arc.centroid(d)[0] * 2, arc.centroid(d)[1] * 2]; // outward peak of arc
-            var p2 = [radius * Math.sin(d.startAngle), -radius * Math.cos(d.startAngle)]; // start of arc
-            var p4 = [radius * Math.sin(d.endAngle), -radius * Math.cos(d.endAngle)]; // end of arc
+            const p1 = [0, 0]; // center of pie
+            const p3 = [arc.centroid(d)[0] * 2, arc.centroid(d)[1] * 2]; // outward peak of arc
+            const p2 = [radius * Math.sin(d.startAngle), -radius * Math.cos(d.startAngle)]; // start of arc
+            const p4 = [radius * Math.sin(d.endAngle), -radius * Math.cos(d.endAngle)]; // end of arc
 
             // draw an imaginary horizontal line from the pointer to see how many times it crosses a slice edge
-            var lineCrossCount = 0;
+            let lineCrossCount = 0;
             // if for all 4 lines
             if (Math.min(p1[1], p2[1]) <= pointer[1] && pointer[1] <= Math.max(p1[1], p2[1])) {
                 // within y bounds
@@ -175,48 +166,46 @@ export class PieChart extends ObservableReactComponent<PieChartProps> {
             if (Math.min(p4[1], p1[1]) <= pointer[1] && pointer[1] <= Math.max(p4[1], p1[1])) {
                 if (pointer[0] <= ((pointer[1] - p4[1]) * (p1[0] - p4[0])) / (p1[1] - p4[1]) + p4[0]) lineCrossCount++;
             }
-            if (lineCrossCount % 2 != 0) {
+            if (lineCrossCount % 2 !== 0 || d.startAngle % (2 * Math.PI) === d.endAngle % (2 * Math.PI)) {
                 // inside the slice of it crosses an odd number of edges
-                var showSelected = this.byCategory ? pieDataSet[index] : this._pieChartData[index];
-                let key = 'data' // key that represents slice
-                if (Object.keys(showSelected)[0]=='frequency') key = Object.keys(showSelected)[1]
+                const showSelected = this.byCategory ? pieDataSet[index] : this._pieChartData[index];
+                let key = 'data'; // key that represents slice
+                // eslint-disable-next-line prefer-destructuring
+                if (Object.keys(showSelected)[0] === 'frequency') key = Object.keys(showSelected)[1];
                 if (changeSelectedVariables) {
-                    // for when a bar is selected - not just hovered over
-                    sameAsCurrent = this._currSelected
-                        ? showSelected[Object.keys(showSelected)[0]] == this._currSelected![Object.keys(showSelected)[0]] && showSelected[Object.keys(showSelected)[1]] == this._currSelected![Object.keys(showSelected)[1]]
-                        : this._currSelected === showSelected;
-                        let sameAsAny = false;
-                        const selectedDataSlices = Cast(this._props.layoutDoc.dataViz_pie_selectedData, listSpec('number'), null);
-                        this.selectedData.forEach(eachData => {
-                            if (!sameAsAny){
-                                let match = true;
-                                Object.keys(d).forEach(key => {
-                                    if (d[key] != eachData[key]) match = false;
-                                })
-                                if (match) {
-                                    sameAsAny = true;
-                                    let index = this.selectedData.indexOf(eachData)
-                                    this.selectedData.splice(index, 1);
-                                    selectedDataSlices.splice(index, 1);
-                                    this._currSelected = undefined;
-                                }
+                    let sameAsAny = false;
+                    const selectedDataSlices = Cast(this._props.layoutDoc.dataViz_pie_selectedData, listSpec('number'), null);
+                    this.selectedData.forEach(eachData => {
+                        if (!sameAsAny) {
+                            let match = true;
+                            Object.keys(d).forEach(objKey => {
+                                if (d[objKey] !== eachData[objKey]) match = false;
+                            });
+                            if (match) {
+                                sameAsAny = true;
+                                const selIndex = this.selectedData.indexOf(eachData);
+                                this.selectedData.splice(selIndex, 1);
+                                selectedDataSlices.splice(selIndex, 1);
+                                this._currSelected = undefined;
                             }
-                        })
-                        if(!sameAsAny) {
-                            this.selectedData.push(d);
-                            selectedDataSlices.push(d[key]);
-                            this._currSelected = this.selectedData.length>1? undefined : showSelected;
                         }
+                    });
+                    if (!sameAsAny) {
+                        this.selectedData.push(d);
+                        selectedDataSlices.push(d[key]);
+                        this._currSelected = this.selectedData.length > 1 ? undefined : showSelected;
+                    }
 
                     // for filtering child dataviz docs
-                    if (this._props.layoutDoc.dataViz_filterSelection){
+                    if (this._props.layoutDoc.dataViz_filterSelection) {
                         const selectedRows = Cast(this._props.layoutDoc.dataViz_selectedRows, listSpec('number'), null);
                         this._tableDataIds.forEach(rowID => {
                             let match = false;
-                            if (this._props.records[rowID][key] == d[key]) match = true;
-                            if (match && !selectedRows?.includes(rowID)) selectedRows?.push(rowID); // adding to filtered rows
+                            if (this._props.records[rowID][this._props.axes[0]] == d[key]) match = true;
+                            if (match && !selectedRows?.includes(rowID))
+                                selectedRows?.push(rowID); // adding to filtered rows
                             else if (match && sameAsAny) selectedRows.splice(selectedRows.indexOf(rowID), 1); // removing from filtered rows
-                        })
+                        });
                     }
                 } else this.hoverOverData = d;
                 return true;
@@ -231,45 +220,62 @@ export class PieChart extends ObservableReactComponent<PieChartProps> {
 
     // draws the pie chart
     drawChart = (dataSet: any, width: number, height: number) => {
-        d3.select(this._piechartRef.current).select('svg').remove();
-        d3.select(this._piechartRef.current).select('.tooltip').remove();
+        if (!dataSet?.length) return;
+        d3.select(this._piechartRef).select('svg').remove();
+        d3.select(this._piechartRef).select('.tooltip').remove();
 
-        var percentField = Object.keys(dataSet[0])[0];
-        var descriptionField = Object.keys(dataSet[0])[1]!;
-        var radius = Math.min(width, height - this._props.margin.top - this._props.margin.bottom) / 2;
+        let percentField = Object.keys(dataSet[0])[0];
+        let descriptionField = Object.keys(dataSet[0])[1]!;
+        const radius = Math.min(width, height - this._props.margin.top - this._props.margin.bottom) / 2;
 
         // converts data into Objects
-        var data = this.data(dataSet);
-        var pieDataSet = dataSet.filter((d: { [x: string]: unknown }) => !Object.keys(dataSet[0]).some(key => !d[key] || Number.isNaN(d[key])));
+        let data = this.data(dataSet);
+        let pieDataSet = dataSet.filter((d: { [x: string]: unknown }) => !Object.keys(dataSet[0]).some(key => !d[key]));
+        if (!pieDataSet.length) return;
         if (this.byCategory) {
-            let uniqueCategories = [...new Set(data)];
-            var pieStringDataSet: { frequency: number }[] = [];
+            const uniqueCategories = [...new Set(data)];
+            const pieStringDataSet: { frequency: number }[] = [];
             for (let i = 0; i < uniqueCategories.length; i++) {
                 pieStringDataSet.push({ frequency: 0, [percentField]: uniqueCategories[i] });
             }
             for (let i = 0; i < data.length; i++) {
-                let sliceData = pieStringDataSet.filter((each: any) => each[percentField] == data[i]);
-                sliceData[0].frequency = sliceData[0].frequency + 1;
+                // eslint-disable-next-line no-loop-func
+                const sliceData = pieStringDataSet.filter((each: any) => each[percentField] == data[i]);
+                sliceData[0].frequency += 1;
             }
             pieDataSet = pieStringDataSet;
-            percentField = Object.keys(pieDataSet[0])[0];
-            descriptionField = Object.keys(pieDataSet[0])[1]!;
+            if (!pieDataSet.length) return;
+            [percentField, descriptionField] = Object.keys(pieDataSet[0]);
             data = this.data(pieStringDataSet);
         }
-        var trackDuplicates: { [key: string]: any } = {};
-        data.forEach((eachData: any) => (!trackDuplicates[eachData] ? (trackDuplicates[eachData] = 0) : null));
+        let trackDuplicates: { [key: string]: any } = {};
+        data.forEach((eachData: any) => {
+            !trackDuplicates[eachData] ? (trackDuplicates[eachData] = 0) : null;
+        });
 
         // initial chart
-        var svg = (this._piechartSvg = d3
-            .select(this._piechartRef.current)
+        const svg = (this._piechartSvg = d3
+            .select(this._piechartRef)
             .append('svg')
             .attr('class', 'graph')
             .attr('width', width + this._props.margin.right + this._props.margin.left)
             .attr('height', height + this._props.margin.top + this._props.margin.bottom)
             .append('g'));
-        let g = svg.append('g').attr('transform', 'translate(' + (width / 2 + this._props.margin.left) + ',' + height / 2 + ')');
-        var pie = d3.pie();
-        var arc = d3.arc().innerRadius(0).outerRadius(radius);
+        const g = svg.append('g').attr('transform', 'translate(' + (width / 2 + this._props.margin.left) + ',' + height / 2 + ')');
+        const pie = d3.pie();
+        const arc = d3.arc().innerRadius(0).outerRadius(radius);
+
+        const updateHighlights = () => {
+            const hoverOverSlice = this.hoverOverData;
+            const { selectedData } = this;
+            svg.selectAll('path').attr('class', (d: any) => {
+                let selected = false;
+                selectedData.forEach((eachSelectedData: any) => {
+                    if (d.startAngle === eachSelectedData.startAngle) selected = true;
+                });
+                return selected || (hoverOverSlice && d.startAngle === hoverOverSlice.startAngle && d.endAngle === hoverOverSlice.endAngle) ? 'slice hover' : 'slice';
+            });
+        };
 
         // click/hover
         const onPointClick = action((e: any) => this.highlightSelectedSlice(true, svg, arc, radius, d3.pointer(e), pieDataSet));
@@ -277,70 +283,61 @@ export class PieChart extends ObservableReactComponent<PieChartProps> {
             this.highlightSelectedSlice(false, svg, arc, radius, d3.pointer(e), pieDataSet);
             updateHighlights();
         });
-        const mouseOut = action((e: any) => {
+        const mouseOut = action(() => {
             this.hoverOverData = undefined;
             updateHighlights();
         });
-        const updateHighlights = () => {
-            const hoverOverSlice = this.hoverOverData;
-            const selectedData = this.selectedData;
-            svg.selectAll('path').attr('class', function (d: any) {
-                let selected = false;
-                selectedData.forEach((eachSelectedData: any) => {
-                    if (d.startAngle==eachSelectedData.startAngle) selected = true;
-                })
-                return selected || (hoverOverSlice && d.startAngle == hoverOverSlice.startAngle && d.endAngle == hoverOverSlice.endAngle) ? 'slice hover' : 'slice';
-            });
-        };
-
         // drawing the slices
-        var selected = this.selectedData;
-        var arcs = g.selectAll('arc').data(pie(data)).enter().append('g');
+        const selected = this.selectedData;
+        const arcs = g.selectAll('arc').data(pie(data)).enter().append('g');
         const possibleDataPointVals: { [x: string]: any }[] = [];
         pieDataSet.forEach((each: { [x: string]: any | { valueOf(): number } }) => {
-            var dataPointVal: { [x: string]: any } = {};
+            const dataPointVal: { [x: string]: any } = {};
             dataPointVal[percentField] = each[percentField];
             if (descriptionField) dataPointVal[descriptionField] = each[descriptionField];
             try {
-                dataPointVal[percentField] = Number(dataPointVal[percentField].replace(/\$/g, '').replace(/\%/g, '').replace(/\#/g, '').replace(/\</g, ''));
-            } catch (error) {}
+                dataPointVal[percentField] = Number(dataPointVal[percentField].replace(/\$/g, '').replace(/%/g, '').replace(/#/g, '').replace(/</g, ''));
+            } catch (error) {
+                /* empty */
+            }
             possibleDataPointVals.push(dataPointVal);
         });
         const sliceColors = StrListCast(this._props.layoutDoc.dataViz_pie_sliceColors).map(each => each.split('::'));
 
         // to make sure all important slice information is on 'd' object
         let addKey: any = false;
-        if (Object.keys(pieDataSet[0])[0]=='frequency'){
-            addKey = Object.keys(pieDataSet[0])[1]
+        if (pieDataSet.length && Object.keys(pieDataSet[0])[0] === 'frequency') {
+            // eslint-disable-next-line prefer-destructuring
+            addKey = Object.keys(pieDataSet[0])[1];
         }
         arcs.append('path')
             .attr('fill', (d: any, i) => {
-                var dataPoint;
+                let dataPoint;
                 const possibleDataPoints = possibleDataPointVals.filter((pval: any) => pval[percentField] === Number(d.data));
-                if (possibleDataPoints.length == 1) dataPoint = possibleDataPoints[0];
+                if (possibleDataPoints.length === 1) [dataPoint] = possibleDataPoints;
                 else {
                     dataPoint = possibleDataPoints[trackDuplicates[d.data.toString()]];
                     trackDuplicates[d.data.toString()] = trackDuplicates[d.data.toString()] + 1;
                 }
-                var sliceColor;
+                let sliceColor;
                 if (dataPoint) {
-                    if (addKey) d[addKey] = dataPoint[addKey] // adding all slice information to d
+                    if (addKey) d[addKey] = dataPoint[addKey]; // adding all slice information to d
                     const sliceTitle = dataPoint[this._props.axes[0]];
-                    const accessByName = StrCast(sliceTitle) ? StrCast(sliceTitle).replace(/\$/g, '').replace(/\%/g, '').replace(/\#/g, '').replace(/\</g, '') : sliceTitle;
-                    sliceColors.forEach(each => each[0] == accessByName && (sliceColor = each[1]));
+                    const accessByName = StrCast(sliceTitle) ? StrCast(sliceTitle).replace(/\$/g, '').replace(/%/g, '').replace(/#/g, '').replace(/</g, '') : sliceTitle;
+                    sliceColors.forEach(each => {
+                        // eslint-disable-next-line prefer-destructuring
+                        each[0] === accessByName && (sliceColor = each[1]);
+                    });
                 }
                 return sliceColor ? StrCast(sliceColor) : d3.schemeSet3[i] ? d3.schemeSet3[i] : d3.schemeSet3[i % d3.schemeSet3.length];
             })
-            .attr(
-                'class',
-                function (d: any) {
-                    let selectThisData = false;
-                    selected.forEach((eachSelectedData: any) => {
-                        if (d.startAngle==eachSelectedData.startAngle) selectThisData = true;
-                    })
-                    return selectThisData ? 'slice hover' : 'slice';
-                }
-            )
+            .attr('class', d => {
+                let selectThisData = false;
+                selected.forEach((eachSelectedData: any) => {
+                    if (d.startAngle === eachSelectedData.startAngle) selectThisData = true;
+                });
+                return selectThisData ? 'slice hover' : 'slice';
+            })
             // @ts-ignore
             .attr('d', arc)
             .on('click', onPointClick)
@@ -349,20 +346,22 @@ export class PieChart extends ObservableReactComponent<PieChartProps> {
 
         // adding labels
         trackDuplicates = {};
-        data.forEach((eachData: any) => (!trackDuplicates[eachData] ? (trackDuplicates[eachData] = 0) : null));
+        data.forEach((eachData: any) => {
+            !trackDuplicates[eachData] ? (trackDuplicates[eachData] = 0) : null;
+        });
         arcs.size() < 100 &&
             arcs
                 .append('text')
-                .attr('transform', function (d) {
-                    var centroid = arc.centroid(d as unknown as d3.DefaultArcObject);
-                    var heightOffset = (centroid[1] / radius) * Math.abs(centroid[1]);
+                .attr('transform', d => {
+                    const centroid = arc.centroid(d as unknown as d3.DefaultArcObject);
+                    const heightOffset = (centroid[1] / radius) * Math.abs(centroid[1]);
                     return 'translate(' + (centroid[0] + centroid[0] / (radius * 0.02)) + ',' + (centroid[1] + heightOffset) + ')';
                 })
                 .attr('text-anchor', 'middle')
-                .text(function (d) {
-                    var dataPoint;
+                .text(d => {
+                    let dataPoint;
                     const possibleDataPoints = possibleDataPointVals.filter((pval: any) => pval[percentField] === Number(d.data));
-                    if (possibleDataPoints.length == 1) dataPoint = pieDataSet[possibleDataPointVals.indexOf(possibleDataPoints[0])];
+                    if (possibleDataPoints.length === 1) dataPoint = pieDataSet[possibleDataPointVals.indexOf(possibleDataPoints[0])];
                     else {
                         dataPoint = pieDataSet[possibleDataPointVals.indexOf(possibleDataPoints[trackDuplicates[d.data.toString()]])];
                         trackDuplicates[d.data.toString()] = trackDuplicates[d.data.toString()] + 1;
@@ -374,11 +373,11 @@ export class PieChart extends ObservableReactComponent<PieChartProps> {
     @action changeSelectedColor = (color: string) => {
         this.curSliceSelected.attr('fill', color);
         const sliceTitle = this._currSelected[this._props.axes[0]];
-        const sliceName = StrCast(sliceTitle) ? StrCast(sliceTitle).replace(/\$/g, '').replace(/\%/g, '').replace(/\#/g, '').replace(/\</g, '') : sliceTitle;
+        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.map(each => {
-            if (each.split('::')[0] == sliceName) sliceColors.splice(sliceColors.indexOf(each), 1);
+        sliceColors.forEach(each => {
+            if (each.split('::')[0] === sliceName) sliceColors.splice(sliceColors.indexOf(each), 1);
         });
         sliceColors.push(StrCast(sliceName + '::' + color));
     };
@@ -389,40 +388,40 @@ export class PieChart extends ObservableReactComponent<PieChartProps> {
     };
 
     render() {
-        var titleAccessor: any = 'dataViz_pie_title';
-        if (this._props.axes.length == 2) titleAccessor = titleAccessor + this._props.axes[0] + '-' + this._props.axes[1];
-        else if (this._props.axes.length > 0) titleAccessor = titleAccessor + this._props.axes[0];
+        let titleAccessor: any = 'dataViz_pie_title';
+        if (this._props.axes.length === 2) titleAccessor = titleAccessor + this._props.axes[0] + '-' + this._props.axes[1];
+        else if (this._props.axes.length > 0) titleAccessor += this._props.axes[0];
         if (!this._props.layoutDoc[titleAccessor]) this._props.layoutDoc[titleAccessor] = this.defaultGraphTitle;
         if (!this._props.layoutDoc.dataViz_pie_sliceColors) this._props.layoutDoc.dataViz_pie_sliceColors = new List<string>();
         if (!this._props.layoutDoc.dataViz_pie_selectedData) this._props.layoutDoc.dataViz_pie_selectedData = new List<string>();
-        var selected: string;
-        var curSelectedSliceName = '';
+        let selected: string;
+        let curSelectedSliceName = '';
         if (this._currSelected) {
             selected = '{ ';
             const sliceTitle = this._currSelected[this._props.axes[0]];
-            curSelectedSliceName = StrCast(sliceTitle) ? StrCast(sliceTitle).replace(/\$/g, '').replace(/\%/g, '').replace(/\#/g, '').replace(/\</g, '') : sliceTitle;
-            Object.keys(this._currSelected).map(key => {
-                key != '' ? (selected += key + ': ' + this._currSelected[key] + ', ') : '';
+            curSelectedSliceName = StrCast(sliceTitle) ? StrCast(sliceTitle).replace(/\$/g, '').replace(/%/g, '').replace(/#/g, '').replace(/</g, '') : sliceTitle;
+            Object.keys(this._currSelected).forEach(key => {
+                key !== '' ? (selected += key + ': ' + this._currSelected[key] + ', ') : '';
             });
             selected = selected.substring(0, selected.length - 2);
             selected += ' }';
-            if (this._props.titleCol!="" && (!this._currSelected["frequency"] || this._currSelected["frequency"]<10)){
-                selected+= "\n" + this._props.titleCol + ": "
+            if (this._props.titleCol !== '' && (!this._currSelected.frequency || this._currSelected.frequency < 10)) {
+                selected += '\n' + this._props.titleCol + ': ';
                 this._tableData.forEach(each => {
-                    if (this._currSelected[this._props.axes[0]]==each[this._props.axes[0]]) {
-                        if (this._props.axes[1]){
-                            if (this._currSelected[this._props.axes[1]]==each[this._props.axes[1]]) selected+= each[this._props.titleCol] + ", ";
-                        }
-                        else selected+= each[this._props.titleCol] + ", ";
+                    if (this._currSelected[this._props.axes[0]] === each[this._props.axes[0]]) {
+                        if (this._props.axes[1]) {
+                            if (this._currSelected[this._props.axes[1]] === each[this._props.axes[1]]) selected += each[this._props.titleCol] + ', ';
+                        } else selected += each[this._props.titleCol] + ', ';
                     }
-                })
-                selected = selected.slice(0,-1).slice(0,-1);
+                });
+                selected = selected.slice(0, -1).slice(0, -1);
             }
         } else selected = 'none';
-        var selectedSliceColor;
-        var sliceColors = StrListCast(this._props.layoutDoc.dataViz_pie_sliceColors).map(each => each.split('::'));
+        let selectedSliceColor;
+        const sliceColors = StrListCast(this._props.layoutDoc.dataViz_pie_sliceColors).map(each => each.split('::'));
         sliceColors.forEach(each => {
-            if (each[0] == curSelectedSliceName!) selectedSliceColor = each[1];
+            // eslint-disable-next-line prefer-destructuring
+            if (each[0] === curSelectedSliceName!) selectedSliceColor = each[1];
         });
 
         if (this._pieChartData.length > 0 || !this.parentViz) {
@@ -432,30 +431,37 @@ export class PieChart extends ObservableReactComponent<PieChartProps> {
                         <EditableText
                             val={StrCast(this._props.layoutDoc[titleAccessor])}
                             setVal={undoable(
-                                action(val => (this._props.layoutDoc[titleAccessor] = val as string)),
+                                action(val => {
+                                    this._props.layoutDoc[titleAccessor] = val as string;
+                                }),
                                 'Change Graph Title'
                             )}
-                            color={'black'}
+                            color="black"
                             size={Size.LARGE}
                             fillWidth
                         />
                     </div>
                     {this._props.axes.length === 1 && /\d/.test(this._props.records[0][this._props.axes[0]]) ? (
-                        <div className={'asHistogram-checkBox'} style={{ width: this._props.width }}>
+                        <div className="asHistogram-checkBox" style={{ width: this._props.width }}>
                             <Checkbox color="primary" onChange={this.changeHistogramCheckBox} checked={this._props.layoutDoc.dataViz_pie_asHistogram as boolean} />
                             Organize data as histogram
                         </div>
                     ) : null}
-                    <div ref={this._piechartRef} />
-                    {selected != 'none' ? (
-                        <div className={'selected-data'}>
+                    <div
+                        ref={r => {
+                            this._piechartRef = r;
+                            this.drawChart(this._pieChartData, this.width, this.height);
+                        }}
+                    />
+                    {selected !== 'none' ? (
+                        <div className="selected-data">
                             Selected: {selected}
                             &nbsp; &nbsp;
                             <ColorPicker
-                                tooltip={'Change Slice Color'}
+                                tooltip="Change Slice Color"
                                 type={Type.SEC}
                                 icon={<FaFillDrip />}
-                                selectedColor={selectedSliceColor ? selectedSliceColor : this.curSliceSelected.attr('fill')}
+                                selectedColor={selectedSliceColor || this.curSliceSelected.attr('fill')}
                                 setFinalColor={undoable(color => this.changeSelectedColor(color), 'Change Selected Slice Color')}
                                 setSelectedColor={undoable(color => this.changeSelectedColor(color), 'Change Selected Slice Color')}
                                 size={Size.XSMALL}
@@ -464,12 +470,12 @@ export class PieChart extends ObservableReactComponent<PieChartProps> {
                     ) : null}
                 </div>
             ) : (
-                <span className="chart-container"> {'first use table view to select a column to graph'}</span>
-            );
-        } else
-            return (
-                // when it is a brushed table and the incoming table doesn't have any rows selected
-                <div className="chart-container">Selected rows of data from the incoming DataVizBox to display.</div>
+                <span className="chart-container"> first use table view to select a column to graph</span>
             );
+        }
+        return (
+            // when it is a brushed table and the incoming table doesn't have any rows selected
+            <div className="chart-container">Selected rows of data from the incoming DataVizBox to display.</div>
+        );
     }
 }
diff --git a/src/client/views/nodes/DataVizBox/components/TableBox.tsx b/src/client/views/nodes/DataVizBox/components/TableBox.tsx
index fa48d66d8..bcd8e54f2 100644
--- a/src/client/views/nodes/DataVizBox/components/TableBox.tsx
+++ b/src/client/views/nodes/DataVizBox/components/TableBox.tsx
@@ -1,19 +1,25 @@
+/* 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';
 import * as React from 'react';
-import { Utils, emptyFunction, setupMoveUpEvents } from '../../../../../Utils';
+import { ClientUtils, setupMoveUpEvents } from '../../../../../ClientUtils';
+import { emptyFunction } from '../../../../../Utils';
 import { Doc, Field, NumListCast } from '../../../../../fields/Doc';
+import { DocData } from '../../../../../fields/DocSymbols';
 import { List } from '../../../../../fields/List';
 import { listSpec } from '../../../../../fields/Schema';
 import { Cast, DocCast } from '../../../../../fields/Types';
 import { DragManager } from '../../../../util/DragManager';
+import { undoable } from '../../../../util/UndoManager';
 import { ObservableReactComponent } from '../../../ObservableReactComponent';
 import { DocumentView } from '../../DocumentView';
 import { DataVizView } from '../DataVizBox';
 import './Chart.scss';
-import { undoable } from '../../../../util/UndoManager';
+
 const { DATA_VIZ_TABLE_ROW_HEIGHT } = require('../../../global/globalCssVariables.module.scss'); // prettier-ignore
+
 interface TableBoxProps {
     Document: Doc;
     layoutDoc: Doc;
@@ -77,7 +83,7 @@ export class TableBox extends ObservableReactComponent<TableBoxProps> {
     }
 
     @computed get columns() {
-        return this._tableData.length ? Array.from(Object.keys(this._tableData[0])).filter(header => header != '' && header != undefined) : [];
+        return this._tableData.length ? Array.from(Object.keys(this._tableData[0])).filter(header => header !== '' && header !== undefined) : [];
     }
 
     // updates the 'dataViz_selectedRows' and 'dataViz_highlightedRows' fields to no longer include rows that aren't in the table
@@ -114,15 +120,13 @@ export class TableBox extends ObservableReactComponent<TableBoxProps> {
             if (highlited?.includes(rowId)) highlited.splice(highlited.indexOf(rowId), 1);
             else highlited?.push(rowId);
             if (!selected?.includes(rowId)) selected?.push(rowId);
-        } else {
+        } else if (selected?.includes(rowId)) {
             // selecting a row
-            if (selected?.includes(rowId)) {
-                if (highlited?.includes(rowId)) highlited.splice(highlited.indexOf(rowId), 1);
-                selected.splice(selected.indexOf(rowId), 1);
-            } else selected?.push(rowId);
-        }
+            if (highlited?.includes(rowId)) highlited.splice(highlited.indexOf(rowId), 1);
+            selected.splice(selected.indexOf(rowId), 1);
+        } else selected?.push(rowId);
         e.stopPropagation();
-        this.hasRowsToFilter = selected.length > 0 ? true : false;
+        this.hasRowsToFilter = selected.length > 0;
     };
 
     columnPointerDown = (e: React.PointerEvent, col: string) => {
@@ -131,7 +135,7 @@ export class TableBox extends ObservableReactComponent<TableBoxProps> {
         setupMoveUpEvents(
             {},
             e,
-            e => {
+            moveEv => {
                 // dragging off a column to create a brushed DataVizBox
                 const sourceAnchorCreator = () => this._props.docView?.()!.Document!;
                 const targetCreator = (annotationOn: Doc | undefined) => {
@@ -145,15 +149,13 @@ export class TableBox extends ObservableReactComponent<TableBoxProps> {
                     embedding.pieSliceColors = Field.Copy(this._props.layoutDoc.pieSliceColors);
                     return embedding;
                 };
-                if (this._props.docView?.() && !Utils.isClick(e.clientX, e.clientY, downX, downY, Date.now())) {
-                    DragManager.StartAnchorAnnoDrag(e.target instanceof HTMLElement ? [e.target] : [], new DragManager.AnchorAnnoDragData(this._props.docView()!, sourceAnchorCreator, targetCreator), downX, downY, {
-                        dragComplete: e => {
-                            if (!e.aborted && e.annoDragData && e.annoDragData.linkSourceDoc && e.annoDragData.dropDocument && e.linkDocument) {
-                                e.linkDocument.link_displayLine = true;
-                                e.linkDocument.link_matchEmbeddings = true;
-                                e.linkDocument.link_displayArrow = true;
-                                // e.annoDragData.linkSourceDoc.followLinkToggle = e.annoDragData.dropDocument.annotationOn === this._props.Document;
-                                // e.annoDragData.linkSourceDoc.followLinkZoom = false;
+                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, {
+                        dragComplete: completeEv => {
+                            if (!completeEv.aborted && completeEv.annoDragData && completeEv.annoDragData.linkSourceDoc && completeEv.annoDragData.dropDocument && completeEv.linkDocument) {
+                                completeEv.linkDocument[DocData].link_matchEmbeddings = true;
+                                completeEv.linkDocument[DocData].stroke_startMarker = true;
+                                this._props.docView?.()?._props.addDocument?.(completeEv.linkDocument);
                             }
                         },
                     });
@@ -162,10 +164,10 @@ export class TableBox extends ObservableReactComponent<TableBoxProps> {
                 return false;
             },
             emptyFunction,
-            action(e => {
-                if (e.shiftKey || this.settingTitle) {
+            action(moveEv => {
+                if (moveEv.shiftKey || this.settingTitle) {
                     if (this.settingTitle) this.settingTitle = false;
-                    if (this._props.titleCol == col) this._props.titleCol = '';
+                    if (this._props.titleCol === col) this._props.titleCol = '';
                     else this._props.titleCol = col;
                     this._props.selectTitleCol(this._props.titleCol);
                 } else {
@@ -183,16 +185,16 @@ 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) => {
-        var start: any;
-        var end: any;
+        let start: any;
+        let end: any;
         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]);
         }
 
         this._tableDataIds.forEach(rowID => {
-            if (this.filteringType == 'Value') {
-                if (this._props.records[rowID][this.filteringColumn] == this.filteringVal[0]) {
+            if (this.filteringType === 'Value') {
+                if (this._props.records[rowID][this.filteringColumn] === this.filteringVal[0]) {
                     if (!NumListCast(this._props.layoutDoc.dataViz_selectedRows).includes(rowID)) {
                         this.tableRowClick(e, rowID);
                     }
@@ -229,12 +231,12 @@ export class TableBox extends ObservableReactComponent<TableBoxProps> {
         this.filteringVal[1] = e.target.value;
     });
     @computed get renderFiltering() {
-        if (this.filteringColumn === '') this.filteringColumn = this.columns[0];
+        if (this.filteringColumn === '') [this.filteringColumn] = this.columns;
         return (
             <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={e => this.setFilterColumn(e)}>
                         {this.columns.map(column => (
                             <option className="" key={column} value={column}>
                                 {' '}
@@ -245,17 +247,17 @@ export class TableBox extends ObservableReactComponent<TableBoxProps> {
                 </div>
                 <div className="tableBox-filterPopup-setValue">
                     <select className="tableBox-filterPopup-setValue-each" value={this.filteringType} onChange={e => this.setFilterType(e)}>
-                        <option className="" key={'Value'} value={'Value'}>
+                        <option className="" key="Value" value="Value">
                             {' '}
                             {'Value'}{' '}
                         </option>
-                        <option className="" key={'Range'} value={'Range'}>
+                        <option className="" key="Range" value="Range">
                             {' '}
                             {'Range'}{' '}
                         </option>
                     </select>
                     :
-                    {this.filteringType == 'Value' ? (
+                    {this.filteringType === 'Value' ? (
                         <input
                             className="tableBox-filterPopup-setValue-input"
                             defaultValue=""
@@ -301,7 +303,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={action(e => this.filter(e))} text="Set Filter" type={Type.SEC} color="black" />
                 </div>
             </div>
         );
@@ -322,11 +324,25 @@ export class TableBox extends ObservableReactComponent<TableBoxProps> {
                     }}>
                     <div className="tableBox-selectButtons">
                         <div className="tableBox-selectTitle">
-                            <Button onClick={action(() => (this.settingTitle = !this.settingTitle))} text="Select Title Column" type={Type.SEC} color={'black'} />
+                            <Button
+                                onClick={action(() => {
+                                    this.settingTitle = !this.settingTitle;
+                                })}
+                                text="Select Title Column"
+                                type={Type.SEC}
+                                color="black"
+                            />
                         </div>
                         <div className="tableBox-filtering">
                             {this.filtering ? this.renderFiltering : null}
-                            <Button onClick={action(() => (this.filtering = !this.filtering))} text="Filter" type={Type.SEC} color={'black'} />
+                            <Button
+                                onClick={action(() => {
+                                    this.filtering = !this.filtering;
+                                })}
+                                text="Filter"
+                                type={Type.SEC}
+                                color="black"
+                            />
                             <div className="tableBox-filterAll">
                                 {this.hasRowsToFilter ? (
                                     <Button
@@ -336,7 +352,7 @@ export class TableBox extends ObservableReactComponent<TableBoxProps> {
                                         })}
                                         text="Deselect All"
                                         type={Type.SEC}
-                                        color={'black'}
+                                        color="black"
                                         tooltip="Select rows to be displayed in any DataViz boxes dragged off of this one."
                                     />
                                 ) : (
@@ -347,7 +363,7 @@ export class TableBox extends ObservableReactComponent<TableBoxProps> {
                                         })}
                                         text="Select All"
                                         type={Type.SEC}
-                                        color={'black'}
+                                        color="black"
                                         tooltip="Select rows to be displayed in any DataViz boxes dragged off of this one."
                                     />
                                 )}
@@ -391,7 +407,7 @@ export class TableBox extends ObservableReactComponent<TableBoxProps> {
                                                         ? 'darkgreen'
                                                         : this._props.axes.length > 2 && this._props.axes.lastElement() === col
                                                           ? 'darkred'
-                                                          : this._props.axes.lastElement() === col || (this._props.axes.length > 2 && this._props.axes[1] == col)
+                                                          : this._props.axes.lastElement() === col || (this._props.axes.length > 2 && this._props.axes[1] === col)
                                                             ? 'darkblue'
                                                             : undefined,
                                                 background: this.settingTitle
@@ -400,7 +416,7 @@ export class TableBox extends ObservableReactComponent<TableBoxProps> {
                                                       ? '#E3fbdb'
                                                       : this._props.axes.length > 2 && this._props.axes.lastElement() === col
                                                         ? '#Fbdbdb'
-                                                        : this._props.axes.lastElement() === col || (this._props.axes.length > 2 && this._props.axes[1] == col)
+                                                        : this._props.axes.lastElement() === col || (this._props.axes.length > 2 && this._props.axes[1] === col)
                                                           ? '#c6ebf7'
                                                           : undefined,
                                                 fontWeight: 'bolder',
@@ -424,11 +440,11 @@ export class TableBox extends ObservableReactComponent<TableBoxProps> {
                                                 background: NumListCast(this._props.layoutDoc.dataViz_highlitedRows).includes(rowId) ? 'lightYellow' : NumListCast(this._props.layoutDoc.dataViz_selectedRows).includes(rowId) ? 'lightgrey' : '',
                                             }}>
                                             {this.columns.map(col => {
-                                                var 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;
+                                                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' }}>
                                                         <div className="tableBox-cell">{this._props.records[rowId][col]}</div>
@@ -443,10 +459,10 @@ export class TableBox extends ObservableReactComponent<TableBoxProps> {
                     </div>
                 </div>
             );
-        } else
-            return (
-                // when it is a brushed table and the incoming table doesn't have any rows selected
-                <div className="chart-container">Selected rows of data from the incoming DataVizBox to display.</div>
-            );
+        }
+        return (
+            // when it is a brushed table and the incoming table doesn't have any rows selected
+            <div className="chart-container">Selected rows of data from the incoming DataVizBox to display.</div>
+        );
     }
 }