fromJson (andToJson) - blank diagram

GoJS
1

On page load and diagram initialization, I load model data in JSON format and use myDiagram.model = go.Model.fromJson() and that works fine and dandy. On user action, I retrieve new JSON data via an Ajax api call and use that data in a .fromJson(newModelData). I get a blank diagram! I’ve even tried returning the exact data used at page load init but that gives a blank diagram too!

After Googling I found one answer on your forums where someone had similar issues and you suggest testing it with myDiagram.model = go.Model.fromJSON(myDiagram.model.toJSON()); When I try this, again I end up with a blank diagram.

Any help?

2

Are you using the debug library and are you checking the console for warnings and errors?

3

Yes to both - no warnings or errors. Using 1.6.24

I thought that it might be something to do with trying to update the model data in the success of the Ajax function so I put this code, based on more forum answers, in an onClick of a button on the page :-
myDiagram.clear();
myDiagram.currentTool.doCancel();
myDiagram.model = go.Model.fromJSON(careerDiagram.model.toJSON());

but still end up with a blank diagram.

4

I’ll think about it and see if I can come up with a possible scenario for that behavior.

Is there any way for you to give us an app that reproduces the problem?

Have you verified in your test that the second JSON-formatted string that you converted into a Model was exactly the same string as that was used with the initial load?

After replacing the model and getting a blank screen, could you evaluate these expressions in the console and tell me your results? Of course I’m assuming there’s a reference to your Diagram in the variable myDiagram.

myDiagram.nodes.count
myDiagram.links.count
myDiagram.model.nodeDataArray.length
myDiagram.documentBounds.toString()
myDiagram.viewportBounds.toString()
go.Debug.dumpVisualTree(myDiagram)
5

OK, here is the code:-

    function onUpdateModelClick()
    {
        console.log("Before model.toJson");
        console.log(careerDiagram.nodes.count);
        console.log(careerDiagram.links.count);
        console.log(careerDiagram.model.nodeDataArray.length);
        console.log(careerDiagram.documentBounds.toString());
        console.log(careerDiagram.viewportBounds.toString());
        console.log(go.Debug.dumpVisualTree(careerDiagram));

        careerDiagram.clear();
        careerDiagram.currentTool.doCancel();
        careerDiagram.model = go.Model.fromJSON(careerDiagram.model.toJSON());

        console.log("After model.toJson");
        console.log(careerDiagram.nodes.count);
        console.log(careerDiagram.links.count);
        console.log(careerDiagram.model.nodeDataArray.length);
        console.log(careerDiagram.documentBounds.toString());
        console.log(careerDiagram.viewportBounds.toString());
        console.log(go.Debug.dumpVisualTree(careerDiagram));

    };

And the console output is …

Before model.toJson
3
3
3
Rect(-105.97062225722182,-77.84388708435644,251.71906838439622,261.2250357689724)
Rect(-636.1110880650237,-346.23136919987024,1312,798)
Layer “Grid”
Layer “Background”
Layer “”
Node#1143(Web Developer) cdgmstABL vp Rect(31.279035319900373,71.38114868461596,107,107) n:Rect(0,0,107,107) elts:2 data:[object Object]
Shape(Circle)#1146 vp Rect(0,0,107,107) n:Rect(0,0,106,106)
TextBlock(“Web Developer”) vp Rect(5.5,46.35,96,14.3) n:Rect(0,0,96,14.3)
Node#1148(Other Developer) cdgmstABL vp Rect(42.572898675881206,-72.84388708435644,75,75) n:Rect(0,0,75,75) elts:2 data:[object Object]
Shape(Circle)#1151 vp Rect(0,0,75,75) n:Rect(0,0,74,74)
TextBlock(“Other Developer”) vp Rect(5.5,23.2,64,28.6) n:Rect(0,0,64,28.6)
Node#1153(Media Developer) cdgmstABL vp Rect(-100.97062225722182,-47.35766852082769,75,75) n:Rect(0,0,75,75) elts:2 data:[object Object]
Shape(Circle)#1156 vp Rect(0,0,75,75) n:Rect(0,0,74,74)
TextBlock(“Media Developer”) vp Rect(5.5,23.2,64,28.6) n:Rect(0,0,64,28.6)
Link#1160(Web to Media) cdgmhstABL vp Rect(-50.29344016857283,19.824990982607332,91,77.06324210742735) n:Rect(0,0,91,77.06324210742735) elts:3 data:[object Object]
Shape(None)#1163 vp Rect(8.111931179428424,0.33757219606053645,82.17916004442598,76.72566991136682) n:Rect(0,0,81.17916004442598,75.72566991136682)
Shape(Standard)#1164 vp Rect(6.726624771597717,0,9,9) n:Rect(0,0,8,8) a:234.47606337207577
Panel(Panel.Auto)#1165 vp Rect(0,31.134960395704,91,23.3) n:Rect(0,0,91,23.3) elts:2
Shape(None)#1167 vp Rect(0,0,91,23.3) n:Rect(0,0,90,22.3)
TextBlock(“Web to Media”) vp Rect(4.5,4.5,82,14.3) n:Rect(0,0,82,14.3)
Link#1169(Other to Web) cdgmhstABL vp Rect(52.74844612717442,0.1168756642779556,88,72.16593785502732) n:Rect(0,0,88,72.16593785502732) elts:3 data:[object Object]
Shape(None)#1172 vp Rect(37.45805694874109,0,7.107808910431361,69.64261893688881) n:Rect(0,0,6.107808910431361,68.64261893688881)
Shape(Standard)#1173 vp Rect(37.717842078064876,63.16593785502733,9,9) n:Rect(0,0,8,8) a:100.1160376397016
Panel(Panel.Auto)#1174 vp Rect(0,24.56358789073699,88,23.3) n:Rect(0,0,88,23.3) elts:2
Shape(None)#1176 vp Rect(0,0,88,23.3) n:Rect(0,0,87,22.3)
TextBlock(“Other to Web”) vp Rect(4.5,4.5,79,14.3) n:Rect(0,0,79,14.3)
Link#1178(Media to Other) cdgmhstABL vp Rect(-42.711856395745805,-48.404470034307934,97,23.351129262386713) n:Rect(0,0,97,23.351129262386713) elts:3 data:[object Object]
Shape(None)#1181 vp Rect(12.798478193001621,9.067654628026165,70.11714144038534,14.283474634360546) n:Rect(0,-0.1016605486767384,69.11714144038534,13.283474634360546)
Shape(Standard)#1182 vp Rect(76.42046646900769,5.186958816086126,9,9) n:Rect(0,0,8,8) a:4.607211583460747
Panel(Panel.Auto)#1183 vp Rect(0,0,97,23.3) n:Rect(0,0,97,23.3) elts:2
Shape(None)#1185 vp Rect(0,0,97,23.3) n:Rect(0,0,96,22.3)
TextBlock(“Media to Other”) vp Rect(4.5,4.5,88,14.3) n:Rect(0,0,88,14.3)
Layer “Foreground”
Layer “Adornment”
Layer “Tool”
undefined

