[Timeline]Support group hierarchy

[wmyivy]

Does the group label support hierarchy which looks like http://dhtmlx.com/docs/products/dhtmlxGantt/01_basic.html

or is there a way base on what we have to let user toggle a group(subgroup)?

[brichbe]

I'm not aware of any existing support for that.

[yotamberk]

Sounds like an interesting feature request

[yotamberk]

I've added nestedGroups in #2416.
Does this satisfy your needs @wmyivy ?

[calvinrempel]

@yotamberk
Does your implementation of nestedGroups support n-level hierarchies where n > 2? I'm not able to share a screenshot at the moment, so I will try my best to describe what is occurring. First, here is how I've constructed the groups (I was perhaps overly verbose as I attempted to figure out if I could do this or not!):

  var groups = new vis.DataSet();
  
  // 1.A
  groups.add( { id: 1, content: '1.A', nestedGroups: [2, 6, 10]})
  
  groups.add( { id: 2, content: '1.A 2.A', nestedGroups: [3, 4, 5]})
  groups.add( { id: 3, content: '1.A 2.A 3.A', nestedGroups: []})
  groups.add( { id: 4, content: '1.A 2.A 3.B', nestedGroups: []})
  groups.add( { id: 5, content: '1.A 2.A 3.C', nestedGroups: []})
  
  groups.add( { id: 6, content: '1.A 2.B', nestedGroups: [7, 8, 9]})
  groups.add( { id: 7, content: '1.A 2.B 3.A', nestedGroups: []})
  groups.add( { id: 8, content: '1.A 2.B 3.B', nestedGroups: []})
  groups.add( { id: 9, content: '1.A 2.B 3.C', nestedGroups: []})
  
  groups.add( { id: 10, content: '1.A 2.C', nestedGroups: [11, 12, 13]})
  groups.add( { id: 11, content: '1.A 2.C 3.A', nestedGroups: []})
  groups.add( { id: 12, content: '1.A 2.C 3.B', nestedGroups: []})
  groups.add( { id: 13, content: '1.A 2.C 3.C', nestedGroups: []})
  
  // 1.B
  groups.add( { id: 14, content: '2.A', nestedGroups: [15, 19, 23]})
  
  groups.add( { id: 15, content: '2.A 2.A', nestedGroups: [16, 17, 18]})
  groups.add( { id: 16, content: '2.A 2.A 3.A', nestedGroups: []})
  groups.add( { id: 17, content: '2.A 2.A 3.B', nestedGroups: []})
  groups.add( { id: 18, content: '2.A 2.A 3.C', nestedGroups: []})
  
  groups.add( { id: 19, content: '2.A 2.B', nestedGroups: [20, 21, 22]})
  groups.add( { id: 20, content: '2.A 2.B 3.A', nestedGroups: []})
  groups.add( { id: 21, content: '2.A 2.B 3.B', nestedGroups: []})
  groups.add( { id: 22, content: '2.A 2.B 3.C', nestedGroups: []})
  
  groups.add( { id: 23, content: '2.A 2.C', nestedGroups: [24, 25, 26]})
  groups.add( { id: 24, content: '2.A 2.C 3.A', nestedGroups: []})
  groups.add( { id: 25, content: '2.A 2.C 3.B', nestedGroups: []})
  groups.add( { id: 26, content: '2.A 2.C 3.C', nestedGroups: []})
  
  // 1.C
  groups.add( { id: 27, content: '3.A', nestedGroups: [28, 32, 36]})
  
  groups.add( { id: 28, content: '3.A 2.A', nestedGroups: [29, 30, 31]})
  groups.add( { id: 29, content: '3.A 2.A 3.A', nestedGroups: []})
  groups.add( { id: 30, content: '3.A 2.A 3.B', nestedGroups: []})
  groups.add( { id: 31, content: '3.A 2.A 3.C', nestedGroups: []})
  
  groups.add( { id: 32, content: '3.A 2.B', nestedGroups: [33, 34, 35]})
  groups.add( { id: 33, content: '3.A 2.B 3.A', nestedGroups: []})
  groups.add( { id: 34, content: '3.A 2.B 3.B', nestedGroups: []})
  groups.add( { id: 35, content: '3.A 2.B 3.C', nestedGroups: []})
  
  groups.add( { id: 36, content: '3.A 2.C', nestedGroups: [37, 38, 39]})
  groups.add( { id: 37, content: '3.A 2.C 3.A', nestedGroups: []})
  groups.add( { id: 38, content: '3.A 2.C 3.B', nestedGroups: []})
  groups.add( { id: 39, content: '3.A 2.C 3.C', nestedGroups: []})

