Web Trace Viewer
#
Find similar titles
- 최초 작성자
-
최근 업데이트
wpark-intern@insilicogen.com
Structured data
- Category
- Software
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>
