6. 노드 삭제 및 간선 추가 기능 개선

이전 미팅 피드백

---

이전 미팅에서 받은 피드백을 바탕으로 기능 개선

• 노드 삭제시 이웃 노드도 함께 삭제할 것인지 여부 선택 가능
• 서로 다른 클러스터간 간선 추가시 색상 변경
• Union-Find 알고리즘 성능 개선

 

피드백 반영

1. 이웃 노드 삭제 여부 결정

특정 노드 삭제시 해당 노드와 이웃한 노드를 함께 삭제할지 선택 가능하도록 개선

const handleSubmit = useCallback(() => {
    if (filter === "") {
      return;
    }

    setRerender(false);

    setGraphData((prev) => {
      let filteredNodes = prev.nodes;
      let filteredEdges = prev.edges;

      if (deleteNeighbor) {
        filteredEdges = prev.edges.filter(
          (edge) => !edge.data.filter?.includes(filter)
        );
        // 이웃과 함께 삭제
        filteredNodes = prev.nodes.filter((node) =>
          filteredEdges.some(
            (edge) =>
              edge.data.source === node.data.id ||
              edge.data.target === node.data.id
          )
        );
      } else {
        // 이웃한 노드는 삭제하지 않음
        filteredNodes = prev.nodes.filter((node) => node.data.id !== filter);
      }

      return {
        nodes: filteredNodes,
        edges: filteredEdges,
      };
    });

    setFilter("");
  }, [filter, setGraphData, deleteNeighbor]);

• deleteNeighbor이라는 상태값을 두어서 사용자가 어떠한 옵션을 선택했는지 구분
  • 이웃과 함께 삭제할 경우에는 간선을 통해 이웃의 정보를 찾아서 함께 삭제
  • 이웃은 삭제하지 않을 경우, filter 값에 걸리는 노드만 삭제

 

노드 삭제 옵션

 

2. 간선 추가시 클러스터 색상 변경

지난번에는 간선이 추가되어 클러스터가 결합되어도 클러스터의 색상이 통일되지 않았었다

   useEffect(() => {
    if (myCyRef) {
      graphData.nodes.forEach((node) => {
        myCyRef.getElementById(node?.data?.id ?? strings.empty).style({
          "background-color": node?.data?.color,
        });
      });
      myCyRef?.style(styleSheet).update();
    }
  }, [layout, graphData]);

• 간선이 추가되면 다시 노드들을 돌면서 클러스터를 찾아 색상을 지정해주었다
• 그리고 지정된 색상을 바탕으로 style() 메서드를 통해서 색상 값을 변경해주었다
• 이전에는 직접 style을 변경을 하지 않았기 때문에 색상이 바뀌지 않았었다

간선 추가

 

3. Union-Find 성능 개선

지난번에 결합된 클러스터를 탐지하기 위해 Union-Find를 다시 돌아야 하는 것에 대해 질문을 드렸었다

• Map<String, List>와 같은 자료구조를 사용해서, 각 클러스터에 대한 정보를 저장하려고 했다
• 문제는 Cytoscape의 Node를 통째로 List에 넣기엔 무리가 있었다.
• 그렇다고 ID 값만 String으로 저장을 하려고 하면, 렌더링을 하기 위해서는 다시 Node로 변경을 해주어야 했다.
• 이런 과정을 거칠만큼 렌더링 속도가 느리지 않아서, 일단은 그대로 진행하기로 했다.

 

새롭게 구현한 기능

---

필요하다고 느낀 기능을 새롭게 구현

 

1. 노드 검색

노드의 수가 많아졌을 때, 특정 노드의 위치를 찾는 것이 어려워서 검색 기능을 도입했다

  useEffect(() => {
    if (!myCyRef) return;
    const elements = myCyRef.elements(`node[label = "${searchNode}"]`);
    if (elements && elements.length > 0) {
      myCyRef?.animate({
        fit: {
          eles: elements,
          padding: 20,
        },
      });
      myCyRef?.center(elements);
    }
  }, [searchNode]);

• 검색어에 따라서 해당 검색어와 일치하는 ID를 가진 노드를 확대해서 보여줄 수 있도록 했다.

 

노드 검색

 

피드백

---

이번에 구현한 기능들에 대한 피드백을 받았다

• 검색 기능은 좋지만, 네트워크 내에서 어디에 위치하는지를 알고 싶은 경우가 많을 것이기 때문에 확대 보다는 해당 노드를 깜빡이게 하는 등의 이펙트가 더 좋아 보인다
  • 이유를 듣고 바로 납득했던 피드백이었다
• 특정 노드를 클릭했을 때, 해당 노드에 대한 정보를 어딘가에 띄워줄 수 있으면 좋겠다

 

추후 계획

---

다음번에는 어떤 기능들을 구현할지 논의

• 먼저 피드백을 바탕으로 새롭게 구현한 기능들을 개선할 예정
• 원격으로 접속하기 전에 연구실에 방문해서 서버 컴퓨터에 기본적인 세팅을 할 예정