@jbrowse/plugin-breakpoint-split-view 2.6.1 → 2.6.2

package/src/BreakpointSplitView/components/ExportSvgDialog.tsx

@@ -1,149 +0,0 @@
-import React, { useState } from 'react'
-import {
-  Button,
-  Checkbox,
-  CircularProgress,
-  DialogActions,
-  DialogContent,
-  FormControlLabel,
-  MenuItem,
-  TextField,
-  Typography,
-} from '@mui/material'
-import { Dialog, ErrorMessage } from '@jbrowse/core/ui'
-import { getSession, useLocalStorage } from '@jbrowse/core/util'
-
-// locals
-import { ExportSvgOptions } from '../model'
-
-function LoadingMessage() {
-  return (
-    <div>
-      <CircularProgress size={20} style={{ marginRight: 20 }} />
-      <Typography display="inline">Creating SVG</Typography>
-    </div>
-  )
-}
-
-function useSvgLocal<T>(key: string, val: T) {
-  return useLocalStorage('svg-' + key, val)
-}
-
-export default function ExportSvgDlg({
-  model,
-  handleClose,
-}: {
-  model: { exportSvg(opts: ExportSvgOptions): Promise<void> }
-  handleClose: () => void
-}) {
-  const session = getSession(model)
-  const offscreenCanvas = typeof OffscreenCanvas !== 'undefined'
-  const [rasterizeLayers, setRasterizeLayers] = useState(offscreenCanvas)
-  const [loading, setLoading] = useState(false)
-  const [error, setError] = useState<unknown>()
-  const [filename, setFilename] = useSvgLocal('file', 'jbrowse.svg')
-  const [trackLabels, setTrackLabels] = useSvgLocal('tracklabels', 'offset')
-  const [themeName, setThemeName] = useSvgLocal(
-    'theme',
-    session.themeName || 'default',
-  )
-  return (
-    <Dialog open onClose={handleClose} title="Export SVG">
-      <DialogContent>
-        {error ? (
-          <ErrorMessage error={error} />
-        ) : loading ? (
-          <LoadingMessage />
-        ) : null}
-        <TextField
-          helperText="filename"
-          value={filename}
-          onChange={event => setFilename(event.target.value)}
-        />
-        <br />
-        <TextField
-          select
-          label="Track label positioning"
-          variant="outlined"
-          style={{ width: 150 }}
-          value={trackLabels}
-          onChange={event => setTrackLabels(event.target.value)}
-        >
-          <MenuItem value="offset">Offset</MenuItem>
-          <MenuItem value="overlay">Overlay</MenuItem>
-          <MenuItem value="left">Left</MenuItem>
-          <MenuItem value="none">None</MenuItem>
-        </TextField>
-        <br />
-        {session.allThemes ? (
-          <TextField
-            select
-            label="Theme"
-            variant="outlined"
-            value={themeName}
-            onChange={event => setThemeName(event.target.value)}
-          >
-            {Object.entries(session.allThemes()).map(([key, val]) => (
-              <MenuItem key={key} value={key}>
-                {
-                  // @ts-expect-error
-                  val.name || '(Unknown name)'
-                }
-              </MenuItem>
-            ))}
-          </TextField>
-        ) : null}
-
-        {offscreenCanvas ? (
-          <FormControlLabel
-            control={
-              <Checkbox
-                checked={rasterizeLayers}
-                onChange={() => setRasterizeLayers(val => !val)}
-              />
-            }
-            label="Rasterize canvas based tracks? File may be much larger if this is turned off"
-          />
-        ) : (
-          <Typography>
-            Note: rasterizing layers not yet supported in this browser, so SVG
-            size may be large
-          </Typography>
-        )}
-      </DialogContent>
-      <DialogActions>
-        <Button
-          variant="contained"
-          color="secondary"
-          onClick={() => handleClose()}
-        >
-          Cancel
-        </Button>
-        <Button
-          variant="contained"
-          color="primary"
-          type="submit"
-          onClick={async () => {
-            setLoading(true)
-            setError(undefined)
-            try {
-              await model.exportSvg({
-                rasterizeLayers,
-                filename,
-                trackLabels,
-                themeName,
-              })
-              handleClose()
-            } catch (e) {
-              console.error(e)
-              setError(e)
-              setLoading(false)
-            }
-          }}
-        >
-          Submit
-        </Button>
-      </DialogActions>
-    </Dialog>
-  )
-}

package/src/BreakpointSplitView/components/Overlay.tsx

@@ -1,29 +0,0 @@
-import React from 'react'
-import { observer } from 'mobx-react'
-
-// locals
-import { BreakpointViewModel } from '../model'
-import AlignmentConnections from './AlignmentConnections'
-import Breakends from './Breakends'
-import Translocations from './Translocations'
-
-export default observer(function (props: {
-  parentRef: React.RefObject<SVGSVGElement>
-  model: BreakpointViewModel
-  trackId: string
-  getTrackYPosOverride?: (trackId: string, level: number) => number
-}) {
-  const { model, trackId } = props
-  const tracks = model.getMatchedTracks(trackId)
-  if (tracks[0]?.type === 'AlignmentsTrack') {
-    return <AlignmentConnections {...props} />
-  }
-  if (tracks[0]?.type === 'VariantTrack') {
-    return model.hasTranslocations(trackId) ? (
-      <Translocations {...props} />
-    ) : (
-      <Breakends {...props} />
-    )
-  }
-  return null
-})

