react-msaview 1.3.1 → 2.0.0

package/src/components/data/seq2.ts

@@ -0,0 +1,35 @@
+export const smallMSA = `CLUSTAL O(1.2.3) multiple sequence alignment
+UniProt/Swiss-Prot|P26898|IL2RA_SHEEP      MEPSLLMWRFFVFIVVPGCVTEACHDDPPSLRNA----------MFKVLRYE----VGTM
+UniProt/Swiss-Prot|P01590|IL2RA_MOUSE      MEPRLLMLGFLSLTIVPSCRAELCLYDPPEVPNA----------TFKALSYK----NGTI
+UniProt/Swiss-Prot|P41690|IL2RA_FELCA      MEPSLLLWGILTFVVVHGHVTELCDENPPDIQHA----------TFKALTYK----TGTM
+UniProt/Swiss-Prot|P01589|IL2RA_HUMAN      MDSYLLMWGLLTFIMVPGCQAELCDDDPPEIPHA----------TFKAMAYK----EGTM
+UniProt/Swiss-Prot|Q5MNY4|IL2RA_MACMU      MDPYLLMWGLLTFITVPGCQAELCDDDPPKITHA----------TFKAVAYK----EGTM
+UniProt/Swiss-Prot|Q95118|IL2RG_BOVIN      -----------------------------------LLMWGLLT-----------------
+UniProt/Swiss-Prot|P40321|IL2RG_CANFA      MLKPPLPLRSLLFLQLSLLGVGLNSTVPMPNGNEDIT------PDFFLTATPSETLSVSS
+UniProt/Swiss-Prot|P26896|IL2RB_RAT        MATVDLSWRLPLYILLLLLATT--------------------------------WVSAAV
+UniProt/Swiss-Prot|Q8BZM1|GLMN_MOUSE       PLPLRSLLFLQLPLLGVGLNP------------------PLPLRSLLFLQLPLLGVGLNP
+UniProt/Swiss-Prot|P36835|IL2_CAPHI        -----------LLGVGLNPKFLTP------------------------------------
+UniProt/Swiss-Prot|Q7JFM4|IL2_AOTVO        MLKPPLPLRSLLFLQLPLLGVGLNPKFLTPSGNEDIGGKPGTGGDFFLTSTPAGTLDVST
+UniProt/Swiss-Prot|Q29416|IL2_CANFA        --------------LFLQLSLLG-------------------------------------
+`
+
+export const smallMSAOnly = `CLUSTAL O(1.2.4) multiple sequence alignment
+
+
+sp|P69905|HBA_HUMAN       MVLSPADKTNVKAAWGKVGAHAGEYGAEALERMFLSFPTTKTYFPHFDLSHGSAQVKGHG	60
+sp|P01942|HBA_MOUSE       MVLSGEDKSNIKAAWGKIGGHGAEYGAEALERMFASFPTTKTYFPHFDVSHGSAQVKGHG	60
+sp|P13786|HBAZ_CAPHI      MSLTRTERTIILSLWSKISTQADVIGTETLERLFSCYPQAKTYFPHFDLHSGSAQLRAHG	60
+                          * *:  ::: : : *.*:. :.   *:*:***:* .:* :********:  ****::.**
+
+sp|P69905|HBA_HUMAN       KKVADALTNAVAHVDDMPNALSALSDLHAHKLRVDPVNFKLLSHCLLVTLAAHLPAEFTP	120
+sp|P01942|HBA_MOUSE       KKVADALASAAGHLDDLPGALSALSDLHAHKLRVDPVNFKLLSHCLLVTLASHHPADFTP	120
+sp|P13786|HBAZ_CAPHI      SKVVAAVGDAVKSIDNVTSALSKLSELHAYVLRVDPVNFKFLSHCLLVTLASHFPADFTA	120
+                          .**. *: .*.  :*:: .*** **:***: *********:**********:* **:**
+
+sp|P69905|HBA_HUMAN       AVHASLDKFLASVSTVLTSKYR	142
+sp|P01942|HBA_MOUSE       AVHASLDKFLASVSTVLTSKYR	142
+sp|P13786|HBAZ_CAPHI      DAHAAWDKFLSIVSGVLTEKYR	142
+                           .**: ****: ** ***.***`
+
+export const smallTree =
+  '(((UniProt/Swiss-Prot|P26898|IL2RA_SHEEP:0.24036,(UniProt/Swiss-Prot|P41690|IL2RA_FELCA:0.17737,(UniProt/Swiss-Prot|P01589|IL2RA_HUMAN:0.03906,UniProt/Swiss-Prot|Q5MNY4|IL2RA_MACMU:0.03787):0.13033):0.04964):0.02189,UniProt/Swiss-Prot|P01590|IL2RA_MOUSE:0.23072):0.06814,(((UniProt/Swiss-Prot|Q95118|IL2RG_BOVIN:0.09600,UniProt/Swiss-Prot|P40321|IL2RG_CANFA:0.09845):0.25333,UniProt/Swiss-Prot|Q29416|IL2_CANFA:-0.35055):0.10231,(UniProt/Swiss-Prot|P26896|IL2RB_RAT:0.33631,UniProt/Swiss-Prot|Q7JFM4|IL2_AOTVO:-0.33631):0.10166):0.01607,(UniProt/Swiss-Prot|Q8BZM1|GLMN_MOUSE:0.32378,UniProt/Swiss-Prot|P36835|IL2_CAPHI:-0.32378):0.09999)'

package/src/components/util.ts

