react-msaview 3.1.12 → 3.2.1

package/src/colorSchemes.ts

@@ -5,6 +5,7 @@ import { transform } from './util'
 extend([namesPlugin])
 
 const colorSchemes = {
+  none: {},
   clustal: {
     G: 'orange',
     P: 'orange',
@@ -351,12 +352,12 @@ export default transform(colorSchemes, ([key, val]) => [
 // 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 total = Object.values(stats).reduce((a, b) => a + b, 0)
-  const l = model.columns[row][col]
+  const l = model.columns[row]![col]!
   const {
     W = 0,
     L = 0,
@@ -494,16 +495,16 @@ export function getClustalXColor(
 // 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
+// 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 total = Object.values(stats).reduce((a, b) => a + b, 0)
-  const l = model.columns[row][col]
+  const l = model.columns[row]![col]!
   const entries = Object.entries(stats)
   let ent = 0
   let letter = ''

package/src/components/Checkbox2.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import {
   Checkbox,
   FormControlLabel,
-  FormControlLabelProps,
+  type FormControlLabelProps,
 } from '@mui/material'
 
 function FormControlLabel2(rest: FormControlLabelProps) {

package/src/components/Loading.tsx

@@ -7,28 +7,40 @@ import { ErrorMessage } from '@jbrowse/core/ui'
 // locals
 import ImportForm from './import/ImportForm'
 import MSAView from './MSAView'
-import { MsaViewModel } from '../model'
+import type { MsaViewModel } from '../model'
 
-function Reset({ model, error }: { model: MsaViewModel; error: unknown }) {
+const Reset = observer(function ({
+  model,
+  error,
+}: {
+  model: MsaViewModel
+  error: unknown
+}) {
   return (
     <div>
       <ErrorMessage error={error} />
-      <Button variant="contained" color="primary" onClick={() => model.reset()}>
+      <Button
+        variant="contained"
+        color="primary"
+        onClick={() => {
+          model.reset()
+        }}
+      >
         Return to import form
       </Button>
     </div>
   )
-}
+})
 
 const Loading = observer(function ({ model }: { model: MsaViewModel }) {
-  const { isLoading, initialized } = model
+  const { isLoading, dataInitialized } = model
 
   return (
     <div>
       <ErrorBoundary
         fallbackRender={props => <Reset model={model} error={props.error} />}
       >
-        {initialized ? (
+        {dataInitialized ? (
           isLoading ? (
             <Typography variant="h4">Loading...</Typography>
           ) : (

package/src/components/MSAView.tsx

@@ -3,55 +3,64 @@ import { observer } from 'mobx-react'
 
 // locals
 import { HorizontalResizeHandle, VerticalResizeHandle } from './ResizeHandles'
-import { MsaViewModel } from '../model'
+import type { MsaViewModel } from '../model'
 import TreeRuler from './tree/TreeRuler'
 import Header from './header/Header'
 import MSAPanel from './msa/MSAPanel'
 import TreePanel from './tree/TreePanel'
 import Minimap from './minimap/Minimap'
+import VerticalScrollbar from './VerticalScrollbar'
 
-function TopArea({ model }: { model: MsaViewModel }) {
+const TopArea = observer(function ({ model }: { model: MsaViewModel }) {
+  const { showHorizontalScrollbar } = model
   return (
     <div style={{ display: 'flex' }}>
       <TreeRuler model={model} />
-      <Minimap model={model} />
+      {showHorizontalScrollbar ? <Minimap model={model} /> : null}
     </div>
   )
-}
-function MainArea({ model }: { model: MsaViewModel }) {
+})
+
+const MainArea = observer(function ({ model }: { model: MsaViewModel }) {
+  const { showVerticalScrollbar } = model
+
   return (
     <div style={{ display: 'flex' }}>
       <TreePanel model={model} />
       <VerticalResizeHandle model={model} />
       <MSAPanel model={model} />
+      {showVerticalScrollbar ? <VerticalScrollbar model={model} /> : null}
     </div>
   )
-}
+})
 
 const View = observer(function ({ model }: { model: MsaViewModel }) {
   return (
     <div style={{ position: 'relative' }}>
       <TopArea model={model} />
-
       <MainArea model={model} />
     </div>
   )
 })
 
 const MSAView = observer(function ({ model }: { model: MsaViewModel }) {
-  const { height, DialogComponent, DialogProps } = model
+  const { height, viewInitialized, DialogComponent, DialogProps } = model
   return (
     <div>
-      <div style={{ height, overflow: 'hidden' }}>
-        <Header model={model} />
-        <View model={model} />
-      </div>
-      <HorizontalResizeHandle model={model} />
-
-      {DialogComponent ? (
-        <Suspense fallback={null}>
-          <DialogComponent {...DialogProps} />
-        </Suspense>
+      {viewInitialized ? (
+        <>
+          <div style={{ height, overflow: 'hidden' }}>
+            <Header model={model} />
+            <View model={model} />
+          </div>
+          <HorizontalResizeHandle model={model} />
+
+          {DialogComponent ? (
+            <Suspense fallback={null}>
+              <DialogComponent {...DialogProps} />
+            </Suspense>
+          ) : null}
+        </>
       ) : null}
     </div>
   )

package/src/components/ResizeHandles.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useRef, useState } from 'react'
 import { observer } from 'mobx-react'
 
 // locals
-import { MsaViewModel } from '../model'
+import type { MsaViewModel } from '../model'
 
 export const VerticalResizeHandle = observer(function ({
   model,
@@ -57,12 +57,14 @@ export const VerticalResizeHandle = observer(function ({
   return (
     <div>
       <div
-        onMouseDown={() => setMouseDragging(true)}
+        onMouseDown={() => {
+          setMouseDragging(true)
+        }}
         style={{
           cursor: 'ew-resize',
           height: '100%',
           width: resizeHandleWidth,
-          background: `rgba(200,200,200)`,
+          background: 'rgba(200,200,200)',
           position: 'relative',
         }}
       />
@@ -123,12 +125,14 @@ export const HorizontalResizeHandle = observer(function ({
   return (
     <div>
       <div
-        onMouseDown={() => setMouseDragging(true)}
+        onMouseDown={() => {
+          setMouseDragging(true)
+        }}
         style={{
           cursor: 'ns-resize',
           width: '100%',
           height: resizeHandleWidth,
-          background: `rgba(200,200,200)`,
+          background: 'rgba(200,200,200)',
           position: 'relative',
         }}
       />

package/src/components/SequenceTextArea.tsx

@@ -25,7 +25,7 @@ export default function SequenceTextArea({ str }: { str: [string, string][] }) {
   const [showEmpty, setShowEmpty] = useState(false)
 
   const disp = str
-    .map(([s1, s2]) => [s1, showGaps ? s2 : s2.replaceAll('-', '')])
+    .map(([s1, s2]) => [s1, showGaps ? s2 : s2.replaceAll('-', '')] as const)
     .filter(f => (showEmpty ? true : !!f[1]))
     .map(([s1, s2]) => `>${s1}\n${showGaps ? s2 : s2.replaceAll('-', '')}`)
     .join('\n')
@@ -37,7 +37,9 @@ export default function SequenceTextArea({ str }: { str: [string, string][] }) {
         onClick={() => {
           copy(disp)
           setCopied(true)
-          setTimeout(() => setCopied(false), 500)
+          setTimeout(() => {
+            setCopied(false)
+          }, 500)
         }}
       >
         {copied ? 'Copied!' : 'Copy to clipboard'}
@@ -45,12 +47,16 @@ export default function SequenceTextArea({ str }: { str: [string, string][] }) {
       <Checkbox2
         label="Show gaps"
         checked={showGaps}
-        onChange={() => setShowGaps(!showGaps)}
+        onChange={() => {
+          setShowGaps(!showGaps)
+        }}
       />
       <Checkbox2
         label="Show empty"
         checked={showEmpty}
-        onChange={() => setShowEmpty(!showEmpty)}
+        onChange={() => {
+          setShowEmpty(!showEmpty)
+        }}
       />
       <TextField
         variant="outlined"

package/src/components/TextTrack.tsx

@@ -2,7 +2,7 @@ import React, { useRef, useMemo, useEffect } from 'react'
 import { useTheme } from '@mui/material'
 import { observer } from 'mobx-react'
 // locals
-import { MsaViewModel, ITextTrack } from '../model'
+import type { MsaViewModel, ITextTrack } from '../model'
 import { colorContrast } from '../util'
 
 const AnnotationBlock = observer(function ({
@@ -55,9 +55,9 @@ 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 letter = str[i]!
       const color = colorScheme[letter.toUpperCase()]
       if (bgColor) {
         const x = i * colWidth + offsetX - (offsetX % colWidth)

package/src/components/Track.tsx

@@ -8,7 +8,7 @@ import { makeStyles } from 'tss-react/mui'
 import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown'
 
 // locals
-import { MsaViewModel } from '../model'
+import type { MsaViewModel } from '../model'
 
 // lazies
 const TrackInfoDialog = lazy(() => import('./dialogs/TrackInfoDialog'))
@@ -24,7 +24,7 @@ export const TrackLabel = observer(function ({
   track,
 }: {
   model: MsaViewModel
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
   track: any
 }) {
   const [anchorEl, setAnchorEl] = useState<HTMLButtonElement>()
@@ -53,7 +53,9 @@ export const TrackLabel = observer(function ({
           width: trackLabelHeight,
           height: trackLabelHeight,
         }}
-        onClick={event => setAnchorEl(event.currentTarget)}
+        onClick={event => {
+          setAnchorEl(event.currentTarget)
+        }}
       >
         <ArrowDropDownIcon />
       </IconButton>
@@ -62,7 +64,9 @@ export const TrackLabel = observer(function ({
           anchorEl={anchorEl}
           transitionDuration={0}
           open
-          onClose={() => setAnchorEl(undefined)}
+          onClose={() => {
+            setAnchorEl(undefined)
+          }}
         >
           <MenuItem
             dense
@@ -96,7 +100,7 @@ const Track = observer(function ({
   track,
 }: {
   model: MsaViewModel
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
   track: any
 }) {
   const { resizeHandleWidth } = model

package/src/components/VerticalScrollbar.tsx

@@ -0,0 +1,89 @@
+import { observer } from 'mobx-react'
+import React, { useEffect, useRef, useState } from 'react'
+import type { MsaViewModel } from '../model'
+import { clamp } from '../util'
+
+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(
+                -totalHeight,
+                mouseDown.scrollY - (event.clientY - mouseDown.clientY) / unit,
+                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])
+  return (
+    <div
+      style={{
+        position: 'relative',
+        width: 20,
+        height: msaAreaHeight,
+        borderLeft: '1px solid #555',
+        borderTop: '1px solid #555',
+        boxSizing: 'border-box',
+      }}
+    >
+      <div
+        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,
+          height: Math.max(b - t, 20),
+          zIndex: 100,
+        }}
+        onMouseOver={() => {
+          setHovered(true)
+        }}
+        onMouseOut={() => {
+          setHovered(false)
+        }}
+        onMouseDown={event => {
+          setMouseDown({
+            clientY: event.clientY,
+            scrollY: model.scrollY,
+          })
+        }}
+      />
+    </div>
+  )
+})
+export default VerticalScrollbar

package/src/components/dialogs/AboutDialog.tsx

@@ -5,7 +5,13 @@ import { version } from '../../version'
 
 export default function AboutDialog({ onClose }: { onClose: () => void }) {
   return (
-    <Dialog onClose={() => onClose()} open title="About this plugin">
+    <Dialog
+      onClose={() => {
+        onClose()
+      }}
+      open
+      title="About this plugin"
+    >
       <DialogContent>
         <Typography>
           MSAView {version} (

package/src/components/dialogs/AddTrackDialog.tsx

@@ -8,11 +8,11 @@ import {
   Typography,
 } from '@mui/material'
 import { Dialog, FileSelector } from '@jbrowse/core/ui'
-import { FileLocation } from '@jbrowse/core/util/types'
+import type { FileLocation } from '@jbrowse/core/util/types'
 import { observer } from 'mobx-react'
-import { MsaViewModel } from '../../model'
+import type { MsaViewModel } from '../../model'
 
-export default observer(function ({
+const AddTrackDialog = observer(function ({
   model,
   onClose,
   open,
@@ -26,7 +26,13 @@ export default observer(function ({
   const [currentOption, setCurrentOption] = useState('')
 
   return (
-    <Dialog onClose={() => onClose()} open={open} title="Add track">
+    <Dialog
+      onClose={() => {
+        onClose()
+      }}
+      open={open}
+      title="Add track"
+    >
       <DialogContent>
         <Typography>
           Open relevant per-alignment tracks e.g. protein domains
@@ -62,7 +68,9 @@ export default observer(function ({
           <Button
             color="secondary"
             variant="contained"
-            onClick={() => onClose()}
+            onClick={() => {
+              onClose()
+            }}
           >
             Cancel
           </Button>
@@ -71,3 +79,5 @@ export default observer(function ({
     </Dialog>
   )
 })
+
+export default AddTrackDialog

package/src/components/dialogs/DomainDialog.tsx

@@ -3,10 +3,10 @@ import { Dialog } from '@jbrowse/core/ui'
 import { Tab, Tabs } from '@mui/material'
 
 // locals
-import InterProScanPanel from './InterProScanPanel'
-import UserProvidedResultPanel from './UserProvidedResultPanel'
+import InterProScanPanel from './InterProScanDialog'
+import UserProvidedResultPanel from './UserProvidedDomainsDialog'
 import TabPanel from './TabPanel'
-import { MsaViewModel } from '../../model'
+import type { MsaViewModel } from '../../model'
 
 export default function LaunchDomainViewDialog({
   handleClose,
@@ -20,10 +20,17 @@ export default function LaunchDomainViewDialog({
     <Dialog
       maxWidth="xl"
       title="Launch protein view"
-      onClose={() => handleClose()}
+      onClose={() => {
+        handleClose()
+      }}
       open
     >
-      <Tabs value={choice} onChange={(_, val) => setChoice(val)}>
+      <Tabs
+        value={choice}
+        onChange={(_, val) => {
+          setChoice(val)
+        }}
+      >
         <Tab value={0} label="Automatic lookup" />
         <Tab value={1} label="Manual" />
       </Tabs>

package/src/components/dialogs/ExportSVGDialog.tsx

@@ -13,7 +13,7 @@ import {
   useTheme,
 } from '@mui/material'
 // locals
-import { MsaViewModel } from '../../model'
+import type { MsaViewModel } from '../../model'
 import Checkbox2 from '../Checkbox2'
 
 export default function ExportSVGDialog({
@@ -28,7 +28,13 @@ export default function ExportSVGDialog({
   const [error, setError] = useState<unknown>()
   const theme = useTheme()
   return (
-    <Dialog onClose={() => onClose()} open title="Export SVG">
+    <Dialog
+      onClose={() => {
+        onClose()
+      }}
+      open
+      title="Export SVG"
+    >
       <DialogContent>
         {error ? <ErrorMessage error={error} /> : null}
         <Typography>Settings:</Typography>
@@ -36,14 +42,18 @@ export default function ExportSVGDialog({
           label="Include minimap?"
           disabled={exportType === 'entire'}
           checked={includeMinimap}
-          onChange={() => setIncludeMinimap(!includeMinimap)}
+          onChange={() => {
+            setIncludeMinimap(!includeMinimap)
+          }}
         />
         <div>
           <FormControl>
             <FormLabel>Export type</FormLabel>
             <RadioGroup
               value={exportType}
-              onChange={event => setExportType(event.target.value)}
+              onChange={event => {
+                setExportType(event.target.value)
+              }}
             >
               <FormControlLabel
                 value="entire"
@@ -63,24 +73,33 @@ export default function ExportSVGDialog({
         <Button
           variant="contained"
           color="primary"
-          onClick={async () => {
-            try {
-              await model.exportSVG({
-                theme,
-                includeMinimap:
-                  exportType === 'entire' ? false : includeMinimap,
-                exportType,
-              })
-            } catch (e) {
-              console.error(e)
-              setError(e)
-            }
-            onClose()
+          onClick={() => {
+            // eslint-disable-next-line @typescript-eslint/no-floating-promises
+            ;(async () => {
+              try {
+                await model.exportSVG({
+                  theme,
+                  includeMinimap:
+                    exportType === 'entire' ? false : includeMinimap,
+                  exportType,
+                })
+              } catch (e) {
+                console.error(e)
+                setError(e)
+              }
+              onClose()
+            })()
           }}
         >
           Submit
         </Button>
-        <Button variant="contained" color="secondary" onClick={() => onClose()}>
+        <Button
+          variant="contained"
+          color="secondary"
+          onClick={() => {
+            onClose()
+          }}
+        >
           Cancel
         </Button>
       </DialogActions>

package/src/components/dialogs/FeatureDialog.tsx

@@ -4,7 +4,7 @@ import { Dialog } from '@jbrowse/core/ui'
 import { Button, DialogContent } from '@mui/material'
 
 // locals
-import { MsaViewModel } from '../../model'
+import type { MsaViewModel } from '../../model'
 import { getPalette } from '../../ggplotPalettes'
 
 const Toggles = observer(function ({ model }: { model: MsaViewModel }) {
@@ -35,8 +35,8 @@ const Toggles = observer(function ({ model }: { model: MsaViewModel }) {
 })
 
 const Table = observer(function ({ model }: { model: MsaViewModel }) {
-  const { tidyTypes, featureFilters } = model
-  const values = [...tidyTypes.values()]
+  const { tidyInterProAnnotationTypes, featureFilters } = model
+  const values = [...tidyInterProAnnotationTypes.values()]
   const palette = getPalette(values.length - 1)
   return (
     <>
@@ -44,7 +44,7 @@ const Table = observer(function ({ model }: { model: MsaViewModel }) {
       <table>
         <thead>
           <tr>
-            <td></td>
+            <td />
             <td>accession</td>
             <td>name</td>
             <td>description</td>
@@ -57,12 +57,12 @@ const Table = observer(function ({ model }: { model: MsaViewModel }) {
                 <input
                   type="checkbox"
                   checked={featureFilters.get(accession) ?? false}
-                  onChange={() =>
+                  onChange={() => {
                     model.setFilter(
                       accession,
                       !model.featureFilters.get(accession),
                     )
-                  }
+                  }}
                 />
               </td>
               <td>{accession}</td>
@@ -75,7 +75,7 @@ const Table = observer(function ({ model }: { model: MsaViewModel }) {
                     height: 20,
                     background: palette[idx] || 'black',
                   }}
-                ></div>
+                />
               </td>
             </tr>
           ))}
@@ -94,7 +94,9 @@ const FeatureTypeDialog = observer(function ({
 }) {
   return (
     <Dialog
-      onClose={() => onClose()}
+      onClose={() => {
+        onClose()
+      }}
       open
       title="Feature filters"
       maxWidth="xl"