package/src/BreakpointSplitView/components/Translocations.tsx

@@ -1,147 +0,0 @@
-import React, { useState, useMemo } from 'react'
-import { getSession } from '@jbrowse/core/util'
-import { observer } from 'mobx-react'
-import { getSnapshot } from 'mobx-state-tree'
-
-// locals
-import { getMatchedTranslocationFeatures } from './util'
-import { yPos, getPxFromCoordinate, useNextFrame } from '../util'
-import { BreakpointViewModel, LayoutRecord } from '../model'
-
-const [LEFT] = [0, 1, 2, 3]
-
-const Translocations = observer(function ({
-  model,
-  trackId,
-  parentRef: ref,
-  getTrackYPosOverride,
-}: {
-  model: BreakpointViewModel
-  trackId: string
-  parentRef: React.RefObject<SVGSVGElement>
-  getTrackYPosOverride?: (trackId: string, level: number) => number
-}) {
-  const { views } = model
-  const session = getSession(model)
-  const { assemblyManager } = session
-  const totalFeatures = model.getTrackFeatures(trackId)
-  const layoutMatches = useMemo(
-    () =>
-      model.getMatchedFeaturesInLayout(
-        trackId,
-        getMatchedTranslocationFeatures(totalFeatures),
-      ),
-
-    [totalFeatures, trackId, model],
-  )
-
-  const [mouseoverElt, setMouseoverElt] = useState<string>()
-  const snap = getSnapshot(model)
-  useNextFrame(snap)
-
-  const assembly = assemblyManager.get(views[0].assemblyNames[0])
-  if (!assembly) {
-    return null
-  }
-
-  let yOffset = 0
-  if (ref.current) {
-    const rect = ref.current.getBoundingClientRect()
-    yOffset = rect.top
-  }
-
-  // we hardcode the TRA to go to the "other view" and if there is none, we
-  // just return null here note: would need to do processing of the INFO
-  // CHR2/END and see which view could contain those coordinates to really do
-  // it properly
-  if (views.length < 2) {
-    return null
-  }
-  return (
-    <g
-      fill="none"
-      stroke="green"
-      strokeWidth={5}
-      data-testid={layoutMatches.length ? `${trackId}-loaded` : trackId}
-    >
-      {layoutMatches.map(chunk => {
-        // we follow a path in the list of chunks, not from top to bottom,
-        // just in series following x1,y1 -> x2,y2
-        const ret = []
-        for (let i = 0; i < chunk.length; i += 1) {
-          const { layout: c1, feature: f1, level: level1 } = chunk[i]
-          const level2 = level1 === 0 ? 1 : 0
-          const id = f1.id()
-          if (!c1) {
-            return null
-          }
-
-          const info = f1.get('INFO')
-          const chr2 = info.CHR2[0]
-          const end2 = info.END[0]
-          const [myDirection, mateDirection] = info.STRANDS[0].split('')
-
-          const r = getPxFromCoordinate(views[level2], chr2, end2)
-          if (r) {
-            const c2: LayoutRecord = [r, 0, r + 1, 0]
-            const x1 = getPxFromCoordinate(
-              views[level1],
-              f1.get('refName'),
-              c1[LEFT],
-            )
-            const x2 = r
-            const reversed1 = views[level1].pxToBp(x1).reversed
-            const reversed2 = views[level2].pxToBp(x2).reversed
-
-            const tracks = views.map(v => v.getTrack(trackId))
-            const y1 =
-              yPos(trackId, level1, views, tracks, c1, getTrackYPosOverride) -
-              yOffset
-            const y2 =
-              yPos(trackId, level2, views, tracks, c2, getTrackYPosOverride) -
-              yOffset
-
-            const path = [
-              'M', // move to
-              x1 - 20 * (myDirection === '+' ? 1 : -1) * (reversed1 ? -1 : 1),
-              y1,
-              'L', // line to
-              x1,
-              y1,
-              'L', // line to
-              x2,
-              y2,
-              'L', // line to
-              x2 - 20 * (mateDirection === '+' ? 1 : -1) * (reversed2 ? -1 : 1),
-              y2,
-            ].join(' ')
-            ret.push(
-              <path
-                d={path}
-                key={JSON.stringify(path)}
-                strokeWidth={id === mouseoverElt ? 10 : 5}
-                onClick={() => {
-                  const featureWidget = session.addWidget?.(
-                    'VariantFeatureWidget',
-                    'variantFeature',
-                    {
-                      featureData: (
-                        totalFeatures.get(id) || { toJSON: () => {} }
-                      ).toJSON(),
-                    },
-                  )
-                  session.showWidget?.(featureWidget)
-                }}
-                onMouseOver={() => setMouseoverElt(id)}
-                onMouseOut={() => setMouseoverElt(undefined)}
-              />,
-            )
-          }
-        }
-        return ret
-      })}
-    </g>
-  )
-})
-
-export default Translocations

