Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix dynamic row height offset bug #4

Merged
merged 1 commit into from
Jun 4, 2016
Merged

Fix dynamic row height offset bug #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion examples/CollapseExample.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,6 @@ class CollapseExample extends React.Component {
rowHeight={50}
rowsCount={dataList.getSize()}
rowHeightGetter={this._rowHeightGetter}
rowClass
headerHeight={50}
width={1000}
height={500}
Expand Down
12 changes: 11 additions & 1 deletion src/FixedDataTableBufferedRows.react.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -117,12 +117,22 @@ var FixedDataTableBufferedRows = React.createClass({
var rowPositionGetter = props.rowPositionGetter;

var rowsToRender = this.state.rowsToRender;

//Sort the rows, we slice first to avoid changing original
var sortedRowsToRender = rowsToRender.slice().sort((a, b) => a - b);
var rowPositions = {};

//Row position calculation requires that rows are calculated in order
sortedRowsToRender.forEach((rowIndex) => {
rowPositions[rowIndex] = rowPositionGetter(rowIndex);
Copy link
Member

@wcjordan wcjordan Jun 3, 2016 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does this still suffer from the n*log(n) issue you mention here?
facebookarchive/fixed-data-table#405

Or is it only m*log(n) where m is the number of rows we render?

-- edit --
If we're just operating over the rows on screen I can't imagine m*log(n) would be very slow, but if it is we could optimize the rowPositionGetter method used for this case since I think we should be able to do it in m + log(n) time.
Rambling thoughts on that below.

Would it be possible to just run rowPositionGetter for the first row in the sorted range and then compute the rest by adding the result of getRowHeight to a sum here? That should give the performance increase I'm imagining.
We'd want to push the logic into scroll helper and have it return an array of rowPositions so it could also do the work of _updateRowHeight. Also we should be wary of off by one errors since I'm not 100% sure if row 2's position is row 1's position + row 1's height or row 1's position + row 2's height (probably the first case though).

We'll still see m*log(n) time from updating the PrefixIntervalTree when we first see row heights. It'd be great if we could batch those updates as well since the m rows being rendered probably share many of the same parent nodes in that tree.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No nLogN performance issue, I misread the code somewhere.

If m is the visible row count, we have m log m from the sort, and m log n from rowPositionGetter. The total complexity remains unchanged, since m > n.

I agree that we could manually iterate on the first position getter, reducing it to m + logN, but I think we should do that in a follow up review. I'm not imagining the priority for that is super high, plus its out of scope for this bug.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

sgtm, it's not worth the added complexity unless we see a perf issue.

});

this._staticRowArray.length = rowsToRender.length;

for (var i = 0; i < rowsToRender.length; ++i) {
var rowIndex = rowsToRender[i];
var currentRowHeight = this._getRowHeight(rowIndex);
var rowOffsetTop = rowPositionGetter(rowIndex);
var rowOffsetTop = rowPositions[rowIndex];

var hasBottomBorder =
rowIndex === props.rowsCount - 1 && props.showLastRowBorder;
Expand Down