diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/client/views/nodes/DataVizBox/components/Histogram.tsx | 221 | ||||
| -rw-r--r-- | src/client/views/nodes/ImageBox.tsx | 6 |
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, |