Timeline, Groups: Updating showNested at runtime does not show/hide nested groups

[MartinManev]

vis-timeline version 6.0.3

Description

I want to create a component (multi-select) with which to control what groups (at level 0) to expand/collapse on the timeline. Basically what can already be achieved by just clicking on the group label. The problem is, that when the component model changes, then I update the property 'showNested' of the selected group, but the nested groups are not shown or hidden. Only the little arrow next to the group label changes.

Steps to reproduce

1. See the example vis-timeline/examples/timeline/groups/nestedGroups.html

2. Write the following at the end of the file (script):

   setTimeout(() => {
   console.log('TIMEOUT');
   groups.update({
   id: 3,
   showNested: true,
   });
   }, 5000);

   Group with id 3 is labeled John and has a single nested group, which is hidden initially.

3. Wait for the timeout. See how the arrow next to the group label changes, but the nested group(s) do not show or hide.

Workaround

It is possible to loop through the nested groups and update the property visible, but if this property is already used for another purpose, e.g. filtering, then the logic for handling it can become very complex.

[mojoaxel]

@MartinManev It would be helpful if you could create a example for this (e.g. on jsbin.com). Thanks!

[MartinManev]

Hi @mojoaxel,

I'm sorry for the delay. Here is an example demonstrating the problem: https://jsfiddle.net/n64gbLhq/

Wait for the timeout (5s) and watch the group 'John'.

[mojoaxel]

maybe @yotamberk can have a look at this?

[MartinManev]

Hello. I took a deeper look in the code and here is what I found:

1. The timeline is initialized with a groups DataSet and registers event listeners on that DataSet.
2. When the DataSet is updated, e.g. by calling groups.update(...), it calls _onUpdateGroups, which in turn calls _onAddGroups and finally setData on the group.
3. The method only updates its own group and none of the nested groups from what I can tell. For example: I also noticed that if a nested group is added in the same fashion then the change is not immediately reflected in the timeline.

On the other hand, clicking the group label does the following:

1. I think this is where the event listener is registered.
2. Clicking on the group label calls _onGroupClick which in turn calls toggleGroupShowNested.
3. There is code there that also updates the nested groups that are affected.

Now, for this issue, which is about showNested, I can see the following workaround: Instead of updating the group in the DataSet it is possible to call the click handler directly like so: timeline.itemSet.toggleGroupShowNested(timeline.itemSet.groups[3]);. This would also update the nested groups as is the intention.

This doesn't address the more general problem(?), but I'll leave it at that. What do you think?

[m-nathani]

Hi @MartinManev were you able to resolve...

I know it's 3 Years ago.. I am taking a long shot ☺️.

Facing the issue with v7 where the nested group gets collapse when toggled. Hence when the timeline gets mounted again it's always collapsed.

[MartinManev]

Hi @m-nathani

Unfortunately I've moved on and have forgotten most things about this library. Judging by my own comment above, I did manage to find a workaround for my use-case. That's all I can say. I hope you find a solution.