Add directional feet to breakends in linear arc display (#4152)

plugins/arc/src/LinearPairedArcDisplay/components/Arcs.tsx

@@ -12,10 +12,10 @@ import { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
 import { Assembly } from '@jbrowse/core/assemblyManager/assembly'
 import { getConf } from '@jbrowse/core/configuration'
 import { parseBreakend } from '@gmod/vcf'
+import { Tooltip } from 'react-svg-tooltip'
 
 // local
 import { LinearArcDisplayModel } from '../model'
-import { Tooltip } from 'react-svg-tooltip'
 
 type LGV = LinearGenomeViewModel
 
@@ -30,31 +30,47 @@ function f(feature: Feature, alt?: string) {
   let mateRefName: string | undefined
   let mateEnd = 0
   let mateStart = 0
+  let joinDirection = 0
+  let mateDirection = 0
 
   // one sided bracket used, because there could be <INS:ME> and we just check
   // startswith below
   const symbolicAlleles = ['<TRA', '<DEL', '<INV', '<INS', '<DUP', '<CNV']
   if (symbolicAlleles.some(a => alt?.startsWith(a))) {
     // END is defined to be a single value, not an array. CHR2 not defined in
     // VCF spec, but should be similar
-    const e = feature.get('INFO')?.END?.[0] || feature.get('end')
+    const info = feature.get('INFO')
+    const e = info?.END?.[0] ?? end
+    mateRefName = info?.CHR2?.[0] ?? refName
     mateEnd = e
     mateStart = e - 1
-    mateRefName = feature.get('INFO')?.CHR2?.[0] ?? refName
     // re-adjust the arc to be from start to end of feature by re-assigning end
     // to the 'mate'
-    start = feature.get('start')
-    end = feature.get('start') + 1
+    start = start
+    end = start + 1
   } else if (bnd?.MatePosition) {
     const matePosition = bnd.MatePosition.split(':')
+    mateDirection = bnd.MateDirection === 'left' ? 1 : -1
+    joinDirection = bnd.Join === 'left' ? -1 : 1
     mateEnd = +matePosition[1]
     mateStart = +matePosition[1] - 1
     mateRefName = matePosition[0]
   }
 
   return {
-    k1: { refName, start, end, strand },
-    k2: mate ?? { refName: mateRefName, end: mateEnd, start: mateStart },
+    k1: {
+      refName,
+      start,
+      end,
+      strand,
+      mateDirection,
+    },
+    k2: mate ?? {
+      refName: mateRefName,
+      end: mateEnd,
+      start: mateStart,
+      mateDirection: joinDirection,
+    },
   }
 }
 
@@ -153,6 +169,28 @@ const Arc = observer(function ({
           fill="none"
           pointerEvents="stroke"
         />
+        <line
+          stroke={mouseOvered ? 'black' : c}
+          strokeWidth={3}
+          onMouseOut={() => setMouseOvered(false)}
+          onMouseOver={() => setMouseOvered(true)}
+          onClick={() => model.selectFeature(feature)}
+          x1={left}
+          x2={left + k1.mateDirection * 20}
+          y1={1.5}
+          y2={1.5}
+        />
+        <line
+          stroke={mouseOvered ? 'black' : c}
+          strokeWidth={3}
+          onMouseOut={() => setMouseOvered(false)}
+          onMouseOver={() => setMouseOvered(true)}
+          onClick={() => model.selectFeature(feature)}
+          x1={right}
+          x2={right + k2.mateDirection * 20}
+          y1={1.5}
+          y2={1.5}
+        />
         {mouseOvered ? (
           <SvgTooltip feature={feature} alt={alt} ref={ref} />
         ) : null}