After model.toJson
0
0
0
Rect(NaN,NaN,NaN,NaN)
Rect(-636.1110880650237,-346.23136919987024,1312,798)
Layer “Grid”
Layer “Background”
Layer “”
Layer “Foreground”
Layer “Adornment”
Layer “Tool”
undefined

6

Once you call Diagram.clear, there won’t be any Nodes or Links in the Diagram nor any data in the Model. (Nor any state in the UndoManager.)

So of course calling Model.toJson will result in an empty model, which when loaded correctly causes the Diagram to have nothing in it besides the default Layers.

That’s why I was asking if you have checked that the string you are passing to Model.fromJson is in fact the correct string.

7

I had the clear in because I fond that in one of the forum answers. I have removed that and the doCancel from the code. As you can see, I not loading “new” data - just using model.toJson result into model.fromJson.

I still get a blank diagram and the console output is now :-

Before model.toJson

3
3
3
Rect(-88.08285486114334,-91.74137565237562,261.08856454663794,251.80103122987572)
Rect(-613.5385725878243,-364.8408600374378,1312,798)
Layer “Grid”
Layer “Background”
Layer “”
Node#1143(Web Developer) cdgmstABL vp Rect(61.005709685494594,48.059655577500095,107,107) n:Rect(0,0,107,107) elts:2 data:[object Object]
Shape(Circle)#1146 vp Rect(0,0,107,107) n:Rect(0,0,106,106)
TextBlock(“Web Developer”) vp Rect(5.5,46.35,96,14.3) n:Rect(0,0,96,14.3)
Node#1148(Other Developer) cdgmstABL vp Rect(-83.08285486114334,56.46329671235256,75,75) n:Rect(0,0,75,75) elts:2 data:[object Object]
Shape(Circle)#1151 vp Rect(0,0,75,75) n:Rect(0,0,74,74)
TextBlock(“Other Developer”) vp Rect(5.5,23.2,64,28.6) n:Rect(0,0,64,28.6)
Node#1153(Media Developer) cdgmstABL vp Rect(-54.799500225383724,-86.74137565237562,75,75) n:Rect(0,0,75,75) elts:2 data:[object Object]
Shape(Circle)#1156 vp Rect(0,0,75,75) n:Rect(0,0,74,74)
TextBlock(“Media Developer”) vp Rect(5.5,23.2,64,28.6) n:Rect(0,0,64,28.6)
Link#1160(Web to Media) cdgmhstABL vp Rect(-12.827233592127875,-16.98694914381715,91,85.5546545425375) n:Rect(0,0,91,85.5546545425375) elts:3 data:[object Object]
Shape(None)#1163 vp Rect(13.175197718381603,0.06202573122587829,72.93797478779322,85.49262881131163) n:Rect(0,0,71.93797478779322,84.49262881131163)
Shape(Standard)#1164 vp Rect(11.3528934405781,0,9,9) n:Rect(0,0,8,8) a:241.0574513153255
Panel(Panel.Auto)#1165 vp Rect(0,34.7911395542112,91,23.3) n:Rect(0,0,91,23.3) elts:2
Shape(None)#1167 vp Rect(0,0,91,23.3) n:Rect(0,0,90,22.3)
TextBlock(“Web to Media”) vp Rect(4.5,4.5,82,14.3) n:Rect(0,0,82,14.3)
Link#1169(Other to Web) cdgmhstABL vp Rect(-16.853291505610222,71.18365223649778,88,23.3) n:Rect(0,0,88,23.3) elts:3 data:[object Object]
Shape(None)#1172 vp Rect(7.44062149159172,11.056003450679803,69.72209464259154,5.657853126078722) n:Rect(0,-0.09399654932019707,68.72209464259154,4.657853126078722)
Shape(Standard)#1173 vp Rect(70.71060237161012,11.337870379477721,9,9) n:Rect(0,0,8,8) a:14.516420968783727
Panel(Panel.Auto)#1174 vp Rect(0,0,88,23.3) n:Rect(0,0,88,23.3) elts:2
Shape(None)#1176 vp Rect(0,0,88,23.3) n:Rect(0,0,87,22.3)
TextBlock(“Other to Web”) vp Rect(4.5,4.5,79,14.3) n:Rect(0,0,79,14.3)
Link#1178(Media to Other) cdgmhstABL vp Rect(-65.84071597903092,-12.310878519416036,97,72.97148776128456) n:Rect(0,0,97,72.97148776128456) elts:3 data:[object Object]
Shape(None)#1181 vp Rect(36.09877682524808,0,15.258357773023586,70.32158374237328) n:Rect(0,0,14.258357773023586,69.32158374237328)
Shape(Standard)#1182 vp Rect(34.059686710131345,63.971487761284564,9,9) n:Rect(0,0,8,8) a:115.8335206311803
Panel(Panel.Auto)#1183 vp Rect(0,25.806722729270504,97,23.3) n:Rect(0,0,97,23.3) elts:2
Shape(None)#1185 vp Rect(0,0,97,23.3) n:Rect(0,0,96,22.3)
TextBlock(“Media to Other”) vp Rect(4.5,4.5,88,14.3) n:Rect(0,0,88,14.3)
Layer “Foreground”
Layer “Adornment”
Layer “Tool”
undefined

