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

package/src/BreakpointAlignmentsFeatureDetail/BreakpointAlignmentsFeatureDetail.tsx

@@ -1,24 +0,0 @@
-import Paper from '@mui/material/Paper'
-import { observer } from 'mobx-react'
-import React from 'react'
-import {
-  BaseCoreDetails,
-  BaseAttributes,
-} from '@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail'
-
-const BreakpointAlignmentsFeatureDetail = observer(
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  ({ model }: { model: any }) => {
-    const { feature1, feature2 } = JSON.parse(JSON.stringify(model.featureData))
-    return (
-      <Paper data-testid="alignment-side-drawer">
-        <BaseCoreDetails title="Feature 1" feature={feature1} />
-        <BaseCoreDetails title="Feature 2" feature={feature2} />
-        <BaseAttributes title="Feature 1 attributes" feature={feature1} />
-        <BaseAttributes title="Feature 2 attributes" feature={feature2} />
-      </Paper>
-    )
-  },
-)
-
-export default BreakpointAlignmentsFeatureDetail

package/src/BreakpointAlignmentsFeatureDetail/index.ts

@@ -1,35 +0,0 @@
-import { lazy } from 'react'
-import { ConfigurationSchema } from '@jbrowse/core/configuration'
-import PluginManager from '@jbrowse/core/PluginManager'
-import { ElementId } from '@jbrowse/core/util/types/mst'
-import { types } from 'mobx-state-tree'
-import { WidgetType } from '@jbrowse/core/pluggableElementTypes'
-
-const configSchema = ConfigurationSchema('BreakpointAlignmentsWidget', {})
-
-const stateModel = types
-  .model('BreakpointAlignmentsWidget', {
-    id: ElementId,
-    type: types.literal('BreakpointAlignmentsWidget'),
-    featureData: types.frozen(),
-  })
-  .actions(self => ({
-    setFeatureData(data: unknown) {
-      self.featureData = data
-    },
-    clearFeatureData() {
-      self.featureData = undefined
-    },
-  }))
-
-export default (pluginManager: PluginManager) => {
-  pluginManager.addWidgetType(() => {
-    return new WidgetType({
-      name: 'BreakpointAlignmentsWidget',
-      heading: 'Breakpoint feature details',
-      configSchema,
-      stateModel,
-      ReactComponent: lazy(() => import('./BreakpointAlignmentsFeatureDetail')),
-    })
-  })
-}

package/src/BreakpointSplitView/BreakpointSplitView.ts

