Load data from JSON

GoJS
1

Hi

Application use gojs version gojs-1.7.22 inside service now platform.
trying to load a JSON data into model. it is behaving very weird. when load a model from json all the groups are rendering but the nodes and links are not.

what will be the possible issue. is there any issue with version?

I am sharing some code snip.

	var defaultMap = $(go.Node, "Spot",{
				contextMenu : nodeMenu,
				locationSpot: go.Spot.Center,
				toolTip: tooltiptemplate,
				doubleClick: function(evt, node) { 
					openNodeForEdit(node.data);
				},
				resizable: false, 
				/*portId: "", fromLinkable: true, toLinkable: true, cursor: "pointer",
				fromSpot: go.Spot.AllSides , toSpot: go.Spot.AllSides,*/
				mouseEnter: function (e, obj) { showPorts(obj.part, true); },
				mouseLeave: function (e, obj) { showPorts(obj.part, false); }
			},
			$(go.Panel, "Spot",
				//{ width: 60, height: 100 },
				$(go.Shape, "RoundedRectangle",
                  { margin: 1,fill: null }),
				$(go.Panel, "Vertical",
					$(go.Picture, {
						alignment: go.Spot.Center, 
						width: 55, height: 70,
						margin: 1
					},
					new go.Binding("source"),
					new go.Binding("background","conceptual",nodeStyle)
					),
					$(go.Panel, "Spot",{
							alignment: go.Spot.BottomRight , alignmentFocus: go.Spot.BottomRight 
						},
						$(go.Shape, "Circle", {
							width: 25, height: 25, fill: "pink"
							
						}),
						$(go.TextBlock,{
							alignment: go.Spot.Center, 
							textAlign: "center", margin: 5, editable: false ,
							alignmentFocus: go.Spot.Center
						},
						new go.Binding("text","country_code")),
						new go.Binding("visible","country_code",function(code){ return (code != "");})
					)
				), 
				$(go.TextBlock,{
					alignment: go.Spot.Bottom, 
					textAlign: "center", margin: 5, editable: false ,
					alignmentFocus: go.Spot.BottomCenter,
					wrap: go.TextBlock.WrapFit
				},
				new go.Binding("text","text").makeTwoWay())
			),
			makePort("T", go.Spot.Top, false, true),
			makePort("L", go.Spot.Left, true, true),
			makePort("R", go.Spot.Right, true, true),
			makePort("B", go.Spot.Bottom, true, false)
		);
		
		flowTemplateMaps = new go.Map("string", go.Node);
		flowTemplateMaps.add("",defaultMap); // Default Node Map

this is the JSON

{
  "class": "go.GraphLinksModel",
  "nodeDataArray": [
    {
      "description": "Data Subject",
      "text": "Data Subject",
      "key": "fcbe9bad1b2e6410cea7ea8bbc4bcb01",
      "order": 100,
      "isGroup": true,
      "size": "300 700"
    },
    {
      "source": "2d39f3121b522810cea7ea8bbc4bcb60.iix",
      "text": "Data Subject",
      "key": -1,
      "group": "fcbe9bad1b2e6410cea7ea8bbc4bcb01"
    }
  ]
}

 mainFlowDiagram.model = go.Model.fromJson(dataJSON);

Thanks.

2

What has changed in the app since it was last working well?

The code and data look OK to me, but I am unable to try it.

3

Thanks for the quick response.

actually its a new project. with older version. 1.7.22

when we load node from palette it works fine. its not loading with nodeDataArray model assigning.

when try to console the model json. then node data is there. just rendering issue with nodes.

app is a simple swim lanes and BPMN combination.

4

I’ve taken the trouble to paste your code into a minimal app.
I then had to comment out the contextMenu, toolTip, doubleClick handler, and use of nodeStyle as a background binding conversion function.
I then had to add the definitions of makePort and showPorts which I copied from the Flow Chart sample of version 1.7.22.
And of course I don’t have any of your image files.
Everything worked well, as far as I can tell. That was using GoJS version 2.1.35.

I then changed the app to use GoJS library version 1.7.22.
Again, everything worked well.

It’s a bit odd to have the pink circle overlapping the text label at the bottom, but it was exactly the same in 1.7.22 as in 2.1.35.

Here’s my test page:

