Toggle between Slinks in balkangraph OrgChart

Question

I am trying to build a OrgChart from balkangraph framework (https://balkan.app/). In this we have nodelinks and slinks. I am trying to toggle between nodelinks and slinks.

I have 3 different templates for slinks like below myorange, yellow, arrows

  OrgChart.slinkTemplates.myorange = Object.assign({}, OrgChart.slinkTemplates.orange);
    OrgChart.slinkTemplates.myorange.defs = '';
    OrgChart.slinkTemplates.myorange.link = '<path stroke-dasharray="4, 2" stroke="grey" stroke-width="1" fill="none" d="{d}" />';
    
    OrgChart.slinkTemplates.arrows = Object.assign({}, OrgChart.slinkTemplates.orange);
    OrgChart.slinkTemplates.arrows.defs = 
        '<marker id="arrowStartSlinkOrange" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="5" markerHeight="5" orient="auto-start-reverse"><path fill="#F57C00" d="M 0 0 L 10 5 L 0 10 z" /></marker>'
    
    + '<marker id="arrowEndSlinkOrange" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="5" markerHeight="5" orient="auto-start-reverse"> <path fill="#F57C00" d="M 0 0 L 10 5 L 0 10 z" /></marker>';
    
    OrgChart.slinkTemplates.arrows.link = '<path stroke-dasharray="4, 2" marker-start="url(#arrowEndSlinkOrange)" marker-end="url(#arrowStartSlinkOrange)" stroke-linejoin="round" stroke="#F57C00" stroke-width="2" fill="none" d="{d}" />';

I have a toggle button on which i am hiding the slinks templates and the links.

The issue here is if i am having one single template, i am able to toggle. But with 3 different slinks templates, i am unable to do it.

If anyone has worked on balkanGraph OrgChart JS, please suggest how to toggle

Below is the toggle code

document.querySelector('#btn').addEventListener('click', function(){

    if (chart.config.template == "ana") {
      chart.config.template = "hiddenLinks";
      for (i = 0; i < chart.config.slinks.length; i++){
        chart.config.slinks[i].template = "orange";
      }
      chart.draw();
    }
    else {
      chart.config.template = "ana";
      for (i = 0; i < chart.config.slinks.length; i++){
        chart.config.slinks[i].template = "hiddenSlinks";
      }
      chart.draw();
    }
  });

The entire code looks like this. In this while toggling all three slinks are becoming orange. So i want while toggling , i can maintain the templates

OrgChart.templates.hiddenLinks = Object.assign({}, OrgChart.templates.ana);
  OrgChart.templates.hiddenLinks.link = '';

  OrgChart.slinkTemplates.hiddenSlinks = Object.assign({}, OrgChart.slinkTemplates.orange);
  OrgChart.slinkTemplates.hiddenSlinks.link = '';
  
  //centering the slinks:
  
  OrgChart.templates.hiddenLinks.expandCollapseSize = 0;
  OrgChart.templates.hiddenLinks.plus = '<circle cx="0" cy="0" r="15" fill="#ffffff" stroke="#aeaeae" stroke-width="1"></circle>'
    + '<line x1="-11" y1="0" x2="11" y2="0" stroke-width="1" stroke="#aeaeae"></line>'
    + '<line x1="" y1="-11" x2="" y2="11" stroke-width="1" stroke="#aeaeae"></line>';
  OrgChart.templates.hiddenLinks.minus = '<circle cx="0" cy="0" r="15" fill="#ffffff" stroke="#aeaeae" stroke-width="1"></circle>'
    + '<line x1="-11" y1="0" x2="11" y2="0" stroke-width="1" stroke="#aeaeae"></line>';
    
    
  OrgChart.slinkTemplates.myorange = Object.assign({}, OrgChart.slinkTemplates.orange);
    OrgChart.slinkTemplates.myorange.defs = '';
    OrgChart.slinkTemplates.myorange.link = '<path stroke-dasharray="4, 2" stroke="grey" stroke-width="1" fill="none" d="{d}" />';
    
    OrgChart.slinkTemplates.arrows = Object.assign({}, OrgChart.slinkTemplates.orange);
    OrgChart.slinkTemplates.arrows.defs = 
        '<marker id="arrowStartSlinkOrange" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="5" markerHeight="5" orient="auto-start-reverse"><path fill="#F57C00" d="M 0 0 L 10 5 L 0 10 z" /></marker>'
    
    + '<marker id="arrowEndSlinkOrange" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="5" markerHeight="5" orient="auto-start-reverse"> <path fill="#F57C00" d="M 0 0 L 10 5 L 0 10 z" /></marker>';
    
    OrgChart.slinkTemplates.arrows.link = '<path stroke-dasharray="4, 2" marker-start="url(#arrowEndSlinkOrange)" marker-end="url(#arrowStartSlinkOrange)" stroke-linejoin="round" stroke="#F57C00" stroke-width="2" fill="none" d="{d}" />';

  var chart = new OrgChart(document.getElementById("tree"), { 
      nodeBinding: {
          field_0: "id",
          field_1: "pid"
      },
      slinks: [
          {from: 7, to: 1, template: "myorange" }, 
          {from: 5, to: 0, template: "arrows"  },
          {from: 2, to: 6, template: "yellow"  },
      ]
  });

  chart.load([
      { id: 0},
      { id: 1, pid: 0 },
      { id: 2, pid: 0 },
      { id: 3, pid: 1 },
      { id: 4, pid: 2 },
      { id: 5, pid: 1 },
      { id: 6, pid: 2 },
      { id: 7, pid: 5 }
  ]);

  document.querySelector('#btn').addEventListener('click', function(){

    if (chart.config.template == "ana") {
      chart.config.template = "hiddenLinks";
      for (i = 0; i < chart.config.slinks.length; i++){
        chart.config.slinks[i].template = "orange";
      }
      chart.draw();
    }
    else {
      chart.config.template = "ana";
      for (i = 0; i < chart.config.slinks.length; i++){
        chart.config.slinks[i].template = "hiddenSlinks";
      }
      chart.draw();
    }
  });