@jbrowse/plugin-linear-comparative-view 2.6.1

package/src/LinearReadVsRef/LinearReadVsRef.tsx

@@ -0,0 +1,360 @@
+import React, { useEffect, useState } from 'react'
+import {
+  Button,
+  CircularProgress,
+  DialogActions,
+  DialogContent,
+  TextField,
+  Typography,
+} from '@mui/material'
+import { Dialog } from '@jbrowse/core/ui'
+import { makeStyles } from 'tss-react/mui'
+import { getConf } from '@jbrowse/core/configuration'
+import { getRpcSessionId } from '@jbrowse/core/util/tracks'
+import {
+  getSession,
+  getContainingView,
+  gatherOverlaps,
+  Feature,
+} from '@jbrowse/core/util'
+
+// locals
+import { MismatchParser } from '@jbrowse/plugin-alignments'
+const { featurizeSA, getClip, getLength, getLengthSansClipping, getTag } =
+  MismatchParser
+
+interface ReducedFeature {
+  refName: string
+  start: number
+  clipPos: number
+  end: number
+  strand: number
+  seqLength: number
+  syntenyId?: number
+  uniqueId: string
+  mate: {
+    refName: string
+    start: number
+    end: number
+    syntenyId?: number
+    uniqueId?: string
+  }
+}
+
+const useStyles = makeStyles()({
+  root: {
+    width: 300,
+  },
+})
+
+export default function ReadVsRefDialog({
+  track,
+  feature: preFeature,
+  handleClose,
+}: {
+  feature: Feature
+  handleClose: () => void
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  track: any
+}) {
+  const { classes } = useStyles()
+
+  // window size stored as string, because it corresponds to a textfield which
+  // is parsed as number on submit
+  const [windowSizeText, setWindowSize] = useState('0')
+  const [error, setError] = useState<unknown>()
+  const [primaryFeature, setPrimaryFeature] = useState<Feature>()
+  const windowSize = +windowSizeText
+
+  // we need to fetch the primary alignment if the selected feature is 2048.
+  // this should be the first in the list of the SA tag
+  useEffect(() => {
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
+    ;(async () => {
+      setError(undefined)
+      try {
+        if (preFeature.get('flags') & 2048) {
+          const SA: string = getTag(preFeature, 'SA') || ''
+          const primaryAln = SA.split(';')[0]
+          const [saRef, saStart] = primaryAln.split(',')
+          const { rpcManager } = getSession(track)
+          const adapterConfig = getConf(track, 'adapter')
+          const sessionId = getRpcSessionId(track)
+
+          const feats = (await rpcManager.call(sessionId, 'CoreGetFeatures', {
+            adapterConfig,
+            sessionId,
+            regions: [
+              {
+                refName: saRef,
+                start: +saStart - 1,
+                end: +saStart,
+              },
+            ],
+          })) as Feature[]
+
+          const result = feats.find(
+            f =>
+              f.get('name') === preFeature.get('name') &&
+              !(f.get('flags') & 2048) &&
+              !(f.get('flags') & 256),
+          )
+          if (result) {
+            setPrimaryFeature(result)
+          } else {
+            throw new Error('primary feature not found')
+          }
+        } else {
+          setPrimaryFeature(preFeature)
+        }
+      } catch (e) {
+        console.error(e)
+        setError(e)
+      }
+    })()
+  }, [preFeature, track])
+
+  function onSubmit() {
+    try {
+      if (!primaryFeature) {
+        return
+      }
+      const feature = primaryFeature
+      const session = getSession(track)
+      const view = getContainingView(track)
+      const cigar = feature.get('CIGAR') as string
+      const flags = feature.get('flags') as number
+      const origStrand = feature.get('strand') as number
+      const SA = (getTag(feature, 'SA') as string) || ''
+      const readName = feature.get('name') as string
+      const clipPos = getClip(cigar, 1)
+
+      const readAssembly = `${readName}_assembly_${Date.now()}`
+      const [trackAssembly] = getConf(track, 'assemblyNames')
+      const assemblyNames = [trackAssembly, readAssembly]
+      const trackId = `track-${Date.now()}`
+      const trackName = `${readName}_vs_${trackAssembly}`
+
+      // get the canonical refname for the read because if the
+      // read.get('refName') is chr1 and the actual fasta refName is 1 then no
+      // tracks can be opened on the top panel of the linear read vs ref
+      const { assemblyManager } = session
+      const assembly = assemblyManager.get(trackAssembly)
+      if (!assembly) {
+        throw new Error('assembly not found')
+      }
+
+      const suppAlns = featurizeSA(SA, feature.id(), origStrand, readName, true)
+
+      const feat = feature.toJSON()
+      feat.clipPos = clipPos
+      feat.strand = 1
+
+      feat.mate = {
+        refName: readName,
+        start: clipPos,
+        end: clipPos + getLengthSansClipping(cigar),
+      }
+
+      // if secondary alignment or supplementary, calculate length from SA[0]'s
+      // CIGAR which is the primary alignments. otherwise it is the primary
+      // alignment just use seq.length if primary alignment
+      const totalLength =
+        flags & 2048 ? getLength(suppAlns[0].CIGAR) : getLength(cigar)
+
+      const features = [feat, ...suppAlns] as ReducedFeature[]
+
+      features.forEach((f, idx) => {
+        f.refName = assembly?.getCanonicalRefName(f.refName) || f.refName
+        f.syntenyId = idx
+        f.mate.syntenyId = idx
+        f.mate.uniqueId = `${f.uniqueId}_mate`
+      })
+      features.sort((a, b) => a.clipPos - b.clipPos)
+
+      const featSeq = feature.get('seq') as string | undefined
+
+      // the config feature store includes synthetic mate features
+      // mapped to the read assembly
+      const configFeatureStore = [...features, ...features.map(f => f.mate)]
+      const expand = 2 * windowSize
+      const refLen = features.reduce((a, f) => a + f.end - f.start + expand, 0)
+
+      const seqTrackId = `${readName}_${Date.now()}`
+      const sequenceTrackConf = getConf(assembly, 'sequence')
+      const lgvRegions = gatherOverlaps(
+        features.map(f => ({
+          ...f,
+          start: Math.max(0, f.start - windowSize),
+          end: f.end + windowSize,
+          assemblyName: trackAssembly,
+        })),
+      )
+
+      session.addTemporaryAssembly({
+        name: `${readAssembly}`,
+        sequence: {
+          type: 'ReferenceSequenceTrack',
+          name: `Read sequence`,
+          trackId: seqTrackId,
+          assemblyNames: [readAssembly],
+          adapter: {
+            type: 'FromConfigSequenceAdapter',
+            noAssemblyManager: true,
+            features: [
+              {
+                start: 0,
+                end: totalLength,
+                seq: featSeq || '', // can be empty if user clicks secondary read
+                refName: readName,
+                uniqueId: `${Math.random()}`,
+              },
+            ],
+          },
+        },
+      })
+
+      session.addView('LinearSyntenyView', {
+        type: 'LinearSyntenyView',
+        views: [
+          {
+            type: 'LinearGenomeView',
+            hideHeader: true,
+            offsetPx: 0,
+            bpPerPx: refLen / view.width,
+            displayedRegions: lgvRegions,
+            tracks: [
+              {
+                id: `${Math.random()}`,
+                type: 'ReferenceSequenceTrack',
+                assemblyNames: [trackAssembly],
+                configuration: sequenceTrackConf.trackId,
+                displays: [
+                  {
+                    id: `${Math.random()}`,
+                    type: 'LinearReferenceSequenceDisplay',
+                    showReverse: true,
+                    showTranslation: false,
+                    height: 35,
+                    configuration: `${seqTrackId}-LinearReferenceSequenceDisplay`,
+                  },
+                ],
+              },
+            ],
+          },
+          {
+            type: 'LinearGenomeView',
+            hideHeader: true,
+            offsetPx: 0,
+            bpPerPx: totalLength / view.width,
+            displayedRegions: [
+              {
+                assemblyName: readAssembly,
+                start: 0,
+                end: totalLength,
+                refName: readName,
+              },
+            ],
+            tracks: [
+              {
+                id: `${Math.random()}`,
+                type: 'ReferenceSequenceTrack',
+                configuration: seqTrackId,
+                displays: [
+                  {
+                    id: `${Math.random()}`,
+                    type: 'LinearReferenceSequenceDisplay',
+                    showReverse: true,
+                    showTranslation: false,
+                    height: 35,
+                    configuration: `${seqTrackId}-LinearReferenceSequenceDisplay`,
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+        viewTrackConfigs: [
+          {
+            type: 'SyntenyTrack',
+            assemblyNames,
+            adapter: {
+              type: 'FromConfigAdapter',
+              features: configFeatureStore,
+            },
+            trackId,
+            name: trackName,
+          },
+        ],
+        tracks: [
+          {
+            configuration: trackId,
+            type: 'SyntenyTrack',
+            displays: [
+              {
+                type: 'LinearSyntenyDisplay',
+                configuration: `${trackId}-LinearSyntenyDisplay`,
+              },
+            ],
+          },
+        ],
+        displayName: `${readName} vs ${trackAssembly}`,
+      })
+      handleClose()
+    } catch (e) {
+      console.error(e)
+      setError(e)
+    }
+  }
+
+  return (
+    <Dialog open onClose={handleClose} title="Set window size">
+      <DialogContent>
+        {error ? (
+          <Typography color="error">{`${error}`}</Typography>
+        ) : !primaryFeature ? (
+          <div>
+            <Typography>
+              To accurately perform comparison we are fetching the primary
+              alignment. Loading primary feature...
+            </Typography>
+            <CircularProgress />
+          </div>
+        ) : (
+          <div className={classes.root}>
+            {primaryFeature.get('flags') & 256 ? (
+              <Typography style={{ color: 'orange' }}>
+                Note: You selected a secondary alignment (which generally does
+                not have SA tags or SEQ fields) so do a full reconstruction of
+                the alignment
+              </Typography>
+            ) : null}
+            <Typography>
+              Show an extra window size around each part of the split alignment.
+              Using a larger value can allow you to see more genomic context.
+            </Typography>
+
+            <TextField
+              value={windowSize}
+              onChange={event => setWindowSize(event.target.value)}
+              label="Set window size"
+            />
+          </div>
+        )}
+      </DialogContent>
+      <DialogActions>
+        <Button variant="contained" color="secondary" onClick={handleClose}>
+          Cancel
+        </Button>
+        <Button
+          disabled={!primaryFeature}
+          variant="contained"
+          color="primary"
+          onClick={onSubmit}
+        >
+          Submit
+        </Button>
+      </DialogActions>
+    </Dialog>
+  )
+}

package/src/LinearReadVsRef/index.ts

@@ -0,0 +1,58 @@
+import PluginManager from '@jbrowse/core/PluginManager'
+import DisplayType from '@jbrowse/core/pluggableElementTypes/DisplayType'
+import { PluggableElementType } from '@jbrowse/core/pluggableElementTypes'
+import { getSession, getContainingTrack } from '@jbrowse/core/util'
+
+// icons
+import AddIcon from '@mui/icons-material/Add'
+
+// locals
+import ReadVsRefDialog from './LinearReadVsRef'
+
+function isDisplay(elt: { name: string }): elt is DisplayType {
+  return elt.name === 'LinearPileupDisplay'
+}
+
+export default function (pm: PluginManager) {
+  pm.addToExtensionPoint(
+    'Core-extendPluggableElement',
+    (pluggableElement: PluggableElementType) => {
+      if (!isDisplay(pluggableElement)) {
+        return pluggableElement
+      }
+      pluggableElement.stateModel = pluggableElement.stateModel.extend(self => {
+        const superContextMenuItems = self.contextMenuItems
+        return {
+          views: {
+            contextMenuItems() {
+              const feature = self.contextMenuFeature
+              const track = getContainingTrack(self)
+              return [
+                ...superContextMenuItems(),
+                ...(feature
+                  ? [
+                      {
+                        label: 'Linear read vs ref',
+                        icon: AddIcon,
+                        onClick: () => {
+                          getSession(self).queueDialog(handleClose => [
+                            ReadVsRefDialog,
+                            {
+                              track,
+                              feature,
+                              handleClose,
+                            },
+                          ])
+                        },
+                      },
+                    ]
+                  : []),
+              ]
+            },
+          },
+        }
+      })
+      return pluggableElement
+    },
+  )
+}

package/src/LinearSyntenyDisplay/afterAttach.ts

@@ -0,0 +1,149 @@
+import { addDisposer, getSnapshot } from 'mobx-state-tree'
+
+import { Feature, getContainingView, getSession } from '@jbrowse/core/util'
+import { bpToPx } from '@jbrowse/core/util/Base1DUtils'
+import { MismatchParser } from '@jbrowse/plugin-alignments'
+import { reaction, autorun } from 'mobx'
+
+// locals
+import { LinearSyntenyViewModel } from '../LinearSyntenyView/model'
+import { drawMouseoverSynteny, drawRef } from './drawSynteny'
+import { LinearSyntenyDisplayModel } from './model'
+
+interface Pos {
+  offsetPx: number
+}
+
+interface FeatPos {
+  p11: Pos
+  p12: Pos
+  p21: Pos
+  p22: Pos
+  f: Feature
+  cigar: string[]
+}
+
+type LSV = LinearSyntenyViewModel
+
+export function doAfterAttach(self: LinearSyntenyDisplayModel) {
+  addDisposer(
+    self,
+    autorun(() => {
+      const view = getContainingView(self)
+      if (!view.initialized) {
+        return
+      }
+      const ctx1 = self.mainCanvas?.getContext('2d')
+      const ctx3 = self.cigarClickMapCanvas?.getContext('2d')
+      if (!ctx1 || !ctx3) {
+        return
+      }
+
+      const height = view.middleComparativeHeight
+      const width = view.width
+      ctx1.clearRect(0, 0, width, height)
+      ctx3.clearRect(0, 0, width, height)
+      drawRef(self, ctx1, ctx3)
+    }),
+  )
+
+  addDisposer(
+    self,
+    autorun(() => {
+      const view = getContainingView(self)
+      if (!view.initialized) {
+        return
+      }
+      drawMouseoverSynteny(self)
+    }),
+  )
+
+  // this attempts to reduce recalculation of feature positions drawn by
+  // the synteny view
+  //
+  // uses a reaction to say "we know the positions don't change in any
+  // relevant way unless bpPerPx changes or displayedRegions changes"
+  addDisposer(
+    self,
+    reaction(
+      () => {
+        const view = getContainingView(self) as LSV
+        return {
+          bpPerPx: view.views.map(v => v.bpPerPx),
+
+          // stringifying 'deeply' accesses the displayed regions, see
+          // issue #3456
+          displayedRegions: JSON.stringify(
+            view.views.map(v => v.displayedRegions),
+          ),
+          features: self.features,
+          initialized: view.initialized,
+        }
+      },
+      ({ initialized }) => {
+        if (!initialized) {
+          return
+        }
+        const { assemblyManager } = getSession(self)
+        const view = getContainingView(self) as LSV
+        const viewSnaps = view.views.map(view => ({
+          ...getSnapshot(view),
+          width: view.width,
+          staticBlocks: view.staticBlocks,
+          interRegionPaddingWidth: view.interRegionPaddingWidth,
+          minimumBlockWidth: view.minimumBlockWidth,
+        }))
+
+        const map = [] as FeatPos[]
+        const feats = self.features || []
+
+        for (let i = 0; i < feats.length; i++) {
+          const f = feats[i]
+          const mate = f.get('mate')
+          let f1s = f.get('start')
+          let f1e = f.get('end')
+          const f2s = mate.start
+          const f2e = mate.end
+
+          if (f.get('strand') === -1) {
+            ;[f1e, f1s] = [f1s, f1e]
+          }
+          const a1 = assemblyManager?.get(f.get('assemblyName'))
+          const a2 = assemblyManager?.get(mate.assemblyName)
+          const r1 = f.get('refName')
+          const r2 = mate.refName
+          const ref1 = a1?.getCanonicalRefName(r1) || r1
+          const ref2 = a2?.getCanonicalRefName(r2) || r2
+          const v1 = viewSnaps[0]
+          const v2 = viewSnaps[1]
+          const p11 = bpToPx({ self: v1, refName: ref1, coord: f1s })
+          const p12 = bpToPx({ self: v1, refName: ref1, coord: f1e })
+          const p21 = bpToPx({ self: v2, refName: ref2, coord: f2s })
+          const p22 = bpToPx({ self: v2, refName: ref2, coord: f2e })
+
+          if (
+            p11 === undefined ||
+            p12 === undefined ||
+            p21 === undefined ||
+            p22 === undefined
+          ) {
+            continue
+          }
+
+          const cigar = f.get('CIGAR') as string | undefined
+          map.push({
+            p11,
+            p12,
+            p21,
+            p22,
+            f,
+            cigar: MismatchParser.parseCigar(cigar),
+          })
+        }
+
+        self.setFeatPositions(map)
+      },
+      { fireImmediately: true },
+    ),
+  )
+}

package/src/LinearSyntenyDisplay/components/Component.tsx

@@ -0,0 +1,75 @@
+import React, { useEffect, useState } from 'react'
+import { makeStyles } from 'tss-react/mui'
+import { observer } from 'mobx-react'
+import { LoadingEllipses } from '@jbrowse/core/ui'
+
+// locals
+import LinearSyntenyRendering from './LinearSyntenyRendering'
+import { LinearSyntenyDisplayModel } from '../model'
+
+const useStyles = makeStyles()(theme => {
+  const bg = theme.palette.action.disabledBackground
+  return {
+    loading: {
+      paddingLeft: '0.6em',
+      backgroundColor: theme.palette.background.default,
+      backgroundImage: `repeating-linear-gradient(45deg, transparent, transparent 5px, ${bg} 5px, ${bg} 10px)`,
+      textAlign: 'center',
+    },
+    blockMessage: {
+      background: '#f1f1f1',
+      padding: 10,
+    },
+    blockError: {
+      background: '#f1f1f1',
+      padding: 10,
+      color: 'red',
+    },
+  }
+})
+
+function LoadingMessage() {
+  // only show the loading message after 300ms to prevent excessive flickering
+  const [shown, setShown] = useState(false)
+  const { classes } = useStyles()
+  useEffect(() => {
+    const timeout = setTimeout(() => setShown(true), 300)
+    return () => clearTimeout(timeout)
+  })
+
+  return shown ? (
+    <div className={classes.loading}>
+      <LoadingEllipses />
+    </div>
+  ) : null
+}
+
+function BlockMessage({ messageText }: { messageText: string }) {
+  const { classes } = useStyles()
+  return <div className={classes.blockMessage}>{messageText}</div>
+}
+
+function BlockError({ error }: { error: unknown }) {
+  const { classes } = useStyles()
+  return <div className={classes.blockError}>{`${error}`}</div>
+}
+
+const ServerSideRenderedBlockContent = observer(function ({
+  model,
+}: {
+  model: LinearSyntenyDisplayModel
+}) {
+  if (model.error) {
+    return <BlockError error={model.error} />
+  }
+  if (model.message) {
+    return <BlockMessage messageText={model.message} />
+  }
+  if (!model.features) {
+    return <LoadingMessage />
+  }
+
+  return <LinearSyntenyRendering model={model} />
+})
+
+export default ServerSideRenderedBlockContent