Commit 8664afa7 authored by Remi  PLANEL's avatar Remi PLANEL

New layout that transform State data to genomeBrowserData

parent 253d6eb6
import { State, GeneData } from "../types";
import { event } from "d3-selection";
import { format as d3Format } from "d3-format";
import { scaleOrdinal } from "d3-scale";
import { color } from "d3";
import { schemeSet1 } from "d3-scale-chromatic";
const geneColor = scaleOrdinal(
// schemeDark2
// schemeCategory10
schemeSet1
);
export default function genomeBrowserData(
state: State,
brushHandler: any,
clickHandler: any
) {
const {
window,
width,
chromosomeSize,
genes,
chromosome: { title: chromosomeTitle },
selectedChromosome: { title: selectedChromosomeTitle }
} = state;
const intervalFormatter = d3Format(".3s");
const chromInterval: [number, number] = [0, chromosomeSize]
return {
width,
chromosome: {
size: chromosomeSize,
genes,
ruler: {
title: chromosomeTitle + " (" + chromosomeSize + " bp)",
interval: chromInterval,
window,
maxWindowSize: chromosomeSize,
eventHandler: {
brushed: (scale: any) => brushHandler(scale, state)
}
}
},
selectedChromosome: {
window,
genes: state.genes.filter(
(gene: GeneData) => gene.end > window[0] && gene.begin < window[1]
).map(function (gene) {
const fill = color(geneColor(gene.strand));
const stroke = (fill) ? fill.darker(1).toString() : "lighgray";
return {
...gene,
eventHandler: {
click: (geneLocation: [number, number]) => clickHandler(geneLocation, state)
},
fill: (fill) ? fill.toString() : "lightgray",
stroke
}
}),
ruler: {
title: selectedChromosomeTitle
+ " [" + intervalFormatter(window[0]) + ", " + intervalFormatter(window[1]) + "]",
interval: window
}
},
}
}
import { GeneData, GenomeBrowserData, State } from "./types"; import { GeneData, GenomeBrowserData, State } from "./types";
import { select, event } from "d3-selection"; import { select, event, BaseEvent, ClientPointEvent } from "d3-selection";
import { scaleOrdinal } from "d3-scale"; import { scaleOrdinal } from "d3-scale";
import GenomeBrowser from "./component/genome-browser"; import GenomeBrowser from "./component/genome-browser";
import { color } from "d3"; import { color } from "d3";
import { format as d3Format } from "d3-format"; import { format as d3Format } from "d3-format";
import { schemeSet1 } from "d3-scale-chromatic"; import { schemeSet1 } from "d3-scale-chromatic";
import genomeBrowserLayout from "./layout/genome-browser";
const width = 1500; const width = 1500;
const height = 300; const height = 300;
...@@ -115,80 +117,31 @@ select("#zoom-out").on("click", function () { ...@@ -115,80 +117,31 @@ select("#zoom-out").on("click", function () {
function draw() { function draw() {
// //
const computedGenomeBrowserData: GenomeBrowserData = const computedGenomeBrowserData: GenomeBrowserData =
getGenomeBrowserData(state); genomeBrowserLayout(state, brushHandler, clickHandler);
genomeBrowsers genomeBrowsers
.datum([computedGenomeBrowserData]) .datum([computedGenomeBrowserData])
.call(genomeBrowserComponent, width, height); .call(genomeBrowserComponent, width, height);
} }
function getGenomeBrowserData(state: State) { function clickHandler([begin, end]: [number, number], state: State) {
const { const centerGene = (end + begin) / 2;
window, const sizeWindow = state.window[1] - state.window[0];
width, state.window = [centerGene - sizeWindow / 2, centerGene + sizeWindow / 2];
chromosomeSize, draw();
genes, }
chromosome: { title: chromosomeTitle },
selectedChromosome: { title: selectedChromosomeTitle } function brushHandler(scale: any, state: State) {
} = state; if (!event.sourceEvent) return;
const intervalFormatter = d3Format(".3s"); if (event.selection) {
// Callback when brushed => modify data and redraw the genome + axis const { selection: [x1, x2] } = event;
const brushedCallback = function (scale: any) { const newwindow: [number, number] = [scale.invert(x1), scale.invert(x2)];
if (!event.sourceEvent) return; state.window = newwindow;
if (event.selection) { genomeBrowserComponent.updateSelectedChromosome(
const { selection: [x1, x2] } = event; genomeBrowserLayout(state, brushHandler, clickHandler)
const newwindow: [number, number] = [scale.invert(x1), scale.invert(x2)]; );
state.window = newwindow;
genomeBrowserComponent.updateSelectedChromosome(
getGenomeBrowserData(state)
);
}
};
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,
ruler: {
title: chromosomeTitle + " (" + chromosomeSize + " bp)",
interval: chromInterval,
window,
maxWindowSize: chromosomeSize,
eventHandler: {
brushed: brushedCallback
}
}
},
selectedChromosome: {
window,
genes: genes.filter(
(gene: GeneData) => gene.end > window[0] && gene.begin < window[1]
).map(function (gene) {
const fill = color(geneColor(gene.strand));
const stroke = (fill) ? fill.darker(1).toString() : "lighgray";
return {
...gene,
eventHandler: {
click: clickHandler
},
fill: (fill) ? fill.toString() : "lightgray",
stroke
}
}),
ruler: {
title: selectedChromosomeTitle
+ " [" + intervalFormatter(window[0]) + ", " + intervalFormatter(window[1]) + "]",
interval: window
}
},
} }
} }
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