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

Merge branch 'grid' into 'development'

added tooltip component with mouseover and -out event handling

See merge request !4
parents df83037c b5849247
......@@ -20,6 +20,7 @@
<script src="js/axis.js"></script>
<script src="js/feature.js"></script>
<script src="js/lane.js"></script>
<script src="js/tool_tip.js"></script>
<script src="js/genome_viewer.js"></script>
<script src="js/app.js"> </script>
</body>
......
......@@ -5,7 +5,8 @@ var app = new Vue({
id: "my-genome",
start: 1706479,
end: 1718084,
tooltip: "name: {name}</br>description: {description}</br>start: {start}</br>end: {end}"
//tooltip: "name: {name}</br>description: {description}</br>start: {start}</br>end: {end}"
tooltip: ["name","type","description","start","end","strand"]
},
feature_data: [
{ name: "Gene 1",
......
......@@ -2,7 +2,7 @@ Vue.component("feature",{
template:
`
<svg :height="svgHeight" :width="svgWidth" :x="svgX" :y="svgY">
<polygon :points="arrow_coordinates" :style=featureStyle @click="clickEvent" @mouseover="hoverEvent" />
<polygon :points="arrow_coordinates" :style=featureStyle @click="clickEvent" @mouseover="hoverEvent" @mouseout="$emit('unhover')"/>
</svg>
`,
props: ['svgWidth', 'svgHeight', 'svgX', 'svgY', 'color', 'borderColor', 'featureId'],
......
......@@ -15,10 +15,13 @@ 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)">
</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">
<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>
<!-- -->
</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>
</div>`,
props: {
genomeStats: {
......@@ -174,12 +177,18 @@ Vue.component("genome-viewer",{
}
console.log( this.fill_in_tooltip_template( feature, this.genomeStats.tooltip ) )
},
updateFeature(feature){
this.currentFeature = this.featureData.find(feat => {
return feat.name == feature;
})
}
},
data: function(){
return {
lanes: [-1, 1],
width: 0,
height: 0
height: 0,
currentFeature: undefined
}
},
})
Vue.component("tool-tip",{
template:
`
<div style="transform:translate(-50%,0%);" :style="tooltipStyle">
<p v-for="property in tip" :key='property.id'>
<b>{{property}}:</b> {{feature[property]}}
</p>
</div>
`,
props: {
x: {
validator (value) {
return true
}
},
y: {
validator (value) {
return true
}
},
width: {
validator (value) {
return true
}
},
tip: {
default: []
},
feature: {
default: {}
}
},
methods: {
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 ) )
},
},
computed: {
tooltipStyle(){
return {
position: "absolute",
"left": this.x+"px",
"top": this.y+"px",
zIndex: 3,
color: "black",
backgroundColor: "white",
border: "1px solid black",
textFont: "1vw",
padding: "10px"
}
}
},
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