SSDM-12468 : ELN Table : poor performance of value truncating mechanism -...

SSDM-12468 : ELN Table : poor performance of value truncating mechanism - reduce a number of cell state changes

openbis_ng_ui/src/js/components/common/grid/Grid.jsx

@@ -303,7 +303,7 @@ class Grid extends React.PureComponent {
 
   renderRow(row) {
     const { selectable, multiselectable, onRowClick } = this.props
-    const { selectedRow, multiselectedRows } = this.state
+    const { selectedRow, multiselectedRows, heights } = this.state
 
     const visibleColumns = this.controller.getVisibleColumns()
 
@@ -312,6 +312,7 @@ class Grid extends React.PureComponent {
         key={row.id}
         columns={visibleColumns}
         row={row}
+        heights={heights[row.id] || {}}
         clickable={onRowClick ? true : false}
         selectable={selectable}
         selected={selectedRow ? selectedRow.id === row.id : false}
@@ -320,6 +321,7 @@ class Grid extends React.PureComponent {
         onClick={this.controller.handleRowClick}
         onSelect={this.controller.handleRowSelect}
         onMultiselect={this.controller.handleRowMultiselect}
+        onMeasured={this.controller.handleMeasured}
       />
     )
   }

openbis_ng_ui/src/js/components/common/grid/GridCell.jsx

@@ -33,8 +33,7 @@ class GridCell extends React.PureComponent {
     super(props)
 
     this.state = {
-      renderMore: false,
-      moreOpen: false
+      more: false
     }
     this.ref = React.createRef()
     this.handleMoreClick = this.handleMoreClick.bind(this)
@@ -42,12 +41,35 @@ class GridCell extends React.PureComponent {
 
   componentDidMount() {
     this.renderDOMValue()
-    this.maybeScheduleRenderMore()
+
+    setTimeout(() => {
+      if (this.ref.current) {
+        const { column, row, onMeasured } = this.props
+        const height = this.ref.current.scrollHeight
+        if (column.truncate && height > TRUNCATE_HEIGHT) {
+          onMeasured(column, row, height)
+        }
+      }
+    }, 1)
+  }
+
+  componentDidUpdate() {
+    this.renderDOMValue()
+
+    setTimeout(() => {
+      if (this.ref.current) {
+        const { column, row, onMeasured } = this.props
+        const height = this.ref.current.scrollHeight
+        if (column.truncate && height > TRUNCATE_HEIGHT) {
+          onMeasured(column, row, height)
+        }
+      }
+    }, 1)
   }
 
   handleMoreClick() {
     this.setState(state => ({
-      moreOpen: !state.moreOpen
+      more: !state.more
     }))
   }
 
@@ -55,7 +77,7 @@ class GridCell extends React.PureComponent {
     logger.log(logger.DEBUG, 'GridCell.render')
 
     const { column, className, classes } = this.props
-    const { moreOpen } = this.state
+    const { more } = this.state
 
     const cellClasses = [classes.cell]
     if (className) {
@@ -66,7 +88,7 @@ class GridCell extends React.PureComponent {
     if (column.nowrap) {
       divClasses.push(classes.nowrap)
     }
-    if (column.truncate && !moreOpen) {
+    if (column.truncate && !more) {
       divClasses.push(classes.truncate)
     }
 
@@ -116,31 +138,23 @@ class GridCell extends React.PureComponent {
   }
 
   renderMore() {
-    const { renderMore, moreOpen } = this.state
+    const { column, height } = this.props
+    const { more } = this.state
 
-    if (!renderMore) {
-      return null
+    if (!column.truncate) {
+      return
     }
 
-    return (
-      <div>
-        <Link onClick={this.handleMoreClick}>
-          {moreOpen ? messages.get(messages.LESS) : messages.get(messages.MORE)}
-        </Link>
-      </div>
-    )
-  }
-
-  maybeScheduleRenderMore() {
-    const { column } = this.props
-    if (
-      column.truncate &&
-      this.ref.current &&
-      this.ref.current.scrollHeight > TRUNCATE_HEIGHT
-    ) {
-      setTimeout(() => {
-        this.setState({ renderMore: true })
-      }, 1)
+    if (height && height > TRUNCATE_HEIGHT) {
+      return (
+        <div>
+          <Link onClick={this.handleMoreClick}>
+            {more ? messages.get(messages.LESS) : messages.get(messages.MORE)}
+          </Link>
+        </div>
+      )
+    } else {
+      return null
     }
   }
 }

openbis_ng_ui/src/js/components/common/grid/GridController.js

@@ -60,6 +60,7 @@ export default class GridController {
       allRows: [],
       selectedRow: null,
       multiselectedRows: {},
+      heights: {},
       sortings: sortings,
       totalCount: 0,
       exportOptions: {
@@ -1136,6 +1137,26 @@ export default class GridController {
     await this._saveSettings()
   }
 
+  async handleMeasured(column, row, height) {
+    if (!this.heights) {
+      this.heights = {}
+    }
+
+    const rowHeights = this.heights[row.id] || {}
+    rowHeights[column.name] = height
+    this.heights[row.id] = rowHeights
+
+    if (this.heightsTimeout) {
+      clearTimeout(this.heightsTimeout)
+    }
+
+    setTimeout(() => {
+      this.context.setState({
+        heights: this.heights
+      })
+    }, 500)
+  }
+
   getAllColumns() {
     const { allColumns, columnsSorting } = this.context.getState()
 

openbis_ng_ui/src/js/components/common/grid/GridRow.jsx

@@ -117,7 +117,7 @@ class GridRow extends React.PureComponent {
   }
 
   renderCell(column, columnIndex, row) {
-    const { classes } = this.props
+    const { heights, classes } = this.props
 
     const cellClasses = [classes.cell]
     if (columnIndex === 0) {
@@ -128,8 +128,10 @@ class GridRow extends React.PureComponent {
       <GridCell
         key={column.name}
         row={row}
+        height={heights[column.name]}
         column={column}
         className={cellClasses.join(' ')}
+        onMeasured={this.props.onMeasured}
       />
     )
   }