react-msaview 3.2.0 → 3.2.1

package/src/model.ts

@@ -53,6 +53,10 @@ 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'
 
 export interface Accession {
   accession: string
@@ -72,7 +76,6 @@ export interface TextTrackModel extends BasicTrackModel {
 }
 
 export interface ITextTrack {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   ReactComponent: React.FC<any>
   model: TextTrackModel
 }
@@ -514,6 +517,12 @@ function stateModelFactory() {
     }))
 
     .views(self => ({
+      /**
+       * #getter
+       */
+      get realAllowedGappyness() {
+        return self.hideGaps ? self.allowedGappyness : 100
+      },
       /**
        * #getter
        */
@@ -548,7 +557,7 @@ function stateModelFactory() {
        * #getter
        */
       get colorScheme() {
-        return colorSchemes[self.colorSchemeName]
+        return colorSchemes[self.colorSchemeName]!
       },
 
       /**
@@ -588,7 +597,7 @@ function stateModelFactory() {
       /**
        * #getter
        */
-      get menuItems() {
+      menuItems() {
         return []
       },
       /**
@@ -653,6 +662,8 @@ function stateModelFactory() {
        */
       get root() {
         let hier = hierarchy(this.tree, d => d.branchset)
+          // todo: investigate whether needed, typescript says branchset always true
+          // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
           .sum(d => (d.branchset ? 0 : 1))
           .sort((a, b) => ascending(a.data.length || 1, b.data.length || 1))
 
@@ -666,7 +677,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 +702,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 +739,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,
           ),
         )
       },
@@ -748,10 +777,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 +873,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 +1043,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 +1090,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 +1173,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 +1211,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 +1242,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 +1324,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 +1400,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

@@ -59,11 +59,11 @@
  */
 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
@@ -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 === ':') {

package/src/parsers/ClustalMSA.ts

@@ -11,12 +11,12 @@ export default class ClustalMSA {
     return this.MSA
   }
 
-  getRow(name: string) {
+  getRow(name: string): string {
     return this.MSA.alns.find(aln => aln.id === name)?.seq || ''
   }
 
   getWidth() {
-    return this.MSA.alns[0].seq.length
+    return this.MSA.alns[0]!.seq.length
   }
 
   getRowData() {

package/src/parsers/FastaMSA.ts

@@ -6,7 +6,7 @@ function parseSmallFasta(text: string) {
     .filter(t => /\S/.test(t))
     .map(entryText => {
       const [defLine, ...seqLines] = entryText.split('\n')
-      const [id, ...description] = defLine.split(' ')
+      const [id, ...description] = defLine!.split(' ')
       const descriptionStr = description.join(' ')
       const seqLinesStr = seqLines.join('')
       const sequence = seqLinesStr.replaceAll(/\s/g, '')
@@ -18,7 +18,7 @@ export default class FastaMSA {
   constructor(text: string) {
     this.MSA = {
       seqdata: Object.fromEntries(
-        parseSmallFasta(text).map(m => [`${m.id}`, m.sequence]),
+        parseSmallFasta(text).map(m => [m.id, m.sequence]),
       ),
     }
   }
@@ -36,11 +36,11 @@ export default class FastaMSA {
   }
 
   getRow(name: string) {
-    return this.MSA?.seqdata[name] || ''
+    return this.MSA.seqdata[name] || ''
   }
 
   getWidth() {
-    const name = Object.keys(this.MSA?.seqdata)[0]
+    const name = Object.keys(this.MSA.seqdata)[0]!
     return this.getRow(name).length
   }
 

package/src/parsers/StockholmMSA.ts

@@ -7,9 +7,9 @@ interface StockholmEntry {
     DE?: string[]
     NH?: string[]
   }
-  gs: {
+  gs?: {
     AC: Record<string, string>
-    DR: Record<string, string>
+    DR?: Record<string, string>
   }
   gc?: {
     SS_cons?: string
@@ -33,11 +33,11 @@ export default class StockholmMSA {
   }
 
   getRow(name: string) {
-    return this.MSA?.seqdata[name] || ''
+    return this.MSA.seqdata[name] || ''
   }
 
   getWidth() {
-    const name = Object.keys(this.MSA?.seqdata)[0]
+    const name = Object.keys(this.MSA.seqdata)[0]!
     return this.getRow(name).length
   }
 
@@ -56,7 +56,7 @@ export default class StockholmMSA {
   getRowData(rowName: string) {
     return {
       name: rowName,
-      accession: this.MSA.gs?.AC?.[rowName],
+      accession: this.MSA.gs?.AC[rowName],
       dbxref: this.MSA.gs?.DR?.[rowName],
     }
   }
@@ -74,10 +74,10 @@ export default class StockholmMSA {
       .map(([id, dr]) => [id, pdbRegex.exec(dr)] as const)
       .filter((item): item is [string, RegExpExecArray] => !!item[1])
       .map(([id, match]) => {
-        const pdb = match[1].toLowerCase()
-        const chain = match[2]
-        const startPos = +match[3]
-        const endPos = +match[4]
+        const pdb = match[1]!.toLowerCase()
+        const chain = match[2]!
+        const startPos = +match[3]!
+        const endPos = +match[4]!
         return { id, pdb, chain, startPos, endPos }
       })
 
@@ -93,7 +93,7 @@ export default class StockholmMSA {
   }
 
   getTree(): NodeWithIds {
-    const tree = this.MSA?.gf?.NH?.[0]
+    const tree = this.MSA.gf.NH?.[0]
     return tree
       ? generateNodeIds(parseNewick(tree))
       : {

package/src/renderToSvg.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react-refresh/only-export-components */
 import React from 'react'
 import { createRoot } from 'react-dom/client'
 import { when } from 'mobx'
@@ -153,13 +154,11 @@ function CoreRendering({
 
       <g
         clipPath={`url(#${clipId1})`}
-        /* eslint-disable-next-line react/no-danger */
         dangerouslySetInnerHTML={{ __html: ctx1.getSvg().innerHTML }}
       />
       <g
         clipPath={`url(#${clipId2})`}
         transform={`translate(${treeAreaWidth} 0)`}
-        /* eslint-disable-next-line react/no-danger */
         dangerouslySetInnerHTML={{ __html: ctx2.getSvg().innerHTML }}
       />
     </>

package/src/rowCoordinateCalculations.test.ts

@@ -0,0 +1,19 @@
+import { expect, test } from 'vitest'
+import { mouseOverCoordToGlobalCoord } from './rowCoordinateCalculations'
+test('blanks3', () => {
+  const blanks = [2, 5, 8]
+  ;(
+    [
+      [0, 0],
+      [1, 1],
+      [2, 3],
+      [3, 4],
+      [4, 6],
+      [5, 7],
+      [6, 9],
+      [7, 10],
+    ] as const
+  ).forEach(r => {
+    expect(mouseOverCoordToGlobalCoord(blanks, r[0])).toBe(r[1])
+  })
+})

package/src/rowCoordinateCalculations.ts

@@ -0,0 +1,26 @@
+export function mouseOverCoordToGlobalCoord(blanks: number[], pos: number) {
+  let i = 0 // 'mouse over coord'
+  let j = 0 // 'position in blanks array'
+  let k = 0 // 'global coord'/return value
+
+  for (; i < pos; i++, k++) {
+    // skip multiple gaps in a row
+    while (j < blanks.length && blanks[j]! - 1 === k) {
+      j++
+      k++
+    }
+  }
+  return k
+}
+
+export function globalCoordToRowSpecificCoord(seq: string, pos: number) {
+  let k = 0
+  for (let i = 0; i < pos; i++) {
+    if (seq[i] !== '-') {
+      k++
+    } else if (k >= pos) {
+      break
+    }
+  }
+  return k
+}

package/src/version.ts

@@ -1 +1 @@
-export const version = '3.2.0'
+export const version = '3.2.1'