jbrowse-plugin-mafviewer 1.0.1

package/src/BigMafAdapter/BigMafAdapter.ts

@@ -0,0 +1,120 @@
+import { BaseFeatureDataAdapter } from '@jbrowse/core/data_adapters/BaseAdapter'
+import { getSnapshot } from 'mobx-state-tree'
+import { Feature, Region, SimpleFeature } from '@jbrowse/core/util'
+import { ObservableCreate } from '@jbrowse/core/util/rxjs'
+import { firstValueFrom, toArray } from 'rxjs'
+
+interface OrganismRecord {
+  chr: string
+  start: number
+  srcSize: number
+  strand: number
+  unknown: number
+  data: string
+}
+export default class BigMafAdapter extends BaseFeatureDataAdapter {
+  public setupP?: Promise<{ adapter: BaseFeatureDataAdapter }>
+
+  async setup() {
+    if (!this.getSubAdapter) {
+      throw new Error('no getSubAdapter available')
+    }
+    const adapter = await this.getSubAdapter({
+      ...getSnapshot(this.config),
+      type: 'BigBedAdapter',
+    })
+    return {
+      adapter: adapter.dataAdapter as BaseFeatureDataAdapter,
+    }
+  }
+  async setupPre() {
+    if (!this.setupP) {
+      this.setupP = this.setup().catch(e => {
+        this.setupP = undefined
+        throw e
+      })
+    }
+    return this.setupP
+  }
+
+  async getRefNames() {
+    const { adapter } = await this.setup()
+    return adapter.getRefNames()
+  }
+
+  async getHeader() {
+    const { adapter } = await this.setup()
+    return adapter.getHeader()
+  }
+
+  getFeatures(query: Region) {
+    return ObservableCreate<Feature>(async observer => {
+      const { adapter } = await this.setup()
+      const features = await firstValueFrom(
+        adapter.getFeatures(query).pipe(toArray()),
+      )
+      for (const feature of features) {
+        const maf = feature.get('mafBlock') as string
+        const blocks = maf.split(';')
+        let aln: string | undefined
+        const alns = [] as string[]
+        const alignments = {} as Record<string, OrganismRecord>
+        const blocks2 = [] as string[]
+        for (const block of blocks) {
+          if (block[0] === 's') {
+            if (!aln) {
+              aln = block.split(/ +/)[6]
+              alns.push(aln)
+              blocks2.push(block)
+            } else {
+              alns.push(block.split(/ +/)[6])
+              blocks2.push(block)
+            }
+          }
+        }
+        const alns2 = alns.map(() => '')
+
+        if (aln) {
+          for (let i = 0; i < aln?.length; i++) {
+            if (aln[i] !== '-') {
+              for (let j = 0; j < alns.length; j++) {
+                alns2[j] += alns[j][i]
+              }
+            }
+          }
+        }
+
+        for (let i = 0; i < blocks2.length; i++) {
+          const elt = blocks2[i]
+          const ad = elt.split(/ +/)
+          const y = ad[1].split('.')
+          const org = y[0]
+          const chr = y[1]
+
+          alignments[org] = {
+            chr: chr,
+            start: +ad[1],
+            srcSize: +ad[2],
+            strand: ad[3] === '+' ? 1 : -1,
+            unknown: +ad[4],
+            data: alns2[i],
+          }
+        }
+        observer.next(
+          new SimpleFeature({
+            id: feature.id(),
+            data: {
+              start: feature.get('start'),
+              end: feature.get('end'),
+              refName: feature.get('refName'),
+              seq: alns2[0],
+              alignments: alignments,
+            },
+          }),
+        )
+      }
+      observer.complete()
+    })
+  }
+  freeResources(): void {}
+}

package/src/BigMafAdapter/configSchema.ts

@@ -0,0 +1,33 @@
+import { ConfigurationSchema } from '@jbrowse/core/configuration'
+
+/**
+ * #config BigMafAdapter
+ * used to configure BigMaf adapter
+ */
+function x() {} // eslint-disable-line @typescript-eslint/no-unused-vars
+
+const configSchema = ConfigurationSchema(
+  'BigMafAdapter',
+  {
+    /**
+     * #slot
+     */
+    samples: {
+      type: 'stringArray',
+      defaultValue: [],
+    },
+    /**
+     * #slot
+     */
+    bigBedLocation: {
+      type: 'fileLocation',
+      defaultValue: {
+        uri: '/path/to/my.bb',
+        locationType: 'UriLocation',
+      },
+    },
+  },
+  { explicitlyTyped: true },
+)
+
+export default configSchema

