diff --git a/plugins/breakpoint-split-view/src/model.ts b/plugins/breakpoint-split-view/src/model.ts
index 2f45f711ea..aa2ba9280b 100644
--- a/plugins/breakpoint-split-view/src/model.ts
+++ b/plugins/breakpoint-split-view/src/model.ts
@@ -213,14 +213,16 @@ export default function stateModelFactory(pluginManager: any) {
},
getMatchedFeaturesInLayout(trackConfigId: string, features: Feature[][]) {
+ // use reverse to search the second track first
const tracks = this.getMatchedTracks(trackConfigId)
+
+ const calc = (track: any, feat: Feature) =>
+ track.displays[0].layoutFeatures.get(feat.id())
+
return features.map(c =>
- c.map((feature: Feature) => {
- let layout: LayoutRecord | undefined
- const level = tracks.findIndex(track => {
- layout = track.displays[0].layoutFeatures.get(feature.id())
- return layout
- })
+ c.map(feature => {
+ const level = tracks.findIndex(track => calc(track, feature))
+ const layout = calc(tracks[level], feature)
return {
feature,
layout,
diff --git a/plugins/variants/package.json b/plugins/variants/package.json
index aae6cfe024..83f8202fe6 100644
--- a/plugins/variants/package.json
+++ b/plugins/variants/package.json
@@ -38,6 +38,7 @@
"@gmod/tabix": "^1.5.0",
"@gmod/vcf": "^4.0.1",
"@material-ui/data-grid": "^4.0.0-alpha.20",
+ "@material-ui/icons": "^4.11.2",
"generic-filehandle": "^2.0.0"
},
"peerDependencies": {
diff --git a/plugins/variants/src/VariantFeatureWidget/BreakendOptionDialog.tsx b/plugins/variants/src/VariantFeatureWidget/BreakendOptionDialog.tsx
new file mode 100644
index 0000000000..f6e916d480
--- /dev/null
+++ b/plugins/variants/src/VariantFeatureWidget/BreakendOptionDialog.tsx
@@ -0,0 +1,132 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React, { useState } from 'react'
+import { observer } from 'mobx-react'
+import { makeStyles } from '@material-ui/core/styles'
+import {
+ Button,
+ Dialog,
+ DialogActions,
+ DialogContent,
+ DialogTitle,
+ Divider,
+ IconButton,
+ FormControlLabel,
+ Checkbox,
+} from '@material-ui/core'
+import CloseIcon from '@material-ui/icons/Close'
+import { getSnapshot } from 'mobx-state-tree'
+import { getSession } from '@jbrowse/core/util'
+import { Feature } from '@jbrowse/core/util/simpleFeature'
+
+const useStyles = makeStyles(theme => ({
+ closeButton: {
+ position: 'absolute',
+ right: theme.spacing(1),
+ top: theme.spacing(1),
+ color: theme.palette.grey[500],
+ },
+ block: {
+ display: 'block',
+ },
+}))
+
+export default observer(
+ ({
+ model,
+ handleClose,
+ feature,
+ viewType,
+ }: {
+ model: any
+ handleClose: () => void
+ feature: Feature
+ viewType: any
+ }) => {
+ const classes = useStyles()
+ const [copyTracks, setCopyTracks] = useState(true)
+ const [mirrorTracks, setMirrorTracks] = useState(true)
+
+ return (
+
+ )
+ },
+)
diff --git a/plugins/variants/src/VariantFeatureWidget/VariantFeatureWidget.tsx b/plugins/variants/src/VariantFeatureWidget/VariantFeatureWidget.tsx
index fb38700aab..ab813360c8 100644
--- a/plugins/variants/src/VariantFeatureWidget/VariantFeatureWidget.tsx
+++ b/plugins/variants/src/VariantFeatureWidget/VariantFeatureWidget.tsx
@@ -14,12 +14,13 @@ import SimpleFeature, {
} from '@jbrowse/core/util/simpleFeature'
import { DataGrid } from '@material-ui/data-grid'
import { observer } from 'mobx-react'
+import { getSession } from '@jbrowse/core/util'
import { getEnv } from 'mobx-state-tree'
import {
FeatureDetails,
BaseCard,
} from '@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail'
-import { getSession } from '@jbrowse/core/util'
+import BreakendOptionDialog from './BreakendOptionDialog'
function VariantSamples(props: any) {
const [filter, setFilter] = useState({})
@@ -121,12 +122,15 @@ function BreakendPanel(props: {
const { model, locStrings, feature } = props
const session = getSession(model)
const { pluginManager } = getEnv(session)
+ const [breakpointDialog, setBreakpointDialog] = useState(false)
let viewType: any
try {
viewType = pluginManager.getViewType('BreakpointSplitView')
} catch (e) {
// plugin not added
}
+
+ const simpleFeature = new SimpleFeature(feature)
return (
Link to linear view of breakend endpoints
@@ -166,16 +170,7 @@ function BreakendPanel(props: {
{
- const { view } = model
- // @ts-ignore
- const viewSnapshot = viewType.snapshotFromBreakendFeature(
- new SimpleFeature(feature),
- view,
- )
- viewSnapshot.views[0].offsetPx -= view.width / 2 + 100
- viewSnapshot.views[1].offsetPx -= view.width / 2 + 100
- viewSnapshot.featureData = feature
- session.addView('BreakpointSplitView', viewSnapshot)
+ setBreakpointDialog(true)
}}
>
{`${feature.refName}:${feature.start} // ${locString} (split view)`}
@@ -184,6 +179,16 @@ function BreakendPanel(props: {
)
})}
+ {breakpointDialog ? (
+ {
+ setBreakpointDialog(false)
+ }}
+ />
+ ) : null}
>
) : null}