@@ -1,100 +0,0 @@
-import { getSession, Feature } from '@jbrowse/core/util'
-import ViewType from '@jbrowse/core/pluggableElementTypes/ViewType'
-import { parseBreakend } from '@gmod/vcf'
-import { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
-
-type LGV = LinearGenomeViewModel
-
-export default class BreakpointSplitViewType extends ViewType {
-  snapshotFromBreakendFeature(feature: Feature, view: LGV) {
-    const alt = feature.get('ALT')?.[0]
-    const bnd = alt ? parseBreakend(alt) : undefined
-    const startPos = feature.get('start')
-    let endPos
-    const bpPerPx = 10
-
-    // TODO: Figure this out for multiple assembly names
-    const { assemblyName } = view.displayedRegions[0]
-    const { assemblyManager } = getSession(view)
-    const assembly = assemblyManager.get(assemblyName)
-
-    if (!assembly) {
-      throw new Error(`assembly ${assemblyName} not found`)
-    }
-    if (!assembly.regions) {
-      throw new Error(`assembly ${assemblyName} regions not loaded`)
-    }
-    const { getCanonicalRefName } = assembly
-    const featureRefName = getCanonicalRefName(feature.get('refName'))
-    const topRegion = assembly.regions.find(f => f.refName === featureRefName)
-
-    let mateRefName: string | undefined
-    let startMod = 0
-    let endMod = 0
-
-    // a VCF breakend feature
-    if (alt === '<TRA>') {
-      const INFO = feature.get('INFO')
-      endPos = INFO.END[0] - 1
-      mateRefName = getCanonicalRefName(INFO.CHR2[0])
-    } else if (bnd?.MatePosition) {
-      const matePosition = bnd.MatePosition.split(':')
-      endPos = +matePosition[1] - 1
-      mateRefName = getCanonicalRefName(matePosition[0])
-      if (bnd.Join === 'left') {
-        startMod = -1
-      }
-      if (bnd.MateDirection === 'left') {
-        endMod = -1
-      }
-    } else if (feature.get('mate')) {
-      // a generic 'mate' feature
-      const mate = feature.get('mate')
-      mateRefName = getCanonicalRefName(mate.refName)
-      endPos = mate.start
-    }
-
-    if (!mateRefName) {
-      throw new Error(
-        `unable to resolve mate refName ${mateRefName} in reference genome`,
-      )
-    }
-
-    const bottomRegion = assembly.regions.find(f => f.refName === mateRefName)
-
-    if (!topRegion || !bottomRegion) {
-      throw new Error(
-        `unable to find the refName for the top or bottom of the breakpoint view`,
-      )
-    }
-
-    const topMarkedRegion = [{ ...topRegion }, { ...topRegion }]
-    const bottomMarkedRegion = [{ ...bottomRegion }, { ...bottomRegion }]
-    topMarkedRegion[0].end = startPos + startMod
-    topMarkedRegion[1].start = startPos + startMod
-    bottomMarkedRegion[0].end = endPos + endMod
-    bottomMarkedRegion[1].start = endPos + endMod
-    return {
-      type: 'BreakpointSplitView',
-      views: [
-        {
-          type: 'LinearGenomeView',
-          displayedRegions: topMarkedRegion,
-          hideHeader: true,
-          bpPerPx,
-          offsetPx: (topRegion.start + feature.get('start')) / bpPerPx,
-        },
-        {
-          type: 'LinearGenomeView',
-          displayedRegions: bottomMarkedRegion,
-          hideHeader: true,
-          bpPerPx,
-          offsetPx: (bottomRegion.start + endPos) / bpPerPx,
-        },
-      ],
-      displayName: `${
-        feature.get('name') || feature.get('id') || 'breakend'
-      } split detail`,
-    }
-  }
-}

package/src/BreakpointSplitView/components/AlignmentConnections.tsx

@@ -1,166 +0,0 @@
-import React, { useMemo, useState } from 'react'
-import { observer } from 'mobx-react'
-import { getSnapshot } from 'mobx-state-tree'
-import { useTheme } from '@mui/material'
-import { getSession } from '@jbrowse/core/util'
-
-// locals
-import {
-  getBadlyPairedAlignments,
-  getMatchedAlignmentFeatures,
-  hasPairedReads,
-} from './util'
-import { yPos, useNextFrame, getPxFromCoordinate } from '../util'
-import { BreakpointViewModel } from '../model'
-
-const [LEFT, , RIGHT] = [0, 1, 2, 3]
-
-const AlignmentConnections = observer(function ({
-  model,
-  trackId,
-  parentRef,
-  getTrackYPosOverride,
-}: {
-  model: BreakpointViewModel
-  trackId: string
-  parentRef: React.RefObject<SVGSVGElement>
-  getTrackYPosOverride?: (trackId: string, level: number) => number
-}) {
-  const { views, showIntraviewLinks } = model
-  const theme = useTheme()
-  const session = getSession(model)
-  const snap = getSnapshot(model)
-  const { assemblyManager } = session
-  const assembly = assemblyManager.get(views[0].assemblyNames[0])
-  useNextFrame(snap)
-  const allFeatures = model.getTrackFeatures(trackId)
-  const hasPaired = useMemo(() => hasPairedReads(allFeatures), [allFeatures])
-
-  const layoutMatches = useMemo(() => {
-    const layoutMatches = model.getMatchedFeaturesInLayout(
-      trackId,
-      hasPaired
-        ? getBadlyPairedAlignments(allFeatures)
-        : getMatchedAlignmentFeatures(allFeatures),
-    )
-    if (!hasPaired) {
-      layoutMatches.forEach(m => {
-        m.sort((a, b) => a.feature.get('clipPos') - b.feature.get('clipPos'))
-      })
-    }
-    return layoutMatches
-  }, [allFeatures, trackId, hasPaired, model])
-
-  const [mouseoverElt, setMouseoverElt] = useState<string>()
-
-  let yOffset = 0
-  if (parentRef.current) {
-    const rect = parentRef.current.getBoundingClientRect()
-    yOffset = rect.top
-  }
-
-  if (!assembly) {
-    return null
-  }
-
-  return (
-    <g
-      stroke={theme.palette.text.disabled}
-      fill="none"
-      data-testid={layoutMatches.length ? `${trackId}-loaded` : trackId}
-    >
-      {layoutMatches.map(chunk => {
-        const ret = []
-        // we follow a path in the list of chunks, not from top to bottom, just in series
-        // following x1,y1 -> x2,y2
-        for (let i = 0; i < chunk.length - 1; i++) {
-          const { layout: c1, feature: f1, level: level1 } = chunk[i]
-          const { layout: c2, feature: f2, level: level2 } = chunk[i + 1]
-
-          if (!c1 || !c2) {
-            console.warn('received null layout for a overlay feature')
-            return null
-          }
-
-          // disable rendering connections in a single level
-          if (!showIntraviewLinks && level1 === level2) {
-            return null
-          }
-          const f1ref = assembly.getCanonicalRefName(f1.get('refName'))
-          const f2ref = assembly.getCanonicalRefName(f2.get('refName'))
-
-          if (!f1ref || !f2ref) {
-            throw new Error(`unable to find ref for ${f1ref || f2ref}`)
-          }
-
-          const s1 = f1.get('strand')
-          const s2 = f2.get('strand')
-          const p1 = c1[s1 === -1 ? LEFT : RIGHT]
-          const sn1 = s2 === -1
-          const p2 = hasPaired ? c2[sn1 ? LEFT : RIGHT] : c2[sn1 ? RIGHT : LEFT]
-          const x1 = getPxFromCoordinate(views[level1], f1ref, p1)
-          const x2 = getPxFromCoordinate(views[level2], f2ref, p2)
-          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
-
-          // possible todo: use totalCurveHeight to possibly make alternative
-          // squiggle if the S is too small
-          const path = [
-            'M',
-            x1,
-            y1,
-            'C',
-            x1 + 200 * f1.get('strand') * (reversed1 ? -1 : 1),
-            y1,
-            x2 -
-              200 *
-                f2.get('strand') *
-                (reversed2 ? -1 : 1) *
-                (hasPaired ? -1 : 1),
-            y2,
-            x2,
-            y2,
-          ].join(' ')
-          const id = `${f1.id()}-${f2.id()}`
-          ret.push(
-            <path
-              d={path}
-              key={id}
-              data-testid="r1"
-              strokeWidth={mouseoverElt === id ? 5 : 1}
-              onClick={() => {
-                const featureWidget = session.addWidget?.(
-                  'BreakpointAlignmentsWidget',
-                  'breakpointAlignments',
-                  {
-                    featureData: {
-                      feature1: (
-                        allFeatures.get(f1.id()) || { toJSON: () => {} }
-                      ).toJSON(),
-                      feature2: (
-                        allFeatures.get(f2.id()) || { toJSON: () => {} }
-                      ).toJSON(),
-                    },
-                  },
-                )
-                session.showWidget?.(featureWidget)
-              }}
-              onMouseOver={() => setMouseoverElt(id)}
-              onMouseOut={() => setMouseoverElt(undefined)}
-            />,
-          )
-        }
-        return ret
-      })}
-    </g>
-  )
-})
-
-export default AlignmentConnections

package/src/BreakpointSplitView/components/Breakends.tsx

@@ -1,141 +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 { findMatchingAlt, getMatchedBreakendFeatures } from './util'
-import { yPos, getPxFromCoordinate, useNextFrame } from '../util'
-import { BreakpointViewModel } from '../model'
-
-const [LEFT] = [0, 1, 2, 3]
-
-const Breakends = 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,
-        getMatchedBreakendFeatures(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 yoff = 0
-  if (ref.current) {
-    const rect = ref.current.getBoundingClientRect()
-    yoff = rect.top
-  }
-
-  return (
-    <g
-      stroke="green"
-      strokeWidth={5}
-      fill="none"
-      data-testid={layoutMatches.length ? `${trackId}-loaded` : trackId}
-    >
-      {layoutMatches.map(chunk => {
-        const ret = []
-        // we follow a path in the list of chunks, not from top to bottom, just
-        // in series following x1,y1 -> x2,y2
-        for (let i = 0; i < chunk.length - 1; i += 1) {
-          const { layout: c1, feature: f1, level: level1 } = chunk[i]
-          const { layout: c2, feature: f2, level: level2 } = chunk[i + 1]
-          const id = f1.id()
-
-          const relevantAlt = findMatchingAlt(f1, f2)
-          if (!c1 || !c2) {
-            return null
-          }
-          const f1origref = f1.get('refName')
-          const f2origref = f2.get('refName')
-          const f1ref = assembly.getCanonicalRefName(f1origref)
-          const f2ref = assembly.getCanonicalRefName(f2origref)
-          if (!f1ref || !f2ref) {
-            throw new Error(`unable to find ref for ${f1ref || f2ref}`)
-          }
-          const x1 = getPxFromCoordinate(views[level1], f1ref, c1[LEFT])
-          const x2 = getPxFromCoordinate(views[level2], f2ref, c2[LEFT])
-          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) -
-            yoff
-          const y2 =
-            yPos(trackId, level2, views, tracks, c2, getTrackYPosOverride) -
-            yoff
-          if (!relevantAlt) {
-            console.warn('the relevant ALT allele was not found, cannot render')
-          } else {
-            const path = [
-              'M', // move to
-              x1 -
-                20 *
-                  (relevantAlt.Join === 'left' ? -1 : 1) *
-                  (reversed1 ? -1 : 1),
-              y1,
-              'L', // line to
-              x1,
-              y1,
-              'L', // line to
-              x2,
-              y2,
-              'L', // line to
-              x2 -
-                20 *
-                  (relevantAlt.MateDirection === 'left' ? 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(),
-                    },
-                  )
-                  session.showWidget?.(featureWidget)
-                }}
-                onMouseOver={() => setMouseoverElt(id)}
-                onMouseOut={() => setMouseoverElt(undefined)}
-              />,
-            )
-          }
-        }
-        return ret
-      })}
-    </g>
-  )
-})
-
-export default Breakends

