Commit f5137deb authored by Remi  PLANEL's avatar Remi PLANEL
Browse files

Handle gene click event using rxjs and Observable

parent 3cc01018
......@@ -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;
......
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]
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment