react-msaview 5.0.13 → 5.1.0

package/src/clustalX.ts

@@ -0,0 +1,131 @@
+// ClustalX consensus coloring.
+// ref http://www.jalview.org/help/html/colourSchemes/clustal.html
+
+const BLUE = 'rgb(128,179,230)'
+const RED = '#d88'
+const MAGENTA_E = 'rgb(192, 72, 192)'
+const MAGENTA_D = 'rgb(204, 77, 204)'
+const GREEN = '#8f8'
+const GREEN_ST = 'rgb(26,204,26)'
+const PINK = 'rgb(240, 128, 128)'
+const ORANGE = 'rgb(240, 144, 72)'
+const YELLOW = 'rgb(204, 204, 0)'
+const CYAN = 'rgb(26, 179, 179)'
+
+/**
+ * Computes the ClustalX letter->color map for a single alignment column given
+ * its residue counts (`stats`) and total residue count (`total`).
+ */
+export function clustalXColumnColors(
+  stats: Record<string, number>,
+  total: number,
+) {
+  const {
+    W = 0,
+    L = 0,
+    V = 0,
+    I = 0,
+    M = 0,
+    A = 0,
+    F = 0,
+    C = 0,
+    H = 0,
+    P = 0,
+    R = 0,
+    K = 0,
+    Q = 0,
+    E = 0,
+    D = 0,
+    T = 0,
+    S = 0,
+    G = 0,
+    Y = 0,
+    N = 0,
+  } = stats
+
+  const hydrophobic = W + L + V + I + M + A + F + C + H + P + Y
+  const KR = K + R
+  const QE = Q + E
+  const ED = E + D
+  const TS = T + S
+  const p = (n: number) => n / total
+
+  const colors: Record<string, string> = {}
+
+  if (p(hydrophobic) > 0.6) {
+    colors.W = BLUE
+    colors.L = BLUE
+    colors.V = BLUE
+    colors.A = BLUE
+    colors.I = BLUE
+    colors.M = BLUE
+    colors.F = BLUE
+    colors.C = BLUE
+  }
+
+  if (p(KR) > 0.6 || p(K) > 0.8 || p(R) > 0.8 || p(Q) > 0.8) {
+    colors.K = RED
+    colors.R = RED
+  }
+
+  if (p(KR) > 0.6 || p(QE) > 0.5 || p(E) > 0.8 || p(Q) > 0.8 || p(D) > 0.8) {
+    colors.E = MAGENTA_E
+  }
+
+  if (p(KR) > 0.6 || p(ED) > 0.5 || p(K) > 0.8 || p(R) > 0.8 || p(Q) > 0.8) {
+    colors.D = MAGENTA_D
+  }
+
+  if (p(N) > 0.5 || p(Y) > 0.85) {
+    colors.N = GREEN
+  }
+
+  if (
+    p(KR) > 0.6 ||
+    p(QE) > 0.6 ||
+    p(Q) > 0.85 ||
+    p(E) > 0.85 ||
+    p(K) > 0.85 ||
+    p(R) > 0.85
+  ) {
+    colors.Q = GREEN
+  }
+
+  if (p(hydrophobic) > 0.6 || p(TS) > 0.5 || p(S) > 0.85 || p(T) > 0.85) {
+    colors.S = GREEN_ST
+    colors.T = GREEN_ST
+  }
+
+  if (p(C) > 0.85) {
+    colors.C = PINK
+  }
+
+  if (G > 0) {
+    colors.G = ORANGE
+  }
+
+  if (P > 0) {
+    colors.P = YELLOW
+  }
+
+  if (
+    p(hydrophobic) > 0.6 ||
+    p(W) > 0.85 ||
+    p(Y) > 0.85 ||
+    p(A) > 0.85 ||
+    p(C) > 0.85 ||
+    p(P) > 0.85 ||
+    p(Q) > 0.85 ||
+    p(F) > 0.85 ||
+    p(H) > 0.85 ||
+    p(I) > 0.85 ||
+    p(L) > 0.85 ||
+    p(M) > 0.85 ||
+    p(V) > 0.85
+  ) {
+    colors.H = CYAN
+    colors.Y = CYAN
+  }
+
+  return colors
+}

package/src/components/SequenceTextArea.tsx

