react-msaview 4.4.5 → 4.5.0

package/src/colorSchemes.ts

@@ -2,7 +2,7 @@ import { blue, green, orange, red } from '@mui/material/colors'
 import { colord, extend } from 'colord'
 import namesPlugin from 'colord/plugins/names'
 
-import { isBlank, transform } from './util'
+import { transform } from './util'
 
 extend([namesPlugin])
 
@@ -353,181 +353,3 @@ export default transform(colorSchemes, ([key, val]) => [
   key,
   transform(val, ([letter, color]) => [letter, colord(color).toHex()]),
 ])
-
-// info http://www.jalview.org/help/html/colourSchemes/clustal.html
-// modifications:
-// reference to clustalX source code scheme modifies what the jalview.org
-// scheme says there the jalview.org colorscheme says WLVIMAFCHP but it
-// should be WLVIMAFCHPY, colprot.xml says e.g. %#ACFHILMVWYPp" which has Y
-export function getClustalXColor(
-  stats: Record<string, number>,
-  total: number,
-  model: { columns: Record<string, string> },
-  row: string,
-  col: number,
-) {
-  const l = model.columns[row]![col]!
-  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 WLVIMAFCHP = 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
-
-  if (WLVIMAFCHP / total > 0.6) {
-    if (
-      l === 'W' ||
-      l === 'L' ||
-      l === 'V' ||
-      l === 'A' ||
-      l === 'I' ||
-      l === 'M' ||
-      l === 'F' ||
-      l === 'C'
-    ) {
-      // blue from jalview.org docs
-      return 'rgb(128,179,230)'
-    }
-  }
-
-  if (
-    (l === 'K' || l === 'R') &&
-    (KR / total > 0.6 || K / total > 0.8 || R / total > 0.8 || Q / total > 0.8)
-  ) {
-    return '#d88'
-  }
-
-  if (
-    l === 'E' &&
-    (KR / total > 0.6 ||
-      QE / total > 0.5 ||
-      E / total > 0.8 ||
-      Q / total > 0.8 ||
-      D / total > 0.8)
-  ) {
-    return 'rgb(192, 72, 192)'
-  }
-
-  if (
-    l === 'D' &&
-    (KR / total > 0.6 ||
-      ED / total > 0.5 ||
-      K / total > 0.8 ||
-      R / total > 0.8 ||
-      Q / total > 0.8)
-  ) {
-    return 'rgb(204, 77, 204)'
-  }
-
-  if (l === 'N' && (N / total > 0.5 || Y / total > 0.85)) {
-    return '#8f8'
-  }
-  if (
-    l === 'Q' &&
-    (KR / total > 0.6 ||
-      QE / total > 0.6 ||
-      Q / total > 0.85 ||
-      E / total > 0.85 ||
-      K / total > 0.85 ||
-      R / total > 0.85)
-  ) {
-    return '#8f8'
-  }
-
-  if (
-    (l === 'S' || l === 'T') &&
-    // WLVIMAFCHP modified from 0.6 to 0.55 on page to match what i see in jalview
-    (WLVIMAFCHP / total > 0.6 ||
-      TS / total > 0.5 ||
-      S / total > 0.85 ||
-      T / total > 0.85)
-  ) {
-    return 'rgb(26,204,26)'
-  }
-
-  if (l === 'C' && C / total > 0.85) {
-    return 'rgb(240, 128, 128)'
-  }
-
-  if (l === 'G' && G / total > 0) {
-    return 'rgb(240, 144, 72)'
-  }
-  if (l === 'P' && P / total > 0) {
-    return 'rgb(204, 204, 0)'
-  }
-
-  if (
-    (l === 'H' || l === 'Y') &&
-    (WLVIMAFCHP / total > 0.6 ||
-      W > 0.85 ||
-      Y > 0.85 ||
-      A > 0.85 ||
-      C > 0.85 ||
-      P > 0.85 ||
-      Q > 0.85 ||
-      F > 0.85 ||
-      H > 0.85 ||
-      I > 0.85 ||
-      L > 0.85 ||
-      M > 0.85 ||
-      V > 0.85)
-  ) {
-    // cyan from jalview.org docs
-    return 'rgb(26, 179, 179)'
-  }
-  return undefined
-}
-
-// info http://www.jalview.org/help/html/colourSchemes/clustal.html
-// modifications:
-// reference to clustalX source code scheme modifies what the jalview.org
-// scheme says there the jalview.org colorscheme says WLVIMAFCHP but it should
-// be WLVIMAFCHPY, colprot.xml says e.g. %#ACFHILMVWYPp" which has Y
-export function getPercentIdentityColor(
-  stats: Record<string, number>,
-  total: number,
-  model: { columns: Record<string, string> },
-  row: string,
-  col: number,
-) {
-  const l = model.columns[row]![col]!
-  const entries = Object.entries(stats)
-  let ent = 0
-  let letter = ''
-  for (const entry of entries) {
-    if (entry[1] > ent && !isBlank(entry[0])) {
-      letter = entry[0]
-      ent = entry[1]
-    }
-  }
-  const proportion = ent / total
-  const thresh = `hsl(240, 30%, ${100 * Math.max(1 - ent / total / 3, 0.3)}%)`
-  if (proportion > 0.4) {
-    if (l === letter) {
-      return thresh
-    }
-  }
-}

