Friday, February 9, 2018

Alternative UI patterns for a large, shallow tree


In our app, AdminUsers can be associated to Editions, which are part of a Course.



A Course would be something like Ruby 101, and an Edition would be French - Online or English - Classroom. So an AdminUser could be associated with the online programming related Editions, and another could handle the French Editions.


We tried implementing this configuration using a tree, where the first level is the Course, and the second level is the Edition. As expected, you can check off a Course, and all the Editions get checked off, or you can check a single Edition. Great.


Tree view


The problem comes in when there are 500 Courses with 6 Editions each. The tree becomes unwieldy and slow (due simply to the volume), even with a filter and other selection options. Even changing the tree structure (more levels or something) wouldn't change the speed problem because there are still a few thousand nodes.


Is there an alternative pattern for displaying this type of data/association with this much data? The main use case is the client wants to select all based on some criteria ("all english classroom Editions"), but also specific individual ones for those silly Editions.


Maybe just a list with an autocomplete way to add ones? But then if they have access to lots of Editions, the list is huge again. Maybe we can't avoid that.


None of us are very proficient with U[XI] related things, so we're sort of running out of ideas.




No comments:

Post a Comment

technique - How credible is wikipedia?

I understand that this question relates more to wikipedia than it does writing but... If I was going to use wikipedia for a source for a res...