@@ -0,0 +1,94 @@
+/**
+ * Given a scale ( bp/px ) and minimum distances (px) between major and minor
+ * gridlines, return an object like `{ majorPitch: bp, minorPitch: bp }` giving
+ * the gridline pitches to use.
+ */
+export function chooseGridPitch(
+  scale: number,
+  minMajorPitchPx: number,
+  minMinorPitchPx: number,
+) {
+  scale = Math.abs(scale)
+  const minMajorPitchBp = minMajorPitchPx * scale
+  const majorMagnitude = parseInt(
+    Number(minMajorPitchBp).toExponential().split(/e/i)[1],
+    10,
+  )
+
+  let majorPitch = 10 ** majorMagnitude
+  while (majorPitch < minMajorPitchBp) {
+    majorPitch *= 2
+    if (majorPitch >= minMajorPitchBp) {
+      break
+    }
+    majorPitch *= 2.5
+  }
+
+  majorPitch = Math.max(majorPitch, 5)
+
+  const majorPitchPx = majorPitch / scale
+
+  let minorPitch = 0
+  if (!(majorPitch % 10) && majorPitchPx / 10 >= minMinorPitchPx) {
+    minorPitch = majorPitch / 10
+  } else if (!(majorPitch % 5) && majorPitchPx / 5 >= minMinorPitchPx) {
+    minorPitch = majorPitch / 5
+  } else if (!(majorPitch % 2) && majorPitchPx / 2 >= minMinorPitchPx) {
+    minorPitch = majorPitch / 2
+  }
+
+  return { majorPitch, minorPitch }
+}
+export function makeTicks(
+  start: number,
+  end: number,
+  bpPerPx: number,
+  emitMajor = true,
+  emitMinor = true,
+) {
+  const gridPitch = chooseGridPitch(bpPerPx, 60, 15)
+
+  let minBase = start
+  let maxBase = end
+  if (minBase === null || maxBase === null) {
+    return []
+  }
+
+  if (bpPerPx < 0) {
+    // eslint-disable-next-line @typescript-eslint/no-extra-semi
+    ;[minBase, maxBase] = [maxBase, minBase]
+  }
+
+  // add 20px additional on the right and left to allow us to draw the ends of
+  // labels that lie a little outside our region
+  minBase -= Math.abs(20 * bpPerPx)
+  maxBase += Math.abs(20 * bpPerPx) + 1
+
+  const iterPitch = gridPitch.minorPitch || gridPitch.majorPitch
+  let index = 0
+  const ticks = []
+  for (
+    let base = Math.ceil(minBase / iterPitch) * iterPitch;
+    base < maxBase;
+    base += iterPitch
+  ) {
+    if (emitMinor && base % (gridPitch.majorPitch * 2)) {
+      ticks.push({ type: 'minor', base: base - 1, index })
+      index += 1
+    } else if (emitMajor && !(base % (gridPitch.majorPitch * 2))) {
+      ticks.push({ type: 'major', base: base - 1, index })
+      index += 1
+    }
+  }
+  return ticks
+}
+
+export function mathPower(num: number): string {
+  if (num < 999) {
+    return String(num)
+  }
+  return `${mathPower(~~(num / 1000))},${`00${~~(num % 1000)}`.slice(
+    -3,
+    -3 + 3,
+  )}`
+}

package/src/declare.d.ts

@@ -0,0 +1,2 @@
+declare module 'stockholm-js'
+declare module 'normalize-wheel'

package/src/index.ts

@@ -0,0 +1,2 @@
+export { default as MSAView } from './components/MSAView'
+export { default as MSAModel, type MsaViewModel } from './model'

package/src/layout.ts

@@ -0,0 +1,83 @@
+import RBush from 'rbush'
+
+export default class Layout {
+  public rectangles: Map<
+    string,
+    {
+      minY: number
+      maxY: number
+      minX: number
+      maxX: number
+      id: string
+      data: unknown
+    }
+  >
+
+  public maxHeightReached: boolean
+
+  private maxHeight: number
+
+  private rbush: RBush<{ id: string }>
+
+  private pTotalHeight: number
+
+  constructor({
+    maxHeight = 10000,
+  }: {
+    maxHeight?: number
+  } = {}) {
+    this.maxHeightReached = false
+    this.rbush = new RBush()
+    this.rectangles = new Map()
+    this.maxHeight = Math.ceil(maxHeight)
+    this.pTotalHeight = 0 // total height, in units of bitmap squares (px/pitchY)
+  }
+
+  /**
+   * @returns top position for the rect, or Null if laying
+   *  out the rect would exceed maxHeighe
+   */
+  addRect(
+    id: string,
+    left: number,
+    right: number,
+    height: number,
+    data: unknown,
+  ): number | null {
+    // add to rbush
+    const existingRecord = this.rectangles.get(id)
+    if (existingRecord) {
+      return existingRecord.minY
+    }
+
+    let currHeight = 0
+    while (
+      this.rbush.collides({
+        minX: left,
+        minY: currHeight,
+        maxX: right,
+        maxY: currHeight + height,
+      }) &&
+      currHeight <= this.maxHeight
+    ) {
+      currHeight += 1
+    }
+
+    const record = {
+      minX: left,
+      minY: currHeight,
+      maxX: right,
+      maxY: currHeight + height,
+      id,
+      data,
+    }
+    this.rbush.insert(record)
+    this.rectangles.set(id, record)
+    this.pTotalHeight = Math.max(this.pTotalHeight, currHeight)
+    return currHeight
+  }
+
+  get totalHeight() {
+    return this.pTotalHeight
+  }
+}