react-msaview 1.3.1 → 2.0.0

package/{bundle/parseNewick.d.ts → src/parseNewick.ts}

@@ -57,8 +57,39 @@
  *   ]
  * }
  */
-export default function parse(s: any): {
-    branchset: {}[];
-    name: any;
-    length: number;
-};
+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 subtree = {}
+    switch (token) {
+      case '(': // new branchset
+        tree.branchset = [subtree]
+        ancestors.push(tree)
+        tree = subtree
+        break
+      case ',': // another branch
+        ancestors[ancestors.length - 1].branchset.push(subtree)
+        tree = subtree
+        break
+      case ')': // optional name next
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        tree = ancestors.pop() as Record<string, any>
+        break
+      case ':': // optional length next
+        break
+      default: {
+        const x = tokens[i - 1]
+        if (x === ')' || x === '(' || x === ',') {
+          tree.name = token
+        } else if (x === ':') {
+          tree.length = parseFloat(token)
+        }
+      }
+    }
+  }
+  return tree
+}

package/src/parsers/ClustalMSA.ts

@@ -0,0 +1,79 @@
+import { parse } from 'clustal-js'
+import { NodeWithIds } from '../util'
+export default class ClustalMSA {
+  private MSA: ReturnType<typeof parse>
+
+  constructor(text: string) {
+    this.MSA = parse(text)
+  }
+
+  getMSA() {
+    return this.MSA
+  }
+
+  getRow(name: string) {
+    return this.MSA.alns.find(aln => aln.id === name)?.seq.split('')
+  }
+
+  getWidth() {
+    return this.MSA.alns[0].seq.length
+  }
+
+  getRowData() {
+    return undefined
+  }
+
+  getHeader() {
+    return this.MSA.header
+  }
+
+  getNames() {
+    return this.MSA.alns.map(aln => aln.id)
+  }
+
+  getStructures() {
+    return {}
+  }
+
+  get alignmentNames() {
+    return []
+  }
+
+  getTree(): NodeWithIds {
+    return {
+      id: 'root',
+      name: 'root',
+      noTree: true,
+      branchset: this.getNames().map(name => ({
+        id: name,
+        name,
+        branchset: [],
+      })),
+    }
+  }
+
+  get seqConsensus() {
+    return this.MSA.consensus
+  }
+  get secondaryStructureConsensus() {
+    return undefined
+  }
+
+  get tracks() {
+    return this.seqConsensus?.trim()
+      ? [
+          {
+            id: 'seqConsensus',
+            name: 'Sequence consensus',
+            data: this.seqConsensus,
+            customColorScheme: {
+              '*': 'white',
+              ':': 'grey',
+              '.': 'darkgrey',
+              ' ': 'black',
+            },
+          },
+        ]
+      : []
+  }
+}

package/src/parsers/FastaMSA.ts

@@ -0,0 +1,82 @@
+import { NodeWithIds } from '../util'
+
+function parseSmallFasta(text: string) {
+  return text
+    .split('>')
+    .filter(t => /\S/.test(t))
+    .map(entryText => {
+      const [defLine, ...seqLines] = entryText.split('\n')
+      const [id, ...description] = defLine.split(' ')
+      const descriptionStr = description.join(' ')
+      const seqLinesStr = seqLines.join('')
+      const sequence = seqLinesStr.replace(/\s/g, '')
+      return { id, description: descriptionStr, sequence }
+    })
+}
+export default class FastaMSA {
+  private MSA: { seqdata: { [key: string]: string } }
+  constructor(text: string) {
+    this.MSA = {
+      seqdata: Object.fromEntries(
+        parseSmallFasta(text).map((m, i) => [`${m.id}-${i}`, m.sequence]),
+      ),
+    }
+  }
+
+  getMSA() {
+    return this.MSA
+  }
+
+  getRowData() {
+    return undefined
+  }
+
+  getNames() {
+    return Object.keys(this.MSA.seqdata)
+  }
+
+  getRow(name: string) {
+    return this.MSA?.seqdata[name]?.split('')
+  }
+
+  getWidth() {
+    const name = Object.keys(this.MSA?.seqdata)[0]
+    return this.getRow(name).length
+  }
+
+  getStructures() {
+    return {}
+  }
+
+  get alignmentNames() {
+    return []
+  }
+
+  getHeader() {
+    return {}
+  }
+
+  getTree(): NodeWithIds {
+    return {
+      id: 'root',
+      name: 'root',
+      noTree: true,
+      branchset: this.getNames().map(name => ({
+        id: name,
+        branchset: [],
+        name,
+      })),
+    }
+  }
+
+  get seqConsensus() {
+    return undefined
+  }
+  get secondaryStructureConsensus() {
+    return undefined
+  }
+
+  get tracks() {
+    return []
+  }
+}

