Fix dark redraw on selected features after vertical resize of the synteny canvas

plugins/linear-comparative-view/src/LinearSyntenyDisplay/components/LinearSyntenyRendering.tsx

@@ -26,6 +26,7 @@ const useStyles = makeStyles()({
     position: 'relative',
   },
   mouseoverCanvas: {
+    imageRendering: 'pixelated',
     position: 'absolute',
     pointEvents: 'none',
   },
@@ -40,11 +41,11 @@ const LinearSyntenyRendering = observer(function ({
   model: LinearSyntenyDisplayModel
 }) {
   const { classes } = useStyles()
+  const { mouseoverId, height } = model
   const xOffset = useRef(0)
   const view = getContainingView(model) as LinearSyntenyViewModel
   const width = view.width
   const delta = useRef(0)
-
   const scheduled = useRef(false)
   const timeout = useRef<Timer>()
   const [anchorEl, setAnchorEl] = useState<ClickCoord>()
@@ -53,13 +54,12 @@ const LinearSyntenyRendering = observer(function ({
   const [mouseCurrDownX, setMouseCurrDownX] = useState<number>()
   const [mouseInitialDownX, setMouseInitialDownX] = useState<number>()
   const [currY, setCurrY] = useState<number>()
-  const { mouseoverId, height } = model
-  const k2p = useRef<HTMLCanvasElement | null>()
+  const mainSyntenyCanvasRefp = useRef<HTMLCanvasElement | null>()
 
   // these useCallbacks avoid new refs from being created on any mouseover,
   // etc.
   // biome-ignore lint/correctness/useExhaustiveDependencies:
-  const k1 = useCallback(
+  const mouseoverDetectionCanvasRef = useCallback(
     (ref: HTMLCanvasElement | null) => {
       model.setMouseoverCanvasRef(ref)
     },
@@ -68,10 +68,10 @@ const LinearSyntenyRendering = observer(function ({
   )
 
   // biome-ignore lint/correctness/useExhaustiveDependencies:
-  const k2 = useCallback(
+  const mainSyntenyCanvasRef = useCallback(
     (ref: HTMLCanvasElement | null) => {
       model.setMainCanvasRef(ref)
-      k2p.current = ref // this ref is additionally used in useEffect below
+      mainSyntenyCanvasRefp.current = ref // this ref is additionally used in useEffect below
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [model, height, width],
@@ -97,7 +97,9 @@ const LinearSyntenyRendering = observer(function ({
               delta.current > 0
                 ? v.bpPerPx * (1 + delta.current)
                 : v.bpPerPx / (1 - delta.current),
-              event.clientX - (k2p.current?.getBoundingClientRect().left || 0),
+              event.clientX -
+                (mainSyntenyCanvasRefp.current?.getBoundingClientRect().left ||
+                  0),
             )
           }
           delta.current = 0
@@ -120,23 +122,23 @@ const LinearSyntenyRendering = observer(function ({
         }
       }
     }
-    k2p.current?.addEventListener('wheel', onWheel)
+    mainSyntenyCanvasRefp.current?.addEventListener('wheel', onWheel)
     return () => {
-      k2p.current?.removeEventListener('wheel', onWheel)
+      mainSyntenyCanvasRefp.current?.removeEventListener('wheel', onWheel)
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [model, height, width])
 
   // biome-ignore lint/correctness/useExhaustiveDependencies:
-  const k3 = useCallback(
+  const clickMapCanvasRef = useCallback(
     (ref: HTMLCanvasElement | null) => {
       model.setClickMapCanvasRef(ref)
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [model, height, width],
   )
   // biome-ignore lint/correctness/useExhaustiveDependencies:
-  const k4 = useCallback(
+  const cigarClickMapCanvasRef = useCallback(
     (ref: HTMLCanvasElement | null) => {
       model.setCigarClickMapCanvasRef(ref)
     },
@@ -147,13 +149,13 @@ const LinearSyntenyRendering = observer(function ({
   return (
     <div className={classes.rel}>
       <canvas
-        ref={k1}
+        ref={mouseoverDetectionCanvasRef}
         width={width}
         height={height}
         className={classes.mouseoverCanvas}
       />
       <canvas
-        ref={k2}
+        ref={mainSyntenyCanvasRef}
         onMouseMove={event => {
           if (mouseCurrDownX !== undefined) {
             xOffset.current += mouseCurrDownX - event.clientX
@@ -228,8 +230,18 @@ const LinearSyntenyRendering = observer(function ({
         width={width}
         height={height}
       />
-      <canvas ref={k3} className={classes.pix} width={width} height={height} />
-      <canvas ref={k4} className={classes.pix} width={width} height={height} />
+      <canvas
+        ref={clickMapCanvasRef}
+        className={classes.pix}
+        width={width}
+        height={height}
+      />
+      <canvas
+        ref={cigarClickMapCanvasRef}
+        className={classes.pix}
+        width={width}
+        height={height}
+      />
       {mouseoverId && tooltip && currX && currY ? (
         <SyntenyTooltip title={tooltip} />
       ) : null}

plugins/linear-comparative-view/src/LinearSyntenyDisplay/components/util.ts

@@ -128,7 +128,6 @@ export function drawBox(
   ctx.lineTo(x3, y2)
   ctx.lineTo(x4, y2)
   ctx.closePath()
-  ctx.fill()
 }
 
 export function drawBezierBox(
@@ -159,7 +158,6 @@ export function drawBezierBox(
   ctx.lineTo(x4, y2)
   ctx.bezierCurveTo(x4, mid, x1, mid, x1, y1)
   ctx.closePath()
-  ctx.fill()
 }
 
 export function onSynClick(

plugins/linear-comparative-view/src/LinearSyntenyDisplay/drawSynteny.ts

@@ -179,15 +179,18 @@ export function drawRef(
               continuingFlag = false
 
               draw(ctx1, px1, cx1, y1, cx2, px2, y2, mid, drawCurves)
+              ctx1.fill()
               if (ctx3) {
                 ctx3.fillStyle = makeColor(idx)
                 draw(ctx3, px1, cx1, y1, cx2, px2, y2, mid, drawCurves)
+                ctx3.fill()
               }
             }
           }
         }
       } else {
         draw(ctx1, x11, x12, y1, x22, x21, y2, mid, drawCurves)
+        ctx1.fill()
       }
     }
   }
@@ -240,9 +243,10 @@ export function drawMouseoverSynteny(model: LinearSyntenyDisplayModel) {
   ctx.resetTransform()
   ctx.scale(highResolutionScaling, highResolutionScaling)
   ctx.clearRect(0, 0, width, height)
+  ctx.strokeStyle = 'rgba(0, 0, 0, 0.9)'
+  ctx.fillStyle = 'rgba(0, 0, 0, 0.1)'
   const feature1 = model.featMap[mouseoverId || '']
   if (feature1) {
-    ctx.fillStyle = 'rgb(0,0,0,0.1)'
     drawMatchSimple({
       cb: ctx => {
         ctx.fill()
@@ -259,8 +263,6 @@ export function drawMouseoverSynteny(model: LinearSyntenyDisplayModel) {
   }
   const feature2 = model.featMap[clickId || '']
   if (feature2) {
-    ctx.strokeStyle = 'rgb(0, 0, 0, 0.9)'
-
     drawMatchSimple({
       cb: ctx => {
         ctx.stroke()