genome-browser.ts 2.6 KB
Newer Older
1
2
import { select, Selection } from "d3-selection"

3
import GeneComponent from "./sequence/gene";
4
import GenomeAxis from "./sequence/genome-axis";
5
import GlobalGenomeAxis from "./sequence/genome-axis-with-selection";
6
7
import { drag } from "d3-drag";

8
9
//types
import { GenomeBrowserData } from "../types";
10
11
12
13
14
15



export default function () {
  const genomeAxis = GenomeAxis();
  const geneComponent = GeneComponent();
16
  const globalGenomeAxisComponent = GlobalGenomeAxis();
17
18
19
20
21
22
23
24
25

  function genomeBrowser(
    _selection: Selection<SVGElement, Array<GenomeBrowserData>, HTMLElement, any>,
    width: number,
    height: number
  ) {
    _selection.each(function (_data: Array<GenomeBrowserData>) {
      const container = select(this);
      const genomeBrowser = container
Remi  PLANEL's avatar
Remi PLANEL committed
26
        .selectAll<SVGElement, GenomeBrowserData>(".genome-browser")
27
28
29
        .data(_data);

      //ENTER
Remi  PLANEL's avatar
Remi PLANEL committed
30
      const genomeBrowserE = genomeBrowser
31
        .enter()
Remi  PLANEL's avatar
Remi PLANEL committed
32
        .append<SVGElement>("g")
33
34
        .classed("genome-browser", true);

Remi  PLANEL's avatar
Remi PLANEL committed
35
36
      genomeBrowserE.append("rect")
        .classed("genome-browser-background", true);
37
38


39
      genomeBrowserE.append("g").classed("chromosome-axis", true);
Remi  PLANEL's avatar
Remi PLANEL committed
40
41
      genomeBrowserE.append("g").classed("axis", true);
      genomeBrowserE.append("g").classed("genes", true);
42
43
44
45
46

      //EXIT
      genomeBrowser.exit().remove();

      //UPDATE
Remi  PLANEL's avatar
Remi PLANEL committed
47
      const genomesBrowserU = genomeBrowser.merge(genomeBrowserE);
48
49
50
      genomesBrowserU
        .select<SVGRectElement>("rect.genome-browser-background")
        .attr("width", width)
Remi  PLANEL's avatar
Remi PLANEL committed
51
        .attr("height", height).call(
52
          drag<SVGRectElement, GenomeBrowserData>()
Remi  PLANEL's avatar
Remi PLANEL committed
53
54
            .on("start", (d: GenomeBrowserData) => {

55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
              if (d.eventHandler) {
                d.eventHandler.dragstarted(this);
              }
            })
            .on("drag", d => {
              if (d.eventHandler) {
                d.eventHandler.dragged();
              }
            })
            .on("end", d => {
              if (d.eventHandler) {
                d.eventHandler.dragended(this);
              }
            })
        );
70
71
72
73
74
75

      genomesBrowserU
        .select<SVGElement>("g.chromosome-axis")
        .datum(({ axis: { global } }) => global)
        .call(globalGenomeAxisComponent, width, 0);

76
77
      genomesBrowserU
        .select<SVGElement>("g.axis")
78
79
        .datum(({ axis: { chromosome } }) => chromosome)
        .call(genomeAxis, width, 70);
80
81
82

      genomesBrowserU
        .select<SVGElement>(".genes")
83
84
        .attr("transform", "translate(0, 80)")
        .datum(({ chromosome: { genes } }) => genes)
85
86
87
88
89
90
91
92
        .call(geneComponent, genomeAxis.scale(), 40)


    });
  }
  return genomeBrowser;
}