Adding links of different templates dynamically

My diagram lets the user to draw different types of links dynamically.

Here is my code :

myDiagram.addDiagramListener("LinkDrawn", function(e) {
  var link = e.subject;
   var popUpList = $('<div>Please select the type of link</div>');
   popUpList.dialog({
           autoOpen: false, 
           buttons: {
              "Type1": function() {addLinkLabel(link,"type1");$(this).dialog("close");},
               "Type2": function(){addLinkLabel(link,"type2");$(this).dialog("close");}
           },   
       });
    
    popUpList.dialog("open")    
});

function addLinkLabel(link,type){
    
    var label = prompt("Enter label text. Leave it blank for no label", "");
    
    myDiagram.startTransaction("add link data");
    myDiagram.model.setDataProperty(link.data, "category", type);
    if(label!=""){ 
        myDiagram.model.setDataProperty(link.data,"textVisible",true);
        myDiagram.model.setDataProperty(link.data,"text",label);
    }
    console.log(link.data.category)
    myDiagram.commitTransaction("add link data");
}`

My default linktemplate sets the link visible property to false. I think category property is not changing here.

As you can see, the linkdrawn event handler will show a pop up to select the type of link here.
It will then set the dataproperty of the model.

On selecting a particular type, nothing is displayed. But the log in the console is showing the link object which was just created.

Categories are special, you need to call setCategoryForLinkData instead of setDataProperty

http://gojs.net/latest/api/symbols/GraphLinksModel.html#setCategoryForLinkData