main.ts 2.8 KB
Newer Older
Remi  PLANEL's avatar
Remi PLANEL committed
1
import { GeneData, GenomeBrowserData, GenomeBrowserState } from "../../scripts/types";
2
import { select, event } from "d3-selection";
Remi  PLANEL's avatar
Remi PLANEL committed
3
4
import GenomeBrowser from "../../scripts/component/genome-browser";
import genomeBrowserLayout from "../../scripts/layout/genome-browser";
5

Remi  PLANEL's avatar
Remi PLANEL committed
6
7
8
9
10
11
12
13
14
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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70

const width = 1500;
const height = 300;
const genomeBrowserComponent = GenomeBrowser();
const geneData: GeneData[] = [
  {
    name: "gene 1",
    strand: "-",
    begin: 20815,
    end: 21078,
    gene: "insA",
  },
  {
    name: "gene 2",
    strand: "+",
    begin: 21181,
    end: 21400,
    gene: "yaaY",
  },
  {
    name: "gene 3",
    strand: "+",
    begin: 21407,
    end: 22348,
    gene: "ribF"
  },
  {
    name: "gene 4",
    strand: "+",
    begin: 22391,
    end: 23207,
    gene: "ileS"
  },
  {
    name: "gene 4",
    strand: "+",
    begin: 23391,
    end: 24207,
    gene: "ileS"
  },
  {
    name: "gene 4",
    strand: "-",
    begin: 25304,
    end: 25956,
    gene: "foo"
  },
  {
    name: "gene 4",
    strand: "+",
    begin: 26004,
    end: 26329,
    gene: "foo"
  },
  {
    name: "gene 4",
    strand: "+",
    begin: 29004,
    end: 29429,
    gene: "foo"
  },

];


71
const state: GenomeBrowserState = {
Remi  PLANEL's avatar
Remi PLANEL committed
72
73
74
75
76
77
78
79
80
81
82
83
84
  width: 1500,
  chromosomeSize: 75000,
  window: [20000, 26000],
  genes: geneData,
  chromosome: {
    title: "Genome XXXX",
  },
  selectedChromosome: {
    title: "Chromosome X"
  }
}


85
const genomeBrowsers = select<SVGElement, any>("svg")
Remi  PLANEL's avatar
Remi PLANEL committed
86
  .attr("width", width + 1)
87
88
89
  .attr("height", height)
  .append<SVGGElement>("g")
  .classed("genome-browsers", true);
Remi  PLANEL's avatar
Remi PLANEL committed
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107

draw();

select("#zoom-in").on("click", function () {
  const [start, end] = state.window;
  state.window = [start + 500, end - 500];
  draw()
});
select("#zoom-out").on("click", function () {
  const [start, end] = state.window;
  state.window = [start - 500, end + 500];
  draw()
});

/*
    FUNCTIONS
*/
function draw() {
108
  // Get the data
Remi  PLANEL's avatar
Remi PLANEL committed
109
  const computedGenomeBrowserData: GenomeBrowserData =
110
111
    genomeBrowserLayout(state, brushHandler, clickHandler);

112
  // Convert the data to DOM objects
113
  genomeBrowsers
Remi  PLANEL's avatar
Remi PLANEL committed
114
115
116
117
118
    .datum([computedGenomeBrowserData])
    .call(genomeBrowserComponent, width, height);

}

119
function clickHandler([begin, end]: [number, number], state: GenomeBrowserState) {
120
121
122
123
124
125
  const centerGene = (end + begin) / 2;
  const sizeWindow = state.window[1] - state.window[0];
  state.window = [centerGene - sizeWindow / 2, centerGene + sizeWindow / 2];
  draw();
}

126
function brushHandler(scale: any, state: GenomeBrowserState) {
127
128
129
130
131
132
  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(
133
      genomeBrowserLayout(state, brushHandler, clickHandler).selectedChromosome
134
    );
Remi  PLANEL's avatar
Remi PLANEL committed
135
136
137
  }
}

138