@@ -27,8 +27,8 @@ export default function SequenceTextArea({ str }: { str: [string, string][] }) {
   const removeGaps = (s: string) => s.replaceAll('-', '').replaceAll('.', '')
   const disp = str
     .map(([s1, s2]) => [s1, showGaps ? s2 : removeGaps(s2)] as const)
-    .filter(f => (showEmpty ? true : !!f[1]))
-    .map(([s1, s2]) => `>${s1}\n${showGaps ? s2 : removeGaps(s2)}`)
+    .filter(([, s2]) => showEmpty || !!s2)
+    .map(([s1, s2]) => `>${s1}\n${s2}`)
     .join('\n')
   return (
     <>
@@ -67,10 +67,10 @@ export default function SequenceTextArea({ str }: { str: [string, string][] }) {
         maxRows={10}
         fullWidth
         value={disp}
-        InputProps={{
-          readOnly: true,
-          classes: {
-            input: classes.textAreaFont,
+        slotProps={{
+          input: {
+            readOnly: true,
+            className: classes.textAreaFont,
           },
         }}
       />

package/src/components/TextTrack.tsx

@@ -1,9 +1,8 @@
-import React, { useEffect, useMemo, useRef } from 'react'
+import React, { useEffect, useRef } from 'react'
 
-import { useTheme } from '@mui/material'
 import { observer } from 'mobx-react'
 
-import { colorContrast } from '../util.ts'
+import { useColorContrast } from '../useColorContrast.ts'
 import { drawTextTrackContent } from './tracks/renderTracksSvg.ts'
 
 import type { MsaViewModel } from '../model.ts'
@@ -33,12 +32,8 @@ const AnnotationBlock = observer(function ({
   } = track
 
   const colorScheme = customColorScheme || modelColorScheme
-  const theme = useTheme()
   const ref = useRef<HTMLCanvasElement>(null)
-  const contrastScheme = useMemo(
-    () => colorContrast(colorScheme, theme),
-    [colorScheme, theme],
-  )
+  const { contrastScheme } = useColorContrast(colorScheme)
   useEffect(() => {
     if (!ref.current) {
       return

package/src/components/Track.tsx

@@ -8,6 +8,7 @@ import { makeStyles } from 'tss-react/mui'
 import { useWheelScroll } from '../useWheelScroll.ts'
 
 import type { MsaViewModel } from '../model.ts'
+import type { BasicTrack } from '../types.ts'
 
 const TrackInfoDialog = lazy(() => import('./dialogs/TrackInfoDialog.tsx'))
 
@@ -22,7 +23,7 @@ const TrackLabel = observer(function TrackLabel({
   track,
 }: {
   model: MsaViewModel
-  track: any
+  track: BasicTrack
 }) {
   const [anchorEl, setAnchorEl] = useState<HTMLButtonElement>()
   const { drawLabels, rowHeight, treeAreaWidth: width } = model
@@ -96,11 +97,11 @@ const Track = observer(function ({
   track,
 }: {
   model: MsaViewModel
-  track: any
+  track: BasicTrack
 }) {
   const { resizeHandleWidth, colWidth, scrollX, numColumns } = model
   const {
-    model: { height, error },
+    model: { height },
   } = track
   const ref = useRef<HTMLDivElement>(null)
   const onScrollX = useCallback(
@@ -112,7 +113,7 @@ const Track = observer(function ({
   useWheelScroll({ ref, onScrollX })
 
   return (
-    <div key={track.id} style={{ display: 'flex', height }}>
+    <div style={{ display: 'flex', height }}>
       <TrackLabel model={model} track={track} />
       <div style={{ width: resizeHandleWidth, flexShrink: 0 }} />
       <div
@@ -134,11 +135,7 @@ const Track = observer(function ({
           model.setMousePos(undefined, undefined)
         }}
       >
-        {error ? (
-          <div style={{ color: 'red', fontSize: 10 }}>{`${error}`}</div>
-        ) : (
-          <track.ReactComponent model={model} track={track} />
-        )}
+        <track.ReactComponent model={model} track={track} />
       </div>
     </div>
   )

package/src/components/VerticalScrollbar.tsx

@@ -1,54 +1,30 @@
-import React, { useEffect, useRef, useState } from 'react'
+import React, { useCallback, useState } from 'react'
 
 import { clamp } from '@jbrowse/core/util'
 import { observer } from 'mobx-react'
 
+import { useDragScroll } from '../useDragScroll.ts'
+
 import type { MsaViewModel } from '../model.ts'
 
 const VerticalScrollbar = observer(({ model }: { model: MsaViewModel }) => {
   const { msaAreaHeight, scrollY, totalHeight } = model
   const [hovered, setHovered] = useState(false)
-  const scheduled = useRef(false)
-  const [mouseDown, setMouseDown] = useState<{
-    clientY: number
-    scrollY: number
-  }>()
   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
-  useEffect(() => {
-    function fn(event: MouseEvent) {
-      if (mouseDown !== undefined) {
-        if (!scheduled.current) {
-          scheduled.current = true
-          window.requestAnimationFrame(() => {
-            model.setScrollY(
-              clamp(
-                mouseDown.scrollY - (event.clientY - mouseDown.clientY) / unit,
-                -totalHeight,
-                0,
-              ),
-            )
-            scheduled.current = false
-          })
-        }
-      }
-    }
-    function fn2() {
-      setMouseDown(undefined)
-    }
-    if (mouseDown !== undefined) {
-      document.addEventListener('mousemove', fn)
-      document.addEventListener('mouseup', fn2)
-      return () => {
-        document.removeEventListener('mousemove', fn)
-        document.removeEventListener('mousemove', fn2)
-      }
-    }
-  }, [model, unit, totalHeight, mouseDown])
+  const { startDrag } = useDragScroll(
+    'y',
+    useCallback(
+      (delta: number, startScroll: number) => {
+        model.setScrollY(clamp(startScroll - delta / unit, -totalHeight, 0))
+      },
+      [model, unit, totalHeight],
+    ),
+  )
   return (
     <div
       style={{
@@ -79,10 +55,7 @@ const VerticalScrollbar = observer(({ model }: { model: MsaViewModel }) => {
           setHovered(false)
         }}
         onMouseDown={event => {
-          setMouseDown({
-            clientY: event.clientY,
-            scrollY: model.scrollY,
-          })
+          startDrag(event, model.scrollY)
         }}
       />
     </div>

package/src/components/dialogs/InterProScanDialog.tsx

@@ -237,6 +237,7 @@ const InterProScanDialog = observer(function ({
           variant="contained"
           color="primary"
           onClick={() => {
+            const controller = new AbortController()
             // eslint-disable-next-line @typescript-eslint/no-floating-promises
             ;(async () => {
               try {
@@ -255,9 +256,14 @@ const InterProScanDialog = observer(function ({
                     .map(row => `>${row[0]}\n${row[1]}`)
                     .join('\n'),
                   onProgress: arg => {
-                    model.setStatus(arg)
+                    model.setStatus(
+                      arg
+                        ? { ...arg, onCancel: () => { controller.abort() } }
+                        : undefined,
+                    )
                   },
                   model,
+                  signal: controller.signal,
                 })
               } catch (e) {
                 console.error(e)

package/src/components/header/HeaderStatusArea.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 
 import { LoadingEllipses } from '@jbrowse/core/ui'
-import { Typography } from '@mui/material'
+import { Button, Typography } from '@mui/material'
 import { observer } from 'mobx-react'
 import { makeStyles } from 'tss-react/mui'
 
@@ -24,6 +24,11 @@ const HeaderStatusArea = observer(({ model }: { model: MsaViewModel }) => {
         <a href={status.url} target="_blank" rel="noreferrer">
           (status)
         </a>
+      ) : null}{' '}
+      {status.onCancel ? (
+        <Button size="small" onClick={() => status.onCancel?.()}>
+          Cancel
+        </Button>
       ) : null}
     </Typography>
   ) : null

package/src/components/header/MSASettingsMenu.tsx

@@ -4,41 +4,17 @@ import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton'
 import Tune from '@mui/icons-material/Tune'
 import { observer } from 'mobx-react'
 
+import { msaSettingsMenuItems } from './settingsMenuItems.ts'
+
 import type { MsaViewModel } from '../../model.ts'
 
 const MSASettingsMenu = observer(function ({ model }: { model: MsaViewModel }) {
-  const { drawMsaLetters, hideGaps, bgColor } = model
   return (
     <CascadingMenuButton
       closeAfterItemClick={false}
       anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
       transformOrigin={{ vertical: 'top', horizontal: 'left' }}
-      menuItems={[
-        {
-          label: 'Draw letters',
-          type: 'checkbox',
-          checked: drawMsaLetters,
-          onClick: () => {
-            model.setDrawMsaLetters(!drawMsaLetters)
-          },
-        },
-        {
-          label: 'Color letters instead of background of tiles',
-          type: 'checkbox',
-          checked: !bgColor,
-          onClick: () => {
-            model.setBgColor(!bgColor)
-          },
-        },
-        {
-          label: 'Enable hiding gappy columns?',
-          type: 'checkbox',
-          checked: hideGaps,
-          onClick: () => {
-            model.setHideGaps(!hideGaps)
-          },
-        },
-      ]}
+      menuItems={msaSettingsMenuItems(model)}
     >
       <Tune />
     </CascadingMenuButton>

package/src/components/header/SettingsMenu.tsx

@@ -6,22 +6,16 @@ import Palette from '@mui/icons-material/Palette'
 import Settings from '@mui/icons-material/Settings'
 import { observer } from 'mobx-react'
 
+import {
+  msaSettingsMenuItems,
+  treeSettingsMenuItems,
+} from './settingsMenuItems.ts'
 import colorSchemes from '../../colorSchemes.ts'
 
 import type { MsaViewModel } from '../../model.ts'
 
 const SettingsMenu = observer(function ({ model }: { model: MsaViewModel }) {
-  const {
-    colorSchemeName,
-    drawMsaLetters,
-    hideGaps,
-    bgColor,
-    drawTree,
-    showBranchLen,
-    labelsAlignRight,
-    drawNodeBubbles,
-    drawLabels,
-  } = model
+  const { colorSchemeName } = model
   return (
     <CascadingMenuButton
       closeAfterItemClick={false}
@@ -45,79 +39,13 @@ const SettingsMenu = observer(function ({ model }: { model: MsaViewModel }) {
         {
           label: 'MSA settings',
           type: 'subMenu',
-          subMenu: [
-            {
-              label: 'Draw letters',
-              type: 'checkbox',
-              checked: drawMsaLetters,
-              onClick: () => {
-                model.setDrawMsaLetters(!drawMsaLetters)
-              },
-            },
-            {
-              label: 'Color letters instead of background of tiles',
-              type: 'checkbox',
-              checked: !bgColor,
-              onClick: () => {
-                model.setBgColor(!bgColor)
-              },
-            },
-            {
-              label: 'Enable hiding gappy columns?',
-              type: 'checkbox',
-              checked: hideGaps,
-              onClick: () => {
-                model.setHideGaps(!hideGaps)
-              },
-            },
-          ],
+          subMenu: msaSettingsMenuItems(model),
         },
         {
           label: 'Tree settings',
           type: 'subMenu',
           icon: AccountTree,
-          subMenu: [
-            {
-              label: 'Show branch length',
-              type: 'checkbox',
-              checked: showBranchLen,
-              onClick: () => {
-                model.setShowBranchLen(!showBranchLen)
-              },
-            },
-            {
-              label: 'Show tree',
-              type: 'checkbox',
-              checked: drawTree,
-              onClick: () => {
-                model.setDrawTree(!drawTree)
-              },
-            },
-            {
-              label: 'Draw clickable bubbles on tree branches',
-              type: 'checkbox',
-              checked: drawNodeBubbles,
-              onClick: () => {
-                model.setDrawNodeBubbles(!drawNodeBubbles)
-              },
-            },
-            {
-              label: 'Tree labels align right',
-              type: 'checkbox',
-              checked: labelsAlignRight,
-              onClick: () => {
-                model.setLabelsAlignRight(!labelsAlignRight)
-              },
-            },
-            {
-              label: 'Draw labels',
-              type: 'checkbox',
-              checked: drawLabels,
-              onClick: () => {
-                model.setDrawLabels(!drawLabels)
-              },
-            },
-          ],
+          subMenu: treeSettingsMenuItems(model),
         },
       ]}
     >

package/src/components/header/TreeSettingsMenu.tsx

@@ -4,6 +4,8 @@ import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton'
 import AccountTree from '@mui/icons-material/AccountTree'
 import { observer } from 'mobx-react'
 
+import { treeSettingsMenuItems } from './settingsMenuItems.ts'
+
 import type { MsaViewModel } from '../../model.ts'
 
 const TreeSettingsMenu = observer(function ({
@@ -11,60 +13,14 @@ const TreeSettingsMenu = observer(function ({
 }: {
   model: MsaViewModel
 }) {
-  const {
-    drawTree,
-    showBranchLen,
-    labelsAlignRight,
-    drawNodeBubbles,
-    drawLabels,
-    rows,
-  } = model
+  const { rows } = model
   return (
     <CascadingMenuButton
       closeAfterItemClick={false}
       anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
       transformOrigin={{ vertical: 'top', horizontal: 'left' }}
       menuItems={[
-        {
-          label: 'Show branch length',
-          type: 'checkbox',
-          checked: showBranchLen,
-          onClick: () => {
-            model.setShowBranchLen(!showBranchLen)
-          },
-        },
-        {
-          label: 'Show tree',
-          type: 'checkbox',
-          checked: drawTree,
-          onClick: () => {
-            model.setDrawTree(!drawTree)
-          },
-        },
-        {
-          label: 'Draw clickable bubbles on tree branches',
-          type: 'checkbox',
-          checked: drawNodeBubbles,
-          onClick: () => {
-            model.setDrawNodeBubbles(!drawNodeBubbles)
-          },
-        },
-        {
-          label: 'Tree labels align right',
-          type: 'checkbox',
-          checked: labelsAlignRight,
-          onClick: () => {
-            model.setLabelsAlignRight(!labelsAlignRight)
-          },
-        },
-        {
-          label: 'Draw labels',
-          type: 'checkbox',
-          checked: drawLabels,
-          onClick: () => {
-            model.setDrawLabels(!drawLabels)
-          },
-        },
+        ...treeSettingsMenuItems(model),
         ...(rows.length >= 2
           ? [
               {

package/src/components/header/settingsMenuItems.ts

@@ -0,0 +1,68 @@
+import type { MsaViewModel } from '../../model.ts'
+import type { MenuItem } from '@jbrowse/core/ui/Menu'
+
+export function msaSettingsMenuItems(model: MsaViewModel): MenuItem[] {
+  const { drawMsaLetters, hideGaps, bgColor } = model
+  return [
+    {
+      label: 'Draw letters',
+      type: 'checkbox',
+      checked: drawMsaLetters,
+      onClick: () => { model.setDrawMsaLetters(!drawMsaLetters) },
+    },
+    {
+      label: 'Color letters instead of background of tiles',
+      type: 'checkbox',
+      checked: !bgColor,
+      onClick: () => { model.setBgColor(!bgColor) },
+    },
+    {
+      label: 'Enable hiding gappy columns?',
+      type: 'checkbox',
+      checked: hideGaps,
+      onClick: () => { model.setHideGaps(!hideGaps) },
+    },
+  ]
+}
+
+export function treeSettingsMenuItems(model: MsaViewModel): MenuItem[] {
+  const {
+    drawTree,
+    showBranchLen,
+    labelsAlignRight,
+    drawNodeBubbles,
+    drawLabels,
+  } = model
+  return [
+    {
+      label: 'Show branch length',
+      type: 'checkbox',
+      checked: showBranchLen,
+      onClick: () => { model.setShowBranchLen(!showBranchLen) },
+    },
+    {
+      label: 'Show tree',
+      type: 'checkbox',
+      checked: drawTree,
+      onClick: () => { model.setDrawTree(!drawTree) },
+    },
+    {
+      label: 'Draw clickable bubbles on tree branches',
+      type: 'checkbox',
+      checked: drawNodeBubbles,
+      onClick: () => { model.setDrawNodeBubbles(!drawNodeBubbles) },
+    },
+    {
+      label: 'Tree labels align right',
+      type: 'checkbox',
+      checked: labelsAlignRight,
+      onClick: () => { model.setLabelsAlignRight(!labelsAlignRight) },
+    },
+    {
+      label: 'Draw labels',
+      type: 'checkbox',
+      checked: drawLabels,
+      onClick: () => { model.setDrawLabels(!drawLabels) },
+    },
+  ]
+}

package/src/components/import/ImportFormExamples.tsx

@@ -27,7 +27,7 @@ function ListItem({
         }}
         href="#"
       >
-        <Typography display="inline">{children}</Typography>
+        <Typography component="span">{children}</Typography>
       </Link>
     </li>
   )