react-msaview 4.4.6 → 4.5.0

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

package/src/components/header/Header.tsx

@@ -5,6 +5,7 @@ import Help from '@mui/icons-material/Help'
 import { IconButton } from '@mui/material'
 import { observer } from 'mobx-react'
 
+import GappynessSlider from './GappynessSlider'
 import HeaderInfoArea from './HeaderInfoArea'
 import HeaderMenu from './HeaderMenu'
 import HeaderStatusArea from './HeaderStatusArea'
@@ -30,7 +31,8 @@ const Header = observer(function ({ model }: { model: MsaViewModel }) {
       <ZoomControls model={model} />
       {model.showZoomStar ? <ZoomStar model={model} /> : null}
       <ZoomMenu model={model} />
-      <div style={{ margin: 'auto' }}>
+      <GappynessSlider model={model} />
+      <div style={{ paddingLeft: 20, margin: 'auto' }}>
         <MultiAlignmentSelector model={model} />
       </div>
       <HeaderInfoArea model={model} />

package/src/components/header/HeaderMenu.tsx

@@ -1,10 +1,10 @@
 import React, { lazy } from 'react'
 
 import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton'
+import AccountTree from '@mui/icons-material/AccountTree'
 import Assignment from '@mui/icons-material/Assignment'
 import FilterAlt from '@mui/icons-material/FilterAlt'
 import FolderOpen from '@mui/icons-material/FolderOpen'
-import List from '@mui/icons-material/List'
 import MoreVert from '@mui/icons-material/Menu'
 import PhotoCamera from '@mui/icons-material/PhotoCamera'
 import Search from '@mui/icons-material/Search'
@@ -16,7 +16,6 @@ import type { MsaViewModel } from '../../model'
 
 // lazies
 const MetadataDialog = lazy(() => import('../dialogs/MetadataDialog'))
-const TracklistDialog = lazy(() => import('../dialogs/TracklistDialog'))
 const ExportSVGDialog = lazy(() => import('../dialogs/ExportSVGDialog'))
 const FeatureFilterDialog = lazy(() => import('../dialogs/FeatureDialog'))
 const SettingsDialog = lazy(() => import('../dialogs/SettingsDialog'))
@@ -26,7 +25,14 @@ const UserProvidedDomainsDialog = lazy(
 const InterProScanDialog = lazy(() => import('../dialogs/InterProScanDialog'))
 
 const HeaderMenu = observer(({ model }: { model: MsaViewModel }) => {
-  const { showDomains, actuallyShowDomains, subFeatureRows, noDomains } = model
+  const {
+    showDomains,
+    actuallyShowDomains,
+    subFeatureRows,
+    noDomains,
+    tracks,
+    turnedOffTracks,
+  } = model
   return (
     <CascadingMenuButton
       menuItems={[
@@ -63,19 +69,18 @@ const HeaderMenu = observer(({ model }: { model: MsaViewModel }) => {
           },
         },
         {
-          label: 'Extra tracks',
-          icon: List,
-          onClick: () => {
-            model.queueDialog(onClose => [
-              TracklistDialog,
-              {
-                model,
-                onClose,
-              },
-            ])
-          },
+          label: 'Tracks',
+          icon: Visibility,
+          type: 'subMenu',
+          subMenu: tracks.map(track => ({
+            label: track.model.name,
+            type: 'checkbox' as const,
+            checked: !turnedOffTracks.has(track.model.id),
+            onClick: () => {
+              model.toggleTrack(track.model.id)
+            },
+          })),
         },
-
         {
           label: 'Export SVG',
           icon: PhotoCamera,
@@ -89,6 +94,22 @@ const HeaderMenu = observer(({ model }: { model: MsaViewModel }) => {
             ])
           },
         },
+        ...(model.rows.length >= 2
+          ? [
+              {
+                label: 'Calculate neighbor joining tree (BLOSUM62)',
+                icon: AccountTree,
+                onClick: () => {
+                  try {
+                    model.calculateNeighborJoiningTreeFromMSA()
+                  } catch (e) {
+                    console.error('Failed to calculate NJ tree:', e)
+                    model.setError(e)
+                  }
+                },
+              },
+            ]
+          : []),
         {
           label: 'Features/protein domains',
           type: 'subMenu',

package/src/components/minimap/MinimapSVG.tsx

@@ -21,7 +21,8 @@ const MinimapSVG = observer(({ model }: { model: MsaViewModel }) => {
   const right = left + W
   const s = left * unit
   const e = right * unit
-  const fill = 'rgba(66, 119, 127, 0.3)'
+  const fillColor = 'rgb(66, 119, 127)'
+  const fillOpacity = 0.3
 
   return (
     <>
@@ -38,12 +39,14 @@ const MinimapSVG = observer(({ model }: { model: MsaViewModel }) => {
         y={0}
         width={e - s}
         height={BAR_HEIGHT}
-        fill={fill}
+        fill={fillColor}
+        fillOpacity={fillOpacity}
         stroke="#555"
       />
       <g transform={`translate(0 ${BAR_HEIGHT})`}>
         <polygon
-          fill={fill}
+          fill={fillColor}
+          fillOpacity={fillOpacity}
           points={[
             [e, 0],
             [s, 0],