Skip to content
GitLab
Commit a2f0b561 authored by Remi PLANEL's avatar Remi PLANEL
Browse files

Change GenomeBrowserData type

parent 5979695a
Hide whitespace changes
Inline Side-by-side
src/scripts/component/genome-browser.ts
View file @ a2f0b561
......@@ -73,9 +73,13 @@ export default function () {
})
);
genomesBrowserU.each(function (data) {
const { chromosome: { genes }, axis: { chromosome, global } } = data;
updateWholeChromosomeAxis(global);
updateSelectedChromosome(chromosome, genes);
const {
chromosome: { rule: chromosomeRule },
selectedChromosome: { genes: selectedGenes, rule: selectedChromosomeRule },
// axis: { chromosome, global }
} = data;
updateWholeChromosomeAxis(chromosomeRule);
updateSelectedChromosome(selectedChromosomeRule, selectedGenes);
});
});
}
......@@ -98,7 +102,7 @@ export default function () {
if (genomesBrowserU) {
genomesBrowserU
.select<SVGElement>("g.chromosome-axis")
.datum(({ axis: { global } }) => global)
.datum(axis)
.call(wholeChromosomeRule, width, 0);
}
}
......
src/scripts/index.ts
View file @ a2f0b561
import { GeneData, GenomeBrowserData } from "./types";
import { GeneData, GenomeBrowserData, State } from "./types";
import { select, event } from "d3-selection";
import { scaleLinear } from "d3-scale";
import GenomeBrowser from "./component/genome-browser";
import { color } from "d3";
import genomeBrowser from "./component/genome-browser";
import { filter } from "rxjs/operators";
import { schemeSet1 } from "d3-scale-chromatic";
const width = 1500;
......@@ -63,46 +61,36 @@ const geneData: GeneData[] = [
},
];
const chromosomeSize = 75000;
const genomeBrowserData: GenomeBrowserData[] = [{
const state: State = {
width: 1500,
genomeWindow: {
center: 23000,
size: 6000
},
currentMousePosition: 0,
chromosomeSize: 75000,
window: [20000, 26000],
genes: geneData,
chromosome: {
size: chromosomeSize,
genes: geneData
title: "Genome XXXX",
},
axis: {
global: {
title: "Genome XXXX (" + chromosomeSize + " bp)",
interval: [0, chromosomeSize],
window: [0, 0],
},
chromosome: {
title: "Chromosome X ",
interval: [0, 0]
}
selectedChromosome: {
title: "Chromosome X"
}
}];
}
const svg = select<SVGElement, any>("svg")
.attr("width", width + 1)
.attr("height", height);
draw();
select("#zoom-in").on("click", function () {
genomeBrowserData[0].genomeWindow.size -= 1000;
const [start, end] = state.window;
state.window = [start + 500, end - 500];
draw()
});
select("#zoom-out").on("click", function () {
genomeBrowserData[0].genomeWindow.size += 1000;
const [start, end] = state.window;
state.window = [start - 500, end + 500];
draw()
});
......@@ -111,117 +99,85 @@ select("#zoom-out").on("click", function () {
*/
function draw() {
//
const computedGenomeBrowserData: GenomeBrowserData[] = updateGenomeBrowserData(genomeBrowserData);
const computedGenomeBrowserData: GenomeBrowserData =
getGenomeBrowserData(state);
svg
.datum(computedGenomeBrowserData)
.datum([computedGenomeBrowserData])
.call(genomeBrowserComponent, width, height);
}
function updateGenomeBrowserData(genomeBrowserData: GenomeBrowserData[]) {
return genomeBrowserData
.map(function (genomesBrowser: GenomeBrowserData, i) {
const { width, genomeWindow: { center, size }, chromosome: { genes } } = genomesBrowser;
const genomeWindowBoundaries = getChromosomeInterval(center, size);
const xScale = scaleLinear()
.domain(genomeWindowBoundaries)
.range([0, width]);
// 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 getGenomeBrowserData(state: State) {
const {
window,
width,
chromosomeSize,
genes,
chromosome: { title: chromosomeTitle },
selectedChromosome: { title: selectedChromosomeTitle }
} = state;
// Callback when brushed => modify data and redraw the genome + axis
const brushedCallback = function (scale: any) {
if (!event.sourceEvent) return;
if (event.selection) {
const { selection: [x1, x2] } = event;
const newwindow: [number, number] = [scale.invert(x1), scale.invert(x2)];
state.window = newwindow;
const newData = getGenomeBrowserData(state);
genomeBrowserComponent.updateSelectedChromosome(
newData.selectedChromosome.rule,
newData.selectedChromosome.genes
);
// Callback when brushed => modify data and redraw the genome + axis
const brushedCallback = function (scale: any) {
if (!event.sourceEvent) return;
if (event.selection) {
const { selection: [x1, x2] } = event;
const window = [scale.invert(x1), scale.invert(x2)];
genomeBrowserData[i].genomeWindow.center = (window[0] + window[1]) / 2;
genomeBrowserData[i].genomeWindow.size = window[1] - window[0];
const newData = updateGenomeBrowserData(genomeBrowserData);
newData.forEach(function (data) {
genomeBrowserComponent.updateSelectedChromosome(data.axis.chromosome, data.chromosome.genes);
})
}
};
const clickHandler = function ([begin, end]: [number, number]) {
const centerGene = (end + begin) / 2;
const sizeWindow = window[1] - window[0];
state.window = [centerGene - sizeWindow / 2, centerGene + sizeWindow / 2];
draw();
};
const chromInterval: [number, number] = [0, chromosomeSize]
return {
width,
chromosome: {
size: chromosomeSize,
genes,
rule: {
title: chromosomeTitle + " (" + chromosomeSize + " bp)",
interval: chromInterval,
window,
eventHandler: {
brushed: brushedCallback
}
};
const dragStartCallback = function (elem: SVGElement) {
select(elem).classed("active", true);
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 globalAxisWindow = getChromosomeInterval(center, size);
const newGenomeBrowser = {
...genomesBrowser,
chromosome: {
...genomesBrowser.chromosome,
genes: visibleGenes.map(function (gene) {
// const fillPalette = schemeSet1(gene.strand);
const fill = gene.strand === "+" ? color("darkred") : color("darkblue");
const stroke = (fill) ? fill.darker(1).toString() : "lighgray"
return {
...gene,
eventHandler: {
click: clickHandler
},
fill: (fill) ? fill.toString() : "lightgray",
stroke
}
})
},
scale: xScale,
axis: {
...genomesBrowser.axis,
global: {
...genomesBrowser.axis.global,
window: globalAxisWindow,
eventHandler: {
brushed: brushedCallback
}
},
selectedChromosome: {
window,
genes: genes.filter(
(gene: GeneData) => gene.end > window[0] && gene.begin < window[1]
).map(function (gene) {
const fill = gene.strand === "+" ? color("darkred") : color("darkblue");
const stroke = (fill) ? fill.darker(1).toString() : "lighgray"
return {
...gene,
eventHandler: {
click: clickHandler
},
chromosome: {
...genomesBrowser.axis.chromosome,
interval: globalAxisWindow
}
},
eventHandler: {
dragged: draggedCallback,
dragstarted: dragStartCallback,
dragended: dragendedCallback
fill: (fill) ? fill.toString() : "lightgray",
stroke
}
};
return newGenomeBrowser;
});
}
function getChromosomeInterval(center: number, genomeWindowSize: number): [number, number] {
const halfWindow = genomeWindowSize / 2;
return [center - halfWindow, center + halfWindow]
}),
rule: {
title: selectedChromosomeTitle
+ " [" + window[0] + ", " + window[1] + "]",
interval: window
}
},
// eventHandler: {
// }
}
}
src/scripts/types.ts
View file @ a2f0b561
......@@ -34,24 +34,32 @@ export interface BrushableAxisData extends GenericAxisData {
}
}
export interface State {
width: number,
chromosomeSize: number,
window: [number, number],
genes: GeneData[],
chromosome: {
title: string,
},
selectedChromosome: {
title: string
}
}
export interface GenomeBrowserData {
width: number,
genomeWindow: {
center: number,
size: number
},
currentMousePosition: number,
//currentMousePosition: number,
chromosome: {
size: number,
genes: GeneData[]
genes: GeneData[],
rule: BrushableAxisData
},
selectedChromosome: {
window: [number, number],
genes: GeneData[],
rule: GenericAxisData
},
axis: {
global: BrushableAxisData,
chromosome: GenericAxisData
}
eventHandler?: {
dragstarted: (elem: SVGElement) => void,
dragged: () => void,
......
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