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 { select, event } from "d3-selection";
import { select, event, BaseEvent, ClientPointEvent } from "d3-selection";
import { scaleOrdinal } from "d3-scale";
import GenomeBrowser from "./component/genome-browser";
import { color } from "d3";
import { format as d3Format } from "d3-format";
import { schemeSet1 } from "d3-scale-chromatic";
import genomeBrowserLayout from "./layout/genome-browser";
const width = 1500;
const height = 300;
......@@ -115,80 +117,31 @@ select("#zoom-out").on("click", function () {
function draw() {
//
const computedGenomeBrowserData: GenomeBrowserData =
getGenomeBrowserData(state);
genomeBrowserLayout(state, brushHandler, clickHandler);
genomeBrowsers
.datum([computedGenomeBrowserData])
.call(genomeBrowserComponent, width, height);
}
function getGenomeBrowserData(state: State) {
const {
window,
width,
chromosomeSize,
genes,
chromosome: { title: chromosomeTitle },
selectedChromosome: { title: selectedChromosomeTitle }
} = state;
const intervalFormatter = d3Format(".3s");
// Callback when brushed => modify data and redraw the genome + axis
const brushedCallback = function (scale: any) {
function clickHandler([begin, end]: [number, number], state: State) {
const centerGene = (end + begin) / 2;
const sizeWindow = state.window[1] - state.window[0];
state.window = [centerGene - sizeWindow / 2, centerGene + sizeWindow / 2];
draw();
}
function brushHandler(scale: any, state: State) {
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;
genomeBrowserComponent.updateSelectedChromosome(
getGenomeBrowserData(state)
genomeBrowserLayout(state, brushHandler, clickHandler)
);
}
};
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