document.addEventListener("DOMContentLoaded", function() {
  var cy = (window.cy = cytoscape({
    container: document.getElementById("cy"),
    style: [{
        selector: "node",
        style: {
          content: "data(id)"
        }
      },
      {
        selector: "edge",
        style: {
          "curve-style": "bezier",
          "target-arrow-shape": "triangle",
          "visibility": "hidden", 
          "line-color": "#61bffc",
        }
      },
      {
        selector: "edge.visible",
        style: {
          "visibility": "visible",
        }
      }
    ],
    elements: {
      nodes: [{
        data: {
          id: "a"
        }
      }, {
        data: {
          id: "b"
        }
      }, {
        data: {
          id: "c"
        }
      }],
      edges: [{
        data: {
          id: "ab",
          source: "a",
          target: "b"
        }
      }, {
        data: {
          id: "bc",
          source: "b",
          target: "c"
        }
      }]
    },
    layout: {
      name: "grid"
    }
  }));

  cy.on("click", "node", function(event) {
    let connectedEdges = event.target.connectedEdges();
    connectedEdges.toggleClass("visible");
  });
});