vendredi 4 septembre 2020

The best way to represent big organizational structure in browser in the most efficient way

colleagues! We are developing a web application which has functionality to represent the organizational structure of current organization(a bank, for example). Organizational structure is represented as a parent-child relationships where each node has only one parent and each parent may have zero or more children. When the amount of entities(orgUnits) was comparable small, about 500 entities, our old method worked well. Generally, we used recursion to get all parent-child entities and passed it as a JSON document to browser where frontend part parsed this document and rendered it for user. Problems started when we uploaded the organizational structure of another organization(another bank) and had 6000 active orgUnits. Obviously fetching all orgUnits was not an option. We started to use request param depth to control recursion level but it didn't solve the problem of fetching child entities because each parent can have one or more children. For example, we had a parent orgUnit that had 100 children and any of this child could have one or more children. This method also loaded all orgUnits on this level even if it wasn't necessary. Right now i'm looking for solution that will keep number of orgUnits per HTTP request relatively small and browser won't freeze while rendering it. My idea is simple:

  1. Paginate results somehow;
  2. Only return additional child orgUnits when user wants it;

Our OrgUnitDTO looks like this:

{
  "id": "a4f51de5-36f3-258c-232d-3d617c07fefc",
  "extId": null,
  "type": "OrgUnit",
  "orgId": "99beadc8-831a-f6ab-fee9-11143d43ccd1",
  "parentId": "99beadc8-831a-f6ab-fee9-11143d43ccd1",
  "code": "second-level-test-department",
  "name": "name",
  "note": "note",
  "manager": null,
  "children": [], // children property has objects of the same type
  "createdBy": "userName",
  "updatedBy": "userName",
  "createdAt": "2020-09-04T06:23:53.793Z",
  "updatedAt": "2020-09-04T06:23:53.795Z",
  "sortOrder": 0,
  "isManager": false
}

That's how it looks in GUI: screenshot

I'm looking for your suggestions for backend and frontend as well!

In case it matters we use Spring-Boot and Hibernate.




Aucun commentaire:

Enregistrer un commentaire