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

Class name: rule -> ruler

parent 5897a8c4
Hide whitespace changes
Inline Side-by-side
src/scripts/component/genome-browser.ts
View file @ f9a2de21
...@@ -10,7 +10,7 @@ import { GenomeBrowserData, BrushableAxisData, SelectedChromosomeData } from ".. ...@@ -10,7 +10,7 @@ import { GenomeBrowserData, BrushableAxisData, SelectedChromosomeData } from "..
export default function () { export default function () {
const classes = { const classes = {
chromosomeRule: "chromosome-rule", chromosomeRuler: "chromosome-ruler",
selectedChromosome: "selected-chromosomes" selectedChromosome: "selected-chromosomes"
}; };
const wholeChromosomeRule = BrushableChromosomeRule(); const wholeChromosomeRule = BrushableChromosomeRule();
...@@ -37,7 +37,7 @@ export default function () { ...@@ -37,7 +37,7 @@ export default function () {
.append<SVGElement>("g") .append<SVGElement>("g")
.classed("genome-browser", true); .classed("genome-browser", true);
genomeBrowserE.append("g").classed(classes.chromosomeRule, true); genomeBrowserE.append("g").classed(classes.chromosomeRuler, true);
genomeBrowserE.append("g") genomeBrowserE.append("g")
.classed(classes.selectedChromosome, true) .classed(classes.selectedChromosome, true)
.attr("transform", "translate(0,70)"); .attr("transform", "translate(0,70)");
...@@ -51,8 +51,8 @@ export default function () { ...@@ -51,8 +51,8 @@ export default function () {
genomesBrowserU.each(function (data) { genomesBrowserU.each(function (data) {
const { const {
chromosome: { rule: chromosomeRule }, chromosome: { ruler: chromosomeRule },
selectedChromosome: { genes: selectedGenes, rule: selectedChromosomeRule }, selectedChromosome: { genes: selectedGenes, ruler: selectedChromosomeRule },
// axis: { chromosome, global } // axis: { chromosome, global }
} = data; } = data;
updateWholeChromosomeAxis(chromosomeRule); updateWholeChromosomeAxis(chromosomeRule);
...@@ -64,7 +64,7 @@ export default function () { ...@@ -64,7 +64,7 @@ export default function () {
function updateSelectedChromosome(data: GenomeBrowserData) { function updateSelectedChromosome(data: GenomeBrowserData) {
if (genomesBrowserU !== null) { if (genomesBrowserU !== null) {
genomesBrowserU genomesBrowserU
.select<SVGElement>("." + classes.selectedChromosome) .select<SVGGElement>("." + classes.selectedChromosome)
.datum<SelectedChromosomeData[]>([data.selectedChromosome]) .datum<SelectedChromosomeData[]>([data.selectedChromosome])
.call(selectedChromosomeComponent, width); .call(selectedChromosomeComponent, width);
} }
...@@ -73,7 +73,7 @@ export default function () { ...@@ -73,7 +73,7 @@ export default function () {
function updateWholeChromosomeAxis(axis: BrushableAxisData) { function updateWholeChromosomeAxis(axis: BrushableAxisData) {
if (genomesBrowserU) { if (genomesBrowserU) {
genomesBrowserU genomesBrowserU
.select<SVGGElement>("." + classes.chromosomeRule) .select<SVGGElement>("." + classes.chromosomeRuler)
.datum(axis) .datum(axis)
.call(wholeChromosomeRule, width, 0); .call(wholeChromosomeRule, width, 0);
} }
......
src/scripts/component/ruler/brushable-chromosome.ts
View file @ f9a2de21
...@@ -8,8 +8,8 @@ import { format } from "d3-format"; ...@@ -8,8 +8,8 @@ import { format } from "d3-format";
export default function () { export default function () {
const genomeAxisComponent = GenomeAxis(); const genomeAxisComponent = GenomeAxis();
const htmlClassName = { const htmlClassName = {
componentContainer: "whole-chromosome-rule", componentContainer: "whole-chromosome-ruler",
genericRule: "generic-rule", genericRuler: "generic-ruler",
brushSelection: "brush-selection" brushSelection: "brush-selection"
}; };
...@@ -76,7 +76,7 @@ export default function () { ...@@ -76,7 +76,7 @@ export default function () {
.classed(htmlClassName.componentContainer, true); .classed(htmlClassName.componentContainer, true);
globalAxisEnter.append("g") globalAxisEnter.append("g")
.classed(htmlClassName.genericRule, true); .classed(htmlClassName.genericRuler, true);
const brushSelectionEnter = globalAxisEnter.append("g") const brushSelectionEnter = globalAxisEnter.append("g")
...@@ -105,7 +105,7 @@ export default function () { ...@@ -105,7 +105,7 @@ export default function () {
.call(brush.move, [genomicToPx(_data.window[0]), genomicToPx(_data.window[1])]); .call(brush.move, [genomicToPx(_data.window[0]), genomicToPx(_data.window[1])]);
globalAxisUpdate globalAxisUpdate
.select<SVGGElement>("." + htmlClassName.genericRule) .select<SVGGElement>("." + htmlClassName.genericRuler)
.datum((d: BrushableAxisData): GenericAxisData => ({ title: d.title, interval: [d.interval[0], d.interval[1]] })) .datum((d: BrushableAxisData): GenericAxisData => ({ title: d.title, interval: [d.interval[0], d.interval[1]] }))
.call(genomeAxisComponent, width, yPosition); .call(genomeAxisComponent, width, yPosition);
......
src/scripts/main-genome-browser.ts
View file @ f9a2de21
...@@ -155,7 +155,7 @@ function getGenomeBrowserData(state: State) { ...@@ -155,7 +155,7 @@ function getGenomeBrowserData(state: State) {
chromosome: { chromosome: {
size: chromosomeSize, size: chromosomeSize,
genes, genes,
rule: { ruler: {
title: chromosomeTitle + " (" + chromosomeSize + " bp)", title: chromosomeTitle + " (" + chromosomeSize + " bp)",
interval: chromInterval, interval: chromInterval,
window, window,
...@@ -181,7 +181,7 @@ function getGenomeBrowserData(state: State) { ...@@ -181,7 +181,7 @@ function getGenomeBrowserData(state: State) {
stroke stroke
} }
}), }),
rule: { ruler: {
title: selectedChromosomeTitle title: selectedChromosomeTitle
+ " [" + intervalFormatter(window[0]) + ", " + intervalFormatter(window[1]) + "]", + " [" + intervalFormatter(window[0]) + ", " + intervalFormatter(window[1]) + "]",
interval: window interval: window
......
src/scripts/types.ts
View file @ f9a2de21
...@@ -52,7 +52,7 @@ export interface State { ...@@ -52,7 +52,7 @@ export interface State {
export interface SelectedChromosomeData { export interface SelectedChromosomeData {
window: [number, number], window: [number, number],
genes: GeneData[], genes: GeneData[],
rule: GenericAxisData ruler: GenericAxisData
} }
export interface GenomeBrowserData { export interface GenomeBrowserData {
...@@ -61,7 +61,7 @@ export interface GenomeBrowserData { ...@@ -61,7 +61,7 @@ export interface GenomeBrowserData {
chromosome: { chromosome: {
size: number, size: number,
genes: GeneData[], genes: GeneData[],
rule: BrushableAxisData ruler: BrushableAxisData
}, },
selectedChromosome: SelectedChromosomeData, selectedChromosome: SelectedChromosomeData,
eventHandler?: { eventHandler?: {
......
tests/brushable-chromosome.test.ts
View file @ f9a2de21
...@@ -4,7 +4,7 @@ import { select } from "d3-selection"; ...@@ -4,7 +4,7 @@ import { select } from "d3-selection";
describe("Test Chromosome Ruler", () => { describe("Test Chromosome Ruler", () => {
const result = '<g class="whole-chromosome-rule"><g class="generic-rule" transform="translate(0,20)"><g class="genome-axis"><g class="title"><text style="fill: black; font-family: monospace;" transform="translate(830,20)">brushable chromosome</text></g><g class="axis-elems" transform="translate(0, 50)" fill="none" font-size="10" font-family="sans-serif" text-anchor="middle"><path class="domain" stroke="currentColor" d="M0.5,-6V0.5H1500.5V-6"></path><g class="tick" opacity="1" transform="translate(0.5,0)"><line stroke="currentColor" y2="-6"></line><text fill="currentColor" y="-9" dy="0em">0.00</text></g><g class="tick" opacity="1" transform="translate(150.5,0)"><line stroke="currentColor" y2="-6"></line><text fill="currentColor" y="-9" dy="0em">100k</text></g><g class="tick" opacity="1" transform="translate(300.5,0)"><line stroke="currentColor" y2="-6"></line><text fill="currentColor" y="-9" dy="0em">200k</text></g><g class="tick" opacity="1" transform="translate(450.5,0)"><line stroke="currentColor" y2="-6"></line><text fill="currentColor" y="-9" dy="0em">300k</text></g><g class="tick" opacity="1" transform="translate(600.5,0)"><line stroke="currentColor" y2="-6"></line><text fill="currentColor" y="-9" dy="0em">400k</text></g><g class="tick" opacity="1" transform="translate(750.5,0)"><line stroke="currentColor" y2="-6"></line><text fill="currentColor" y="-9" dy="0em">500k</text></g><g class="tick" opacity="1" transform="translate(900.5,0)"><line stroke="currentColor" y2="-6"></line><text fill="currentColor" y="-9" dy="0em">600k</text></g><g class="tick" opacity="1" transform="translate(1050.5,0)"><line stroke="currentColor" y2="-6"></line><text fill="currentColor" y="-9" dy="0em">700k</text></g><g class="tick" opacity="1" transform="translate(1200.5,0)"><line stroke="currentColor" y2="-6"></line><text fill="currentColor" y="-9" dy="0em">800k</text></g><g class="tick" opacity="1" transform="translate(1350.5,0)"><line stroke="currentColor" y2="-6"></line><text fill="currentColor" y="-9" dy="0em">900k</text></g><g class="tick" opacity="1" transform="translate(1500.5,0)"><line stroke="currentColor" y2="-6"></line><text fill="currentColor" y="-9" dy="0em">1.00M</text></g></g></g></g><g transform="translate(0,25)"><g class="brush-selection" fill="none" pointer-events="all"><rect class="overlay" pointer-events="all" cursor="crosshair" x="0" y="0" width="1500" height="50"></rect><rect class="selection" cursor="move" fill="#777" fill-opacity="0.3" stroke="#fff" shape-rendering="crispEdges" style="" x="150" y="0" width="75" height="50"></rect><rect class="handle handle--e" cursor="ew-resize" style="" x="222" y="-3" width="6" height="56"></rect><rect class="handle handle--w" cursor="ew-resize" style="" x="147" y="-3" width="6" height="56"></rect></g><g style="font-size: 9;" class="brush-selection-boundaries"><text class="start" style="text-anchor: end;" transform="translate(150,60)">100k</text><text class="end" transform="translate(225,60)" style="text-anchor: start;">150k</text></g></g></g>' const result = '<g class=\"whole-chromosome-ruler\"><g class=\"generic-ruler\" transform=\"translate(0,20)\"><g class=\"genome-axis\"><g class=\"title\"><text style=\"fill: black; font-family: monospace;\" transform=\"translate(830,20)\">brushable chromosome</text></g><g class=\"axis-elems\" transform=\"translate(0, 50)\" fill=\"none\" font-size=\"10\" font-family=\"sans-serif\" text-anchor=\"middle\"><path class=\"domain\" stroke=\"currentColor\" d=\"M0.5,-6V0.5H1500.5V-6\"></path><g class=\"tick\" opacity=\"1\" transform=\"translate(0.5,0)\"><line stroke=\"currentColor\" y2=\"-6\"></line><text fill=\"currentColor\" y=\"-9\" dy=\"0em\">0.00</text></g><g class=\"tick\" opacity=\"1\" transform=\"translate(150.5,0)\"><line stroke=\"currentColor\" y2=\"-6\"></line><text fill=\"currentColor\" y=\"-9\" dy=\"0em\">100k</text></g><g class=\"tick\" opacity=\"1\" transform=\"translate(300.5,0)\"><line stroke=\"currentColor\" y2=\"-6\"></line><text fill=\"currentColor\" y=\"-9\" dy=\"0em\">200k</text></g><g class=\"tick\" opacity=\"1\" transform=\"translate(450.5,0)\"><line stroke=\"currentColor\" y2=\"-6\"></line><text fill=\"currentColor\" y=\"-9\" dy=\"0em\">300k</text></g><g class=\"tick\" opacity=\"1\" transform=\"translate(600.5,0)\"><line stroke=\"currentColor\" y2=\"-6\"></line><text fill=\"currentColor\" y=\"-9\" dy=\"0em\">400k</text></g><g class=\"tick\" opacity=\"1\" transform=\"translate(750.5,0)\"><line stroke=\"currentColor\" y2=\"-6\"></line><text fill=\"currentColor\" y=\"-9\" dy=\"0em\">500k</text></g><g class=\"tick\" opacity=\"1\" transform=\"translate(900.5,0)\"><line stroke=\"currentColor\" y2=\"-6\"></line><text fill=\"currentColor\" y=\"-9\" dy=\"0em\">600k</text></g><g class=\"tick\" opacity=\"1\" transform=\"translate(1050.5,0)\"><line stroke=\"currentColor\" y2=\"-6\"></line><text fill=\"currentColor\" y=\"-9\" dy=\"0em\">700k</text></g><g class=\"tick\" opacity=\"1\" transform=\"translate(1200.5,0)\"><line stroke=\"currentColor\" y2=\"-6\"></line><text fill=\"currentColor\" y=\"-9\" dy=\"0em\">800k</text></g><g class=\"tick\" opacity=\"1\" transform=\"translate(1350.5,0)\"><line stroke=\"currentColor\" y2=\"-6\"></line><text fill=\"currentColor\" y=\"-9\" dy=\"0em\">900k</text></g><g class=\"tick\" opacity=\"1\" transform=\"translate(1500.5,0)\"><line stroke=\"currentColor\" y2=\"-6\"></line><text fill=\"currentColor\" y=\"-9\" dy=\"0em\">1.00M</text></g></g></g></g><g transform=\"translate(0,25)\"><g class=\"brush-selection\" fill=\"none\" pointer-events=\"all\"><rect class=\"overlay\" pointer-events=\"all\" cursor=\"crosshair\" x=\"0\" y=\"0\" width=\"1500\" height=\"50\"></rect><rect class=\"selection\" cursor=\"move\" fill=\"#777\" fill-opacity=\"0.3\" stroke=\"#fff\" shape-rendering=\"crispEdges\" style=\"\" x=\"150\" y=\"0\" width=\"75\" height=\"50\"></rect><rect class=\"handle handle--e\" cursor=\"ew-resize\" style=\"\" x=\"222\" y=\"-3\" width=\"6\" height=\"56\"></rect><rect class=\"handle handle--w\" cursor=\"ew-resize\" style=\"\" x=\"147\" y=\"-3\" width=\"6\" height=\"56\"></rect></g><g style=\"font-size: 9;\" class=\"brush-selection-boundaries\"><text class=\"start\" style=\"text-anchor: end;\" transform=\"translate(150,60)\">100k</text><text class=\"end\" transform=\"translate(225,60)\" style=\"text-anchor: start;\">150k</text></g></g></g>';
const brushableChromosomeRulerComponent = BrushableChromosomeRuler(); const brushableChromosomeRulerComponent = BrushableChromosomeRuler();
document.body.innerHTML = document.body.innerHTML =
'<div><svg width="500"><g id="container"></g></svg></div>'; '<div><svg width="500"><g id="container"></g></svg></div>';
......
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