After model.toJson
3
3
3
Rect(-88.08285486114334,-91.74137565237562,261.08856454663794,251.80103122987572)
Rect(-613.5385725878243,-364.8408600374378,1312,798)
Layer “Grid”
Layer “Background”
Layer “”
Node#2427(Web Developer) cdgmstABL vp Rect(NaN,NaN,25.3,25.3) n:Rect(0,0,25.3,25.3) elts:2 data:[object Object]
Shape(Circle)#2430 vp Rect(0,0,25.3,25.3) n:Rect(0,0,24.3,24.3)
TextBlock(“Web Developer”) vp Rect(8.65,5.5,8,14.3) n:Rect(0,0,8,14.3)
Node#2432(Other Developer) cdgmstABL vp Rect(NaN,NaN,25.3,25.3) n:Rect(0,0,25.3,25.3) elts:2 data:[object Object]
Shape(Circle)#2435 vp Rect(0,0,25.3,25.3) n:Rect(0,0,24.3,24.3)
TextBlock(“Other Developer”) vp Rect(8.65,5.5,8,14.3) n:Rect(0,0,8,14.3)
Node#2437(Media Developer) cdgmstABL vp Rect(NaN,NaN,25.3,25.3) n:Rect(0,0,25.3,25.3) elts:2 data:[object Object]
Shape(Circle)#2440 vp Rect(0,0,25.3,25.3) n:Rect(0,0,24.3,24.3)
TextBlock(“Media Developer”) vp Rect(8.65,5.5,8,14.3) n:Rect(0,0,8,14.3)
Link#2442(Web to Media) cdgmhstABL vp Rect(NaN,NaN,NaN,NaN) elts:3 data:[object Object]
Shape(None)#2445 vp Rect(NaN,NaN,NaN,NaN)
Shape(Standard)#2446 vp Rect(NaN,NaN,NaN,NaN)
Panel(Panel.Auto)#2447 vp Rect(NaN,NaN,NaN,NaN) elts:2
Shape(None)#2449 vp Rect(NaN,NaN,NaN,NaN)
TextBlock(“Web to Media”) vp Rect(NaN,NaN,NaN,NaN) n:Rect(0,0,82,14.3)
Link#2451(Other to Web) cdgmhstABL vp Rect(NaN,NaN,NaN,NaN) elts:3 data:[object Object]
Shape(None)#2454 vp Rect(NaN,NaN,NaN,NaN)
Shape(Standard)#2455 vp Rect(NaN,NaN,NaN,NaN)
Panel(Panel.Auto)#2456 vp Rect(NaN,NaN,NaN,NaN) elts:2
Shape(None)#2458 vp Rect(NaN,NaN,NaN,NaN)
TextBlock(“Other to Web”) vp Rect(NaN,NaN,NaN,NaN) n:Rect(0,0,79,14.3)
Link#2460(Media to Other) cdgmhstABL vp Rect(NaN,NaN,NaN,NaN) elts:3 data:[object Object]
Shape(None)#2463 vp Rect(NaN,NaN,NaN,NaN)
Shape(Standard)#2464 vp Rect(NaN,NaN,NaN,NaN)
Panel(Panel.Auto)#2465 vp Rect(NaN,NaN,NaN,NaN) elts:2
Shape(None)#2467 vp Rect(NaN,NaN,NaN,NaN)
TextBlock(“Media to Other”) vp Rect(NaN,NaN,NaN,NaN) n:Rect(0,0,88,14.3)
Layer “Foreground”
Layer “Adornment”
Layer “Tool”
undefined

