생활코딩 마인드맵 라이브러리 cytoscape 사용법

🚀 발단

생활코딩에 접속해서 수업 소개 섹션으로 가면 수업간의 관계를 확인할 수 있는 마인드 맵이 있습니다.

 

개인적으로 공부한 것들의 흐름을 위와 같이 정리하면 좋을 것 같았습니다.
그래서 해당 라이브러리가 cytoscape라는 것을 확인 후 이를 활용해 비슷한 사이트를 개발을 해봤습니다.

 

그러나 cytoscape 관련한 별도의 한글 정보가 없어 영어를 잘 못하는 저는 수많은 삽질의 시간을 거쳐야 했기에 다른 분들은 해당 라이브러리를 좀 더 편하게 쓰실 수 있도록 개발하면서 알게 된 것들을 한글기록으로 남깁니다. 도움이 되었으면 좋겠습니다!

 

🧵 초기 설정

툴은 Visual Studio Code 기준으로 설명드리고 NPM은 설치되어 있다고 가정하겠습니다.
먼저 필요한 패키지를 설치해야 합니다. 터미널을 열어서

 

npm init -y

 

로 초기화 한 후

 

npm install @babel/core @babel/preset-env @babel/preset-react babel-loader clean-webpack-plugin css-loader html-loader file-loader html-webpack-plugin mini-css-extract-plugin webpack webpack-cli webpack-dev-server cytoscape

 

를 입력해 필요한 패키지들을 설치해 줍니다. 그 다음엔

 

 

위와 같이 경로를 구성하고 파일을 생성합니다. 내용은 아래와 같습니다.

 

index.html

 

style.css

 

index.js

 

 

.babelrc

// .babelrc
{
    "presets": [
        "@babel/preset-env"
    ]
}

.gitignore

 

node_modules

 

package.json

 

webpack.config.js

 

위와 같이 설정해 준 다음

npm run start

위의 키워드를 입력한 후 http://localhost:9000/ 로 접속하면

 

 

위와 같은 화면이 출력되고, 이러면 이제 세팅은 끝났습니다.

🔥 cytoscape 활용법

🏹 데이터 구성

cytoscape를 활용하기 위해선 먼저 node와 edge를 구성해야 합니다.

 

먼저 거점이 되는 node는

 

"data": {
  "id": 'id',
  "url": '링크걸고 싶은 주소(옵션)'
  "label": '표시하고 싶은 내용(옵션)'
}

 

와 같은 형태로 구성해주면 되고 연결선인 edge는

 

"data": {
	"id": 'id',
    "source": '연결할 노드 중 하위에 둘 node id',
    "target":'연결할 노드 중 상위에 둘 node id'
}

형태로 입력하면 됩니다.

 

source에 하위에 둘 node를, target에 상위에 둘 node를 둬야 한다는 부분이 의아하실 테지만(저는 이게 어색했습니다) 그 이유는 잠시 후 'depth에 따라 node의 크기를 다르게' 챕터에서 확인하실 수 있습니다.

 

그 외에 주의할 점은 id에 공백과 .이 포함되면 안됩니다. 포함해도 당장 렌더링엔 문제가 없지만 포함되어 있으면 cytoscape가 제공하는 함수 중 id로 node를 검색하는 함수를 쓸 때 에러가 나니 포함하지 맙시다.

 

이 점을 주의해서 node와 edge를 구성한 후 배열로 cytoscape 함수 내부의 elements 부분에 입력해주면 됩니다. 제 필요에 따라 구성하고 입력한 소스는 아래와 같습니다.

 

그러나 위와 같이 입력하면

 

보다시피 화면이 seomal.org에서 보던 것과는 많이 다른 화면이 나옵니다. 차근 차근 쫓아가 봅시다.

👛 id가 아닌 라벨이 표시되게

 