package/src/BigMafAdapter/index.ts

@@ -0,0 +1,15 @@
+import PluginManager from '@jbrowse/core/PluginManager'
+import { AdapterType } from '@jbrowse/core/pluggableElementTypes'
+import configSchema from './configSchema'
+import BigMafAdapter from './BigMafAdapter'
+
+export default function BigMafAdapterF(pluginManager: PluginManager) {
+  return pluginManager.addAdapterType(
+    () =>
+      new AdapterType({
+        name: 'BigMafAdapter',
+        AdapterClass: BigMafAdapter,
+        configSchema,
+      }),
+  )
+}

package/src/LinearMafDisplay/components/ColorLegend.tsx

@@ -0,0 +1,59 @@
+import React from 'react'
+import { observer } from 'mobx-react'
+
+// locals
+import { LinearMafDisplayModel } from '../stateModel'
+import RectBg from './RectBg'
+
+const ColorLegend = observer(function ({
+  model,
+  labelWidth,
+}: {
+  model: LinearMafDisplayModel
+  labelWidth: number
+}) {
+  const { samples, rowHeight } = model
+  const svgFontSize = Math.min(rowHeight, 12)
+  const canDisplayLabel = rowHeight > 11
+  const colorBoxWidth = 15
+  const legendWidth = labelWidth + colorBoxWidth + 5
+  const extraOffset = 0
+
+  return samples ? (
+    <>
+      {samples.map((source, idx) => {
+        const boxHeight = Math.min(20, rowHeight)
+        return (
+          <React.Fragment key={`${source.name}-${idx}`}>
+            {source.color ? (
+              <RectBg
+                y={idx * rowHeight + 1}
+                x={extraOffset}
+                width={colorBoxWidth}
+                height={boxHeight}
+                color={source.color}
+              />
+            ) : null}
+            <RectBg
+              y={idx * rowHeight + 1}
+              x={extraOffset}
+              width={legendWidth}
+              height={boxHeight}
+            />
+            {canDisplayLabel ? (
+              <text
+                y={idx * rowHeight + 13}
+                x={extraOffset + colorBoxWidth + 2}
+                fontSize={svgFontSize}
+              >
+                {source.name}
+              </text>
+            ) : null}
+          </React.Fragment>
+        )
+      })}
+    </>
+  ) : null
+})
+
+export default ColorLegend

package/src/LinearMafDisplay/components/ReactComponent.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import { getEnv } from '@jbrowse/core/util'
+import { observer } from 'mobx-react'
+import YScaleBars from './YScaleBars'
+
+const LinearMafDisplay = observer(function (props: any) {
+  const { model } = props
+  const { pluginManager } = getEnv(model)
+
+  const LinearGenomePlugin = pluginManager.getPlugin(
+    'LinearGenomeViewPlugin',
+  ) as import('@jbrowse/plugin-linear-genome-view').default
+  const { BaseLinearDisplayComponent } = LinearGenomePlugin.exports
+
+  return (
+    <div>
+      <BaseLinearDisplayComponent {...props} />
+      <YScaleBars model={model} />
+    </div>
+  )
+})
+
+export default LinearMafDisplay

package/src/LinearMafDisplay/components/RectBg.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+
+const RectBg = (props: {
+  x: number
+  y: number
+  width: number
+  height: number
+  color?: string
+}) => {
+  const { color = 'rgb(255,255,255,0.8)' } = props
+  return <rect {...props} fill={color} />
+}
+
+export default RectBg

package/src/LinearMafDisplay/components/YScaleBars.tsx

@@ -0,0 +1,63 @@
+import React from 'react'
+import { measureText, getContainingView } from '@jbrowse/core/util'
+import { observer } from 'mobx-react'
+
+// locals
+import { LinearMafDisplayModel } from '../stateModel'
+import ColorLegend from './ColorLegend'
+
+const Wrapper = observer(function ({
+  children,
+  model,
+  exportSVG,
+}: {
+  model: LinearMafDisplayModel
+  children: React.ReactNode
+  exportSVG?: boolean
+}) {
+  if (exportSVG) {
+    return <>{children}</>
+  } else {
+    const { rowHeight, samples } = model
+    return (
+      <svg
+        style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          pointerEvents: 'none',
+          height: samples.length * rowHeight,
+          width: getContainingView(model).width,
+        }}
+      >
+        {children}
+      </svg>
+    )
+  }
+})
+
+export const YScaleBars = observer(function (props: {
+  model: LinearMafDisplayModel
+  orientation?: string
+  exportSVG?: boolean
+}) {
+  const { model } = props
+  const { rowHeight, samples } = model
+  const svgFontSize = Math.min(rowHeight, 12)
+  const canDisplayLabel = rowHeight > 11
+  const minWidth = 20
+
+  const labelWidth = Math.max(
+    ...(samples
+      .map(s => measureText(s, svgFontSize))
+      .map(width => (canDisplayLabel ? width : minWidth)) || [0]),
+  )
+
+  return (
+    <Wrapper {...props}>
+      <ColorLegend model={model} labelWidth={labelWidth} />
+    </Wrapper>
+  )
+})
+
+export default YScaleBars

package/src/LinearMafDisplay/configSchema.ts

@@ -0,0 +1,23 @@
+import PluginManager from '@jbrowse/core/PluginManager'
+import { ConfigurationSchema } from '@jbrowse/core/configuration'
+
+export default function configSchemaF(pluginManager: PluginManager) {
+  const LinearGenomePlugin = pluginManager.getPlugin(
+    'LinearGenomeViewPlugin',
+  ) as import('@jbrowse/plugin-linear-genome-view').default
+  // @ts-expect-error
+  const { linearBasicDisplayConfigSchemaFactory } = LinearGenomePlugin.exports
+  return ConfigurationSchema(
+    'LinearMafDisplay',
+    {
+      /**
+       * #slot
+       */
+      renderer: pluginManager.pluggableConfigSchemaType('renderer'),
+    },
+    {
+      baseConfiguration: linearBasicDisplayConfigSchemaFactory(pluginManager),
+      explicitlyTyped: true,
+    },
+  )
+}

package/src/LinearMafDisplay/index.ts

@@ -0,0 +1,21 @@
+import PluginManager from '@jbrowse/core/PluginManager'
+import { DisplayType } from '@jbrowse/core/pluggableElementTypes'
+import configSchemaF from './configSchema'
+import stateModelFactory from './stateModel'
+import ReactComponent from './components/ReactComponent'
+
+export default function LinearMafDisplayF(pluginManager: PluginManager) {
+  pluginManager.addDisplayType(() => {
+    const configSchema = configSchemaF(pluginManager)
+    const stateModel = stateModelFactory(configSchema, pluginManager)
+    return new DisplayType({
+      name: 'LinearMafDisplay',
+      configSchema,
+      stateModel,
+      ReactComponent,
+      viewType: 'LinearGenomeView',
+      trackType: 'MafTrack',
+      displayName: 'MAF display',
+    })
+  })
+}

package/src/LinearMafDisplay/renderSvg.tsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import { getContainingView } from '@jbrowse/core/util'
+import {
+  ExportSvgDisplayOptions,
+  LinearGenomeViewModel,
+} from '@jbrowse/plugin-linear-genome-view'
+
+// locals
+import { LinearMafDisplayModel } from './stateModel'
+import YScaleBars from './components/YScaleBars'
+
+export async function renderSvg(
+  self: LinearMafDisplayModel,
+  opts: ExportSvgDisplayOptions,
+  superRenderSvg: (opts: ExportSvgDisplayOptions) => Promise<React.ReactNode>,
+) {
+  const { offsetPx } = getContainingView(self) as LinearGenomeViewModel
+  return (
+    <>
+      <g id="snpcov">{await superRenderSvg(opts)}</g>
+      <g transform={`translate(${Math.max(-offsetPx, 0)})`}>
+        <YScaleBars model={self} orientation="left" exportSVG />
+      </g>
+    </>
+  )
+}

package/src/LinearMafDisplay/stateModel.ts

