Ember: search in a tree table

We have a hierarchical model:

segments
  demographic
    age
    language
    location
  interest
    art
    charity
    entertainment
      books
      movies
      music

We put it in a table that has expandable rows:

▶ segments

When you click on the arrow next to segments, you'll see:

▼ segments
  ▶ demographic
  ▶ interest

then when you click the arrow next to interest, you'll see:

▼ segments
  ▶ demographic
  ▼ interest
      art
      charity
    ▶ entertainment

You get the idea.

The trick is, children nodes that are invisible are not in the store yet (async). Clicking an arrow fetches the children from the server.

---

Now, the model is implemented this way in Ember Data:

export default DS.Model.extend({
  name: DS.attr('string'),
  parent: DS.belongsTo('segment', {
    async: true
  }),
  children: DS.hasMany('segment', {
    async: true,
    inverse: 'parent'
  })
});

---

Now, we want to implement search functionality:

• user types something in search text input
• server returns search results
• we render it in the table

The problem here is that we want to show the whole path.

Let's say, we search for o, we'd like to see not only the results that contain the letter o but also all the parents:

▼ segments
  ▼ demographic
      location
  ▼ interest
    ▼ entertainment
        books
        movies

---

Problem:

Assume that we fetched all the items from above example.

If we want to render interest, its children list is incomplete.

It's missing art and charity which is fine for this view. But in the model, children thinks it's loaded but it's only partially loaded.

What should be an approach here?

• should we have a separate field in the model for searchChildren?
• should we somehow use a completely separate model for searching?
• are we doing this wrong?

Thanks for any hints!