[State tree] large app

[aitboudad]

Possible enhancements:

• use middle click to expand/collapse tree
• show only the first level

[christopherthielen]

What? it looks fine to me. ;)

[christopherthielen]

The middle-click idea seems like pretty low-hanging fruit. I don't have time to enhance this now, but would be happy to help guide anyone interested in implementing this.

[christopherthielen]

One other thing to note: you can increase the size of the viewport by passing height and width props to the third argument of StateVisualizer.create:

  var vis = window['ui-router-visualizer']
  vis.StateVisualizer.create(ng1UIRouter, undefined, { width: 500, height: 500 });
  vis.TransitionVisualizer.create(ng1UIRouter);

https://plnkr.co/edit/dKT52b?p=preview

[aitboudad]

thank you for the hint, I'll try to work on it next week!

[wpitallo]

Awesome tool, very cool!

Was wandering how the labels are rendering? If we wanted to send them through a custom parser to add some addition info etc. What code actually renders the labels?

[christopherthielen]

Here is where the state name is written out (as SVG text): https://github.com/ui-router/visualizer/blob/master/src/state/stateNode.tsx#L33-L40

Just below it is the "label text" (i.e., "active")

The node itself is the StateVisNode which wraps a ui-router state object.

[wpitallo]

Thanks so much 👍

Was exactly what i was looking for!

[christopherthielen]

I added some enhancements which makes the visualizer much more usable with large state trees:

1. Added other layout strategies: Tree (current), Cluster, Radial. The Radial layout works great for large apps.

2. Add a zoom level which scales the state nodes and labels:

3. Add an interactive resize handle:

[christopherthielen]

4. Added Collapse/uncollapsing.

• Toggle collapse by double-clicking a state
• The count of collapsed descendents is shown inside the state
• The state is automatically un-collapsed if it is entered.
• States without children cannot be collapsed.

[christopherthielen]

@aitboudad version 3.0.0 released, please provide feedback

[aitboudad]

@christopherthielen just checked on my side and it looks really nice, I have two remarks:

• allow to configure inactive state with children collapsed as default
• add horizontal tree (left to right)

Thanks in advance!

[christopherthielen]

@aitboudad just before registering the plugin you can set the initial collapsed status of each state.

For example:

let states: State[] = router.stateRegistry.get().map(s => s.$$state());
let secondLevel = states.filter(s => s.parent.name === 'app');
secondLevel.forEach(s => s._collapsed = true);

router.plugin(Visualizer);

Or in this plunker, collapse all top and second level states:
http://plnkr.co/edit/zrc8YzoXnlhLbSD3TtWc?p=preview

  // Auto-collapse children in state visualizer
  var registry = $uiRouter.stateRegistry;
  $uiRouter.stateRegistry.get().map(s => s.$$state())
      .filter(s => s.path.length === 2 || s.path.length === 3)
      .forEach(s => s._collapsed = true);