react-msaview 5.1.1 → 5.2.1

package/src/components/ResizeHandles.tsx

@@ -1,74 +1,49 @@
-import React, { useEffect, useRef, useState } from 'react'
+import React, { useCallback, useState } from 'react'
 
 import { observer } from 'mobx-react'
 
+import { useDragScroll } from '../useDragScroll.ts'
+
 import type { MsaViewModel } from '../model.ts'
 
+const handleBg = 'rgba(200,200,200)'
+const handleBgHover = 'rgba(150,150,150)'
+
 export const VerticalResizeHandle = observer(function ({
   model,
 }: {
   model: MsaViewModel
 }) {
   const { resizeHandleWidth } = model
-  const [mouseDragging, setMouseDragging] = useState(false)
-  const scheduled = useRef(false)
-  const prevX = useRef(0)
-
-  useEffect(() => {
-    function globalMouseMove(event: MouseEvent) {
-      event.preventDefault()
-      const currX = event.clientX
-      if (prevX.current === 0) {
-        prevX.current = event.clientX
-      } else {
-        const distance = currX - prevX.current
-        if (distance) {
-          // use rAF to make it so multiple event handlers aren't fired per-frame
-          // see https://calendar.perfplanet.com/2013/the-runtime-performance-checklist/
-          if (!scheduled.current) {
-            scheduled.current = true
-            window.requestAnimationFrame(() => {
-              model.setTreeAreaWidth(model.treeAreaWidth + distance)
-              scheduled.current = false
-              prevX.current = event.clientX
-            })
-          }
-        }
-      }
-    }
-
-    function globalMouseUp() {
-      prevX.current = 0
-      if (mouseDragging) {
-        setMouseDragging(false)
-      }
-    }
-    if (mouseDragging) {
-      document.addEventListener('mousemove', globalMouseMove, true)
-      document.addEventListener('mouseup', globalMouseUp, true)
-      return () => {
-        document.removeEventListener('mousemove', globalMouseMove, true)
-        document.removeEventListener('mouseup', globalMouseUp, true)
-      }
-    }
-    return () => {}
-  }, [mouseDragging, model])
+  const [hovered, setHovered] = useState(false)
+  const { startDrag } = useDragScroll(
+    'x',
+    useCallback(
+      (delta: number, startWidth: number) => {
+        model.setTreeAreaWidth(startWidth + delta)
+      },
+      [model],
+    ),
+  )
 
   return (
-    <div>
-      <div
-        onMouseDown={() => {
-          setMouseDragging(true)
-        }}
-        style={{
-          cursor: 'ew-resize',
-          height: '100%',
-          width: resizeHandleWidth,
-          background: 'rgba(200,200,200)',
-          position: 'relative',
-        }}
-      />
-    </div>
+    <div
+      onMouseDown={event => {
+        startDrag(event, model.treeAreaWidth)
+      }}
+      onMouseEnter={() => {
+        setHovered(true)
+      }}
+      onMouseLeave={() => {
+        setHovered(false)
+      }}
+      style={{
+        cursor: 'ew-resize',
+        width: resizeHandleWidth,
+        background: hovered ? handleBgHover : handleBg,
+        position: 'relative',
+      }}
+    />
   )
 })
 
