ReactVirtualized Table does not update cell height after audio/transcript is updated.

[keving17]

This is a visual bug that occurs with PR #375

Before, I used a forceUpdate() to update the entire table when audio and transcripts all returned from s3 and Watson. However, after refactoring the code to have the audio and transcripts as a separate component, the setup I had to automatically resize cell heights in reactVirtualized no longer works properly.

My original setup simply looks at the width of the window and does some calculations to readjust the height and width of cells to contain the contents of each cell. With the new audio player and transcript components, when the components update, the cell does not notice a change in window width so no updates are made. The problem seems simple to fix but I could not figure out how to make it work with React Virtualized. Luckily, the problem only appears when the table is first loaded and the problem is fixed once you adjust the width of the screen a little.

[kevinrobinson]

@keving17 As you described, having the table be virtualized and doesn't fit well with having each cell dynamically size itself independently so I think this is a fundamental kind of tradeoff with using the library. It looks like there's a hook for this perhaps: https://stackoverflow.com/questions/41402677/how-to-set-up-dynamic-row-height-in-react-virtualized-list#41402914

Another thing you could try is adding overflowY: scroll to that cell, so that if there is a lot of text it will still say the same size, but the user can scroll the cell.

[keving17]

Hmmm. So I think I already do something similar with resizing the cell height initially. I think the problem is that I don't store anything in the state so when the audio/transcripts come in, the table/cell is not rendered again. Maybe this could be fixed in the future by making each cell a component?

Also, I played around with the overflow property in the Chrome inspector but couldn't figure it out. I think it might be something with React Virtualized? Since the problem is fixed once the window is resized or the table is rerendered, do you think it is bad to just have the user resize the window or to do a forceUpdate?