package/src/BreakpointSplitView/components/util.ts

@@ -1,127 +0,0 @@
-import { Feature, notEmpty } from '@jbrowse/core/util'
-
-import { parseBreakend } from '@gmod/vcf'
-
-// this finds candidate alignment features, aimed at plotting split reads from
-// BAM/CRAM files
-export function getBadlyPairedAlignments(features: Map<string, Feature>) {
-  const candidates = new Map<string, Feature[]>()
-  const alreadySeen = new Set<string>()
-
-  // this finds candidate features that share the same name
-  for (const feature of features.values()) {
-    const flags = feature.get('flags')
-    const id = feature.id()
-    const unmapped = flags & 4
-    const correctlyPaired = flags & 2
-
-    if (!alreadySeen.has(id) && !correctlyPaired && !unmapped) {
-      const n = feature.get('name')
-      let val = candidates.get(n)
-      if (!val) {
-        val = []
-        candidates.set(n, val)
-      }
-      val.push(feature)
-    }
-    alreadySeen.add(feature.id())
-  }
-
-  return [...candidates.values()].filter(v => v.length > 1)
-}
-
-function getTag(f: Feature, tag: string) {
-  const tags = f.get('tags')
-  return tags ? tags[tag] : f.get(tag)
-}
-
-// this finds candidate alignment features, aimed at plotting split reads from
-// BAM/CRAM files
-export function getMatchedAlignmentFeatures(features: Map<string, Feature>) {
-  const candidates = new Map<string, Feature[]>()
-  const alreadySeen = new Set<string>()
-
-  // this finds candidate features that share the same name
-  for (const feature of features.values()) {
-    const id = feature.id()
-    const unmapped = feature.get('flags') & 4
-    const hasSA = !!getTag(feature, 'SA')
-    if (!alreadySeen.has(id) && !unmapped && hasSA) {
-      const n = feature.get('name')
-      let val = candidates.get(n)
-      if (!val) {
-        val = []
-        candidates.set(n, val)
-      }
-      val.push(feature)
-    }
-    alreadySeen.add(feature.id())
-  }
-
-  return [...candidates.values()].filter(v => v.length > 1)
-}
-
-export function hasPairedReads(features: Map<string, Feature>) {
-  for (const f of features.values()) {
-    if (f.get('flags') & 1) {
-      return true
-    }
-  }
-  return false
-}
-
-export function findMatchingAlt(feat1: Feature, feat2: Feature) {
-  const alts = feat1.get('ALT') as string[] | undefined
-  if (alts) {
-    return new Map(
-      alts
-        ?.map(alt => parseBreakend(alt))
-        .filter(notEmpty)
-        .map(bnd => [bnd.MatePosition, bnd]),
-    ).get(`${feat2.get('refName')}:${feat2.get('start') + 1}`)
-  }
-  return undefined
-}
-
-// Returns paired BND features across multiple views by inspecting the ALT
-// field to get exact coordinate matches
-export function getMatchedBreakendFeatures(feats: Map<string, Feature>) {
-  const candidates = new Map<string, Feature[]>()
-  const alreadySeen = new Set<string>()
-
-  for (const f of feats.values()) {
-    if (!alreadySeen.has(f.id()) && f.get('type') === 'breakend') {
-      const alts = f.get('ALT') as string[] | undefined
-      alts?.forEach(a => {
-        const cur = `${f.get('refName')}:${f.get('start') + 1}`
-        const bnd = parseBreakend(a)
-        if (bnd) {
-          const val = candidates.get(cur)
-          if (!val) {
-            candidates.set(bnd.MatePosition || 'none', [f])
-          } else {
-            val.push(f)
-          }
-        }
-      })
-    }
-    alreadySeen.add(f.id())
-  }
-
-  return [...candidates.values()].filter(v => v.length > 1)
-}
-
-// Getting "matched" TRA means just return all TRA
-export function getMatchedTranslocationFeatures(feats: Map<string, Feature>) {
-  const ret: Feature[][] = []
-  const alreadySeen = new Set<string>()
-
-  for (const f of feats.values()) {
-    if (!alreadySeen.has(f.id()) && f.get('ALT')[0] === '<TRA>') {
-      ret.push([f])
-    }
-    alreadySeen.add(f.id())
-  }
-
-  return ret
-}

package/src/BreakpointSplitView/index.ts

@@ -1,17 +0,0 @@
-import { lazy } from 'react'
-import PluginManager from '@jbrowse/core/PluginManager'
-
-// locals
-import BreakpointSplitView from './BreakpointSplitView'
-import stateModelFactory from './model'
-
-export default (pluginManager: PluginManager) => {
-  pluginManager.addViewType(() => {
-    return new BreakpointSplitView({
-      name: 'BreakpointSplitView',
-      displayName: 'Breakpoint split view',
-      stateModel: stateModelFactory(pluginManager),
-      ReactComponent: lazy(() => import('./components/BreakpointSplitView')),
-    })
-  })
-}