search

BALKANGraph / OrgChartJS

OrgChart JS is a simple, flexible and highly customizable organization chart plugin for presenting the structure of your organization and the relationships in an elegant way.
https://balkan.app/orgchartjs
252 stars 84 forks source link

Filter nodes programmatically? #866

Open wcarson opened 3 weeks ago

wcarson commented 3 weeks ago

I have a large set of nodes (10K+) that I want to filter using a custom filter UI (tl;dr more complex UI than the filterBy can provide).

I have a method that returns the filtered list of org nodes based on the filter UI, but I don't know how to update the chart in-place. The desired behavior is that the chart remain at it's current zoom/scroll and nodes appear/disappear based on the updated filter like the filterBy feature does. I've been trying to use the chart.update method to update the data and chart.draw to redraw the chart but having no luck.

Any suggestions on how to do this?

ZornitsaPesheva commented 3 weeks ago

Please check if you can use the filter function as in this example: https://code.balkan.app/filtering-with-search#JS

wcarson commented 3 weeks ago

Thanks for the quick reply! If I understand correctly this filtering works is by tagging nodes and setting the template for tagged nodes to be invisible. My "expand" buttons have the children count on them. I'm assuming this approach would cause things like children counts not to match the visible nodes (i.e. if a node has 4 children and 2 are filtered, the children count would still show 4?).

What I have working that keeps the child counts matching is doing a chart.load with the filtered set of nodes, but load seems to reset the entire chart. Is there a way to persist the zoom/scroll...or is this not a good way to accomplish this?

wcarson commented 3 weeks ago

I'm close to getting this work the way I want as follows:

  1. Initial chart load
  2. User selects filter params from custom UI
  3. chart.load is used to reload the chart with filtered data
  4. OrgChartJS built-in state management is used to restore scale, position, expanded nodes, etc.

This works great when filtering nodes out. When nodes get added back in, the expand/collapse state gets "confused". See attached screenshots.

CleanShot 2024-11-04 at 11 52 22

CleanShot 2024-11-04 at 11 58 11

CleanShot 2024-11-04 at 12 01 17

ZornitsaPesheva commented 3 weeks ago

So, you still have issue, because the unfiltered nodes are not shown?

wcarson commented 3 weeks ago

Hi @ZornitsaPesheva. That's correct. There are 2 issues:

  1. The chart is still showing the filtered list of nodes.
  2. The child count on the parent node (29) is correct, but the expand/collapse button is in the collapsed state

If I click the expand button on the parent node the chart becomes correct again (as in the first screenshot)

ZornitsaPesheva commented 1 week ago

Could you please create a simple example to isolate the issue?