From 0d941e38c760eda9686610e36055536e6179c03e Mon Sep 17 00:00:00 2001 From: Oliver Schwengers Date: Tue, 11 Sep 2018 15:06:36 +0200 Subject: [PATCH 01/13] implement prototype --- genome-vuer/src/js/axis.js | 84 ++++++++++++++++++++++++++------------ 1 file changed, 59 insertions(+), 25 deletions(-) diff --git a/genome-vuer/src/js/axis.js b/genome-vuer/src/js/axis.js index 3d41d25..304dfb3 100644 --- a/genome-vuer/src/js/axis.js +++ b/genome-vuer/src/js/axis.js @@ -1,37 +1,71 @@ -Vue.component("axis",{ - template: +Vue.component( "axis", { + template: ` -
- TODO: im the axis component -
+ + + + + + + + + {{ tick.genomePos }} + `, props: { - todoprop1: { - validator (value) { - return true - } - }, - todoprop2: { - validator (value) { - return true - } - } + start: Number, + stop: Number, + size: Number, + width: Number, + heigth: Number, + xOffset: Number, + vOffset: Number }, methods: { - my_method(){ - console.log(this.todo) - console.log(this.Todo) - }, }, computed: { - Todo(){ - return this.todo.charAt(0).toUpperCase() + this.todo.substr(1); - }, + ticks(){ + const genomeSectionSize = Math.abs(this.stop-this.start) // genome section in bp + const tickSize = genomeSectionSize / this.noTicks // axis tick size in bp + const tickWidth = this.width / this.noTicks // axis tick size in pixels + + /*********************************** + * TODO: + * add logic to select human readable tick sizes, i.e. + * multiples of 10 bp + */ + + let ticks = [] + let genomePos = this.start + let pos = 0 + for( let i=0; i this.stop && genomePos > this.size ) { + let tick = { + genomePos: 0, + pos: (this.size-this.start)/genomeSectionSize*this.with + } + ticks.push( tick ) + } + } + // remove first and last tick for aesthetic reasons + ticks.shift() + ticks.pop() + return ticks + } }, data: function(){ return { - todo: "todo" + noTicks: 10 } - }, -}) + } +} ) -- GitLab From 334b3be63fd96cba2dc06e17649c5248684dc6cb Mon Sep 17 00:00:00 2001 From: Maike Weber Date: Tue, 11 Sep 2018 15:23:35 +0200 Subject: [PATCH 02/13] functional lane added with testing values in genome_viewer --- genome-vuer/src/js/genome_viewer.js | 4 ++- genome-vuer/src/js/lane.js | 38 ++++++++++++++++++++++------- 2 files changed, 32 insertions(+), 10 deletions(-) diff --git a/genome-vuer/src/js/genome_viewer.js b/genome-vuer/src/js/genome_viewer.js index 4f2c763..4f271dc 100644 --- a/genome-vuer/src/js/genome_viewer.js +++ b/genome-vuer/src/js/genome_viewer.js @@ -13,8 +13,10 @@ Vue.component("genome-viewer",{ - + + + diff --git a/genome-vuer/src/js/lane.js b/genome-vuer/src/js/lane.js index d137cfd..7a209e1 100644 --- a/genome-vuer/src/js/lane.js +++ b/genome-vuer/src/js/lane.js @@ -1,21 +1,32 @@ Vue.component("lane",{ template: ` -
- TODO: im the lane component -
+ + + + `, props: { - todoprop1: { + x: { validator (value) { return true } }, - todoprop2: { + y: { validator (value) { return true } - } + }, + height: { + validator (value) { + return true + } + }, + width: { + validator (value) { + return true + } + }, }, methods: { my_method(){ @@ -24,9 +35,18 @@ Vue.component("lane",{ }, }, computed: { - Todo(){ - return this.todo.charAt(0).toUpperCase() + this.todo.substr(1); - }, +// y() { +// return y; +// }, +// x() { +// return lib.map(0, this.o.xMin, this.o.xMax, 0, this.svg.w); +// }, +// tickXs() { +// const ticks = lib.range(this.o.xMin, this.o.xMax, 10) +// return ticks.map(tick => +// lib.map(tick, this.o.xMin, this.o.xMax, 0, this.svg.w) +// ); +// }, }, data: function(){ return { -- GitLab From 27a9469c4da0a5a7f11a749aa512ee2d8449a9f1 Mon Sep 17 00:00:00 2001 From: Patrick Blumenkamp Date: Wed, 12 Sep 2018 09:28:03 +0200 Subject: [PATCH 03/13] add first version of arrows and click event --- genome-vuer/src/js/feature.js | 48 ++++++++++++++++------------- genome-vuer/src/js/genome_viewer.js | 11 +++++-- 2 files changed, 35 insertions(+), 24 deletions(-) diff --git a/genome-vuer/src/js/feature.js b/genome-vuer/src/js/feature.js index a866497..0ff74ee 100644 --- a/genome-vuer/src/js/feature.js +++ b/genome-vuer/src/js/feature.js @@ -1,37 +1,41 @@ Vue.component("feature",{ template: ` -
- TODO: im the feature component -
+ + + `, - props: { - todoprop1: { - validator (value) { - return true + props: ['svgWidth', 'svgHeight', 'svgX', 'svgY', 'color', 'borderColor', 'featureId'], + computed: { + featureStyle () { + return { + 'fill': this.color, + 'stroke': this.borderColor, + 'stroke-width': 1 } }, - todoprop2: { - validator (value) { - return true - } - } - }, - methods: { - my_method(){ - console.log(this.todo) - console.log(this.Todo) + arrow_coordinates () { + let points = [ + '0, ' + this.svgHeight * 0.25, + '0, ' + this.svgHeight * 0.75, + this.svgWidth * 0.7 + ', ' + this.svgHeight * 0.75, + this.svgWidth * 0.7 + ', ' + this.svgHeight * 0.95, + this.svgWidth + ', ' + this.svgHeight * 0.5, + this.svgWidth * 0.7 + ', ' + this.svgHeight * 0.05, + this.svgWidth * 0.7 + ', ' + this.svgHeight * 0.25 + ] + return points.join(' ') }, }, - computed: { - Todo(){ - return this.todo.charAt(0).toUpperCase() + this.todo.substr(1); - }, + methods: { + clickEvent (evt) { + this.$emit('click', this.featureId) + } }, data: function(){ return { todo: "todo" } - }, + } }) diff --git a/genome-vuer/src/js/genome_viewer.js b/genome-vuer/src/js/genome_viewer.js index 4f2c763..2d9267c 100644 --- a/genome-vuer/src/js/genome_viewer.js +++ b/genome-vuer/src/js/genome_viewer.js @@ -16,8 +16,10 @@ Vue.component("genome-viewer",{ - - + + + + `, props: { genomeStats: { @@ -43,6 +45,11 @@ Vue.component("genome-viewer",{ } } }, + methods: { + featureClick (featureId) { + console.log(featureId) + } + }, data: function(){ return { lanes: [-1, 1] -- GitLab From cdf283f12fffda7a89a4b8ae4f5bcd15b01427b9 Mon Sep 17 00:00:00 2001 From: Patrick Blumenkamp Date: Wed, 12 Sep 2018 09:45:45 +0200 Subject: [PATCH 04/13] add border around svg and vary arrow size in example --- genome-vuer/src/js/genome_viewer.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/genome-vuer/src/js/genome_viewer.js b/genome-vuer/src/js/genome_viewer.js index 2d9267c..640c612 100644 --- a/genome-vuer/src/js/genome_viewer.js +++ b/genome-vuer/src/js/genome_viewer.js @@ -16,8 +16,8 @@ Vue.component("genome-viewer",{ - - + + `, -- GitLab From 65d84b01961441b9e52d57d23ca54ff52a0ef502 Mon Sep 17 00:00:00 2001 From: rmueller Date: Sat, 15 Sep 2018 16:13:04 +0200 Subject: [PATCH 05/13] vertical grid --- .gitignore | 1 + genome-vuer/src/index.html | 2 +- genome-vuer/src/js/axis.js | 20 +++----- genome-vuer/src/js/feature.js | 4 +- genome-vuer/src/js/genome_viewer.js | 80 ++++++++++++++++++++++++----- genome-vuer/src/js/lane.js | 20 +++----- 6 files changed, 83 insertions(+), 44 deletions(-) diff --git a/.gitignore b/.gitignore index 485dee6..ae8e990 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,2 @@ .idea +.*.swp diff --git a/genome-vuer/src/index.html b/genome-vuer/src/index.html index 3e45916..a7d9557 100644 --- a/genome-vuer/src/index.html +++ b/genome-vuer/src/index.html @@ -15,7 +15,7 @@
- +
diff --git a/genome-vuer/src/js/axis.js b/genome-vuer/src/js/axis.js index 3d41d25..cc0d286 100644 --- a/genome-vuer/src/js/axis.js +++ b/genome-vuer/src/js/axis.js @@ -1,21 +1,15 @@ Vue.component("axis",{ template: ` -
- TODO: im the axis component -
+ + + `, props: { - todoprop1: { - validator (value) { - return true - } - }, - todoprop2: { - validator (value) { - return true - } - } + width: {}, + height: {}, + x: {}, + y: {}, }, methods: { my_method(){ diff --git a/genome-vuer/src/js/feature.js b/genome-vuer/src/js/feature.js index a866497..8df7164 100644 --- a/genome-vuer/src/js/feature.js +++ b/genome-vuer/src/js/feature.js @@ -1,9 +1,7 @@ Vue.component("feature",{ template: ` -
- TODO: im the feature component -
+ `, props: { todoprop1: { diff --git a/genome-vuer/src/js/genome_viewer.js b/genome-vuer/src/js/genome_viewer.js index 4f2c763..1741323 100644 --- a/genome-vuer/src/js/genome_viewer.js +++ b/genome-vuer/src/js/genome_viewer.js @@ -1,23 +1,25 @@ Vue.component("genome-viewer",{ template: `
-
+ - - - - - - - - - + --> + + + + + + + + + + + +
`, 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], } }, }) diff --git a/genome-vuer/src/js/lane.js b/genome-vuer/src/js/lane.js index d137cfd..b7c3e55 100644 --- a/genome-vuer/src/js/lane.js +++ b/genome-vuer/src/js/lane.js @@ -1,21 +1,15 @@ Vue.component("lane",{ template: ` -
- TODO: im the lane component -
+ + + `, props: { - todoprop1: { - validator (value) { - return true - } - }, - todoprop2: { - validator (value) { - return true - } - } + width: {}, + height: {}, + x: {}, + y: {}, }, methods: { my_method(){ -- GitLab From 35939e21b81ce4833acd0613c60617d180fa1948 Mon Sep 17 00:00:00 2001 From: Oliver Schwengers Date: Tue, 18 Sep 2018 13:00:50 +0200 Subject: [PATCH 06/13] implement logarithmic axis scaling --- genome-vuer/src/js/axis.js | 56 +++++++++++++++++++------------------- 1 file changed, 28 insertions(+), 28 deletions(-) diff --git a/genome-vuer/src/js/axis.js b/genome-vuer/src/js/axis.js index 304dfb3..5f4d26f 100644 --- a/genome-vuer/src/js/axis.js +++ b/genome-vuer/src/js/axis.js @@ -1,3 +1,12 @@ + + +/*********************************** + * TODO: + * add logic to print human readable tick sizes, i.e. + * 10 kb instead of 10,000 bp + */ + + Vue.component( "axis", { template: ` @@ -10,55 +19,46 @@ Vue.component( "axis", { - - {{ tick.genomePos }} + + {{ tick.genomePos }} `, props: { start: Number, stop: Number, - size: Number, + genomeSize: Number, width: Number, heigth: Number, xOffset: Number, vOffset: Number }, methods: { + genomeToPixel( pos ) { + return pos/Math.abs(this.stop-this.start) * this.width + } }, computed: { - ticks(){ - const genomeSectionSize = Math.abs(this.stop-this.start) // genome section in bp - const tickSize = genomeSectionSize / this.noTicks // axis tick size in bp - const tickWidth = this.width / this.noTicks // axis tick size in pixels - - /*********************************** - * TODO: - * add logic to select human readable tick sizes, i.e. - * multiples of 10 bp - */ + getTicks() { + const genomeSectionSize = (this.start > this.stop) ? (this.genomeSize-this.start + this.end) : Math.abs(this.stop-this.start) // genome section in bp + const tickSize = Math.pow( 10, Math.round( Math.log10( genomeSectionSize / this.noTicks ) ) ) // axis tick size in log 10 bp + const firstTickPos = Math.pow( 10, Math.ceil( Math.log10( this.start ) ) ) let ticks = [] - let genomePos = this.start - let pos = 0 - for( let i=0; i this.stop && genomePos > this.genomeSize ) { + genomePos = tickSize + } let tick = { genomePos: genomePos, - pos: pos + panelPos: panelPos } ticks.push( tick ) genomePos += tickSize - pos += tickWidth - if( this.start > this.stop && genomePos > this.size ) { - let tick = { - genomePos: 0, - pos: (this.size-this.start)/genomeSectionSize*this.with - } - ticks.push( tick ) - } + panelPos = this.genometoPixel( genomePos ) } - // remove first and last tick for aesthetic reasons - ticks.shift() - ticks.pop() + return ticks } }, -- GitLab From 777353fe205609bef406b0d964d4434f8d387e87 Mon Sep 17 00:00:00 2001 From: Raphael Mueller Date: Wed, 17 Oct 2018 16:48:03 +0200 Subject: [PATCH 07/13] added first version of axis --- genome-vuer/src/index.html | 2 +- genome-vuer/src/js/axis.js | 93 +++++++++++++++++++++-------- genome-vuer/src/js/genome_viewer.js | 28 +++++++-- 3 files changed, 90 insertions(+), 33 deletions(-) diff --git a/genome-vuer/src/index.html b/genome-vuer/src/index.html index a7d9557..3e45916 100644 --- a/genome-vuer/src/index.html +++ b/genome-vuer/src/index.html @@ -15,7 +15,7 @@
- +
diff --git a/genome-vuer/src/js/axis.js b/genome-vuer/src/js/axis.js index 9e6621c..23e5d55 100644 --- a/genome-vuer/src/js/axis.js +++ b/genome-vuer/src/js/axis.js @@ -10,17 +10,20 @@ Vue.component( "axis", { template: ` - + - - + + - - {{ tick.genomePos }} + + {{ tick.genomePos }} + `, props: { + x: Number, + y: Number, start: Number, stop: Number, genomeSize: Number, @@ -31,34 +34,72 @@ Vue.component( "axis", { }, methods: { genomeToPixel( pos ) { - return pos/Math.abs(this.stop-this.start) * this.width + return (pos-(this.start-this.tickSize))/(this.length) * this.width } }, + computed:{ + power(){ + return Math.floor(Math.log10(this.length)) + }, + length(){ + return (this.stop - this.start) + }, + genomeSectionSize(){ + return (this.start > this.stop) ? (this.genomeSize-this.start + this.end) : Math.abs(this.stop-this.start) // genome section in bp + }, + tickSize(){ + return Math.pow(10, this.power-1) + //return Math.pow( 10, Math.round( Math.log10( this.genomeSectionSize / this.noTicks ) ) ) // axis tick size in log 10 bp + }, + noTicks(){ + return Math.ceil(this.length/this.tickSize) + }, + ticks(){ + const firstTickPos = Math.round(this.start/this.tickSize)*this.tickSize//Math.pow( 10, Math.floor( Math.log10( this.start ) ) ) + let ticks = new Array(this.noTicks) + for(i=0; i this.stop) ? (this.genomeSize-this.start + this.end) : Math.abs(this.stop-this.start) // genome section in bp - const tickSize = Math.pow( 10, Math.round( Math.log10( genomeSectionSize / this.noTicks ) ) ) // axis tick size in log 10 bp - const firstTickPos = Math.pow( 10, Math.ceil( Math.log10( this.start ) ) ) + // const firstTickPos = Math.pow( 10, Math.ceil( Math.log10( this.start ) ) ) - //let ticks = [] - let genomePos = firstTickPos - let panelPos = this.genomeToPixel( genomePos ) - while( panelPos <= this.width ) { - if( this.start > this.stop && genomePos > this.genomeSize ) { - genomePos = tickSize - } - let tick = { - genomePos: genomePos, - panelPos: panelPos - } - this.ticks.push( tick ) - genomePos += tickSize - panelPos = this.genomeToPixel( genomePos ) - } + // let ticks = [] + // let genomePos = firstTickPos + // let panelPos = this.genomeToPixel( genomePos ) + // while( panelPos <= this.width ) { + // console.log("before") + // console.log(tickSize); + // console.log(genomePos); + // console.log(panelPos); + // console.log(this.width); + // if( this.start > this.stop && genomePos > this.genomeSize ) { + // genomePos = tickSize + // } + // let tick = { + // genomePos: genomePos, + // panelPos: panelPos + // } + // this.ticks.push( tick ) + // genomePos += tickSize + // panelPos = this.genomeToPixel( genomePos ) + // console.log("after") + // console.log(tickSize); + // console.log(genomePos); + // console.log(panelPos); + // console.log(this.width); + // break + // } }, data: function(){ return { - noTicks: 10, - ticks: [] + //noTicks: 10 + //ticks: [] } } } ) diff --git a/genome-vuer/src/js/genome_viewer.js b/genome-vuer/src/js/genome_viewer.js index 06381da..726fef0 100644 --- a/genome-vuer/src/js/genome_viewer.js +++ b/genome-vuer/src/js/genome_viewer.js @@ -8,13 +8,16 @@ Vue.component("genome-viewer",{
--> - - + + + + + `, props: { @@ -40,12 +43,20 @@ Vue.component("genome-viewer",{ } } }, - height: {}, - width: {}, }, computed:{ - axis_start(){}, - axis_end(){}, + stops(){ + return this.featureData.map(f => f.end) + }, + starts(){ + return this.featureData.map(f => f.start) + }, + axisStart(){ + return Math.min(...this.starts) + }, + axisStop(){ + return Math.max(...this.stops) + }, genome_size(){}, length(){ if(this.genomeStats.start < this.genomeStats.end){ @@ -59,6 +70,9 @@ Vue.component("genome-viewer",{ }, }, mounted() { + var svg_el = this.$refs.genomeVuer.getBoundingClientRect() + this.width = svg_el.width + this.height = svg_el.height //this.height / length([axis and lanes * 2]) // lanes are twize as big as the axis // so height / (1 + no_of_lanes * 2) @@ -97,6 +111,8 @@ Vue.component("genome-viewer",{ data: function(){ return { lanes: [-1, 1], + width: 0, + height: 0 } }, }) -- GitLab From 58b13ab0d9bc96a8822c2f71595ae607c97a5d62 Mon Sep 17 00:00:00 2001 From: Raphael Mueller Date: Thu, 18 Oct 2018 10:30:26 +0200 Subject: [PATCH 08/13] features are now visible --- genome-vuer/src/js/axis.js | 33 +---------------------------- genome-vuer/src/js/genome_viewer.js | 15 ++++++++++--- 2 files changed, 13 insertions(+), 35 deletions(-) diff --git a/genome-vuer/src/js/axis.js b/genome-vuer/src/js/axis.js index 23e5d55..1a41890 100644 --- a/genome-vuer/src/js/axis.js +++ b/genome-vuer/src/js/axis.js @@ -30,7 +30,7 @@ Vue.component( "axis", { width: Number, height: Number, xOffset: Number, - vOffset: Number + vOffset: Number, }, methods: { genomeToPixel( pos ) { @@ -61,41 +61,10 @@ Vue.component( "axis", { ticks[i] = {} ticks[i].genomePos = firstTickPos + i*this.tickSize ticks[i].panelPos = this.genomeToPixel(ticks[i].genomePos) - console.log(ticks[i]) } return ticks }, }, - mounted(){ - // const firstTickPos = Math.pow( 10, Math.ceil( Math.log10( this.start ) ) ) - - // let ticks = [] - // let genomePos = firstTickPos - // let panelPos = this.genomeToPixel( genomePos ) - // while( panelPos <= this.width ) { - // console.log("before") - // console.log(tickSize); - // console.log(genomePos); - // console.log(panelPos); - // console.log(this.width); - // if( this.start > this.stop && genomePos > this.genomeSize ) { - // genomePos = tickSize - // } - // let tick = { - // genomePos: genomePos, - // panelPos: panelPos - // } - // this.ticks.push( tick ) - // genomePos += tickSize - // panelPos = this.genomeToPixel( genomePos ) - // console.log("after") - // console.log(tickSize); - // console.log(genomePos); - // console.log(panelPos); - // console.log(this.width); - // break - // } - }, data: function(){ return { //noTicks: 10 diff --git a/genome-vuer/src/js/genome_viewer.js b/genome-vuer/src/js/genome_viewer.js index 726fef0..c072bc3 100644 --- a/genome-vuer/src/js/genome_viewer.js +++ b/genome-vuer/src/js/genome_viewer.js @@ -15,7 +15,7 @@ Vue.component("genome-viewer",{ - + @@ -60,7 +60,7 @@ Vue.component("genome-viewer",{ genome_size(){}, length(){ if(this.genomeStats.start < this.genomeStats.end){ - return this.genomeStats.end - this.genomeStats.start + return this.axisStop - this.axisStart }else{ // TODO: if genome is circular } @@ -68,6 +68,9 @@ Vue.component("genome-viewer",{ one_height(){ return this.height/(1 + 2 * this.lanes.length) }, + tickSize(){ + return Math.pow(10,Math.floor(Math.log10(this.length))-1) + }, }, mounted() { var svg_el = this.$refs.genomeVuer.getBoundingClientRect() @@ -87,6 +90,9 @@ Vue.component("genome-viewer",{ }, methods:{ + lane(str){ + return (str=="+")? 1 : -1 + }, 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 @@ -103,7 +109,10 @@ Vue.component("genome-viewer",{ 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 - }, + }, + genomeToPixel(pos){ + return (this.width*(pos - (this.axisStart - this.tickSize)))/this.length + }, featureClick (featureId) { console.log(featureId) } -- GitLab From 27fa406969be18946f01dc04dc9b4c06567d02c2 Mon Sep 17 00:00:00 2001 From: Raphael Mueller Date: Thu, 18 Oct 2018 11:08:07 +0200 Subject: [PATCH 09/13] feature correct y position. axis a little bit wider --- genome-vuer/src/js/axis.js | 4 ++-- genome-vuer/src/js/genome_viewer.js | 16 +++++++++++----- 2 files changed, 13 insertions(+), 7 deletions(-) diff --git a/genome-vuer/src/js/axis.js b/genome-vuer/src/js/axis.js index 1a41890..209c2e5 100644 --- a/genome-vuer/src/js/axis.js +++ b/genome-vuer/src/js/axis.js @@ -34,7 +34,7 @@ Vue.component( "axis", { }, methods: { genomeToPixel( pos ) { - return (pos-(this.start-this.tickSize))/(this.length) * this.width + return (this.width*(pos-this.start))/(this.length) } }, computed:{ @@ -52,7 +52,7 @@ Vue.component( "axis", { //return Math.pow( 10, Math.round( Math.log10( this.genomeSectionSize / this.noTicks ) ) ) // axis tick size in log 10 bp }, noTicks(){ - return Math.ceil(this.length/this.tickSize) + return Math.floor(this.length/this.tickSize)+2 }, ticks(){ const firstTickPos = Math.round(this.start/this.tickSize)*this.tickSize//Math.pow( 10, Math.floor( Math.log10( this.start ) ) ) diff --git a/genome-vuer/src/js/genome_viewer.js b/genome-vuer/src/js/genome_viewer.js index c072bc3..e4c34f5 100644 --- a/genome-vuer/src/js/genome_viewer.js +++ b/genome-vuer/src/js/genome_viewer.js @@ -15,7 +15,7 @@ Vue.component("genome-viewer",{ - + @@ -51,16 +51,22 @@ Vue.component("genome-viewer",{ starts(){ return this.featureData.map(f => f.start) }, - axisStart(){ + genomeStart(){ return Math.min(...this.starts) }, - axisStop(){ + genomeStop(){ return Math.max(...this.stops) }, + axisStart(){ + return this.genomeStart - this.tickSize + }, + axisStop(){ + return this.genomeStop + this.tickSize + }, genome_size(){}, length(){ if(this.genomeStats.start < this.genomeStats.end){ - return this.axisStop - this.axisStart + return this.genomeStop - this.genomeStart }else{ // TODO: if genome is circular } @@ -111,7 +117,7 @@ Vue.component("genome-viewer",{ return (this.width*param)/100 }, genomeToPixel(pos){ - return (this.width*(pos - (this.axisStart - this.tickSize)))/this.length + return (this.width*(pos - (this.axisStart)))/(this.length+2*this.tickSize) }, featureClick (featureId) { console.log(featureId) -- GitLab From 208db83c5154487e57b39cc3ae66f258c023a4a0 Mon Sep 17 00:00:00 2001 From: Raphael Mueller Date: Mon, 22 Oct 2018 19:46:59 +0200 Subject: [PATCH 10/13] colorMap --- genome-vuer/src/js/app.js | 5 +---- genome-vuer/src/js/genome_viewer.js | 35 ++++++++++++++++++++++++++++- 2 files changed, 35 insertions(+), 5 deletions(-) diff --git a/genome-vuer/src/js/app.js b/genome-vuer/src/js/app.js index 8e0a707..4689951 100644 --- a/genome-vuer/src/js/app.js +++ b/genome-vuer/src/js/app.js @@ -95,7 +95,6 @@ var app = new Vue({ end: 1716321, strand: '+', type: "gene", - color: '#454aff', color_border: '#000000' }, { name: "Gene 11", @@ -103,9 +102,7 @@ var app = new Vue({ start: 1717235, end: 1718084, strand: '-', - type: "gene", - color: '#454aff', - color_border: '#000000' + type: "rRNA" } ] } diff --git a/genome-vuer/src/js/genome_viewer.js b/genome-vuer/src/js/genome_viewer.js index e4c34f5..ea18317 100644 --- a/genome-vuer/src/js/genome_viewer.js +++ b/genome-vuer/src/js/genome_viewer.js @@ -15,7 +15,7 @@ Vue.component("genome-viewer",{ - + @@ -43,6 +43,24 @@ Vue.component("genome-viewer",{ } } }, + defaultColor: { + default: "#000000" + }, + defaultBorderColor: { + default: "#000000" + }, + colorMap: { + default: function(){ + return { + 'region':'#bdbdbd', // greyLighten + 'gene':'#757575', // greyDarken + 'cds': '#000000', // black + 'rRNA': '#795548', // brown + 'tRNA': '#4caf50', // green + 'ncRNA': '#ff9800' // orange + } + } + }, }, computed:{ stops(){ @@ -96,6 +114,21 @@ Vue.component("genome-viewer",{ }, methods:{ + getColor(feature){ + if(feature.hasOwnProperty("color")){ + return feature.color + }else{ + if(feature.hasOwnProperty("type")){ + if(this.colorMap.hasOwnProperty(feature.type)){ + return this.colorMap[feature.type] + }else{ + return this.defaultColor + } + }else { + return this.defaultColor + } + } + }, lane(str){ return (str=="+")? 1 : -1 }, -- GitLab From 736f619ab4cdaf915515476433a5e4ac62f96199 Mon Sep 17 00:00:00 2001 From: Patrick Barth Date: Tue, 23 Oct 2018 08:01:56 +0200 Subject: [PATCH 11/13] add functions to generate tooltip string --- genome-vuer/src/js/genome_viewer.js | 21 ++++++++++++++++++++- 1 file changed, 20 insertions(+), 1 deletion(-) diff --git a/genome-vuer/src/js/genome_viewer.js b/genome-vuer/src/js/genome_viewer.js index ea18317..6f896c0 100644 --- a/genome-vuer/src/js/genome_viewer.js +++ b/genome-vuer/src/js/genome_viewer.js @@ -154,7 +154,26 @@ Vue.component("genome-viewer",{ }, featureClick (featureId) { console.log(featureId) - } + }, + 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 ) ) + }, }, data: function(){ return { -- GitLab From afb3f20942c5c19332fd6ed46d4a1f0c87cd8a2e Mon Sep 17 00:00:00 2001 From: Patrick Barth Date: Tue, 23 Oct 2018 08:02:38 +0200 Subject: [PATCH 12/13] add test tooltip template --- genome-vuer/src/js/app.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/genome-vuer/src/js/app.js b/genome-vuer/src/js/app.js index 4689951..0008775 100644 --- a/genome-vuer/src/js/app.js +++ b/genome-vuer/src/js/app.js @@ -5,7 +5,7 @@ var app = new Vue({ id: "my-genome", start: 1706479, end: 1718084, - tooltip: null + tooltip: "name: {name}
description: {description}
start: {start}
end: {end}" }, feature_data: [ { name: "Gene 1", -- GitLab From 0fb77945447fb422324aec0597faa9ac0a6e6d24 Mon Sep 17 00:00:00 2001 From: Patrick Blumenkamp Date: Tue, 23 Oct 2018 16:08:19 +0200 Subject: [PATCH 13/13] add hover event --- genome-vuer/src/js/feature.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/genome-vuer/src/js/feature.js b/genome-vuer/src/js/feature.js index 0ff74ee..9cc4f0c 100644 --- a/genome-vuer/src/js/feature.js +++ b/genome-vuer/src/js/feature.js @@ -2,7 +2,7 @@ Vue.component("feature",{ template: ` - + `, props: ['svgWidth', 'svgHeight', 'svgX', 'svgY', 'color', 'borderColor', 'featureId'], @@ -30,6 +30,9 @@ Vue.component("feature",{ methods: { clickEvent (evt) { this.$emit('click', this.featureId) + }, + hoverEvent (evt) { + this.$emit('hover', this.featureId) } }, data: function(){ -- GitLab