Commit 3e3594c5 authored by Remi  PLANEL's avatar Remi PLANEL
Browse files

Add src/scripts/component/selected-chromosome.

parent a2f0b561
import GeneComponent from "./sequence/gene";
import ChromosomeRule from "./rules/chromosome-rule";
import SelectedChromosome from "./selected-chromosome";
import BrushableChromosomeRule from "./rules/brushable-chromosome-rule";
// D3
import { select, Selection } from "d3-selection";
import { drag } from "d3-drag";
//types
import { GeneData, GenomeBrowserData, GenericAxisData, BrushableAxisData } from "../types";
import { GeneData, GenomeBrowserData, GenericAxisData, BrushableAxisData, SelectedChromosomeData } from "../types";
export default function () {
const classes = {
chromosomeRule: "chromosome-rule",
selectedChromosome: "selected-chromosomes"
};
const selectedChromosomeRule = ChromosomeRule();
const geneComponent = GeneComponent();
const wholeChromosomeRule = BrushableChromosomeRule();
const selectedChromosomeComponent = SelectedChromosome();
let width = 900;
let genomesBrowserU: Selection<SVGElement, GenomeBrowserData, SVGElement, any> | null = null;
......@@ -35,43 +41,21 @@ export default function () {
.append<SVGElement>("g")
.classed("genome-browser", true);
genomeBrowserE.append("rect")
.classed("genome-browser-background", true);
genomeBrowserE.append("g").classed("chromosome-axis", true);
genomeBrowserE.append("g").classed("selected-chromosome", true);
genomeBrowserE.append("g").classed("axis", true);
genomeBrowserE.append("g").classed("genes", true);
genomeBrowserE.append("g").classed(classes.chromosomeRule, true);
genomeBrowserE.append("g")
.classed(classes.selectedChromosome, true)
.attr("transform", "translate(0,70)");
//EXIT
genomeBrowser.exit().remove();
//UPDATE
genomesBrowserU = genomeBrowser.merge(genomeBrowserE);
genomesBrowserU
.select<SVGRectElement>("rect.genome-browser-background")
.attr("width", width)
.attr("height", height)
.call(
drag<SVGRectElement, GenomeBrowserData>()
.on("start", (d: GenomeBrowserData) => {
if (d.eventHandler) {
d.eventHandler.dragstarted(this);
}
})
.on("drag", d => {
if (d.eventHandler) {
d.eventHandler.dragged();
}
})
.on("end", d => {
if (d.eventHandler) {
d.eventHandler.dragended(this);
}
})
);
genomesBrowserU.each(function (data) {
const {
chromosome: { rule: chromosomeRule },
......@@ -79,34 +63,28 @@ export default function () {
// axis: { chromosome, global }
} = data;
updateWholeChromosomeAxis(chromosomeRule);
updateSelectedChromosome(selectedChromosomeRule, selectedGenes);
updateSelectedChromosome(data);
});
});
}
function updateSelectedChromosome(axis: GenericAxisData, genes: GeneData[]) {
if (genomesBrowserU !== null) {
genomesBrowserU
.select<SVGElement>("g.axis")
.datum(axis)
.call(selectedChromosomeRule, width, 70);
function updateSelectedChromosome(data: GenomeBrowserData) {
if (genomesBrowserU !== null) {
genomesBrowserU
.select<SVGElement>(".genes")
.attr("transform", "translate(0, 80)")
.datum(genes)
.call(geneComponent, selectedChromosomeRule.scale(), 30)
.select<SVGElement>("." + classes.selectedChromosome)
.datum<SelectedChromosomeData[]>([data.selectedChromosome])
.call(selectedChromosomeComponent, width);
}
};
}
function updateWholeChromosomeAxis(axis: BrushableAxisData) {
if (genomesBrowserU) {
genomesBrowserU
.select<SVGElement>("g.chromosome-axis")
.select<SVGElement>("." + classes.chromosomeRule)
.datum(axis)
.call(wholeChromosomeRule, width, 0);
}
}
genomeBrowser.updateSelectedChromosome = updateSelectedChromosome;
return genomeBrowser;
}
......
// D3
import { select, Selection } from "d3-selection";
import { SelectedChromosomeData, GenericAxisData, GeneData } from "../types";
import ChromosomeRule from "./rules/chromosome-rule";
import Gene from "./sequence/gene";
import { drag } from "d3-drag";
export default function () {
const classes = {
selectedChromosome: "selected-chromosome",
rule: "rule",
genes: "genes"
};
const ruleComponent = ChromosomeRule();
const geneComponent = Gene();
function selectedChromosome(
_selection: Selection<SVGElement, SelectedChromosomeData[], SVGElement, any>,
width: number
) {
_selection.each(function (_data: SelectedChromosomeData[]) {
const wrapper = select(this);
const selectedChromosome = wrapper
.selectAll<SVGElement, SelectedChromosomeData>("." + classes.selectedChromosome)
.data(_data);
// ENTER
const selectedChromosomeEnter = selectedChromosome
.enter()
.append<SVGElement>("g")
.classed(classes.selectedChromosome, true);
selectedChromosomeEnter.append("rect")
.classed("genome-browser-background", true);
selectedChromosomeEnter
.append("g")
.classed(classes.rule, true);
selectedChromosomeEnter
.append("g")
.classed(classes.genes, true);
// EXIT
selectedChromosome.exit().remove();
//UPDATE
const selectedChromosomeUpdate = selectedChromosome
.merge(selectedChromosomeEnter);
selectedChromosomeUpdate
.select<SVGRectElement>("rect.genome-browser-background")
.attr("width", width)
.attr("height", 150)
.call(
drag<SVGRectElement, SelectedChromosomeData>()
.on("start", (d: SelectedChromosomeData) => {
if (d.eventHandler) {
d.eventHandler.dragstarted(this);
}
})
.on("drag", d => {
if (d.eventHandler) {
d.eventHandler.dragged();
}
})
.on("end", d => {
if (d.eventHandler) {
d.eventHandler.dragended(this);
}
})
);
selectedChromosomeUpdate
.select<SVGElement>("." + classes.rule)
.datum<GenericAxisData>(d => d.rule)
.call(ruleComponent, width, 0)
selectedChromosomeUpdate
.select<SVGElement>("." + classes.genes)
.datum<GeneData[]>(d => d.genes)
.call(geneComponent, ruleComponent.scale(), 30, 70);
});
}
return selectedChromosome;
}
......@@ -124,10 +124,8 @@ function getGenomeBrowserData(state: State) {
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
getGenomeBrowserData(state)
);
}
};
......
......@@ -47,6 +47,13 @@ export interface State {
}
}
export interface SelectedChromosomeData {
window: [number, number],
genes: GeneData[],
rule: GenericAxisData
}
export interface GenomeBrowserData {
width: number,
//currentMousePosition: number,
......@@ -55,11 +62,7 @@ export interface GenomeBrowserData {
genes: GeneData[],
rule: BrushableAxisData
},
selectedChromosome: {
window: [number, number],
genes: GeneData[],
rule: GenericAxisData
},
selectedChromosome: SelectedChromosomeData,
eventHandler?: {
dragstarted: (elem: SVGElement) => void,
dragged: () => void,
......
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