@jbrowse/plugin-breakpoint-split-view 2.6.1

package/esm/BreakpointSplitView/util.d.ts

@@ -0,0 +1,18 @@
+import { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view';
+import { LayoutRecord } from './model';
+type LGV = LinearGenomeViewModel;
+interface Display {
+    height: number;
+    scrollTop: number;
+    SNPCoverageDisplay?: {
+        height: number;
+    };
+}
+interface Track {
+    displays: Display[];
+}
+export declare function getPxFromCoordinate(view: LGV, refName: string, coord: number): number;
+export declare function yPos(trackId: string, level: number, views: LGV[], tracks: Track[], c: LayoutRecord, getYPosOverride?: (trackId: string, level: number) => number): number;
+export declare const useNextFrame: (variable: unknown) => void;
+export declare function intersect<T>(cb: (l: T) => string, a1?: T[], a2?: T[], ...rest: T[][]): T[];
+export {};

package/esm/BreakpointSplitView/util.js

@@ -0,0 +1,49 @@
+import { useState, useEffect } from 'react';
+import { clamp } from '@jbrowse/core/util';
+const [, TOP, , BOTTOM] = [0, 1, 2, 3];
+function cheight(chunk) {
+    return chunk[BOTTOM] - chunk[TOP];
+}
+function heightFromSpecificLevel(views, trackId, level, getYPosOverride) {
+    var _a;
+    return getYPosOverride
+        ? getYPosOverride(trackId, level)
+        : ((_a = views[level].trackRefs[trackId]) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().top) || 0;
+}
+export function getPxFromCoordinate(view, refName, coord) {
+    return ((view.bpToPx({ refName, coord }) || {}).offsetPx || 0) - view.offsetPx;
+}
+// get's the yposition of a layout record in a track
+export function yPos(trackId, level, views, tracks, c, getYPosOverride) {
+    const display = tracks[level].displays[0];
+    const min = 0;
+    const max = display.height;
+    let offset = 0;
+    const { SNPCoverageDisplay } = display;
+    if (SNPCoverageDisplay) {
+        offset = SNPCoverageDisplay.height;
+    }
+    const yPos = getYPosOverride ? 0 : display.scrollTop;
+    return (clamp(c[TOP] - yPos + cheight(c) / 2 + offset, min, max) +
+        heightFromSpecificLevel(views, trackId, level, getYPosOverride) +
+        display.scrollTop);
+}
+// we combo a useEffect and useState combo to force rerender on snap changing.
+// the setup of this being a useEffect+useState makes it re-render once the
+// useEffect is called, which is generally the "next frame". If we removed the
+// below use
+export const useNextFrame = (variable) => {
+    const [, setNextFrameState] = useState();
+    useEffect(() => {
+        setNextFrameState(variable);
+    }, [variable]);
+};
+// https://stackoverflow.com/a/49186706/2129219 the array-intersection package
+// on npm has a large kb size, and we are just intersecting open track ids so
+// simple is better
+export function intersect(cb, a1 = [], a2 = [], ...rest) {
+    const ids = new Set(a2.map(elt => cb(elt)));
+    const a12 = a1.filter(value => ids.has(cb(value)));
+    return rest.length === 0 ? a12 : intersect(cb, a12, ...rest);
+}
+//# sourceMappingURL=util.js.map

package/esm/BreakpointSplitView/util.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"util.js","sourceRoot":"","sources":["../../src/BreakpointSplitView/util.ts"],"names":[],"mappings":"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"}

package/esm/index.d.ts

@@ -0,0 +1,7 @@
+import PluginManager from '@jbrowse/core/PluginManager';
+import Plugin from '@jbrowse/core/Plugin';
+export default class BreakpointSplitViewPlugin extends Plugin {
+    name: string;
+    install(pluginManager: PluginManager): void;
+    configure(): void;
+}

package/esm/index.js

