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

Class name: rule -> ruler

parent 5897a8c4
Show whitespace changes
Inline Side-by-side
src/scripts/component/genome-browser.ts
View file @ f9a2de21
......@@ -10,7 +10,7 @@ import { GenomeBrowserData, BrushableAxisData, SelectedChromosomeData } from "..
export default function () {
const classes = {
chromosomeRule: "chromosome-rule",
chromosomeRuler: "chromosome-ruler",
selectedChromosome: "selected-chromosomes"
};
const wholeChromosomeRule = BrushableChromosomeRule();
......@@ -37,7 +37,7 @@ export default function () {
.append<SVGElement>("g")
.classed("genome-browser", true);
genomeBrowserE.append("g").classed(classes.chromosomeRule, true);
genomeBrowserE.append("g").classed(classes.chromosomeRuler, true);
genomeBrowserE.append("g")
.classed(classes.selectedChromosome, true)
.attr("transform", "translate(0,70)");
......@@ -51,8 +51,8 @@ export default function () {
genomesBrowserU.each(function (data) {
const {
chromosome: { rule: chromosomeRule },
selectedChromosome: { genes: selectedGenes, rule: selectedChromosomeRule },
chromosome: { ruler: chromosomeRule },
selectedChromosome: { genes: selectedGenes, ruler: selectedChromosomeRule },
// axis: { chromosome, global }
} = data;
updateWholeChromosomeAxis(chromosomeRule);
......@@ -64,7 +64,7 @@ export default function () {
function updateSelectedChromosome(data: GenomeBrowserData) {
if (genomesBrowserU !== null) {
genomesBrowserU
.select<SVGElement>("." + classes.selectedChromosome)
.select<SVGGElement>("." + classes.selectedChromosome)
.datum<SelectedChromosomeData[]>([data.selectedChromosome])
.call(selectedChromosomeComponent, width);
}
......@@ -73,7 +73,7 @@ export default function () {
function updateWholeChromosomeAxis(axis: BrushableAxisData) {
if (genomesBrowserU) {
genomesBrowserU
.select<SVGGElement>("." + classes.chromosomeRule)
.select<SVGGElement>("." + classes.chromosomeRuler)
.datum(axis)
.call(wholeChromosomeRule, width, 0);
}
......
src/scripts/component/ruler/brushable-chromosome.ts
View file @ f9a2de21
......@@ -8,8 +8,8 @@ import { format } from "d3-format";
export default function () {
const genomeAxisComponent = GenomeAxis();
const htmlClassName = {
componentContainer: "whole-chromosome-rule",
genericRule: "generic-rule",
componentContainer: "whole-chromosome-ruler",
genericRuler: "generic-ruler",
brushSelection: "brush-selection"
};
......@@ -76,7 +76,7 @@ export default function () {
.classed(htmlClassName.componentContainer, true);
globalAxisEnter.append("g")
.classed(htmlClassName.genericRule, true);
.classed(htmlClassName.genericRuler, true);
const brushSelectionEnter = globalAxisEnter.append("g")
......@@ -105,7 +105,7 @@ export default function () {
.call(brush.move, [genomicToPx(_data.window[0]), genomicToPx(_data.window[1])]);
globalAxisUpdate
.select<SVGGElement>("." + htmlClassName.genericRule)
.select<SVGGElement>("." + htmlClassName.genericRuler)
.datum((d: BrushableAxisData): GenericAxisData => ({ title: d.title, interval: [d.interval[0], d.interval[1]] }))
.call(genomeAxisComponent, width, yPosition);
......
src/scripts/main-genome-browser.ts
View file @ f9a2de21
......@@ -155,7 +155,7 @@ function getGenomeBrowserData(state: State) {
chromosome: {
size: chromosomeSize,
genes,
rule: {
ruler: {
title: chromosomeTitle + " (" + chromosomeSize + " bp)",
interval: chromInterval,
window,
......@@ -181,7 +181,7 @@ function getGenomeBrowserData(state: State) {
stroke
}
}),
rule: {
ruler: {
title: selectedChromosomeTitle
+ " [" + intervalFormatter(window[0]) + ", " + intervalFormatter(window[1]) + "]",
interval: window
......
src/scripts/types.ts
View file @ f9a2de21
......@@ -52,7 +52,7 @@ export interface State {
export interface SelectedChromosomeData {
window: [number, number],
genes: GeneData[],
rule: GenericAxisData
ruler: GenericAxisData
}
export interface GenomeBrowserData {
......@@ -61,7 +61,7 @@ export interface GenomeBrowserData {
chromosome: {
size: number,
genes: GeneData[],
rule: BrushableAxisData
ruler: BrushableAxisData
},
selectedChromosome: SelectedChromosomeData,
eventHandler?: {
......
tests/brushable-chromosome.test.ts
View file @ f9a2de21
......@@ -4,7 +4,7 @@ import { select } from "d3-selection";
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();
document.body.innerHTML =
'<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