Skip to content
GitLab
Menu
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
8664afa7
Commit
8664afa7
authored
Jun 04, 2019
by
Remi PLANEL
Browse files
New layout that transform State data to genomeBrowserData
parent
253d6eb6
Changes
2
Hide whitespace changes
Inline
Side-by-side
src/scripts/layout/genome-browser.ts
0 → 100644
View file @
8664afa7
import
{
State
,
GeneData
}
from
"
../types
"
;
import
{
event
}
from
"
d3-selection
"
;
import
{
format
as
d3Format
}
from
"
d3-format
"
;
import
{
scaleOrdinal
}
from
"
d3-scale
"
;
import
{
color
}
from
"
d3
"
;
import
{
schemeSet1
}
from
"
d3-scale-chromatic
"
;
const
geneColor
=
scaleOrdinal
(
// schemeDark2
// schemeCategory10
schemeSet1
);
export
default
function
genomeBrowserData
(
state
:
State
,
brushHandler
:
any
,
clickHandler
:
any
)
{
const
{
window
,
width
,
chromosomeSize
,
genes
,
chromosome
:
{
title
:
chromosomeTitle
},
selectedChromosome
:
{
title
:
selectedChromosomeTitle
}
}
=
state
;
const
intervalFormatter
=
d3Format
(
"
.3s
"
);
const
chromInterval
:
[
number
,
number
]
=
[
0
,
chromosomeSize
]
return
{
width
,
chromosome
:
{
size
:
chromosomeSize
,
genes
,
ruler
:
{
title
:
chromosomeTitle
+
"
(
"
+
chromosomeSize
+
"
bp)
"
,
interval
:
chromInterval
,
window
,
maxWindowSize
:
chromosomeSize
,
eventHandler
:
{
brushed
:
(
scale
:
any
)
=>
brushHandler
(
scale
,
state
)
}
}
},
selectedChromosome
:
{
window
,
genes
:
state
.
genes
.
filter
(
(
gene
:
GeneData
)
=>
gene
.
end
>
window
[
0
]
&&
gene
.
begin
<
window
[
1
]
).
map
(
function
(
gene
)
{
const
fill
=
color
(
geneColor
(
gene
.
strand
));
const
stroke
=
(
fill
)
?
fill
.
darker
(
1
).
toString
()
:
"
lighgray
"
;
return
{
...
gene
,
eventHandler
:
{
click
:
(
geneLocation
:
[
number
,
number
])
=>
clickHandler
(
geneLocation
,
state
)
},
fill
:
(
fill
)
?
fill
.
toString
()
:
"
lightgray
"
,
stroke
}
}),
ruler
:
{
title
:
selectedChromosomeTitle
+
"
[
"
+
intervalFormatter
(
window
[
0
])
+
"
,
"
+
intervalFormatter
(
window
[
1
])
+
"
]
"
,
interval
:
window
}
},
}
}
src/scripts/main-genome-browser.ts
View file @
8664afa7
import
{
GeneData
,
GenomeBrowserData
,
State
}
from
"
./types
"
;
import
{
select
,
event
}
from
"
d3-selection
"
;
import
{
select
,
event
,
BaseEvent
,
ClientPointEvent
}
from
"
d3-selection
"
;
import
{
scaleOrdinal
}
from
"
d3-scale
"
;
import
GenomeBrowser
from
"
./component/genome-browser
"
;
import
{
color
}
from
"
d3
"
;
import
{
format
as
d3Format
}
from
"
d3-format
"
;
import
{
schemeSet1
}
from
"
d3-scale-chromatic
"
;
import
genomeBrowserLayout
from
"
./layout/genome-browser
"
;
const
width
=
1500
;
const
height
=
300
;
...
...
@@ -115,80 +117,31 @@ select("#zoom-out").on("click", function () {
function
draw
()
{
//
const
computedGenomeBrowserData
:
GenomeBrowserData
=
getGenomeBrowserData
(
state
);
genomeBrowserLayout
(
state
,
brushHandler
,
clickHandler
);
genomeBrowsers
.
datum
([
computedGenomeBrowserData
])
.
call
(
genomeBrowserComponent
,
width
,
height
);
}
function
getGenomeBrowserData
(
state
:
State
)
{
const
{
window
,
width
,
chromosomeSize
,
genes
,
chromosome
:
{
title
:
chromosomeTitle
},
selectedChromosome
:
{
title
:
selectedChromosomeTitle
}
}
=
state
;
const
intervalFormatter
=
d3Format
(
"
.3s
"
);
// Callback when brushed => modify data and redraw the genome + axis
const
brushedCallback
=
function
(
scale
:
any
)
{
if
(
!
event
.
sourceEvent
)
return
;
if
(
event
.
selection
)
{
const
{
selection
:
[
x1
,
x2
]
}
=
event
;
const
newwindow
:
[
number
,
number
]
=
[
scale
.
invert
(
x1
),
scale
.
invert
(
x2
)];
state
.
window
=
newwindow
;
genomeBrowserComponent
.
updateSelectedChromosome
(
getGenomeBrowserData
(
state
)
);
}
};
const
clickHandler
=
function
([
begin
,
end
]:
[
number
,
number
])
{
const
centerGene
=
(
end
+
begin
)
/
2
;
const
sizeWindow
=
window
[
1
]
-
window
[
0
];
state
.
window
=
[
centerGene
-
sizeWindow
/
2
,
centerGene
+
sizeWindow
/
2
];
draw
();
};
const
chromInterval
:
[
number
,
number
]
=
[
0
,
chromosomeSize
]
return
{
width
,
chromosome
:
{
size
:
chromosomeSize
,
genes
,
ruler
:
{
title
:
chromosomeTitle
+
"
(
"
+
chromosomeSize
+
"
bp)
"
,
interval
:
chromInterval
,
window
,
maxWindowSize
:
chromosomeSize
,
eventHandler
:
{
brushed
:
brushedCallback
}
}
},
selectedChromosome
:
{
window
,
genes
:
genes
.
filter
(
(
gene
:
GeneData
)
=>
gene
.
end
>
window
[
0
]
&&
gene
.
begin
<
window
[
1
]
).
map
(
function
(
gene
)
{
const
fill
=
color
(
geneColor
(
gene
.
strand
));
const
stroke
=
(
fill
)
?
fill
.
darker
(
1
).
toString
()
:
"
lighgray
"
;
return
{
...
gene
,
eventHandler
:
{
click
:
clickHandler
},
fill
:
(
fill
)
?
fill
.
toString
()
:
"
lightgray
"
,
stroke
}
}),
ruler
:
{
title
:
selectedChromosomeTitle
+
"
[
"
+
intervalFormatter
(
window
[
0
])
+
"
,
"
+
intervalFormatter
(
window
[
1
])
+
"
]
"
,
interval
:
window
}
},
function
clickHandler
([
begin
,
end
]:
[
number
,
number
],
state
:
State
)
{
const
centerGene
=
(
end
+
begin
)
/
2
;
const
sizeWindow
=
state
.
window
[
1
]
-
state
.
window
[
0
];
state
.
window
=
[
centerGene
-
sizeWindow
/
2
,
centerGene
+
sizeWindow
/
2
];
draw
();
}
function
brushHandler
(
scale
:
any
,
state
:
State
)
{
if
(
!
event
.
sourceEvent
)
return
;
if
(
event
.
selection
)
{
const
{
selection
:
[
x1
,
x2
]
}
=
event
;
const
newwindow
:
[
number
,
number
]
=
[
scale
.
invert
(
x1
),
scale
.
invert
(
x2
)];
state
.
window
=
newwindow
;
genomeBrowserComponent
.
updateSelectedChromosome
(
genomeBrowserLayout
(
state
,
brushHandler
,
clickHandler
)
);
}
}
Write
Preview
Supports
Markdown
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