Merge pull request #1442 from GMOD/remove_toggle_trackselector_menu

Change track selector togglebutton to normal button
GMOD · Nov 30, 2020 · 628a349 · 628a349
2 parents 23735e2 + 4a06dd5
commit 628a349
Show file tree

Hide file tree

Showing 10 changed files with 27 additions and 81 deletions.
diff --git a/plugins/circular-view/src/CircularView/components/CircularView.js b/plugins/circular-view/src/CircularView/components/CircularView.js
@@ -23,7 +23,6 @@ export default pluginManager => {
   const IconButton = jbrequire('@material-ui/core/IconButton')
   const MenuItem = jbrequire('@material-ui/core/MenuItem')
   const TextField = jbrequire('@material-ui/core/TextField')
-  const ToggleButton = jbrequire('@material-ui/lab/ToggleButton')
   const { makeStyles } = jbrequire('@material-ui/core/styles')
   const { grey } = jbrequire('@material-ui/core/colors')
 
@@ -103,7 +102,6 @@ export default pluginManager => {
 
   const Controls = observer(({ model, showingFigure }) => {
     const classes = useStyles()
-    const session = getSession(model)
     return (
       <div className={classes.controls}>
         <IconButton
@@ -163,20 +161,14 @@ export default pluginManager => {
         </IconButton>
 
         {model.hideTrackSelectorButton ? null : (
-          <ToggleButton
+          <IconButton
             onClick={model.activateTrackSelector}
             title="Open track selector"
-            selected={
-              session.visibleWidget &&
-              session.visibleWidget.id === 'hierarchicalTrackSelector' &&
-              session.visibleWidget.view.id === model.id
-            }
-            value="track_select"
             data-testid="circular_track_select"
             color="secondary"
           >
             <TrackSelectorIcon />
-          </ToggleButton>
+          </IconButton>
         )}
       </div>
     )

diff --git a/plugins/dotplot-view/src/DotplotView/components/Controls.tsx b/plugins/dotplot-view/src/DotplotView/components/Controls.tsx
@@ -9,10 +9,8 @@ import ArrowLeft from '@material-ui/icons/KeyboardArrowLeft'
 import ArrowRight from '@material-ui/icons/KeyboardArrowRight'
 import { TrackSelector as TrackSelectorIcon } from '@jbrowse/core/ui/Icons'
 import IconButton from '@material-ui/core/IconButton'
-import ToggleButton from '@material-ui/lab/ToggleButton'
 
 import { observer } from 'mobx-react'
-import { isSessionModelWithWidgets, getSession } from '@jbrowse/core/util'
 import { DotplotViewModel } from '../model'
 
 export default () => {
@@ -36,7 +34,6 @@ export default () => {
 
   const Controls = observer(({ model }: { model: DotplotViewModel }) => {
     const classes = useStyles()
-    const session = getSession(model)
     return (
       <div className={classes.controls}>
         <IconButton
@@ -97,22 +94,15 @@ export default () => {
           <ZoomIn />
         </IconButton>
 
-        <ToggleButton
+        <IconButton
           onClick={model.activateTrackSelector}
           title="Open track selector"
-          selected={
-            isSessionModelWithWidgets(session) &&
-            session.visibleWidget &&
-            session.visibleWidget.id === 'hierarchicalTrackSelector' &&
-            // @ts-ignore
-            session.visibleWidget.view.id === model.id
-          }
           value="track_select"
           data-testid="circular_track_select"
           color="secondary"
         >
           <TrackSelectorIcon />
-        </ToggleButton>
+        </IconButton>
       </div>
     )
   })

diff --git a/plugins/dotplot-view/src/DotplotView/model.ts b/plugins/dotplot-view/src/DotplotView/model.ts
@@ -447,11 +447,6 @@ export default function stateModelFactory(pluginManager: PluginManager) {
               {
                 label: 'Open track selector',
                 onClick: self.activateTrackSelector,
-                disabled:
-                  session.visibleWidget &&
-                  session.visibleWidget.id === 'hierarchicalTrackSelector' &&
-                  // @ts-ignore
-                  session.visibleWidget.view.id === self.id,
               },
             ]
           }

diff --git a/plugins/linear-comparative-view/src/LinearComparativeView/model.ts b/plugins/linear-comparative-view/src/LinearComparativeView/model.ts
@@ -235,7 +235,6 @@ export default function stateModelFactory(pluginManager: PluginManager) {
     }))
     .views(self => ({
       get menuItems(): MenuItem[] {
-        const session = getSession(self)
         const menuItems: MenuItem[] = []
         self.views.forEach((view, idx) => {
           if (view.menuItems) {
@@ -249,12 +248,6 @@ export default function stateModelFactory(pluginManager: PluginManager) {
           label: 'Open track selector',
           onClick: self.activateTrackSelector,
           icon: TrackSelectorIcon,
-          disabled:
-            isSessionModelWithWidgets(session) &&
-            session.visibleWidget &&
-            session.visibleWidget.id === 'hierarchicalTrackSelector' &&
-            // @ts-ignore
-            session.visibleWidget.view.id === self.id,
         })
         return menuItems
       },

diff --git a/plugins/linear-genome-view/src/LinearGenomeView/components/Header.tsx b/plugins/linear-genome-view/src/LinearGenomeView/components/Header.tsx
@@ -1,12 +1,11 @@
 import { Region } from '@jbrowse/core/util/types'
-import { getSession, isSessionModelWithWidgets } from '@jbrowse/core/util'
+import { getSession } from '@jbrowse/core/util'
 import Button from '@material-ui/core/Button'
 import { makeStyles, useTheme } from '@material-ui/core/styles'
 import { fade } from '@material-ui/core/styles/colorManipulator'
 import FormGroup from '@material-ui/core/FormGroup'
 import TextField from '@material-ui/core/TextField'
 import Typography from '@material-ui/core/Typography'
-import ToggleButton from '@material-ui/lab/ToggleButton'
 import { observer } from 'mobx-react'
 import { Instance } from 'mobx-state-tree'
 import React, { useCallback, useRef, useState } from 'react'
@@ -51,28 +50,23 @@ const useStyles = makeStyles(theme => ({
     border: 'none',
     margin: theme.spacing(0.5),
   },
+  buttonSpacer: {
+    marginRight: theme.spacing(2),
+  },
 }))
 
 const Controls = observer(({ model }: { model: LGV }) => {
   const classes = useStyles()
-  const session = getSession(model)
   return (
-    <ToggleButton
-      onChange={model.activateTrackSelector}
+    <Button
+      onClick={model.activateTrackSelector}
       className={classes.toggleButton}
       title="Open track selector"
       value="track_select"
       color="secondary"
-      selected={
-        isSessionModelWithWidgets(session) &&
-        session.visibleWidget &&
-        session.visibleWidget.id === 'hierarchicalTrackSelector' &&
-        // @ts-ignore
-        session.visibleWidget.view.id === model.id
-      }
     >
-      <TrackSelectorIcon />
-    </ToggleButton>
+      <TrackSelectorIcon className={classes.buttonSpacer} />
+    </Button>
   )
 })
 

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
@@ -81,19 +81,18 @@ exports[`<LinearGenomeView /> renders one track, one region 1`] = `
         class="makeStyles-headerBar"
       >
         <button
-          class="MuiButtonBase-root MuiToggleButton-root makeStyles-toggleButton"
-          color="secondary"
+          class="MuiButtonBase-root MuiButton-root MuiButton-text makeStyles-toggleButton MuiButton-textSecondary"
           tabindex="0"
           title="Open track selector"
           type="button"
           value="track_select"
         >
           <span
-            class="MuiToggleButton-label"
+            class="MuiButton-label"
           >
             <svg
               aria-hidden="true"
-              class="MuiSvgIcon-root"
+              class="MuiSvgIcon-root makeStyles-buttonSpacer"
               focusable="false"
               viewBox="0 0 24 24"
             >
@@ -885,19 +884,18 @@ exports[`<LinearGenomeView /> renders two tracks, two regions 1`] = `
         class="makeStyles-headerBar"
       >
         <button
-          class="MuiButtonBase-root MuiToggleButton-root makeStyles-toggleButton"
-          color="secondary"
+          class="MuiButtonBase-root MuiButton-root MuiButton-text makeStyles-toggleButton MuiButton-textSecondary"
           tabindex="0"
           title="Open track selector"
           type="button"
           value="track_select"
         >
           <span
-            class="MuiToggleButton-label"
+            class="MuiButton-label"
           >
             <svg
               aria-hidden="true"
-              class="MuiSvgIcon-root"
+              class="MuiSvgIcon-root makeStyles-buttonSpacer"
               focusable="false"
               viewBox="0 0 24 24"
             >

diff --git a/plugins/linear-genome-view/src/LinearGenomeView/index.ts b/plugins/linear-genome-view/src/LinearGenomeView/index.ts
@@ -1036,20 +1036,11 @@ export function stateModelFactory(pluginManager: PluginManager) {
       let stringifiedCurrentlyCalculatedStaticBlocks = ''
       return {
         get menuItems(): MenuItem[] {
-          const session = getSession(self)
           const menuItems: MenuItem[] = [
             {
               label: 'Open track selector',
               onClick: self.activateTrackSelector,
               icon: TrackSelectorIcon,
-              disabled:
-                isSessionModelWithWidgets(session) &&
-                session.visibleWidget &&
-                session.visibleWidget.id === 'hierarchicalTrackSelector' &&
-                // @ts-ignore
-                session.visibleWidget.view &&
-                // @ts-ignore
-                session.visibleWidget.view.id === self.id,
             },
             {
               label: 'Horizontally flip',

diff --git a/products/jbrowse-desktop/src/sessionModelFactory.ts b/products/jbrowse-desktop/src/sessionModelFactory.ts
@@ -239,13 +239,10 @@ export default function sessionModelFactory(pluginManager: PluginManager) {
       },
 
       removeView(view: any) {
-        for (const [id, widget] of self.activeWidgets) {
-          if (
-            id === 'hierarchicalTrackSelector' &&
-            widget.view &&
-            widget.view.id === view.id
-          )
+        for (const [, widget] of self.activeWidgets) {
+          if (widget.view && widget.view.id === view.id) {
             this.hideWidget(widget)
+          }
         }
         self.views.remove(view)
       },

diff --git a/...nome-view/src/JBrowseLinearGenomeView/__snapshots__/JBrowseLinearGenomeView.test.tsx.snap b/...nome-view/src/JBrowseLinearGenomeView/__snapshots__/JBrowseLinearGenomeView.test.tsx.snap
@@ -160,19 +160,18 @@ exports[`<JBrowseLinearGenomeView /> renders successfully 1`] = `
               class="makeStyles-headerBar"
             >
               <button
-                class="MuiButtonBase-root MuiToggleButton-root makeStyles-toggleButton"
-                color="secondary"
+                class="MuiButtonBase-root MuiButton-root MuiButton-text makeStyles-toggleButton MuiButton-textSecondary"
                 tabindex="0"
                 title="Open track selector"
                 type="button"
                 value="track_select"
               >
                 <span
-                  class="MuiToggleButton-label"
+                  class="MuiButton-label"
                 >
                   <svg
                     aria-hidden="true"
-                    class="MuiSvgIcon-root"
+                    class="MuiSvgIcon-root makeStyles-buttonSpacer"
                     focusable="false"
                     viewBox="0 0 24 24"
                   >

diff --git a/products/jbrowse-web/src/sessionModelFactory.ts b/products/jbrowse-web/src/sessionModelFactory.ts
@@ -324,13 +324,10 @@ export default function sessionModelFactory(pluginManager: PluginManager) {
       },
 
       removeView(view: any) {
-        for (const [id, widget] of self.activeWidgets) {
-          if (
-            id === 'hierarchicalTrackSelector' &&
-            widget.view &&
-            widget.view.id === view.id
-          )
+        for (const [, widget] of self.activeWidgets) {
+          if (widget.view && widget.view.id === view.id) {
             this.hideWidget(widget)
+          }
         }
         self.views.remove(view)
       },