@@ -0,0 +1,111 @@
+import { Instance, types } from 'mobx-state-tree'
+import {
+  AnyConfigurationModel,
+  AnyConfigurationSchemaType,
+  ConfigurationReference,
+  getConf,
+} from '@jbrowse/core/configuration'
+import { getEnv } from '@jbrowse/core/util'
+import PluginManager from '@jbrowse/core/PluginManager'
+import { ExportSvgDisplayOptions } from '@jbrowse/plugin-linear-genome-view'
+
+/**
+ * #stateModel LinearMafDisplay
+ * extends LinearBasicDisplay
+ */
+export default function stateModelFactory(
+  configSchema: AnyConfigurationSchemaType,
+  pluginManager: PluginManager,
+) {
+  const LinearGenomePlugin = pluginManager.getPlugin(
+    'LinearGenomeViewPlugin',
+  ) as import('@jbrowse/plugin-linear-genome-view').default
+  // @ts-expect-error
+  const { linearBasicDisplayModelFactory } = LinearGenomePlugin.exports
+
+  return types
+    .compose(
+      'LinearMafDisplay',
+      linearBasicDisplayModelFactory(configSchema),
+      types.model({
+        /**
+         * #property
+         */
+        type: types.literal('LinearMafDisplay'),
+        /**
+         * #property
+         */
+        configuration: ConfigurationReference(configSchema),
+      }),
+    )
+    .volatile(() => ({
+      prefersOffset: true,
+    }))
+    .views(self => ({
+      /**
+       * #getter
+       */
+      get samples() {
+        const r = self.adapterConfig.samples as string[]
+        return r.map(elt => ({ name: elt, color: undefined }))
+      },
+      /**
+       * #getter
+       */
+      get rowHeight() {
+        return 20
+      },
+      /**
+       * #getter
+       */
+      get rendererTypeName() {
+        return 'LinearMafRenderer'
+      },
+      /**
+       * #getter
+       */
+      get rendererConfig(): AnyConfigurationModel {
+        const configBlob = getConf(self, ['renderer']) || {}
+        const config = configBlob as Omit<typeof configBlob, symbol>
+
+        return self.rendererType.configSchema.create(
+          {
+            ...config,
+            type: 'LinearMafRenderer',
+          },
+          getEnv(self),
+        )
+      },
+    }))
+    .views(self => {
+      const { renderProps: superRenderProps } = self
+      return {
+        /**
+         * #method
+         */
+        renderProps() {
+          return {
+            ...superRenderProps(),
+            samples: self.samples,
+            rowHeight: self.rowHeight,
+          }
+        },
+      }
+    })
+    .actions(self => {
+      const { renderSvg: superRenderSvg } = self
+      return {
+        /**
+         * #action
+         */
+        async renderSvg(opts: ExportSvgDisplayOptions): Promise<any> {
+          const { renderSvg } = await import('./renderSvg')
+          // @ts-expect-error
+          return renderSvg(self, opts, superRenderSvg)
+        },
+      }
+    })
+}
+
+export type LinearMafDisplayStateModel = ReturnType<typeof stateModelFactory>
+export type LinearMafDisplayModel = Instance<LinearMafDisplayStateModel>

package/src/LinearMafRenderer/LinearMafRenderer.ts

