Updates

Author: cmdcolin

plugins/breakpoint-split-view/src/BreakpointSplitView/components/useRangeSelect.ts

@@ -94,6 +94,10 @@ export function useRangeSelect(
   }
 
   function mouseMove(event: React.MouseEvent<HTMLDivElement>) {
+    // If we have a rubberband selection active (menu is open), don't update guideX
+    if (anchorPosition) {
+      return
+    }
     setGuideX(getRelativeX(event, ref.current))
   }
 

plugins/linear-comparative-view/src/LinearComparativeView/components/useRangeSelect.ts

@@ -98,6 +98,10 @@ export function useRangeSelect(
   }
 
   function mouseMove(event: React.MouseEvent<HTMLDivElement>) {
+    // If we have a rubberband selection active (menu is open), don't update guideX
+    if (anchorPosition) {
+      return
+    }
     setGuideX(getRelativeX(event, ref.current))
   }
 

plugins/linear-genome-view/src/LinearGenomeView/components/HeaderRegionWidth.tsx

@@ -19,10 +19,10 @@ const HeaderRegionWidth = observer(function HeaderRegionWidth({
   model: LinearGenomeViewModel
 }) {
   const { classes } = useStyles()
-  const { coarseTotalBpDisplayStr } = model
+  const { effectiveTotalBpDisplayStr } = model
   return (
     <Typography variant="body2" color="textSecondary" className={classes.bp}>
-      {coarseTotalBpDisplayStr}
+      {effectiveTotalBpDisplayStr}
     </Typography>
   )
 })

plugins/linear-genome-view/src/LinearGenomeView/components/HeaderZoomControls.tsx

@@ -48,13 +48,16 @@ const HeaderZoomControls = observer(function HeaderZoomControls({
   model: LinearGenomeViewModel
 }) {
   const { classes } = useStyles()
-  const { width, maxBpPerPx, minBpPerPx, bpPerPx } = model
+  const { width, maxBpPerPx, minBpPerPx, bpPerPx, effectiveBpPerPx } = model
+
+  // local state needed for slider drag: onChange updates this for visual
+  // feedback, onChangeCommitted syncs to model
   const [value, setValue] = useState(-Math.log2(bpPerPx) * 100)
   useEffect(() => {
-    setValue(-Math.log2(bpPerPx) * 100)
-  }, [bpPerPx])
-  const zoomInDisabled = bpPerPx <= minBpPerPx + 0.0001
-  const zoomOutDisabled = bpPerPx >= maxBpPerPx - 0.0001
+    setValue(-Math.log2(effectiveBpPerPx) * 100)
+  }, [effectiveBpPerPx])
+  const zoomInDisabled = effectiveBpPerPx <= minBpPerPx + 0.0001
+  const zoomOutDisabled = effectiveBpPerPx >= maxBpPerPx - 0.0001
   return (
     <div className={classes.container}>
       <Tooltip title="Zoom out 2x">

plugins/linear-genome-view/src/LinearGenomeView/components/MiniControls.tsx

@@ -29,7 +29,8 @@ const MiniControls = observer(function MiniControls({
   model: LinearGenomeViewModel
 }) {
   const { classes } = useStyles()
-  const { id, bpPerPx, maxBpPerPx, minBpPerPx, hideHeader } = model
+  const { id, bpPerPx, maxBpPerPx, minBpPerPx, hideHeader, effectiveBpPerPx } =
+    model
   const { focusedViewId } = getSession(model)
   return hideHeader ? (
     <Paper className={classes.background}>
@@ -44,7 +45,7 @@ const MiniControls = observer(function MiniControls({
           onClick={() => {
             model.zoom(bpPerPx * 2)
           }}
-          disabled={bpPerPx >= maxBpPerPx - 0.0001}
+          disabled={effectiveBpPerPx >= maxBpPerPx - 0.0001}
         >
           <ZoomOut fontSize="small" />
         </IconButton>
@@ -53,7 +54,7 @@ const MiniControls = observer(function MiniControls({
           onClick={() => {
             model.zoom(bpPerPx / 2)
           }}
-          disabled={bpPerPx <= minBpPerPx + 0.0001}
+          disabled={effectiveBpPerPx <= minBpPerPx + 0.0001}
         >
           <ZoomIn fontSize="small" />
         </IconButton>

plugins/linear-genome-view/src/LinearGenomeView/components/useRangeSelect.ts

@@ -117,6 +117,11 @@ export function useRangeSelect(
   }
 
   function mouseMove(event: React.MouseEvent<HTMLDivElement>) {
+    // If we have a rubberband selection active (menu is open from a drag, not a click),
+    // don't update guideX - let the rubberband stay visible
+    if (anchorPosition?.isClick === false) {
+      return
+    }
     if (mouseDragging) {
       setGuideX(undefined)
     } else if (shiftOnly) {

plugins/linear-genome-view/src/LinearGenomeView/model.ts

@@ -256,6 +256,11 @@ export function stateModelFactory(pluginManager: PluginManager) {
        * #volatile
        */
       scaleFactor: 1,
+      /**
+       * #volatile
+       * target bpPerPx during zoom animation, used for immediate UI feedback
+       */
+      targetBpPerPx: undefined as number | undefined,
       /**
        * #volatile
        */
@@ -1089,6 +1094,13 @@ export function stateModelFactory(pluginManager: PluginManager) {
         self.scaleFactor = factor
       },
 
+      /**
+       * #action
+       */
+      setTargetBpPerPx(target: number | undefined) {
+        self.targetBpPerPx = target
+      },
+
       /**
        * #action
        * this "clears the view" and makes the view return to the import form
@@ -1152,7 +1164,6 @@ export function stateModelFactory(pluginManager: PluginManager) {
     })
     .actions(self => {
       let cancelLastAnimation = () => {}
-      let pendingTargetBpPerPx: number | undefined
 
       /**
        * #action
@@ -1166,7 +1177,7 @@ export function stateModelFactory(pluginManager: PluginManager) {
 
         // Apply that factor to the pending target (if mid-animation) or current bpPerPx
         // This allows rapid clicks to accumulate
-        const effectiveBase = pendingTargetBpPerPx ?? self.bpPerPx
+        const effectiveBase = self.targetBpPerPx ?? self.bpPerPx
         let effectiveTarget = effectiveBase * intendedFactor
 
         // Clamp to zoom limits
@@ -1175,14 +1186,15 @@ export function stateModelFactory(pluginManager: PluginManager) {
           Math.min(self.maxBpPerPx, effectiveTarget),
         )
 
-        const currentTarget = pendingTargetBpPerPx ?? self.bpPerPx
+        const currentTarget = self.targetBpPerPx ?? self.bpPerPx
 
         // If already at limit (or effectively no change), do nothing
         if (effectiveTarget === currentTarget) {
           return
         }
 
-        pendingTargetBpPerPx = effectiveTarget
+        // Set target immediately for UI feedback
+        self.setTargetBpPerPx(effectiveTarget)
 
         // Calculate target scale factor relative to committed bpPerPx
         // Don't update bpPerPx until animation completes - keeps blocks stable
@@ -1196,7 +1208,7 @@ export function stateModelFactory(pluginManager: PluginManager) {
           () => {
             self.zoomTo(effectiveTarget)
             self.setScaleFactor(1)
-            pendingTargetBpPerPx = undefined
+            self.setTargetBpPerPx(undefined)
           },
           0,
           1000,
@@ -1325,6 +1337,30 @@ export function stateModelFactory(pluginManager: PluginManager) {
         get coarseTotalBpDisplayStr() {
           return getBpDisplayStr(self.coarseTotalBp)
         },
+
+        /**
+         * #getter
+         * effective bpPerPx accounting for pending zoom target
+         */
+        get effectiveBpPerPx() {
+          return self.targetBpPerPx ?? self.bpPerPx
+        },
+
+        /**
+         * #getter
+         * total bp based on effective bpPerPx (updates immediately on zoom click)
+         */
+        get effectiveTotalBp() {
+          return this.effectiveBpPerPx * self.width
+        },
+
+        /**
+         * #getter
+         * display string for effective total bp (updates immediately on zoom click)
+         */
+        get effectiveTotalBpDisplayStr() {
+          return getBpDisplayStr(this.effectiveTotalBp)
+        },
       }
     })
     .actions(self => ({