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 @@ ...@@ -14,8 +14,16 @@
</head> </head>
<body> <body>
<div id="app" style="height:300px"> <div id="app" style="position: absolute;left: 25%;right:25%;">
<genome-viewer :genome-stats="genome_stats" :feature-data="feature_data"></genome-viewer> <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> </div>
<script src="js/axis.js"></script> <script src="js/axis.js"></script>
<script src="js/feature.js"></script> <script src="js/feature.js"></script>
......
...@@ -105,6 +105,104 @@ var app = new Vue({ ...@@ -105,6 +105,104 @@ var app = new Vue({
strand: '-', strand: '-',
type: "rRNA" 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",{ ...@@ -19,7 +19,7 @@ Vue.component("genome-viewer",{
</feature> </feature>
<!-- --> <!-- -->
</svg> </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> </tool-tip>
</div>`, </div>`,
...@@ -104,6 +104,7 @@ Vue.component("genome-viewer",{ ...@@ -104,6 +104,7 @@ Vue.component("genome-viewer",{
}, },
mounted() { mounted() {
var svg_el = this.$refs.genomeVuer.getBoundingClientRect() var svg_el = this.$refs.genomeVuer.getBoundingClientRect()
this.y = svg_el.y
this.width = svg_el.width this.width = svg_el.width
this.height = svg_el.height this.height = svg_el.height
//this.height / length([axis and lanes * 2]) //this.height / length([axis and lanes * 2])
...@@ -128,6 +129,7 @@ Vue.component("genome-viewer",{ ...@@ -128,6 +129,7 @@ Vue.component("genome-viewer",{
methods:{ methods:{
handleResize(){ handleResize(){
var svg_el = this.$refs.genomeVuer.getBoundingClientRect() var svg_el = this.$refs.genomeVuer.getBoundingClientRect()
this.y = svg_el.y
this.width = svg_el.width this.width = svg_el.width
this.height = svg_el.height this.height = svg_el.height
//#this.width = window.innerWidth; //#this.width = window.innerWidth;
...@@ -204,6 +206,7 @@ Vue.component("genome-viewer",{ ...@@ -204,6 +206,7 @@ Vue.component("genome-viewer",{
lanes: [-1, 1], lanes: [-1, 1],
width: 0, width: 0,
height: 0, height: 0,
y: 0,
currentFeature: undefined currentFeature: undefined
} }
}, },
......
...@@ -5,6 +5,8 @@ Vue.component("tool-tip",{ ...@@ -5,6 +5,8 @@ Vue.component("tool-tip",{
<p v-for="property in tip" :key='property.id'> <p v-for="property in tip" :key='property.id'>
<b>{{property}}:</b> {{feature[property]}} <b>{{property}}:</b> {{feature[property]}}
</p> </p>
<div :style="smallArrorStyle">
</div>
</div> </div>
`, `,
props: { props: {
...@@ -64,7 +66,19 @@ Vue.component("tool-tip",{ ...@@ -64,7 +66,19 @@ Vue.component("tool-tip",{
textFont: "1vw", textFont: "1vw",
padding: "10px" padding: "10px"
} }
} },
smallArrorStyle(){
return {
content: " ",
position: "absolute",
bottom: "100%",
left: "50%",
marginLeft: "-5px",
borderWidth: "5px",
borderStyle: "solid",
borderColor: "transparent transparent black transparent"
}
},
}, },
data: function(){ data: function(){
return { 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