Merge pull request #1704 from GMOD/proposal_importform_nav

Add "Show all regions in assembly" to import form and make import form show entire region when refName selected
GMOD · Feb 19, 2021 · abb6514 · abb6514
2 parents 4b62426 + 0e9e25d
commit abb6514
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 1 deletion.
diff --git a/plugins/linear-genome-view/src/LinearGenomeView/components/ImportForm.tsx b/plugins/linear-genome-view/src/LinearGenomeView/components/ImportForm.tsx
@@ -23,6 +23,9 @@ const useStyles = makeStyles(theme => ({
   importFormEntry: {
     minWidth: 180,
   },
+  button: {
+    margin: theme.spacing(2),
+  },
 }))
 
 type LGV = LinearGenomeViewModel
@@ -62,6 +65,9 @@ const ImportForm = observer(({ model }: { model: LGV }) => {
     const newRegion = assemblyRegions.find(r => selectedRegion === r.refName)
     if (newRegion) {
       model.setDisplayedRegions([newRegion])
+      // we use showAllRegions after setDisplayedRegions to make the entire
+      // region visible, xref #1703
+      model.showAllRegions()
     } else {
       try {
         input && model.navToLocString(input, assemblyName)
@@ -136,6 +142,7 @@ const ImportForm = observer(({ model }: { model: LGV }) => {
         <Grid item>
           <Button
             disabled={!selectedRegion}
+            className={classes.button}
             onClick={() => {
               if (selectedRegion) {
                 handleSelectedRegion(selectedRegion)
@@ -146,6 +153,17 @@ const ImportForm = observer(({ model }: { model: LGV }) => {
           >
             Open
           </Button>
+          <Button
+            disabled={!selectedRegion}
+            className={classes.button}
+            onClick={() => {
+              model.showAllRegionsInAssembly(assemblyName)
+            }}
+            variant="contained"
+            color="secondary"
+          >
+            Show all regions in assembly
+          </Button>
         </Grid>
       </Grid>
     </Container>

diff --git a/...r-genome-view/src/LinearGenomeView/components/__snapshots__/LinearGenomeView.test.js.snap b/...r-genome-view/src/LinearGenomeView/components/__snapshots__/LinearGenomeView.test.js.snap
@@ -709,7 +709,7 @@ exports[`<LinearGenomeView /> renders setup wizard 1`] = `
       class="MuiGrid-root MuiGrid-item"
     >
       <button
-        class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary"
+        class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-button MuiButton-containedPrimary"
         tabindex="0"
         type="button"
       >
@@ -722,6 +722,20 @@ exports[`<LinearGenomeView /> renders setup wizard 1`] = `
           class="MuiTouchRipple-root"
         />
       </button>
+      <button
+        class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-button MuiButton-containedSecondary"
+        tabindex="0"
+        type="button"
+      >
+        <span
+          class="MuiButton-label"
+        >
+          Show all regions in assembly
+        </span>
+        <span
+          class="MuiTouchRipple-root"
+        />
+      </button>
     </div>
   </div>
 </div>

diff --git a/plugins/linear-genome-view/src/LinearGenomeView/index.ts b/plugins/linear-genome-view/src/LinearGenomeView/index.ts
@@ -35,6 +35,7 @@ import { TrackSelector as TrackSelectorIcon } from '@jbrowse/core/ui/Icons'
 import SyncAltIcon from '@material-ui/icons/SyncAlt'
 import VisibilityIcon from '@material-ui/icons/Visibility'
 import LabelIcon from '@material-ui/icons/Label'
+import FolderOpenIcon from '@material-ui/icons/FolderOpen'
 import clone from 'clone'
 import { AnyConfigurationModel } from '@jbrowse/core/configuration/configurationSchema'
 
@@ -1132,6 +1133,18 @@ export function stateModelFactory(pluginManager: PluginManager) {
       return {
         get menuItems(): MenuItem[] {
           const menuItems: MenuItem[] = [
+            {
+              label: 'Return to import form',
+              onClick: () => {
+                self.setDisplayedRegions([])
+                // it is necessary to run these after setting displayed regions
+                // empty or else self.offsetPx gets set to infinity and breaks
+                // mobx-state-tree snapshot
+                self.scrollTo(0)
+                self.zoomTo(10)
+              },
+              icon: FolderOpenIcon,
+            },
             {
               label: 'Open track selector',
               onClick: self.activateTrackSelector,