Add dialog for launching breakpoint split view from variant feature details

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,

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": {

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 (
+      <Dialog open onClose={handleClose}>
+        <DialogTitle>
+          Breakpoint split view options
+          {handleClose ? (
+            <IconButton
+              className={classes.closeButton}
+              onClick={() => {
+                handleClose()
+              }}
+            >
+              <CloseIcon />
+            </IconButton>
+          ) : null}
+        </DialogTitle>
+        <Divider />
+
+        <DialogContent>
+          <FormControlLabel
+            className={classes.block}
+            control={
+              <Checkbox
+                checked={copyTracks}
+                onChange={() => setCopyTracks(val => !val)}
+              />
+            }
+            label="Copy tracks into the new view"
+          />
+
+          <FormControlLabel
+            className={classes.block}
+            control={
+              <Checkbox
+                checked={mirrorTracks}
+                onChange={() => setMirrorTracks(val => !val)}
+              />
+            }
+            label="Mirror tracks vertically in vertically stacked view"
+          />
+        </DialogContent>
+        <DialogActions>
+          <Button
+            onClick={() => {
+              const { view } = model
+              const session = getSession(model)
+
+              const viewSnapshot = viewType.snapshotFromBreakendFeature(
+                feature,
+                view,
+              )
+              viewSnapshot.views[0].offsetPx -= view.width / 2 + 100
+              viewSnapshot.views[1].offsetPx -= view.width / 2 + 100
+              viewSnapshot.featureData = feature
+              const viewTracks: any = getSnapshot(view.tracks)
+              viewSnapshot.views[0].tracks = viewTracks
+              viewSnapshot.views[1].tracks = mirrorTracks
+                ? viewTracks.slice().reverse()
+                : viewTracks
+
+              session.addView('BreakpointSplitView', viewSnapshot)
+
+              handleClose()
+            }}
+            variant="contained"
+            color="primary"
+            autoFocus
+          >
+            OK
+          </Button>
+          <Button
+            onClick={() => {
+              handleClose()
+            }}
+            color="secondary"
+            variant="contained"
+            autoFocus
+          >
+            Cancel
+          </Button>
+        </DialogActions>
+      </Dialog>
+    )
+  },
+)

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<any>({})
@@ -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 (
     <BaseCard {...props} title="Breakends">
       <Typography>Link to linear view of breakend endpoints</Typography>
@@ -166,16 +170,7 @@ function BreakendPanel(props: {
                   <Link
                     href="#"
                     onClick={() => {
-                      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: {
               )
             })}
           </ul>
+          {breakpointDialog ? (
+            <BreakendOptionDialog
+              model={model}
+              feature={simpleFeature}
+              viewType={viewType}
+              handleClose={() => {
+                setBreakpointDialog(false)
+              }}
+            />
+          ) : null}
         </>
       ) : null}
     </BaseCard>