Using comparator function, nodes don't automatically re-order when diagramJson is updated

[nikhilreddy3888]

I wrote the below comparer function, it orders nodes based on edge.order value

Comparer function

function getLayout($, go) {
    return $(go.TreeLayout, {
        angle: 90,
        nodeSpacing: 100,
        layerSpacing: 100,
        sorting: go.TreeLayout.SortingAscending,
        comparer: function(va, vb) {
                        var ea = va.sourceEdges.first();
            var eb = vb.sourceEdges.first();
            if (!ea || !eb) return 0;
            return ea.link.data.order - eb.link.data.order;
        }
    })
}

Setting order value in rightPanel and clicking on save, updates the edge order value in diagramJson.

The edges don’t immediately re-order when digramJson is updated. They re-order if we do a refresh on the whole browser page.

How can I make edges re-order without refreshing page when diagramJson changes?

Sample diagramJson:

{
  "nodes" : [ {
    "key" : "fb016268-39d5-42d4-a3b5-77caa75695cb",
    "node_id" : "177477dc435711102213698f38b8f2df",
    "name" : "Start Node",
     "order": 10  },
{
    "key" : "fb016268-39d5-42d4-a3b5-77caa75695cc",
    "node_id" : "177477dc435711102213698f38b8f2df",
    "name" : "Decision Node",
     "order": 20  },
{
    "key" : "fb016268-39d5-42d4-a3b5-77caa75695cd",
    "node_id" : "5da43bdc435711102213698f38b8f22e",
    "name" : "Guidance Node",
     "order": 10  }],
  "edges" : [ {
            "from": "fb016268-39d5-42d4-a3b5-77caa75695cb",
            "fromPort": "1b58864543031110f5a404836ab8f209",
            "to": "fb016268-39d5-42d4-a3b5-77caa75695cd",
            "order": 20,
             "toPort": "0fdf576e251c2110f8778c1b14420cdb",
            "edge_id": "cce4fbdc435711102213698f38b8f27d"},
{
            "from": "fb016268-39d5-42d4-a3b5-77caa75695cb",
            "fromPort": "1b58864543031110f5a404836ab8f209",
            "to": "fb016268-39d5-42d4-a3b5-77caa75695cc",
            "order": 100,
             "toPort": "615c13aa251c2110f8778c1b14420c62",
            "edge_id": "cce4fbdc435711102213698f38b8f27d"}],
  "node_arguments" : [ ],
  "variables" : [ ],
  "edge_arguments" : [ ]
}

[walter]

Yes, that makes sense – nothing in the system understands that you have modified some data property that affects the layout, because you aren’t modifying a layout property but a property that a function called by the layout depends on.

Within your transaction you’ll need to explicitly call Layout.invalidateLayout when such properties change.