major cleanup to histogram. fixing hover and types.

2 files changed, 123 insertions, 104 deletions

diff --git a/src/client/views/nodes/DataVizBox/components/Histogram.tsx b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
index 776d65211..55c8f37b7 100644
--- a/src/client/views/nodes/DataVizBox/components/Histogram.tsx
+++ b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
@@ -1,5 +1,5 @@
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { ColorPicker, EditableText, IconButton, Size, Type } from '@dash/components';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import * as d3 from 'd3';
 import { IReactionDisposer, action, computed, makeObservable, observable } from 'mobx';
 import { observer } from 'mobx-react';
@@ -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, PinDocView } from '../../../PinFuncs';
+import { PinDocView, PinProps } from '../../../PinFuncs';
 import { scaleCreatorNumerical, yAxisCreator } from '../utils/D3Utils';
 import './Chart.scss';
 
@@ -21,7 +21,7 @@ export interface HistogramProps {
     layoutDoc: Doc;
     axes: string[];
     titleCol: string;
-    records: { [key: string]: any }[];
+    records: { [key: string]: string | number }[];
     width: number;
     height: number;
     dataDoc: Doc;
@@ -34,6 +34,16 @@ export interface HistogramProps {
     };
 }
 
+export interface HistogramData {
+    [key: string]: string | number;
+}
+
+export interface RangeValues {
+    xMin?: number;
+    xMax?: number;
+    yMin?: number;
+    yMax?: number;
+}
 @observer
 export class Histogram extends ObservableReactComponent<HistogramProps> {
     private _disposers: { [key: string]: IReactionDisposer } = {};
@@ -42,12 +52,12 @@ export class Histogram extends ObservableReactComponent<HistogramProps> {
     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
     private maxBins = 15; // maximum number of bins that is readable on a normal sized doc
-    @observable _currSelected: any | undefined = undefined; // Object of selected bar
-    private curBarSelected: any = undefined; // histogram bin of selected bar for when just one bar is selected
-    private selectedData: any[] = []; // array of selected bars
-    private hoverOverData: any = undefined; // Selection of bar being hovered over
+    private curBarSelected: d3.Selection<d3.BaseType, unknown, SVGElement, undefined> | undefined = undefined;
+    private selectedData: HistogramData[] = [];
+    private hoverOverData: HistogramData | undefined = undefined;
+    @observable private _currSelected: HistogramData | undefined = undefined;
 
-    constructor(props: any) {
+    constructor(props: HistogramProps) {
         super(props);
         makeObservable(this);
     }
@@ -56,32 +66,38 @@ export class Histogram extends ObservableReactComponent<HistogramProps> {
         return !this.parentViz ? this._props.records.map((rec, i) => i) : NumListCast(this.parentViz.dataViz_selectedRows);
     }
     // returns all the data records that will be rendered by only returning those records that have been selected by the parent visualization (or all records if there is no parent)
-    @computed get _tableData() {
+
+    @computed
+    get _tableData(): Record<string, string | number>[] {
         return !this.parentViz ? this._props.records : this._tableDataIds.map(rowId => this._props.records[rowId]);
     }
-    // filters all data to just display selected data if brushed (created from an incoming link)
-    @computed get _histogramData() {
+
+    @computed
+    get _histogramData(): HistogramData[] {
         if (this._props.axes.length < 1) return [];
         if (this._props.axes.length < 2) {
             const ax0 = this._props.axes[0];
-            if (!/[A-Za-z-:]/.test(this._props.records[0][ax0])) {
+            if (!/[A-Za-z-:]/.test(this._props.records[0][ax0] as string)) {
                 this.numericalXData = true;
             }
-            return this._tableData.map(record => ({ [ax0]: record[this._props.axes[0]] }));
+            return this._tableData.map(record => ({ [ax0]: record[ax0] }));
         }
         const [ax0, ax1] = this._props.axes;
-        if (!/[A-Za-z-:]/.test(this._props.records[0][ax0])) {
+        if (!/[A-Za-z-:]/.test(this._props.records[0][ax0] as string)) {
             this.numericalXData = true;
         }
-        if (!/[A-Za-z-:]/.test(this._props.records[0][ax1])) {
+        if (!/[A-Za-z-:]/.test(this._props.records[0][ax1] as string)) {
             this.numericalYData = true;
         }
-        return this._tableData.map(record => ({ [ax0]: record[this._props.axes[0]], [ax1]: record[this._props.axes[1]] }));
+        return this._tableData.map(record => ({
+            [ax0]: record[ax0],
+            [ax1]: record[ax1],
+        }));
     }
 
-    @computed get defaultGraphTitle() {
+    @computed get defaultGraphTitle(): string {
         const [ax0, ax1] = this._props.axes;
-        if (this._props.axes.length < 2 || !ax1 || !/\d/.test(this._props.records[0][ax1]) || !this.numericalYData) {
+        if (this._props.axes.length < 2 || !ax1 || !/\d/.test(this._props.records[0][ax1] as string) || !this.numericalYData) {
             return ax0 + ' Histogram';
         }
         return ax0 + ' by ' + ax1 + ' Histogram';
@@ -107,7 +123,8 @@ export class Histogram extends ObservableReactComponent<HistogramProps> {
         const svg = this._histogramSvg;
         if (svg) {
             const selectedDataBars = StrListCast(this._props.layoutDoc.dataViz_histogram_selectedData);
-            svg.selectAll('rect').attr('class', (d: any) => {
+            svg.selectAll('rect').attr('class', dIn => {
+                const d = dIn as HistogramData;
                 let selected = false;
                 selectedDataBars.forEach(eachSelectedData => {
                     if (d[0] === eachSelectedData) selected = true;
@@ -139,70 +156,68 @@ export class Histogram extends ObservableReactComponent<HistogramProps> {
     }
 
     // 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] || isNaN(d[key] as any)));
+    data = (dataSet: HistogramData[]): number[] => {
+        const validData = dataSet.filter((d: { [x: string]: unknown }) => !Object.keys(dataSet[0]).some(key => !d[key] || isNaN(d[key] as number)));
         const field = dataSet[0] ? Object.keys(dataSet[0])[0] : undefined;
         return !field
             ? []
-            : validData.map((d: { [x: string]: any }) =>
+            : validData.map(d =>
                   !this.numericalXData //
-                      ? d[field]
-                      : +d[field!].replace(/\$/g, '').replace(/%/g, '').replace(/</g, '')
+                      ? (d[field] as number)
+                      : +d[field].toString().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) => {
+    highlightSelectedBar = (changeSelectedVariables: boolean, svg: d3.Selection<SVGGElement, unknown, null, undefined>, eachRectWidth: number, pointerX: number, xAxisTitle: string, yAxisTitle: string, histDataSet: HistogramData[]) => {
         let barCounter = -1;
-        const selected = svg.selectAll('.histogram-bar').filter((d: any) => {
+        const selected = svg.selectAll('.histogram-bar').filter(dIn => {
+            const d = dIn as HistogramData;
             barCounter++; // uses the order of bars and width of each bar to find which one the pointer is over
-            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]) {
-                        showSelected = { [xAxisTitle]: d3.min(d) + ' to ' + d3.max(d), frequency: d.length };
-                    } else if (!this.numericalYData) showSelected = { [xAxisTitle]: showSelected[xAxisTitle], frequency: d.length };
-                }
+            if (d.length && (barCounter * eachRectWidth <= pointerX + 1 || (!barCounter && pointerX <= 0)) && pointerX - 1 <= (barCounter + 1) * eachRectWidth) {
                 if (changeSelectedVariables) {
                     // for when a bar is selected - not just hovered over
-                    let sameAsAny = false;
                     const selectedDataBars = Cast(this._props.layoutDoc.dataViz_histogram_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;
-                                const index = this.selectedData.indexOf(eachData);
-                                this.selectedData.splice(index, 1);
-                                selectedDataBars.splice(index, 1);
-                                this._currSelected = undefined;
-                            }
-                        }
-                    });
-                    if (!sameAsAny) {
+                    const alreadySelected = this.selectedData.findIndex(eachData => !Object.keys(d).some(key => d[key as string] !== eachData[key]));
+                    if (alreadySelected !== -1) {
+                        this.selectedData.splice(alreadySelected, 1);
+                        selectedDataBars.splice(alreadySelected, 1);
+                    } else {
                         this.selectedData.push(d);
-                        selectedDataBars.push(d[0]);
-                        this._currSelected = this.selectedData.length > 1 ? undefined : showSelected;
+                        selectedDataBars.push(d[0] as number);
                     }
+                    const showSelectedLabel = (dataset: HistogramData[]) => {
+                        const datum = dataset.lastElement();
+                        const datumNum = datum as unknown as number[];
+                        const showSelectedStart = this.numericalYData
+                            ? this._histogramData.filter(data => StrCast(data[xAxisTitle]).replace(/\$/g, '').replace(/%/g, '').replace(/</g, '') == d[0])[0]
+                            : histDataSet.filter(data => StrCast(data[xAxisTitle]).replace(/\$/g, '').replace(/%/g, '').replace(/</g, '') == d[0])[0];
+
+                        const getLabel = () =>
+                            dataset.length > 1
+                                ? '--multiple--'
+                                : !this.numericalXData
+                                  ? '' + datum[0]
+                                  : datum[0] !== undefined && datum[1] && datum[0] !== datum[1]
+                                    ? d3.min(datumNum) + ' to ' + d3.max(datumNum)
+                                    : !this.numericalYData
+                                      ? showSelectedStart?.[xAxisTitle]
+                                      : '' + datum[0];
+                        return { [xAxisTitle]: getLabel(), frequency: dataset.length > 1 ? Number.NaN : datum.length };
+                    };
+                    this._currSelected = this.selectedData.length ? showSelectedLabel(this.selectedData) : undefined;
 
                     // for filtering child dataviz docs
                     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++) {
-                                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;
+                            for (let i = 0; i < Object.keys(d).length; i++) {
+                                if ((this._props.records[rowID][xAxisTitle] as string).replace(/\$/g, '').replace(/%/g, '').replace(/</g, '') == d[i]) 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 if (match && alreadySelected) selectedRows.splice(selectedRows.indexOf(rowID), 1); // removing from filtered rows
                         });
                     }
                 } else this.hoverOverData = d;
@@ -217,7 +232,7 @@ export class Histogram extends ObservableReactComponent<HistogramProps> {
     };
 
     // draws the histogram
-    drawChart = (dataSet: any, width: number, height: number) => {
+    drawChart = (dataSet: HistogramData[], width: number, height: number) => {
         if (dataSet?.length <= 0) return;
         d3.select(this._histogramRef).select('svg').remove();
         d3.select(this._histogramRef).select('.tooltip').remove();
@@ -233,16 +248,16 @@ export class Histogram extends ObservableReactComponent<HistogramProps> {
         const endingPoint = this.numericalXData ? this.rangeVals.xMax! : numBins;
 
         // converts data into Objects
-        let histDataSet = dataSet.filter((d: { [x: string]: unknown }) => !Object.keys(dataSet[0]).some(key => !d[key] || isNaN(d[key] as any)));
+        let histDataSet = dataSet.filter((d: { [x: string]: unknown }) => !Object.keys(dataSet[0]).some(key => !d[key] || isNaN(d[key] as number)));
         if (!this.numericalXData) {
-            const histStringDataSet: { [x: string]: unknown }[] = [];
+            const histStringDataSet: { [x: string]: number }[] = [];
             if (this.numericalYData) {
                 for (let i = 0; i < dataSet.length; i++) {
-                    histStringDataSet.push({ [yAxisTitle]: dataSet[i][yAxisTitle], [xAxisTitle]: dataSet[i][xAxisTitle] });
+                    histStringDataSet.push({ [yAxisTitle]: dataSet[i][yAxisTitle] as number, [xAxisTitle]: dataSet[i][xAxisTitle] as number });
                 }
             } else {
                 for (let i = 0; i < uniqueArr.length; i++) {
-                    histStringDataSet.push({ [yAxisTitle]: 0, [xAxisTitle]: uniqueArr[i] });
+                    histStringDataSet.push({ [yAxisTitle]: 0, [xAxisTitle]: uniqueArr[i] as number });
                 }
                 for (let i = 0; i < data.length; i++) {
                     const barData = histStringDataSet.filter(each => each[xAxisTitle] == data[i]);
@@ -266,9 +281,9 @@ export class Histogram extends ObservableReactComponent<HistogramProps> {
             .domain(this.numericalXData ? [startingPoint!, endingPoint!] : [0, numBins])
             .range([0, width]);
         const histogram = d3
-            .histogram()
+            .bin()
             .value(d => d)
-            .domain([startingPoint!, endingPoint!])
+            .domain([startingPoint, endingPoint])
             .thresholds(x.ticks(numBins));
         const bins = histogram(data);
         let eachRectWidth = width / bins.length;
@@ -294,9 +309,6 @@ export class Histogram extends ObservableReactComponent<HistogramProps> {
             }
             bins.pop();
             eachRectWidth = width / bins.length;
-            bins.forEach(d => {
-                d.x0 = d.x0!;
-            });
             xAxis = d3
                 .axisBottom(x)
                 .ticks(bins.length > 1 ? bins.length - 1 : 1)
@@ -330,7 +342,7 @@ export class Histogram extends ObservableReactComponent<HistogramProps> {
         }
         // y-axis
         const maxFrequency = this.numericalYData ? 
-              d3.max(histDataSet, (d: any) => (d[yAxisTitle] ? Number(d[yAxisTitle]!.replace(/\$/g, '')
+              d3.max(histDataSet, d => (d[yAxisTitle] ? Number((d[yAxisTitle] as string).replace(/\$/g, '')
                 .replace(/%/g, '').replace(/</g, '')) : 0)) : 
               d3.max(bins, d => d.length); // prettier-ignore
         const y = d3.scaleLinear().range([height, 0]);
@@ -347,20 +359,11 @@ export class Histogram extends ObservableReactComponent<HistogramProps> {
             .call(xAxis);
 
         // click/hover
-        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(() => {
-            this.hoverOverData = undefined;
-            // eslint-disable-next-line no-use-before-define
-            updateHighlights();
-        });
+
         const updateHighlights = () => {
             const hoverOverBar = this.hoverOverData;
             const { selectedData } = this;
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             svg.selectAll('rect').attr('class', (d: any) => {
                 let selected = false;
                 selectedData.forEach(eachSelectedData => {
@@ -369,7 +372,18 @@ export class Histogram extends ObservableReactComponent<HistogramProps> {
                 return (hoverOverBar && hoverOverBar[0] == d[0]) || selected ? 'histogram-bar hover' : 'histogram-bar';
             });
         };
-        svg.on('click', onPointClick).on('mouseover', onHover).on('mouseout', mouseOut);
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const onPointClick = action((e: any) => this.highlightSelectedBar(true, svg, eachRectWidth, d3.pointer(e)[0], xAxisTitle, yAxisTitle, histDataSet));
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const mouseEnter = (e: any) => {
+            this.highlightSelectedBar(false, svg, eachRectWidth, d3.pointer(e)[0], xAxisTitle, yAxisTitle, histDataSet);
+            updateHighlights();
+        };
+        const mouseOut = () => {
+            this.hoverOverData = undefined;
+            updateHighlights();
+        };
+        svg.on('click', onPointClick).on('pointerenter', mouseEnter).on('pointerleave', mouseOut);
 
         // axis titles
         svg.append('text')
@@ -394,7 +408,7 @@ export class Histogram extends ObservableReactComponent<HistogramProps> {
                 'transform',
                 this.numericalYData
                     ? d => {
-                          const eachData = histDataSet.filter((hData: { [x: string]: number }) => hData[xAxisTitle] == d[0]);
+                          const eachData = histDataSet.filter((hData: HistogramData) => 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)) + ')';
                       }
@@ -404,14 +418,14 @@ export class Histogram extends ObservableReactComponent<HistogramProps> {
                 'height',
                 this.numericalYData
                     ? d => {
-                          const eachData = histDataSet.filter((hData: { [x: string]: number }) => hData[xAxisTitle] == d[0]);
+                          const eachData = histDataSet.filter((hData: HistogramData) => hData[xAxisTitle] == d[0]);
                           const length = eachData.length ? StrCast(eachData[0][yAxisTitle]).replace(/\$/g, '').replace(/%/g, '').replace(/</g, '') : 0;
                           return height - y(Number(length));
                       }
                     : d => height - y(d.length)
             )
             .attr('width', eachRectWidth)
-            .attr('class', selected ? d => (selected && selected[0] == d[0] ? 'histogram-bar hover' : 'histogram-bar') : () => 'histogram-bar')
+            .attr('class', selected ? d => (selected?.[0]?.x0 == d.x0 ? 'histogram-bar hover' : 'histogram-bar') : () => 'histogram-bar')
             .attr('fill', d => {
                 let barColor;
                 const barColors = StrListCast(this._props.layoutDoc.dataViz_histogram_barColors).map(each => each.split('::'));
@@ -427,20 +441,24 @@ 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, ''));
+        if (this.curBarSelected) {
+            this.curBarSelected.attr('fill', color);
+            const barName = StrCast((this._currSelected![this._props.axes[0]] as string).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));
-        barColors.push(StrCast(barName + '::' + color));
+            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));
+            barColors.push(StrCast(barName + '::' + color));
+        }
     };
 
     @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, ''));
+        if (this.curBarSelected) {
+            this.curBarSelected.attr('fill', this._props.layoutDoc.dataViz_histogram_defaultColor as string | number);
+            const barName = StrCast((this._currSelected![this._props.axes[0]] as string).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));
+            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));
+        }
     };
 
     // reloads the bar colors and selected bars
@@ -448,14 +466,15 @@ export class Histogram extends ObservableReactComponent<HistogramProps> {
         const svg = this._histogramSvg;
         if (svg) {
             // bar color
-            svg.selectAll('rect').attr('fill', (d: any) => {
+            svg.selectAll('rect').attr('fill', dIn => {
+                const d = dIn as HistogramData;
                 let barColor;
                 const barColors = StrListCast(this._props.layoutDoc.dataViz_histogram_barColors).map(each => each.split('::'));
                 barColors.forEach(each => {
                     if (d[0] && d[0].toString() && each[0] == d[0].toString()) barColor = each[1];
                     else {
                         const range = StrCast(each[0]).split(' to ');
-                        if (Number(range[0]) <= d[0] && d[0] <= Number(range[1])) barColor = each[1];
+                        if (Number(range[0]) <= (d[0] as number) && (d[0] as number) <= Number(range[1])) barColor = each[1];
                     }
                 });
                 return barColor ? StrCast(barColor) : StrCast(this._props.layoutDoc.dataViz_histogram_defaultColor);
@@ -476,18 +495,18 @@ export class Histogram extends ObservableReactComponent<HistogramProps> {
         if (!this._props.layoutDoc.dataViz_histogram_selectedData) this._props.layoutDoc.dataViz_histogram_selectedData = new List<string>();
         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]] as string).replace(/\$/g, '').replace(/%/g, '').replace(/</g, ''));
             selected = '{ ';
             Object.keys(this._currSelected).forEach(key => {
                 key //
-                    ? (selected += key + ': ' + this._currSelected[key] + ', ')
+                    ? (selected += key + ': ' + this._currSelected?.[key] + ', ')
                     : '';
             });
             selected = selected.substring(0, selected.length - 2) + ' }';
-            if (this._props.titleCol !== '' && (!this._currSelected.frequency || this._currSelected.frequency < 10)) {
+            if (this._props.titleCol !== '' && (!this._currSelected.frequency || (this._currSelected.frequency as number) < 10)) {
                 selected += '\n' + this._props.titleCol + ': ';
                 this._tableData.forEach(each => {
-                    if (this._currSelected[this._props.axes[0]] === each[this._props.axes[0]]) {
+                    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] + ', ';
@@ -547,7 +566,7 @@ export class Histogram extends ObservableReactComponent<HistogramProps> {
                                 tooltip="Change Bar Color"
                                 type={Type.SEC}
                                 icon={<FaFillDrip />}
-                                selectedColor={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}
diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index d121b492f..3b3bc808a 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -399,15 +399,15 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
     };
 
     // updateIcon = () => new Promise<void>(res => res());
-    updateIcon = (usePanelDimensions?: boolean) => {
+    updateIcon = (/* usePanelDimensions?: boolean */) => {
         const contentDiv = this._mainCont;
         return !contentDiv
             ? new Promise<void>(res => res())
             : UpdateIcon(
                   this.layoutDoc[Id] + '_icon_' + new Date().getTime(),
                   contentDiv,
-                  usePanelDimensions || true ? this._props.PanelWidth() : NumCast(this.layoutDoc._width),
-                  usePanelDimensions || true ? this._props.PanelHeight() : NumCast(this.layoutDoc._height),
+                  this._props.PanelWidth(), // usePanelDimensions ? this._props.PanelWidth() : NumCast(this.layoutDoc._width),
+                  this._props.PanelHeight(), // usePanelDimensions ? this._props.PanelHeight() : NumCast(this.layoutDoc._height),
                   this._props.PanelWidth(),
                   this._props.PanelHeight(),
                   0,