react-msaview 5.9.0 → 6.0.0

package/src/components/ResizeHandles.tsx

@@ -9,27 +9,29 @@ import type { MsaViewModel } from '../model.ts'
 const handleBg = 'rgba(200,200,200)'
 const handleBgHover = 'rgba(150,150,150)'
 
-export const VerticalResizeHandle = observer(function ({
-  model,
+/**
+ * A draggable divider. `getStart` is read at mousedown and handed back to
+ * `onDrag` alongside the pixel delta since, so each handle below only has to say
+ * which model dimension it resizes and where it sits.
+ */
+function ResizeHandle({
+  axis,
+  getStart,
+  onDrag,
+  style,
 }: {
-  model: MsaViewModel
+  axis: 'x' | 'y'
+  getStart: () => number
+  onDrag: (delta: number, startValue: number) => void
+  style: React.CSSProperties
 }) {
-  const { resizeHandleWidth } = model
   const [hovered, setHovered] = useState(false)
-  const { startDrag } = useDragScroll(
-    'x',
-    useCallback(
-      (delta: number, startWidth: number) => {
-        model.setTreeAreaWidth(startWidth + delta)
-      },
-      [model],
-    ),
-  )
+  const { startDrag } = useDragScroll(axis, onDrag)
 
   return (
     <div
       onMouseDown={event => {
-        startDrag(event, model.treeAreaWidth)
+        startDrag(event, getStart())
       }}
       onMouseEnter={() => {
         setHovered(true)
@@ -38,13 +40,34 @@ export const VerticalResizeHandle = observer(function ({
         setHovered(false)
       }}
       style={{
-        cursor: 'ew-resize',
-        width: resizeHandleWidth,
-        background: hovered ? handleBgHover : handleBg,
         position: 'relative',
+        cursor: axis === 'x' ? 'ew-resize' : 'ns-resize',
+        background: hovered ? handleBgHover : handleBg,
+        ...style,
       }}
     />
   )
+}
+
+export const VerticalResizeHandle = observer(function ({
+  model,
+}: {
+  model: MsaViewModel
+}) {
+  const onDrag = useCallback(
+    (delta: number, startWidth: number) => {
+      model.setTreeAreaWidth(startWidth + delta)
+    },
+    [model],
+  )
+  return (
+    <ResizeHandle
+      axis="x"
+      getStart={() => model.treeAreaWidth}
+      onDrag={onDrag}
+      style={{ width: model.resizeHandleWidth }}
+    />
+  )
 })
 
 export const HorizontalResizeHandle = observer(function ({
@@ -52,36 +75,18 @@ export const HorizontalResizeHandle = observer(function ({
 }: {
   model: MsaViewModel
 }) {
-  const { resizeHandleWidth } = model
-  const [hovered, setHovered] = useState(false)
-  const { startDrag } = useDragScroll(
-    'y',
-    useCallback(
-      (delta: number, startHeight: number) => {
-        model.setHeight(startHeight + delta)
-      },
-      [model],
-    ),
+  const onDrag = useCallback(
+    (delta: number, startHeight: number) => {
+      model.setHeight(startHeight + delta)
+    },
+    [model],
   )
-
   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',
-      }}
+    <ResizeHandle
+      axis="y"
+      getStart={() => model.height}
+      onDrag={onDrag}
+      style={{ width: '100%', height: model.resizeHandleWidth }}
     />
   )
 })
@@ -91,38 +96,24 @@ export const ConservationTrackResizeHandle = observer(function ({
 }: {
   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],
-    ),
+  const onDrag = useCallback(
+    (delta: number, startHeight: number) => {
+      model.setConservationTrackHeight(Math.max(10, startHeight + delta))
+    },
+    [model],
   )
-
   return (
-    <div
-      onMouseDown={event => {
-        startDrag(event, model.conservationTrackHeight)
-      }}
-      onMouseEnter={() => {
-        setHovered(true)
-      }}
-      onMouseLeave={() => {
-        setHovered(false)
-      }}
+    <ResizeHandle
+      axis="y"
+      getStart={() => model.conservationTrackHeight}
+      onDrag={onDrag}
       style={{
         position: 'absolute',
         bottom: 0,
         left: 0,
-        cursor: 'ns-resize',
         width: '100%',
-        height: resizeHandleWidth,
+        height: model.resizeHandleWidth,
         zIndex: 1,
-        background: hovered ? handleBgHover : handleBg,
       }}
     />
   )

package/src/components/ScrollbarThumb.tsx

@@ -0,0 +1,48 @@
+import React, { useState } from 'react'
+
+import { useDragScroll } from '../useDragScroll.ts'
+
+export const scrollbarThumbFill = 'rgba(66,119,127,0.3)'
+const scrollbarThumbFillHovered = 'rgba(66,119,127,0.6)'
+
+/**
+ * The draggable thumb shared by the horizontal Minimap and the
+ * VerticalScrollbar. `getStart` is read at mousedown and handed back to
+ * `onDrag` alongside the pixel delta since, so a caller only supplies the
+ * scroll offset it drives and where the thumb sits.
+ */
+export default function ScrollbarThumb({
+  axis,
+  getStart,
+  onDrag,
+  style,
+}: {
+  axis: 'x' | 'y'
+  getStart: () => number
+  onDrag: (delta: number, startValue: number) => void
+  style: React.CSSProperties
+}) {
+  const [hovered, setHovered] = useState(false)
+  const { startDrag } = useDragScroll(axis, onDrag)
+
+  return (
+    <div
+      onMouseOver={() => {
+        setHovered(true)
+      }}
+      onMouseOut={() => {
+        setHovered(false)
+      }}
+      onMouseDown={event => {
+        startDrag(event, getStart())
+      }}
+      style={{
+        position: 'absolute',
+        zIndex: 100,
+        cursor: 'pointer',
+        background: hovered ? scrollbarThumbFillHovered : scrollbarThumbFill,
+        ...style,
+      }}
+    />
+  )
+}

package/src/components/SequenceTextArea.tsx

@@ -1,11 +1,11 @@
 import React, { useState } from 'react'
 
 import { makeStyles } from '@jbrowse/core/util/tss-react'
-import { Button, TextField } from '@mui/material'
+import { TextField } from '@mui/material'
 import { getUngappedSequence } from 'msa-parsers'
 
-import copy from '../vendor/copyToClipboard.ts'
 import Checkbox2 from './Checkbox2.tsx'
+import CopyButton from './CopyButton.tsx'
 
 const useStyles = makeStyles()({
   textAreaFont: {
@@ -21,7 +21,6 @@ const useStyles = makeStyles()({
 
 export default function SequenceTextArea({ str }: { str: [string, string][] }) {
   const { classes } = useStyles()
-  const [copied, setCopied] = useState(false)
   const [showGaps, setShowGaps] = useState(false)
   const [showEmpty, setShowEmpty] = useState(false)
 
@@ -32,19 +31,7 @@ export default function SequenceTextArea({ str }: { str: [string, string][] }) {
     .join('\n')
   return (
     <>
-      <Button
-        color="primary"
-        variant="contained"
-        onClick={() => {
-          copy(disp)
-          setCopied(true)
-          setTimeout(() => {
-            setCopied(false)
-          }, 500)
-        }}
-      >
-        {copied ? 'Copied!' : 'Copy to clipboard'}
-      </Button>
+      <CopyButton text={disp} />
       <Checkbox2
         label="Show gaps"
         checked={showGaps}

package/src/components/TextTrack.tsx

@@ -32,16 +32,9 @@ const AnnotationBlock = observer(function ({
 
   const colorScheme = customColorScheme ?? modelColorScheme
   const { theme, contrastScheme } = useColorContrast(colorScheme)
-  const ref = useCanvasAutorun(
-    ctx => {
-      const {
-        blockSize,
-        bgColor,
-        colWidth,
-        fontSize,
-        rowHeight,
-        highResScaleFactor,
-      } = model
+  const ref = useCanvasAutorun({
+    draw: ctx => {
+      const { bgColor, colWidth, fontSize } = model
       ctx.resetTransform()
       ctx.scale(highResScaleFactor, highResScaleFactor)
       ctx.clearRect(0, 0, blockSize, rowHeight)
@@ -62,8 +55,10 @@ const AnnotationBlock = observer(function ({
         blockSize,
       })
     },
-    [model, offsetX, theme, contrastScheme, colorScheme, data],
-  )
+    width: blockSize * highResScaleFactor,
+    height: rowHeight * highResScaleFactor,
+    deps: [model, offsetX, theme, contrastScheme, colorScheme, data],
+  })
   return (
     <canvas
       ref={ref}

package/src/components/VerticalScrollbar.tsx

@@ -1,61 +1,47 @@
-import React, { useCallback, useState } from 'react'
+import React, { useCallback } from 'react'
 
-import { clamp } from '@jbrowse/core/util'
 import { observer } from 'mobx-react'
 
-import { useDragScroll } from '../useDragScroll.ts'
+import ScrollbarThumb from './ScrollbarThumb.tsx'
 
 import type { MsaViewModel } from '../model.ts'
 
+const width = 20
+
 const VerticalScrollbar = observer(({ model }: { model: MsaViewModel }) => {
   const { msaAreaHeight, scrollY, totalHeight } = model
-  const [hovered, setHovered] = useState(false)
-  const fill = 'rgba(66, 119, 127, 0.3)'
   const unit = msaAreaHeight / totalHeight
-  const top = -scrollY
-  const bottom = top + msaAreaHeight
-  const t = top * unit
-  const b = bottom * unit
-  const { startDrag } = useDragScroll(
-    'y',
-    useCallback(
-      (delta: number, startScroll: number) => {
-        model.setScrollY(clamp(startScroll - delta / unit, model.maxScrollY, 0))
-      },
-      [model, unit],
-    ),
+  const t = -scrollY * unit
+  const b = (-scrollY + msaAreaHeight) * unit
+
+  const onDrag = useCallback(
+    (delta: number, startScroll: number) => {
+      model.setScrollY(startScroll - delta / unit)
+    },
+    [model, unit],
   )
+
   return (
     <div
       style={{
         position: 'relative',
-        width: 20,
+        width,
         height: msaAreaHeight,
         borderLeft: '1px solid #555',
         borderTop: '1px solid #555',
         boxSizing: 'border-box',
       }}
     >
-      <div
+      <ScrollbarThumb
+        axis="y"
+        getStart={() => model.scrollY}
+        onDrag={onDrag}
         style={{
-          position: 'absolute',
           top: Math.max(0, t),
           left: 0,
-          background: hovered ? 'rgba(66,119,127,0.6)' : fill,
-          cursor: 'pointer',
           boxSizing: 'border-box',
-          width: 20,
+          width,
           height: Math.max(b - t, 20),
-          zIndex: 100,
-        }}
-        onMouseOver={() => {
-          setHovered(true)
-        }}
-        onMouseOut={() => {
-          setHovered(false)
-        }}
-        onMouseDown={event => {
-          startDrag(event, model.scrollY)
         }}
       />
     </div>

package/src/components/dialogs/FeatureDialog.tsx

@@ -43,10 +43,9 @@ const Toggles = observer(function ({ model }: { model: MsaViewModel }) {
 })
 
 const FeatureTable = observer(function ({ model }: { model: MsaViewModel }) {
-  const { tidyInterProAnnotationTypes, tidyInterProAnnotations, fillPalette } =
-    model
+  const { annotationTypes, annotations, fillPalette } = model
   const counts = new Map<string, number>()
-  for (const annot of tidyInterProAnnotations) {
+  for (const annot of annotations) {
     counts.set(annot.accession, (counts.get(annot.accession) ?? 0) + 1)
   }
   return (
@@ -64,7 +63,7 @@ const FeatureTable = observer(function ({ model }: { model: MsaViewModel }) {
           </TableRow>
         </TableHead>
         <TableBody>
-          {[...tidyInterProAnnotationTypes.values()].map(
+          {[...annotationTypes.values()].map(
             ({ accession, name, description }) => (
               <TableRow key={accession}>
                 <TableCell padding="checkbox">

package/src/components/dialogs/{UserProvidedDomainsDialog.tsx → InterProScanFileDialog.tsx}

@@ -14,13 +14,14 @@ import {
   Typography,
 } from '@mui/material'
 import { observer } from 'mobx-react'
+import { interProScanResponseToAnnotations } from 'msa-parsers'
 
 import { jsonfetch } from '../../fetchUtils.ts'
 
-import type { InterProScanResponse } from '../../launchInterProScan.ts'
 import type { MsaViewModel } from '../../model.ts'
+import type { InterProScanResponse } from 'msa-parsers'
 
-const UserProvidedDomainsDialog = observer(function ({
+const InterProScanFileDialog = observer(function ({
   handleClose,
   model,
 }: {
@@ -34,7 +35,7 @@ const UserProvidedDomainsDialog = observer(function ({
   return (
     <Dialog
       maxWidth="xl"
-      title="Open protein domains from file"
+      title="Open InterProScan results"
       onClose={() => {
         handleClose()
       }}
@@ -112,16 +113,7 @@ const UserProvidedDomainsDialog = observer(function ({
                   ? JSON.parse(await file.text())
                   : await jsonfetch(interProURL)
 
-                // key each result by its xref id; a result without one has no
-                // row to attach to, and keying it `undefined` would draw a
-                // phantom row's worth of domains
-                model.setDomains(
-                  Object.fromEntries(
-                    ret.results
-                      .map(r => [r.xref[0]?.id, r] as const)
-                      .filter(e => e[0] !== undefined),
-                  ),
-                )
+                model.setAnnotations(interProScanResponseToAnnotations(ret))
                 getSession(model).notify(
                   'Loaded interproscan results',
                   'success',
@@ -143,4 +135,4 @@ const UserProvidedDomainsDialog = observer(function ({
   )
 })
 
-export default UserProvidedDomainsDialog
+export default InterProScanFileDialog

package/src/components/dialogs/TrackInfoDialog.tsx

@@ -1,11 +1,13 @@
-import React, { useState } from 'react'
+import React from 'react'
 
 import { Dialog } from '@jbrowse/core/ui'
 import { makeStyles } from '@jbrowse/core/util/tss-react'
-import { Button, DialogActions, DialogContent } from '@mui/material'
+import { Button, DialogActions, DialogContent, Typography } from '@mui/material'
 import { observer } from 'mobx-react'
 
-import copy from '../../vendor/copyToClipboard.ts'
+import CopyButton from '../CopyButton.tsx'
+
+import type { BasicTrack } from '../../types.ts'
 
 const useStyles = makeStyles()(theme => ({
   textArea: {
@@ -20,10 +22,10 @@ const TrackInfoDialog = observer(function ({
   model,
   onClose,
 }: {
-  model: { name: string; data: string }
+  model: BasicTrack['model']
   onClose: () => void
 }) {
-  const [label, setLabel] = useState('Copy to clipboard')
+  const { name, data } = model
   const { classes } = useStyles()
   return (
     <Dialog
@@ -31,23 +33,19 @@ const TrackInfoDialog = observer(function ({
       onClose={onClose}
       fullWidth
       maxWidth="lg"
-      title={`Track info - ${model.name}`}
+      title={`Track info - ${name}`}
     >
       <DialogContent>
-        <Button
-          variant="contained"
-          color="primary"
-          onClick={() => {
-            copy(model.data)
-            setLabel('Copied!')
-            setTimeout(() => {
-              setLabel('Copy to clipboard')
-            }, 300)
-          }}
-        >
-          {label}
-        </Button>
-        <pre className={classes.textArea}>{model.data}</pre>
+        {/* the bar tracks (conservation) are computed per column and carry no
+            text of their own, so there is nothing to show or copy for them */}
+        {data === undefined ? (
+          <Typography>This track has no text data.</Typography>
+        ) : (
+          <>
+            <CopyButton text={data} />
+            <pre className={classes.textArea}>{data}</pre>
+          </>
+        )}
       </DialogContent>
       <DialogActions>
         <Button variant="contained" onClick={onClose} color="secondary">

package/src/components/header/FileMenu.tsx

@@ -7,7 +7,7 @@ import Menu from '@mui/icons-material/Menu'
 import PhotoCamera from '@mui/icons-material/PhotoCamera'
 import { observer } from 'mobx-react'
 
-import { getDomainMenu } from './getDomainsMenu.ts'
+import { getAnnotationsMenu } from './getAnnotationsMenu.ts'
 
 import type { MsaViewModel } from '../../model.ts'
 
@@ -41,9 +41,9 @@ const FileMenu = observer(({ model }: { model: MsaViewModel }) => {
           },
         },
         {
-          label: 'Domain settings',
+          label: 'Annotations',
           type: 'subMenu',
-          subMenu: getDomainMenu({
+          subMenu: getAnnotationsMenu({
             model,
           }),
         },

package/src/components/header/GappynessSlider.tsx

@@ -16,8 +16,11 @@ const GappynessSlider = observer(function GappynessSlider({
   }
   return (
     <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+      {/* the threshold is inclusive: blanks are columns whose gap count is at
+          least ceil(allowedGappyness% of the rows), so at 100 it hides the
+          columns that are entirely gaps rather than nothing */}
       <Typography style={{ whiteSpace: 'nowrap' }}>
-        Hide columns w/ &gt;{allowedGappyness}% gaps
+        Hide columns w/ &ge;{allowedGappyness}% gaps
       </Typography>
       <Slider
         // Named, because the class alone is not enough to find it from outside.

package/src/components/header/{getDomainsMenu.ts → getAnnotationsMenu.ts}

@@ -9,22 +9,23 @@ import Visibility from '@mui/icons-material/Visibility'
 import type { MsaViewModel } from '../../model.ts'
 
 const FeatureFilterDialog = lazy(() => import('../dialogs/FeatureDialog.tsx'))
-const UserProvidedDomainsDialog = lazy(
-  () => import('../dialogs/UserProvidedDomainsDialog.tsx'),
+const InterProScanFileDialog = lazy(
+  () => import('../dialogs/InterProScanFileDialog.tsx'),
 )
 const InterProScanDialog = lazy(
   () => import('../dialogs/InterProScanDialog.tsx'),
 )
 
-export function getDomainMenu({ model }: { model: MsaViewModel }) {
+export function getAnnotationsMenu({ model }: { model: MsaViewModel }) {
   const { showDomains, actuallyShowDomains, subFeatureRows, noDomains } = model
+  const noneLoaded = noDomains ? ' (none loaded)' : ''
   return [
     {
-      label: 'Open domains...',
+      label: 'Open InterProScan results...',
       icon: FolderOpen,
       onClick: () => {
         model.queueDialog(handleClose => [
-          UserProvidedDomainsDialog,
+          InterProScanFileDialog,
           {
             handleClose,
             model,
@@ -33,7 +34,7 @@ export function getDomainMenu({ model }: { model: MsaViewModel }) {
       },
     },
     {
-      label: 'Query InterProScan for domains...',
+      label: 'Query InterProScan...',
       icon: Search,
       onClick: () => {
         model.queueDialog(handleClose => [
@@ -46,7 +47,7 @@ export function getDomainMenu({ model }: { model: MsaViewModel }) {
       },
     },
     {
-      label: `Show domains${noDomains ? ' (no domains loaded)' : ''}`,
+      label: `Show annotations${noneLoaded}`,
       disabled: noDomains,
       icon: Visibility,
       checked: actuallyShowDomains,
@@ -56,7 +57,7 @@ export function getDomainMenu({ model }: { model: MsaViewModel }) {
       },
     },
     {
-      label: `Use sub-row layout${noDomains ? ' (no domains loaded)' : ''}`,
+      label: `Use sub-row layout${noneLoaded}`,
       disabled: noDomains,
       checked: actuallyShowDomains ? subFeatureRows : false,
       icon: Sort,
@@ -66,7 +67,7 @@ export function getDomainMenu({ model }: { model: MsaViewModel }) {
       },
     },
     {
-      label: `Filter domains${noDomains ? ' (no domains loaded)' : ''}`,
+      label: `Filter annotations${noneLoaded}`,
       icon: FilterAlt,
       disabled: noDomains,
       onClick: () => {