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
a2f0b561
Commit
a2f0b561
authored
Apr 10, 2019
by
Remi PLANEL
Browse files
Change GenomeBrowserData type
parent
5979695a
Changes
3
Hide whitespace changes
Inline
Side-by-side
src/scripts/component/genome-browser.ts
View file @
a2f0b561
...
...
@@ -73,9 +73,13 @@ export default function () {
})
);
genomesBrowserU
.
each
(
function
(
data
)
{
const
{
chromosome
:
{
genes
},
axis
:
{
chromosome
,
global
}
}
=
data
;
updateWholeChromosomeAxis
(
global
);
updateSelectedChromosome
(
chromosome
,
genes
);
const
{
chromosome
:
{
rule
:
chromosomeRule
},
selectedChromosome
:
{
genes
:
selectedGenes
,
rule
:
selectedChromosomeRule
},
// axis: { chromosome, global }
}
=
data
;
updateWholeChromosomeAxis
(
chromosomeRule
);
updateSelectedChromosome
(
selectedChromosomeRule
,
selectedGenes
);
});
});
}
...
...
@@ -98,7 +102,7 @@ export default function () {
if
(
genomesBrowserU
)
{
genomesBrowserU
.
select
<
SVGElement
>
(
"
g.chromosome-axis
"
)
.
datum
(
({
axis
:
{
global
}
})
=>
global
)
.
datum
(
axis
)
.
call
(
wholeChromosomeRule
,
width
,
0
);
}
}
...
...
src/scripts/index.ts
View file @
a2f0b561
import
{
GeneData
,
GenomeBrowserData
}
from
"
./types
"
;
import
{
GeneData
,
GenomeBrowserData
,
State
}
from
"
./types
"
;
import
{
select
,
event
}
from
"
d3-selection
"
;
import
{
scaleLinear
}
from
"
d3-scale
"
;
import
GenomeBrowser
from
"
./component/genome-browser
"
;
import
{
color
}
from
"
d3
"
;
import
genomeBrowser
from
"
./component/genome-browser
"
;
import
{
filter
}
from
"
rxjs/operators
"
;
import
{
schemeSet1
}
from
"
d3-scale-chromatic
"
;
const
width
=
1500
;
...
...
@@ -63,46 +61,36 @@ const geneData: GeneData[] = [
},
];
const
chromosomeSize
=
75000
;
const
genomeBrowserData
:
GenomeBrowserData
[]
=
[{
const
state
:
State
=
{
width
:
1500
,
genomeWindow
:
{
center
:
23000
,
size
:
6000
},
currentMousePosition
:
0
,
chromosomeSize
:
75000
,
window
:
[
20000
,
26000
],
genes
:
geneData
,
chromosome
:
{
size
:
chromosomeSize
,
genes
:
geneData
title
:
"
Genome XXXX
"
,
},
axis
:
{
global
:
{
title
:
"
Genome XXXX (
"
+
chromosomeSize
+
"
bp)
"
,
interval
:
[
0
,
chromosomeSize
],
window
:
[
0
,
0
],
},
chromosome
:
{
title
:
"
Chromosome X
"
,
interval
:
[
0
,
0
]
}
selectedChromosome
:
{
title
:
"
Chromosome X
"
}
}];
}
const
svg
=
select
<
SVGElement
,
any
>
(
"
svg
"
)
.
attr
(
"
width
"
,
width
+
1
)
.
attr
(
"
height
"
,
height
);
draw
();
select
(
"
#zoom-in
"
).
on
(
"
click
"
,
function
()
{
genomeBrowserData
[
0
].
genomeWindow
.
size
-=
1000
;
const
[
start
,
end
]
=
state
.
window
;
state
.
window
=
[
start
+
500
,
end
-
500
];
draw
()
});
select
(
"
#zoom-out
"
).
on
(
"
click
"
,
function
()
{
genomeBrowserData
[
0
].
genomeWindow
.
size
+=
1000
;
const
[
start
,
end
]
=
state
.
window
;
state
.
window
=
[
start
-
500
,
end
+
500
];
draw
()
});
...
...
@@ -111,117 +99,85 @@ select("#zoom-out").on("click", function () {
*/
function
draw
()
{
//
const
computedGenomeBrowserData
:
GenomeBrowserData
[]
=
updateGenomeBrowserData
(
genomeBrowserData
);
const
computedGenomeBrowserData
:
GenomeBrowserData
=
getGenomeBrowserData
(
state
);
svg
.
datum
(
computedGenomeBrowserData
)
.
datum
(
[
computedGenomeBrowserData
]
)
.
call
(
genomeBrowserComponent
,
width
,
height
);
}
function
updateGenomeBrowserData
(
genomeBrowserData
:
GenomeBrowserData
[])
{
return
genomeBrowserData
.
map
(
function
(
genomesBrowser
:
GenomeBrowserData
,
i
)
{
const
{
width
,
genomeWindow
:
{
center
,
size
},
chromosome
:
{
genes
}
}
=
genomesBrowser
;
const
genomeWindowBoundaries
=
getChromosomeInterval
(
center
,
size
);
const
xScale
=
scaleLinear
()
.
domain
(
genomeWindowBoundaries
)
.
range
([
0
,
width
]);
// Construct clickHandler function that depends of the current window.
const
clickHandler
=
function
([
begin
,
end
]:
[
number
,
number
])
{
genomesBrowser
.
genomeWindow
.
center
=
(
end
+
begin
)
/
2
;
draw
();
};
// Filter genes in order to display those visible
const
visibleGenes
=
genes
.
filter
(
gene
=>
gene
.
end
>
genomeWindowBoundaries
[
0
]
||
gene
.
begin
<
genomeWindowBoundaries
[
1
]
function
getGenomeBrowserData
(
state
:
State
)
{
const
{
window
,
width
,
chromosomeSize
,
genes
,
chromosome
:
{
title
:
chromosomeTitle
},
selectedChromosome
:
{
title
:
selectedChromosomeTitle
}
}
=
state
;
// 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
;
const
newData
=
getGenomeBrowserData
(
state
);
genomeBrowserComponent
.
updateSelectedChromosome
(
newData
.
selectedChromosome
.
rule
,
newData
.
selectedChromosome
.
genes
);
// 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
window
=
[
scale
.
invert
(
x1
),
scale
.
invert
(
x2
)];
genomeBrowserData
[
i
].
genomeWindow
.
center
=
(
window
[
0
]
+
window
[
1
])
/
2
;
genomeBrowserData
[
i
].
genomeWindow
.
size
=
window
[
1
]
-
window
[
0
];
const
newData
=
updateGenomeBrowserData
(
genomeBrowserData
);
newData
.
forEach
(
function
(
data
)
{
genomeBrowserComponent
.
updateSelectedChromosome
(
data
.
axis
.
chromosome
,
data
.
chromosome
.
genes
);
})
}
};
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
,
rule
:
{
title
:
chromosomeTitle
+
"
(
"
+
chromosomeSize
+
"
bp)
"
,
interval
:
chromInterval
,
window
,
eventHandler
:
{
brushed
:
brushedCallback
}
};
const
dragStartCallback
=
function
(
elem
:
SVGElement
)
{
select
(
elem
).
classed
(
"
active
"
,
true
);
genomesBrowser
.
currentMousePosition
=
xScale
.
invert
(
event
.
x
);
}
const
draggedCallback
=
function
()
{
const
mousePosition
=
xScale
.
invert
(
event
.
x
);
const
diff
=
genomesBrowser
.
currentMousePosition
-
mousePosition
;
genomesBrowser
.
currentMousePosition
=
mousePosition
;
genomeBrowserData
[
i
].
genomeWindow
.
center
+=
diff
;
draw
();
};
const
dragendedCallback
=
function
(
elem
:
SVGElement
)
{
select
(
elem
).
classed
(
"
active
"
,
false
);
}
const
globalAxisWindow
=
getChromosomeInterval
(
center
,
size
);
const
newGenomeBrowser
=
{
...
genomesBrowser
,
chromosome
:
{
...
genomesBrowser
.
chromosome
,
genes
:
visibleGenes
.
map
(
function
(
gene
)
{
// const fillPalette = schemeSet1(gene.strand);
const
fill
=
gene
.
strand
===
"
+
"
?
color
(
"
darkred
"
)
:
color
(
"
darkblue
"
);
const
stroke
=
(
fill
)
?
fill
.
darker
(
1
).
toString
()
:
"
lighgray
"
return
{
...
gene
,
eventHandler
:
{
click
:
clickHandler
},
fill
:
(
fill
)
?
fill
.
toString
()
:
"
lightgray
"
,
stroke
}
})
},
scale
:
xScale
,
axis
:
{
...
genomesBrowser
.
axis
,
global
:
{
...
genomesBrowser
.
axis
.
global
,
window
:
globalAxisWindow
,
eventHandler
:
{
brushed
:
brushedCallback
}
},
selectedChromosome
:
{
window
,
genes
:
genes
.
filter
(
(
gene
:
GeneData
)
=>
gene
.
end
>
window
[
0
]
&&
gene
.
begin
<
window
[
1
]
).
map
(
function
(
gene
)
{
const
fill
=
gene
.
strand
===
"
+
"
?
color
(
"
darkred
"
)
:
color
(
"
darkblue
"
);
const
stroke
=
(
fill
)
?
fill
.
darker
(
1
).
toString
()
:
"
lighgray
"
return
{
...
gene
,
eventHandler
:
{
click
:
clickHandler
},
chromosome
:
{
...
genomesBrowser
.
axis
.
chromosome
,
interval
:
globalAxisWindow
}
},
eventHandler
:
{
dragged
:
draggedCallback
,
dragstarted
:
dragStartCallback
,
dragended
:
dragendedCallback
fill
:
(
fill
)
?
fill
.
toString
()
:
"
lightgray
"
,
stroke
}
};
return
newGenomeBrowser
;
});
}
function
getChromosomeInterval
(
center
:
number
,
genomeWindowSize
:
number
):
[
number
,
number
]
{
const
halfWindow
=
genomeWindowSize
/
2
;
return
[
center
-
halfWindow
,
center
+
halfWindow
]
}),
rule
:
{
title
:
selectedChromosomeTitle
+
"
[
"
+
window
[
0
]
+
"
,
"
+
window
[
1
]
+
"
]
"
,
interval
:
window
}
},
// eventHandler: {
// }
}
}
src/scripts/types.ts
View file @
a2f0b561
...
...
@@ -34,24 +34,32 @@ export interface BrushableAxisData extends GenericAxisData {
}
}
export
interface
State
{
width
:
number
,
chromosomeSize
:
number
,
window
:
[
number
,
number
],
genes
:
GeneData
[],
chromosome
:
{
title
:
string
,
},
selectedChromosome
:
{
title
:
string
}
}
export
interface
GenomeBrowserData
{
width
:
number
,
genomeWindow
:
{
center
:
number
,
size
:
number
},
currentMousePosition
:
number
,
//currentMousePosition: number,
chromosome
:
{
size
:
number
,
genes
:
GeneData
[]
genes
:
GeneData
[],
rule
:
BrushableAxisData
},
selectedChromosome
:
{
window
:
[
number
,
number
],
genes
:
GeneData
[],
rule
:
GenericAxisData
},
axis
:
{
global
:
BrushableAxisData
,
chromosome
:
GenericAxisData
}
eventHandler
?:
{
dragstarted
:
(
elem
:
SVGElement
)
=>
void
,
dragged
:
()
=>
void
,
...
...
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