Feature #10522

Improve scalability of full-width treeview when browsing large hierarchies

Added by José Raddaoui Marín over 5 years ago. Updated over 5 years ago.

Status:VerifiedStart date:05/02/2016
Priority:MediumDue date:
Assignee:Dan Gillean% Done:


Target version:Release 2.4.0
Google Code Legacy ID: Tested version:
Sponsored:Yes Requires documentation:No


In #6375, we introduced a second treeview option to AtoM - a full-width treeview that displays all levels of description in the hierarchy in a resizable pane above the main column on the archival description view page.

Currently however, this attempt to load all records into the tree at once is not designed for scalability, and it will choke on extremely large hierarchies, causing the tree to never load. With medium-sized hierarchies, load times can take up to a minute - during this, the viewing area remains empty with no indication that anything is loading, which can confuse end users.

These enhancements will explore ways to improve the performance and scalability of the full-width treeview option, so that it can be used on large hierarchies. Options to consider include:

  • Ajax calls on scroll and open/close items.
  • Adding a Loading icon to better indicate to users that something is happining.
  • Changes to the internal query based on relevant params.
  • Consider updating the jsTree library to a more recent version
  • Ensure that aria support remains in place for accessibility


#2 Updated by José Raddaoui Marín over 5 years ago

  • Status changed from New to Code Review
  • Assignee changed from José Raddaoui Marín to Nick Wilkinson

#3 Updated by José Raddaoui Marín over 5 years ago

I've upgraded jsTree to the latest version at the moment (v3.3.3) and added lazy load on node open. It won't be so lazy on the first load if the tree-view is reached from a resource deep in the hierarchy, as it will need to load all the ancestors of the resource and their children and the resource's children, but in this case it will show a spinning icon and "Loading ..."

I don't think it's necessary to clear the node children when a node is closed to force a new request when it's reopened, jsTree takes good care of rendering and deleting the DOM nodes on open and close, while keeping the tree structure after they are fetched.

About loading on scroll, I tried a couple of solutions but they still feel like hacks, having to reload the full tree as this is not supported directly by jsTree. And considering the latest improvements in the tree-view query speed (#9850 and #9966) I wouldn't go forward trying to achieve a good load on scroll.

The aria support remains in place, it even looks a little improved in this version.

#4 Updated by Jesús García Crespo over 5 years ago

  • Status changed from Code Review to Feedback
  • Assignee changed from Nick Wilkinson to José Raddaoui Marín


#5 Updated by José Raddaoui Marín over 5 years ago

  • Status changed from Feedback to QA/Review
  • Assignee changed from José Raddaoui Marín to Dan Gillean

Merged in qa/2.4.x

#6 Updated by Dan Gillean over 5 years ago

  • Status changed from QA/Review to Verified

Also available in: Atom PDF