Rename genome-axis-with-selection.ts to brushable-genome-axis.ts

src/scripts/component/sequence/genome-axis-with-selection.ts → src/scripts/component/sequence/brushable-genome-axis.ts

-import { GlobalAxisData, GenericAxisData } from "../../types";
+import { BrushableAxisData, GenericAxisData } from "../../types";
 import { select, Selection } from "d3-selection";
 import { scaleLinear } from "d3-scale";
 import GenomeAxis from "./genome-axis";
+import { brushX, BrushBehavior } from "d3-brush";
 
 
 export default function () {
-  const GenomeAxisComponent = GenomeAxis();
+  const genomeAxisComponent = GenomeAxis();
   function globalGenomeAxis(
-    _selection: Selection<SVGElement, GlobalAxisData, SVGElement, any>,
+    _selection: Selection<SVGElement, BrushableAxisData, SVGElement, any>,
     width: number,
     yPosition: number
   ) {
@@ -16,10 +17,18 @@ export default function () {
         .domain(_data.interval)
         .range([0, width]);
 
+      const brush: BrushBehavior<any> = brushX()
+        .extent([[0, 0], [width, 50]])
+        .on("brush", () => {
+          if (_data.eventHandler) {
+            _data.eventHandler.brushed(genomeAxisComponent.scale())
+          }
+        });
+
       const container = select(this)
         .attr("transform", "translate(0," + yPosition + ")");
       const globalAxis = container
-        .selectAll<SVGElement, GlobalAxisData>("g.global-axis-container")
+        .selectAll<SVGElement, BrushableAxisData>("g.global-axis-container")
         .data([_data]);
 
       const globalAxisEnter = globalAxis
@@ -27,32 +36,29 @@ export default function () {
         .append<SVGElement>("g")
         .classed("global-axis-container", true);
 
-      globalAxisEnter.append("g").classed("generic-axis", true);
-      globalAxisEnter.append("rect").classed("genome-axis-window", true);
+      globalAxisEnter.append("g")
+        .classed("generic-axis", true);
 
 
+      globalAxisEnter.append("g")
+        .attr("transform", "translate(0,25)")
+        .classed("brush-selection", true);
 
       globalAxis.exit().remove();
 
       const globalAxisUpdate = globalAxis.merge(globalAxisEnter);
 
-      globalAxisUpdate
-        .select("rect")
-        .attr("transform", function(d: GlobalAxisData) {
-          const x = xScale(d.window[0])
-          return "translate(" + x + ", 25)";
-        })
-        .attr("width", function(d) {
-          return xScale(d.window[1] - d.window[0]);
-        })
-        .attr("height", 50);
+
+      globalAxisUpdate.select<any>("g.brush-selection")
+        .call(brush)
+        .call(brush.move, [xScale(_data.window[0]), xScale(_data.window[1])]);
 
       globalAxisUpdate
         .select<SVGElement>("g.generic-axis")
-        .datum((d: GlobalAxisData): GenericAxisData => ({ title: d.title, interval: [d.interval[0], d.interval[1]] }))
-        .call(GenomeAxisComponent, width, yPosition);
+        .datum((d: BrushableAxisData): GenericAxisData => ({ title: d.title, interval: [d.interval[0], d.interval[1]] }))
+        .call(genomeAxisComponent, width, yPosition);
 
-  });
-}
-return globalGenomeAxis;
+    });
+  }
+  return globalGenomeAxis;
 }
\ No newline at end of file