react-msaview 2.0.0 → 2.1.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "react-msaview",
   "type": "module",
   "author": "Colin",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "license": "MIT",
   "main": "dist/index.js",
   "files": [
@@ -14,13 +14,13 @@
     "node": ">=10"
   },
   "scripts": {
-    "lint": "eslint src",
     "clean": "rimraf dist",
     "prebuild": "npm run clean",
-    "prepublishOnly": "node -p \"'export const version = ' + JSON.stringify(require('./package.json').version) + ';'\" > src/version.ts",
-    "build": "tsc && rollup -c",
-    "preversion": "npm run build",
-    "postversion": "git push --follow-tags"
+    "prepublishOnly": "node output-version.js > src/version.ts && git add -A src && git commit -m '[skip ci] Bump version.ts'",
+    "build:esm": "tsc",
+    "build:bundle": "rollup -c",
+    "build": "npm run build:esm && npm run build:bundle",
+    "prepack": "npm run build"
   },
   "peerDependencies": {
     "@jbrowse/core": ">=2.0.0",
@@ -33,7 +33,7 @@
     "react-dom": ">=16.8.0"
   },
   "devDependencies": {
-    "@rollup/plugin-commonjs": "^24.1.0",
+    "@rollup/plugin-commonjs": "^25.0.4",
     "@rollup/plugin-json": "^6.0.0",
     "@rollup/plugin-node-resolve": "^15.0.2",
     "@rollup/plugin-replace": "^5.0.2",
@@ -43,14 +43,14 @@
     "@types/d3": "^7.4.0",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.1",
-    "rollup": "^3.21.3",
+    "rollup": "^3.0.2",
     "rollup-plugin-polyfill-node": "^0.12.0",
     "tslib": "^2.1.0",
     "typescript": "^5.0.4"
   },
   "dependencies": {
     "clustal-js": "^1.0.3",
-    "color": "^3.1.3",
+    "color": "^4.2.3",
     "copy-to-clipboard": "^3.3.1",
     "d3-array": "^3.2.3",
     "d3-hierarchy": "^3.1.2",

package/src/UniprotTrack.ts

@@ -31,16 +31,15 @@ export const UniprotTrack = types
         autorun(async () => {
           try {
             const { accession } = self
-            const url = `https://rest.uniprot.org/uniprotkb/${accession}.gff`
-            const response = await fetch(url)
-            if (!response.ok) {
+            const accessionSansVersion = accession?.replace(/\.[^/.]+$/, '')
+            const url = `https://rest.uniprot.org/uniprotkb/${accessionSansVersion}.gff`
+            const res = await fetch(url)
+            if (!res.ok) {
               throw new Error(
-                `HTTP ${
-                  response.status
-                } fetching ${url}: ${await response.text()}`,
+                `HTTP ${res.status} fetching ${url}: ${await res.text()}`,
               )
             }
-            self.setData(await response.text())
+            self.setData(await res.text())
           } catch (e) {
             console.error(e)
             self.setError(e)

package/src/colorSchemes.ts

@@ -332,7 +332,7 @@ const colorSchemes = {
     '-': 'gray',
     '.': 'gray',
   },
-} as { [key: string]: { [key: string]: string } }
+} as Record<string, Record<string, string>>
 
 // turn all supplied colors to hex colors which getContrastText from mui
 // requires
@@ -347,7 +347,7 @@ export default transform(colorSchemes, ([key, val]) => [
 // 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: { [key: string]: number },
+  stats: Record<string, number>,
   model: { columns: Record<string, string> },
   row: string,
   col: number,
@@ -494,7 +494,7 @@ export function getClustalXColor(
 // 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: { [key: string]: number },
+  stats: Record<string, number>,
   model: { columns: Record<string, string> },
   row: string,
   col: number,
@@ -504,10 +504,10 @@ export function getPercentIdentityColor(
   const entries = Object.entries(stats)
   let ent = 0
   let letter = ''
-  for (let i = 0; i < entries.length; i++) {
-    if (entries[i][1] > ent && entries[i][0] !== '-') {
-      letter = entries[i][0]
-      ent = entries[i][1]
+  for (const entry of entries) {
+    if (entry[1] > ent && entry[0] !== '-') {
+      letter = entry[0]
+      ent = entry[1]
     }
   }
   const proportion = ent / total

package/src/components/BoxTrack.tsx

@@ -1,201 +1,11 @@
-import React, { useRef, useMemo, useEffect } from 'react'
+import React from 'react'
 import { observer } from 'mobx-react'
-import { getSnapshot, isStateTreeNode } from 'mobx-state-tree'
 
 // locals
 import { IBoxTrack, MsaViewModel } from '../model'
-import Layout from '../layout'
+import BoxTrackBlock from './BoxTrackBlock'
 
-interface Feat {
-  start: number
-  end: number
-}
-const AnnotationBlock = observer(function ({
-  track,
-  model,
-  offsetX,
-}: {
-  track: IBoxTrack
-  model: MsaViewModel
-  offsetX: number
-}) {
-  const {
-    blockSize,
-    colWidth,
-    blanks,
-    rowHeight,
-    highResScaleFactor,
-    scrollX,
-  } = model
-  const {
-    model: { height, features, associatedRowName },
-  } = track
-
-  const feats: Feat[] = isStateTreeNode(features)
-    ? // @ts-expect-error
-      getSnapshot(features)
-    : features
-
-  const layout = useMemo(() => {
-    const temp = new Layout()
-
-    feats?.forEach((feature, index) => {
-      const { start, end } = feature
-      if (associatedRowName) {
-        const s = model.rowSpecificBpToPx(associatedRowName, start - 1)
-        const e = model.rowSpecificBpToPx(associatedRowName, end)
-        temp.addRect(`${index}`, s, e, rowHeight, feature)
-      } else {
-        const s = model.globalBpToPx(start - 1)
-        const e = model.globalBpToPx(end)
-        temp.addRect(`${index}`, s, e, rowHeight, feature)
-      }
-    })
-    return temp
-
-    // might convert to autorun based drawing
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [rowHeight, feats, associatedRowName, model, blanks])
-
-  const ref = useRef<HTMLCanvasElement>(null)
-  const labelRef = useRef<HTMLCanvasElement>(null)
-  const mouseoverRef = 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, height)
-    ctx.translate(-offsetX, 0)
-    ctx.textAlign = 'center'
-    ctx.font = ctx.font.replace(/\d+px/, `${Math.max(8, rowHeight - 8)}px`)
-
-    const xStart = Math.max(0, Math.floor(offsetX / colWidth))
-    ctx.fillStyle = 'goldenrod'
-    layout.rectangles.forEach(value => {
-      const { minX, maxX, minY, maxY } = value
-
-      const x1 = (minX - xStart) * colWidth + offsetX - (offsetX % colWidth)
-      const x2 = (maxX - xStart) * colWidth + offsetX - (offsetX % colWidth)
-
-      if (x2 - x1 > 0) {
-        ctx.fillRect(x1, minY, x2 - x1, (maxY - minY) / 2)
-      }
-    })
-  }, [
-    associatedRowName,
-    blockSize,
-    colWidth,
-    layout.rectangles,
-    model,
-    rowHeight,
-    height,
-    offsetX,
-    highResScaleFactor,
-    features,
-    blanks,
-  ])
-
-  useEffect(() => {
-    if (!labelRef.current) {
-      return
-    }
-
-    const ctx = labelRef.current.getContext('2d')
-    if (!ctx) {
-      return
-    }
-
-    // this logic is very similar to MSACanvas
-    ctx.resetTransform()
-    ctx.scale(highResScaleFactor, highResScaleFactor)
-    ctx.clearRect(0, 0, blockSize, height)
-    ctx.translate(-offsetX, 0)
-    ctx.textAlign = 'center'
-    ctx.font = ctx.font.replace(/\d+px/, `${Math.max(8, rowHeight - 8)}px`)
-
-    ctx.fillStyle = 'black'
-    ctx.textAlign = 'left'
-    layout.rectangles.forEach(value => {
-      const { minX, maxX, maxY, minY } = value
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      const feature = value.data as any
-
-      const x1 = minX * colWidth
-      const x2 = maxX * colWidth
-
-      if (x2 - x1 > 0) {
-        const note = feature.attributes?.Note?.[0]
-        const name = feature.attributes?.Name?.[0]
-        const type = feature.type
-        ctx.fillText(
-          [type, name, note].filter(f => !!f).join(' - '),
-          Math.max(Math.min(-scrollX, x2), x1),
-          minY + (maxY - minY),
-        )
-      }
-    })
-  }, [
-    blockSize,
-    colWidth,
-    scrollX,
-    highResScaleFactor,
-    height,
-    layout.rectangles,
-    offsetX,
-    features,
-    model,
-    rowHeight,
-    blanks,
-  ])
-
-  return !features ? null : (
-    <>
-      <canvas
-        ref={ref}
-        height={height * highResScaleFactor}
-        width={blockSize * highResScaleFactor}
-        style={{
-          position: 'absolute',
-          left: scrollX + offsetX,
-          width: blockSize,
-          height,
-        }}
-      />
-      <canvas
-        ref={labelRef}
-        height={height * highResScaleFactor}
-        width={blockSize * highResScaleFactor}
-        style={{
-          position: 'absolute',
-          left: scrollX + offsetX,
-          width: blockSize,
-          height,
-        }}
-      />
-      <canvas
-        ref={mouseoverRef}
-        height={height * highResScaleFactor}
-        width={blockSize * highResScaleFactor}
-        style={{
-          position: 'absolute',
-          left: scrollX + offsetX,
-          width: blockSize,
-          height,
-        }}
-      />
-    </>
-  )
-})
-const AnnotationTrack = observer(function ({
+const BoxTrack = observer(function ({
   model,
   track,
 }: {
@@ -203,9 +13,7 @@ const AnnotationTrack = observer(function ({
   track: IBoxTrack
 }) {
   const { blocksX, msaAreaWidth } = model
-  const {
-    model: { height },
-  } = track
+  const { height } = track.model
   return (
     <div
       style={{
@@ -216,10 +24,10 @@ const AnnotationTrack = observer(function ({
       }}
     >
       {blocksX.map(bx => (
-        <AnnotationBlock track={track} key={bx} model={model} offsetX={bx} />
+        <BoxTrackBlock track={track} key={bx} model={model} offsetX={bx} />
       ))}
     </div>
   )
 })
 
-export default AnnotationTrack
+export default BoxTrack

package/src/components/BoxTrackBlock.tsx

@@ -0,0 +1,198 @@
+import React, { useRef, useMemo, useEffect } from 'react'
+import { observer } from 'mobx-react'
+import { getSnapshot, isStateTreeNode } from 'mobx-state-tree'
+
+// locals
+import { IBoxTrack, MsaViewModel } from '../model'
+import Layout from '../layout'
+
+interface Feat {
+  start: number
+  end: number
+}
+
+const BoxTrackBlock = observer(function ({
+  track,
+  model,
+  offsetX,
+}: {
+  track: IBoxTrack
+  model: MsaViewModel
+  offsetX: number
+}) {
+  const {
+    blockSize,
+    colWidth,
+    blanks,
+    rowHeight,
+    highResScaleFactor,
+    scrollX,
+  } = model
+  const { height, features, associatedRowName } = track.model
+
+  const feats: Feat[] = isStateTreeNode(features)
+    ? // @ts-expect-error
+      getSnapshot(features)
+    : features
+
+  const layout = useMemo(() => {
+    const temp = new Layout()
+
+    feats?.forEach((feature, index) => {
+      const { start, end } = feature
+      if (associatedRowName) {
+        const s = model.rowSpecificBpToPx(associatedRowName, start - 1)
+        const e = model.rowSpecificBpToPx(associatedRowName, end)
+        temp.addRect(`${index}`, s, e, rowHeight, feature)
+      } else {
+        const s = model.globalBpToPx(start - 1)
+        const e = model.globalBpToPx(end)
+        temp.addRect(`${index}`, s, e, rowHeight, feature)
+      }
+    })
+    return temp
+
+    // might convert to autorun based drawing
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [rowHeight, feats, associatedRowName, model, blanks])
+
+  const ref = useRef<HTMLCanvasElement>(null)
+  const labelRef = useRef<HTMLCanvasElement>(null)
+  const mouseoverRef = 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, height)
+    ctx.translate(-offsetX, 0)
+    ctx.textAlign = 'center'
+    ctx.font = ctx.font.replace(/\d+px/, `${Math.max(8, rowHeight - 8)}px`)
+
+    const xStart = Math.max(0, Math.floor(offsetX / colWidth))
+    ctx.fillStyle = 'goldenrod'
+    layout.rectangles.forEach(value => {
+      const { minX, maxX, minY, maxY } = value
+
+      const x1 = (minX - xStart) * colWidth + offsetX - (offsetX % colWidth)
+      const x2 = (maxX - xStart) * colWidth + offsetX - (offsetX % colWidth)
+
+      if (x2 - x1 > 0) {
+        ctx.fillRect(x1, minY, x2 - x1, (maxY - minY) / 2)
+      }
+    })
+  }, [
+    associatedRowName,
+    blockSize,
+    colWidth,
+    layout.rectangles,
+    model,
+    rowHeight,
+    height,
+    offsetX,
+    highResScaleFactor,
+    features,
+    blanks,
+  ])
+
+  useEffect(() => {
+    if (!labelRef.current) {
+      return
+    }
+
+    const ctx = labelRef.current.getContext('2d')
+    if (!ctx) {
+      return
+    }
+
+    // this logic is very similar to MSACanvas
+    ctx.resetTransform()
+    ctx.scale(highResScaleFactor, highResScaleFactor)
+    ctx.clearRect(0, 0, blockSize, height)
+    ctx.translate(-offsetX, 0)
+    ctx.textAlign = 'center'
+    ctx.font = ctx.font.replace(/\d+px/, `${Math.max(8, rowHeight - 8)}px`)
+
+    ctx.fillStyle = 'black'
+    ctx.textAlign = 'left'
+    for (const value of layout.rectangles.values()) {
+      const { minX, maxX, maxY, minY, data } = value
+
+      const x1 = minX * colWidth
+      const x2 = maxX * colWidth
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const feature = data as any
+
+      if (x2 - x1 > 0) {
+        const note = feature.attributes?.Note?.[0]
+        const name = feature.attributes?.Name?.[0]
+        const type = feature.type
+        ctx.fillText(
+          [type, name, note].filter(f => !!f).join(' - '),
+          Math.max(Math.min(-scrollX, x2), x1),
+          minY + (maxY - minY),
+        )
+      }
+    }
+  }, [
+    blockSize,
+    colWidth,
+    scrollX,
+    highResScaleFactor,
+    height,
+    layout.rectangles,
+    offsetX,
+    features,
+    model,
+    rowHeight,
+    blanks,
+  ])
+
+  return !features ? null : (
+    <>
+      <canvas
+        ref={ref}
+        height={height * highResScaleFactor}
+        width={blockSize * highResScaleFactor}
+        style={{
+          position: 'absolute',
+          left: scrollX + offsetX,
+          width: blockSize,
+          height,
+        }}
+      />
+      <canvas
+        ref={labelRef}
+        height={height * highResScaleFactor}
+        width={blockSize * highResScaleFactor}
+        style={{
+          position: 'absolute',
+          left: scrollX + offsetX,
+          width: blockSize,
+          height,
+        }}
+      />
+      <canvas
+        ref={mouseoverRef}
+        height={height * highResScaleFactor}
+        width={blockSize * highResScaleFactor}
+        style={{
+          position: 'absolute',
+          left: scrollX + offsetX,
+          width: blockSize,
+          height,
+        }}
+      />
+    </>
+  )
+})
+
+export default BoxTrackBlock

package/src/components/Header.tsx

@@ -1,20 +1,23 @@
-import React, { useState } from 'react'
-import { IconButton, Select, Typography } from '@mui/material'
+import React, { Suspense, lazy, useState } from 'react'
+import { IconButton, Typography } from '@mui/material'
 import { observer } from 'mobx-react'
 
 // locals
 import { MsaViewModel } from '../model'
-import SettingsDialog from './SettingsDlg'
-import AboutDialog from './AboutDlg'
-import DetailsDialog from './DetailsDlg'
-import TracklistDialog from './TracklistDlg'
 
 // icons
-import FolderOpenIcon from '@mui/icons-material/FolderOpen'
-import SettingsIcon from '@mui/icons-material/Settings'
-import HelpIcon from '@mui/icons-material/Help'
-import AssignmentIcon from '@mui/icons-material/Assignment'
-import ListIcon from '@mui/icons-material/List'
+import FolderOpen from '@mui/icons-material/FolderOpen'
+import Settings from '@mui/icons-material/Settings'
+import Help from '@mui/icons-material/Help'
+import Assignment from '@mui/icons-material/Assignment'
+import List from '@mui/icons-material/List'
+import ZoomControls from './ZoomControls'
+import MultiAlignmentSelector from './MultiAlignmentSelector'
+
+const SettingsDialog = lazy(() => import('./dialogs/SettingsDlg'))
+const AboutDialog = lazy(() => import('./dialogs/AboutDlg'))
+const DetailsDialog = lazy(() => import('./dialogs/DetailsDlg'))
+const TracklistDialog = lazy(() => import('./dialogs/TracklistDlg'))
 
 const InfoArea = observer(({ model }: { model: MsaViewModel }) => {
   const { mouseOverRowName, mouseCol } = model
@@ -32,7 +35,6 @@ const Header = observer(({ model }: { model: MsaViewModel }) => {
   const [aboutDialogViz, setAboutDialogViz] = useState(false)
   const [detailsDialogViz, setDetailsDialogViz] = useState(false)
   const [tracklistDialogViz, setTracklistDialogViz] = useState(false)
-  const { currentAlignment, alignmentNames } = model
 
   return (
     <div style={{ display: 'flex' }}>
@@ -51,67 +53,54 @@ const Header = observer(({ model }: { model: MsaViewModel }) => {
           }
         }}
       >
-        <FolderOpenIcon />
+        <FolderOpen />
       </IconButton>
       <IconButton onClick={() => setSettingsDialogViz(true)}>
-        <SettingsIcon />
+        <Settings />
       </IconButton>
       <IconButton onClick={() => setDetailsDialogViz(true)}>
-        <AssignmentIcon />
+        <Assignment />
       </IconButton>
       <IconButton onClick={() => setTracklistDialogViz(true)}>
-        <ListIcon />
+        <List />
       </IconButton>
-      {settingsDialogViz ? (
-        <SettingsDialog
-          open
-          model={model}
-          onClose={() => setSettingsDialogViz(false)}
-        />
-      ) : null}
-      {aboutDialogViz ? (
-        <AboutDialog open onClose={() => setAboutDialogViz(false)} />
-      ) : null}
-      {detailsDialogViz ? (
-        <DetailsDialog
-          open
-          model={model}
-          onClose={() => setDetailsDialogViz(false)}
-        />
-      ) : null}
+      <Suspense fallback={null}>
+        {settingsDialogViz ? (
+          <SettingsDialog
+            model={model}
+            onClose={() => setSettingsDialogViz(false)}
+          />
+        ) : null}
+        {aboutDialogViz ? (
+          <AboutDialog onClose={() => setAboutDialogViz(false)} />
+        ) : null}
+        {detailsDialogViz ? (
+          <DetailsDialog
+            model={model}
+            onClose={() => setDetailsDialogViz(false)}
+          />
+        ) : null}
 
-      {tracklistDialogViz ? (
-        <TracklistDialog
-          open
-          model={model}
-          onClose={() => setTracklistDialogViz(false)}
-        />
-      ) : null}
-      {alignmentNames.length > 0 ? (
-        <Select
-          native
-          value={currentAlignment}
-          size="small"
-          onChange={event => {
-            model.setCurrentAlignment(+(event.target.value as string))
-            model.setScrollX(0)
-            model.setScrollY(0)
-          }}
-        >
-          {alignmentNames.map((option, index) => (
-            <option key={`${option}-${index}`} value={index}>
-              {option}
-            </option>
-          ))}
-        </Select>
-      ) : null}
+        {tracklistDialogViz ? (
+          <TracklistDialog
+            model={model}
+            onClose={() => setTracklistDialogViz(false)}
+          />
+        ) : null}
+      </Suspense>
+      <MultiAlignmentSelector model={model} />
+      <ZoomControls model={model} />
       <InfoArea model={model} />
-      <div style={{ flex: 1 }} />
+      <Spacer />
       <IconButton onClick={() => setAboutDialogViz(true)}>
-        <HelpIcon />
+        <Help />
       </IconButton>
     </div>
   )
 })
 
+function Spacer() {
+  return <div style={{ flex: 1 }} />
+}
+
 export default Header