react-msaview 5.10.0 → 6.1.0

package/src/components/ResizeHandles.tsx

@@ -1,48 +1,30 @@
-import React, { useCallback, useState } from 'react'
+import React, { useCallback } from 'react'
 
 import { observer } from 'mobx-react'
 
-import { useDragScroll } from '../useDragScroll.ts'
+import DragHandle from './DragHandle.tsx'
 
 import type { MsaViewModel } from '../model.ts'
-
-const handleBg = 'rgba(200,200,200)'
-const handleBgHover = 'rgba(150,150,150)'
+import type { TrackKind } from '../types.ts'
 
 export const VerticalResizeHandle = observer(function ({
   model,
 }: {
   model: MsaViewModel
 }) {
-  const { resizeHandleWidth } = model
-  const [hovered, setHovered] = useState(false)
-  const { startDrag } = useDragScroll(
-    'x',
-    useCallback(
-      (delta: number, startWidth: number) => {
-        model.setTreeAreaWidth(startWidth + delta)
-      },
-      [model],
-    ),
+  const onDrag = useCallback(
+    (delta: number, startWidth: number) => {
+      model.setTreeAreaWidth(startWidth + delta)
+    },
+    [model],
   )
-
   return (
-    <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',
-      }}
+    <DragHandle
+      axis="x"
+      variant="resizer"
+      getStart={() => model.treeAreaWidth}
+      onDrag={onDrag}
+      style={{ width: model.resizeHandleWidth }}
     />
   )
 })
@@ -52,78 +34,79 @@ 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',
-      }}
+    <DragHandle
+      axis="y"
+      variant="resizer"
+      getStart={() => model.height}
+      onDrag={onDrag}
+      style={{ width: '100%', height: model.resizeHandleWidth }}
     />
   )
 })
 