package/src/components/ConservationTrack.tsx

@@ -0,0 +1,104 @@
+import React, { useEffect, useRef } from 'react'
+
+import { observer } from 'mobx-react'
+
+import type { MsaViewModel } from '../model'
+import type { BasicTrack } from '../types'
+
+const ConservationBlock = observer(function ({
+  model,
+  offsetX,
+  trackHeight,
+}: {
+  model: MsaViewModel
+  offsetX: number
+  trackHeight: number
+}) {
+  const { blockSize, scrollX, colWidth, highResScaleFactor, conservation } =
+    model
+
+  const ref = useRef<HTMLCanvasElement>(null)
+
+  useEffect(() => {
+    if (!ref.current) {
+      return
+    }
+
+    const ctx = ref.current.getContext('2d')
+    if (!ctx) {
+      return
+    }
+
+    ctx.resetTransform()
+    ctx.scale(highResScaleFactor, highResScaleFactor)
+    ctx.clearRect(0, 0, blockSize, trackHeight)
+    ctx.translate(-offsetX, 0)
+
+    const xStart = Math.max(0, Math.floor(offsetX / colWidth))
+    const xEnd = Math.max(0, Math.ceil((offsetX + blockSize) / colWidth))
+
+    for (let i = xStart; i < xEnd && i < conservation.length; i++) {
+      const value = conservation[i]!
+      const barHeight = value * trackHeight
+      const x = i * colWidth
+
+      const hue = value * 120
+      ctx.fillStyle = `hsl(${hue}, 70%, 50%)`
+      ctx.fillRect(x, trackHeight - barHeight, colWidth, barHeight)
+    }
+  }, [
+    blockSize,
+    colWidth,
+    trackHeight,
+    offsetX,
+    highResScaleFactor,
+    conservation,
+  ])
+
+  return (
+    <canvas
+      ref={ref}
+      height={trackHeight * highResScaleFactor}
+      width={blockSize * highResScaleFactor}
+      style={{
+        position: 'absolute',
+        left: scrollX + offsetX,
+        width: blockSize,
+        height: trackHeight,
+      }}
+    />
+  )
+})
+
+const ConservationTrack = observer(function ({
+  model,
+  track,
+}: {
+  model: MsaViewModel
+  track: BasicTrack
+}) {
+  const { blocksX, msaAreaWidth } = model
+  const trackHeight = track.model.height
+
+  return (
+    <div
+      style={{
+        position: 'relative',
+        height: trackHeight,
+        width: msaAreaWidth,
+        overflow: 'hidden',
+      }}
+    >
+      {blocksX.map(bx => (
+        <ConservationBlock
+          key={bx}
+          model={model}
+          offsetX={bx}
+          trackHeight={trackHeight}
+        />
+      ))}
+    </div>
+  )
+})
+
+export default ConservationTrack

package/src/components/Loading.tsx

@@ -10,6 +10,45 @@ import ImportForm from './import/ImportForm'
 
 import type { MsaViewModel } from '../model'
 
