Commit 548de33b authored by Raphael Müller's avatar Raphael Müller
Browse files

Merge branch 'colormap' into 'development'

Colormap and lanes

See merge request !8
parents f9ca4cbd f3150747
......@@ -14,8 +14,19 @@
</head>
<body>
<div id="app" style="height:300px">
<genome-viewer :genome-stats="genome_stats" :feature-data="feature_data"></genome-viewer>
<div id="app" style="position: absolute;left: 25%;right:25%;">
<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>
</div>
<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>
</div>
</div>
<script src="js/axis.js"></script>
<script src="js/feature.js"></script>
......
......@@ -6,7 +6,8 @@ var app = new Vue({
start: 1706479,
end: 1718084,
//tooltip: "name: {name}</br>description: {description}</br>start: {start}</br>end: {end}"
tooltip: ["name","type","description","start","end","strand"]
tooltip: ["name","type","description","start","end","strand"],
colorMap: {"xRNA":"#CC0000"}
},
feature_data: [
{ name: "Gene 1",
......@@ -23,9 +24,7 @@ var app = new Vue({
start: 1708314,
end: 1708671,
strand: "+",
type: "gene",
color: '#454aff',
color_border: '#000000'
type: "xRNA"
},
{ name: "Gene 3",
description: "ABC transporter ATP-binding protein LlsG",
......@@ -105,6 +104,209 @@ var app = new Vue({
strand: '-',
type: "rRNA"
}
],
feature_data2: [
{ name: "Gene 21",
description: "GMP synthase",
start: 1706479,
end: 1708024,
strand: "+",
type: "gene",
color: '#454aff',
color_border: '#000000'
},
{ name: "Gene 22",
description: "glyoxalase",
start: 1708314,
end: 1708671,
strand: "+",
type: "xRNA",
},
{ name: "Gene 23",
description: "ABC transporter ATP-binding protein LlsG",
start: 1709429,
end: 1710317,
strand: '-',
type: "gene",
color: '#454aff',
color_border: '#000000'
},
{ name: "Gene 24",
description: "ABC transporter permease protein LlsH",
start: 1710316,
end: 1711066,
strand: '+',
type: "gene",
color: '#454aff',
color_border: '#000000'
},
{ name: "Gene 25",
description: "LlsX",
start: 1711106,
end: 1711424,
strand: '+',
type: "gene",
color: '#454aff',
color_border: '#000000'
},
{ name: "Gene 26",
description: "SagB family dehydrogenase LlsB",
start: 1711420,
end: 1712296,
strand: '+',
type: "gene",
color: '#454aff',
color_border: '#000000'
},
{ name: "Gene 27",
description: "LlsY",
start: 1712303,
end: 1713221,
strand: '-',
type: "gene",
color: '#454aff',
color_border: '#000000'
},
{ name: "Gene 28",
description: "streptolysin-associated protein LlsD",
start: 1713213,
end: 1714527,
strand: '+',
type: "gene",
color: '#454aff',
color_border: '#000000'
},
{ name: "Gene 29",
description: "hypothetical protein",
start: 1715351,
end: 1716125,
strand: '+',
type: "gene",
color: '#454aff',
color_border: '#000000'
},
{ name: "Gene 210",
description: "glyoxalase family protein, N-terminal part",
start: 1716189,
end: 1716321,
strand: '+',
type: "gene",
color_border: '#000000'
},
{ name: "Gene 211",
description: "hypothetical protein",
start: 1717235,
end: 1718084,
strand: '-',
type: "rRNA"
}
],
feature_data3: [
{ name: "Gene 21",
description: "GMP synthase",
start: 1706479,
end: 1708024,
strand: "+",
lane: 1,
type: "gene",
color: '#454aff',
color_border: '#000000'
},
{ name: "Gene 22",
description: "glyoxalase",
start: 1708314,
end: 1708671,
lane: 2,
strand: "+",
type: "xRNA",
},
{ name: "Gene 23",
description: "ABC transporter ATP-binding protein LlsG",
start: 1709429,
end: 1710317,
lane: 3,
strand: '-',
type: "gene",
color: '#454aff',
color_border: '#000000'
},
{ name: "Gene 24",
description: "ABC transporter permease protein LlsH",
start: 1710316,
end: 1711066,
lane: 1,
strand: '+',
type: "gene",
color: '#454aff',
color_border: '#000000'
},
{ name: "Gene 25",
description: "LlsX",
start: 1711106,
end: 1711424,
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: '+',
type: "gene",
color: '#454aff',
color_border: '#000000'
},
{ name: "Gene 27",
description: "LlsY",
start: 1712303,
end: 1713221,
strand: '-',
type: "gene",
color: '#454aff',
lane: 1,
color_border: '#000000'
},
{ name: "Gene 28",
description: "streptolysin-associated protein LlsD",
start: 1713213,
end: 1714527,
strand: '+',
type: "gene",
lane: 2,
color: '#454aff',
color_border: '#000000'
},
{ name: "Gene 29",
description: "hypothetical protein",
start: 1715351,
end: 1716125,
strand: '+',
type: "gene",
lane: 3,
color: '#454aff',
color_border: '#000000'
},
{ name: "Gene 210",
description: "glyoxalase family protein, N-terminal part",
start: 1716189,
end: 1716321,
lane: 1,
strand: '+',
type: "gene",
color_border: '#000000'
},
{ name: "Gene 211",
description: "hypothetical protein",
start: 1717235,
end: 1718084,
lane: 1,
strand: '-',
type: "rRNA"
}
]
}
})
......
......@@ -15,15 +15,20 @@ Vue.component("genome-viewer",{
<!-- -->
<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>
<feature v-for="(feature, index) in featureData" :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.strand))+ one_height/2" :color="getColor(feature)" :border-color="(feature.color_border)?feature.color_border : defaultBorderColor" @click="featureClick" @hover="updateFeature" @unhover="currentFeature = undefined">
<feature v-for="(feature, index) in featureData" :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">
</feature>
<!-- -->
</svg>
<tool-tip v-if="currentFeature" :feature="currentFeature" :tip="genomeStats.tooltip" :x="(genomeToPixel(currentFeature.start)+genomeToPixel(currentFeature.end))/2" :y="to_h(lane(currentFeature.strand)) + 1.75*one_height" >
<tool-tip v-if="currentFeature" :feature="currentFeature" :tip="genomeStats.tooltip" :x="(genomeToPixel(currentFeature.start)+genomeToPixel(currentFeature.end))/2" :y="to_h(lane(currentFeature.strand)) + 1.5*one_height + y" >
</tool-tip>
</div>`,
props: {
lanes: {
default: function(){
return [-1, 1]
}
},
genomeStats: {
validator (value) {
for (let property of ['id', 'start', 'end']) {
......@@ -55,12 +60,6 @@ Vue.component("genome-viewer",{
colorMap: {
default: function(){
return {
'region':'#bdbdbd', // greyLighten
'gene':'#757575', // greyDarken
'cds': '#000000', // black
'rRNA': '#795548', // brown
'tRNA': '#4caf50', // green
'ncRNA': '#ff9800' // orange
}
}
},
......@@ -104,6 +103,7 @@ Vue.component("genome-viewer",{
},
mounted() {
var svg_el = this.$refs.genomeVuer.getBoundingClientRect()
this.y = svg_el.y
this.width = svg_el.width
this.height = svg_el.height
//this.height / length([axis and lanes * 2])
......@@ -128,6 +128,7 @@ Vue.component("genome-viewer",{
methods:{
handleResize(){
var svg_el = this.$refs.genomeVuer.getBoundingClientRect()
this.y = svg_el.y
this.width = svg_el.width
this.height = svg_el.height
//#this.width = window.innerWidth;
......@@ -140,16 +141,24 @@ Vue.component("genome-viewer",{
if(feature.hasOwnProperty("type")){
if(this.colorMap.hasOwnProperty(feature.type)){
return this.colorMap[feature.type]
}else{
return this.defaultColor
}
}else {
return this.defaultColor
else{
if(this.colorMapDefault.hasOwnProperty(feature.type)){
return this.colorMapDefault[feature.type]
}else{
return this.defaultColor
}
}
} else{
return this.defaultColor
}
}
},
lane(str){
return (str=="+")? 1 : -1
lane(feat){
l = feat.lane ? feat.lane : 1
l = l* ((feat.strand=="+")? -1 : +1)
return l
//return (str=="+")? -1 : +1
},
to_h(param){
//param is a value between -n and +n, where n is the number of lanes divided by 2
......@@ -160,7 +169,8 @@ Vue.component("genome-viewer",{
if(param < 0){
return zero + 2 * this.one_height * (param)
}else if(param > 0){
return zero + this.one_height * (param)
return zero + this.one_height + (param-1)*this.one_height*2
//return zero + this.one_height * (param)
}
return zero
},
......@@ -201,10 +211,18 @@ Vue.component("genome-viewer",{
},
data: function(){
return {
lanes: [-1, 1],
width: 0,
height: 0,
currentFeature: undefined
y: 0,
currentFeature: undefined,
colorMapDefault: {
'region':'#bdbdbd', // greyLighten
'gene':'#757575', // greyDarken
'cds': '#000000', // black
'rRNA': '#795548', // brown
'tRNA': '#4caf50', // green
'ncRNA': '#ff9800' // orange
}
}
},
})
......@@ -3,8 +3,10 @@ Vue.component("tool-tip",{
`
<div style="transform:translate(-50%,0%);" :style="tooltipStyle">
<p v-for="property in tip" :key='property.id'>
<b>{{property}}:</b> {{feature[property]}}
<b>{{property}}:</b> {{feature[property]}}
</p>
<div :style="smallArrorStyle">
</div>
</div>
`,
props: {
......@@ -61,10 +63,22 @@ Vue.component("tool-tip",{
color: "black",
backgroundColor: "white",
border: "1px solid black",
textFont: "1vw",
padding: "10px"
font: "0.75rem roboto",
padding: "1rem"
}
}
},
smallArrorStyle(){
return {
content: " ",
position: "absolute",
bottom: "100%",
left: "50%",
marginLeft: "-5px",
borderWidth: "5px",
borderStyle: "solid",
borderColor: "transparent transparent black transparent"
}
},
},
data: function(){
return {
......
Supports Markdown
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