먼저 node 위에 id가 아닌 우리가 입력한 라벨이 표시되도록 해봅시다. 방법은 간단합니다. index.js 하단 style 쪽에서 node의 style을 설정하는 부분을 보면 label이 data(id)로 되어 있는데 이걸 data(label)로 바꿔주면

 

 

id가 아닌 label이 node의 이름으로 나오는 걸 볼 수 있습니다.

 

🔀 edge styling

 

다음으로는 edge의 스타일링을 해보죠. 먼저 edge의 방향을 표시해봅시다. 이 설정은 style에서 edge의 style을 설정하는 부분의 값을 통해 제어할 수 있습니다.

 

먼저 세팅되어 있는 상태에서 'curve-style'의 값을 'bezier'로 주면 화살표가 등장합니다.

 

그런데 화살표 방향이 상위를 가르키고 있는게 뭔가 어색하죠? 고쳐봅시다.
target-arrow-shape와 target-arrow-color에서 source-arrow-shape와 source-arrow-color로요.
그렇게 해주면 화살표 방향이 바뀝니다.

 

 

마지막으로 화살표 모양도 바꿔봅시다. 화살표 모양은 여기서 확인 가능합니다.

 

전 vee가 마음에 들더군요. 적용하면

 

 

좀 더 날카로운 화살표 모양으로 잘 바뀌었습니다.

 

data 부분을 생략한 여기까지의 전체 코드는 아래와 같습니다.

 

📟 layout 설정

다음으로는 layout을 설정해서 ~쓸데없이~ 정렬되어 있는 형태를 좀 더 마인드맵스럽게 바꿔봅시다
layout의 형태들은 여기서 확인할 수 있습니다. 전 cose-bilkent가 마음에 드네요. 이걸 사용해보겠습니다.

 

먼저 설치를 해줘야합니다. 터미널을 하나 더 여시고

 

npm install cytoscape-cose-bilkent

 

을 입력해 해당 layout을 설치합니다. 이후엔 index.js 최상단으로 이동해서

 

 

위와 같이 cytoscape-cose-bilkent를 import 하고 사용하도록 선언한 후
node와 edge의 style관련 설정을 해줬던 부분 아래 있는 layout을 바꿔주면

 

 

마침내 마인드맵 같은 형태가 나타났습니다!

 

🧲 하이퍼 링크 연결

 

이제 node를 클릭하면 데이터 구성때 입력해준 url이 새창에서 열리게 설정해 줍시다.

cytoscape에는 on() 메소드를 이용해 이벤트를 부여할 수 있습니다.

 

 

tap을 인자로 줘서 클릭이벤트를 주고 해당 url이 새창으로 연결되게 설정해주면

 

 

클릭시 링크로 연결되는 이벤트가 잘 작동합니다.

 

🔊 depth에 따라 node의 크기를 다르게

 

이제 depth에 따라 node의 크기를 다르게 만들어 봅시다.
먼저 이걸 위해선 동일한 data를 elements로 갖는 cytoscape 객체가 하나 더 있어야 합니다.

data와 cy 사이에 크기 변경을 위한 코드를 추가하고, cy의style부분에 가서  width, height, font-size를 변경해주면

 

 

 

 

마침내 depth에 따라 크기가 차등 적용되는 부분까지도 구현이 끝났습니다.

 

위에서도 적었지만 만약 node id에 공백이나 . 이 들어가 있으면 이 부분에서 에러가 발생합니다.

 

target으로 depth가 깊을 수록 rank 값이 높게 적용되더군요.
위에서 source와 target을 거꾸로 적은 이유가 이 rank 값 만큼 node의 크기를 설정하기 위해서입니다

 

✨ 마우스 인 / 아웃시 하이라이트 적용 / 해제

 

이제 마우스 인 / 아웃시 하이라이트 적용 / 해제 기능을 구현해봅시다.
마우스 인/아웃 감지 둘 모두 클릭시 하이퍼링크 연결 기능 구현때 사용한 on 메소드를 사용합니다.

 