+function LoadingSpinner() {
+  return (
+    <div
+      style={{ display: 'flex', alignItems: 'center', gap: 12, padding: 20 }}
+    >
+      <svg
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <style>
+          {`@keyframes spinner { to { transform: rotate(360deg); } }`}
+        </style>
+        <circle
+          cx="12"
+          cy="12"
+          r="10"
+          stroke="#ccc"
+          strokeWidth="3"
+          fill="none"
+        />
+        <path
+          d="M12 2a10 10 0 0 1 10 10"
+          stroke="#1976d2"
+          strokeWidth="3"
+          fill="none"
+          strokeLinecap="round"
+          style={{
+            animation: 'spinner 1s linear infinite',
+            transformOrigin: 'center',
+          }}
+        />
+      </svg>
+      <Typography variant="h6">Loading...</Typography>
+    </div>
+  )
+}
+
 const Reset = observer(function ({
   model,
   error,
@@ -34,7 +73,8 @@ const Reset = observer(function ({
 })
 
 const Loading = observer(function ({ model }: { model: MsaViewModel }) {
-  const { isLoading, dataInitialized } = model
+  const { isLoading, dataInitialized, msaFilehandle, treeFilehandle } = model
+  const hasPendingFilehandle = !!(msaFilehandle || treeFilehandle)
 
   return (
     <div>
@@ -43,10 +83,12 @@ const Loading = observer(function ({ model }: { model: MsaViewModel }) {
       >
         {dataInitialized ? (
           isLoading ? (
-            <Typography variant="h4">Loading...</Typography>
+            <LoadingSpinner />
           ) : (
             <MSAView model={model} />
           )
+        ) : hasPendingFilehandle || isLoading ? (
+          <LoadingSpinner />
         ) : (
           <ImportForm model={model} />
         )}

package/src/components/MSAView.tsx

@@ -3,6 +3,7 @@ import React, { Suspense } from 'react'
 import { observer } from 'mobx-react'
 
 import { HorizontalResizeHandle, VerticalResizeHandle } from './ResizeHandles'
+import Track from './Track'
 import VerticalScrollbar from './VerticalScrollbar'
 import Header from './header/Header'
 import Minimap from './minimap/Minimap'
@@ -22,6 +23,72 @@ const TopArea = observer(function ({ model }: { model: MsaViewModel }) {
   )
 })
 
+const TrackColumnIndicator = observer(function ({
+  model,
+}: {
+  model: MsaViewModel
+}) {
+  const {
+    mouseCol,
+    mouseClickCol,
+    colWidth,
+    scrollX,
+    treeAreaWidth,
+    resizeHandleWidth,
+    totalTrackAreaHeight,
+  } = model
+
+  const left = treeAreaWidth + resizeHandleWidth
+
+  return (
+    <>
+      {mouseCol !== undefined ? (
+        <div
+          style={{
+            position: 'absolute',
+            left: left + mouseCol * colWidth + scrollX,
+            top: 0,
+            width: colWidth,
+            height: totalTrackAreaHeight,
+            backgroundColor: 'rgba(0,0,0,0.15)',
+            pointerEvents: 'none',
+            zIndex: 100,
+          }}
+        />
+      ) : null}
+      {mouseClickCol !== undefined ? (
+        <div
+          style={{
+            position: 'absolute',
+            left: left + mouseClickCol * colWidth + scrollX,
+            top: 0,
+            width: colWidth,
+            height: totalTrackAreaHeight,
+            backgroundColor: 'rgba(128,128,0,0.2)',
+            pointerEvents: 'none',
+            zIndex: 100,
+          }}
+        />
+      ) : null}
+    </>
+  )
+})
+
+const TrackArea = observer(function ({ model }: { model: MsaViewModel }) {
+  const { turnedOnTracks } = model
+  if (turnedOnTracks.length === 0) {
+    return null
+  }
+  return (
+    <div style={{ position: 'relative' }}>
+      <TrackColumnIndicator model={model} />
+      {turnedOnTracks.map(track => (
+        <Track key={track.model.id} model={model} track={track} />
+      ))}
+    </div>
+  )
+})
+
 const MainArea = observer(function ({ model }: { model: MsaViewModel }) {
   const { showVerticalScrollbar } = model
 
@@ -39,6 +106,7 @@ const View = observer(function ({ model }: { model: MsaViewModel }) {
   return (
     <div style={{ position: 'relative' }}>
       <TopArea model={model} />
+      <TrackArea model={model} />
       <MainArea model={model} />
     </div>
   )

package/src/components/SequenceTextArea.tsx

@@ -24,10 +24,11 @@ export default function SequenceTextArea({ str }: { str: [string, string][] }) {
   const [showGaps, setShowGaps] = useState(false)
   const [showEmpty, setShowEmpty] = useState(false)
 
+  const removeGaps = (s: string) => s.replaceAll('-', '').replaceAll('.', '')
   const disp = str
-    .map(([s1, s2]) => [s1, showGaps ? s2 : s2.replaceAll('-', '')] as const)
+    .map(([s1, s2]) => [s1, showGaps ? s2 : removeGaps(s2)] as const)
     .filter(f => (showEmpty ? true : !!f[1]))
-    .map(([s1, s2]) => `>${s1}\n${showGaps ? s2 : s2.replaceAll('-', '')}`)
+    .map(([s1, s2]) => `>${s1}\n${showGaps ? s2 : removeGaps(s2)}`)
     .join('\n')
   return (
     <>

package/src/components/TextTrack.tsx

@@ -6,14 +6,14 @@ import { observer } from 'mobx-react'
 import { colorContrast } from '../util'
 
 import type { MsaViewModel } from '../model'
-import type { ITextTrack } from '../types'
+import type { BasicTrack } from '../types'
 
 const AnnotationBlock = observer(function ({
   track,
   model,
   offsetX,
 }: {
-  track: ITextTrack
+  track: BasicTrack
   model: MsaViewModel
   offsetX: number
 }) {
@@ -58,7 +58,7 @@ const AnnotationBlock = observer(function ({
 
     const xStart = Math.max(0, Math.floor(offsetX / colWidth))
     const xEnd = Math.max(0, Math.ceil((offsetX + blockSize) / colWidth))
-    const str = data.slice(xStart, xEnd)
+    const str = data?.slice(xStart, xEnd)
     for (let i = 0; str && i < str.length; i++) {
       const letter = str[i]!
       const color = colorScheme[letter.toUpperCase()]
@@ -102,10 +102,13 @@ const AnnotationTrack = observer(function ({
   track,
   model,
 }: {
-  track: ITextTrack
+  track: BasicTrack
   model: MsaViewModel
 }) {
   const { blocksX, msaAreaWidth, rowHeight } = model
+  if (!track.model.data) {
+    return null
+  }
   return (
     <div
       style={{

package/src/components/Track.tsx

@@ -3,7 +3,6 @@ import React, { lazy, useEffect, useRef, useState } from 'react'
 import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown'
 import { IconButton, Menu, MenuItem } from '@mui/material'
 import { observer } from 'mobx-react'
-import normalizeWheel from 'normalize-wheel'
 import { makeStyles } from 'tss-react/mui'
 
 import type { MsaViewModel } from '../model'
@@ -28,8 +27,7 @@ export const TrackLabel = observer(function ({
   const [anchorEl, setAnchorEl] = useState<HTMLButtonElement>()
   const { drawLabels, rowHeight, treeAreaWidth: width } = model
   const {
-    height,
-    model: { name },
+    model: { name, height },
   } = track
   const { classes } = useStyles()
   const trackLabelHeight = Math.max(8, rowHeight - 8)
@@ -101,7 +99,7 @@ const Track = observer(function ({
 
   track: any
 }) {
-  const { resizeHandleWidth } = model
+  const { resizeHandleWidth, colWidth, scrollX, numColumns } = model
   const {
     model: { height, error },
   } = track
@@ -113,9 +111,8 @@ const Track = observer(function ({
     if (!curr) {
       return
     }
-    function onWheel(origEvent: WheelEvent) {
-      const event = normalizeWheel(origEvent)
-      deltaX.current += event.pixelX
+    function onWheel(event: WheelEvent) {
+      deltaX.current += event.deltaX
 
       if (!scheduled.current) {
         scheduled.current = true
@@ -125,18 +122,37 @@ const Track = observer(function ({
           scheduled.current = false
         })
       }
-      origEvent.preventDefault()
+      event.preventDefault()
     }
     curr.addEventListener('wheel', onWheel)
     return () => {
       curr.removeEventListener('wheel', onWheel)
     }
   }, [model])
+
   return (
     <div key={track.id} style={{ display: 'flex', height }}>
       <TrackLabel model={model} track={track} />
       <div style={{ width: resizeHandleWidth, flexShrink: 0 }} />
-      <div ref={ref}>
+      <div
+        ref={ref}
+        onMouseMove={event => {
+          if (!ref.current) {
+            return
+          }
+          const { left } = ref.current.getBoundingClientRect()
+          const mouseX = event.clientX - left - scrollX
+          const col = Math.floor(mouseX / colWidth)
+          if (col >= 0 && col < numColumns) {
+            model.setMousePos(col, undefined)
+          } else {
+            model.setMousePos(undefined, undefined)
+          }
+        }}
+        onMouseLeave={() => {
+          model.setMousePos(undefined, undefined)
+        }}
+      >
         {error ? (
           <div style={{ color: 'red', fontSize: 10 }}>{`${error}`}</div>
         ) : (

package/src/components/dialogs/ExportSVGDialog.tsx

@@ -2,6 +2,7 @@ import React, { useState } from 'react'
 
 import { Dialog, ErrorMessage } from '@jbrowse/core/ui'
 import {
+  Alert,
   Button,
   DialogActions,
   DialogContent,
@@ -26,9 +27,16 @@ export default function ExportSVGDialog({
   onClose: () => void
 }) {
   const [includeMinimap, setIncludeMinimap] = useState(true)
+  const [includeTracks, setIncludeTracks] = useState(true)
   const [exportType, setExportType] = useState('viewport')
   const [error, setError] = useState<unknown>()
   const theme = useTheme()
+  const { totalWidth, totalHeight, treeAreaWidth, turnedOnTracks } = model
+  const hasTracks = turnedOnTracks.length > 0
+  const entireWidth = totalWidth + treeAreaWidth
+  const entireHeight = totalHeight
+  const isLargeExport =
+    exportType === 'entire' && (entireWidth > 10000 || entireHeight > 10000)
   return (
     <Dialog
       onClose={() => {
@@ -48,6 +56,15 @@ export default function ExportSVGDialog({
             setIncludeMinimap(!includeMinimap)
           }}
         />
+        {hasTracks ? (
+          <Checkbox2
+            label="Include tracks?"
+            checked={includeTracks}
+            onChange={() => {
+              setIncludeTracks(!includeTracks)
+            }}
+          />
+        ) : null}
         <div>
           <FormControl>
             <FormLabel>Export type</FormLabel>
@@ -70,6 +87,12 @@ export default function ExportSVGDialog({
             </RadioGroup>
           </FormControl>
         </div>
+        {isLargeExport ? (
+          <Alert severity="warning" style={{ marginTop: 8 }}>
+            The entire MSA is very large ({Math.round(entireWidth)}x
+            {Math.round(entireHeight)} pixels). Export may be slow or fail.
+          </Alert>
+        ) : null}
       </DialogContent>
       <DialogActions>
         <Button
@@ -83,13 +106,14 @@ export default function ExportSVGDialog({
                   theme,
                   includeMinimap:
                     exportType === 'entire' ? false : includeMinimap,
+                  includeTracks: hasTracks && includeTracks,
                   exportType,
                 })
+                onClose()
               } catch (e) {
                 console.error(e)
                 setError(e)
               }
-              onClose()
             })()
           }}
         >

package/src/components/header/GappynessSlider.tsx

@@ -0,0 +1,35 @@
+import React from 'react'
+
+import { Slider, Typography } from '@mui/material'
+import { observer } from 'mobx-react'
+
+import type { MsaViewModel } from '../../model'
+
+const GappynessSlider = observer(function GappynessSlider({
+  model,
+}: {
+  model: MsaViewModel
+}) {
+  const { hideGaps, allowedGappyness } = model
+  if (!hideGaps) {
+    return null
+  }
+  return (
+    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+      <Typography style={{ whiteSpace: 'nowrap' }}>
+        Hide columns w/ &gt;{allowedGappyness}% gaps
+      </Typography>
+      <Slider
+        style={{ width: 100 }}
+        min={1}
+        max={100}
+        value={allowedGappyness}
+        onChange={(_, val) => {
+          model.setAllowedGappyness(val)
+        }}
+      />
+    </div>
+  )
+})
+
+export default GappynessSlider