react-msaview 2.0.0 → 2.1.1

package/package.json

@@ -2,7 +2,7 @@
   "name": "react-msaview",
   "type": "module",
   "author": "Colin",
-  "version": "2.0.0",
+  "version": "2.1.1",
   "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",
+    "colord": "^2.9.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

@@ -1,6 +1,9 @@
-import Color from 'color'
+import { colord, extend } from 'colord'
+import namesPlugin from 'colord/plugins/names'
 import { transform } from './util'
 
+extend([namesPlugin])
+
 const colorSchemes = {
   clustal: {
     G: 'orange',
@@ -332,13 +335,13 @@ 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
 export default transform(colorSchemes, ([key, val]) => [
   key,
-  transform(val, ([letter, color]) => [letter, Color(color).hex()]),
+  transform(val, ([letter, color]) => [letter, colord(color).toHex()]),
 ])
 
 // info http://www.jalview.org/help/html/colourSchemes/clustal.html
@@ -347,7 +350,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 +497,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 +507,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