article thumbnail image
Published 2022. 10. 6. 15:10

[유전자분석] IGV 라이브러리 사용하기

개발/기타
반응형

지난 번에 유전자 분석을 위한 bam 파일에 대해 공부했었다.(자세한건 아래 링크참고)

 

유전자 분석을 위한 bam 파일

프로젝트에서 유전자 분석을 위한 IGV(Integrative Genomics Viewer) 사용을 해봤다. IGV란 유전체 데이터셋을 시각화 해주는 그래픽 기반 프로그램으로 오픈소스이다. igv 사이트에 들어가면 자바스크립

flowlog.tistory.com

 

여기서 유전자를 분석하기 위해 IGV(Integrative Genomics Viewer) 툴을 잠시 보았는데,

자바스크립트로 IGV 라이브러리를 활용해보았다.

 

간단히 부트스트랩 css를 적용하였고, 멀티분석을 위한 track을 추가하는 기능까지 넣어보았다.

테스트를 위한 bam 파일은 url 방식으로 호출한다.

 

기능구현

먼저 페이지를 열어보면 아래와 같은 화면이 뜨도록 구현하였다.

GENOME 은 분석 기초데이터, locus는 분석 후 그래프의 이동할 위치정보를 넣어주면된다.

페이지 로드

아래 track 추가하기 버튼을 추가하여 track을 추가할 수 있다.

track 추가하기

분석하기 버튼을 누르면 tracks 에 입력된 데이터를 class 기준으로 불러와 데이터를 가공하여

igv-div 라는 div id 안에 그래프를 그려준다.

유전자 분석 그래프 IGV

 

소스코드

필자가 작성한 소스코드이다.

<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- 부트스트랩 -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi"
      crossorigin="anonymous"
    />
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3"
      crossorigin="anonymous"
    ></script>
    <title>IGV 유전자 분석 테스트 - joon95</title>
    <!-- igv 라이브러리 -->
    <script src="https://cdn.jsdelivr.net/npm/igv@2.13.3/dist/igv.min.js"></script>
    <script>
      function load_tracks() {
        var tracksNames = document.getElementsByName("in_name");
        var tracksUrls = document.getElementsByName("in_url");
        var tracksIndexUrls = document.getElementsByName("in_indexURL");
        var tracksFormats = document.getElementsByName("in_format");
        var res = [];
        var obj = {};
        for (var i = 0; i < tracksNames.length; i++) {
          obj = {
            name: tracksNames[i].value,
            url: tracksUrls[i].value,
            indexURL: tracksIndexUrls[i].value,
            format: tracksFormats[i].value,
          };
          res.push(obj);
        }
        return res;
      }
      function add_track() {
        var content =
          "<div class='col-sm-3 mb-3'>" +
          "<div><span class='input-group-text'>tracks</span>" +
          "<ul class='list-group'>" +
          "<li class='list-group-item'>Name :<input type='text'id='in_name'name='in_name'value=''class='form-control'/></li>" +
          "<li class='list-group-item'>url :<input class='form-control'type='text'id='in_url'name='in_url'value=''/></li>" +
          "<li class='list-group-item'>indexURL :<input class='form-control'type='text'id='in_indexURL'name='in_indexURL'value=''/></li>" +
          "<li class='list-group-item'>Format :<input type='text'id='in_format'name='in_format'value=''class='form-control'/></li>" +
          "</ul></div></div>";
        var trackAria = document.getElementById("tracks");
        trackAria.insertAdjacentHTML("beforeend", content);
      }
      function igv_start() {
        var igvDiv = document.getElementById("igv-div");
        // input value
        var IGVgenome = document.getElementById("in_genome").value;
        var IGVlocus = document.getElementById("in_locus").value;

        var tracks_content = load_tracks();
        var options = {
          genome: IGVgenome,
          locus: IGVlocus,
          tracks: tracks_content,
        };
        igv.createBrowser(igvDiv, options).then(function (browser) {
          console.log("Created IGV browser");
        });
      }
    </script>
  </head>
  <body style="margin: 25px">
    <figure class="text-center">
      <blockquote class="blockquote">
        <p>유전자 분석 IGV 라이브러리 테스트</p>
      </blockquote>
      <figcaption class="blockquote-footer">
        joon95.tistory.com <cite title="Source Title">joon95</cite>
      </figcaption>
    </figure>
    <form>
      <div class="input-group mb-3">
        <span class="input-group-text">GENOME</span>
        <input
          type="text"
          id="in_genome"
          name="in_genome"
          class="form-control"
        />
      </div>
      <div class="input-group mb-3">
        <span class="input-group-text">locus</span>
        <input
          type="text"
          id="in_locus"
          name="in_locus"
          class="form-control"
        />
      </div>
      <div class="row" id="tracks"></div>
      <div class="input-group mb-3">
        <input
          type="button"
          class="btn btn-primary"
          value="분석하기"
          onclick="igv_start();"
        />
        <input
          type="button"
          class="btn btn-Secondary"
          value="track 추가하기"
          onclick="add_track();"
        />
      </div>
    </form>
    <!-- 그래프 영역 -->
    <div id="igv-div"></div>
  </body>
