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
f81f14c0
Commit
f81f14c0
authored
May 28, 2019
by
Remi PLANEL
Browse files
Resize the brush when the width is too large
parent
bf6362fc
Changes
1
Hide whitespace changes
Inline
Side-by-side
src/scripts/component/rules/brushable-chromosome-rule.ts
View file @
f81f14c0
import
{
BrushableAxisData
,
GenericAxisData
}
from
"
../../types
"
;
import
{
select
,
Selection
}
from
"
d3-selection
"
;
import
{
select
,
Selection
,
event
}
from
"
d3-selection
"
;
import
{
scaleLinear
}
from
"
d3-scale
"
;
import
GenomeAxis
from
"
./chromosome-rule
"
;
import
{
brushX
,
BrushBehavior
}
from
"
d3-brush
"
;
import
{
format
}
from
"
d3-format
"
;
export
default
function
()
{
const
genomeAxisComponent
=
GenomeAxis
();
...
...
@@ -12,24 +13,57 @@ export default function () {
brushSelection
:
"
brush-selection
"
};
const
tickFormat
=
format
(
"
.3s
"
);
const
brushHeight
=
50
;
function
globalGenomeAxis
(
_selection
:
Selection
<
SVGElement
,
BrushableAxisData
,
SVGElement
,
any
>
,
width
:
number
,
yPosition
:
number
yPosition
:
number
,
)
{
_selection
.
each
(
function
(
_data
)
{
const
xScale
=
scaleLinear
()
.
domain
(
_data
.
interval
)
const
{
interval
,
maxWindowSize
}
=
_data
;
const
genomicToPx
=
scaleLinear
()
.
domain
(
interval
)
.
range
([
0
,
width
]);
const
brush
:
BrushBehavior
<
any
>
=
brushX
()
.
extent
([[
0
,
0
],
[
width
,
50
]])
.
extent
([[
0
,
0
],
[
width
,
brushHeight
]])
.
on
(
"
brush
"
,
()
=>
{
const
{
selection
:
[
start
,
end
]
}
=
event
;
globalAxisUpdate
.
select
(
"
.brush-selection-boundaries
"
)
.
select
(
"
text.start
"
)
.
style
(
"
text-anchor
"
,
"
end
"
)
.
attr
(
"
transform
"
,
"
translate(
"
+
start
+
"
,
"
+
(
brushHeight
+
10
)
+
"
)
"
)
.
text
(
tickFormat
(
genomicToPx
.
invert
(
start
)));
globalAxisUpdate
.
select
(
"
.brush-selection-boundaries
"
)
.
select
(
"
text.end
"
)
.
attr
(
"
transform
"
,
"
translate(
"
+
end
+
"
,
"
+
(
brushHeight
+
10
)
+
"
)
"
)
.
style
(
"
text-anchor
"
,
"
start
"
)
.
text
(
tickFormat
(
genomicToPx
.
invert
(
end
)));
if
(
_data
.
eventHandler
)
{
_data
.
eventHandler
.
brushed
(
genomeAxisComponent
.
scale
())
_data
.
eventHandler
.
brushed
(
genomicToPx
)
}
})
.
on
(
"
end
"
,
function
()
{
const
{
selection
:
[
pxStart
,
pxEnd
]
}
=
event
;
const
currentGenomicWindowSize
=
Math
.
ceil
(
genomicToPx
.
invert
(
pxEnd
)
-
genomicToPx
.
invert
(
pxStart
));
const
maxPixelWindowSize
=
Math
.
floor
(
genomicToPx
(
maxWindowSize
));
if
(
currentGenomicWindowSize
>
maxWindowSize
)
{
const
roundedStart
=
Math
.
ceil
(
pxStart
);
brushSelection
.
transition
()
.
duration
(
400
)
.
call
(
brush
.
move
,
[
roundedStart
,
roundedStart
+
maxPixelWindowSize
])
}
});
const
container
=
select
(
this
)
.
attr
(
"
transform
"
,
"
translate(0,
"
+
yPosition
+
"
)
"
);
const
globalAxis
=
container
...
...
@@ -45,24 +79,39 @@ export default function () {
.
classed
(
htmlClassName
.
genericRule
,
true
);
globalAxisEnter
.
append
(
"
g
"
)
.
attr
(
"
transform
"
,
"
translate(0,25)
"
)
const
brushSelectionEnter
=
globalAxisEnter
.
append
(
"
g
"
)
.
attr
(
"
transform
"
,
"
translate(0,25)
"
);
brushSelectionEnter
.
append
(
"
g
"
)
.
classed
(
htmlClassName
.
brushSelection
,
true
);
const
boundaries
=
brushSelectionEnter
.
append
(
"
g
"
)
.
style
(
"
font-size
"
,
"
9
"
)
.
classed
(
"
brush-selection-boundaries
"
,
true
)
boundaries
.
append
(
"
text
"
).
classed
(
"
start
"
,
true
);
boundaries
.
append
(
"
text
"
).
classed
(
"
end
"
,
true
);
globalAxis
.
exit
().
remove
();
const
globalAxisUpdate
=
globalAxis
.
merge
(
globalAxisEnter
);
globalAxisUpdate
.
select
<
any
>
(
"
.
"
+
htmlClassName
.
brushSelection
)
const
brushSelection
=
globalAxisUpdate
.
select
<
any
>
(
"
.
"
+
htmlClassName
.
brushSelection
);
brushSelection
.
call
(
brush
)
.
call
(
brush
.
move
,
[
xScale
(
_data
.
window
[
0
]),
xScale
(
_data
.
window
[
1
])]);
.
call
(
brush
.
move
,
[
genomicToPx
(
_data
.
window
[
0
]),
genomicToPx
(
_data
.
window
[
1
])]);
globalAxisUpdate
.
select
<
SVGElement
>
(
"
.
"
+
htmlClassName
.
genericRule
)
.
datum
((
d
:
BrushableAxisData
):
GenericAxisData
=>
({
title
:
d
.
title
,
interval
:
[
d
.
interval
[
0
],
d
.
interval
[
1
]]
}))
.
call
(
genomeAxisComponent
,
width
,
yPosition
);
});
}
return
globalGenomeAxis
;
...
...
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