package/src/parsers/StockholmMSA.ts

@@ -0,0 +1,137 @@
+import Stockholm from 'stockholm-js'
+import parseNewick from '../parseNewick'
+
+import { NodeWithIds, generateNodeIds } from '../util'
+type StockholmEntry = {
+  gf: {
+    DE?: string[]
+    NH?: string[]
+  }
+  gs: {
+    AC: Record<string, string>
+    DR: Record<string, string>
+  }
+  gc?: {
+    SS_cons?: string
+    seq_cons?: string
+  }
+  seqdata: { [key: string]: string }
+}
+
+export default class StockholmMSA {
+  private data: StockholmEntry[]
+  private MSA: StockholmEntry
+
+  constructor(text: string, currentAlignment: number) {
+    const res = Stockholm.parseAll(text)
+    this.data = res
+    this.MSA = res[currentAlignment]
+  }
+
+  getMSA() {
+    return this.MSA
+  }
+
+  getRow(name: string) {
+    return this.MSA?.seqdata[name]?.split('')
+  }
+
+  getWidth() {
+    const name = Object.keys(this.MSA?.seqdata)[0]
+    return this.getRow(name).length
+  }
+
+  get alignmentNames() {
+    return this.data.map((aln, idx) => aln.gf.DE?.[0] || `Alignment ${idx + 1}`)
+  }
+
+  getHeader() {
+    return {
+      General: this.MSA.gf,
+      Accessions: this.MSA.gs?.AC,
+      Dbxref: this.MSA.gs?.DR,
+    }
+  }
+
+  getRowData(rowName: string) {
+    return {
+      name: rowName,
+      accession: this.MSA.gs?.AC[rowName],
+      dbxref: this.MSA.gs?.DR[rowName],
+    }
+  }
+
+  getNames() {
+    return Object.keys(this.MSA.seqdata)
+  }
+
+  getSeqCoords() {}
+
+  getStructures() {
+    const pdbRegex = /PDB; +(\S+) +(\S); ([0-9]+)-([0-9]+)/
+    const ent = this.MSA
+    const args = Object.entries(ent.gs?.DR || {})
+      .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]
+        return { id, pdb, chain, startPos, endPos }
+      })
+
+    const ret = {} as Record<string, Omit<typeof args[0], 'id'>[]>
+    for (const entry of args) {
+      const { id, ...rest } = entry
+      if (!ret[id]) {
+        ret[id] = []
+      }
+      ret[id].push(rest)
+    }
+    return ret
+  }
+
+  getTree(): NodeWithIds {
+    const tree = this.MSA?.gf?.NH?.[0]
+    return tree
+      ? generateNodeIds(parseNewick(tree))
+      : {
+          id: 'root',
+          name: 'root',
+          noTree: true,
+          branchset: this.getNames().map(name => ({
+            id: name,
+            branchset: [],
+            name,
+          })),
+        }
+  }
+
+  get seqConsensus() {
+    return this.MSA.gc?.seq_cons
+  }
+  get secondaryStructureConsensus() {
+    return this.MSA.gc?.SS_cons
+  }
+
+  get tracks() {
+    return [
+      {
+        id: 'seqConsensus',
+        name: 'Sequence consensus',
+        data: this.seqConsensus,
+        customColorScheme: {},
+      },
+      {
+        id: 'secondaryStruct',
+        name: 'Secondary-structure',
+        data: this.secondaryStructureConsensus,
+        customColorScheme: {
+          '>': 'pink',
+          '<': 'lightblue',
+        },
+      },
+    ]
+  }
+}

package/src/util.ts

