Skip to content

GitLab

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

vertical grid

parent 47f89e3d
Hide whitespace changes
Inline Side-by-side
genome-vuer/src/index.html
View file @ 65d84b01
......@@ -15,7 +15,7 @@
<body>
<div id="app">
<genome-viewer :genome-stats="genome_stats" :feature-data="feature_data"></genome-viewer>
<genome-viewer :genome-stats="genome_stats" :feature-data="feature_data" width=1500 height=300></genome-viewer>
</div>
<script src="js/axis.js"></script>
<script src="js/feature.js"></script>
......
genome-vuer/src/js/axis.js
View file @ 65d84b01
Vue.component("axis",{
template:
`
<div class="gv-axis" @click="my_method()">
TODO: im the axis component
</div>
<svg :x="x" :y="y" :width="width" :height="height">
<line :x1="0" :y1="height/2" :x2="width" :y2="height/2" style="stroke:rgb(255,0,0);stroke-width:2" />
</svg>
`,
props: {
todoprop1: {
validator (value) {
return true
}
},
todoprop2: {
validator (value) {
return true
}
}
width: {},
height: {},
x: {},
y: {},
},
methods: {
my_method(){
......
genome-vuer/src/js/feature.js
View file @ 65d84b01
Vue.component("feature",{
template:
`
<div class="gv-feature" @click="my_method()">
TODO: im the feature component
</div>
<svg></svg>
`,
props: {
todoprop1: {
......
genome-vuer/src/js/genome_viewer.js
View file @ 65d84b01
Vue.component("genome-viewer",{
template: `
<div>
<div class="container-lin-dna">
<!--<div class="container-lin-dna">
<div :id="genomeStats.id" class="lin-dna" :data-cluster-start="genomeStats.start" :data-cluster-end="genomeStats.end" style="width: 100%; height: 50px;">
<div v-for="feature in featureData" :key="feature.name" class="region-to-display" :data-region-name="feature.name" :data-region-description="feature.description" :data-region-start="feature.start" :data-region-end="feature.end" :data-region-strand="feature.strand" :data-region-type="feature.type">
</div>
</div>
</div>
<!-- new stuff -->
<!-- TODO: axis -->
<axis>
</axis>
<!-- TODO: lanes -->
<lane v-for="lane in lanes" :key="lane.id">
</lane>
<!-- TODO: features -->
<feature v-for="feature in featureData" :key="feature.name">
</feature>
-->
<svg id="genome-vuer" ref="genomeVuer" :height="height" :width="width">
<!-- new stuff -->
<!-- TODO: axis -->
<axis :x="to_w(0)" :y="to_h()" :height="one_height" :width="to_w(100)">
</axis>
<!-- TODO: lanes -->
<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>
<!-- TODO: features -->
<feature v-for="feature in featureData" :key="feature.name">
</feature>
</svg>
</div>`,
props: {
genomeStats: {
......@@ -41,11 +43,61 @@ Vue.component("genome-viewer",{
return true
}
}
}
},
height: {},
width: {},
},
computed:{
axis_start(){},
axis_end(){},
genome_size(){},
length(){
if(this.genomeStats.start < this.genomeStats.end){
return this.genomeStats.end - this.genomeStats.start
}else{
// TODO: if genome is circular
}
},
one_height(){
return this.height/(1 + 2 * this.lanes.length)
},
},
mounted() {
//this.height / length([axis and lanes * 2])
// lanes are twize as big as the axis
// so height / (1 + no_of_lanes * 2)
//var one_height = this.svg_size[1]/(1 + 2 * this.lanes.length)
//let svg_el = this.$refs.genomeVuer.getBoundingClientRect()
//console.log(svg_el)
////console.log(svg_el)
//this.width = svg_el.width
//this.height = svg_el.height
////return [svg_el.clientWidth, svg_el.clientHeight]
//this.one_height = this.height/(1 + 2 * this.lanes.length)
},
methods:{
to_h(param){
//param is a value between -n and +n, where n is the number of lanes divided by 2
//if param is 0 => axis
//if param < 0 => lane on top
//if param > 0 => lane on bottom
let zero = this.lanes.length * this.one_height
if(param < 0){
return zero + 2 * this.one_height * (param)
}else if(param > 0){
return zero + this.one_height * (param)
}
return zero
},
to_w(param){
//param is a value between 0 and 100, where 100 is the full length of the svg
return (this.width*param)/100
},
},
data: function(){
return {
lanes: [-1, 1]
lanes: [-1, 1],
}
},
})
genome-vuer/src/js/lane.js
View file @ 65d84b01
Vue.component("lane",{
template:
`
<div class="gv-lane" @click="my_method()">
TODO: im the lane component
</div>
<svg :x="x" :y="y" :width="width" :height="height">
<line :x1="0" :y1="height/2" :x2="width" :y2="height/2" style="stroke:rgb(255,0,0);stroke-width:2" />
</svg>
`,
props: {
todoprop1: {
validator (value) {
return true
}
},
todoprop2: {
validator (value) {
return true
}
}
width: {},
height: {},
x: {},
y: {},
},
methods: {
my_method(){
......
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