Commit dd835750 authored by Remi  PLANEL's avatar Remi PLANEL
Browse files

zoom-in and zoom-out for the genome browser

parent 29392ff2
...@@ -3,11 +3,17 @@ import GenomeAxis from "./component/sequence/genome-axis"; ...@@ -3,11 +3,17 @@ import GenomeAxis from "./component/sequence/genome-axis";
import { select } from "d3-selection"; import { select } from "d3-selection";
import { of } from "rxjs"; import { of } from "rxjs";
const width = 1500; const width = 1500;
const genomeWindowSize = 6000; let genomeWindowSize = 6000;
let centerWindow = 23000;
const geneComponent = GeneComponent(); const geneComponent = GeneComponent();
const genomeAxis = GenomeAxis(); const genomeAxis = GenomeAxis();
const clickHandler = ([begin, end]: [number, number]) => draw((end + begin) / 2); const clickHandler = ([begin, end]: [number, number]) => {
centerWindow = (end + begin) / 2;
draw();
};
const genes: Array<GeneData> = [ const genes: Array<GeneData> = [
{ {
name: "gene 1", name: "gene 1",
...@@ -41,22 +47,33 @@ const genes: Array<GeneData> = [ ...@@ -41,22 +47,33 @@ const genes: Array<GeneData> = [
} }
] ]
select("#zoom-in").on("click", function () {
genomeWindowSize -= 1000;
draw()
});
select("#zoom-out").on("click", function () {
genomeWindowSize += 1000;
draw()
});
/*
function draw(centerGenome: number) { FUNCTIONS
*/
function draw() {
const svg = select<SVGSVGElement, any>("svg").attr("width", width + 1).attr("height", 900); const svg = select<SVGSVGElement, any>("svg").attr("width", width + 1).attr("height", 900);
const genomeAxisElem = svg.select<SVGElement>("#axis"); const genomeAxisElem = svg.select<SVGElement>("#axis");
const geneElem = svg.select<SVGElement>("#genes"); const geneElem = svg.select<SVGElement>("#genes");
genomeAxisElem genomeAxisElem
.datum(getGenomeWindow(centerGenome, genomeWindowSize)) .datum(getGenomeWindow(centerWindow, genomeWindowSize))
.call(genomeAxis, width, 0); .call(genomeAxis, width, 0);
geneElem geneElem
.datum<Array<GeneData>>(genes) .datum<Array<GeneData>>(genes)
.call(geneComponent, genomeAxis.scale(), 40); .call(geneComponent, genomeAxis.scale(), 40);
} }
draw(23000); draw();
function getGenomeWindow(middle: number, genomeWindowSize: number): [number, number] { function getGenomeWindow(middle: number, genomeWindowSize: number): [number, number] {
const halfWindow = genomeWindowSize / 2; const halfWindow = genomeWindowSize / 2;
return [middle - halfWindow, middle + halfWindow] return [middle - halfWindow, middle + halfWindow]
} }
\ No newline at end of file
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