Skip to content
GitLab
Menu
Projects
Groups
Snippets
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
pbarth
Genome-viewer
Commits
ee4bfca2
Commit
ee4bfca2
authored
Dec 10, 2018
by
Raphael Müller
Browse files
Axis: Ticks with nice numbers
Ticks have nice numbers. Digit group separators added. Closes
#3
parent
abe151cc
Changes
2
Hide whitespace changes
Inline
Side-by-side
genome-vuer/src/js/app.js
View file @
ee4bfca2
...
...
@@ -199,56 +199,56 @@ var app = new Vue({
feature_data3
:
[
{
name
:
"
Gene 21
"
,
description
:
"
GMP synthase
"
,
start
:
170647
9
,
end
:
170802
4
,
start
:
170647
,
end
:
170802
,
strand
:
"
+
"
,
lane
:
1
,
type
:
"
gene
"
,
},
{
name
:
"
Gene 22
"
,
description
:
"
glyoxalase
"
,
start
:
170831
4
,
end
:
170867
1
,
start
:
170831
,
end
:
170867
,
lane
:
2
,
strand
:
"
+
"
,
type
:
"
xRNA
"
,
},
{
name
:
"
Gene 23
"
,
description
:
"
ABC transporter ATP-binding protein LlsG
"
,
start
:
170942
9
,
end
:
171031
7
,
start
:
170942
,
end
:
171031
,
lane
:
3
,
strand
:
'
-
'
,
type
:
"
gene
"
,
},
{
name
:
"
Gene 24
"
,
description
:
"
ABC transporter permease protein LlsH
"
,
start
:
171031
6
,
end
:
171106
6
,
start
:
171031
,
end
:
171106
,
lane
:
1
,
strand
:
'
+
'
,
type
:
"
gene
"
,
},
{
name
:
"
Gene 25
"
,
description
:
"
LlsX
"
,
start
:
171110
6
,
end
:
171142
4
,
start
:
171110
,
end
:
171142
,
strand
:
'
+
'
,
type
:
"
gene
"
,
lane
:
2
,
},
{
name
:
"
Gene 26
"
,
description
:
"
SagB family dehydrogenase LlsB
"
,
start
:
171142
0
,
end
:
171229
6
,
start
:
171142
,
end
:
171229
,
lane
:
3
,
strand
:
'
-
'
,
type
:
"
gene
"
,
},
{
name
:
"
Gene 27
"
,
description
:
"
LlsY
"
,
start
:
171230
3
,
end
:
171322
1
,
start
:
171230
,
end
:
171322
,
strand
:
'
-
'
,
type
:
"
gene
"
,
lane
:
1
,
...
...
@@ -256,32 +256,32 @@ var app = new Vue({
},
{
name
:
"
Gene 28
"
,
description
:
"
streptolysin-associated protein LlsD
"
,
start
:
171321
3
,
end
:
171452
7
,
start
:
171321
,
end
:
171452
,
strand
:
'
+
'
,
type
:
"
gene
"
,
lane
:
2
,
},
{
name
:
"
Gene 29
"
,
description
:
"
hypothetical protein
"
,
start
:
171535
1
,
end
:
171612
5
,
start
:
171535
,
end
:
171612
,
strand
:
'
+
'
,
type
:
"
gene
"
,
lane
:
3
,
},
{
name
:
"
Gene 210
"
,
description
:
"
glyoxalase family protein, N-terminal part
"
,
start
:
171618
9
,
end
:
171632
1
,
start
:
171618
,
end
:
171632
,
lane
:
1
,
strand
:
'
+
'
,
type
:
"
gene
"
,
},
{
name
:
"
Gene 211
"
,
description
:
"
hypothetical protein
"
,
start
:
171723
5
,
end
:
171808
4
,
start
:
171723
,
end
:
171808
,
lane
:
1
,
strand
:
'
-
'
,
type
:
"
rRNA
"
...
...
genome-vuer/src/js/axis.js
View file @
ee4bfca2
...
...
@@ -17,7 +17,7 @@ Vue.component( "axis", {
<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="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>
<text v-for="tick in ticks" :style="'font: '+vOffset+'px roboto;'"class="small" :x="tick.panelPos" :y="2*vOffset" text-anchor="middle" :fill="color">{{
posFormat(
tick.genomePos
)
}}</text>
</svg>
<!-- -->
`
,
...
...
@@ -36,9 +36,24 @@ Vue.component( "axis", {
methods
:
{
genomeToPixel
(
pos
)
{
return
(
this
.
width
*
(
pos
-
this
.
start
))
/
(
this
.
length
)
}
},
posFormat
(
pos
){
//https://stackoverflow.com/questions/2901102/how-to-print-a-number-with-commas-as-thousands-separators-in-javascript
p
=
pos
.
toString
()
if
(
this
.
kb
){
p
=
p
.
replace
(
/000$/
,
"
kb
"
)
}
else
{
p
=
p
+
"
bp
"
}
if
(
p
.
length
>
7
)
//https://en.wikipedia.org/wiki/Decimal_separator#Exceptions_to_digit_grouping
p
=
p
.
replace
(
/
\B(?=(\d{3})
+
(?!\d))
/g
,
"
,
"
);
return
p
},
},
computed
:{
kb
(){
//method to calc if kb or bp should be displayed
return
this
.
ticks
.
every
(
tick
=>
tick
.
genomePos
%
1000
==
0
)
},
style
(){
return
{
stroke
:
this
.
color
,
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment