Misc

Author: cmdcolin

src/LinearMafDisplay/components/Sidebar/SvgWrapper.tsx

@@ -37,11 +37,11 @@ const SvgWrapper = observer(function ({
 
             if (highlightedRowNames) {
               ctx.fillStyle = 'rgba(255,165,0,0.2)'
+              const halfRowHeight = rowHeight / 2
               for (const name of highlightedRowNames) {
                 const leaf = leafMap.get(name)
                 if (leaf) {
-                  const y = leaf.x!
-                  ctx.fillRect(0, y - rowHeight / 2, sidebarWidth, rowHeight)
+                  ctx.fillRect(0, leaf.x! - halfRowHeight, sidebarWidth, rowHeight)
                 }
               }
             }

src/LinearMafDisplay/components/Sidebar/Tree.tsx

@@ -1,8 +1,10 @@
-import React from 'react'
+import React, { useCallback } from 'react'
 
 import { observer } from 'mobx-react'
 
 import type { LinearMafDisplayModel } from '../../stateModel'
+import type { HierarchyNode } from 'd3-hierarchy'
+import type { NodeWithIdsAndLength } from '../../types'
 
 const Tree = observer(function ({ model }: { model: LinearMafDisplayModel }) {
   const {
@@ -16,6 +18,17 @@ const Tree = observer(function ({ model }: { model: LinearMafDisplayModel }) {
     nodeDescendantNames,
   } = model
 
+  const clearHighlight = useCallback(() => {
+    model.setHighlightedRowNames(undefined)
+  }, [model])
+
+  const makeMouseEnterHandler = useCallback(
+    (node: HierarchyNode<NodeWithIdsAndLength>) => () => {
+      model.setHighlightedRowNames(nodeDescendantNames.get(node))
+    },
+    [model, nodeDescendantNames],
+  )
+
   return (
     <>
       {hierarchy
@@ -38,14 +51,8 @@ const Tree = observer(function ({ model }: { model: LinearMafDisplayModel }) {
                   x2={sx}
                   y2={ty}
                   style={{ pointerEvents: 'all', cursor: 'pointer' }}
-                  onMouseEnter={() => {
-                    model.setHighlightedRowNames(
-                      nodeDescendantNames.get(source),
-                    )
-                  }}
-                  onMouseLeave={() => {
-                    model.setHighlightedRowNames(undefined)
-                  }}
+                  onMouseEnter={makeMouseEnterHandler(source)}
+                  onMouseLeave={clearHighlight}
                 />
                 <line
                   stroke="black"
@@ -54,14 +61,8 @@ const Tree = observer(function ({ model }: { model: LinearMafDisplayModel }) {
                   x2={tx}
                   y2={ty}
                   style={{ pointerEvents: 'all', cursor: 'pointer' }}
-                  onMouseEnter={() => {
-                    model.setHighlightedRowNames(
-                      nodeDescendantNames.get(target),
-                    )
-                  }}
-                  onMouseLeave={() => {
-                    model.setHighlightedRowNames(undefined)
-                  }}
+                  onMouseEnter={makeMouseEnterHandler(target)}
+                  onMouseLeave={clearHighlight}
                 />
               </React.Fragment>
             )

src/LinearMafRenderer/components/LinearMafRendering.tsx

@@ -58,10 +58,6 @@ const LinearMafRendering = observer(function (props: {
         displayModel.setHoveredInfo?.(undefined)
         displayModel.setHighlightedRowNames?.(undefined)
       }}
-      onMouseOut={() => {
-        displayModel.setHoveredInfo?.(undefined)
-        displayModel.setHighlightedRowNames?.(undefined)
-      }}
       style={{
         overflow: 'visible',
         position: 'relative',

src/LinearMafRenderer/rendering/spatialIndex.ts

@@ -27,12 +27,10 @@ export function shouldAddToSpatialIndex(
   // Zoom-aware distance threshold: scale threshold based on zoom level
   // At high zoom (small bpPerPx), use smaller threshold for more precision
   // At low zoom (large bpPerPx), use larger threshold to reduce index size
-  const dynamicThreshold = Math.max(
-    MIN_X_DISTANCE,
-    context.bpPerPx * MIN_X_DISTANCE,
+  return (
+    Math.abs(xPos - context.lastInsertedX) >
+    MIN_X_DISTANCE * Math.max(1, context.bpPerPx)
   )
-
-  return Math.abs(xPos - context.lastInsertedX) > dynamicThreshold
 }
 
 export function addToSpatialIndex(