@@ -0,0 +1,172 @@
+import { FeatureRendererType } from '@jbrowse/core/pluggableElementTypes'
+import { RenderArgsDeserialized } from '@jbrowse/core/pluggableElementTypes/renderers/BoxRendererType'
+import { createJBrowseTheme } from '@jbrowse/core/ui'
+import {
+  Feature,
+  featureSpanPx,
+  renderToAbstractCanvas,
+} from '@jbrowse/core/util'
+import { Theme } from '@mui/material'
+
+function getCorrectionFactor(scale: number) {
+  if (scale >= 1) {
+    return 0.6
+  } else if (scale >= 0.2) {
+    return 0.05
+  } else if (scale >= 0.02) {
+    return 0.03
+  } else {
+    return 0.02
+  }
+}
+
+export function getContrastBaseMap(theme: Theme) {
+  return Object.fromEntries(
+    Object.entries(getColorBaseMap(theme)).map(([key, value]) => [
+      key,
+      theme.palette.getContrastText(value),
+    ]),
+  )
+}
+
+export function getColorBaseMap(theme: Theme) {
+  const { bases } = theme.palette
+  return {
+    a: bases.A.main,
+    c: bases.C.main,
+    g: bases.G.main,
+    t: bases.T.main,
+  }
+}
+function makeImageData({
+  ctx,
+  renderArgs,
+}: {
+  ctx: CanvasRenderingContext2D
+  renderArgs: RenderArgsDeserialized & {
+    samples: { name: string; color?: string }[]
+    rowHeight: number
+  }
+}) {
+  const {
+    regions,
+    bpPerPx,
+    rowHeight,
+    theme: configTheme,
+    samples,
+  } = renderArgs
+  const [region] = regions
+  const features = renderArgs.features as Map<string, Feature>
+  const h = rowHeight
+  const theme = createJBrowseTheme(configTheme)
+  const colorForBase = getColorBaseMap(theme)
+  const contrastForBase = getContrastBaseMap(theme)
+  const sampleToRowMap = new Map(samples.map((s, i) => [s.name, i]))
+  const scale = 1 / bpPerPx
+  const correctionFactor = getCorrectionFactor(bpPerPx)
+
+  // sample as alignments
+  ctx.font = 'bold 10px Courier New,monospace'
+
+  for (const feature of features.values()) {
+    const [leftPx] = featureSpanPx(feature, region, bpPerPx)
+    const vals = feature.get('alignments') as Record<string, { data: string }>
+    const seq = feature.get('seq').toLowerCase()
+    for (const [sample, val] of Object.entries(vals)) {
+      const origAlignment = val.data
+      const alignment = origAlignment.toLowerCase()
+
+      // gaps
+      ctx.beginPath()
+      ctx.fillStyle = 'black'
+      const offset0 = (5 / 12) * h
+      const h6 = h / 6
+      const row = sampleToRowMap.get(sample)
+      if (row === undefined) {
+        throw new Error(`unknown sample encountered: ${sample}`)
+      }
+      const t = h * row
+      for (let i = 0; i < alignment.length; i++) {
+        const l = leftPx + scale * i
+        if (alignment[i] === '-') {
+          ctx.rect(l, offset0 + t, scale + correctionFactor, h6)
+        }
+      }
+      ctx.fill()
+      const offset = (1 / 4) * h
+      const h2 = h / 2
+
+      // matches
+      ctx.beginPath()
+      ctx.fillStyle = 'lightgrey'
+      for (let i = 0; i < alignment.length; i++) {
+        const c = alignment[i]
+        const l = leftPx + scale * i
+        if (seq[i] === c && c !== '-') {
+          ctx.rect(l, offset + t, scale + correctionFactor, h2)
+        }
+      }
+      ctx.fill()
+
+      // mismatches
+      for (let i = 0; i < alignment.length; i++) {
+        const c = alignment[i]
+        if (seq[i] !== c && c !== '-') {
+          const l = leftPx + scale * i
+          ctx.fillStyle =
+            colorForBase[c as keyof typeof colorForBase] ?? 'purple'
+          ctx.fillRect(l, offset + t, scale + correctionFactor, h2)
+        }
+      }
+
+      // font
+      const charSize = { w: 10 }
+      if (scale >= charSize.w) {
+        for (let i = 0; i < alignment.length; i++) {
+          const l = leftPx + scale * i
+          const offset = (scale - charSize.w) / 2 + 1
+          const c = alignment[i]
+          if (seq[i] !== c && c !== '-') {
+            ctx.fillStyle = contrastForBase[c] ?? 'black'
+            ctx.fillText(origAlignment[i], l + offset, h2 + t + 3)
+          }
+        }
+      }
+    }
+  }
+}
+export default class LinearMafRenderer extends FeatureRendererType {
+  async render(
+    renderProps: RenderArgsDeserialized & {
+      samples: { name: string; color?: string }[]
+      rowHeight: number
+    },
+  ) {
+    const { regions, bpPerPx, samples, rowHeight } = renderProps
+    const [region] = regions
+    const height = samples.length * rowHeight
+    const width = (region.end - region.start) / bpPerPx
+    const features = await this.getFeatures(renderProps)
+    const res = await renderToAbstractCanvas(width, height, renderProps, ctx =>
+      makeImageData({
+        ctx,
+        renderArgs: {
+          ...renderProps,
+          features,
+        },
+      }),
+    )
+    const results = await super.render({
+      ...renderProps,
+      ...res,
+      width,
+      height,
+    })
+    return {
+      ...results,
+      ...res,
+      width,
+      height,
+    }
+  }
+}

package/src/LinearMafRenderer/components/ReactComponent.tsx

@@ -0,0 +1,9 @@
+import { PrerenderedCanvas } from '@jbrowse/core/ui'
+import { observer } from 'mobx-react'
+import React from 'react'
+
+const LinearMafRendering = observer(function (props: any) {
+  return <PrerenderedCanvas {...props} />
+})
+
+export default LinearMafRendering