@jbrowse/plugin-linear-comparative-view 2.6.1 → 2.6.3

package/src/LinearReadVsRef/LinearReadVsRef.tsx

@@ -1,360 +0,0 @@
-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

@@ -1,58 +0,0 @@
-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

@@ -1,149 +0,0 @@
-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

@@ -1,75 +0,0 @@
-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