react-msaview 3.2.0 → 3.2.2

package/src/components/tree/dialogs/TreeNodeInfoDialog.tsx

@@ -11,7 +11,7 @@ import {
 import type { MsaViewModel } from '../../../model'
 import SequenceTextArea from '../../SequenceTextArea'
 
-export default observer(function ({
+const TreeNodeInfoDialog = observer(function ({
   info,
   model,
   nodeName,
@@ -24,15 +24,26 @@ export default observer(function ({
 }) {
   const { treeMetadata, rows } = model
   const metadata = treeMetadata[nodeName]
-  const [name, sequence] = rows.find(f => f[0] === nodeName)!
+  const res = rows.find(f => f[0] === nodeName)
   return (
-    <Dialog onClose={() => onClose()} open title="Tree node info" maxWidth="xl">
+    <Dialog
+      onClose={() => {
+        onClose()
+      }}
+      open
+      title="Tree node info"
+      maxWidth="xl"
+    >
       <DialogContent>
         <BaseCard title="Attributes">
           <Attributes attributes={{ nodeName, ...info }} />
         </BaseCard>
         <BaseCard title="Sequence">
-          <SequenceTextArea str={[[name, sequence]]} />
+          {res ? (
+            <SequenceTextArea str={[res]} />
+          ) : (
+            <div>Sequence not found</div>
+          )}
         </BaseCard>
         {metadata ? (
           <BaseCard title="Extra metadata">
@@ -43,3 +54,5 @@ export default observer(function ({
     </Dialog>
   )
 })
+
+export default TreeNodeInfoDialog

package/src/components/tree/renderTreeCanvas.ts

@@ -147,8 +147,6 @@ export function renderTreeLabels({
     marginLeft,
     leaves,
     noTree,
-    // eslint-disable-next-line  @typescript-eslint/no-unused-vars
-    rowHeight: _rowHeight, // this is needed for redrawing after zoom change
   } = model
   const by = blockSizeYOverride || blockSize
   if (labelsAlignRight) {
@@ -250,6 +248,8 @@ export function renderTreeCanvas({
     showTreeText,
     marginLeft,
     nref,
+    // eslint-disable-next-line  @typescript-eslint/no-unused-vars
+    rowHeight: _rowHeight, // this is needed for redrawing after zoom change
   } = model
   const by = blockSizeYOverride || blockSize
 

package/src/components/util.ts

@@ -11,7 +11,7 @@ export function chooseGridPitch(
   scale = Math.abs(scale)
   const minMajorPitchBp = minMajorPitchPx * scale
   const majorMagnitude = Number.parseInt(
-    Number(minMajorPitchBp).toExponential().split(/e/i)[1],
+    Number(minMajorPitchBp).toExponential().split(/e/i)[1]!,
     10,
   )
 
@@ -50,9 +50,6 @@ export function makeTicks(
 
   let minBase = start
   let maxBase = end
-  if (minBase === null || maxBase === null) {
-    return []
-  }
 
   if (bpPerPx < 0) {
     ;[minBase, maxBase] = [maxBase, minBase]

package/src/ggplotPalettes.ts

@@ -19,7 +19,7 @@ const palettes = [
 ]
 
 export function getPalette(l: number) {
-  return palettes[Math.min(l, palettes.length - 1)]
+  return palettes[Math.min(l, palettes.length - 1)]!
 }
 
 export default palettes

package/src/launchInterProScan.ts

@@ -38,7 +38,7 @@ async function runInterProScan({
     method: 'POST',
     body: new URLSearchParams({
       email: 'colin.diesh@gmail.com',
-      sequence: `${seq}`,
+      sequence: seq,
       programs: programs.join(','),
     }),
   })
@@ -47,7 +47,7 @@ async function runInterProScan({
     jobId,
     onProgress,
   })
-  return loadInterProScanResultsWithStatus({ jobId, model })
+  await loadInterProScanResultsWithStatus({ jobId, model })
 }
 
 export function loadInterProScanResults(jobId: string) {
@@ -65,6 +65,7 @@ async function wait({
 }) {
   const url = `${base}/iprscan5/status/${jobId}`
   try {
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
     while (true) {
       for (let i = 0; i < 10; i++) {
         await timeout(1000)
@@ -101,14 +102,13 @@ export async function launchInterProScan({
   try {
     onProgress({ msg: `Launching ${algorithm} MSA` })
     if (algorithm === 'interproscan') {
-      const result = await runInterProScan({
+      await runInterProScan({
         seq,
         onJobId,
         onProgress,
         programs,
         model,
       })
-      return result
     }
     throw new Error('unknown algorithm')
   } finally {
@@ -130,7 +130,7 @@ export async function loadInterProScanResultsWithStatus({
     })
     const ret = await loadInterProScanResults(jobId)
     model.setInterProAnnotations(
-      Object.fromEntries(ret.results.map(r => [r.xref[0].id, r])),
+      Object.fromEntries(ret.results.map(r => [r.xref[0]!.id, r])),
     )
     model.setShowDomains(true)
     getSession(model).notify(`Loaded interproscan ${jobId} results`, 'success')

package/src/model/DialogQueue.ts

@@ -8,7 +8,6 @@ export function DialogQueueSessionMixin() {
   return types
     .model('DialogQueueSessionMixin', {})
     .volatile(() => ({
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
       queueOfDialogs: [] as [DialogComponentType, any][],
     }))
     .views(self => ({

package/src/model.ts

@@ -42,6 +42,7 @@ import TextTrack from './components/TextTrack'
 
 // parsers
 import ClustalMSA from './parsers/ClustalMSA'
+import EmfMSA from './parsers/EmfMSA'
 import StockholmMSA from './parsers/StockholmMSA'
 import FastaMSA from './parsers/FastaMSA'
 import parseNewick from './parseNewick'
@@ -53,6 +54,11 @@ import { DialogQueueSessionMixin } from './model/DialogQueue'
 import { TreeF } from './model/treeModel'
 import { MSAModelF } from './model/msaModel'
 import type { InterProScanResults } from './launchInterProScan'
+import {
+  mouseOverCoordToGlobalCoord,
+  globalCoordToRowSpecificCoord,
+} from './rowCoordinateCalculations'
+import EmfTree from './parsers/EmfTree'
 
 export interface Accession {
   accession: string
@@ -72,7 +78,6 @@ export interface TextTrackModel extends BasicTrackModel {
 }
 
 export interface ITextTrack {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   ReactComponent: React.FC<any>
   model: TextTrackModel
 }
@@ -147,7 +152,7 @@ function stateModelFactory() {
          * #property
          * height of each row, px
          */
-        rowHeight: 20,
+        rowHeight: 18,
 
         /**
          * #property
@@ -165,7 +170,7 @@ function stateModelFactory() {
          * #property
          * width of columns, px
          */
-        colWidth: 16,
+        colWidth: 14,
 
         /**
          * #property
@@ -221,7 +226,11 @@ function stateModelFactory() {
          * data from the loaded tree/msa/treeMetadata, generally loaded by
          * autorun
          */
-        data: types.optional(DataModelF(), { tree: '', msa: '' }),
+        data: types.optional(DataModelF(), {
+          tree: '',
+          msa: '',
+          treeMetadata: '',
+        }),
 
         /**
          * #property
@@ -473,7 +482,7 @@ function stateModelFactory() {
       /**
        * #action
        */
-      setData(data: { msa?: string; tree?: string }) {
+      setData(data: { msa?: string; tree?: string; treeMetadata?: string }) {
         self.data = cast(data)
       },
 
@@ -514,6 +523,12 @@ function stateModelFactory() {
     }))
 
     .views(self => ({
+      /**
+       * #getter
+       */
+      get realAllowedGappyness() {
+        return self.hideGaps ? self.allowedGappyness : 100
+      },
       /**
        * #getter
        */
@@ -548,7 +563,7 @@ function stateModelFactory() {
        * #getter
        */
       get colorScheme() {
-        return colorSchemes[self.colorSchemeName]
+        return colorSchemes[self.colorSchemeName]!
       },
 
       /**
@@ -588,7 +603,7 @@ function stateModelFactory() {
       /**
        * #getter
        */
-      get menuItems() {
+      menuItems() {
         return []
       },
       /**
@@ -605,11 +620,13 @@ function stateModelFactory() {
         if (text) {
           if (Stockholm.sniff(text)) {
             return new StockholmMSA(text, self.currentAlignment)
-          }
-          if (text.startsWith('>')) {
+          } else if (text.startsWith('>')) {
             return new FastaMSA(text)
+          } else if (text.startsWith('SEQ')) {
+            return new EmfMSA(text)
+          } else {
+            return new ClustalMSA(text)
           }
-          return new ClustalMSA(text)
         }
         return null
       },
@@ -624,14 +641,25 @@ function stateModelFactory() {
        * #getter
        */
       get tree(): NodeWithIds {
-        const ret = self.data.tree
-          ? generateNodeIds(parseNewick(self.data.tree))
-          : this.MSA?.getTree() || {
-              noTree: true,
-              branchset: [],
-              id: 'empty',
-              name: 'empty',
-            }
+        const text = self.data.tree
+        let ret: NodeWithIds
+        if (text) {
+          let t: string
+          if (text.startsWith('SEQ')) {
+            const r = new EmfTree(text)
+            t = r.data.tree
+          } else {
+            t = text
+          }
+          ret = generateNodeIds(parseNewick(t))
+        } else {
+          ret = this.MSA?.getTree() || {
+            noTree: true,
+            children: [],
+            id: 'empty',
+            name: 'empty',
+          }
+        }
         return reparseTree(ret)
       },
       /**
@@ -652,8 +680,10 @@ function stateModelFactory() {
        * #getter
        */
       get root() {
-        let hier = hierarchy(this.tree, d => d.branchset)
-          .sum(d => (d.branchset ? 0 : 1))
+        let hier = hierarchy(this.tree, d => d.children)
+          // todo: investigate whether needed, typescript says children always true
+          // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+          .sum(d => (d.children ? 0 : 1))
           .sort((a, b) => ascending(a.data.length || 1, b.data.length || 1))
 
         if (self.showOnly) {
@@ -666,7 +696,9 @@ function stateModelFactory() {
         ;[...self.collapsed, ...self.collapsedLeaves]
           .map(collapsedId => hier.find(node => node.data.id === collapsedId))
           .filter(notEmpty)
-          .map(node => collapse(node))
+          .map(node => {
+            collapse(node)
+          })
 
         return hier
       },
@@ -689,25 +721,34 @@ function stateModelFactory() {
        * #getter
        */
       get blanks() {
-        const { allowedGappyness } = self
+        const { hideGaps, realAllowedGappyness } = self
         const blanks = []
-        const strs = this.leaves
-          .map(leaf => this.MSA?.getRow(leaf.data.name))
-          .filter((item): item is string => !!item)
-
-        for (let i = 0; i < strs[0]?.length; i++) {
-          let counter = 0
-          for (const str of strs) {
-            if (str[i] === '-') {
-              counter++
+        if (hideGaps) {
+          const strs = this.leaves
+            .map(leaf => this.MSA?.getRow(leaf.data.name))
+            .filter((item): item is string => !!item)
+          if (strs.length) {
+            for (let i = 0; i < strs[0]!.length; i++) {
+              let counter = 0
+              for (const str of strs) {
+                if (str[i] === '-') {
+                  counter++
+                }
+              }
+              if (counter / strs.length >= realAllowedGappyness / 100) {
+                blanks.push(i)
+              }
             }
           }
-          if (counter / strs.length >= allowedGappyness / 100) {
-            blanks.push(i)
-          }
         }
         return blanks
       },
+      /**
+       * #getter
+       */
+      get blanksSet() {
+        return new Set(this.blanks)
+      },
       /**
        * #getter
        */
@@ -717,13 +758,20 @@ function stateModelFactory() {
           .map(leaf => [leaf.data.name, MSA?.getRow(leaf.data.name)] as const)
           .filter((f): f is [string, string] => !!f[1])
       },
+
+      /**
+       * #getter
+       */
+      get rowMap() {
+        return new Map(this.rows)
+      },
       /**
        * #getter
        */
       get columns() {
         return Object.fromEntries(
           this.rows.map(
-            (row, index) => [row[0], this.columns2d[index]] as const,
+            (row, index) => [row[0], this.columns2d[index]!] as const,
           ),
         )
       },
@@ -737,7 +785,7 @@ function stateModelFactory() {
        * #getter
        */
       get fontSize() {
-        return Math.min(Math.max(6, self.rowHeight - 8), 18)
+        return Math.min(Math.max(6, self.rowHeight - 3), 18)
       },
       /**
        * #getter
@@ -748,10 +796,11 @@ function stateModelFactory() {
         for (const column of columns) {
           for (let j = 0; j < column.length; j++) {
             const l = r[j] || {}
-            if (!l[column[j]]) {
-              l[column[j]] = 0
+            const cj = column[j]!
+            if (!l[cj]) {
+              l[cj] = 0
             }
-            l[column[j]]++
+            l[cj]++
             r[j] = l
           }
         }
@@ -843,7 +892,7 @@ function stateModelFactory() {
         const ret = []
         for (const by of self.blocksY) {
           for (const bx of self.blocksX) {
-            ret.push([bx, by])
+            ret.push([bx, by] as const)
           }
         }
         return ret
@@ -1013,7 +1062,7 @@ function stateModelFactory() {
        */
       get conservation() {
         if (self.columns2d.length) {
-          for (let i = 0; i < self.columns2d[0].length; i++) {
+          for (let i = 0; i < self.columns2d[0]!.length; i++) {
             const col = []
             for (const column of self.columns2d) {
               col.push(column[i])
@@ -1060,28 +1109,39 @@ function stateModelFactory() {
         return self.msaAreaWidth < self.totalWidth
       },
 
+      /**
+       * #getter
+       */
+      get rowNamesSet() {
+        return new Map(self.rowNames.map((r, idx) => [r, idx]))
+      },
+
       /**
        * #method
-       * return a row-specific sequence coordinate, skipping gaps, given a global
-       * coordinate
+       * return a row-specific letter, or undefined if gap
        */
-      globalCoordToRowSpecificSeqCoord(rowName: string, position: number) {
-        const { rowNames, rows } = self
-        const index = rowNames.indexOf(rowName)
-        if (index !== -1 && rows[index]) {
-          const row = rows[index][1]
+      mouseOverCoordToRowLetter(rowName: string, position: number) {
+        const { rowMap, blanks } = self
+        return rowMap.get(rowName)?.[
+          mouseOverCoordToGlobalCoord(blanks, position)
+        ]
+      },
 
-          let k = 0
-          for (let i = 0; i < position; i++) {
-            if (row[i] !== '-') {
-              k++
-            } else if (k >= position) {
-              break
-            }
-          }
-          return k
+      /**
+       * #method
+       * return a row-specific sequence coordinate, skipping gaps, given a
+       * global coordinate
+       */
+      mouseOverCoordToGapRemovedRowCoord(rowName: string, position: number) {
+        const { rowMap, blanks } = self
+        const seq = rowMap.get(rowName)
+        if (seq !== undefined) {
+          const pos2 = mouseOverCoordToGlobalCoord(blanks, position)
+          const pos1 = globalCoordToRowSpecificCoord(seq, pos2)
+          return seq[pos1] === '-' || !seq[pos1] ? undefined : pos1
+        } else {
+          return undefined
         }
-        return 0
       },
 
       /**
@@ -1132,19 +1192,17 @@ function stateModelFactory() {
       /**
        * #getter
        */
-      get tidyTypes() {
+      get tidyInterProAnnotationTypes() {
         const types = new Map<string, Accession>()
-        if (this.tidyAnnotations) {
-          for (const { name, accession, description } of this.tidyAnnotations) {
-            types.set(accession, { name, accession, description })
-          }
+        for (const annot of this.tidyInterProAnnotations) {
+          types.set(annot.accession, annot)
         }
         return types
       },
       /**
        * #getter
        */
-      get tidyAnnotations() {
+      get tidyInterProAnnotations() {
         const ret = []
         const { interProAnnotations } = self
         if (interProAnnotations) {
@@ -1172,16 +1230,16 @@ function stateModelFactory() {
       /**
        * #getter
        */
-      get tidyFilteredAnnotations() {
-        return this.tidyAnnotations.filter(r =>
+      get tidyFilteredInterProAnnotations() {
+        return this.tidyInterProAnnotations.filter(r =>
           self.featureFilters.get(r.accession),
         )
       },
       /**
        * #getter
        */
-      get tidyFilteredGatheredAnnotations() {
-        return groupBy(this.tidyFilteredAnnotations, r => r.id)
+      get tidyFilteredGatheredInterProAnnotations() {
+        return groupBy(this.tidyFilteredInterProAnnotations, r => r.id)
       },
     }))
     .views(self => ({
@@ -1203,12 +1261,12 @@ function stateModelFactory() {
        * #getter
        */
       get fillPalette() {
-        const arr = [...self.tidyTypes.keys()]
+        const arr = [...self.tidyInterProAnnotationTypes.keys()]
         let i = 0
         const map = {} as Record<string, string>
         for (const key of arr) {
           const k = Math.min(arr.length - 1, palettes.length - 1)
-          map[key] = palettes[k][i]
+          map[key] = palettes[k]![i]!
           i++
         }
         return map
@@ -1285,7 +1343,7 @@ function stateModelFactory() {
         addDisposer(
           self,
           autorun(() => {
-            for (const key of self.tidyTypes.keys()) {
+            for (const key of self.tidyInterProAnnotationTypes.keys()) {
               this.initFilter(key)
             }
           }),
@@ -1361,17 +1419,21 @@ function stateModelFactory() {
           }),
         )
 
+        // force colStats not to go stale
+        // xref solution https://github.com/mobxjs/mobx/issues/266#issuecomment-222007278
+        // xref problem https://github.com/GMOD/react-msaview/issues/75
         addDisposer(
           self,
           autorun(() => {
-            // force colStats not to go stale,
-            // xref solution https://github.com/mobxjs/mobx/issues/266#issuecomment-222007278
-            // xref problem https://github.com/GMOD/react-msaview/issues/75
+            // eslint-disable-next-line  @typescript-eslint/no-unused-expressions
             self.colStats
+            // eslint-disable-next-line  @typescript-eslint/no-unused-expressions
             self.colStatsSums
+            // eslint-disable-next-line  @typescript-eslint/no-unused-expressions
             self.columns
           }),
         )
+
         // autorun synchronizes treeWidth with treeAreaWidth
         addDisposer(
           self,

package/src/parseGFF.ts

@@ -8,23 +8,25 @@ export function parseGFF(str?: string) {
         f.split('\t')
 
       return {
-        seq_id,
-        source,
-        type,
-        start: +start,
-        end: +end,
-        score: +score,
-        strand,
-        phase,
+        seq_id: seq_id!,
+        source: source!,
+        type: type!,
+        start: +start!,
+        end: +end!,
+        score: +score!,
+        strand: strand!,
+        phase: phase!,
         ...Object.fromEntries(
-          col9
+          col9!
             .split(';')
             .map(f => f.trim())
             .filter(f => !!f)
             .map(f => f.split('='))
             .map(([key, val]) => [
-              key.trim(),
-              decodeURIComponent(val).trim().split(',').join(' '),
+              key!.trim(),
+              val
+                ? decodeURIComponent(val).trim().split(',').join(' ')
+                : undefined,
             ]),
         ),
       }

package/src/parseNewick.ts

@@ -34,13 +34,13 @@
  * Converted to JSON:
  * {
  *   name: "F",
- *   branchset: [
+ *   children: [
  *     {name: "A", length: 0.1},
  *     {name: "B", length: 0.2},
  *     {
  *       name: "E",
  *       length: 0.5,
- *       branchset: [
+ *       children: [
  *         {name: "C", length: 0.3},
  *         {name: "D", length: 0.4}
  *       ]
@@ -50,29 +50,29 @@
  *
  * Converted to JSON, but with no names or lengths:
  * {
- *   branchset: [
+ *   children: [
  *     {}, {}, {
- *       branchset: [{}, {}]
+ *       children: [{}, {}]
  *     }
  *   ]
  * }
  */
 export default function parse(s: string) {
   const ancestors = []
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
   let tree = {} as Record<string, any>
   const tokens = s.split(/\s*(;|\(|\)|,|:)\s*/)
   for (let i = 0; i < tokens.length; i++) {
-    const token = tokens[i]
+    const token = tokens[i]!
     const subtree = {}
     switch (token) {
-      case '(': // new branchset
-        tree.branchset = [subtree]
+      case '(': // new children
+        tree.children = [subtree]
         ancestors.push(tree)
         tree = subtree
         break
       case ',': // another branch
-        ancestors.at(-1)?.branchset.push(subtree)
+        ancestors.at(-1)?.children.push(subtree)
         tree = subtree
         break
       case ')': // optional name next
@@ -81,7 +81,7 @@ export default function parse(s: string) {
       case ':': // optional length next
         break
       default: {
-        const x = tokens[i - 1]
+        const x = tokens[i - 1]!
         if (x === ')' || x === '(' || x === ',') {
           tree.name = token
         } else if (x === ':') {