Commit 6dffe2db authored by Remi  PLANEL's avatar Remi PLANEL
Browse files

Use genome-browser component

parent b7fb2b49
import GeneComponent, { GeneData } from "./component/sequence/gene"; import { GeneData } from "./component/sequence/gene";
import GenomeAxis from "./component/sequence/genome-axis"; import { select, event } from "d3-selection";
import { select } from "d3-selection"; import { scaleLinear } from "d3-scale";
import { drag } from "d3-drag"; import GenomeBrowser, { GenomeBrowserData } from "./component/genome-browser";
const width = 1500; const width = 1500;
let genomeWindowSize = 6000; const height = 300;
let centerWindow = 23000; const genomeBrowserComponent = GenomeBrowser();
const geneComponent = GeneComponent(); const geneData: GeneData[] = [
const genomeAxis = GenomeAxis(); {
const clickHandler = ([begin, end]: [number, number]) => { name: "gene 1",
centerWindow = (end + begin) / 2; strand: "-",
draw(); begin: 20815,
}; end: 21078,
const genes: Array<GeneData> = [ gene: "insA",
{ },
name: "gene 1", {
strand: "-", name: "gene 2",
begin: 20815, strand: "+",
end: 21078, begin: 21181,
gene: "insA", end: 21399,
eventHandler: { gene: "yaaY",
click: clickHandler },
} {
}, name: "gene 3",
{ strand: "+",
name: "gene 2", begin: 21407,
strand: "+", end: 22348,
begin: 21181, gene: "ribF"
end: 21399, },
gene: "yaaY", {
eventHandler: { name: "gene 4",
click: clickHandler strand: "+",
} begin: 22391,
}, end: 25207,
{ gene: "ileS"
name: "gene 3", strand: "+", begin: 21407, end: 22348, gene: "ribF", eventHandler: { }
click: clickHandler ];
}
},
{
name: "gene 4", strand: "+", begin: 22391, end: 25207, gene: "ileS", eventHandler: {
click: clickHandler
}
}
]
const genomeBrowserData: GenomeBrowserData[] = [{
width: 1500,
genomeWindow: {
center: 23000,
size: 6000
},
currentMousePosition: 0,
genes: geneData,
x: 0,
y: 0
}];
draw(); draw();
select("#zoom-in").on("click", function () { select("#zoom-in").on("click", function () {
genomeWindowSize -= 1000; genomeBrowserData[0].genomeWindow.size -= 1000;
draw() draw()
}); });
select("#zoom-out").on("click", function () { select("#zoom-out").on("click", function () {
genomeWindowSize += 1000; genomeBrowserData[0].genomeWindow.size += 1000;
draw() draw()
}); });
/* /*
FUNCTIONS FUNCTIONS
*/ */
function draw() { function draw() {
const svg = select<SVGSVGElement, any>("svg").attr("width", width + 1).attr("height", 900); //
const genomeAxisElem = svg.select<SVGElement>("#axis"); const computedGenomeBrowserData: GenomeBrowserData[] = genomeBrowserData
const geneElem = svg.select<SVGElement>("#genes"); .map(function (genomesBrowser, i) {
genomeAxisElem const { width, genomeWindow: { center, size }, genes } = genomesBrowser;
.datum(getGenomeWindow(centerWindow, genomeWindowSize)) const genomeWindowBoundaries = getGenomeWindow(center, size);
.call(genomeAxis, width, 0); const xScale = scaleLinear()
geneElem .domain(genomeWindowBoundaries)
.datum<Array<GeneData>>(genes) .range([0, width]);
.call(geneComponent, genomeAxis.scale(), 40); // Construct clickHandler function that depends of the current window.
} const clickHandler = function ([begin, end]: [number, number]) {
genomesBrowser.genomeWindow.center = (end + begin) / 2;
draw();
};
// Filter genes in order to display those visible
const visibleGenes = genes.filter(
gene => gene.end > genomeWindowBoundaries[0] || gene.begin < genomeWindowBoundaries[1]
);
function getGenomeWindow(middle: number, genomeWindowSize: number): [number, number] { const dragStartCallback = function (elem: SVGElement) {
const halfWindow = genomeWindowSize / 2; select(elem).classed("active", true);
return [middle - halfWindow, middle + halfWindow] genomesBrowser.currentMousePosition = xScale
.invert(event.x);
}
const draggedCallback = function () {
const mousePosition = xScale
.invert(event.x);
const diff = genomesBrowser.currentMousePosition - mousePosition;
genomesBrowser.currentMousePosition = mousePosition;
genomeBrowserData[i].genomeWindow.center += diff;
draw();
};
const dragendedCallback = function (elem: SVGElement) {
select(elem).classed("active", false);
}
const newGenomeBrowser = {
...genomesBrowser,
genes: visibleGenes.map(function (gene) {
gene.eventHandler = {
click: clickHandler
};
return gene;
}),
scale: xScale,
eventHandler: {
dragged: draggedCallback,
dragstarted: dragStartCallback,
dragended: dragendedCallback
}
};
return newGenomeBrowser;
});
const svg = select<SVGElement, any>("svg")
.attr("width", width + 1)
.attr("height", height);
svg
.datum(computedGenomeBrowserData)
.call(genomeBrowserComponent, width, height);
} }
function getGenomeWindow(center: number, genomeWindowSize: number): [number, number] {
const halfWindow = genomeWindowSize / 2;
return [center - halfWindow, center + halfWindow]
}
Supports Markdown
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