BUG - Position Cache

[evgarik]

When you change the position of the node, the cache is not updated, there are data that were cached when initializing

[evgarik]

diagram.js

this.cola.on('end', () => {
      this.save_position(group, node, link, data, pop);
    });

saving every time you drag a node

[codeout]

So are you interested in an option to save positions after moving nodes? Even if we had the option, your team would see an initial diagram because the modified position cache was stored only in your browser. Is it operationally acceptable?

[evgarik]

in my decision the problem is not completely solved. therefore even the problem remains. while more interested in how to do #4

[qingwufong]

@codeout when i drag the node, chang its position, then refresh page. the node will out of the group bound sometimes, or not same as the position of refreshing page before. @evgarik Did you have the same problem, and how did you fix it? thanks a lot..

[qingwufong]

I also save graph postion like this : this.cola.on('end', () => { this.save_position(group, node, link, data, pop); });

[codeout]

Hi MGTfang. Thank you for the report.

I can introduce an experimental option for you (positionCache: "fixed" for example) to do this:

• inet-henge automatically calculates a layout if there is no position cache
• If there is a position cache, inet-henge loads it and doesn't move any more
• inet-henge flushes the cache when any change is detected on json data

But the position cache will be stored in your browser. It won't be shared with others. Is it actually acceptable in you case ? I'd thought that it would be a problem sometimes because the same json can render totally different layout.

[qingwufong]

@codeout thank you for your replay. In my case, sometimes need to beautify the layout(changes its position). so i offer a public method to save graph positions to database and save it by external method call, not as before saving every time when drag node. i found when problem happened i drag a node little bit, graph will render, it will be ok. so i make cola tick once during duration time at end of render function:

const duration = 2 // tick duration time
d3.timer(function (elapsed) {
  // re-calculate the layout.
  // invoke tick() once
  self.cola.start()
  self.ticksForward(1)
  // Terminate the timer
  // when the desired duration has elapsed
  return elapsed >= duration
})

[codeout]

Could you try origin/save-positions branch when you have time?

git fetch
git checkout origin/save-positions

and update your html like this:

--- a/example/index.html
+++ b/example/index.html
@@ -13,7 +13,7 @@
   </body>

   <script>
-   var diagram = new Diagram('#diagram', 'index.json', {pop: /^([^\s-]+)-/, bundle: true});
+   var diagram = new Diagram('#diagram', 'index.json', {pop: /^([^\s-]+)-/, bundle: true, positionCache: 'fixed'});
    diagram.init('loopback', 'interface');
   </script>
 </html>

This branch includes positionCache: 'fixed' option to save every time when dragging nodes, and some other fixes.

i offer a public method to save graph positions to database

It sounds great, but not easy for now because of scope of variables. We can easily call save_position() within render() method but not out of there. So I implemented the option above this time.

I hope the branch helps you.

[qingwufong]

@codeout
Follow your advice and try, it works!
Set experimental option can make position saved when dragging node.
You are so kind, thank you very much!!

[qingwufong]

But when access example/shownet.html, I found drag node and refresh page again and again, it seems close to original layout time and time again.

[codeout]

Did you update example/shownet.html ? It works in my environment.

--- a/example/shownet.html
+++ b/example/shownet.html
@@ -14,7 +14,7 @@

   <script>
    var distance = function(force) { force.jaccardLinkLengths(100, 0.2); }
-   var diagram = new Diagram('#diagram', 'shownet.json', {pop: /^([^\s-]+)-/, distance: distance});
+   var diagram = new Diagram('#diagram', 'shownet.json', {pop: /^([^\s-]+)-/, distance: distance, positionCache: 'fixed'});
    diagram.init('interface');
   </script>
 </html>

[qingwufong]

Yes, Its my mistake， because of not make example/shownet.html updated.
It perfect works now. ：） ：）

[codeout]

Thanks for your testing. I will be merging the branch into master.

[codeout]

@evgarik Please reopen this if you still have any problem here. Thanks.