Netflix / vizceral-example

Example Vizceral app
Apache License 2.0
367 stars 165 forks source link

Reset Layout Does Not Work? #33

Open wongJonathan opened 7 years ago

wongJonathan commented 7 years ago

Hi, I've been playing around with the example and noticed that the reset layout does not move the nodes to the original position. I tried dragging the nodes around and pressing the reset layout button which only seemed to shift the label.

Is this a bug or something that has not been fully implemented yet?

Thanks!

aSqrd-eSqrd commented 7 years ago

It isn't necessarily a bug, but a usage/operation that wasn't accommodated in the original design of the ltrTreeLayout in Netflix/vizceral's ltrTree layout.

The behavior you describe of not resetting the layout only affects the ltrTree layout. If the layout is ring, ringCenter, or dns then the reset layout button works as expected and nodes that have been dragged to another position or moved.

ltrTreeLayout caches the positions of the nodes and so even if you call _relayout (which is what the "Reset Layout" button is doing) it checks the position cache and uses those positions, so long as there are no new or removed nodes and/or connections. If the layout is ltrTree and the cache was cleared, then the ltrTree layout would rerun instead of just using the cached positions.

The following code will detect when the current layout is the ltrTree and clear its position cache, in trafficFlow.jsx without having/doing anything to the ltrTree code in the "real" Vizceral code.

resetLayoutButtonClicked = () => {
  const g = this.state.currentGraph;
  if (g != null) {
    // Make sure it is an ltrTreeLayout so we don't through errors.
    if (g.layout.constructor.name === 'LTRTreeLayout') {
      g.layout.cache = [];  // Clear position cache so ltrTreeLayout will be relaid out.
    }
    g._relayout();
  }
}