genome-browser.ts 2.73 KB
Newer Older
1
import GeneComponent from "./sequence/gene";
2
import ChromosomeRule from "./rules/chromosome-rule";
3
import SelectedChromosome from "./selected-chromosome";
4
import BrushableChromosomeRule from "./rules/brushable-chromosome-rule";
5
6
// D3
import { select, Selection } from "d3-selection";
7

8
//types
9
import { GeneData, GenomeBrowserData, GenericAxisData, BrushableAxisData, SelectedChromosomeData } from "../types";
10
11
12
13



export default function () {
14
15
16
17
  const classes = {
    chromosomeRule: "chromosome-rule",
    selectedChromosome: "selected-chromosomes"
  };
18
  const selectedChromosomeRule = ChromosomeRule();
19
  const geneComponent = GeneComponent();
20
  const wholeChromosomeRule = BrushableChromosomeRule();
21
22
  const selectedChromosomeComponent = SelectedChromosome();

23
24
  let width = 900;
  let genomesBrowserU: Selection<SVGElement, GenomeBrowserData, SVGElement, any> | null = null;
25
26
27

  function genomeBrowser(
    _selection: Selection<SVGElement, Array<GenomeBrowserData>, HTMLElement, any>,
28
    w: number,
29
30
    height: number
  ) {
31
    width = w;
32
33
34
    _selection.each(function (_data: Array<GenomeBrowserData>) {
      const container = select(this);
      const genomeBrowser = container
Remi  PLANEL's avatar
Remi PLANEL committed
35
        .selectAll<SVGElement, GenomeBrowserData>(".genome-browser")
36
37
38
        .data(_data);

      //ENTER
Remi  PLANEL's avatar
Remi PLANEL committed
39
      const genomeBrowserE = genomeBrowser
40
        .enter()
Remi  PLANEL's avatar
Remi PLANEL committed
41
        .append<SVGElement>("g")
42
43
        .classed("genome-browser", true);

44
      
45
46


47
48
49
50
51
      genomeBrowserE.append("g").classed(classes.chromosomeRule, true);
      genomeBrowserE.append("g")
      .classed(classes.selectedChromosome, true)
      .attr("transform", "translate(0,70)");
      
52
53
54
55
      //EXIT
      genomeBrowser.exit().remove();

      //UPDATE
56
      genomesBrowserU = genomeBrowser.merge(genomeBrowserE);
57
58
   

59
      genomesBrowserU.each(function (data) {
Remi  PLANEL's avatar
Remi PLANEL committed
60
61
62
63
64
65
        const {
          chromosome: { rule: chromosomeRule },
          selectedChromosome: { genes: selectedGenes, rule: selectedChromosomeRule },
          // axis: { chromosome, global }
        } = data;
        updateWholeChromosomeAxis(chromosomeRule);
66
        updateSelectedChromosome(data);
67
68
69
      });
    });
  }
70

71
72
  function updateSelectedChromosome(data: GenomeBrowserData) {
    if (genomesBrowserU !== null) {
73
      genomesBrowserU
74
75
76
        .select<SVGElement>("." + classes.selectedChromosome)
        .datum<SelectedChromosomeData[]>([data.selectedChromosome])
        .call(selectedChromosomeComponent, width);
77
    }
78
  }
79

80
81
82
  function updateWholeChromosomeAxis(axis: BrushableAxisData) {
    if (genomesBrowserU) {
      genomesBrowserU
83
        .select<SVGElement>("." + classes.chromosomeRule)
Remi  PLANEL's avatar
Remi PLANEL committed
84
        .datum(axis)
85
        .call(wholeChromosomeRule, width, 0);
86
    }
87
  }
88
  genomeBrowser.updateSelectedChromosome = updateSelectedChromosome;
89
90
91
  return genomeBrowser;
}

92
93