8

PS - In the case of the “real” functionality, I’m using the exact JSON data that I use in model.fromJason when the diagram init takes place - and that renders the correct diagram.

9

Well, on second load you now at least have all of the correct Nodes and Links, even if you cannot see anything.

The reason you cannot see anything is because none of the Nodes have real locations. Notice all of the NaNs in the Rects shown by dumpVisualTree?

Usually that happens because the Node.location or Node.position were not set, neither via a data Binding nor by the Diagram.layout.

So if your node templates all have Node.location Bindings, check again the JSON-formatted string to see if it includes real numbers for the node locations.

If you are depending on some Layout to assign node locations, then maybe your Diagram.layout has been disabled for some reason.

10

I thought I’d take a look at page load init. This is the code of my document.ready()

        // create a diagram, retrieve data and deploy it to the diagram
        careerDiagram = initGOjsDiagram();
        diagramData = retrieveDiagramData();            // ajax api call to get diagram JSON into diagramData
        careerDiagram.model = go.Model.fromJson(diagramData);
        
        console.log("After Diagram init and model.fromJson");
        console.log(careerDiagram.nodes.count);
        console.log(careerDiagram.links.count);
        console.log(careerDiagram.model.nodeDataArray.length);
        console.log(careerDiagram.documentBounds.toString());
        console.log(careerDiagram.viewportBounds.toString());
        console.log(go.Debug.dumpVisualTree(careerDiagram));

The diagram is displayed correctly and the console output is :-

After Diagram init and model.fromJson
3
3
3
Rect(NaN,NaN,NaN,NaN)
Rect(NaN,NaN,1312,798)
Layer “Grid”
Layer “Background”
Layer “”
Node#1143(Web Developer) cdgmstABL vp Rect(NaN,NaN,25.3,25.3) n:Rect(0,0,25.3,25.3) elts:2 data:[object Object]
Shape(Circle)#1146 vp Rect(0,0,25.3,25.3) n:Rect(0,0,24.3,24.3)
TextBlock(“Web Developer”) vp Rect(8.65,5.5,8,14.3) n:Rect(0,0,8,14.3)
Node#1148(Other Developer) cdgmstABL vp Rect(NaN,NaN,25.3,25.3) n:Rect(0,0,25.3,25.3) elts:2 data:[object Object]
Shape(Circle)#1151 vp Rect(0,0,25.3,25.3) n:Rect(0,0,24.3,24.3)
TextBlock(“Other Developer”) vp Rect(8.65,5.5,8,14.3) n:Rect(0,0,8,14.3)
Node#1153(Media Developer) cdgmstABL vp Rect(NaN,NaN,25.3,25.3) n:Rect(0,0,25.3,25.3) elts:2 data:[object Object]
Shape(Circle)#1156 vp Rect(0,0,25.3,25.3) n:Rect(0,0,24.3,24.3)
TextBlock(“Media Developer”) vp Rect(8.65,5.5,8,14.3) n:Rect(0,0,8,14.3)
Link#1160(Web to Media) cdgmhstABL vp Rect(NaN,NaN,NaN,NaN) elts:3 data:[object Object]
Shape(None)#1163 vp Rect(NaN,NaN,NaN,NaN)
Shape(Standard)#1164 vp Rect(NaN,NaN,NaN,NaN)
Panel(Panel.Auto)#1165 vp Rect(NaN,NaN,NaN,NaN) elts:2
Shape(None)#1167 vp Rect(NaN,NaN,NaN,NaN)
TextBlock(“Web to Media”) vp Rect(NaN,NaN,NaN,NaN) n:Rect(0,0,82,14.3)
Link#1169(Other to Web) cdgmhstABL vp Rect(NaN,NaN,NaN,NaN) elts:3 data:[object Object]
Shape(None)#1172 vp Rect(NaN,NaN,NaN,NaN)
Shape(Standard)#1173 vp Rect(NaN,NaN,NaN,NaN)
Panel(Panel.Auto)#1174 vp Rect(NaN,NaN,NaN,NaN) elts:2
Shape(None)#1176 vp Rect(NaN,NaN,NaN,NaN)
TextBlock(“Other to Web”) vp Rect(NaN,NaN,NaN,NaN) n:Rect(0,0,79,14.3)
Link#1178(Media to Other) cdgmhstABL vp Rect(NaN,NaN,NaN,NaN) elts:3 data:[object Object]
Shape(None)#1181 vp Rect(NaN,NaN,NaN,NaN)
Shape(Standard)#1182 vp Rect(NaN,NaN,NaN,NaN)
Panel(Panel.Auto)#1183 vp Rect(NaN,NaN,NaN,NaN) elts:2
Shape(None)#1185 vp Rect(NaN,NaN,NaN,NaN)
TextBlock(“Media to Other”) vp Rect(NaN,NaN,NaN,NaN) n:Rect(0,0,88,14.3)
Layer “Foreground”
Layer “Adornment”
Layer “Tool”
undefined

