Hi. I am facing a problem related to a drop in performance when initializing and editing a table (MobX action updateCharacteristicsSpreadsheetData as a handler for afterChange hook). I analyzed sections of the code and found out that the getStyledComment function is working for a long time, which generates the width/height of the comment on the content (validation text) for each cell that has not passed validation. Is there a way to form a comment when hovering the mouse over a invalid cell? So that after validation, only the validation text is saved for the cell, and the comment is styled only when the mouse hovers over an invalid cell? As if I would like to get it in the form of a hook (kind of afterOnCellMouseOver.
export const getStyledComment = (value: string | undefined, readOnly = true) => {
if (!value) return { value, readOnly }
// Empirically obtained constants for calculating the width and height of a comment
const CHAR_WIDTH = 6.6
const CHAR_W_PADDING = 16
const CHAR_HEIGHT = 15
const CHAR_H_PADDING = 10
const trimmedValue = value.trim()
const lines = trimmedValue.split('\n')
const maxLineLength = Math.max(...lines.map((line) => line.length))
// Dynamically calculating the width and height of the comment based on the content
const style = {
width: CHAR_WIDTH * maxLineLength + CHAR_W_PADDING,
height: CHAR_HEIGHT * lines.length + CHAR_H_PADDING,
}
return { value: trimmedValue, readOnly, style }
}
updateCharacteristicsSpreadsheetData: IWerSpecificConsumptionStore['updateCharacteristicsSpreadsheetData'] = (
changes,
) => {
if (!changes) return
// After each change in the table, validate it
const errorsMap = validateCharacteristicsTableData(this.specificConsumptionSpreadsheetData.data, {
0: this.initialSettings?.pressureAllowableChange,
1: this.initialSettings?.consumptionAllowableChange,
})
// States that determine whether the table is editable
const canEdit = this.rootStore.calcModelWerStore.listOfStationsStore.characteristicsStore.editMode
const isSelectedDateEditable = this.rootStore.calcModelWerStore.isSelectedDateEditable
const isSelectedPlantViewOnly = this.rootStore.calcModelWerStore.isSelectedPlantViewOnly
// Update the cell array: recalculate className for each cell,
// and also add a comment if an error is found
const cells = this.specificConsumptionSpreadsheetData.cell
cells.forEach((cell) => {
const cellKey = `${cell.row}:${cell.col}`
const message = errorsMap.get(cellKey)
// Optimization. If the message hasn't changed, don't update className or comment
if (cell.message !== message) {
cell.className = getCellStyle({
cell,
canEdit,
isSelectedDateEditable,
isSelectedPlantViewOnly,
message,
})
cell.comment = message ? getStyledComment(message) : undefined
cell.message = message // Save for comparison
}
})
// Recreate the array to change the reference so that MobX detects changes
this.specificConsumptionSpreadsheetData.cell = cells.slice()
this.isEditRows = true
}