Optimize drawing long alignments with useCallback

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

@@ -1,6 +1,5 @@
-import React, { useState } from 'react'
+import React, { useState, useCallback } from 'react'
 import { observer } from 'mobx-react'
-import { isAlive } from 'mobx-state-tree'
 import {
   assembleLocString,
   getContainingView,
@@ -27,24 +26,34 @@ export default observer(function LinearSyntenyRendering({
   const [currX, setCurrX] = useState<number>()
   const [currY, setCurrY] = useState<number>()
 
+  // these useCallbacks avoid new refs from being created on any mouseover, etc.
+  const k1 = useCallback(
+    (ref: HTMLCanvasElement) => model.setMouseoverCanvasRef(ref),
+    [model],
+  )
+  const k2 = useCallback(
+    (ref: HTMLCanvasElement) => model.setMainCanvasRef(ref),
+    [model],
+  )
+  const k3 = useCallback(
+    (ref: HTMLCanvasElement) => model.setClickMapCanvasRef(ref),
+    [model],
+  )
+  const k4 = useCallback(
+    (ref: HTMLCanvasElement) => model.setCigarClickMapCanvasRef(ref),
+    [model],
+  )
+
   return (
     <div style={{ position: 'relative' }}>
       <canvas
-        ref={ref => {
-          if (isAlive(model)) {
-            model.setMouseoverCanvasRef(ref)
-          }
-        }}
+        ref={k1}
         width={width}
         height={height}
         style={{ width, height, position: 'absolute', pointerEvents: 'none' }}
       />
       <canvas
-        ref={ref => {
-          if (isAlive(model)) {
-            model.setMainCanvasRef(ref)
-          }
-        }}
+        ref={k2}
         onMouseMove={event => {
           const ref1 = model.clickMapCanvas
           const ref2 = model.cigarClickMapCanvas
@@ -150,11 +159,7 @@ export default observer(function LinearSyntenyRendering({
         height={height * highResolutionScaling}
       />
       <canvas
-        ref={ref => {
-          if (isAlive(model)) {
-            model.setCigarClickMapCanvasRef(ref)
-          }
-        }}
+        ref={k3}
         style={{
           imageRendering: 'pixelated',
           pointerEvents: 'none',
@@ -165,11 +170,7 @@ export default observer(function LinearSyntenyRendering({
         height={height}
       />
       <canvas
-        ref={ref => {
-          if (isAlive(model)) {
-            model.setClickMapCanvasRef(ref)
-          }
-        }}
+        ref={k4}
         style={{
           imageRendering: 'pixelated',
           pointerEvents: 'none',

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

@@ -121,7 +121,6 @@ export function drawRef(model: LinearSyntenyDisplayModel) {
       // cx1/cx2 are the current x positions on top and bottom rows
       let cx1 = k1
       let cx2 = s1 === -1 ? x22 : x21
-
       if (cigar?.length && drawCIGAR) {
         // continuingFlag skips drawing commands on very small CIGAR features
         let continuingFlag = false
@@ -132,7 +131,6 @@ export function drawRef(model: LinearSyntenyDisplayModel) {
         const unitMultiplier2 = Math.floor(MAX_COLOR_RANGE / cigar.length)
         for (let j = 0; j < cigar.length; j += 2) {
           const idx = j * unitMultiplier2 + 1
-          ctx3.fillStyle = makeColor(idx)
 
           const len = +cigar[j]
           const op = cigar[j + 1] as keyof typeof colorMap
@@ -167,8 +165,8 @@ export function drawRef(model: LinearSyntenyDisplayModel) {
             // it on), then turn on continuing flag
             const isNotLast = j < cigar.length - 2
             if (
-              Math.abs(cx1 - px1) < 1 &&
-              Math.abs(cx2 - px2) < 1 &&
+              Math.abs(cx1 - px1) <= 1 &&
+              Math.abs(cx2 - px2) <= 1 &&
               isNotLast
             ) {
               continuingFlag = true
@@ -180,6 +178,7 @@ export function drawRef(model: LinearSyntenyDisplayModel) {
               // feature, else just use match
               ctx1.fillStyle =
                 colorMap[(continuingFlag && d1 > 1) || d2 > 1 ? op : 'M']
+              ctx3.fillStyle = makeColor(idx)
 
               draw(ctx1, px1, cx1, y1, cx2, px2, y2, mid, drawCurves)
               draw(ctx3, px1, cx1, y1, cx2, px2, y2, mid, drawCurves)