So if the diagram renders correctly at this point, why does a subsequent careerDiagram.model = go.Model.fromJson(diagramData); where diagramData is unchanged fail?

11

I discussed two different reasons why that might happen in my previous response.

Do your node template(s) have a data Binding on Node.location or Node.position?

What is the string that you pass to Model.fromJson the second time? Is it identical to the string that you passed on the first call to Model.fromJson?

What is the value of Diagram.layout?

12

Forgive me - I’m still a newbie.

My templates are that which is given in the ContinuousForceDirectedLayout example so I can’t see any node binding to position or location.

  • Should I add these?
  • Should they look like :-
    new go.Binding(“location”, “loc”), // get the Node.location from the data.loc value
    new go.Binding(“position”, “pos”), // get the Node.position from the data.pos value
  • Does that mean I need to provide that data in the JSON?
  • If so, does the data need to be explicit e.g. real coordinates?

Yes, I pass the exact string the second time as the first.

I’ve add the “layout” to console dump :-

---- After Diagram init and model.fromJson ----

        careerDiagram = initGOjsDiagram();
        diagramData = retrieveDiagramData();
        careerDiagram.model = go.Model.fromJson(diagramData);

careerDiagram.nodes.count = 3
careerDiagram.links.count = 3
careerDiagram.model.nodeDataArray.length = 3
careerDiagram.documentBounds = Rect(NaN,NaN,NaN,NaN)
careerDiagram.viewportBounds = Rect(NaN,NaN,1312,798)
careerDiagram.layout = ContinuousForceDirectedLayout( for Diagram “myDiagramDiv”)
"careerDiagram.layout = "
{
[functions]: ,
$h: true,
__gohashid: 194,
proto: { },
_isObserving: false,
aq: true,
arrangementOrigin: { },
arrangementSpacing: { },
arrangesToOrigin: false,
Bo: 100,
CK: 1000,
comments: false,
currentIteration: 0,
defaultCommentElectricalCharge: 5,
defaultCommentSpringLength: 10,
defaultElectricalCharge: 100,
defaultGravitationalMass: 0,
defaultSpringLength: 30,
defaultSpringStiffness: 0.05,
diagram: { },
Dx: { },
Eg: null,
epsilonDistance: 1,
Gf: false,
gK: 0,
group: null,
gz: null,
h: { },
hI: true,
infinityDistance: 1000,
isInitial: true,
isOngoing: true,
isRealtime: true,
isRouting: true,
isValidLayout: false,
isViewportSized: false,
je: { },
KD: { },
Kh: false,
ks: { },
Lj: true,
lK: 100,
lr: true,
maxIterations: 100,
mg: { },
mH: 5,
mK: 0,
Mq: 5,
nE: 1,
network: null,
nH: 10,
Nq: 10,
nr: true,
or: true,
ox: false,
pA: 100,
pq: { },
QE: true,
qq: false,
randomNumberGenerator: { },
RE: true,
rK: 30,
Rt: true,
Ry: null,
setsPortSpots: true,
Sh: 1000,
sK: 0.05,
TG: false,
Tn: 100,
to: false,
ur: false,
VB: “”,
Vn: 0,
Wn: 30,
wr: 0,
Xn: 0.05,
Xq: 1,
Z: { }
}

