Commit f81f14c0 authored by Remi  PLANEL's avatar Remi PLANEL

Resize the brush when the width is too large

parent bf6362fc
import { BrushableAxisData, GenericAxisData } from "../../types";
import { select, Selection } from "d3-selection";
import { select, Selection, event } from "d3-selection";
import { scaleLinear } from "d3-scale";
import GenomeAxis from "./chromosome-rule";
import { brushX, BrushBehavior } from "d3-brush";
import { format } from "d3-format";
export default function () {
const genomeAxisComponent = GenomeAxis();
......@@ -12,24 +13,57 @@ export default function () {
brushSelection: "brush-selection"
};
const tickFormat = format(".3s");
const brushHeight = 50;
function globalGenomeAxis(
_selection: Selection<SVGElement, BrushableAxisData, SVGElement, any>,
width: number,
yPosition: number
yPosition: number,
) {
_selection.each(function (_data) {
const xScale = scaleLinear()
.domain(_data.interval)
const { interval, maxWindowSize } = _data;
const genomicToPx = scaleLinear()
.domain(interval)
.range([0, width]);
const brush: BrushBehavior<any> = brushX()
.extent([[0, 0], [width, 50]])
.extent([[0, 0], [width, brushHeight]])
.on("brush", () => {
const { selection: [start, end] } = event;
globalAxisUpdate
.select(".brush-selection-boundaries")
.select("text.start")
.style("text-anchor", "end")
.attr("transform", "translate(" + start + "," + (brushHeight + 10) + ")")
.text(tickFormat(genomicToPx.invert(start)));
globalAxisUpdate
.select(".brush-selection-boundaries")
.select("text.end")
.attr("transform", "translate(" + end + "," + (brushHeight + 10) + ")")
.style("text-anchor", "start")
.text(tickFormat(genomicToPx.invert(end)));
if (_data.eventHandler) {
_data.eventHandler.brushed(genomeAxisComponent.scale())
_data.eventHandler.brushed(genomicToPx)
}
})
.on("end", function () {
const { selection: [pxStart, pxEnd] } = event;
const currentGenomicWindowSize = Math.ceil(genomicToPx.invert(pxEnd) - genomicToPx.invert(pxStart));
const maxPixelWindowSize = Math.floor(genomicToPx(maxWindowSize));
if (currentGenomicWindowSize > maxWindowSize) {
const roundedStart = Math.ceil(pxStart);
brushSelection
.transition()
.duration(400)
.call(brush.move, [roundedStart, roundedStart + maxPixelWindowSize])
}
});
const container = select(this)
.attr("transform", "translate(0," + yPosition + ")");
const globalAxis = container
......@@ -45,24 +79,39 @@ export default function () {
.classed(htmlClassName.genericRule, true);
globalAxisEnter.append("g")
.attr("transform", "translate(0,25)")
const brushSelectionEnter = globalAxisEnter.append("g")
.attr("transform", "translate(0,25)");
brushSelectionEnter
.append("g")
.classed(htmlClassName.brushSelection, true);
const boundaries = brushSelectionEnter
.append("g")
.style("font-size", "9")
.classed("brush-selection-boundaries", true)
boundaries.append("text").classed("start", true);
boundaries.append("text").classed("end", true);
globalAxis.exit().remove();
const globalAxisUpdate = globalAxis.merge(globalAxisEnter);
globalAxisUpdate.select<any>("." + htmlClassName.brushSelection)
const brushSelection = globalAxisUpdate
.select<any>("." + htmlClassName.brushSelection);
brushSelection
.call(brush)
.call(brush.move, [xScale(_data.window[0]), xScale(_data.window[1])]);
.call(brush.move, [genomicToPx(_data.window[0]), genomicToPx(_data.window[1])]);
globalAxisUpdate
.select<SVGElement>("." + htmlClassName.genericRule)
.datum((d: BrushableAxisData): GenericAxisData => ({ title: d.title, interval: [d.interval[0], d.interval[1]] }))
.call(genomeAxisComponent, width, yPosition);
});
}
return globalGenomeAxis;
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment