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" ...@@ -2,7 +2,8 @@ import { select, Selection } from "d3-selection"
import { ScaleLinear, scaleLinear } from "d3-scale"; import { ScaleLinear, scaleLinear } from "d3-scale";
import { arrowShape } from "./gene-shapes"; import { arrowShape } from "./gene-shapes";
import linearGene from "../../layout/linear-gene"; import linearGene from "../../layout/linear-gene";
import { of } from "rxjs";
import { mergeMap } from "rxjs/operators";
type Strand = "+" | "-"; type Strand = "+" | "-";
...@@ -12,6 +13,9 @@ export interface GeneData { ...@@ -12,6 +13,9 @@ export interface GeneData {
begin: number, begin: number,
end: number, end: number,
gene: string gene: string
eventHandler: {
click: ([begin, end]: [number, number]) => void
}
} }
export interface PositionedGeneData extends GeneData { export interface PositionedGeneData extends GeneData {
position: { position: {
...@@ -61,6 +65,11 @@ export default function () { ...@@ -61,6 +65,11 @@ export default function () {
: null : null
) )
.attr("d", d => arrowShape(d, geneHeight)) .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; return gene;
......
import GeneComponent, { GeneData } from "./component/sequence/gene"; import GeneComponent, { GeneData } from "./component/sequence/gene";
import GenomeAxis from "./component/sequence/genome-axis"; import GenomeAxis from "./component/sequence/genome-axis";
import { select } from "d3-selection"; import { select } from "d3-selection";
import { of } from "rxjs";
const width = 1500; const width = 1500;
const genomeWindowSize = 6000 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 geneComponent = GeneComponent(); const geneComponent = GeneComponent();
const genomeAxis = GenomeAxis(); const genomeAxis = GenomeAxis();
const svg = select<SVGSVGElement, any>("svg").attr("width", width + 100).attr("height", 900); const clickHandler = ([begin, end]: [number, number]) => draw((end + begin) / 2);
const genomeAxisElem = svg.select<SVGElement>("#axis"); const genes: Array<GeneData> = [
const geneElem = svg.select<SVGElement>("#genes"); {
name: "gene 1",
genomeAxisElem strand: "-",
.datum(getGenomeWindow(23000, genomeWindowSize)) begin: 20815,
.call(genomeAxis, width, 0); end: 21078,
gene: "insA",
geneElem eventHandler: {
.datum<Array<GeneData>>(genes) click: clickHandler
.call(geneComponent, genomeAxis.scale(), 40); }
},
{
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] { function getGenomeWindow(middle: number, genomeWindowSize: number): [number, number] {
const halfWindow = genomeWindowSize / 2; const halfWindow = genomeWindowSize / 2;
return [middle - halfWindow, middle + halfWindow] return [middle - halfWindow, middle + halfWindow]
......
Supports Markdown
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