Merge branch 'restoringEslint' into sarah-ai-visualization

1 files changed, 148 insertions, 161 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