reduxjs / d3-state-visualizer

Real-time visualizations of your application state
https://www.npmjs.com/package/d3-state-visualizer
MIT License
104 stars 23 forks source link

Dealing with variable-depth state trees #4

Closed Enet4 closed 7 years ago

Enet4 commented 8 years ago

One of my projects' state model contains a node tree of variable depth, representing a complex query. I have been trying to expand it in the visualizer, but to no avail. It simply shows children[i] nodes after 3 levels in.

screenshot_2016-01-27_19-13-13

I also don't think I can define a tree structure, because of its recursive definition. Is there currently a way to achieve this without making other parts of the state expand, or this has to be implemented?

romseguy commented 8 years ago

The map2tree function was written in a way that stops traversing the map on the first array. This was to cover the more common use case of storing flat collections into a Redux store. An arbitrary depth of nested objects will be traversed, but nested collections won't.

In your example:

{
  query: {
    children: [
      {
        children: [ // this array won't be traversed!
        ]
      }
    ]
  }
}
Enet4 commented 8 years ago

I see. I have now mapped the state with a conversion of arrays into objects. It's working better now, although being able to state which parts are to be expanded by default would have been a plus. :+1: