Remove normalize-wheel library (#4429)

GMOD · Jun 6, 2024 · 93271bc · 93271bc
1 parent 8b15d85
commit 93271bc
Show file tree

Hide file tree

Showing 8 changed files with 39 additions and 58 deletions.
diff --git a/plugins/dotplot-view/package.json b/plugins/dotplot-view/package.json
@@ -40,10 +40,8 @@
     "@mui/icons-material": "^5.0.1",
     "@mui/x-data-grid": "^7.0.0",
     "@types/file-saver": "^2.0.1",
-    "@types/normalize-wheel": "^1.0.0",
     "clone": "^2.1.2",
-    "file-saver": "^2.0.0",
-    "normalize-wheel": "^1.0.1"
+    "file-saver": "^2.0.0"
   },
   "peerDependencies": {
     "@jbrowse/core": "^2.0.0",

diff --git a/plugins/dotplot-view/src/DotplotView/components/DotplotView.tsx b/plugins/dotplot-view/src/DotplotView/components/DotplotView.tsx
@@ -3,7 +3,6 @@ import { LoadingEllipses, Menu, ResizeHandle } from '@jbrowse/core/ui'
 import { observer } from 'mobx-react'
 import { transaction } from 'mobx'
 import { makeStyles } from 'tss-react/mui'
-import normalizeWheel from 'normalize-wheel'
 
 // locals
 import { DotplotViewModel } from '../model'
@@ -127,12 +126,11 @@ const DotplotViewInternal = observer(function ({
 
   // use non-React wheel handler to properly prevent body scrolling
   useEffect(() => {
-    function onWheel(origEvent: WheelEvent) {
-      const event = normalizeWheel(origEvent)
-      origEvent.preventDefault()
+    function onWheel(event: WheelEvent) {
+      event.preventDefault()
 
-      distanceX.current += event.pixelX
-      distanceY.current -= event.pixelY
+      distanceX.current += event.deltaX
+      distanceY.current -= event.deltaY
       if (!scheduled.current) {
         scheduled.current = true
 

diff --git a/...ns/linear-comparative-view/src/LinearSyntenyDisplay/components/LinearSyntenyRendering.tsx b/...ns/linear-comparative-view/src/LinearSyntenyDisplay/components/LinearSyntenyRendering.tsx
@@ -1,5 +1,4 @@
 import React, { useState, useCallback, useRef } from 'react'
-import normalizeWheel from 'normalize-wheel'
 import { observer } from 'mobx-react'
 import { getContainingView } from '@jbrowse/core/util'
 import { transaction } from 'mobx'
@@ -63,11 +62,10 @@ const LinearSyntenyRendering = observer(function ({
   const k2 = useCallback(
     (ref: HTMLCanvasElement) => {
       model.setMainCanvasRef(ref)
-      function onWheel(origEvent: WheelEvent) {
-        const event = normalizeWheel(origEvent)
-        origEvent.preventDefault()
-        if (origEvent.ctrlKey === true) {
-          delta.current += event.pixelY / 500
+      function onWheel(event: WheelEvent) {
+        event.preventDefault()
+        if (event.ctrlKey === true) {
+          delta.current += event.deltaY / 500
           for (const v of view.views) {
             v.setScaleFactor(
               delta.current < 0 ? 1 - delta.current : 1 / (1 + delta.current),
@@ -83,14 +81,14 @@ const LinearSyntenyRendering = observer(function ({
                 delta.current > 0
                   ? v.bpPerPx * (1 + delta.current)
                   : v.bpPerPx / (1 - delta.current),
-                origEvent.clientX - (ref?.getBoundingClientRect().left || 0),
+                event.clientX - (ref?.getBoundingClientRect().left || 0),
               )
             }
             delta.current = 0
           }, 300)
         } else {
-          if (Math.abs(event.pixelY) < Math.abs(event.pixelX)) {
-            xOffset.current += origEvent.deltaX
+          if (Math.abs(event.deltaY) < Math.abs(event.deltaX)) {
+            xOffset.current += event.deltaX / 2
           }
           if (currScrollFrame.current === undefined) {
             currScrollFrame.current = requestAnimationFrame(() => {

diff --git a/plugins/linear-comparative-view/src/SyntenyFeatureDetail/SyntenyFeatureDetail.tsx b/plugins/linear-comparative-view/src/SyntenyFeatureDetail/SyntenyFeatureDetail.tsx
@@ -46,19 +46,20 @@ function CustomFeatureDetails(props: { feature: SimpleFeatureSerialized }) {
   )
 }
 
-const BreakpointAlignmentsFeatureDetail = observer(
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  ({ model }: { model: any }) => {
-    const { feature1, feature2 } = JSON.parse(JSON.stringify(model.featureData))
-    return (
-      <Paper data-testid="alignment-side-drawer">
-        <BaseCoreDetails title="Feature 1" feature={feature1} />
-        <BaseCoreDetails title="Feature 2" feature={feature2} />
-        <CustomFeatureDetails feature={feature1} />
-        <CustomFeatureDetails feature={feature2} />
-      </Paper>
-    )
-  },
-)
+const SyntenyFeatureDetail = observer(function ({
+  model,
+}: {
+  model: { featureData: unknown }
+}) {
+  const { feature1, feature2 } = JSON.parse(JSON.stringify(model.featureData))
+  return (
+    <Paper data-testid="alignment-side-drawer">
+      <BaseCoreDetails title="Feature 1" feature={feature1} />
+      <BaseCoreDetails title="Feature 2" feature={feature2} />
+      <CustomFeatureDetails feature={feature1} />
+      <CustomFeatureDetails feature={feature2} />
+    </Paper>
+  )
+})
 
-export default BreakpointAlignmentsFeatureDetail
+export default SyntenyFeatureDetail
diff --git a/plugins/linear-genome-view/package.json b/plugins/linear-genome-view/package.json
@@ -41,12 +41,10 @@
     "@floating-ui/react": "^0.26.3",
     "@mui/icons-material": "^5.0.1",
     "@types/file-saver": "^2.0.1",
-    "@types/normalize-wheel": "^1.0.0",
     "clone": "^2.1.2",
     "copy-to-clipboard": "^3.3.1",
     "file-saver": "^2.0.0",
     "material-ui-popup-state": "^5.0.0",
-    "normalize-wheel": "^1.0.1",
     "react-error-boundary": "^4.0.3"
   },
   "peerDependencies": {

diff --git a/plugins/linear-genome-view/src/LinearGenomeView/components/hooks.ts b/plugins/linear-genome-view/src/LinearGenomeView/components/hooks.ts
@@ -1,5 +1,4 @@
 import React, { useRef, useEffect, useState } from 'react'
-import normalizeWheel from 'normalize-wheel'
 
 // locals
 import { LinearGenomeViewModel } from '..'
@@ -254,11 +253,10 @@ export function useWheelScroll(
 
     // if ctrl is held down, zoom in with y-scroll
     // else scroll horizontally with x-scroll
-    function onWheel(origEvent: WheelEvent) {
-      const event = normalizeWheel(origEvent)
-      if (origEvent.ctrlKey === true) {
-        origEvent.preventDefault()
-        delta.current += event.pixelY / 500
+    function onWheel(event: WheelEvent) {
+      if (event.ctrlKey === true) {
+        event.preventDefault()
+        delta.current += event.deltaY / 500
         model.setScaleFactor(
           delta.current < 0 ? 1 - delta.current : 1 / (1 + delta.current),
         )
@@ -271,18 +269,18 @@ export function useWheelScroll(
             delta.current > 0
               ? model.bpPerPx * (1 + delta.current)
               : model.bpPerPx / (1 - delta.current),
-            origEvent.clientX - (curr?.getBoundingClientRect().left || 0),
+            event.clientX - (curr?.getBoundingClientRect().left || 0),
           )
           delta.current = 0
         }, 300)
       } else {
         // this is needed to stop the event from triggering "back button
         // action" on MacOSX etc.  but is a heuristic to avoid preventing the
         // inner-track scroll behavior
-        if (Math.abs(event.pixelX) > Math.abs(2 * event.pixelY)) {
-          origEvent.preventDefault()
+        if (Math.abs(event.deltaX) > Math.abs(2 * event.deltaY)) {
+          event.preventDefault()
         }
-        delta.current += event.pixelX
+        delta.current += event.deltaX
         if (!scheduled.current) {
           // use rAF to make it so multiple event handlers aren't fired per-frame
           // see https://calendar.perfplanet.com/2013/the-runtime-performance-checklist/

diff --git a/test_data/volvox/volvox_fake_synteny_alt.paf b/test_data/volvox/volvox_fake_synteny_alt.paf
@@ -2,6 +2,6 @@ contigA	50001	1	10000	+	contigA	50001	40000	50000	10000	10000	60	tp:A:P	cm:i:941
 contigA	50001	30000	35000	+	contigA	50001	12000	17000	5000	5000	60	tp:A:P	cm:i:9414	s1:i:50000	s2:i:0	dv:f:0	rl:i:0
 contigA	50001	15000	15500	+	contigB	6079	100	600	500	500	0	tp:A:S	cm:i:1183	s1:i:5927	dv:f:0	rl:i:0
 contigB	6079	200	300	+	contigA	50001	200	300	100	100	0	tp:A:S	cm:i:1183	s1:i:5927	dv:f:0	rl:i:0
-contigA	50001	4000	16000	+	contigA	50001	24000	36000	17000	5000	5000	60	tp:A:P
-contigA	50001	10000	22000	+	contigA	50001	1000	13000	17000	5000	5000	60	tp:A:P
-contigA	50001	40000	45000	+	contigB	6079	900	5900	17000	5000	5000	60	tp:A:P
+contigA	50001	4000	16000	+	contigA	50001	24000	36000	17000	5000	60	tp:A:P
+contigA	50001	10000	22000	+	contigA	50001	1000	13000	17000	5000	60	tp:A:P
+contigA	50001	40000	45000	+	contigB	6079	900	5900	17000	5000	60	tp:A:P
diff --git a/yarn.lock b/yarn.lock
@@ -5374,11 +5374,6 @@
   resolved "https://registry.yarnpkg.com/@types/normalize-package-data/-/normalize-package-data-2.4.4.tgz#56e2cc26c397c038fab0e3a917a12d5c5909e901"
   integrity sha512-37i+OaWTh9qeK4LSHPsyRC7NahnGotNuZvjLSgcPzblpHB3rrCJxAOgI5gCdKm7coonsaX1Of0ILiTcnZjbfxA==
 
-"@types/normalize-wheel@^1.0.0":
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/@types/normalize-wheel/-/normalize-wheel-1.0.4.tgz#708f2dd9da33a5aa181f6e2eec06a74e04bb9d81"
-  integrity sha512-iclKEmOclXH2LGVkMkdal0+ffJphB3kbazakec96z1hW/CfJYmsZNFYLAmkpzePxKoKewXp2HSlsN6G4SG0b0g==
-
 "@types/oauth2-server@*":
   version "3.0.16"
   resolved "https://registry.yarnpkg.com/@types/oauth2-server/-/oauth2-server-3.0.16.tgz#193f8b266d40df432eaccf8712fe4d394ca3c1ef"
@@ -13298,11 +13293,6 @@ normalize-url@^8.0.0:
   resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-8.0.1.tgz#9b7d96af9836577c58f5883e939365fa15623a4a"
   integrity sha512-IO9QvjUMWxPQQhs60oOu10CRkWCiZzSUkzbXGGV9pviYl1fXYcvkzQ5jV9z8Y6un8ARoVRl4EtC6v6jNqbaJ/w==
 
-normalize-wheel@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/normalize-wheel/-/normalize-wheel-1.0.1.tgz#aec886affdb045070d856447df62ecf86146ec45"
-  integrity sha512-1OnlAPZ3zgrk8B91HyRj+eVv+kS5u+Z0SCsak6Xil/kmgEia50ga7zfkumayonZrImffAxPU/5WcyGhzetHNPA==
-
 npm-bundled@^1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/npm-bundled/-/npm-bundled-1.1.2.tgz#944c78789bd739035b70baa2ca5cc32b8d860bc1"