Problems with port & node creation

Hello,
I am trying to build a diagram having multiple inport, outport. The idea in abstract… after declaring gojs diagram, an empty model have been declared. Later I am adding node & link to the model from my local JS array. I think my makePort & makeTemplate function is working fine.

                    var $$ = go.GraphObject.make;
        			Diagram =
        		        $$(go.Diagram, "graph",
        		          {   		        	
        		            ....
        		          }
    					);
                self.nodeDataArray = [];
				self.linkDataArray = [];
  
var graph_model_data = ({class: 'go.GraphLinksModel', nodeCategoryProperty: 'type', linkFromPortIdProperty: 'frompid', linkToPortIdProperty: 'topid', nodeDataArray: self.nodeDataArray, linkDataArray: self.linkDataArray});
Diagram.model = go.Model.fromJson(JSON.stringify(graph_model_data));  

function makePort(name, leftside) {
   ....
}
function makeTemplate(typename, background, inports, outports) {
   ....
}

rels['nodeDataArray'].forEach(function(node) {
					type = node.type;
					name = node.name;
					
					switch(type) {
						case "Operator":
							color = 'CadetBlue';
							break;
						case "Data":
							color = 'SteelBlue';
							break;
						case "Service":
							color = 'Teal';
							break;
						case "Operator":
							color = 'CadetBlue';
							break;
						default:
							color = 'SteelBlue';
					}

					var listOfInputPorts  = [];
					var listOfOutputPorts = [];
					
					rels['linkDataArray'].forEach(function(link) {
						//input port definition
						if(node.key == link.to){
							var aNewInputPort = makePort(link.topid, true);
							listOfInputPorts.push(aNewInputPort);
						}
						//output port definition
						if(node.key == link.from){
							var aNewOutputPort = makePort(link.frompid, false);
							listOfOutputPorts.push(aNewOutputPort);
						}
					
						Diagram.startTransaction("add link");
						Diagram.model.addLinkData(link);
						Diagram.commitTransaction("add link");

						});   
                    makeTemplate(type, color,
							listOfInputPorts,
							listOfOutputPorts);
					
					Diagram.startTransaction("add node");
					Diagram.model.addNodeData(node);
					Diagram.commitTransaction("add node");
});

While I debugged, It seems nodes & ports are creating using same data from JS array. But, there is only one port in each node having same port_id while drawing the graph, even if the node suppose to have multiple port.


Am i messing with the model data?
Thanks in advance.

Probably. Could you please show me the result of JSON.stringify(Diagram.model.nodeDataArray[0]) and the result of JSON.stringify(Diagram.model.linkDataArray[0]) ?

nodeDataArray[0] = {"key":1347,"type":"Service","name":"Align"}
linkDataArray[0] = {"from":1355,"frompid":"1347","to":1347,"topid":"1355","value":"Input"}

FYI, This graph is using dynamic value for node & link. Below is the corresponding graph for above data.

I do not understand your data.
Your link data has “to” referring to the node data that you show, because the “key” matches.
But the “topid” values is “1355” which does not appear in that node data whose key is 1347.

In fact, the node data doesn’t appear to have any port identifiers at all. I suppose the particular ports could be defined in the node template, but that seems unlikely from what I can tell. Whatever the template is will be copied for each of the nodes created from the model data.

Actually when generating the data, back-end developer using same data for both node & port. I think, if several node data presents he is shuffling before assigning it as port id. So that port have unique ID within a node.

FYI, here is the complete nodeDataArray & linkDataArray.

nodeDataArray = [{"key":1355,"type":"Data","name":"/public/MiSeq_SOP/F3D0_S188_L001_R2_001.fastq"},{"key":1356,"type":"Service","name":"CheckQuality"},{"key":1358,"type":"Data","name":"/public/Chr1.cdna"},{"key":1375,"type":"Service","name":"Align"},{"key":1377,"type":"Service","name":"SamToBam"}]
linkDataArray = [{"from":1355,"frompid":"1356","to":1356,"topid":"1355","value":"Input"},{"from":1355,"frompid":"1375","to":1375,"topid":"1355","value":"Input"},{"from":1358,"frompid":"1375","to":1375,"topid":"1358","value":"Input"},{"from":1375,"frompid":"1377","to":1377,"topid":"1375","value":"Input"}]

Why bother having ports at all, either in the link data or the nodes? Just set the fromSpot to be go.Spot.RightSide and the toSpot to be go.Spot.LeftSide.
https://gojs.net/latest/intro/connectionPoints.html#ToSpotAndFromSpot

The point of having “ports” is so that they can be on nodes independent of any connected links. But you might not need them.

It’s part of the requirements. I am trying to achieve something like below.

Have you seen this sample? https://gojs.net/latest/samples/dataFlow.html

Also, if you want the model data to declare exactly which ports exist for each node: https://gojs.net/latest/samples/dynamicPorts.html

Yes. Actually, I was following that sample.

Can you give idea, for what problem it would generate same node having same ports/data for a specific type of node (even if it is creating different node from the model data every time) ?

Your node data does not include port description information for each node data object, which means you must have a limited number of node templates that have all been predefined in the app. Make sure that you do not create or modify any templates when creating or loading any model.