Commit 832f9325 authored by Raphael Müller's avatar Raphael Müller
Browse files

changed lanes property

parent 9b0059a6
......@@ -7,25 +7,22 @@
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script src="../lib/d3.js"></script>
<script src="../lib/vue.js"></script>
<script src="./js/viz-linear-sequence.js" defer></script>
<link href="./css/viz-linear-sequence.css" rel="stylesheet">
</head>
<body>
<div id="app" style="position: absolute;left: 25%;right:25%;">
<div id="app">
<h1>Genome 1</h1>
<h2><i>Bacillus exampelaris</i></h2>
<div style="height:150px">
<genome-viewer :genome-stats="genome_stats" :color-map="{'xRNA':'#CC0000'}":feature-data="feature_data"></genome-viewer>
</div>
<div >
<genome-viewer :genome-stats="genome_stats" :feature-data="feature_data2"></genome-viewer>
</div>
<div style="height:150px">
<genome-viewer :genome-stats="genome_stats" :color-map="genome_stats.colorMap" :feature-data="feature_data2"></genome-viewer>
<genome-viewer :genome-stats="genome_stats" :color-map="{'xRNA':'#CC0000'}" :feature-data="feature_data"></genome-viewer>
</div>
<p></p>
<h1>Genome 2</h1>
<h2><i>Bacillus exampelaris II</i></h2>
<div style="height:150px">
<genome-viewer :genome-stats="genome_stats" :lanes="[-3,-2,-1,1,2,3]" :color-map="{'xRNA':'#CC0000'}":feature-data="feature_data3"></genome-viewer>
<genome-viewer :genome-stats="genome_stats" :lanes="3" :color-map="{'xRNA':'#CC0000'}" :feature-data="feature_data3"></genome-viewer>
</div>
</div>
<script src="js/axis.js"></script>
......
......@@ -10,23 +10,12 @@ var app = new Vue({
colorMap: {"xRNA":"#CC0000", "PFAM":"#8e44ad"}
},
feature_data: [
{ name: "Gene 1.5",
description: "GMP synthase",
start: 1707479,
end: 1708024,
strand: "+",
zIndex: "4",
type: "ncRNA",
color_border: 'red'
},
{ name: "Gene 1",
description: "GMP synthase",
start: 1706479,
end: 1708024,
strand: "+",
type: "gene",
color: '#454aff',
color_border: '#000000'
},
{ name: "Gene 2",
description: "glyoxalase",
......@@ -35,49 +24,33 @@ var app = new Vue({
strand: "+",
type: "xRNA"
},
{ name: "Gene 2.5",
description: "glyoxalase",
start: 1708414,
end: 1708571,
strand: "+",
zIndeX: "2",
type: "tRNA"
},
{ name: "Gene 3",
description: "ABC transporter ATP-binding protein LlsG",
start: 1709429,
end: 1710317,
strand: '-',
type: "gene",
color: '#454aff',
color_border: '#000000'
type: "cds",
},
{ name: "Gene 4",
description: "ABC transporter permease protein LlsH",
start: 1710316,
end: 1711066,
strand: '+',
type: "gene",
color: '#454aff',
color_border: '#000000'
type: "cds",
},
{ name: "Gene 5",
description: "LlsX",
start: 1711106,
end: 1711424,
strand: '+',
type: "gene",
color: '#454aff',
color_border: '#000000'
type: "cds",
},
{ name: "Gene 6",
description: "SagB family dehydrogenase LlsB",
start: 1711420,
end: 1712296,
strand: '+',
type: "gene",
color: '#454aff',
color_border: '#000000'
type: "CDS",
},
{ name: "Gene 7",
description: "LlsY",
......@@ -85,34 +58,29 @@ var app = new Vue({
end: 1713221,
strand: '-',
type: "gene",
color: '#454aff',
color_border: '#000000'
},
{ name: "Gene 8",
description: "streptolysin-associated protein LlsD",
start: 1713213,
end: 1714527,
{ name: "region1",
description: "Transposon",
start: 1717000,
end: 1719000,
strand: '+',
type: "gene",
color: '#454aff',
color_border: '#000000'
type: "region",
zIndex: -1,
shape: "rect"
},
{ name: "Gene 9",
description: "hypothetical protein",
start: 1715351,
end: 1716125,
strand: '+',
type: "gene",
color: '#454aff',
color_border: '#000000'
type: "tRNA",
},
{ name: "Gene 10",
description: "glyoxalase family protein, N-terminal part",
start: 1716189,
end: 1716321,
strand: '+',
type: "gene",
color_border: '#000000'
type: "ncRNA",
},
{ name: "Gene 11",
description: "hypothetical protein",
......@@ -139,8 +107,6 @@ var app = new Vue({
end: 1708024,
strand: "+",
type: "gene",
color: '#454aff',
color_border: '#000000'
},
{ name: "Gene 22",
description: "glyoxalase",
......@@ -155,8 +121,6 @@ var app = new Vue({
end: 1710317,
strand: '-',
type: "gene",
color: '#454aff',
color_border: '#000000'
},
{ name: "Gene 24",
description: "ABC transporter permease protein LlsH",
......@@ -164,8 +128,6 @@ var app = new Vue({
end: 1711066,
strand: '+',
type: "gene",
color: '#454aff',
color_border: '#000000'
},
{ name: "Gene 25",
description: "LlsX",
......@@ -173,8 +135,6 @@ var app = new Vue({
end: 1711424,
strand: '+',
type: "gene",
color: '#454aff',
color_border: '#000000'
},
{ name: "Gene 26",
description: "SagB family dehydrogenase LlsB",
......@@ -182,8 +142,6 @@ var app = new Vue({
end: 1712296,
strand: '+',
type: "gene",
color: '#454aff',
color_border: '#000000'
},
{ name: "Gene 27.3",
description: "LlsY",
......@@ -200,8 +158,6 @@ var app = new Vue({
zIndex: "2",
strand: '-',
type: "gene",
color: '#454aff',
color_border: '#000000'
},
{ name: "Gene 27.6",
description: "LlsY",
......@@ -216,8 +172,6 @@ var app = new Vue({
end: 1714527,
strand: '+',
type: "gene",
color: '#454aff',
color_border: '#000000'
},
{ name: "Gene 29",
description: "hypothetical protein",
......@@ -225,8 +179,6 @@ var app = new Vue({
end: 1716125,
strand: '+',
type: "gene",
color: '#454aff',
color_border: '#000000'
},
{ name: "Gene 210",
description: "glyoxalase family protein, N-terminal part",
......@@ -252,8 +204,6 @@ var app = new Vue({
strand: "+",
lane: 1,
type: "gene",
color: '#454aff',
color_border: '#000000'
},
{ name: "Gene 22",
description: "glyoxalase",
......@@ -270,8 +220,6 @@ var app = new Vue({
lane: 3,
strand: '-',
type: "gene",
color: '#454aff',
color_border: '#000000'
},
{ name: "Gene 24",
description: "ABC transporter permease protein LlsH",
......@@ -280,8 +228,6 @@ var app = new Vue({
lane: 1,
strand: '+',
type: "gene",
color: '#454aff',
color_border: '#000000'
},
{ name: "Gene 25",
description: "LlsX",
......@@ -290,18 +236,14 @@ var app = new Vue({
strand: '+',
type: "gene",
lane: 2,
color: '#454aff',
color_border: '#000000'
},
{ name: "Gene 26",
description: "SagB family dehydrogenase LlsB",
start: 1711420,
end: 1712296,
lane: 3,
strand: '+',
strand: '-',
type: "gene",
color: '#454aff',
color_border: '#000000'
},
{ name: "Gene 27",
description: "LlsY",
......@@ -309,7 +251,6 @@ var app = new Vue({
end: 1713221,
strand: '-',
type: "gene",
color: '#454aff',
lane: 1,
color_border: '#000000'
},
......@@ -320,8 +261,6 @@ var app = new Vue({
strand: '+',
type: "gene",
lane: 2,
color: '#454aff',
color_border: '#000000'
},
{ name: "Gene 29",
description: "hypothetical protein",
......@@ -330,8 +269,6 @@ var app = new Vue({
strand: '+',
type: "gene",
lane: 3,
color: '#454aff',
color_border: '#000000'
},
{ name: "Gene 210",
description: "glyoxalase family protein, N-terminal part",
......@@ -340,7 +277,6 @@ var app = new Vue({
lane: 1,
strand: '+',
type: "gene",
color_border: '#000000'
},
{ name: "Gene 211",
description: "hypothetical protein",
......
......@@ -11,13 +11,13 @@ Vue.component( "axis", {
template:
`
<svg :x="x" :y="y" :width="width" :height="height" ><!--:viewBox="xOffset +' '+ vOffset +' '+ width + xOffset +' '+ vOffset + height"><!-- -->
<line x1="0" :y1="2*vOffset" :x2="width" :y2="2*vOffset" style="stroke:rgb(0,0,0);stroke-width:1" />
<line x1="0" :y1="2*vOffset" :x2="width" :y2="2*vOffset" style="stroke:#888;stroke-width:2" />
<line x1="0" :y1="2*vOffset" x2="0" :y2="vOffset" stroke="black" />
<line :x1="width" :y1="2*vOffset" :x2="width" :y2="vOffset" stroke="black" />
<line x1="0" :y1="2*vOffset" x2="0" :y2="vOffset" stroke="#888" />
<line :x1="width" :y1="2*vOffset" :x2="width" :y2="vOffset" stroke="#888" />
<line v-for="tick in ticks" :x1="tick.panelPos" :y1="2*vOffset" :x2="tick.panelPos" :y2="vOffset+2" stroke="black"/>
<text v-for="tick in ticks" :style="'font: '+vOffset+'px roboto;'"class="small" :x="tick.panelPos" :y="vOffset" text-anchor="middle" fill="black">{{ tick.genomePos }}</text>
<line v-for="tick in ticks" :x1="tick.panelPos" :y1="2*vOffset" :x2="tick.panelPos" :y2="vOffset+2" stroke="#888"/>
<text v-for="tick in ticks" :style="'font: '+vOffset+'px roboto;'"class="small" :x="tick.panelPos" :y="vOffset" text-anchor="middle" fill="#888">{{ tick.genomePos }}</text>
</svg>
<!-- -->
`,
......
......@@ -13,7 +13,7 @@ Vue.component("genome-viewer",{
<axis :x="to_w(0)" :y="to_h(0)" :vOffset="height/15" :height="one_height" :width="width" :start="axisStart" :stop="axisStop" :genomeSize="length*100">
</axis>
<!-- -->
<lane v-for="lane in lanes" :key="lane.id" :x="to_w(0)" :y="to_h(lane)" :height="2*one_height" :width="to_w(100)" :color="defaultLaneColor">
<lane v-for="lane in lanes_arr" :key="lane.id" :x="to_w(0)" :y="to_h(lane)" :height="2*one_height" :width="to_w(100)" :color="defaultLaneColor">
</lane>
<feature v-for="(feature, index) in sortedFeatures" :key="feature.name" :feature-id="feature.name" :svg-width="genomeToPixel(feature.end)-genomeToPixel(feature.start)" :svg-height="one_height" :svg-x="genomeToPixel(feature.start)" :svg-y="to_h(lane(feature))+ one_height/2" :color="getColor(feature)" :border-color="(feature.color_border)?feature.color_border : defaultBorderColor" @click="featureClick" @hover="updateFeature" @unhover="currentFeature = undefined" :shape="feature.shape? feature.shape : 'arrow'" :inverse="lane(feature)>0">
</feature>
......@@ -25,9 +25,7 @@ Vue.component("genome-viewer",{
</div>`,
props: {
lanes: {
default: function(){
return [-1, 1]
}
default: 1
},
genomeStats: {
validator (value) {
......@@ -52,10 +50,10 @@ Vue.component("genome-viewer",{
}
},
defaultColor: {
default: "#000000"
default: "#000"
},
defaultBorderColor: {
default: "#000000"
default: "#000"
},
colorMap: {
default: function(){
......@@ -64,7 +62,7 @@ Vue.component("genome-viewer",{
}
},
defaultLaneColor: {
default: "#FF00BF"
default: "#888"
},
},
computed:{
......@@ -104,11 +102,22 @@ Vue.component("genome-viewer",{
}
},
one_height(){
return this.height/(1 + 2 * this.lanes.length)
return this.height/(1 + 2 * this.lanes_arr.length)
},
lane_height(){
return this.height/this.lanes_arr.length
},
tickSize(){
return Math.pow(10,Math.floor(Math.log10(this.length))-1)
},
lanes_arr(){
let result = [];
for(i=1;i<=this.lanes;i++){
result.push(i)
result.push(-i)
}
return result
},
},
mounted() {
var svg_el = this.$refs.genomeVuer.getBoundingClientRect()
......@@ -177,7 +186,7 @@ Vue.component("genome-viewer",{
//if param is 0 => axis
//if param < 0 => lane on top
//if param > 0 => lane on bottom
let zero = this.lanes.length * this.one_height
let zero = this.lanes_arr.length * this.one_height
if(param < 0){
return zero + 2 * this.one_height * (param)
}else if(param > 0){
......@@ -196,25 +205,6 @@ Vue.component("genome-viewer",{
featureClick (featureId) {
console.log(featureId)
},
fill_in_tooltip_template (feature, template) {
let tooltip = template
//TODO: Iterate over custom properties
for ( let property of ['name', 'description', 'start', 'end', 'strand', 'type'] ){
tooltip = tooltip.replace( "{" + property + "}", feature[property] )
}
return( tooltip )
},
get_tooltip (e){
let element = e.currentTarget
let id = element.getAttribute( "name" )
let feature = null
for(let entry of this.featureData){
if(entry.name === id){
feature = entry
}
}
console.log( this.fill_in_tooltip_template( feature, this.genomeStats.tooltip ) )
},
updateFeature(feature){
this.currentFeature = this.featureData.find(feat => {
return feat.name == feature;
......@@ -228,12 +218,13 @@ Vue.component("genome-viewer",{
y: 0,
currentFeature: undefined,
colorMapDefault: {
'region':'#bdbdbd', // greyLighten
'gene':'#757575', // greyDarken
'cds': '#000000', // black
'rRNA': '#795548', // brown
'region':'#555555', // greyLighten
'gene':'#152329', // greyDarken
'cds': '#D8C684', // black
'CDS': '#D8C684', // black
'ncRNA': '#F6893D', // brown
'rRNA': '#4caf50', // green
'tRNA': '#4caf50', // green
'ncRNA': '#ff9800' // orange
}
}
},
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment