Add src/scripts/component/selected-chromosome.

src/scripts/component/genome-browser.ts

 import GeneComponent from "./sequence/gene";
 import ChromosomeRule from "./rules/chromosome-rule";
+import SelectedChromosome from "./selected-chromosome";
 import BrushableChromosomeRule from "./rules/brushable-chromosome-rule";
 // D3
 import { select, Selection } from "d3-selection";
-import { drag } from "d3-drag";
 
 //types
-import { GeneData, GenomeBrowserData, GenericAxisData, BrushableAxisData } from "../types";
+import { GeneData, GenomeBrowserData, GenericAxisData, BrushableAxisData, SelectedChromosomeData } from "../types";
 
 
 
 export default function () {
+  const classes = {
+    chromosomeRule: "chromosome-rule",
+    selectedChromosome: "selected-chromosomes"
+  };
   const selectedChromosomeRule = ChromosomeRule();
   const geneComponent = GeneComponent();
   const wholeChromosomeRule = BrushableChromosomeRule();
+  const selectedChromosomeComponent = SelectedChromosome();
+
   let width = 900;
   let genomesBrowserU: Selection<SVGElement, GenomeBrowserData, SVGElement, any> | null = null;
 
@@ -35,43 +41,21 @@ export default function () {
         .append<SVGElement>("g")
         .classed("genome-browser", true);
 
-      genomeBrowserE.append("rect")
-        .classed("genome-browser-background", true);
-
+      
 
-      genomeBrowserE.append("g").classed("chromosome-axis", true);
-      genomeBrowserE.append("g").classed("selected-chromosome", true);
-      genomeBrowserE.append("g").classed("axis", true);
-      genomeBrowserE.append("g").classed("genes", true);
 
+      genomeBrowserE.append("g").classed(classes.chromosomeRule, true);
+      genomeBrowserE.append("g")
+      .classed(classes.selectedChromosome, true)
+      .attr("transform", "translate(0,70)");
+      
       //EXIT
       genomeBrowser.exit().remove();
 
       //UPDATE
       genomesBrowserU = genomeBrowser.merge(genomeBrowserE);
-      genomesBrowserU
-        .select<SVGRectElement>("rect.genome-browser-background")
-        .attr("width", width)
-        .attr("height", height)
-        .call(
-          drag<SVGRectElement, GenomeBrowserData>()
-            .on("start", (d: GenomeBrowserData) => {
-
-              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);
-              }
-            })
-        );
+   
+
       genomesBrowserU.each(function (data) {
         const {
           chromosome: { rule: chromosomeRule },
@@ -79,34 +63,28 @@ export default function () {
           // axis: { chromosome, global }
         } = data;
         updateWholeChromosomeAxis(chromosomeRule);
-        updateSelectedChromosome(selectedChromosomeRule, selectedGenes);
+        updateSelectedChromosome(data);
       });
     });
   }
-  function updateSelectedChromosome(axis: GenericAxisData, genes: GeneData[]) {
-    if (genomesBrowserU !== null) {
-      genomesBrowserU
-        .select<SVGElement>("g.axis")
-        .datum(axis)
-        .call(selectedChromosomeRule, width, 70);
 
+  function updateSelectedChromosome(data: GenomeBrowserData) {
+    if (genomesBrowserU !== null) {
       genomesBrowserU
-        .select<SVGElement>(".genes")
-        .attr("transform", "translate(0, 80)")
-        .datum(genes)
-        .call(geneComponent, selectedChromosomeRule.scale(), 30)
+        .select<SVGElement>("." + classes.selectedChromosome)
+        .datum<SelectedChromosomeData[]>([data.selectedChromosome])
+        .call(selectedChromosomeComponent, width);
     }
-  };
+  }
 
   function updateWholeChromosomeAxis(axis: BrushableAxisData) {
     if (genomesBrowserU) {
       genomesBrowserU
-        .select<SVGElement>("g.chromosome-axis")
+        .select<SVGElement>("." + classes.chromosomeRule)
         .datum(axis)
         .call(wholeChromosomeRule, width, 0);
     }
   }
-
   genomeBrowser.updateSelectedChromosome = updateSelectedChromosome;
   return genomeBrowser;
 }

src/scripts/component/selected-chromosome.ts

+// D3
+import { select, Selection } from "d3-selection";
+import { SelectedChromosomeData, GenericAxisData, GeneData } from "../types";
+import ChromosomeRule from "./rules/chromosome-rule";
+import Gene from "./sequence/gene";
+import { drag } from "d3-drag";
+
+
+
+
+export default function () {
+  const classes = {
+    selectedChromosome: "selected-chromosome",
+    rule: "rule",
+    genes: "genes"
+  };
+  const ruleComponent = ChromosomeRule();
+  const geneComponent = Gene();
+
+  function selectedChromosome(
+    _selection: Selection<SVGElement, SelectedChromosomeData[], SVGElement, any>,
+    width: number
+  ) {
+    _selection.each(function (_data: SelectedChromosomeData[]) {
+      const wrapper = select(this);
+      const selectedChromosome = wrapper
+        .selectAll<SVGElement, SelectedChromosomeData>("." + classes.selectedChromosome)
+        .data(_data);
+
+      // ENTER
+      const selectedChromosomeEnter = selectedChromosome
+        .enter()
+        .append<SVGElement>("g")
+        .classed(classes.selectedChromosome, true);
+
+
+      selectedChromosomeEnter.append("rect")
+        .classed("genome-browser-background", true);
+
+      selectedChromosomeEnter
+        .append("g")
+        .classed(classes.rule, true);
+
+      selectedChromosomeEnter
+        .append("g")
+        .classed(classes.genes, true);
+
+      // EXIT
+      selectedChromosome.exit().remove();
+
+      //UPDATE
+      const selectedChromosomeUpdate = selectedChromosome
+        .merge(selectedChromosomeEnter);
+
+
+      selectedChromosomeUpdate
+        .select<SVGRectElement>("rect.genome-browser-background")
+        .attr("width", width)
+        .attr("height", 150)
+        .call(
+          drag<SVGRectElement, SelectedChromosomeData>()
+            .on("start", (d: SelectedChromosomeData) => {
+
+              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);
+              }
+            })
+        );
+
+      selectedChromosomeUpdate
+        .select<SVGElement>("." + classes.rule)
+        .datum<GenericAxisData>(d => d.rule)
+        .call(ruleComponent, width, 0)
+
+      selectedChromosomeUpdate
+        .select<SVGElement>("." + classes.genes)
+        .datum<GeneData[]>(d => d.genes)
+        .call(geneComponent, ruleComponent.scale(), 30, 70);
+
+    });
+
+  }
+  return selectedChromosome;
+
+}

src/scripts/index.ts

@@ -124,10 +124,8 @@ function getGenomeBrowserData(state: State) {
       const { selection: [x1, x2] } = event;
       const newwindow: [number, number] = [scale.invert(x1), scale.invert(x2)];
       state.window = newwindow;
-      const newData = getGenomeBrowserData(state);
       genomeBrowserComponent.updateSelectedChromosome(
-        newData.selectedChromosome.rule,
-        newData.selectedChromosome.genes
+        getGenomeBrowserData(state)
       );
     }
   };

src/scripts/types.ts

@@ -47,6 +47,13 @@ export interface State {
   }
 }
 
+
+export interface SelectedChromosomeData {
+  window: [number, number],
+  genes: GeneData[],
+  rule: GenericAxisData
+}
+
 export interface GenomeBrowserData {
   width: number,
   //currentMousePosition: number,
@@ -55,11 +62,7 @@ export interface GenomeBrowserData {
     genes: GeneData[],
     rule: BrushableAxisData
   },
-  selectedChromosome: {
-    window: [number, number],
-    genes: GeneData[],
-    rule: GenericAxisData
-  },
+  selectedChromosome: SelectedChromosomeData,
   eventHandler?: {
     dragstarted: (elem: SVGElement) => void,
     dragged: () => void,