Open kodemi opened 4 years ago
Try doing this:
document.getElementById("update-button").onclick = () => {
const scrollTop = document.getElementsByClassName("vis-vertical-scroll")[0].scrollTop;
timeline.setGroups(groups);
setTimeout(() => {
document.getElementsByClassName("vis-vertical-scroll")[0].scrollTop = scrollTop ;
}, 0);
};
If this isn't good enough for what you're looking for, feel free to reopen the issue
Hi! I tried to set timeout and restore scrollTop, but it leads to flicker. I have updated codesandbox example to demonstrate it.
Should be reopened but I have no rights to do it.
Hi! I tried to set timeout and restore scrollTop, but it leads to flicker. I have updated codesandbox example to demonstrate it.
I found that the problem appeared in v6.0.0. Comparing v6.0.0 with v5.1.0 and digging through code I found traces of problem:
So group is failed to calculate its height in _calculateHeight because this.visibleItems = [] and this.props.label.height = 0. this.props.label.height will be updated to actual value only in next steps, after height calculation.
Quick fix is preset this.props.label in redraw() function in Group.js:
redraw(range, margin, forceRestack, returnQueue) {
let resized = false;
const lastIsVisible = this.isVisible;
let height;
const queue = [
() => {
forceRestack = this._didMarkerHeightChange.call(this) || forceRestack;
},
// recalculate the height of the subgroups
this._updateSubGroupHeights.bind(this, margin),
// calculate actual size and position
this._calculateGroupSizeAndPosition.bind(this),
() => {this._didResize.bind(this)(resized, this.height)}, // <----- adding this function call
() => {
this.isVisible = this._isGroupVisible.bind(this)(range, margin);
},
...
And one of three:
comment these lines in _updateItemsInRange:
_updateItemsInRange(orderedItems, oldVisibleItems, range) {
const visibleItems = [];
const visibleItemsLookup = {}; // we keep this to quickly look up if an item already exists in the list without using indexOf on visibleItems
//if (!this.isVisible && this.groupId != ReservedGroupIds.BACKGROUND) {
// for (let i = 0; i < oldVisibleItems.length; i++) {
// var item = oldVisibleItems[i];
// if (item.displayed) item.hide();
// }
// return visibleItems;
//}
const interval = (range.end - range.start) / 4;
...
.vis-panel.vis-left .vis-label .vis-inner {
height: 40px;
}
Demos:
Is there any updates on a bug fix for this ticket?
I am running into the same issue in my current project. We had tried the original suggested fix to change the element a while back and that did not work or flickered depending on where it was used in React. The issue recently came back into discussion.
Any updates would be appreciated.
@kodemi Thank you for this, I used the first option with patch-package to fix it.
Four years down the road, I'd also like to thank you @kodemi 😄 For me it did the trick with just the added call to _didResize. I didn't have to set any of the height specific values. But that could as well be because I don't use any height settings at all, might be why it works for me without adding one of the three other options.
Added PR #1814
Hi! I receive data for Timeline dynamically and have to call setItems and setGroups every time I get new data. But setGroups resets vertical scroll position (I set the parameter height in options). You can see it here: https://codesandbox.io/s/vis-timeline-vertical-scroll-reset-bmoc1