Render LASFD exon-connecting lines regardless of exon width (#730)

* render exon connecting lines even when cds px width  < 2

* ensure hover highlighting of exon-connecting lines is also outside of the width>2 gate

Author: haessar

packages/jbrowse-plugin-apollo/src/LinearApolloSixFrameDisplay/glyphs/GeneGlyph.ts

@@ -351,6 +351,30 @@ function draw(
             (frame < 0 ? -1 * frame + 5 : frame) * featureLabelSpacer
           cdsTop = (frameAdjust - featureLabelSpacer) * rowHeight
           ctx.fillRect(cdsStartPx, cdsTop, cdsWidthPx, cdsHeight)
+
+          // Draw lines to connect CDS features with shared mRNA parent
+          if (counter > 1) {
+            // Mid-point for intron line "hat"
+            const midPoint: [number, number] = [
+              (cdsStartPx - prevCDSEndPx) / 2 + prevCDSEndPx,
+              Math.max(
+                frame < 0 ? rowHeight * featureLabelSpacer * highestRow + 1 : 1, // Avoid render ceiling
+                Math.min(prevCDSTop, cdsTop) - rowHeight / 2,
+              ),
+            ]
+            ctx.strokeStyle = 'rgb(0, 128, 128)'
+            ctx.beginPath()
+            ctx.moveTo(prevCDSEndPx, prevCDSTop)
+            ctx.lineTo(...midPoint)
+            ctx.stroke()
+            ctx.moveTo(...midPoint)
+            ctx.lineTo(cdsStartPx, cdsTop + rowHeight / 2)
+            ctx.stroke()
+          }
+          prevCDSEndPx = cdsStartPx + cdsWidthPx
+          prevCDSTop = cdsTop + rowHeight / 2
+          counter += 1
+
           if (cdsWidthPx > 2) {
             ctx.clearRect(
               cdsStartPx + 1,
@@ -375,31 +399,6 @@ function draw(
               cdsHeight - 2,
             )
 
-            // Draw lines to connect CDS features with shared mRNA parent
-            if (counter > 1) {
-              // Mid-point for intron line "hat"
-              const midPoint: [number, number] = [
-                (cdsStartPx - prevCDSEndPx) / 2 + prevCDSEndPx,
-                Math.max(
-                  frame < 0
-                    ? rowHeight * featureLabelSpacer * highestRow + 1
-                    : 1, // Avoid render ceiling
-                  Math.min(prevCDSTop, cdsTop) - rowHeight / 2,
-                ),
-              ]
-              ctx.strokeStyle = 'rgb(0, 128, 128)'
-              ctx.beginPath()
-              ctx.moveTo(prevCDSEndPx, prevCDSTop)
-              ctx.lineTo(...midPoint)
-              ctx.stroke()
-              ctx.moveTo(...midPoint)
-              ctx.lineTo(cdsStartPx, cdsTop + rowHeight / 2)
-              ctx.stroke()
-            }
-            prevCDSEndPx = cdsStartPx + cdsWidthPx
-            prevCDSTop = cdsTop + rowHeight / 2
-            counter += 1
-
             if (topFill && bottomFill) {
               ctx.fillStyle = topFill
               ctx.fillRect(
@@ -518,43 +517,42 @@ function drawHover(
     let counter = 1
     for (const cds of cdsRow.sort((a, b) => a.max - b.max)) {
       const cdsWidthPx = (cds.max - cds.min) / bpPerPx
+      const minX =
+        (lgv.bpToPx({
+          refName,
+          coord: cds.min,
+          regionNumber: layoutIndex,
+        })?.offsetPx ?? 0) - offsetPx
+      const cdsStartPx = reversed ? minX - cdsWidthPx : minX
+      const frame = getFrame(cds.min, cds.max, strand ?? 1, cds.phase)
+      const frameAdjust =
+        (frame < 0 ? -1 * frame + 5 : frame) * featureLabelSpacer
+      const cdsTop = (frameAdjust - featureLabelSpacer) * rowHeight
+      if (counter > 1) {
+        // Mid-point for intron line "hat"
+        const midPoint: [number, number] = [
+          (cdsStartPx - prevCDSEndPx) / 2 + prevCDSEndPx,
+          Math.max(
+            frame < 0 ? rowHeight * featureLabelSpacer * highestRow + 1 : 1, // Avoid render ceiling
+            Math.min(prevCDSTop, cdsTop) - rowHeight / 2,
+          ),
+        ]
+        ctx.strokeStyle = 'rgb(0, 0, 0)'
+        ctx.lineWidth = 2
+        ctx.beginPath()
+        ctx.moveTo(prevCDSEndPx, prevCDSTop)
+        ctx.lineTo(...midPoint)
+        ctx.stroke()
+        ctx.moveTo(...midPoint)
+        ctx.lineTo(cdsStartPx, cdsTop + rowHeight / 2)
+        ctx.stroke()
+      }
+      prevCDSEndPx = cdsStartPx + cdsWidthPx
+      prevCDSTop = cdsTop + rowHeight / 2
+      counter += 1
       if (cdsWidthPx > 2) {
-        const minX =
-          (lgv.bpToPx({
-            refName,
-            coord: cds.min,
-            regionNumber: layoutIndex,
-          })?.offsetPx ?? 0) - offsetPx
-        const cdsStartPx = reversed ? minX - cdsWidthPx : minX
-        const frame = getFrame(cds.min, cds.max, strand ?? 1, cds.phase)
-        const frameAdjust =
-          (frame < 0 ? -1 * frame + 5 : frame) * featureLabelSpacer
-        const cdsTop = (frameAdjust - featureLabelSpacer) * rowHeight
         ctx.fillStyle = 'rgba(255,0,0,0.6)'
         ctx.fillRect(cdsStartPx, cdsTop, cdsWidthPx, cdsHeight)
-
-        if (counter > 1) {
-          // Mid-point for intron line "hat"
-          const midPoint: [number, number] = [
-            (cdsStartPx - prevCDSEndPx) / 2 + prevCDSEndPx,
-            Math.max(
-              frame < 0 ? rowHeight * featureLabelSpacer * highestRow + 1 : 1, // Avoid render ceiling
-              Math.min(prevCDSTop, cdsTop) - rowHeight / 2,
-            ),
-          ]
-          ctx.strokeStyle = 'rgb(0, 0, 0)'
-          ctx.lineWidth = 2
-          ctx.beginPath()
-          ctx.moveTo(prevCDSEndPx, prevCDSTop)
-          ctx.lineTo(...midPoint)
-          ctx.stroke()
-          ctx.moveTo(...midPoint)
-          ctx.lineTo(cdsStartPx, cdsTop + rowHeight / 2)
-          ctx.stroke()
-        }
-        prevCDSEndPx = cdsStartPx + cdsWidthPx
-        prevCDSTop = cdsTop + rowHeight / 2
-        counter += 1
       }
     }
   }