Update Diagram when model is updated

GoJS
1

I’m working on feature where I can select 3 nodes and group them together when button is clicked.
Following is my dummy code -
private group = (e, b) => {
const node: go.Node = b.part.adornedPart;
const diagram: go.Diagram = node.diagram;
const model: go.Model = diagram.model;

    const selectedNode: go.Set<go.Part> = this.processDiagram.selection;

    if (selectedNode.count >= 3) {
      //    node.diagram.startTransaction("Grouping");
      let nodeToUpdate: go.Node;
      selectedNode.map(val => {
        nodeToUpdate = this.processDiagram.findNodeForKey(val.data.id);
        if (node.data.id !== val.data.id) {
          // val.data.group = node.data.id;
          nodeToUpdate.diagram.model.setDataProperty(
            val.data,
            "group",
            node.data.id
          );
          // this.processDiagram.findNodeForKey(val.data.id).setProperties( node.diagram.model)
        } else {
          nodeToUpdate.diagram.model.setDataProperty(val.data, "isGroup", true); //.isGroup = true;
          // this.processDiagram.findNodeForKey(node.data.id).setProperties( node.diagram.model)
        }
      });

      //   node.diagram.commitTransaction("Grouping");
      console.log(nodeToUpdate.diagram.model.nodeDataArray);
    }
  };

the node data is getting updated, I have even tried using transactions also not getting updated but when I debug nodedataArray has the correct grouping values but digaram is not updated

I’m using Angular 6 with TS and goJS

2

Is there a reason you cannot call CommandHandler.groupSelection ?

3

commandHandler.canGroupSelection() is returning false
Update:
I have add archetypeGroupData to make groupSelection command handler to work
.commandHandler.archetypeGroupData =
{ key: “Group”, isGroup: true, color: “blue” };