Expected Output is as follows ("v" represents a down-arrow icon):

• v 1.A
  -- v 1.A 2.A
  --- 1.A 2.A 3.A
  --- 1.A 2.A 3.B
  --- 1.A 2.A 3.C
  -- v 1.A 2.B
  --- 1.A 2.B 3.A
  --- 1.A 2.B 3.B
  --- 1.A 2.B 3.C
  -- v 1.A 3.B
  --- 1.A 3.B 3.A
  --- 1.A 3.B 3.B
  --- 1.A 3.B 3.C
• v 1.B
  ...

Actual Output is as follows ("v" represents a down-arrow icon):

• v 1.A
  -- v 1.A 2.A
  -- v 1.A 2.B
  -- v 1.A 2.C
  -- v 1.A 2.A 3.A
  -- v 1.A 2.A 3.B
  -- v 1.A 2.A 3.C
  -- v 1.A 2.B 3.A
  -- v 1.A 2.B 3.B
  -- v 1.A 2.B 3.C
  -- v 1.A 2.C 3.A
  -- v 1.A 2.C 3.B
  -- v 1.A 2.C 3.C
• v 2.A
  ...

Additionally, when I collapse one of the top level nodes (eg. "1.A"), that node moves to the bottom of the list, but all of it's child nodes remain visible. If I attempt to collapse what should be a 3rd level node (which I should not have the opportunity to do), I recieve an error in the console.

However, I can collapse the 2nd level nodes, which causes the 3rd level nodes to be hidden. If I collapse all 2nd level nodes before collapsing the 1st level node, then I can collapse the 1st level node and all 2nd level nodes are hidden correctly.

If I then expand the 1st level node, the 2nd level nodes remain collapsed, but their arrow icon indicates that they are expanded. If I double click one, it will expand as described in the "Actual Output".

Can you please advise if this should be expected to work, if n-level hierarchies are supported, or if I've constructed the groups incorrectly?

Thanks.

[yotamberk]

The short answer is: No.
I intentionally wrote, at that time, support for only 1st degree nested groups. Support for n-th degree is possible but has to be implemented, in another PR.
Ill label this as a Feature Request and hope somebody can pick this up (or maybe i'll get to it when i have more free time...)

[calvinrempel]

Ah sorry, I had skimmed through your PR but must have missed that. I don't believe it's an absolutely necessary feature for me at the moment, but I envision it becoming one in the future.

Thanks for the info!

[Charlesoxmt]

I too really need n level nested groups - I am looking at maintenance events for components in machines, in facilities, in divisions. n=4.

[fxl03080]

I think in theory, the nth level ordering could be done on when the group was inserted into the data-set. I sort of have this done already but it still only supports out to 2 levels for nested groups. Also waiting on this feature to be done.

[trainman419]

I needed support for arbitrary nesting of groups, so I updated the ordering function to handle arbitrary levels of nesting: #3990

[robjens]

@trainman419 Thanks for the fix. I think I am using it correctly, it does provide a better sorting but there still seems to be a bug with folding.

This is all nested and normal groups open

Then bottom level fold works fine:

Only the top level folded:

Note that if I leave the bottom level group folded, only the open one shows.

BTW: re-opening the top level "Indicatiebesluiten" group will reposition the above "floating" / orphan group in the correct place under its own parent group.

One way of looking at it, could be that in principle, the ordering works but the lack of having properly closed lower level groups would cause the glitch of them showing due to being open. I recon this might be solved in one way (not sure if desired way) is to simply force closing of any nested groups that have nested groups (from the perspective of the clicked nesting parent which doesn't have to be top level).

It could be done the other way around as well (that unfolding a nesting parent, unfolds any lower nesting parents too). Or to just have the user manually re-open them as desired. I guess the preference would depend on a use-case basis: if I wish to only view 1 nested parents children, having to close all would be a pain but not closing them would mean visual overkill/noise. Those who need "the overview" would likely want all nested groups opened on clicking the parent group.

[Steph531]

@robjens hello,
hello I have the same problem, have you found a solution? I tried to modify the _onGroupClick function of visJS but it's too complicated.

[sbusch]

Are you aware of timeline-plus? It's @yotamberk's fork of vis TimeLine, supports multi-level groups and the replacement was very smooth in my experience.

[Steph531]

I just went to see, all my problems are solved, thank you very much.