package/src/BreakpointSplitView/components/BreakpointSplitView.tsx

@@ -1,95 +0,0 @@
-import React, { useRef } from 'react'
-import { observer } from 'mobx-react'
-import { getEnv } from 'mobx-state-tree'
-import { makeStyles } from 'tss-react/mui'
-
-// locals
-import { BreakpointViewModel } from '../model'
-import Overlay from './Overlay'
-
-const useStyles = makeStyles()(theme => ({
-  viewDivider: {
-    background: theme.palette.secondary.main,
-    height: 3,
-  },
-  container: {
-    display: 'grid',
-  },
-  overlay: {
-    display: 'flex',
-    width: '100%',
-    gridArea: '1/1',
-    '& path': {
-      cursor: 'crosshair',
-      fill: 'none',
-    },
-  },
-  content: {
-    gridArea: '1/1',
-  },
-}))
-
-const BreakpointSplitView = observer(function ({
-  model,
-}: {
-  model: BreakpointViewModel
-}) {
-  const { classes } = useStyles()
-  const { views } = model
-  const { pluginManager } = getEnv(model)
-  const ref = useRef(null)
-
-  return (
-    <div>
-      <div className={classes.container}>
-        <div className={classes.content}>
-          <div style={{ position: 'relative' }}>
-            {views.map((view, idx) => {
-              const { ReactComponent } = pluginManager.getViewType(view.type)
-              const viewComponent = (
-                <ReactComponent key={view.id} model={view} />
-              )
-              if (idx === views.length - 1) {
-                return viewComponent
-              }
-              return [
-                viewComponent,
-                <div
-                  key={`${view.id}-divider`}
-                  className={classes.viewDivider}
-                />,
-              ]
-            })}
-          </div>
-        </div>
-        <div className={classes.overlay}>
-          <svg
-            ref={ref}
-            style={{
-              width: '100%',
-              zIndex: 10,
-              pointerEvents: model.interactToggled ? undefined : 'none',
-            }}
-          >
-            {model.matchedTracks.map(track => (
-              // note: we must pass ref down, because the child component
-              // needs to getBoundingClientRect on the this components SVG,
-              // and we cannot rely on using getBoundingClientRect in this
-              // component to make sure this works because if it gets
-              // shifted around by another element, this will not re-render
-              // necessarily
-              <Overlay
-                parentRef={ref}
-                key={track.configuration.trackId}
-                model={model}
-                trackId={track.configuration.trackId}
-              />
-            ))}
-          </svg>
-        </div>
-      </div>
-    </div>
-  )
-})
-
-export default BreakpointSplitView