Layer “Grid”
Layer “Background”
Layer “”
Node#1146(Web Developer) cdgmstABL vp Rect(NaN,NaN,25.3,25.3) n:Rect(0,0,25.3,25.3) elts:2 data:[object Object]
Shape(Circle)#1149 vp Rect(0,0,25.3,25.3) n:Rect(0,0,24.3,24.3)
TextBlock(“Web Developer”) vp Rect(8.65,5.5,8,14.3) n:Rect(0,0,8,14.3)
Node#1151(Other Developer) cdgmstABL vp Rect(NaN,NaN,25.3,25.3) n:Rect(0,0,25.3,25.3) elts:2 data:[object Object]
Shape(Circle)#1154 vp Rect(0,0,25.3,25.3) n:Rect(0,0,24.3,24.3)
TextBlock(“Other Developer”) vp Rect(8.65,5.5,8,14.3) n:Rect(0,0,8,14.3)
Node#1156(Media Developer) cdgmstABL vp Rect(NaN,NaN,25.3,25.3) n:Rect(0,0,25.3,25.3) elts:2 data:[object Object]
Shape(Circle)#1159 vp Rect(0,0,25.3,25.3) n:Rect(0,0,24.3,24.3)
TextBlock(“Media Developer”) vp Rect(8.65,5.5,8,14.3) n:Rect(0,0,8,14.3)
Link#1163(Web to Media) cdgmhstABL vp Rect(NaN,NaN,NaN,NaN) elts:3 data:[object Object]
Shape(None)#1166 vp Rect(NaN,NaN,NaN,NaN)
Shape(Standard)#1167 vp Rect(NaN,NaN,NaN,NaN)
Panel(Panel.Auto)#1168 vp Rect(NaN,NaN,NaN,NaN) elts:2
Shape(None)#1170 vp Rect(NaN,NaN,NaN,NaN)
TextBlock(“Web to Media”) vp Rect(NaN,NaN,NaN,NaN) n:Rect(0,0,82,14.3)
Link#1172(Other to Web) cdgmhstABL vp Rect(NaN,NaN,NaN,NaN) elts:3 data:[object Object]
Shape(None)#1175 vp Rect(NaN,NaN,NaN,NaN)
Shape(Standard)#1176 vp Rect(NaN,NaN,NaN,NaN)
Panel(Panel.Auto)#1177 vp Rect(NaN,NaN,NaN,NaN) elts:2
Shape(None)#1179 vp Rect(NaN,NaN,NaN,NaN)
TextBlock(“Other to Web”) vp Rect(NaN,NaN,NaN,NaN) n:Rect(0,0,79,14.3)
Link#1181(Media to Other) cdgmhstABL vp Rect(NaN,NaN,NaN,NaN) elts:3 data:[object Object]
Shape(None)#1184 vp Rect(NaN,NaN,NaN,NaN)
Shape(Standard)#1185 vp Rect(NaN,NaN,NaN,NaN)
Panel(Panel.Auto)#1186 vp Rect(NaN,NaN,NaN,NaN) elts:2
Shape(None)#1188 vp Rect(NaN,NaN,NaN,NaN)
TextBlock(“Media to Other”) vp Rect(NaN,NaN,NaN,NaN) n:Rect(0,0,88,14.3)
Layer “Foreground”
Layer “Adornment”
Layer “Tool”
undefined

    function onUpdateModelClick()
    {
        console.log("---- Before model.toJson ----");
        console.log("careerDiagram.nodes.count = ", careerDiagram.nodes.count);
        console.log("careerDiagram.links.count = ", careerDiagram.links.count);
        console.log("careerDiagram.model.nodeDataArray.length = ", careerDiagram.model.nodeDataArray.length);
        console.log("careerDiagram.documentBounds = ", careerDiagram.documentBounds.toString());
        console.log("careerDiagram.viewportBounds = ", careerDiagram.viewportBounds.toString());
        console.log("careerDiagram.layout = ", careerDiagram.layout);
        console.log(go.Debug.dumpVisualTree(careerDiagram));

        careerDiagram.model = go.Model.fromJSON(careerDiagram.model.toJSON());

        console.log("---- After model.toJson ----");
        console.log("careerDiagram.nodes.count = ", careerDiagram.nodes.count);
        console.log("careerDiagram.links.count = ", careerDiagram.links.count);
        console.log("careerDiagram.model.nodeDataArray.length = ", careerDiagram.model.nodeDataArray.length);
        console.log("careerDiagram.documentBounds = ", careerDiagram.documentBounds.toString());
        console.log("careerDiagram.viewportBounds = ", careerDiagram.viewportBounds.toString());
        console.log("careerDiagram.layout = ", careerDiagram.layout);
        console.log(go.Debug.dumpVisualTree(careerDiagram));

    };

---- Before model.toJson ----
careerDiagram.nodes.count = 3
careerDiagram.links.count = 3
careerDiagram.model.nodeDataArray.length = 3
careerDiagram.documentBounds = Rect(-119.33483917433506,-113.07893157753484,262.9432780753119,264.2642083625452)
careerDiagram.viewportBounds = Rect(-643.8632001366791,-379.9468273962622,1312,798)
careerDiagram.layout = ContinuousForceDirectedLayout( for Diagram “myDiagramDiv”)
"careerDiagram.layout = "
{
[functions]: ,
$h: true,
__gohashid: 194,
proto: { },
_isObserving: true,
aq: true,
arrangementOrigin: { },
arrangementSpacing: { },
arrangesToOrigin: false,
Bo: 100,
CK: 1000,
comments: false,
currentIteration: 13,
defaultCommentElectricalCharge: 5,
defaultCommentSpringLength: 10,
defaultElectricalCharge: 100,
defaultGravitationalMass: 0,
defaultSpringLength: 30,
defaultSpringStiffness: 0.05,
diagram: { },
Dx: { },
Eg: null,
epsilonDistance: 1,
Gf: true,
gK: 13,
group: null,
gz: { },
h: { },
hI: true,
infinityDistance: 1000,
isInitial: true,
isOngoing: true,
isRealtime: true,
isRouting: true,
isValidLayout: true,
isViewportSized: false,
je: { },
KD: { },
Kh: false,
ks: { },
Lj: true,
lK: 100,
lr: true,
maxIterations: 100,
mg: { },
mH: 5,
mK: 0,
Mq: 5,
nE: 1,
network: { },
nH: 10,
Nq: 10,
nr: true,
or: true,
ox: false,
pA: 100,
pq: { },
QE: true,
qq: false,
randomNumberGenerator: { },
RE: true,
rK: 30,
Rt: true,
Ry: null,
setsPortSpots: true,
Sh: 1000,
sK: 0.05,
TG: false,
Tn: 100,
to: true,
ur: false,
VB: “”,
Vn: 0,
Wn: 30,
wr: 13,
Xn: 0.05,
Xq: 1,
Z: { }
}

