diff --git a/src/server.mjs b/src/server.mjs index 3b6feaf2..2385eb60 100644 --- a/src/server.mjs +++ b/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]; } }); }); diff --git a/src/util/tubemap.js b/src/util/tubemap.js index 5a1b5671..da8aab03 100644 --- a/src/util/tubemap.js +++ b/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"); }