index.ts 1.98 KB
Newer Older
1
import GeneComponent, { GeneData } from "./component/sequence/gene";
Remi  PLANEL's avatar
Remi PLANEL committed
2
import GenomeAxis from "./component/sequence/genome-axis";
Remi  PLANEL's avatar
Remi PLANEL committed
3
import { select } from "d3-selection";
Remi  PLANEL's avatar
Remi PLANEL committed
4
import { drag } from "d3-drag";
5

Remi  PLANEL's avatar
Remi PLANEL committed
6
const width = 1500;
7
8
let genomeWindowSize = 6000;
let centerWindow = 23000;
Remi  PLANEL's avatar
Remi PLANEL committed
9
const geneComponent = GeneComponent();
Remi  PLANEL's avatar
Remi PLANEL committed
10
const genomeAxis = GenomeAxis();
11
12
13
14
const clickHandler = ([begin, end]: [number, number]) => {
    centerWindow = (end + begin) / 2;
    draw();
};
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
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
        }
    }
]
Remi  PLANEL's avatar
Remi PLANEL committed
47

Remi  PLANEL's avatar
Remi PLANEL committed
48
49
50
51
52

draw();



53
54
55
56
57
58
59
60
select("#zoom-in").on("click", function () {
    genomeWindowSize -= 1000;
    draw()
});
select("#zoom-out").on("click", function () {
    genomeWindowSize += 1000;
    draw()
});
Remi  PLANEL's avatar
Remi PLANEL committed
61

62
63
64
65
/*
    FUNCTIONS
*/
function draw() {
66
    const svg = select<SVGSVGElement, any>("svg").attr("width", width + 1).attr("height", 900);
67
68
69
    const genomeAxisElem = svg.select<SVGElement>("#axis");
    const geneElem = svg.select<SVGElement>("#genes");
    genomeAxisElem
70
        .datum(getGenomeWindow(centerWindow, genomeWindowSize))
71
72
73
74
75
        .call(genomeAxis, width, 0);
    geneElem
        .datum<Array<GeneData>>(genes)
        .call(geneComponent, genomeAxis.scale(), 40);
}
Remi  PLANEL's avatar
Remi PLANEL committed
76

Remi  PLANEL's avatar
Remi PLANEL committed
77
78
79
80
function getGenomeWindow(middle: number, genomeWindowSize: number): [number, number] {
    const halfWindow = genomeWindowSize / 2;
    return [middle - halfWindow, middle + halfWindow]

81
82
}