Skip to content
GitLab
Projects
Groups
Snippets
Help
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
B
bioviz-js
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Issues
2
Issues
2
List
Boards
Labels
Service Desk
Milestones
Merge Requests
1
Merge Requests
1
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Operations
Operations
Incidents
Environments
Packages & Registries
Packages & Registries
Container Registry
Analytics
Analytics
CI / CD
Repository
Value Stream
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
Remi PLANEL
bioviz-js
Commits
f9a2de21
Commit
f9a2de21
authored
May 29, 2019
by
Remi PLANEL
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Class name: rule -> ruler
parent
5897a8c4
Changes
5
Hide whitespace changes
Inline
Side-by-side
Showing
5 changed files
with
15 additions
and
15 deletions
+15
-15
src/scripts/component/genome-browser.ts
src/scripts/component/genome-browser.ts
+6
-6
src/scripts/component/ruler/brushable-chromosome.ts
src/scripts/component/ruler/brushable-chromosome.ts
+4
-4
src/scripts/main-genome-browser.ts
src/scripts/main-genome-browser.ts
+2
-2
src/scripts/types.ts
src/scripts/types.ts
+2
-2
tests/brushable-chromosome.test.ts
tests/brushable-chromosome.test.ts
+1
-1
No files found.
src/scripts/component/genome-browser.ts
View file @
f9a2de21
...
@@ -10,7 +10,7 @@ import { GenomeBrowserData, BrushableAxisData, SelectedChromosomeData } from "..
...
@@ -10,7 +10,7 @@ import { GenomeBrowserData, BrushableAxisData, SelectedChromosomeData } from "..
export
default
function
()
{
export
default
function
()
{
const
classes
=
{
const
classes
=
{
chromosomeRule
:
"
chromosome-rule
"
,
chromosomeRule
r
:
"
chromosome-ruler
"
,
selectedChromosome
:
"
selected-chromosomes
"
selectedChromosome
:
"
selected-chromosomes
"
};
};
const
wholeChromosomeRule
=
BrushableChromosomeRule
();
const
wholeChromosomeRule
=
BrushableChromosomeRule
();
...
@@ -37,7 +37,7 @@ export default function () {
...
@@ -37,7 +37,7 @@ export default function () {
.
append
<
SVGElement
>
(
"
g
"
)
.
append
<
SVGElement
>
(
"
g
"
)
.
classed
(
"
genome-browser
"
,
true
);
.
classed
(
"
genome-browser
"
,
true
);
genomeBrowserE
.
append
(
"
g
"
).
classed
(
classes
.
chromosomeRule
,
true
);
genomeBrowserE
.
append
(
"
g
"
).
classed
(
classes
.
chromosomeRule
r
,
true
);
genomeBrowserE
.
append
(
"
g
"
)
genomeBrowserE
.
append
(
"
g
"
)
.
classed
(
classes
.
selectedChromosome
,
true
)
.
classed
(
classes
.
selectedChromosome
,
true
)
.
attr
(
"
transform
"
,
"
translate(0,70)
"
);
.
attr
(
"
transform
"
,
"
translate(0,70)
"
);
...
@@ -51,8 +51,8 @@ export default function () {
...
@@ -51,8 +51,8 @@ export default function () {
genomesBrowserU
.
each
(
function
(
data
)
{
genomesBrowserU
.
each
(
function
(
data
)
{
const
{
const
{
chromosome
:
{
rule
:
chromosomeRule
},
chromosome
:
{
rule
r
:
chromosomeRule
},
selectedChromosome
:
{
genes
:
selectedGenes
,
rule
:
selectedChromosomeRule
},
selectedChromosome
:
{
genes
:
selectedGenes
,
rule
r
:
selectedChromosomeRule
},
// axis: { chromosome, global }
// axis: { chromosome, global }
}
=
data
;
}
=
data
;
updateWholeChromosomeAxis
(
chromosomeRule
);
updateWholeChromosomeAxis
(
chromosomeRule
);
...
@@ -64,7 +64,7 @@ export default function () {
...
@@ -64,7 +64,7 @@ export default function () {
function
updateSelectedChromosome
(
data
:
GenomeBrowserData
)
{
function
updateSelectedChromosome
(
data
:
GenomeBrowserData
)
{
if
(
genomesBrowserU
!==
null
)
{
if
(
genomesBrowserU
!==
null
)
{
genomesBrowserU
genomesBrowserU
.
select
<
SVGElement
>
(
"
.
"
+
classes
.
selectedChromosome
)
.
select
<
SVG
G
Element
>
(
"
.
"
+
classes
.
selectedChromosome
)
.
datum
<
SelectedChromosomeData
[]
>
([
data
.
selectedChromosome
])
.
datum
<
SelectedChromosomeData
[]
>
([
data
.
selectedChromosome
])
.
call
(
selectedChromosomeComponent
,
width
);
.
call
(
selectedChromosomeComponent
,
width
);
}
}
...
@@ -73,7 +73,7 @@ export default function () {
...
@@ -73,7 +73,7 @@ export default function () {
function
updateWholeChromosomeAxis
(
axis
:
BrushableAxisData
)
{
function
updateWholeChromosomeAxis
(
axis
:
BrushableAxisData
)
{
if
(
genomesBrowserU
)
{
if
(
genomesBrowserU
)
{
genomesBrowserU
genomesBrowserU
.
select
<
SVGGElement
>
(
"
.
"
+
classes
.
chromosomeRule
)
.
select
<
SVGGElement
>
(
"
.
"
+
classes
.
chromosomeRule
r
)
.
datum
(
axis
)
.
datum
(
axis
)
.
call
(
wholeChromosomeRule
,
width
,
0
);
.
call
(
wholeChromosomeRule
,
width
,
0
);
}
}
...
...
src/scripts/component/ruler/brushable-chromosome.ts
View file @
f9a2de21
...
@@ -8,8 +8,8 @@ import { format } from "d3-format";
...
@@ -8,8 +8,8 @@ import { format } from "d3-format";
export
default
function
()
{
export
default
function
()
{
const
genomeAxisComponent
=
GenomeAxis
();
const
genomeAxisComponent
=
GenomeAxis
();
const
htmlClassName
=
{
const
htmlClassName
=
{
componentContainer
:
"
whole-chromosome-rule
"
,
componentContainer
:
"
whole-chromosome-rule
r
"
,
genericRule
:
"
generic-rule
"
,
genericRule
r
:
"
generic-ruler
"
,
brushSelection
:
"
brush-selection
"
brushSelection
:
"
brush-selection
"
};
};
...
@@ -76,7 +76,7 @@ export default function () {
...
@@ -76,7 +76,7 @@ export default function () {
.
classed
(
htmlClassName
.
componentContainer
,
true
);
.
classed
(
htmlClassName
.
componentContainer
,
true
);
globalAxisEnter
.
append
(
"
g
"
)
globalAxisEnter
.
append
(
"
g
"
)
.
classed
(
htmlClassName
.
genericRule
,
true
);
.
classed
(
htmlClassName
.
genericRule
r
,
true
);
const
brushSelectionEnter
=
globalAxisEnter
.
append
(
"
g
"
)
const
brushSelectionEnter
=
globalAxisEnter
.
append
(
"
g
"
)
...
@@ -105,7 +105,7 @@ export default function () {
...
@@ -105,7 +105,7 @@ export default function () {
.
call
(
brush
.
move
,
[
genomicToPx
(
_data
.
window
[
0
]),
genomicToPx
(
_data
.
window
[
1
])]);
.
call
(
brush
.
move
,
[
genomicToPx
(
_data
.
window
[
0
]),
genomicToPx
(
_data
.
window
[
1
])]);
globalAxisUpdate
globalAxisUpdate
.
select
<
SVGGElement
>
(
"
.
"
+
htmlClassName
.
genericRule
)
.
select
<
SVGGElement
>
(
"
.
"
+
htmlClassName
.
genericRule
r
)
.
datum
((
d
:
BrushableAxisData
):
GenericAxisData
=>
({
title
:
d
.
title
,
interval
:
[
d
.
interval
[
0
],
d
.
interval
[
1
]]
}))
.
datum
((
d
:
BrushableAxisData
):
GenericAxisData
=>
({
title
:
d
.
title
,
interval
:
[
d
.
interval
[
0
],
d
.
interval
[
1
]]
}))
.
call
(
genomeAxisComponent
,
width
,
yPosition
);
.
call
(
genomeAxisComponent
,
width
,
yPosition
);
...
...
src/scripts/main-genome-browser.ts
View file @
f9a2de21
...
@@ -155,7 +155,7 @@ function getGenomeBrowserData(state: State) {
...
@@ -155,7 +155,7 @@ function getGenomeBrowserData(state: State) {
chromosome
:
{
chromosome
:
{
size
:
chromosomeSize
,
size
:
chromosomeSize
,
genes
,
genes
,
rule
:
{
rule
r
:
{
title
:
chromosomeTitle
+
"
(
"
+
chromosomeSize
+
"
bp)
"
,
title
:
chromosomeTitle
+
"
(
"
+
chromosomeSize
+
"
bp)
"
,
interval
:
chromInterval
,
interval
:
chromInterval
,
window
,
window
,
...
@@ -181,7 +181,7 @@ function getGenomeBrowserData(state: State) {
...
@@ -181,7 +181,7 @@ function getGenomeBrowserData(state: State) {
stroke
stroke
}
}
}),
}),
rule
:
{
rule
r
:
{
title
:
selectedChromosomeTitle
title
:
selectedChromosomeTitle
+
"
[
"
+
intervalFormatter
(
window
[
0
])
+
"
,
"
+
intervalFormatter
(
window
[
1
])
+
"
]
"
,
+
"
[
"
+
intervalFormatter
(
window
[
0
])
+
"
,
"
+
intervalFormatter
(
window
[
1
])
+
"
]
"
,
interval
:
window
interval
:
window
...
...
src/scripts/types.ts
View file @
f9a2de21
...
@@ -52,7 +52,7 @@ export interface State {
...
@@ -52,7 +52,7 @@ export interface State {
export
interface
SelectedChromosomeData
{
export
interface
SelectedChromosomeData
{
window
:
[
number
,
number
],
window
:
[
number
,
number
],
genes
:
GeneData
[],
genes
:
GeneData
[],
rule
:
GenericAxisData
rule
r
:
GenericAxisData
}
}
export
interface
GenomeBrowserData
{
export
interface
GenomeBrowserData
{
...
@@ -61,7 +61,7 @@ export interface GenomeBrowserData {
...
@@ -61,7 +61,7 @@ export interface GenomeBrowserData {
chromosome
:
{
chromosome
:
{
size
:
number
,
size
:
number
,
genes
:
GeneData
[],
genes
:
GeneData
[],
rule
:
BrushableAxisData
rule
r
:
BrushableAxisData
},
},
selectedChromosome
:
SelectedChromosomeData
,
selectedChromosome
:
SelectedChromosomeData
,
eventHandler
?:
{
eventHandler
?:
{
...
...
tests/brushable-chromosome.test.ts
View file @
f9a2de21
...
@@ -4,7 +4,7 @@ import { select } from "d3-selection";
...
@@ -4,7 +4,7 @@ import { select } from "d3-selection";
describe
(
"
Test Chromosome Ruler
"
,
()
=>
{
describe
(
"
Test Chromosome Ruler
"
,
()
=>
{
const
result
=
'
<g class=
"whole-chromosome-rule"><g class="generic-rule" transform="translate(0,20)"><g class="genome-axis"><g class="title"><text style="fill: black; font-family: monospace;" transform="translate(830,20)">brushable chromosome</text></g><g class="axis-elems" transform="translate(0, 50)" fill="none" font-size="10" font-family="sans-serif" text-anchor="middle"><path class="domain" stroke="currentColor" d="M0.5,-6V0.5H1500.5V-6"></path><g class="tick" opacity="1" transform="translate(0.5,0)"><line stroke="currentColor" y2="-6"></line><text fill="currentColor" y="-9" dy="0em">0.00</text></g><g class="tick" opacity="1" transform="translate(150.5,0)"><line stroke="currentColor" y2="-6"></line><text fill="currentColor" y="-9" dy="0em">100k</text></g><g class="tick" opacity="1" transform="translate(300.5,0)"><line stroke="currentColor" y2="-6"></line><text fill="currentColor" y="-9" dy="0em">200k</text></g><g class="tick" opacity="1" transform="translate(450.5,0)"><line stroke="currentColor" y2="-6"></line><text fill="currentColor" y="-9" dy="0em">300k</text></g><g class="tick" opacity="1" transform="translate(600.5,0)"><line stroke="currentColor" y2="-6"></line><text fill="currentColor" y="-9" dy="0em">400k</text></g><g class="tick" opacity="1" transform="translate(750.5,0)"><line stroke="currentColor" y2="-6"></line><text fill="currentColor" y="-9" dy="0em">500k</text></g><g class="tick" opacity="1" transform="translate(900.5,0)"><line stroke="currentColor" y2="-6"></line><text fill="currentColor" y="-9" dy="0em">600k</text></g><g class="tick" opacity="1" transform="translate(1050.5,0)"><line stroke="currentColor" y2="-6"></line><text fill="currentColor" y="-9" dy="0em">700k</text></g><g class="tick" opacity="1" transform="translate(1200.5,0)"><line stroke="currentColor" y2="-6"></line><text fill="currentColor" y="-9" dy="0em">800k</text></g><g class="tick" opacity="1" transform="translate(1350.5,0)"><line stroke="currentColor" y2="-6"></line><text fill="currentColor" y="-9" dy="0em">900k</text></g><g class="tick" opacity="1" transform="translate(1500.5,0)"><line stroke="currentColor" y2="-6"></line><text fill="currentColor" y="-9" dy="0em">1.00M</text></g></g></g></g><g transform="translate(0,25)"><g class="brush-selection" fill="none" pointer-events="all"><rect class="overlay" pointer-events="all" cursor="crosshair" x="0" y="0" width="1500" height="50"></rect><rect class="selection" cursor="move" fill="#777" fill-opacity="0.3" stroke="#fff" shape-rendering="crispEdges" style="" x="150" y="0" width="75" height="50"></rect><rect class="handle handle--e" cursor="ew-resize" style="" x="222" y="-3" width="6" height="56"></rect><rect class="handle handle--w" cursor="ew-resize" style="" x="147" y="-3" width="6" height="56"></rect></g><g style="font-size: 9;" class="brush-selection-boundaries"><text class="start" style="text-anchor: end;" transform="translate(150,60)">100k</text><text class="end" transform="translate(225,60)" style="text-anchor: start;">150k</text></g></g></g>
'
const
result
=
'
<g class=
\
"whole-chromosome-ruler
\
"><g class=
\
"generic-ruler
\
" transform=
\
"translate(0,20)
\
"><g class=
\
"genome-axis
\
"><g class=
\
"title
\
"><text style=
\
"fill: black; font-family: monospace;
\
" transform=
\
"translate(830,20)
\
">brushable chromosome</text></g><g class=
\
"axis-elems
\
" transform=
\
"translate(0, 50)
\
" fill=
\
"none
\
" font-size=
\
"10
\
" font-family=
\
"sans-serif
\
" text-anchor=
\
"middle
\
"><path class=
\
"domain
\
" stroke=
\
"currentColor
\
" d=
\
"M0.5,-6V0.5H1500.5V-6
\
"></path><g class=
\
"tick
\
" opacity=
\
"1
\
" transform=
\
"translate(0.5,0)
\
"><line stroke=
\
"currentColor
\
" y2=
\
"-6
\
"></line><text fill=
\
"currentColor
\
" y=
\
"-9
\
" dy=
\
"0em
\
">0.00</text></g><g class=
\
"tick
\
" opacity=
\
"1
\
" transform=
\
"translate(150.5,0)
\
"><line stroke=
\
"currentColor
\
" y2=
\
"-6
\
"></line><text fill=
\
"currentColor
\
" y=
\
"-9
\
" dy=
\
"0em
\
">100k</text></g><g class=
\
"tick
\
" opacity=
\
"1
\
" transform=
\
"translate(300.5,0)
\
"><line stroke=
\
"currentColor
\
" y2=
\
"-6
\
"></line><text fill=
\
"currentColor
\
" y=
\
"-9
\
" dy=
\
"0em
\
">200k</text></g><g class=
\
"tick
\
" opacity=
\
"1
\
" transform=
\
"translate(450.5,0)
\
"><line stroke=
\
"currentColor
\
" y2=
\
"-6
\
"></line><text fill=
\
"currentColor
\
" y=
\
"-9
\
" dy=
\
"0em
\
">300k</text></g><g class=
\
"tick
\
" opacity=
\
"1
\
" transform=
\
"translate(600.5,0)
\
"><line stroke=
\
"currentColor
\
" y2=
\
"-6
\
"></line><text fill=
\
"currentColor
\
" y=
\
"-9
\
" dy=
\
"0em
\
">400k</text></g><g class=
\
"tick
\
" opacity=
\
"1
\
" transform=
\
"translate(750.5,0)
\
"><line stroke=
\
"currentColor
\
" y2=
\
"-6
\
"></line><text fill=
\
"currentColor
\
" y=
\
"-9
\
" dy=
\
"0em
\
">500k</text></g><g class=
\
"tick
\
" opacity=
\
"1
\
" transform=
\
"translate(900.5,0)
\
"><line stroke=
\
"currentColor
\
" y2=
\
"-6
\
"></line><text fill=
\
"currentColor
\
" y=
\
"-9
\
" dy=
\
"0em
\
">600k</text></g><g class=
\
"tick
\
" opacity=
\
"1
\
" transform=
\
"translate(1050.5,0)
\
"><line stroke=
\
"currentColor
\
" y2=
\
"-6
\
"></line><text fill=
\
"currentColor
\
" y=
\
"-9
\
" dy=
\
"0em
\
">700k</text></g><g class=
\
"tick
\
" opacity=
\
"1
\
" transform=
\
"translate(1200.5,0)
\
"><line stroke=
\
"currentColor
\
" y2=
\
"-6
\
"></line><text fill=
\
"currentColor
\
" y=
\
"-9
\
" dy=
\
"0em
\
">800k</text></g><g class=
\
"tick
\
" opacity=
\
"1
\
" transform=
\
"translate(1350.5,0)
\
"><line stroke=
\
"currentColor
\
" y2=
\
"-6
\
"></line><text fill=
\
"currentColor
\
" y=
\
"-9
\
" dy=
\
"0em
\
">900k</text></g><g class=
\
"tick
\
" opacity=
\
"1
\
" transform=
\
"translate(1500.5,0)
\
"><line stroke=
\
"currentColor
\
" y2=
\
"-6
\
"></line><text fill=
\
"currentColor
\
" y=
\
"-9
\
" dy=
\
"0em
\
">1.00M</text></g></g></g></g><g transform=
\
"translate(0,25)
\
"><g class=
\
"brush-selection
\
" fill=
\
"none
\
" pointer-events=
\
"all
\
"><rect class=
\
"overlay
\
" pointer-events=
\
"all
\
" cursor=
\
"crosshair
\
" x=
\
"0
\
" y=
\
"0
\
" width=
\
"1500
\
" height=
\
"50
\
"></rect><rect class=
\
"selection
\
" cursor=
\
"move
\
" fill=
\
"#777
\
" fill-opacity=
\
"0.3
\
" stroke=
\
"#fff
\
" shape-rendering=
\
"crispEdges
\
" style=
\
"
\
" x=
\
"150
\
" y=
\
"0
\
" width=
\
"75
\
" height=
\
"50
\
"></rect><rect class=
\
"handle handle--e
\
" cursor=
\
"ew-resize
\
" style=
\
"
\
" x=
\
"222
\
" y=
\
"-3
\
" width=
\
"6
\
" height=
\
"56
\
"></rect><rect class=
\
"handle handle--w
\
" cursor=
\
"ew-resize
\
" style=
\
"
\
" x=
\
"147
\
" y=
\
"-3
\
" width=
\
"6
\
" height=
\
"56
\
"></rect></g><g style=
\
"font-size: 9;
\
" class=
\
"brush-selection-boundaries
\
"><text class=
\
"start
\
" style=
\
"text-anchor: end;
\
" transform=
\
"translate(150,60)
\
">100k</text><text class=
\
"end
\
" transform=
\
"translate(225,60)
\
" style=
\
"text-anchor: start;
\
">150k</text></g></g></g>
'
;
const
brushableChromosomeRulerComponent
=
BrushableChromosomeRuler
();
const
brushableChromosomeRulerComponent
=
BrushableChromosomeRuler
();
document
.
body
.
innerHTML
=
document
.
body
.
innerHTML
=
'
<div><svg width="500"><g id="container"></g></svg></div>
'
;
'
<div><svg width="500"><g id="container"></g></svg></div>
'
;
...
...
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