Layer “Grid”
Layer “Background”
Layer “”
Node#1146(Web Developer) cdgmstABL vp Rect(31.608438900976892,39.18527678501037,107,107) n:Rect(0,0,107,107) elts:2 data:[object Object]
Shape(Circle)#1149 vp Rect(0,0,107,107) n:Rect(0,0,106,106)
TextBlock(“Web Developer”) vp Rect(5.5,46.35,96,14.3) n:Rect(0,0,96,14.3)
Node#1151(Other Developer) cdgmstABL vp Rect(-114.33483917433506,31.65073131072188,75,75) n:Rect(0,0,75,75) elts:2 data:[object Object]
Shape(Circle)#1154 vp Rect(0,0,75,75) n:Rect(0,0,74,74)
TextBlock(“Other Developer”) vp Rect(5.5,23.2,64,28.6) n:Rect(0,0,64,28.6)
Node#1156(Media Developer) cdgmstABL vp Rect(-15.94658690622705,-108.07893157753484,75,75) n:Rect(0,0,75,75) elts:2 data:[object Object]
Shape(Circle)#1159 vp Rect(0,0,75,75) n:Rect(0,0,74,74)
TextBlock(“Media Developer”) vp Rect(5.5,23.2,64,28.6) n:Rect(0,0,64,28.6)
Link#1163(Web to Media) cdgmhstABL vp Rect(-8.492030763034261,-33.90455499660645,91,81.90230718084021) n:Rect(0,0,91,81.90230718084021) elts:3 data:[object Object]
Shape(None)#1166 vp Rect(34.476541687851,0,30.9823913474419,81.90230718084021) n:Rect(0,0,29.9823913474419,80.90230718084021)
Shape(Standard)#1167 vp Rect(31.06827342757625,0.4609251897114035,9,9) n:Rect(0,0,8,8) a:262.443954356173
Panel(Panel.Auto)#1168 vp Rect(0,31.06791600473364,91,23.3) n:Rect(0,0,91,23.3) elts:2
Shape(None)#1170 vp Rect(0,0,91,23.3) n:Rect(0,0,90,22.3)
TextBlock(“Web to Media”) vp Rect(4.5,4.5,82,14.3) n:Rect(0,0,82,14.3)
Link#1172(Other to Web) cdgmhstABL vp Rect(-45.70363486264702,53.74173806354768,88,23.69940255125126) n:Rect(0,0,88,23.69940255125126) elts:3 data:[object Object]
Shape(None)#1175 vp Rect(5.6447908259802375,9.825350713722466,72.54175218522337,10.384676048827373) n:Rect(0,-0.015957006603073864,71.54175218522337,9.384676048827373)
Shape(Standard)#1176 vp Rect(71.7761306903429,14.699402551251264,9,9) n:Rect(0,0,8,8) a:19.902229640760335
Panel(Panel.Auto)#1177 vp Rect(0,0,88,23.3) n:Rect(0,0,88,23.3) elts:2
Shape(None)#1179 vp Rect(0,0,88,23.3) n:Rect(0,0,87,22.3)
TextBlock(“Other to Web”) vp Rect(4.5,4.5,79,14.3) n:Rect(0,0,79,14.3)
Link#1181(Media to Other) cdgmhstABL vp Rect(-64.60847474141187,-36.3537748479615,97,81.96729308915053) n:Rect(0,0,97,81.96729308915053) elts:3 data:[object Object]
Shape(None)#1184 vp Rect(15.194731503463614,0,57.31040917333179,78.96862212734812) n:Rect(0,0,56.31040917333179,77.96862212734812)
Shape(Standard)#1185 vp Rect(14.545263015830034,72.96729308915053,9,9) n:Rect(0,0,8,8) a:138.12153974999677
Panel(Panel.Auto)#1186 vp Rect(0,32.109903072025965,97,23.3) n:Rect(0,0,97,23.3) elts:2
Shape(None)#1188 vp Rect(0,0,97,23.3) n:Rect(0,0,96,22.3)
TextBlock(“Media to Other”) vp Rect(4.5,4.5,88,14.3) n:Rect(0,0,88,14.3)
Layer “Foreground”
Layer “Adornment”
Layer “Tool”
undefined

---- After model.toJson ----
careerDiagram.nodes.count = 3
careerDiagram.links.count = 3
careerDiagram.model.nodeDataArray.length = 3
careerDiagram.documentBounds = Rect(-119.33483917433506,-113.07893157753484,262.9432780753119,264.2642083625452)
careerDiagram.viewportBounds = Rect(-643.8632001366791,-379.9468273962622,1312,798)
careerDiagram.layout = ContinuousForceDirectedLayout( for Diagram “myDiagramDiv”)
"careerDiagram.layout = "
{
[functions]: ,
$h: true,
__gohashid: 194,
proto: { },
_isObserving: true,
aq: true,
arrangementOrigin: { },
arrangementSpacing: { },
arrangesToOrigin: false,
Bo: 100,
CK: 1000,
comments: false,
currentIteration: 13,
defaultCommentElectricalCharge: 5,
defaultCommentSpringLength: 10,
defaultElectricalCharge: 100,
defaultGravitationalMass: 0,
defaultSpringLength: 30,
defaultSpringStiffness: 0.05,
diagram: { },
Dx: { },
Eg: null,
epsilonDistance: 1,
Gf: false,
gK: 13,
group: null,
gz: { },
h: { },
hI: true,
infinityDistance: 1000,
isInitial: true,
isOngoing: true,
isRealtime: true,
isRouting: true,
isValidLayout: false,
isViewportSized: false,
je: { },
KD: { },
Kh: false,
ks: { },
Lj: true,
lK: 100,
lr: true,
maxIterations: 100,
mg: { },
mH: 5,
mK: 0,
Mq: 5,
nE: 1,
network: { },
nH: 10,
Nq: 10,
nr: true,
or: true,
ox: false,
pA: 100,
pq: { },
QE: true,
qq: false,
randomNumberGenerator: { },
RE: true,
rK: 30,
Rt: true,
Ry: null,
setsPortSpots: true,
Sh: 1000,
sK: 0.05,
TG: false,
Tn: 100,
to: false,
ur: false,
VB: “”,
Vn: 0,
Wn: 30,
wr: 13,
Xn: 0.05,
Xq: 1,
Z: { }
}

