bumbeishvili / org-chart

Highly customizable org chart. Integrations available for Angular, React, Vue
https://stackblitz.com/edit/web-platform-o5t1ha
MIT License
928 stars 330 forks source link

Expand Child Node when invoking filterChart #439

Open thedt opened 1 month ago

thedt commented 1 month ago

Hello,

I hope you are doing well and good job on this project it is really good! So I am trying to enable the search function shown in the link below to expand the direct child nodes (descendants) of the searched name.

Link to the search example: https://stackblitz.com/edit/js-wdexqc?file=index.html

In #429 I see we can call the stratify()(data) function with descendants. The issue I'm facing is its expanding all the nodes and not just the ones that made it past the IF statement. Would you have an idea of what I might be missing? Again thank you so much for your time!

The modified filterChart function:

`function filterChart(e) { // Get input value const value = e.srcElement.value;

  // Clear previous higlighting
  chart.clearHighlighting();

  // Get chart nodes
  const data = chart.data();
  // Mark all previously expanded nodes for collapse

  data.forEach((d) => (d._expanded = false));
  // Loop over data and check if input value matches any name
  const hierarchical = d3.stratify()(data);
  data.forEach((d) => {
    if (value != '' && d.name.toLowerCase().includes(value.toLowerCase())) {
      // If matches, mark node as highlighted
      d._highlighted = true;

      hierarchical.each((d) => {
          console.log(d);
          const descendants = d.descendants();
          descendants.forEach((d) => (d.data._expanded = true));
      });
    }
  });
  // Update data and rerender graph
  chart.data(data).render().fit();
  console.log('filtering chart', e.srcElement.value);
}`