From 95bcc391fa4de181a217d82185bf0ac43e370d8b Mon Sep 17 00:00:00 2001
From: shreyasun <shreyasundar27@gmail.com>
Date: Tue, 21 May 2024 08:41:44 -0700
Subject: [PATCH 1/2] Aligned ticks so that coordinates don't break off the
 screen

---
 src/util/tubemap.js | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/util/tubemap.js b/src/util/tubemap.js
index 0237f7e..42a11c1 100644
--- a/src/util/tubemap.js
+++ b/src/util/tubemap.js
@@ -3728,14 +3728,25 @@ function drawRuler() {
 );
   
   // Plot all the ticks
-  ticks.forEach((tick) => drawRulerMarking(tick[0], tick[1]));
+  for (let i = 0; i < ticks.length; i++){
+    let tick = ticks[i];
+    let align;
+    if (i === 0){
+      align = "start";
+    } else if (i === ticks.length - 1){
+      align = "end";
+    } else {
+      align = "middle";
+    }
+    drawRulerMarking(tick[0], tick[1], align);
+  }
 }
 
-function drawRulerMarking(sequencePosition, xCoordinate) {
+function drawRulerMarking(sequencePosition, xCoordinate, align) {
   let axisY = minYCoordinate - 10;
   svg
     .append("text")
-    .attr("text-anchor", "middle")
+    .attr("text-anchor", align)
     .attr("x", xCoordinate)
     .attr("y", minYCoordinate - 18)
     .text(`${sequencePosition}`)

From 68a228b1a411efc9da64afc1e53624a427b7d59c Mon Sep 17 00:00:00 2001
From: Adam Novak <anovak@soe.ucsc.edu>
Date: Wed, 22 May 2024 11:47:14 -0400
Subject: [PATCH 2/2] Apply my own suggestions from code review

---
 src/util/tubemap.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/util/tubemap.js b/src/util/tubemap.js
index 42a11c1..aa62dce 100644
--- a/src/util/tubemap.js
+++ b/src/util/tubemap.js
@@ -3730,6 +3730,8 @@ function drawRuler() {
   // Plot all the ticks
   for (let i = 0; i < ticks.length; i++){
     let tick = ticks[i];
+    // Figure out how to align the tick text, to keep the outermost labels inside
+    // the visible area
     let align;
     if (i === 0){
       align = "start";
@@ -3742,6 +3744,9 @@ function drawRuler() {
   }
 }
 
+/// Draw an axis tick for the given sequence position (in bp) at the given pixel X
+/// coordinate. The text label can be aligned to the tick mark by its "start", "end",
+/// or "middle".
 function drawRulerMarking(sequencePosition, xCoordinate, align) {
   let axisY = minYCoordinate - 10;
   svg