Web Trace Viewer #
Find similar titles

2016-04-28 07:37:52 (rev. 3)
wpark-intern@insilicogen.com
Edit

Structured data

Category: Software

Web Trace Viewer

Web Trace Viewer #

서열 시퀀싱 #

각종 정보화 시스템을 구축함에 간혹 시퀀싱 장비로부터 생산된 데이터를 저장해야 할 경우가 생긴다. 생물정보 데이터베이스 구축의 경우에 단편 서열과 같은 유전정보를 저장하고 이를 참조테이터로 활용하기 위함이다.

나고야 의정서(ABS)과 데이터 원본 관리 #

최근에는 나고야의정서에 따라 국가 유전자원 보호를 위해 유전자원의 서열 원본 정보를 관리해야만 한다. (참조)나고야 의정서(ABS) 주요 내용

유전자원 접근시 사전통보승인(PIC, Prior Informed Consent) 필요
유전자원 접근과 이익 공유에 대해 유전자원 제공자와 이용자 간에 상호합의조건(MAT, Mutually Agreed Terms) 체결이 필요
생물유전자원과 관련 전통지식까지 ABS에 포함

이에 데이터를 저장/관리해야 하는데 이 경우 서열 데이터와 함께 원본 데이터인 ABI 파일도 저장할 필요가 있다. 즉, ABI 3730과 같은 장비에서 생산된 서열 데이터를 가공하고 이 결과를 DB화하여 저장하고 사용자 인터페이스를 통해 이러한 정보를 사용자에게 제공한다.

Web trace viewer #

이에 정보시스템에서는 이러한 ABI 파일을 웹으로 제공할 필요가 있다. PC상에서 이러한 데이터를 보는 툴은 많이 있지만 웹 상에서 제공하는 툴은 많지 않다.

그 중 Web-based trace/chromatogram viewer는 웹상에서 간략하나마 정보를 확인할 수 있는 툴 중의 하나이다.

이는 웹 기반의 trace/chromatogram viewer이며 DNA Subway (http://dnasubway.org/)의 "blue line"에서 개발되었으며 단순히 AB1/ABI trace 파일만 지원한다.

지원하는 브라우저는 다음과 같다.

Firefox 3.5+,
Safari 4+,
Chrome, 4+,
IE9+

설치 및 실행 방법 #

먼저 설치는 간단하다. https://github.com/cghiban/Web-Trace-Viewer에서 다운 받을 수 있다.

압축을 풀면

bin
html
LICENSE
README

을 확인할 수 있다.

먼저 실행을 위해서는 bin 디렉토리에서 먼저 데이터를 추출한다.

bin/extract_data.pl file > html/data_file.txt

여기에서 file은 ABI 원본 파일이다. 여기서 qual 정보와 서열 정보를 추출하여 별도의 텍스트 데이터로 변환한다.

그 저장된 데이터 파일을 HTML페이지에서 로드하면 된다.

phy.load_data('data.txt');

HTML페이지는 prototype-1.6.1.js, phylogenetics.js 의 자바스크립트 파일과 toolPanel.css의 CSS 파일을 필요로 한다. 소스는 다음과 같다.

<!--
  The contents of this file are subject to the terms listed in the LICENSE file
  you received with this code.
-->
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<link type="text/css" rel="stylesheet" href="toolPanel.css" />
<script type="text/javascript" src="prototype-1.6.1.js"></script>
<script type="text/javascript" src="phylogenetics.js"></script>
</head>
<body>
<div class="container_data1">
    <div id="container_data_line"> </div>
    <div id="seqids" class="seqids">
    </div>
    <div id="mini-trace-icons">
    </div>
    <div id="seqsx" class="seqsx">
    <input type="hidden" id="step" value="2" />
    <div id="trace-viewer">
        <canvas id="canvas1" height="200">
            Your browser doesn't support this Trace Viewer.
        </canvas>
        <div id="view-seqs-help-bubble" title="What is this line?" onclick="$('view-seqs-help-message').toggle()"></div>
        <div id="view-seqs-help-message" style="display:none">Bars depict quality scores for each nucleotide detected (called). The line marks a quality score of 20; bars below that line indicate low quality calls. <a href="http://en.wikipedia.org/wiki/Phred_quality_score" target="blank">More...</a></div>

    </div>
    <div style="float:left; width: 100px;padding-left:10px;"><input type="button" id="zoom_reset" value=" Reset " onclick="phy.zoomReset()" class="bluebtn" /></div>
    <div style="float:left; width: 200px; text-align: center;">
        <span class="label">X: </span><input type="button" id="x_zoom_in" value="  +  " onclick="phy.zoomIn('x')" class="bluebtn" /><input type="button" id="x_zoom_out" value="  -  " onclick="phy.zoomOut('x')" class="bluebtn" />
    </div>
    <div style="float:left; width: 200px; text-align: right;">
        <span class="label">Y: </span><input type="button" id="y_zoom_in" value="  +  " onclick="phy.zoomIn('y')" class="bluebtn" /><input type="button" id="y_zoom_out" value="  -  " onclick="phy.zoomOut('y')" class="bluebtn"/>
    </div>

     </div>
    <div style="clear: both;"> </div>
     <div id="container_data_lineBottom"> </div>
</div> <!-- END of container_rightContent-->
<script type="text/javascript">
Event.observe(window, Prototype.Browser.IE ? 'load' : 'dom:loaded', function() {
    phy.load_data('data.txt');
});
</script>
</body>
</html>