Better region markings

src/server.mjs

@@ -1424,6 +1424,11 @@ function processRegionFile(req, res, next) {
           console.log("Rename " + subpathName + " to " + arr[0] + " and mark start as " + arr[1]);
           p.name = arr[0];
           p.indexOfFirstBase = arr[1];
+        } else if (p.name === arr[0]) {
+          // We might be looking at a pre-extracted region that predates real
+          // subpath support (like the Lancet paper data), in which case we
+          // need to grab the real start point from the regions file.
+          p.indexOfFirstBase = arr[1];
         }
       });
     });

src/util/tubemap.js

@@ -3715,8 +3715,8 @@ function drawRuler() {
   });
   ticks = separatedTicks;
 
-  // plot ticks highlighting the region
-  ticks_region.forEach((tick) => drawRulerMarkingRegion(tick[0], tick[1]));
+  // plot ticks highlighting the region (if it is filled in)
+  drawRulerMarkingRegion(ticks_region);
 
   // draw horizontal line for each interval
 
@@ -3797,14 +3797,45 @@ function drawRulerMarking(sequencePosition, xCoordinate, align) {
     .attr("stroke", "black")
 }
 
-function drawRulerMarkingRegion(sequencePosition, xCoordinate) {
+/// Draw ruler markings for the given requested region.
+///
+/// The requested region should be an array of 2 items, each of which is an
+/// array of a sequence position and an image X coordinate. If the array is not
+/// 2 items, no connecting line is drawn.
+function drawRulerMarkingRegion(ticks_region) {
+  // Each tick is a base coordinate and an image coordinate
+  ticks_region.forEach((tick) => drawRulerMarkingEndpoint(tick[0], tick[1]));
+
+  let lineY = minYCoordinate - NODE_MARGIN - 6;
+
+  if (ticks_region && ticks_region.length === 2) {
+    svg
+      .append("line")
+      .attr("x1", ticks_region[0][1])
+      .attr("y1", lineY)
+      .attr("x2", ticks_region[1][1])
+      .attr("y2", lineY)
+      .attr("stroke-width", 4)
+      .attr("stroke", "#FFFE3A");
+  }
+}
+
+function drawRulerMarkingEndpoint(sequencePosition, xCoordinate) {
+
+  let pointX = xCoordinate;
+  let pointY = minYCoordinate - NODE_MARGIN - 1;
+  let arrowWidth = 8;
+  let arrowHeight = 10;
+
   svg
-    .append("circle")
-    .attr("cx", xCoordinate + 3)
-    .attr("cy", minYCoordinate - 13)
-    .attr("r", 10)
-    .attr("opacity", 0.5)
-    .attr("fill", "yellow")
+    .append("path")
+    .attr("d", `M${pointX - arrowWidth} ${pointY - arrowHeight}`
+      + ` L${pointX} ${pointY}`
+      + ` L${pointX + arrowWidth} ${pointY - arrowHeight}`
+    )
+    .attr("stroke-width", 0)
+    .attr("fill", "#FFFE3A")
+    .attr("stroke", "none")
     .style("pointer-events", "none");
 }