Refresh or reload entire diagram after certan operation

GoJS
1

is there a simple way to refresh or reload entire diagram after certain changes

so far i have tried
diagram.updateAllRelationshipsFromData();
diagram.updateAllTargetBindings();

2

It’s hard to answer such a question when there is no information about what all those “certain operations” are.

I highly recommend reading about models, starting at GoJS Using Models -- Northwoods Software

3

i have this delete operation , node delete which is also having a call to function that changes color :

confirmDeleteObject(e , button) {
    const dialogConfig: MatDialogConfig = {
      width: '40vw',
      data: {
        message: (button.name === 'link') ? 'Are you sure you want to delete this link?' : 'Are you sure you want to delete this node?',
      },
    };

    const dialogRef = this.dialog.open(ConfirmationDialogComponent, dialogConfig);
    dialogRef.afterClosed().subscribe((result) => {
      if (result) {

        // aryan remove color code
        const diagramData = this.journeyService.getDiagramData();
        const ui_json = this.getUiJson(diagramData);
        const data = ui_json['diagram']["nodeDataArray"];
        const trigger_node_id = data.find(x => x.type == "trigger").nodeId;
        const nodes  =  data;
        const links = ui_json['diagram']["linkDataArray"];
        const nodeArr = nodes.map(a => a.nodeId);
        const changeColorFor = this.nodeValidate(nodeArr, links, trigger_node_id);
        console.log(changeColorFor);
        if (changeColorFor && changeColorFor.hasOwnProperty("brokenNodes")){
        const broken = changeColorFor.brokenNodes;
        this.changeColorToNormal(broken,trigger_node_id);  
        }
        if (changeColorFor && changeColorFor.hasOwnProperty("loop")){
        let loop = changeColorFor.loop;
        loop = loop.filter(item => +item !== +button.part.data.nodeId);     
        this.changeColorToNormal(loop,trigger_node_id);
        }
        console.log("button",button.part.data);
        // ends here
        this.removeObjectButton(button);
        diagram.layout.invalidateLayout();
        diagram.updateAllRelationshipsFromData(); 
        diagram.updateAllTargetBindings();
        diagram.requestUpdate();

        

      }
    });

function change changeColorToNormal:


/////

  changeColorToNormal(nodeKeys,trigger_node_id){
      const allNodes = [];
      // const nodeKeys = Object.keys(nodes);
      console.log("reaching in change color fx");
      for(var i= 0;i< nodeKeys.length; i++){
          console.log("inside loop",nodeKeys[i]);
          if(+nodeKeys[i]!=trigger_node_id){
          const node = diagram.findNodeForKey(nodeKeys[i]);
          allNodes.push(node);
          console.log("jjjjjjjjjjjj",node.part.data);
          if (node.part.data.type=='actions'){
          node.data.stroke = '#BE52F2';
          }
          else if (node.part.data.type=='conditions'){
            node.data.stroke = '#00C48C';
          }
          else if (node.part.data.type=='flowControls'){
            node.data.stroke = '#FFCA4C';
          }
        }
      }
    diagram.startTransaction("highlight");
    diagram.highlightCollection(allNodes);
    diagram.commitTransaction("highlight");
    diagram.updateAllRelationshipsFromData(); 
    diagram.updateAllTargetBindings();
    diagram.requestUpdate();
    }

i just want color changes to appear as soon as the deleted node disappears
but i have to perfom an action or click on node and save it to realize the color changes .

4

When the user clicks the button to do something, you should call startTransaction, make all of the changes, and then call commitTransaction. There should be no need for calling any “…update…” methods.

Whenever you want to make changes, call a Model method. Do not just set some JavaScript Object property or modify some JavaScript Array – call Model.set or Model.addArrayItem or Model.removeArrayItem.