Skip to content
GitLab
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
Remi PLANEL
bioviz-js
Commits
f5137deb
Commit
f5137deb
authored
Apr 03, 2019
by
Remi PLANEL
Browse files
Handle gene click event using rxjs and Observable
parent
3cc01018
Changes
2
Hide whitespace changes
Inline
Side-by-side
src/scripts/component/sequence/gene.ts
View file @
f5137deb
...
...
@@ -2,7 +2,8 @@ import { select, Selection } from "d3-selection"
import
{
ScaleLinear
,
scaleLinear
}
from
"
d3-scale
"
;
import
{
arrowShape
}
from
"
./gene-shapes
"
;
import
linearGene
from
"
../../layout/linear-gene
"
;
import
{
of
}
from
"
rxjs
"
;
import
{
mergeMap
}
from
"
rxjs/operators
"
;
type
Strand
=
"
+
"
|
"
-
"
;
...
...
@@ -12,6 +13,9 @@ export interface GeneData {
begin
:
number
,
end
:
number
,
gene
:
string
eventHandler
:
{
click
:
([
begin
,
end
]:
[
number
,
number
])
=>
void
}
}
export
interface
PositionedGeneData
extends
GeneData
{
position
:
{
...
...
@@ -61,6 +65,11 @@ export default function () {
:
null
)
.
attr
(
"
d
"
,
d
=>
arrowShape
(
d
,
geneHeight
))
.
on
(
"
click
"
,
d
=>
of
(
d
).
pipe
(
mergeMap
(
d
=>
of
<
[
number
,
number
]
>
([
d
.
begin
,
d
.
end
])
)
).
subscribe
(
d
.
eventHandler
.
click
)
);
})
}
return
gene
;
...
...
src/scripts/index.ts
View file @
f5137deb
import
GeneComponent
,
{
GeneData
}
from
"
./component/sequence/gene
"
;
import
GenomeAxis
from
"
./component/sequence/genome-axis
"
;
import
{
select
}
from
"
d3-selection
"
;
import
{
of
}
from
"
rxjs
"
;
const
width
=
1500
;
const
genomeWindowSize
=
6000
const
genes
:
Array
<
GeneData
>
=
[
{
name
:
"
gene 1
"
,
strand
:
"
-
"
,
begin
:
20815
,
end
:
21078
,
gene
:
"
insA
"
},
{
name
:
"
gene 2
"
,
strand
:
"
+
"
,
begin
:
21181
,
end
:
21399
,
gene
:
"
yaaY
"
},
{
name
:
"
gene 3
"
,
strand
:
"
+
"
,
begin
:
21407
,
end
:
22348
,
gene
:
"
ribF
"
},
{
name
:
"
gene 4
"
,
strand
:
"
+
"
,
begin
:
22391
,
end
:
25207
,
gene
:
"
ileS
"
}
]
const
genomeWindowSize
=
6000
;
const
geneComponent
=
GeneComponent
();
const
genomeAxis
=
GenomeAxis
();
const
svg
=
select
<
SVGSVGElement
,
any
>
(
"
svg
"
).
attr
(
"
width
"
,
width
+
100
).
attr
(
"
height
"
,
900
);
const
genomeAxisElem
=
svg
.
select
<
SVGElement
>
(
"
#axis
"
);
const
geneElem
=
svg
.
select
<
SVGElement
>
(
"
#genes
"
);
genomeAxisElem
.
datum
(
getGenomeWindow
(
23000
,
genomeWindowSize
))
.
call
(
genomeAxis
,
width
,
0
);
geneElem
.
datum
<
Array
<
GeneData
>>
(
genes
)
.
call
(
geneComponent
,
genomeAxis
.
scale
(),
40
);
const
clickHandler
=
([
begin
,
end
]:
[
number
,
number
])
=>
draw
((
end
+
begin
)
/
2
);
const
genes
:
Array
<
GeneData
>
=
[
{
name
:
"
gene 1
"
,
strand
:
"
-
"
,
begin
:
20815
,
end
:
21078
,
gene
:
"
insA
"
,
eventHandler
:
{
click
:
clickHandler
}
},
{
name
:
"
gene 2
"
,
strand
:
"
+
"
,
begin
:
21181
,
end
:
21399
,
gene
:
"
yaaY
"
,
eventHandler
:
{
click
:
clickHandler
}
},
{
name
:
"
gene 3
"
,
strand
:
"
+
"
,
begin
:
21407
,
end
:
22348
,
gene
:
"
ribF
"
,
eventHandler
:
{
click
:
clickHandler
}
},
{
name
:
"
gene 4
"
,
strand
:
"
+
"
,
begin
:
22391
,
end
:
25207
,
gene
:
"
ileS
"
,
eventHandler
:
{
click
:
clickHandler
}
}
]
function
draw
(
centerGenome
:
number
)
{
const
svg
=
select
<
SVGSVGElement
,
any
>
(
"
svg
"
).
attr
(
"
width
"
,
width
+
100
).
attr
(
"
height
"
,
900
);
const
genomeAxisElem
=
svg
.
select
<
SVGElement
>
(
"
#axis
"
);
const
geneElem
=
svg
.
select
<
SVGElement
>
(
"
#genes
"
);
genomeAxisElem
.
datum
(
getGenomeWindow
(
centerGenome
,
genomeWindowSize
))
.
call
(
genomeAxis
,
width
,
0
);
geneElem
.
datum
<
Array
<
GeneData
>>
(
genes
)
.
call
(
geneComponent
,
genomeAxis
.
scale
(),
40
);
}
draw
(
23000
);
function
getGenomeWindow
(
middle
:
number
,
genomeWindowSize
:
number
):
[
number
,
number
]
{
const
halfWindow
=
genomeWindowSize
/
2
;
return
[
middle
-
halfWindow
,
middle
+
halfWindow
]
...
...
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new 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