</html>

함수는 igv_start(), add_track(), load_tracks() 총 3개로 구성하여

각각 IGV라이브러리 호출, 트랙 추가, 트랙데이터를 가공하는 기능을 구현하였다.

 

 

파일 호스팅 서버

테스트 데이터는 amazon s3 버킷에 업로드된 파일을 불러온다.

필자는 nginx를 올려 내 pc의 파일을 호스팅해 가져오게 하고 싶다.

이 부분에서 자꾸 에러가 떠서 보았는데, CORS 에러가 뜨고있었다.!!!

proxy에 CORS 설정을 해주자.

 

간단히 /igv 경로로 들어올 경우 해당 경로의 파일을 보여주도록 함.

 

nginx 설정

server {
    listen       80;
    server_name localhost;
    location /igv {
        alias C:\openresty-1.21.4.1-win64\html\igv;
        autoindex on;
        add_header 'Access-Control-Allow-Origin' '*';
    }
 }

 

nginx 를 기동하고 파일을 경로에 업로드하면 아래와 같이 확인할 수 있다.

nginx 파일 호스팅

이제 위에서만든 소스코드로 파일을 불러와보자.

igv 데이터 입력
igv 데이터 분석

이렇게 파일을 잘 불러올 수 있었다.

 

추가로 클라우드에서 Cors 설정을 어떻게 하는지 확인해보자

Azure storageaccount

Azure 도 stroage account explorer 프로그램에서 지정가능하고, 

REST API, AzureCli 등 많은 방식이 존재한다.

 

필자는 Azure CLI를 통해 진행하였다.

$ az login
$ accountName=서비스어카운트네임
$ accountKey=서비스어카운트키

# cors 추가
$ az storage cors add '
	--methods GET '
	--origins * '
	--services f '
	--allowed-headers * '
	--account-name accountName '
	--account-key accountKey

# cors 목록
$ az storage cors list `
	--services f `
	--account-name accountName '
	--account-key accountKey

# cors 전체삭제
$ az storage cors clear `
	--services f `
	--account-name accountName '
	--account-key accountKey

참고로 --services 는 4개이다.

b : Blob

f : File

q : Queue

t : Table

 

AWS s3

아마존에서는 S3 버킷에 들어간다.

상단 탭바 중 '권한' 에 들어간다.

맨 밑으로 스크롤 한뒤 CORS 항목에서 [편집] 버튼을 클릭한다.

json 형식으로 설정을 기입한다.(소스 아래 첨부)

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "HEAD",
            "GET",
            "PUT",
            "POST",
            "DELETE"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": [
            "ETag",
            "x-amz-meta-custom-header"
        ]
    }
]

이것으로 해당 버킷의 CORS 설정이 끝났다.

 

NCP object storage

ncp 의 오브젝트스토리지는 aws의 s3와 동일하다고 한다.

그래서 awscli 를 설치해서 설정하는 것도 가능하다.

 

오늘은 S3 Browser 라는 프로그램을 이용하여 등록해보자.(다운로드링크)

https://s3browser.com/download.aspx

 

프로그램을 실행하면 접속할 서버를 지정하는데,

Account type은 S3 Compatible Storage 로 하고

네이버 클라우드의 API key를 입력해야한다.

그리고 Rest Endpoint 는 kr.object.ncloudstorage.com 를 입력.

정상적으로 등록되었다면 생성한 버킷들이 보인다.

 

이제 cors 설정을 등록해보자

상단메뉴 Buckets>CORS Configuration... 클릭

S3 Browser 에서 CORS 설정 메뉴

AWS CORS 적용시 사용했던 json 을 그대로 넣었더니 json은 안된다고 떴다.

그래서 XML 포맷을 작성하여 넣었다.

 

CORS XML 설정

이렇게 해서 NCP 쪽 오브젝트스토리지도 cors 설정이 되었다.

 

마치며.

오랜만에 자바스크립트를 썼는데, 간단히 놀기는 편했다.ㅋㅋ

하다가 잘 안되던건 DOM에 태그를 삽입할 경우 .insertAdjacentHTML 태그를 써야하는것과

자바스크립트에서 사전식 데이터 형태를 컨트롤하는게 익숙하지 않아 헷갈렸다.

 

오랜만에 코딩한거 치곤 나는 만족하나.. 또 다른 생각이 있다면 댓글 부탁드립니다.

반응형

'개발 > 기타' 카테고리의 다른 글

Golang Test Standard  (1) 2024.10.10
[GIT] 불필요한 파일 업로드 제한하기  (0) 2022.10.13
[Eclipse] Lombok 적용하기  (0) 2022.10.07
복사했습니다!

티스토리툴바