InfoVis SpaceTrees: node information update after form submit

555 views Asked by At

I'm trying to use InfoVis SpaceTree to allow users to manage some information. Upon clicks on a node, a form is created and shown to the user, which allows him to update that specific node's properties, by ajax.

Also, the tree is displayed using the "on demand" nodes pattern, so I have specific methods to retrieve any subtree with any depth for a specific node, using ajax and json data.

My problem lies on the node information update after the user submits a node's form. For example, the node's name on the label should be updated after the user submits a name change to the node. Like this, there are (many) other properties that should be reflected on the label and the user is allowed to change.

What I need is to update the internal representation of a single node after a form submit has been done, and redraw the tree.

Ideally, I wanted to "batch" update all the node's properties at once, using the same method I use for "on-demand" nodes, i.e., getting the newly updated node information by ajax:

  1. user updates node
  2. node is deleted from tree
  3. async request is made to get the updated node's information
  4. node is re-inserted on tree; tree is re-drawn

I've tried to use .graph.removeNode() and .graph.addNode() functions, but this screws up the tree layout. The add and remove subtree facilities are not an option because then I would have to request a large amount of information and re-insert the whole subtree when only 1 node was updated.

Is there any method or mechanism I can use to change the whole node's internal representation at once?

1

There are 1 answers

1
Pratik Patel On BEST ANSWER

Unless node's position in the graph is changed, you should not be required to remove the node just to update its properties. You can very easily do it by

node.setData('propertyName', 'newPropertyValue');

You can change the node name just by

node.name = 'newName';

You can iterate over all properties and update them in the node.