먼저 위와 같이 작성해 잘 감지하는지 확인해줍시다.
잘 작동한다면 다음은 node와 edge의 style을 바꿔줄 함수를 작성할 차례합니다.

 

먼저 사용할 색과 크기값들을 변수로 꺼냅시다. 색은 전 여기서 선택했습니다. 선택 node의 크기와 색, font 크기, edge & 화살표 크기와 색 등등을 설정해

 

위의 위치에 작성해줍니다. 값을 변수로 빼냈으니 하드코딩 되어 있던 style 값도 변경을 해줘야겠죠

 

 

위와 같이 바꿨으면 이제 총 네개의 함수를 만들어야 합니다. 각각의 이름과 역할은 아래와 같습니다.

• setDimStyle(target_cy, style)
  모든 node와 edge를 연하게 만드는 역할을 합니다.
• setFocus(target_element, successorColor, predecessorsColor, edgeWidth, arrowScale)
  선택한 node 와 edge, 그리고 상하위 node와 edge를 크기와 색으로 구분하는 역할을 합니다.
• setOpacityElement(target_element, degree)
  opacity를 활용해 바로 이웃한 연관관계와 그렇지 않은 연관 관계를 구분하는 역할을 합니다.
• setResetFocus(target_cy)
  node를 선택하기 전의 상태로 되돌리는 역할을 합니다.

함수의 상세 코드는 아래와 같습니다

 

이처럼 작성해주시고, 함수를 만들었으니 사용해야겠죠. 아까 만들어 둔 mouse in과 out을 감지하는 부분에

 

위와 같이 함수를 세팅해줍니다. 그러면

 

 

인 아웃 이벤트가 잘 작동합니다!

 

🌌 브라우저 크기 변경시 cytoscape 크기 조정

 

이제 브라우저 크기 변경시 cytoscape의 크기가 자동으로 조정되게 해봅시다. seomal.org의 경우

 

 

위와 같이 브라우저의 크기가 변경되는 경우 cytoscape의 크기가 자동으로 변하지만

 

 

우린 개발자 도구를 열어도 아무 변화가 없습니다. 이 기능을 추가해봅시다. 적용은 간단합니다.

 

위와 같은 코드를 추가해주면

 

 

브라우저 크기 변경시 cytoscape 크기가 자동으로 잘 변경됩니다!

 

위 코드에서 clearTimout과 setTimout 부분을 제외하면 resize 감지는 되는데 cy.fit() 실행은 안되더군요. 일단 여기를 참고해 해결은 했는데 이렇게 작동하는 자세한 이유를 아는 분 혹시 계시면 댓글 부탁드립니다!

 

💫 data 추출 

 

기능은 다 구현했으니 이제 마지막으로 파일을 정리하기 위해 data를 별도의 json 파일로 추출해봅시다.

 

 

위와 같이 model 폴더 하위에 data.json 파일을 만들고

그 다음은 webpack.config.js 파일로 가서 module - rules에

 

 

위처럼 json 관련 설정을 추가해줍니다. 이후엔 index.js 에서 data 변수로 받던 

 

const data = [...];

 

[ ] 을 포함하여 그 안에 있던 모든 데이터들을 복사해서 model - data.json에 붙여넣기 해줍니다.

 

이후엔 index.js 상단에 data.json 경로를 임포트 해주고 import 부분을 제외한 기존 코드를 data.json fetch 함수 안으로 집어넣으면

 

 

 

 

 

화면이 잘 나옵니다! 이후엔 gh pages나 netlify를 활용해 배포 후 사용하시면 됩니다!

👏 마치며

해당 프로젝트의 진행 과정은 github project에 정리해뒀고 소스코드는 repository에 올려뒀으니
설명이 부족했던 부분은 이 두 곳을 참고해주시고 질문은 댓글에 남겨주세요!

 

모쪼록 도움이 되었으면 좋겠습니다!