@@ -78,64 +53,77 @@ export const HorizontalResizeHandle = observer(function ({
   model: MsaViewModel
 }) {
   const { resizeHandleWidth } = model
-  const [mouseDragging, setMouseDragging] = useState(false)
-  const scheduled = useRef(false)
-  const prevY = useRef(0)
+  const [hovered, setHovered] = useState(false)
+  const { startDrag } = useDragScroll(
+    'y',
+    useCallback(
+      (delta: number, startHeight: number) => {
+        model.setHeight(startHeight + delta)
+      },
+      [model],
+    ),
+  )
 
-  useEffect(() => {
-    function globalMouseMove(event: MouseEvent) {
-      event.preventDefault()
-      const currY = event.clientY
-      if (prevY.current === 0) {
-        prevY.current = event.clientY
-      } else {
-        const distance = currY - prevY.current
-        if (distance) {
-          // use rAF to make it so multiple event handlers aren't fired per-frame
-          // see https://calendar.perfplanet.com/2013/the-runtime-performance-checklist/
-          if (!scheduled.current) {
-            scheduled.current = true
-            window.requestAnimationFrame(() => {
-              model.setHeight(model.height + distance)
-              scheduled.current = false
-              prevY.current = event.clientY
-            })
-          }
-        }
-      }
-    }
+  return (
+    <div
+      onMouseDown={event => {
+        startDrag(event, model.height)
+      }}
+      onMouseEnter={() => {
+        setHovered(true)
+      }}
+      onMouseLeave={() => {
+        setHovered(false)
+      }}
+      style={{
+        cursor: 'ns-resize',
+        width: '100%',
+        height: resizeHandleWidth,
+        background: hovered ? handleBgHover : handleBg,
+        position: 'relative',
+      }}
+    />
+  )
+})
 
-    function globalMouseUp() {
-      prevY.current = 0
-      if (mouseDragging) {
-        setMouseDragging(false)
-      }
-    }
-    if (mouseDragging) {
-      document.addEventListener('mousemove', globalMouseMove, true)
-      document.addEventListener('mouseup', globalMouseUp, true)
-      return () => {
-        document.removeEventListener('mousemove', globalMouseMove, true)
-        document.removeEventListener('mouseup', globalMouseUp, true)
-      }
-    }
-    return () => {}
-  }, [mouseDragging, model])
+export const ConservationTrackResizeHandle = observer(function ({
+  model,
+}: {
+  model: MsaViewModel
+}) {
+  const { resizeHandleWidth } = model
+  const [hovered, setHovered] = useState(false)
+  const { startDrag } = useDragScroll(
+    'y',
+    useCallback(
+      (delta: number, startHeight: number) => {
+        model.setConservationTrackHeight(Math.max(10, startHeight + delta))
+      },
+      [model],
+    ),
+  )
 
   return (
-    <div>
-      <div
-        onMouseDown={() => {
-          setMouseDragging(true)
-        }}
-        style={{
-          cursor: 'ns-resize',
-          width: '100%',
-          height: resizeHandleWidth,
-          background: 'rgba(200,200,200)',
-          position: 'relative',
-        }}
-      />
-    </div>
+    <div
+      onMouseDown={event => {
+        startDrag(event, model.conservationTrackHeight)
+      }}
+      onMouseEnter={() => {
+        setHovered(true)
+      }}
+      onMouseLeave={() => {
+        setHovered(false)
+      }}
+      style={{
+        position: 'absolute',
+        bottom: 0,
+        left: 0,
+        cursor: 'ns-resize',
+        width: '100%',
+        height: resizeHandleWidth,
+        zIndex: 1,
+        background: hovered ? handleBgHover : handleBg,
+      }}
+    />
   )
 })

package/src/components/TextTrack.tsx

@@ -1,7 +1,9 @@
 import React, { useEffect, useRef } from 'react'
 
+import { autorun } from 'mobx'
 import { observer } from 'mobx-react'
 
+import { setFontSize } from '../setFontSize.ts'
 import { useColorContrast } from '../useColorContrast.ts'
 import { drawTextTrackContent } from './tracks/renderTracksSvg.ts'
 
