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

small bugfixes for tooltip; added small arrow for it

parent f9ca4cbd
......@@ -14,8 +14,16 @@
</head>
<body>
<div id="app" style="height:300px">
<div id="app" style="position: absolute;left: 25%;right:25%;">
<div style="height:150px">
<genome-viewer :genome-stats="genome_stats" :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" :feature-data="feature_data2"></genome-viewer>
</div>
</div>
<script src="js/axis.js"></script>
<script src="js/feature.js"></script>
......
......@@ -105,6 +105,104 @@ 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: "gene",
color: '#454aff',
color_border: '#000000'
},
{ 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"
}
]
}
})
......
......@@ -19,7 +19,7 @@ Vue.component("genome-viewer",{
</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>`,
......@@ -104,6 +104,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 +129,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;
......@@ -204,6 +206,7 @@ Vue.component("genome-viewer",{
lanes: [-1, 1],
width: 0,
height: 0,
y: 0,
currentFeature: undefined
}
},
......
......@@ -5,6 +5,8 @@ Vue.component("tool-tip",{
<p v-for="property in tip" :key='property.id'>
<b>{{property}}:</b> {{feature[property]}}
</p>
<div :style="smallArrorStyle">
</div>
</div>
`,
props: {
......@@ -64,8 +66,20 @@ Vue.component("tool-tip",{
textFont: "1vw",
padding: "10px"
}
},
smallArrorStyle(){
return {
content: " ",
position: "absolute",
bottom: "100%",
left: "50%",
marginLeft: "-5px",
borderWidth: "5px",
borderStyle: "solid",
borderColor: "transparent transparent black transparent"
}
},
},
data: function(){
return {
todo: "todo"
......
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