jbrowse-plugin-mafviewer 1.2.1 → 1.2.3

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.2.1",
+  "version": "1.2.3",
   "license": "MIT",
   "name": "jbrowse-plugin-mafviewer",
   "keywords": [
@@ -63,6 +63,7 @@
   },
   "dependencies": {
     "@gmod/bgzf-filehandle": "^2.0.4",
+    "abortable-promise-cache": "^1.5.0",
     "buffer": "^6.0.3",
     "d3-array": "^3.2.4",
     "d3-hierarchy": "^3.1.2",

package/src/BgzipTaffyAdapter/BgzipTaffyAdapter.ts

@@ -9,8 +9,10 @@ import {
   SimpleFeature,
   updateStatus,
 } from '@jbrowse/core/util'
+import QuickLRU from '@jbrowse/core/util/QuickLRU'
 import { openLocation } from '@jbrowse/core/util/io'
 import { ObservableCreate } from '@jbrowse/core/util/rxjs'
+import AbortablePromiseCache from 'abortable-promise-cache'
 import Long from 'long'
 
 import VirtualOffset from './virtualOffset'
@@ -20,6 +22,7 @@ import { parseRowInstructions } from './rowInstructions'
 import { parseLineByLine } from './util'
 
 import type { IndexData, OrganismRecord } from './types'
+
 interface Entry {
   type: string
   row: number
@@ -35,11 +38,125 @@ const toP = (s = 0) => +(+s).toFixed(1)
 export default class BgzipTaffyAdapter extends BaseFeatureDataAdapter {
   public setupP?: Promise<IndexData>
 
+  private cache = new AbortablePromiseCache({
+    cache: new QuickLRU({ maxSize: 50 }),
+    // @ts-expect-error
+    fill: async ({ nextEntry, firstEntry }, signal, statusCallback) => {
+      const file = openLocation(this.getConf('tafGzLocation'))
+      const response = await file.read(
+        nextEntry.virtualOffset.blockPosition -
+          firstEntry.virtualOffset.blockPosition,
+        firstEntry.virtualOffset.blockPosition,
+      )
+      const buffer = await unzip(response)
+      const slice = buffer.slice(firstEntry.virtualOffset.dataPosition)
+      return this.getChunk(slice, {
+        statusCallback: statusCallback as (arg: string) => void,
+        signal,
+      })
+    },
+  })
+
   async getRefNames() {
     const data = await this.setup()
     return Object.keys(data)
   }
 
+  async getChunk(buffer: Uint8Array, opts?: BaseOptions) {
+    const { statusCallback = () => {} } = opts || {}
+    const alignments = {} as Record<string, OrganismRecord>
+    const data = [] as Entry[]
+    let a0: any
+    let j = 0
+    let b = 0
+    parseLineByLine(buffer, line => {
+      if (j++ % 100 === 0) {
+        statusCallback(
+          `Processing ${toP(b / 1_000_000)}/${toP(buffer.length / 1_000_000)}Mb`,
+        )
+      }
+      b += line.length
+      if (line) {
+        const [lineData, rowInstructions] = line.split(' ; ')
+        if (rowInstructions) {
+          for (const ins of parseRowInstructions(rowInstructions)) {
+            if (ins.type === 'i') {
+              data.splice(ins.row, 0, ins)
+              if (!alignments[ins.asm]) {
+                alignments[ins.asm] = {
+                  start: ins.start,
+                  strand: ins.strand,
+                  srcSize: ins.length,
+                  chr: ins.ref,
+                  data: '',
+                }
+              }
+              const e = alignments[ins.asm]!
+              e.data += ' '.repeat(Math.max(0, j - e.data.length - 1)) // catch it up
+            } else if (ins.type === 's') {
+              if (!alignments[ins.asm]) {
+                alignments[ins.asm] = {
+                  start: ins.start,
+                  strand: ins.strand,
+                  srcSize: ins.length,
+                  chr: ins.ref,
+                  data: '',
+                }
+              }
+              const e = alignments[ins.asm]!
+              e.data += ' '.repeat(Math.max(0, j - e.data.length - 1)) // catch it up
+              data[ins.row] = ins
+            } else if (ins.type === 'd') {
+              data.splice(ins.row, 1)
+            }
+
+            // no gaps for now(?)
+            // else if (ins.type === 'g') {
+            //   console.log('g??')
+            // } else if (ins.type === 'G') {
+            //   console.log('G??')
+            // }
+          }
+          if (!a0) {
+            a0 = data[0]
+          }
+        }
+        const lineLen = lineData!.length
+
+        for (let i = 0; i < lineLen; i++) {
+          const letter = lineData![i]
+          const r = data[i]
+
+          if (r) {
+            alignments[r.asm]!.data += letter
+          } else {
+            // not sure why but chr22_KI270731v1_random.taf.gz ends up here
+          }
+        }
+      }
+    })
+    if (a0) {
+      const row0 = alignments[a0.asm]!
+
+      // see
+      // https://github.com/ComparativeGenomicsToolkit/taffy/blob/f5a5354/docs/taffy_utilities.md#referenced-based-maftaf-and-indexing
+      // for the significance of row[0]:
+      //
+      // "An anchor line in TAF is a column from which all sequence
+      // coordinates can be deduced without scanning backwards to previous
+      // lines "
+      return {
+        uniqueId: `${row0.start}-${row0.data.length}`,
+        start: row0.start,
+        end: row0.start + row0.data.length,
+        strand: row0.strand,
+        alignments,
+        seq: row0.data,
+      }
+    }
+    return undefined
+  }
+
   setupPre() {
     if (!this.setupP) {
       this.setupP = this.readTaiFile().catch((e: unknown) => {
@@ -104,103 +221,23 @@ export default class BgzipTaffyAdapter extends BaseFeatureDataAdapter {
     return ObservableCreate<Feature>(async observer => {
       try {
         const byteRanges = await this.setup()
-        const buffer = await updateStatus(
+        const feat = await updateStatus(
           'Downloading alignments',
           statusCallback,
           () => this.getLines(query, byteRanges),
         )
-        if (buffer) {
-          const alignments = {} as Record<string, OrganismRecord>
-          const data = [] as Entry[]
-          let a0: any
-          let j = 0
-          let b = 0
-          parseLineByLine(buffer, line => {
-            if (j++ % 100 === 0) {
-              statusCallback(
-                `Processing ${toP(b / 1_000_000)}/${toP(buffer.length / 1_000_000)}Mb`,
-              )
-            }
-            b += line.length
-            if (line) {
-              const [lineData, rowInstructions] = line.split(' ; ')
-              if (rowInstructions) {
-                for (const ins of parseRowInstructions(rowInstructions)) {
-                  if (ins.type === 'i') {
-                    data.splice(ins.row, 0, ins)
-                    if (!alignments[ins.asm]) {
-                      alignments[ins.asm] = {
-                        start: ins.start,
-                        strand: ins.strand,
-                        srcSize: ins.length,
-                        chr: ins.ref,
-                        data: '',
-                      }
-                    }
-                    const e = alignments[ins.asm]!
-                    e.data += ' '.repeat(Math.max(0, j - e.data.length)) // catch it up
-                  } else if (ins.type === 's') {
-                    if (!alignments[ins.asm]) {
-                      alignments[ins.asm] = {
-                        start: ins.start,
-                        strand: ins.strand,
-                        srcSize: ins.length,
-                        chr: ins.ref,
-                        data: '',
-                      }
-                    }
-                    const e = alignments[ins.asm]!
-                    e.data += ' '.repeat(Math.max(0, j - e.data.length)) // catch it up
-                    data[ins.row] = ins
-                  } else if (ins.type === 'd') {
-                    data.splice(ins.row, 1)
-                  }
-
-                  // no gaps for now(?)
-                  // else if (ins.type === 'g') {
-                  // }
-                  // else if (ins.type === 'G') {
-                  // }
-                }
-                if (!a0) {
-                  a0 = data[0]
-                }
-              }
-              const lineLen = lineData!.length
-              for (let i = 0; i < lineLen; i++) {
-                const letter = lineData![i]
-                const r = data[i]
-                if (r) {
-                  alignments[r.asm]!.data += letter
-                } else {
-                  // not sure why but chr22_KI270731v1_random.taf.gz ends up here
-                }
-              }
-            }
-          })
-          if (a0) {
-            const row0 = alignments[a0.asm]!
-
-            // see
-            // https://github.com/ComparativeGenomicsToolkit/taffy/blob/f5a5354/docs/taffy_utilities.md#referenced-based-maftaf-and-indexing
-            // for the significance of row[0]:
-            //
-            // "An anchor line in TAF is a column from which all sequence
-            // coordinates can be deduced without scanning backwards to previous
-            // lines "
-            observer.next(
-              new SimpleFeature({
-                uniqueId: `${row0.start}-${row0.data.length}`,
-                refName: query.refName,
-                start: row0.start,
-                end: row0.start + row0.data.length,
-                strand: row0.strand,
-                alignments,
-                seq: row0.data,
-              }),
-            )
-          }
+        if (feat) {
+          observer.next(
+            // @ts-expect-error
+            new SimpleFeature({
+              ...feat,
+              refName: query.refName,
+            }),
+          )
+        } else {
+          console.error('no feature found')
         }
+
         statusCallback('')
         observer.complete()
       } catch (e) {
@@ -226,7 +263,6 @@ export default class BgzipTaffyAdapter extends BaseFeatureDataAdapter {
 
   // TODO: cache processed large chunks
   async getLines(query: Region, byteRanges: IndexData) {
-    const file = openLocation(this.getConf('tafGzLocation'))
     const records = byteRanges[query.refName]
     if (records) {
       let firstEntry
@@ -255,13 +291,13 @@ export default class BgzipTaffyAdapter extends BaseFeatureDataAdapter {
       // file whn you request e.g. out of range region (e.g. taf in chr22:1-100
       // and you are at chr22:200-300)
       if (firstEntry && nextEntry) {
-        const response = await file.read(
-          nextEntry.virtualOffset.blockPosition -
-            firstEntry.virtualOffset.blockPosition,
-          firstEntry.virtualOffset.blockPosition,
+        return this.cache.get(
+          `${JSON.stringify(nextEntry)}_${JSON.stringify(firstEntry)}`,
+          {
+            nextEntry,
+            firstEntry,
+          },
         )
-        const buffer = await unzip(response)
-        return buffer.slice(firstEntry.virtualOffset.dataPosition)
       }
     }
     return undefined

package/src/LinearMafDisplay/components/ColorLegend.tsx

@@ -43,10 +43,10 @@ const ColorLegend = observer(function ({
           ? samples.map((sample, idx) => (
               <text
                 key={`${sample.id}-${idx}`}
-                y={idx * rowHeight + rowHeight / 2}
                 dominantBaseline="middle"
-                x={2}
                 fontSize={svgFontSize}
+                x={2}
+                y={idx * rowHeight + rowHeight / 2}
               >
                 {sample.label}
               </text>

package/src/LinearMafDisplay/components/RectBg.tsx

@@ -7,7 +7,7 @@ const RectBg = (props: {
   height: number
   color?: string
 }) => {
-  const { color = 'rgb(255,255,255,0.8)' } = props
+  const { color = 'rgb(255,255,255,0.5)' } = props
   return <rect {...props} fill={color} />
 }
 

package/src/LinearMafDisplay/stateModel.ts

@@ -244,7 +244,7 @@ export default function stateModelFactory(
           return {
             ...s,
             notReady:
-              !self.volatileSamples || !self.volatileTree || super.notReady,
+              (!self.volatileSamples && !self.volatileTree) || super.notReady,
             config: rendererConfig,
             samples,
             rowHeight,
@@ -260,16 +260,36 @@ export default function stateModelFactory(
           return [
             ...superTrackMenuItems(),
             {
-              label: 'Set row height',
-              onClick: () => {
-                getSession(self).queueDialog(handleClose => [
-                  SetRowHeightDialog,
-                  {
-                    model: self,
-                    handleClose,
+              label: 'Set feature height',
+              type: 'subMenu',
+              subMenu: [
+                {
+                  label: 'Normal',
+                  onClick: () => {
+                    self.setRowHeight(15)
+                    self.setRowProportion(0.8)
                   },
-                ])
-              },
+                },
+                {
+                  label: 'Compact',
+                  onClick: () => {
+                    self.setRowHeight(8)
+                    self.setRowProportion(0.9)
+                  },
+                },
+                {
+                  label: 'Manually set height',
+                  onClick: () => {
+                    getSession(self).queueDialog(handleClose => [
+                      SetRowHeightDialog,
+                      {
+                        model: self,
+                        handleClose,
+                      },
+                    ])
+                  },
+                },
+              ],
             },
             {
               label: 'Show all letters',

package/src/LinearMafRenderer/LinearMafRenderer.ts

@@ -42,7 +42,7 @@ export default class LinearMafRenderer extends FeatureRendererType {
       rowHeight,
     } = renderProps
     const region = regions[0]!
-    const height = samples.length * (rowHeight + 1) + 100
+    const height = samples.length * rowHeight + 100
     const width = (region.end - region.start) / bpPerPx
     const features = await this.getFeatures(renderProps)
     const res = await renderToAbstractCanvas(

package/src/LinearMafRenderer/makeImageData.ts

@@ -1,6 +1,6 @@
 import { RenderArgsDeserialized } from '@jbrowse/core/pluggableElementTypes/renderers/BoxRendererType'
 import { createJBrowseTheme } from '@jbrowse/core/ui'
-import { Feature, featureSpanPx } from '@jbrowse/core/util'
+import { Feature, featureSpanPx, measureText } from '@jbrowse/core/util'
 
 import {
   fillRect,
@@ -97,7 +97,7 @@ export function makeImageData({
           if (seq[i] !== '-') {
             const c = alignment[i]
             const l = leftPx + scale * o
-            if (seq[i] === c && c !== '-') {
+            if (seq[i] === c && c !== '-' && c !== ' ') {
               fillRect(ctx, l, offset + t, scale + f, h, canvasWidth)
             }
             o++
@@ -183,8 +183,6 @@ export function makeImageData({
 
       const t = rowHeight * row
 
-      ctx.beginPath()
-      ctx.fillStyle = 'purple'
       for (let i = 0, o = 0; i < alignment.length; i++) {
         let ins = ''
         while (seq[i] === '-') {
@@ -196,15 +194,46 @@ export function makeImageData({
         if (ins.length > 0) {
           const l = leftPx + scale * o - 1
 
-          ctx.rect(l, offset + t, 1, h)
-          if (bpPerPx < 1) {
-            ctx.rect(l - 2, offset + t, 5, 1)
-            ctx.rect(l - 2, offset + t + h - 1, 5, 1)
+          if (ins.length > 10) {
+            const txt = `${ins.length}`
+            if (bpPerPx > 10) {
+              fillRect(ctx, l - 1, t, 2, h, canvasWidth, 'purple')
+            } else if (h > charHeight) {
+              const rwidth = measureText(txt)
+              const padding = 5
+              fillRect(
+                ctx,
+                l - rwidth / 2 - padding,
+                t,
+                rwidth + 2 * padding,
+                h,
+                canvasWidth,
+                'purple',
+              )
+              ctx.fillStyle = 'white'
+              ctx.fillText(txt, l - rwidth / 2, t + h)
+            } else {
+              const padding = 2
+              fillRect(
+                ctx,
+                l - padding,
+                t,
+                2 * padding,
+                h,
+                canvasWidth,
+                'purple',
+              )
+            }
+          } else {
+            fillRect(ctx, l, offset + t, 1, h, canvasWidth, 'purple')
+            if (bpPerPx < 0.2 && rowHeight > 5) {
+              fillRect(ctx, l - 2, offset + t, 5, 1, canvasWidth)
+              fillRect(ctx, l - 2, offset + t + h - 1, 5, 1, canvasWidth)
+            }
           }
         }
         o++
       }
-      ctx.fill()
     }
   }
 }

package/src/MafAddTrackWorkflow/AddTrackWorkflow.tsx

@@ -69,17 +69,15 @@ export default function MultiMAFWidget({ model }: { model: AddTrackModel }) {
               setFileTypeChoice(event.target.value as AdapterTypeOptions)
             }}
           >
-            {['BigMafAdapter', 'MafTabixAdapter', 'BgzipTaffyAdapter'].map(
-              r => (
-                <FormControlLabel
-                  key={r}
-                  value={r}
-                  control={<Radio />}
-                  checked={fileTypeChoice === r}
-                  label={r}
-                />
-              ),
-            )}
+            {['BigMafAdapter', 'MafTabixAdapter'].map(r => (
+              <FormControlLabel
+                key={r}
+                value={r}
+                control={<Radio />}
+                checked={fileTypeChoice === r}
+                label={r}
+              />
+            ))}
           </RadioGroup>
         </FormControl>
         {fileTypeChoice === 'BigMafAdapter' ? (