react-msaview 3.1.7 → 3.1.8

package/src/components/{TreePanel → tree}/renderTreeCanvas.ts

@@ -5,6 +5,7 @@ import { Theme } from '@mui/material'
 import { MsaViewModel } from '../../model'
 
 export const padding = 600
+
 const extendBounds = 5
 const radius = 2.5
 const d = radius * 2
@@ -35,18 +36,20 @@ export function renderTree({
   const { hierarchy, showBranchLen, blockSize } = model
   const by = blockSizeYOverride || blockSize
   ctx.strokeStyle = theme.palette.text.primary
-  for (const { source, target } of hierarchy.links()) {
-    const y = showBranchLen ? 'len' : 'y'
+  for (const link of hierarchy.links()) {
+    const { source, target } = link
+    const sy = source.x!
+    const ty = target.x!
     // @ts-expect-error
-    const { x: sy, [y]: sx } = source
+    const tx = showBranchLen ? target.len : target.y
     // @ts-expect-error
-    const { x: ty, [y]: tx } = target
+    const sx = showBranchLen ? source.len : source.y
 
     const y1 = Math.min(sy, ty)
     const y2 = Math.max(sy, ty)
-    // 1d line intersection to check if line crosses block at all, this is
-    // an optimization that allows us to skip drawing most tree links
-    // outside the block
+    // 1d line intersection to check if line crosses block at all, this is an
+    // optimization that allows us to skip drawing most tree links outside the
+    // block
     if (offsetY + by >= y1 && y2 >= offsetY) {
       ctx.beginPath()
       ctx.moveTo(sx, sy)
@@ -81,13 +84,9 @@ export function renderNodeBubbles({
   const by = blockSizeYOverride || blockSize
   for (const node of hierarchy.descendants()) {
     const val = showBranchLen ? 'len' : 'y'
-    const {
-      // @ts-expect-error
-      x: y,
-      // @ts-expect-error
-      [val]: x,
-      data,
-    } = node
+    // @ts-expect-error
+    const { [val]: x, data } = node
+    const y = node.x!
     const { branchset, id = '', name = '' } = data
     if (
       !id.endsWith('-leafnode') &&
@@ -131,17 +130,16 @@ export function renderTreeLabels({
   blockSizeYOverride?: number
 }) {
   const {
-    rowHeight,
+    fontSize,
     showBranchLen,
     treeMetadata,
     hierarchy,
     blockSize,
     labelsAlignRight,
     drawTree,
-    structures,
     treeAreaWidth,
     treeAreaWidthMinusMargin,
-    marginLeft: ml,
+    marginLeft,
     noTree,
   } = model
   const by = blockSizeYOverride || blockSize
@@ -153,39 +151,24 @@ export function renderTreeLabels({
   }
   for (const node of hierarchy.leaves()) {
     const {
-      // @ts-expect-error
-      x: y,
-      // @ts-expect-error
-      y: x,
       data: { name, id },
       // @ts-expect-error
       len,
     } = node
+    const y = node.x!
+    const x = node.y!
 
     const displayName = treeMetadata[name]?.genome || name
-
     if (y > offsetY - extendBounds && y < offsetY + by + extendBounds) {
       // note: +rowHeight/4 matches with -rowHeight/4 in msa
-      const yp = y + rowHeight / 4
-      const xp = showBranchLen ? len : x
+      const yp = y + fontSize / 4
+      const xp = (showBranchLen ? len : x) || 0
 
       const { width } = ctx.measureText(displayName)
       const height = ctx.measureText('M').width // use an 'em' for height
 
-      const hasStructure = structures[name]
-      ctx.fillStyle = hasStructure ? 'blue' : theme.palette.text.primary
-
-      if (!drawTree && !labelsAlignRight) {
-        ctx.fillText(displayName, 0, yp)
-        clickMap?.insert({
-          minX: 0 + ml,
-          maxX: width + ml,
-          minY: yp - height,
-          maxY: yp,
-          name,
-          id,
-        })
-      } else if (labelsAlignRight) {
+      ctx.fillStyle = theme.palette.text.primary
+      if (labelsAlignRight) {
         const smallPadding = 2
         const offset = treeAreaWidthMinusMargin - smallPadding
         if (drawTree && !noTree) {
@@ -206,8 +189,8 @@ export function renderTreeLabels({
       } else {
         ctx.fillText(displayName, xp + d, yp)
         clickMap?.insert({
-          minX: xp + d + ml,
-          maxX: xp + d + width + ml,
+          minX: xp + d + marginLeft,
+          maxX: xp + d + width + marginLeft,
           minY: yp - height,
           maxY: yp,
           name,
@@ -240,6 +223,7 @@ export function renderTreeCanvas({
   const {
     noTree,
     drawTree,
+    drawLabels,
     drawNodeBubbles,
     treeWidth,
     highResScaleFactor,
@@ -288,7 +272,7 @@ export function renderTreeCanvas({
     }
   }
 
-  if (rowHeight >= 5) {
+  if (rowHeight >= 5 && drawLabels) {
     renderTreeLabels({
       ctx,
       offsetY,

package/src/fetchUtils.ts

@@ -0,0 +1,30 @@
+export async function myfetch(url: string, args?: RequestInit) {
+  const response = await fetch(url, args)
+
+  if (!response.ok) {
+    throw new Error(
+      `HTTP ${response.status} fetching ${url} ${await response.text()}`,
+    )
+  }
+
+  return response
+}
+
+export async function textfetch(url: string, args?: RequestInit) {
+  const response = await myfetch(url, args)
+  return response.text()
+}
+
+export async function jsonfetch(url: string, args?: RequestInit) {
+  const response = await myfetch(url, args)
+  return response.json()
+}
+
+export async function arraybufferfetch(url: string) {
+  const res = await myfetch(url)
+  return res.arrayBuffer()
+}
+
+export function timeout(time: number) {
+  return new Promise(res => setTimeout(res, time))
+}

package/src/ggplotPalettes.ts

@@ -0,0 +1,25 @@
+const palettes = [
+  ['#F8766D'],
+  ['#F8766D', '#00BFC4'],
+  ['#F8766D', '#00BA38', '#619CFF'],
+  ['#F8766D', '#7CAE00', '#00BFC4', '#C77CFF'],
+  ['#F8766D', '#A3A500', '#00BF7D', '#00B0F6', '#E76BF3'],
+  ['#F8766D', '#B79F00', '#00BA38', '#00BFC4', '#619CFF', '#F564E3'],
+  ['#F8766D', '#C49A00', '#53B400', '#00C094', '#00B6EB', '#A58AFF', '#FB61D7'],
+  [
+    '#F8766D',
+    '#CD9600',
+    '#7CAE00',
+    '#00BE67',
+    '#00BFC4',
+    '#00A9FF',
+    '#C77CFF',
+    '#FF61CC',
+  ],
+]
+
+export function getPalette(l: number) {
+  return palettes[Math.min(l, palettes.length - 1)]
+}
+
+export default palettes

package/src/index.ts

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

package/src/launchInterProScan.ts

@@ -0,0 +1,98 @@
+import { jsonfetch, textfetch, timeout } from './fetchUtils'
+
+const base = `https://www.ebi.ac.uk/Tools/services/rest`
+
+export interface InterProScanResults {
+  matches: {
+    signature: {
+      entry?: {
+        name: string
+        description: string
+        accession: string
+      }
+    }
+    locations: { start: number; end: number }[]
+  }[]
+  xref: { id: string }[]
+}
+export interface InterProScanResponse {
+  results: InterProScanResults[]
+}
+
+async function runInterProScan({
+  seq,
+  onProgress,
+  onJobId,
+  programs,
+}: {
+  seq: string
+  programs: string[]
+  onProgress: (arg?: { msg: string; url?: string }) => void
+  onJobId: (arg: string) => void
+}) {
+  const jobId = await textfetch(`${base}/iprscan5/run`, {
+    method: 'POST',
+    body: new URLSearchParams({
+      email: 'colin.diesh@gmail.com',
+      sequence: `${seq}`,
+      programs: programs.join(','),
+    }),
+  })
+  onJobId(jobId)
+  await wait({
+    jobId,
+    onProgress,
+  })
+  return loadInterProScanResults(jobId)
+}
+
+export async function loadInterProScanResults(jobId: string) {
+  return (await jsonfetch(
+    `${base}/iprscan5/result/${jobId}/json`,
+  )) as InterProScanResponse
+}
+
+async function wait({
+  onProgress,
+  jobId,
+}: {
+  jobId: string
+  onProgress: (arg?: { msg: string; url?: string }) => void
+}) {
+  const url = `${base}/iprscan5/status/${jobId}`
+  // eslint-disable-next-line no-constant-condition
+  while (true) {
+    for (let i = 0; i < 10; i++) {
+      await timeout(1000)
+      onProgress({ msg: `Checking status... ${10 - i}`, url })
+    }
+    const result = await textfetch(url)
+
+    if (result === 'FINISHED') {
+      break
+    }
+  }
+}
+
+export async function launchInterProScan({
+  algorithm,
+  seq,
+  programs,
+  onJobId,
+  onProgress,
+}: {
+  algorithm: string
+  seq: string
+  programs: string[]
+  onProgress: (arg?: { msg: string; url?: string }) => void
+  onJobId: (arg: string) => void
+}) {
+  onProgress({ msg: `Launching ${algorithm} MSA...` })
+  if (algorithm === 'interproscan') {
+    const result = await runInterProScan({ seq, onJobId, onProgress, programs })
+    onProgress()
+    return result
+  } else {
+    throw new Error('unknown algorithm')
+  }
+}

package/src/model/msaModel.ts

@@ -0,0 +1,39 @@
+import { types } from 'mobx-state-tree'
+
+/**
+ * #stateModel MSAModel
+ */
+function x() {} // eslint-disable-line @typescript-eslint/no-unused-vars
+
+export function MSAModelF() {
+  return types
+    .model({
+      /**
+       * #property
+       * draw MSA tiles with a background color
+       */
+      bgColor: true,
+
+      /**
+       * #property
+       * default color scheme name
+       */
+      colorSchemeName: 'maeditor',
+    })
+    .actions(self => ({
+      /**
+       * #action
+       * set color scheme name
+       */
+      setColorSchemeName(name: string) {
+        self.colorSchemeName = name
+      },
+
+      /**
+       * #action
+       */
+      setBgColor(arg: boolean) {
+        self.bgColor = arg
+      },
+    }))
+}

package/src/model/treeModel.ts

@@ -0,0 +1,116 @@
+import { types } from 'mobx-state-tree'
+
+/**
+ * #stateModel Tree
+ */
+function x() {} // eslint-disable-line @typescript-eslint/no-unused-vars
+
+export function TreeF() {
+  return types
+    .model({
+      /**
+       * #property
+       */
+      drawLabels: true,
+      /**
+       * #property
+       * right-align the labels
+       */
+      labelsAlignRight: false,
+
+      /**
+       * #property
+       * width of the area the tree is drawn in, px
+       */
+      treeAreaWidth: types.optional(types.number, 400),
+
+      /**
+       * #property
+       * width of the tree within the treeArea, px
+       */
+      treeWidth: types.optional(types.number, 300),
+
+      /**
+       * #getter
+       * synchronization that matches treeWidth to treeAreaWidth
+       */
+      treeWidthMatchesArea: true,
+
+      /**
+       * #property
+       * use "branch length" e.g. evolutionary distance to draw tree branch
+       * lengths. if false, the layout is a "cladogram" that does not take into
+       * account evolutionary distances
+       */
+      showBranchLen: true,
+
+      /**
+       * #property
+       * draw tree, boolean
+       */
+      drawTree: true,
+
+      /**
+       * #property
+       * draw clickable node bubbles on the tree
+       */
+      drawNodeBubbles: true,
+    })
+    .actions(self => ({
+      /**
+       * #action
+       * synchronize the treewidth and treeareawidth
+       */
+      setTreeWidthMatchesArea(arg: boolean) {
+        self.treeWidthMatchesArea = arg
+      },
+
+      /**
+       * #action
+       * set tree area width (px)
+       */
+      setTreeAreaWidth(n: number) {
+        self.treeAreaWidth = n
+      },
+      /**
+       * #action
+       * set tree width (px)
+       */
+      setTreeWidth(n: number) {
+        self.treeWidth = n
+      },
+
+      /**
+       * #action
+       */
+      setLabelsAlignRight(arg: boolean) {
+        self.labelsAlignRight = arg
+      },
+      /**
+       * #action
+       */
+      setDrawTree(arg: boolean) {
+        self.drawTree = arg
+      },
+
+      /**
+       * #action
+       */
+      setShowBranchLen(arg: boolean) {
+        self.showBranchLen = arg
+      },
+
+      /**
+       * #action
+       */
+      setDrawNodeBubbles(arg: boolean) {
+        self.drawNodeBubbles = arg
+      },
+      /**
+       * #action
+       */
+      setDrawLabels(arg: boolean) {
+        self.drawLabels = arg
+      },
+    }))
+}