@@ -0,0 +1,15 @@
+import Plugin from '@jbrowse/core/Plugin';
+import BreakpointAlignmentsWidgetF from './BreakpointAlignmentsFeatureDetail';
+import BreakpointSplitViewF from './BreakpointSplitView';
+export default class BreakpointSplitViewPlugin extends Plugin {
+    constructor() {
+        super(...arguments);
+        this.name = 'BreakpointSplitViewPlugin';
+    }
+    install(pluginManager) {
+        BreakpointSplitViewF(pluginManager);
+        BreakpointAlignmentsWidgetF(pluginManager);
+    }
+    configure() { }
+}
+//# sourceMappingURL=index.js.map

package/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,MAAM,MAAM,sBAAsB,CAAA;AACzC,OAAO,2BAA2B,MAAM,qCAAqC,CAAA;AAC7E,OAAO,oBAAoB,MAAM,uBAAuB,CAAA;AAExD,MAAM,CAAC,OAAO,OAAO,yBAA0B,SAAQ,MAAM;IAA7D;;QACE,SAAI,GAAG,2BAA2B,CAAA;IAQpC,CAAC;IANC,OAAO,CAAC,aAA4B;QAClC,oBAAoB,CAAC,aAAa,CAAC,CAAA;QACnC,2BAA2B,CAAC,aAAa,CAAC,CAAA;IAC5C,CAAC;IAED,SAAS,KAAI,CAAC;CACf"}

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "@jbrowse/plugin-breakpoint-split-view",
+  "version": "2.6.1",
+  "description": "JBrowse 2 breakpoint detail split view",
+  "keywords": [
+    "jbrowse",
+    "jbrowse2"
+  ],
+  "license": "Apache-2.0",
+  "homepage": "https://jbrowse.org",
+  "bugs": "https://github.com/GMOD/jbrowse-components/issues",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/GMOD/jbrowse-components.git",
+    "directory": "plugins/breakpoint-split-view"
+  },
+  "author": "JBrowse Team",
+  "distMain": "dist/index.js",
+  "srcMain": "src/index.ts",
+  "main": "dist/index.js",
+  "files": [
+    "dist",
+    "src",
+    "esm"
+  ],
+  "scripts": {
+    "build": "npm-run-all build:*",
+    "test": "cd ../..; jest plugins/breakpoint-split-view",
+    "prepublishOnly": "yarn test",
+    "prepack": "yarn build && yarn useDist",
+    "postpack": "yarn useSrc",
+    "useDist": "node ../../scripts/useDist.js",
+    "useSrc": "node ../../scripts/useSrc.js",
+    "prebuild": "npm run clean",
+    "build:esm": "tsc --build tsconfig.build.esm.json",
+    "build:es5": "tsc --build tsconfig.build.es5.json",
+    "clean": "rimraf dist esm *.tsbuildinfo"
+  },
+  "dependencies": {
+    "@gmod/vcf": "^5.0.9",
+    "@mui/icons-material": "^5.0.1",
+    "@types/file-saver": "^2.0.1",
+    "file-saver": "^2.0.0"
+  },
+  "peerDependencies": {
+    "@jbrowse/core": "^2.0.0",
+    "@jbrowse/plugin-linear-genome-view": "^2.0.0",
+    "@mui/material": "^5.0.0",
+    "mobx": "^6.0.0",
+    "mobx-react": "^7.0.0",
+    "mobx-state-tree": "^5.0.0",
+    "react": ">=16.8.4",
+    "react-dom": ">=16.8.4",
+    "tss-react": "^4.0.0"
+  },
+  "distModule": "esm/index.js",
+  "srcModule": "src/index.ts",
+  "module": "esm/index.js",
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "1cbe7ba097fb2d2763c776e5e429e4670cdd583c"
+}

package/src/BreakpointAlignmentsFeatureDetail/BreakpointAlignmentsFeatureDetail.tsx

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

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

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

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

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