Skip to content
GitLab
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
Hide whitespace changes
Inline Side-by-side
genome-vuer/src/index.html
View file @ 548de33b
......@@ -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>
......
genome-vuer/src/js/app.js
View file @ 548de33b
......@@ -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"
}
]
}
})
......
genome-vuer/src/js/genome_viewer.js
View file @ 548de33b
......@@ -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
}
}
},
})
genome-vuer/src/js/tool_tip.js
View file @ 548de33b
......@@ -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