Class name: rule -> ruler

src/scripts/component/genome-browser.ts

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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>';