Extra horizontal space should have a coordinate bar break

[adamnovak]

@ducku added extra horizontal space between nodes when there are lots of reads that need to move up and down. But this causes some large gaps/odd spacing in the horizontal axis tick marks that trace out node positions on the first/reference path.

They've always been not perfectly smooth and linear all the way across, but if we're going to make a big space on purpise we should indicate it on the axis somehow.

If we left space out it would be a normal axis break, but I'm not perfectly sure what to draw when we add space in.

[adamnovak]

Here's an example of the extra space from #400.

[adamnovak]

Here are some axis break symbols:

[adamnovak]

We probably will need to touch the drawRuler() function in tubemap.js and add a function to draw some break indicators, or make parts of its long horizontal line dashed, or something.

[adamnovak]

Here's an example of a gapped axis:

[adamnovak]

We need to invent an algorithm where we can visit each node in turn along the path that we're drawing the x axis ruler for, and determine if there's a big enough gap in x from the previous node that we would want to cut the axis line. We need to spit out a list of pairs of x coordinates between which we wan the axis line to exist. Then we can draw the axis between each of those pairs of x coordinates, and draw some vertical lines at the endpoints, and we'll get a gapped x axis.

[adamnovak]

If we make a list of the intervals in X that the nodes visited along the ruler path occupy, accounting for going backward, like this:

[[0, 10], [12, 15], [0, 10], [18, 29], [53, 117]]

We would want a function that can find the intervals where the nodes are spaced closely and break on the intervals where nodes are spaced widely, maybe taking some threshold value. The result would be something like:

[[0, 29], [53, 117]]

[adamnovak]

We have access to the nodes that are along the ruler track here in the loop over it:

sequenceTubeMap/src/util/tubemap.js

Line 3541 in ed3adac

const currentNode = nodes[Math.abs(nodeIndex)];

So we could get their X start and end positions and make each of those into an item in the input to the interval merge function.

Then the line gets drawn here:

sequenceTubeMap/src/util/tubemap.js

Lines 3624 to 3632 in ed3adac

	// draw horizontal line
	svg
	.append("line")
	.attr("x1", 0)
	.attr("y1", minYCoordinate - 10)
	.attr("x2", maxXCoordinate)
	.attr("y2", minYCoordinate - 10)
	.attr("stroke-width", 1)
	.attr("stroke", "black");

So that would be replaced with a loop over the output of the merging function, to draw the line for each interval.

[adamnovak]

It looks like currentNode.x and currentNode.pixelWidth should let you find the X coordinate interval for each node. There might be a constant padding of 4 on either side for the border of the node? For some reason we add and subtract 4 here:

sequenceTubeMap/src/util/tubemap.js

Lines 2670 to 2675 in ed3adac

	function getXCoordinateOfBaseWithinNode(node, base) {
	if (base > node.sequenceLength) return null; // equality is allowed
	const nodeLeftX = node.x - 4;
	const nodeRightX = node.x + node.pixelWidth + 4;
	return nodeLeftX + (base / node.sequenceLength) * (nodeRightX - nodeLeftX);
	}

[adamnovak]

After setting this up, we noticed the vertical lines for the break in the coordinate bar start to impinge on the text for the tick marks.

We might need to change drawRulerMarking to put its text label higher up. It also might make sense to use another vertical line as a tick mark, instead of a | character. See the code here:

sequenceTubeMap/src/util/tubemap.js

Lines 3638 to 3648 in ed3adac

	function drawRulerMarking(sequencePosition, xCoordinate) {
	svg
	.append("text")
	.attr("x", xCoordinate)
	.attr("y", minYCoordinate - 13)
	.text(`|${sequencePosition}`)
	.attr("font-family", fonts)
	.attr("font-size", "12px")
	.attr("fill", "black")
	.style("pointer-events", "none");
	}