// Cytoscape.js 그래프 생성
var cy = cytoscape({
  container: document.getElementById('cy'), // 그래프를 표시할 HTML 요소 선택
  /* 그래프 구조 및 스타일 설정 */
  elements: {
    nodes: [
      { data: { id: 'node1' } },
      { data: { id: 'node2' } },
      { data: { id: 'node3' } }
    ],
    edges: [
      { data: { source: 'node1', target: 'node2' } },
      { data: { source: 'node2', target: 'node3' } }
    ]
  },
  style: [
    {
      selector: 'node',
      style: { 'background-color': 'blue' }
    },
    {
      selector: 'edge',
      style: { 'width': 3, 'line-color': 'black' }
    }
  ]
});

// 그래프의 일부를 선택하는 이벤트 핸들러
cy.on('mousedown', function(event) {
  var target = event.target;
  if (target.isNode()) {
    target.addClass('selected');
  }
});

// 선택된 노드와 연결된 엣지를 강조 표시하는 이벤트 핸들러
cy.on('tap', 'node:selected', function(event) {
  var selectedNode = event.target;
  cy.edges().removeClass('highlight'); // 모든 엣지의 강조 효과 제거

  // 선택된 노드와 연결된 엣지를 찾아서 표시
  selectedNode.connectedEdges().addClass('highlight');
});