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

corrected axis. added locked mode for tooltip

parent 2a6dcc4e
......@@ -11,13 +11,13 @@ Vue.component( "axis", {
template:
`
<svg :x="x" :y="y" :width="width" :height="height" >
<line x1="0" :y1="2*vOffset" :x2="width" :y2="2*vOffset" :style="style"" />
<line x1="0" :y1="3*vOffset" :x2="width" :y2="3*vOffset" :style="style"" />
<line x1="0" :y1="2*vOffset" x2="0" :y2="vOffset" stroke="this.color" :style="style"/>
<line :x1="width" :y1="2*vOffset" :x2="width" :y2="vOffset" stroke="this.color" :style="style"/>
<line x1="0" :y1="3*vOffset" x2="0" :y2="vOffset" stroke="this.color" :style="style"/>
<line :x1="width" :y1="3*vOffset" :x2="width" :y2="vOffset" stroke="this.color" :style="style"/>
<line v-for="tick in ticks" :x1="tick.panelPos" :y1="2*vOffset" :x2="tick.panelPos" :y2="vOffset+2" :style="style"/>
<text v-for="tick in ticks" :style="'font: '+vOffset+'px roboto;'"class="small" :x="tick.panelPos" :y="vOffset" text-anchor="middle" :fill="color">{{ tick.genomePos }}</text>
<line v-for="tick in ticks" :x1="tick.panelPos" :y1="3*vOffset" :x2="tick.panelPos" :y2="(2+0.1)*vOffset" :style="style"/>
<text v-for="tick in ticks" :style="'font: '+vOffset+'px roboto;'"class="small" :x="tick.panelPos" :y="2*vOffset" text-anchor="middle" :fill="color">{{ tick.genomePos }}</text>
</svg>
<!-- -->
`,
......
......@@ -8,11 +8,11 @@ Vue.component("genome-viewer",{
<!-- -->
<lane v-for="lane in lanes_arr" :key="lane.id" :x="to_w(0)" :y="to_h(lane)" :height="lane_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="lane_height" :svg-x="genomeToPixel(feature.start)" :svg-y="to_h(lane(feature))" :color="getColor(feature)" :border-color="(feature.color_border)?feature.color_border : defaultBorderColor" @click="featureClick" @hover="updateFeature" @unhover="unfeature" :shape="feature.shape? feature.shape : 'arrow'" :inverse="lane(feature)>0">
<feature v-for="(feature, index) in sortedFeatures" :key="feature.name" :feature-id="feature.name" :svg-width="genomeToPixel(feature.end)-genomeToPixel(feature.start)" :svg-height="lane_height" :svg-x="genomeToPixel(feature.start)" :svg-y="to_h(lane(feature))" :color="getColor(feature)" :border-color="(feature.color_border)?feature.color_border : defaultBorderColor" @click="featureClick" @hover="updateFeature" @nhover="unfeature" :shape="feature.shape? feature.shape : 'arrow'" :inverse="lane(feature)>0">
</feature>
<!-- -->
</svg>
<tool-tip v-if="currentFeature" :feature="currentFeature" :tip="genomeStats.tooltip" :x="(genomeToPixel(currentFeature.start)+genomeToPixel(currentFeature.end))/2" :y="y+to_h(lane(currentFeature))+lane_height" >
<tool-tip v-if="currentFeature" :feature="currentFeature" :tip="genomeStats.tooltip" :x="(genomeToPixel(currentFeature.start)+genomeToPixel(currentFeature.end))/2" :y="y+to_h(lane(currentFeature))+lane_height" @remove="currentFeature = undefined" >
</tool-tip>
</div>`,
......@@ -126,6 +126,7 @@ Vue.component("genome-viewer",{
},
methods:{
unfeature(){
alert("something")
this.currentFeature = undefined
},
shape(feat){
......@@ -199,13 +200,13 @@ Vue.component("genome-viewer",{
y: 0,
currentFeature: undefined,
colorMapDefault: {
'region':'#555555', // greyLighten
'gene':'#152329', // greyDarken
'cds': '#D8C684', // black
'CDS': '#D8C684', // black
'ncRNA': '#F6893D', // brown
'rRNA': '#4caf50', // green
'tRNA': '#4caf50', // green
'region':'#555555',
'gene':'#152329',
'cds': '#D8C684',
'CDS': '#D8C684',
'ncRNA': '#F6893D',
'rRNA': '#4caf50',
'tRNA': '#4caf50',
}
}
},
......
Vue.component("tool-tip",{
template:
`
<div style="transform:translate(-50%,0%);" :style="tooltipStyle">
<div style="transform:translate(-50%,0%);" :style="tooltipStyle" @click="$emit('remove')">
<p v-for="property in tipArray" :key='property.id'>
<b>{{tipMap[property]}}:</b> {{feature[property]}}
</p>
......@@ -32,27 +32,6 @@ Vue.component("tool-tip",{
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: {
tipArray(){
let arr = [];
......
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