From 9cd6e5d660adcbb7f6d8ea0794d968de417fd8a8 Mon Sep 17 00:00:00 2001
From: Colin <colin.diesh@gmail.com>
Date: Fri, 12 Mar 2021 17:32:53 -0700
Subject: [PATCH] Add dialog

---
 plugins/breakpoint-split-view/src/model.ts    |  14 +-
 .../BreakendOptionDialog.tsx                  | 133 ++++++++++++++++++
 .../VariantFeatureWidget.tsx                  |  27 ++--
 3 files changed, 157 insertions(+), 17 deletions(-)
 create mode 100644 plugins/variants/src/VariantFeatureWidget/BreakendOptionDialog.tsx

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/src/VariantFeatureWidget/BreakendOptionDialog.tsx b/plugins/variants/src/VariantFeatureWidget/BreakendOptionDialog.tsx
new file mode 100644
index 0000000000..c0f2d546a8
--- /dev/null
+++ b/plugins/variants/src/VariantFeatureWidget/BreakendOptionDialog.tsx
@@ -0,0 +1,133 @@
+/* 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,
+  TextField,
+} 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>
+    )
+  },
+)
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<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>