<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/gojs@1.7.22"></script>
  <script id="code">
  function init() {
    var $ = go.GraphObject.make;

    myDiagram =
      $(go.Diagram, "myDiagramDiv");

    myDiagram.nodeTemplate =
    $(go.Node, "Spot",{
				// contextMenu : nodeMenu,
				locationSpot: go.Spot.Center,
				// toolTip: tooltiptemplate,
				// doubleClick: function(evt, node) { 
				// 	openNodeForEdit(node.data);
				// },
				resizable: false, 
				/*portId: "", fromLinkable: true, toLinkable: true, cursor: "pointer",
				fromSpot: go.Spot.AllSides , toSpot: go.Spot.AllSides,*/
				mouseEnter: function (e, obj) { showPorts(obj.part, true); },
				mouseLeave: function (e, obj) { showPorts(obj.part, false); }
			},
			$(go.Panel, "Spot",
				//{ width: 60, height: 100 },
				$(go.Shape, "RoundedRectangle",
                  { margin: 1,fill: null }),
				$(go.Panel, "Vertical",
					$(go.Picture, {
						alignment: go.Spot.Center, 
						width: 55, height: 70,
						margin: 1
					},
					new go.Binding("source"),
					//new go.Binding("background","conceptual",nodeStyle)
          { background: "lightgreen" }
					),
					$(go.Panel, "Spot",{
							alignment: go.Spot.BottomRight , alignmentFocus: go.Spot.BottomRight 
						},
						$(go.Shape, "Circle", {
							width: 25, height: 25, fill: "pink"
							
						}),
						$(go.TextBlock,{
							alignment: go.Spot.Center, 
							textAlign: "center", margin: 5, editable: false ,
							alignmentFocus: go.Spot.Center
						},
						new go.Binding("text","country_code")),
						new go.Binding("visible","country_code",function(code){ return (code != "");})
					)
				), 
				$(go.TextBlock,{
					alignment: go.Spot.Bottom, 
					textAlign: "center", margin: 5, editable: false ,
					alignmentFocus: go.Spot.BottomCenter,
					wrap: go.TextBlock.WrapFit
				},
				new go.Binding("text","text").makeTwoWay())
			),
			makePort("T", go.Spot.Top, false, true),
			makePort("L", go.Spot.Left, true, true),
			makePort("R", go.Spot.Right, true, true),
			makePort("B", go.Spot.Bottom, true, false)
		);

    function makePort(name, spot, output, input) {
      // the port is basically just a small circle that has a white stroke when it is made visible
      return $(go.Shape, "Circle",
               {
                  fill: "transparent",
                  stroke: null,  // this is changed to "white" in the showPorts function
                  desiredSize: new go.Size(8, 8),
                  alignment: spot, alignmentFocus: spot,  // align the port on the main Shape
                  portId: name,  // declare this object to be a "port"
                  fromSpot: spot, toSpot: spot,  // declare where links may connect at this port
                  fromLinkable: output, toLinkable: input,  // declare whether the user may draw links to/from here
                  cursor: "pointer"  // show a different cursor to indicate potential link point
               });
    }

    function showPorts(node, show) {
      var diagram = node.diagram;
      if (!diagram || diagram.isReadOnly || !diagram.allowLink) return;
      node.ports.each(function(port) {
          port.stroke = (show ? "white" : null);
        });
    }

    myDiagram.model = go.Model.fromJson(`
{
  "class": "go.GraphLinksModel",
  "nodeDataArray": [
    {
      "description": "Data Subject",
      "text": "Data Subject",
      "key": "fcbe9bad1b2e6410cea7ea8bbc4bcb01",
      "order": 100,
      "isGroup": true,
      "size": "300 700"
    },
    {
      "source": "2d39f3121b522810cea7ea8bbc4bcb60.iix",
      "text": "Data Subject",
      "key": -1,
      "group": "fcbe9bad1b2e6410cea7ea8bbc4bcb01"
    }
  ]
}
    `);
  }
  </script>
</head>
<body onload="init()">
  <div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:600px"></div>
</body>
</html>
5

looks good.
then what can be caused for mine. is there any guess?
is there any code part which of rest of the code script you can daught?
even its a very weird for me to having this issue.

6

Maybe the Groups have Group.isSubGraphExpanded false – i.e. they are collapsed, causing all member Nodes and Links to become not visible.

7

groups are extended.

8

I suppose the Groups could be opaque and be in a layer that is in front of the default layer that the Nodes are in.

Or you have code that is modifying the nodes, either making them not visible, setting their opacity to zero, or moving them to a hidden layer, or doing other things like that. I cannot explain it otherwise.

9

whats your email i can share some code

10

GoJS at our domain, nwoods.com

11

Could you please try using go-debug.js (either old or new version) to see if there are any warnings or errors that are not detected with the go.js library?
It might be easiest to temporarily replace the go.js file with the go-debug.js file.