@@ -0,0 +1,142 @@
+import Color from 'color'
+import { HierarchyNode } from 'd3-hierarchy'
+import { max } from 'd3-array'
+import { Theme } from '@mui/material'
+
+export function transform<T>(
+  obj: Record<string, T>,
+  cb: (arg0: [string, T]) => [string, T],
+) {
+  return Object.fromEntries(Object.entries(obj).map(cb))
+}
+
+interface Node {
+  branchset?: Node[]
+  name?: string
+  [key: string]: unknown
+}
+
+export type NodeWithIds = {
+  id: string
+  name: string
+  branchset: NodeWithIds[]
+  length?: number
+  noTree?: boolean
+}
+
+export type NodeWithIdsAndLength = {
+  id: string
+  name: string
+  branchset: NodeWithIdsAndLength[]
+  noTree?: boolean
+  length: number
+}
+
+export function generateNodeIds(
+  tree: Node,
+  parent = 'node',
+  depth = 0,
+): NodeWithIds {
+  const id = `${parent}-${depth}`
+
+  return {
+    ...tree,
+    id,
+    name: tree.name || id,
+    branchset:
+      tree.branchset?.map((b, i) =>
+        generateNodeIds(b, `${id}-${i}`, depth + 1),
+      ) || [],
+  }
+}
+
+export function colorContrast(
+  colorScheme: { [key: string]: string },
+  theme: Theme,
+) {
+  return transform(colorScheme, ([letter, color]) => [
+    letter,
+    theme.palette.getContrastText(Color(color).hex()),
+  ])
+}
+
+export function parseGFF(str?: string) {
+  return str
+    ?.split('\n')
+    .map(f => f.trim())
+    .filter(f => !!f && !f.startsWith('#'))
+    .map(f => {
+      const [seq_id, source, type, start, end, score, strand, phase, col9] =
+        f.split('\t')
+
+      return {
+        seq_id,
+        source,
+        type,
+        start: +start,
+        end: +end,
+        score: +score,
+        strand,
+        phase,
+        ...Object.fromEntries(
+          col9
+            .split(';')
+            .map(f => f.trim())
+            .filter(f => !!f)
+            .map(f => f.split('='))
+            .map(([key, val]) => [
+              key.trim(),
+              decodeURIComponent(val).trim().split(',').join(' '),
+            ]),
+        ),
+      }
+    })
+}
+
+export function skipBlanks(blanks: number[], arg: string | string[]) {
+  let s = ''
+  let b = 0
+  for (let j = 0; j < arg.length; j++) {
+    if (j === blanks[b]) {
+      b++
+    } else {
+      s += arg[j]
+    }
+  }
+  return s
+}
+
+export function setBrLength(
+  d: HierarchyNode<NodeWithIds>,
+  y0: number,
+  k: number,
+) {
+  // @ts-expect-error
+  d.len = (y0 += Math.max(d.data.length || 0, 0)) * k
+  d.children?.forEach(d => {
+    setBrLength(d, y0, k)
+  })
+}
+
+export function maxLength(d: HierarchyNode<NodeWithIds>): number {
+  return (
+    (d.data.length || 1) + (d.children ? max(d.children, maxLength) || 0 : 0)
+  )
+}
+
+// Collapse the node and all it's children, from
+// https://bl.ocks.org/d3noob/43a860bc0024792f8803bba8ca0d5ecd
+export function collapse(d: HierarchyNode<NodeWithIds>) {
+  if (d.children) {
+    // @ts-expect-error
+    d._children = d.children
+    // @ts-expect-error
+    d._children.forEach(collapse)
+    // @ts-expect-error
+    d.children = null
+  }
+}
+
+export function clamp(min: number, num: number, max: number) {
+  return Math.min(Math.max(num, min), max)
+}

package/src/version.ts

@@ -0,0 +1 @@
+export const version = "2.0.0";

package/bundle/colorSchemes.d.ts

@@ -1,16 +0,0 @@
-declare const _default: {
-    [k: string]: {
-        [key: string]: string;
-    };
-};
-export default _default;
-export declare function getClustalXColor(stats: {
-    [key: string]: number;
-}, model: {
-    columns: Record<string, string>;
-}, row: number, col: number): "rgb(128,179,230)" | "#d88" | "rgb(192, 72, 192)" | "rgb(204, 77, 204)" | "#8f8" | "rgb(26,204,26)" | "rgb(240, 128, 128)" | "rgb(240, 144, 72)" | "rgb(204, 204, 0)" | "rgb(26, 179, 179)" | undefined;
-export declare function getPercentIdentityColor(stats: {
-    [key: string]: number;
-}, model: {
-    columns: Record<string, string>;
-}, row: number, col: number): string | undefined;