@@ -20,10 +22,7 @@ const AnnotationBlock = observer(function ({
   const {
     blockSize,
     scrollX,
-    bgColor,
     colorScheme: modelColorScheme,
-    colWidth,
-    fontSize,
     rowHeight,
     highResScaleFactor,
   } = model
@@ -31,49 +30,43 @@ const AnnotationBlock = observer(function ({
     model: { customColorScheme, data },
   } = track
 
-  const colorScheme = customColorScheme || modelColorScheme
+  const colorScheme = customColorScheme ?? modelColorScheme
   const ref = useRef<HTMLCanvasElement>(null)
   const { contrastScheme } = useColorContrast(colorScheme)
   useEffect(() => {
-    if (!ref.current) {
-      return
-    }
-
-    const ctx = ref.current.getContext('2d')
+    const ctx = ref.current?.getContext('2d')
     if (!ctx) {
       return
     }
+    return autorun(() => {
+      const {
+        blockSize,
+        bgColor,
+        colWidth,
+        fontSize,
+        rowHeight,
+        highResScaleFactor,
+      } = model
+      ctx.resetTransform()
+      ctx.scale(highResScaleFactor, highResScaleFactor)
+      ctx.clearRect(0, 0, blockSize, rowHeight)
+      ctx.translate(-offsetX, 0)
+      ctx.textAlign = 'center'
+      setFontSize(ctx, fontSize)
 
-    ctx.resetTransform()
-    ctx.scale(highResScaleFactor, highResScaleFactor)
-    ctx.clearRect(0, 0, blockSize, rowHeight)
-    ctx.translate(-offsetX, 0)
-    ctx.textAlign = 'center'
-    ctx.font = ctx.font.replace(/\d+px/, `${fontSize}px`)
-
-    drawTextTrackContent({
-      ctx,
-      data,
-      colorScheme,
-      contrastScheme,
-      bgColor,
-      colWidth,
-      rowHeight,
-      offsetX,
-      blockSize,
+      drawTextTrackContent({
+        ctx,
+        data,
+        colorScheme,
+        contrastScheme,
+        bgColor,
+        colWidth,
+        rowHeight,
+        offsetX,
+        blockSize,
+      })
     })
-  }, [
-    fontSize,
-    bgColor,
-    blockSize,
-    colWidth,
-    rowHeight,
-    offsetX,
-    contrastScheme,
-    colorScheme,
-    highResScaleFactor,
-    data,
-  ])
+  }, [model, offsetX, contrastScheme, colorScheme, data])
   return (
     <canvas
       ref={ref}

package/src/components/Track.tsx

@@ -31,7 +31,7 @@ const TrackLabel = observer(function TrackLabel({
     model: { name, height },
   } = track
   const { classes } = useStyles()
-  const trackLabelHeight = Math.max(8, rowHeight - 8)
+  const trackLabelHeight = Math.min(height, Math.max(8, rowHeight - 8))
 
   return (
     <div

package/src/components/VerticalScrollbar.tsx

@@ -20,9 +20,9 @@ const VerticalScrollbar = observer(({ model }: { model: MsaViewModel }) => {
     'y',
     useCallback(
       (delta: number, startScroll: number) => {
-        model.setScrollY(clamp(startScroll - delta / unit, -totalHeight, 0))
+        model.setScrollY(clamp(startScroll - delta / unit, model.maxScrollY, 0))
       },
-      [model, unit, totalHeight],
+      [model, unit],
     ),
   )
   return (

package/src/components/dialogs/ExportSVGDialog.tsx

@@ -28,13 +28,21 @@ export default function ExportSVGDialog({
 }) {
   const [includeMinimap, setIncludeMinimap] = useState(true)
   const [includeTracks, setIncludeTracks] = useState(true)
-  const [exportType, setExportType] = useState('viewport')
+  const [exportType, setExportType] = useState<'entire' | 'viewport'>(
+    'viewport',
+  )
   const [error, setError] = useState<unknown>()
   const theme = useTheme()
-  const { totalWidth, totalHeight, treeAreaWidth, turnedOnTracks } = model
+  const {
+    totalWidth,
+    totalHeight,
+    treeAreaWidth,
+    turnedOnTracks,
+    totalTrackAreaHeight,
+  } = model
   const hasTracks = turnedOnTracks.length > 0
   const entireWidth = totalWidth + treeAreaWidth
-  const entireHeight = totalHeight
+  const entireHeight = totalHeight + (includeTracks ? totalTrackAreaHeight : 0)
   const isLargeExport =
     exportType === 'entire' && (entireWidth > 10000 || entireHeight > 10000)
   return (
@@ -71,7 +79,10 @@ export default function ExportSVGDialog({
             <RadioGroup
               value={exportType}
               onChange={event => {
-                setExportType(event.target.value)
+                const { value } = event.target
+                if (value === 'entire' || value === 'viewport') {
+                  setExportType(value)
+                }
               }}
             >
               <FormControlLabel
@@ -99,22 +110,21 @@ export default function ExportSVGDialog({
           variant="contained"
           color="primary"
           onClick={() => {
-            // eslint-disable-next-line @typescript-eslint/no-floating-promises
-            ;(async () => {
-              try {
-                await model.exportSVG({
-                  theme,
-                  includeMinimap:
-                    exportType === 'entire' ? false : includeMinimap,
-                  includeTracks: hasTracks && includeTracks,
-                  exportType,
-                })
+            void model
+              .exportSVG({
+                theme,
+                includeMinimap:
+                  exportType === 'entire' ? false : includeMinimap,
+                includeTracks: hasTracks && includeTracks,
+                exportType,
+              })
+              .then(() => {
                 onClose()
-              } catch (e) {
+              })
+              .catch((e: unknown) => {
                 console.error(e)
                 setError(e)
-              }
-            })()
+              })
           }}
         >
           Submit

package/src/components/dialogs/InterProScanDialog.tsx

@@ -258,7 +258,12 @@ const InterProScanDialog = observer(function ({
                   onProgress: arg => {
                     model.setStatus(
                       arg
-                        ? { ...arg, onCancel: () => { controller.abort() } }
+                        ? {
+                            ...arg,
+                            onCancel: () => {
+                              controller.abort()
+                            },
+                          }
                         : undefined,
                     )
                   },

package/src/components/dialogs/UserProvidedDomainsDialog.tsx

@@ -112,10 +112,9 @@ const UserProvidedDomainsDialog = observer(function ({
                   ? JSON.parse(await file.text())
                   : await jsonfetch(interProURL)
 
-                model.setInterProAnnotations(
+                model.setDomains(
                   Object.fromEntries(ret.results.map(r => [r.xref[0]!.id, r])),
                 )
-                model.setShowDomains(true)
                 getSession(model).notify(
                   'Loaded interproscan results',
                   'success',

package/src/components/header/ColorSchemeMenu.tsx

@@ -12,6 +12,7 @@ const ColorSchemeMenu = observer(function ({ model }: { model: MsaViewModel }) {
   const { colorSchemeName } = model
   return (
     <CascadingMenuButton
+      data-testid="color_scheme_menu"
       closeAfterItemClick
       anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
       transformOrigin={{ vertical: 'top', horizontal: 'left' }}

package/src/components/header/FileMenu.tsx

@@ -3,6 +3,7 @@ import React, { lazy } from 'react'
 import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton'
 import Assignment from '@mui/icons-material/Assignment'
 import FolderOpen from '@mui/icons-material/FolderOpen'
+import Menu from '@mui/icons-material/Menu'
 import PhotoCamera from '@mui/icons-material/PhotoCamera'
 import Settings from '@mui/icons-material/Settings'
 import { observer } from 'mobx-react'
@@ -18,6 +19,7 @@ const SettingsDialog = lazy(() => import('../dialogs/SettingsDialog.tsx'))
 const FileMenu = observer(({ model }: { model: MsaViewModel }) => {
   return (
     <CascadingMenuButton
+      data-testid="file_menu"
       menuItems={[
         {
           label: 'Return to import form',
@@ -76,7 +78,7 @@ const FileMenu = observer(({ model }: { model: MsaViewModel }) => {
       anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
       transformOrigin={{ vertical: 'top', horizontal: 'left' }}
     >
-      <FolderOpen />
+      <Menu />
     </CascadingMenuButton>
   )
 })

package/src/components/header/Header.tsx

@@ -23,7 +23,7 @@ const AboutDialog = lazy(() => import('../dialogs/AboutDialog.tsx'))
 const Header = observer(function ({ model }: { model: MsaViewModel }) {
   const [ref, { height }] = useMeasure()
   useEffect(() => {
-    model.setHeaderHeight(height || 0)
+    model.setHeaderHeight(height ?? 0)
   }, [model, height])
   return (
     <div ref={ref} style={{ display: 'flex' }}>

package/src/components/header/HeaderInfoArea.tsx

@@ -7,22 +7,47 @@ import { makeStyles } from 'tss-react/mui'
 import type { MsaViewModel } from '../../model.ts'
 
 const useStyles = makeStyles()({
-  margin: {
+  container: {
+    display: 'flex',
+    overflow: 'hidden',
     margin: 'auto',
     marginLeft: 10,
   },
+  nameFirst: {
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+    minWidth: 0,
+  },
+  nameRest: {
+    whiteSpace: 'nowrap',
+    flexShrink: 0,
+  },
 })
 
 const HeaderInfoArea = observer(function ({ model }: { model: MsaViewModel }) {
   const { mouseOverRowName, mouseCol } = model
   const { classes } = useStyles()
-  return mouseOverRowName && mouseCol !== undefined ? (
-    <Typography className={classes.margin}>
-      {mouseOverRowName}:
-      {model.visibleColToSeqPosOneBased(mouseOverRowName, mouseCol)} (
-      {model.visibleColToRowLetter(mouseOverRowName, mouseCol)})
+  if (!mouseOverRowName || mouseCol === undefined) {
+    return null
+  }
+  const mid = Math.floor(mouseOverRowName.length / 2)
+  const pos = model.visibleColToSeqPosOneBased(mouseOverRowName, mouseCol)
+  const letter = model.visibleColToRowLetter(mouseOverRowName, mouseCol)
+  return (
+    <Typography
+      component="div"
+      className={classes.container}
+      title={mouseOverRowName}
+    >
+      <span className={classes.nameFirst}>
+        {mouseOverRowName.slice(0, mid)}
+      </span>
+      <span className={classes.nameRest}>
+        {mouseOverRowName.slice(mid)}:{pos} ({letter})
+      </span>
     </Typography>
-  ) : null
+  )
 })
 
 export default HeaderInfoArea

package/src/components/header/MSASettingsMenu.tsx

@@ -11,6 +11,7 @@ import type { MsaViewModel } from '../../model.ts'
 const MSASettingsMenu = observer(function ({ model }: { model: MsaViewModel }) {
   return (
     <CascadingMenuButton
+      data-testid="msa_settings_menu"
       closeAfterItemClick={false}
       anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
       transformOrigin={{ vertical: 'top', horizontal: 'left' }}

package/src/components/header/TreeSettingsMenu.tsx

@@ -16,6 +16,7 @@ const TreeSettingsMenu = observer(function ({
   const { rows } = model
   return (
     <CascadingMenuButton
+      data-testid="tree_settings_menu"
       closeAfterItemClick={false}
       anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
       transformOrigin={{ vertical: 'top', horizontal: 'left' }}

package/src/components/header/ZoomControls.tsx

@@ -1,8 +1,9 @@
 import React from 'react'
 
 import ZoomIn from '@mui/icons-material/ZoomIn'
+import ZoomInMap from '@mui/icons-material/ZoomInMap'
 import ZoomOut from '@mui/icons-material/ZoomOut'
-import { IconButton } from '@mui/material'
+import { IconButton, ToggleButton } from '@mui/material'
 import { observer } from 'mobx-react'
 
 import type { MsaViewModel } from '../../model.ts'
@@ -28,6 +29,18 @@ const ZoomControls = observer(function ZoomControls({
       >
         <ZoomOut />
       </IconButton>
+      <ToggleButton
+        value="scrollZoom"
+        selected={model.scrollZoom}
+        title="Toggle scroll-to-zoom (zoom on plain mouse wheel; ctrl+wheel always zooms)"
+        size="small"
+        sx={{ border: 'none' }}
+        onChange={() => {
+          model.setScrollZoom(!model.scrollZoom)
+        }}
+      >
+        <ZoomInMap />
+      </ToggleButton>
     </>
   )
 })

package/src/components/header/ZoomMenu.tsx

@@ -37,6 +37,16 @@ const ZoomMenu = observer(function ({ model }: { model: MsaViewModel }) {
             model.resetZoom()
           },
         },
+        {
+          label: 'Scroll zoom',
+          type: 'checkbox',
+          checked: model.scrollZoom,
+          onClick: () => {
+            model.setScrollZoom(!model.scrollZoom)
+          },
+          helpText:
+            'When enabled, scrolling the mouse wheel zooms in and out without holding ctrl. Hold shift to pan instead. Ctrl/⌘+wheel always zooms.',
+        },
       ]}
     >
       <MoreVert />