Commit 0a18d4da authored by Remi  PLANEL's avatar Remi PLANEL
Browse files

Generate the axis data.

parent 988adc3c
import { GeneData } from "./component/sequence/gene"; import { GeneData, GenomeBrowserData } from "./types";
import { select, event } from "d3-selection"; import { select, event } from "d3-selection";
import { scaleLinear } from "d3-scale"; import { scaleLinear } from "d3-scale";
import GenomeBrowser, { GenomeBrowserData } from "./component/genome-browser"; import GenomeBrowser from "./component/genome-browser";
import { color } from "d3"; import { color } from "d3";
import genomeBrowser from "./component/genome-browser";
import { filter } from "rxjs/operators";
const width = 1500; const width = 1500;
const height = 300; const height = 300;
const genomeBrowserComponent = GenomeBrowser(); const genomeBrowserComponent = GenomeBrowser();
const geneData: GeneData[] = [ const geneData: GeneData[] = [
{ {
name: "gene 1", name: "gene 1",
...@@ -19,7 +22,7 @@ const geneData: GeneData[] = [ ...@@ -19,7 +22,7 @@ const geneData: GeneData[] = [
name: "gene 2", name: "gene 2",
strand: "+", strand: "+",
begin: 21181, begin: 21181,
end: 21465, end: 21400,
gene: "yaaY", gene: "yaaY",
}, },
{ {
...@@ -59,7 +62,7 @@ const geneData: GeneData[] = [ ...@@ -59,7 +62,7 @@ const geneData: GeneData[] = [
}, },
]; ];
const chromosomeSize = 75000;
const genomeBrowserData: GenomeBrowserData[] = [{ const genomeBrowserData: GenomeBrowserData[] = [{
width: 1500, width: 1500,
genomeWindow: { genomeWindow: {
...@@ -67,10 +70,26 @@ const genomeBrowserData: GenomeBrowserData[] = [{ ...@@ -67,10 +70,26 @@ const genomeBrowserData: GenomeBrowserData[] = [{
size: 6000 size: 6000
}, },
currentMousePosition: 0, currentMousePosition: 0,
genes: geneData, chromosome: {
x: 0, size: chromosomeSize,
y: 0 genes: geneData
},
axis: {
global: {
title: "Genome XXXX (" + chromosomeSize + " bp)",
interval: [0, chromosomeSize],
window: [0, 0]
},
chromosome: {
title: "Chromosome X ",
interval: [0, 0]
}
}
}]; }];
const svg = select<SVGElement, any>("svg")
.attr("width", width + 1)
.attr("height", height);
draw(); draw();
...@@ -91,8 +110,8 @@ select("#zoom-out").on("click", function () { ...@@ -91,8 +110,8 @@ select("#zoom-out").on("click", function () {
function draw() { function draw() {
// //
const computedGenomeBrowserData: GenomeBrowserData[] = genomeBrowserData const computedGenomeBrowserData: GenomeBrowserData[] = genomeBrowserData
.map(function (genomesBrowser, i) { .map(function (genomesBrowser: GenomeBrowserData, i) {
const { width, genomeWindow: { center, size }, genes } = genomesBrowser; const { width, genomeWindow: { center, size }, chromosome: { genes } } = genomesBrowser;
const genomeWindowBoundaries = getGenomeWindow(center, size); const genomeWindowBoundaries = getGenomeWindow(center, size);
const xScale = scaleLinear() const xScale = scaleLinear()
.domain(genomeWindowBoundaries) .domain(genomeWindowBoundaries)
...@@ -108,7 +127,6 @@ function draw() { ...@@ -108,7 +127,6 @@ function draw() {
gene => gene.end > genomeWindowBoundaries[0] || gene.begin < genomeWindowBoundaries[1] gene => gene.end > genomeWindowBoundaries[0] || gene.begin < genomeWindowBoundaries[1]
); );
const dragStartCallback = function (elem: SVGElement) { const dragStartCallback = function (elem: SVGElement) {
select(elem).classed("active", true); select(elem).classed("active", true);
genomesBrowser.currentMousePosition = xScale genomesBrowser.currentMousePosition = xScale
...@@ -128,21 +146,39 @@ function draw() { ...@@ -128,21 +146,39 @@ function draw() {
select(elem).classed("active", false); select(elem).classed("active", false);
} }
const globalAxisWindow = getGenomeWindow(center, size);
const newGenomeBrowser = { const newGenomeBrowser = {
...genomesBrowser, ...genomesBrowser,
genes: visibleGenes.map(function (gene) { chromosome: {
const fill = gene.strand === "+" ? color("darkred") : color("darkblue"); ...genomesBrowser.chromosome,
const stroke = (fill) ? fill.darker(1).toString() : "lighgray" genes: visibleGenes.map(function (gene) {
return { const fill = gene.strand === "+" ? color("darkred") : color("darkblue");
...gene, const stroke = (fill) ? fill.darker(1).toString() : "lighgray"
eventHandler: { return {
click: clickHandler ...gene,
}, eventHandler: {
fill: (fill) ? fill.toString() : "lightgray", click: clickHandler
stroke },
} fill: (fill) ? fill.toString() : "lightgray",
}), stroke
}
})
},
scale: xScale, scale: xScale,
axis: {
...genomesBrowser.axis,
global: {
...genomesBrowser.axis.global,
window: globalAxisWindow
},
chromosome: {
...genomesBrowser.axis.chromosome,
interval: globalAxisWindow
}
},
eventHandler: { eventHandler: {
dragged: draggedCallback, dragged: draggedCallback,
dragstarted: dragStartCallback, dragstarted: dragStartCallback,
...@@ -153,9 +189,7 @@ function draw() { ...@@ -153,9 +189,7 @@ function draw() {
return newGenomeBrowser; return newGenomeBrowser;
}); });
const svg = select<SVGElement, any>("svg")
.attr("width", width + 1)
.attr("height", height);
svg svg
.datum(computedGenomeBrowserData) .datum(computedGenomeBrowserData)
......
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