Layer “Grid”
Layer “Background”
Layer “”
Node#2332(Web Developer) cdgmstABL vp Rect(NaN,NaN,25.3,25.3) n:Rect(0,0,25.3,25.3) elts:2 data:[object Object]
Shape(Circle)#2335 vp Rect(0,0,25.3,25.3) n:Rect(0,0,24.3,24.3)
TextBlock(“Web Developer”) vp Rect(8.65,5.5,8,14.3) n:Rect(0,0,8,14.3)
Node#2337(Other Developer) cdgmstABL vp Rect(NaN,NaN,25.3,25.3) n:Rect(0,0,25.3,25.3) elts:2 data:[object Object]
Shape(Circle)#2340 vp Rect(0,0,25.3,25.3) n:Rect(0,0,24.3,24.3)
TextBlock(“Other Developer”) vp Rect(8.65,5.5,8,14.3) n:Rect(0,0,8,14.3)
Node#2342(Media Developer) cdgmstABL vp Rect(NaN,NaN,25.3,25.3) n:Rect(0,0,25.3,25.3) elts:2 data:[object Object]
Shape(Circle)#2345 vp Rect(0,0,25.3,25.3) n:Rect(0,0,24.3,24.3)
TextBlock(“Media Developer”) vp Rect(8.65,5.5,8,14.3) n:Rect(0,0,8,14.3)
Link#2347(Web to Media) cdgmhstABL vp Rect(NaN,NaN,NaN,NaN) elts:3 data:[object Object]
Shape(None)#2350 vp Rect(NaN,NaN,NaN,NaN)
Shape(Standard)#2351 vp Rect(NaN,NaN,NaN,NaN)
Panel(Panel.Auto)#2352 vp Rect(NaN,NaN,NaN,NaN) elts:2
Shape(None)#2354 vp Rect(NaN,NaN,NaN,NaN)
TextBlock(“Web to Media”) vp Rect(NaN,NaN,NaN,NaN) n:Rect(0,0,82,14.3)
Link#2356(Other to Web) cdgmhstABL vp Rect(NaN,NaN,NaN,NaN) elts:3 data:[object Object]
Shape(None)#2359 vp Rect(NaN,NaN,NaN,NaN)
Shape(Standard)#2360 vp Rect(NaN,NaN,NaN,NaN)
Panel(Panel.Auto)#2361 vp Rect(NaN,NaN,NaN,NaN) elts:2
Shape(None)#2363 vp Rect(NaN,NaN,NaN,NaN)
TextBlock(“Other to Web”) vp Rect(NaN,NaN,NaN,NaN) n:Rect(0,0,79,14.3)
Link#2365(Media to Other) cdgmhstABL vp Rect(NaN,NaN,NaN,NaN) elts:3 data:[object Object]
Shape(None)#2368 vp Rect(NaN,NaN,NaN,NaN)
Shape(Standard)#2369 vp Rect(NaN,NaN,NaN,NaN)
Panel(Panel.Auto)#2370 vp Rect(NaN,NaN,NaN,NaN) elts:2
Shape(None)#2372 vp Rect(NaN,NaN,NaN,NaN)
TextBlock(“Media to Other”) vp Rect(NaN,NaN,NaN,NaN) n:Rect(0,0,88,14.3)
Layer “Foreground”
Layer “Adornment”
Layer “Tool”
undefined

13

OK, I had no idea of what kind of layout that you were using, if any.

As it turns out, there is a bug in the ContinuousForceDirectedLayout that is provided in that sample, Interactive Force Directed Layout. When the model is replaced it was not clearing out the old ForceDirectedNetwork that that class reuses for performance reasons.

This code works better:

      this.diagram.addModelChangedListener(function (e) {
        // modelChanges include a few cases that we don't actually care about, such as
        // "nodeCategory" or "linkToPortId", but we'll go ahead and recreate the network anyway.
        // Also clear the network when replacing the model.
        if (e.modelChange !== "" ||
            (e.change === go.ChangedEvent.Transaction && e.propertyName === "StartingFirstTransaction")) {
          lay.network = null;
        }
      });

Sorry for the trouble. Thanks for reporting the problem with the sample.

14

That worked :-) Thanks for prompt fix Walter. Much appreciated.