-export const ConservationTrackResizeHandle = observer(function ({
+// The height behind each resizable track kind. Both bar tracks read one height
+// so conservation and property conservation stay directly comparable; the logo
+// keeps its own, being taller by default. Text tracks are absent: they are one
+// alignment row tall and follow rowHeight, so the zoom controls already size
+// them.
+const trackHeights: Partial<
+  Record<
+    TrackKind,
+    {
+      get: (model: MsaViewModel) => number
+      set: (model: MsaViewModel, height: number) => void
+    }
+  >
+> = {
+  bar: {
+    get: model => model.conservationTrackHeight,
+    set: (model, height) => {
+      model.setConservationTrackHeight(height)
+    },
+  },
+  logo: {
+    get: model => model.sequenceLogoTrackHeight,
+    set: (model, height) => {
+      model.setSequenceLogoTrackHeight(height)
+    },
+  },
+}
+
+export const TrackResizeHandle = observer(function ({
   model,
+  kind,
 }: {
   model: MsaViewModel
+  kind: TrackKind
 }) {
-  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 height = trackHeights[kind]
+  const onDrag = useCallback(
+    (delta: number, startHeight: number) => {
+      height?.set(model, Math.max(10, startHeight + delta))
+    },
+    [model, height],
   )
-
-  return (
-    <div
-      onMouseDown={event => {
-        startDrag(event, model.conservationTrackHeight)
-      }}
-      onMouseEnter={() => {
-        setHovered(true)
-      }}
-      onMouseLeave={() => {
-        setHovered(false)
-      }}
+  return height ? (
+    <DragHandle
+      axis="y"
+      variant="resizer"
+      getStart={() => height.get(model)}
+      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,
       }}
     />
-  )
+  ) : null
 })

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/VerticalScrollbar.tsx

@@ -1,61 +1,48 @@
-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 DragHandle from './DragHandle.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
+      <DragHandle
+        axis="y"
+        variant="thumb"
+        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/InterProScanDialog.tsx

@@ -10,6 +10,57 @@ import { launchInterProScan } from '../../launchInterProScan.ts'
 
 import type { MsaViewModel } from '../../model.ts'
 
+const FAMILIES = 'Families, domains, sites & repeats'
+const FEATURES = 'Other sequence features'
+const STRUCTURAL = 'Structural domains'
+const OTHER = 'Other category'
+
+// The analyses the EBI iprscan5 endpoint accepts, all on by default. Static, so
+// it lives out here rather than being rebuilt on every render of the dialog.
+const interProScanPrograms = [
+  {
+    name: 'NCBIfam',
+    category: FAMILIES,
+    description: 'NCBI RefSeq FAMs including TIGRFAMs',
+  },
+  {
+    name: 'SFLD',
+    category: FAMILIES,
+    description: 'Structure function linkage database',
+  },
+  {
+    name: 'Phobius',
+    category: FEATURES,
+    description:
+      'A combined transmembrane topology and signal peptide predictor',
+  },
+  { name: 'SignalP', category: FEATURES },
+  { name: 'SignalP_EUK', category: OTHER },
+  { name: 'SignalP_GRAM_POSITIVE', category: OTHER },
+  { name: 'SignalP_GRAM_NEGATIVE', category: OTHER },
+  { name: 'SuperFamily', category: STRUCTURAL },
+  { name: 'Panther', category: FAMILIES },
+  { name: 'Gene3d', category: STRUCTURAL },
+  { name: 'HAMAP', category: FAMILIES },
+  { name: 'PrositeProfiles', category: FAMILIES },
+  { name: 'PrositePatterns', category: FAMILIES },
+  { name: 'Coils', category: FEATURES },
+  { name: 'SMART', category: FAMILIES },
+  {
+    name: 'CDD',
+    category: FAMILIES,
+    description: 'Conserved Domains Database',
+  },
+  { name: 'PRINTS', category: FAMILIES },
+  { name: 'PfamA', category: FAMILIES },
+  { name: 'MobiDBLite', category: FEATURES },
+  { name: 'PIRSF', category: OTHER },
+  { name: 'TMHMM', category: FEATURES },
+  { name: 'AntiFam', category: OTHER },
+  { name: 'FunFam', category: OTHER },
+  { name: 'PIRSR', category: FAMILIES },
+].map(program => ({ ...program, checked: true }))
+
 const InterProScanDialog = observer(function ({
   handleClose,
   model,
@@ -17,134 +68,7 @@ const InterProScanDialog = observer(function ({
   handleClose: () => void
   model: MsaViewModel
 }) {
-  const [vals, setVals] = useState([
-    {
-      name: 'NCBIfam',
-      description: 'NCBI RefSeq FAMs including TIGRFAMs',
-      category: 'Families, domains, sites & repeats',
-      checked: true,
-    },
-    {
-      name: 'SFLD',
-      description: 'Structure function linkage database',
-      category: 'Families, domains, sites & repeats',
-      checked: true,
-    },
-    {
-      name: 'Phobius',
-      checked: true,
-      description:
-        'A combined transmembrane topology and signal peptide predictor',
-      category: 'Other sequence features',
-    },
-    {
-      name: 'SignalP',
-      checked: true,
-      category: 'Other sequence features',
-    },
-    {
-      name: 'SignalP_EUK',
-      category: 'Other category',
-      checked: true,
-    },
-    {
-      name: 'SignalP_GRAM_POSITIVE',
-      category: 'Other category',
-      checked: true,
-    },
-    {
-      name: 'SignalP_GRAM_NEGATIVE',
-      checked: true,
-      category: 'Other category',
-    },
-    {
-      name: 'SuperFamily',
-      category: 'Structural domains',
-      checked: true,
-    },
-    {
-      name: 'Panther',
-      category: 'Families, domains, sites & repeats',
-      checked: true,
-    },
-    {
-      name: 'Gene3d',
-      category: 'Structural domains',
-      checked: true,
-    },
-    {
-      name: 'HAMAP',
-      category: 'Families, domains, sites & repeats',
-      checked: true,
-    },
-    {
-      name: 'PrositeProfiles',
-      category: 'Families, domains, sites & repeats',
-      checked: true,
-    },
-    {
-      name: 'PrositePatterns',
-      category: 'Families, domains, sites & repeats',
-      checked: true,
-    },
-    {
-      name: 'Coils',
-      category: 'Other sequence features',
-      checked: true,
-    },
-    {
-      name: 'SMART',
-      category: 'Families, domains, sites & repeats',
-      checked: true,
-    },
-    {
-      name: 'CDD',
-      description: 'Conserved Domains Database',
-      category: 'Families, domains, sites & repeats',
-      checked: true,
-    },
-    {
-      name: 'PRINTS',
-      category: 'Families, domains, sites & repeats',
-      checked: true,
-    },
-    {
-      name: 'PfamA',
-      category: 'Families, domains, sites & repeats',
-      checked: true,
-    },
-    {
-      name: 'MobiDBLite',
-      checked: true,
-      category: 'Other sequence features',
-    },
-    {
-      name: 'PIRSF',
-      checked: true,
-      category: 'Other category',
-    },
-    {
-      name: 'TMHMM',
-      checked: true,
-      category: 'Other sequence features',
-    },
-
-    {
-      name: 'AntiFam',
-      checked: true,
-      category: 'Other category',
-    },
-    {
-      name: 'FunFam',
-      checked: true,
-      category: 'Other category',
-    },
-    {
-      name: 'PIRSR',
-      checked: true,
-      category: 'Families, domains, sites & repeats',
-    },
-  ])
+  const [vals, setVals] = useState(interProScanPrograms)
 
   const programs = vals.filter(e => e.checked).map(e => e.name)
   const [show, setShow] = useState(false)
@@ -197,12 +121,11 @@ const InterProScanDialog = observer(function ({
               <tbody>
                 {vals
                   .toSorted((a, b) => a.category.localeCompare(b.category))
-                  .map(({ name, checked, category }) => (
+                  .map(({ name, checked, category, description }) => (
                     <tr key={name}>
                       <td>
                         <input
                           type="checkbox"
-                          key={name}
                           checked={checked}
                           onChange={() => {
                             setVals(
@@ -215,7 +138,7 @@ const InterProScanDialog = observer(function ({
                           }}
                         />
                       </td>
-                      <td>{name}</td>
+                      <td title={description}>{name}</td>
                       <td>{category}</td>
                     </tr>
                   ))}

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">