Wow

GMOD · Sep 27, 2024 · b22eb87 · b22eb87
1 parent e96f9bd
commit b22eb87
Show file tree

Hide file tree

Showing 6 changed files with 90 additions and 76 deletions.
diff --git a/plugins/dotplot-view/src/DotplotView/components/DotplotControls.tsx b/plugins/dotplot-view/src/DotplotView/components/DotplotControls.tsx
@@ -20,11 +20,19 @@ const DotplotControls = observer(function ({
 }) {
   return (
     <div>
-      <IconButton onClick={model.zoomOutButton}>
+      <IconButton
+        onClick={() => {
+          model.zoomOut()
+        }}
+      >
         <ZoomOut />
       </IconButton>
 
-      <IconButton onClick={model.zoomInButton}>
+      <IconButton
+        onClick={() => {
+          model.zoomIn()
+        }}
+      >
         <ZoomIn />
       </IconButton>
 

diff --git a/plugins/dotplot-view/src/DotplotView/components/DotplotView.tsx b/plugins/dotplot-view/src/DotplotView/components/DotplotView.tsx
@@ -325,7 +325,7 @@ const DotplotViewInternal = observer(function ({
                 label: 'Zoom in',
                 onClick: () => {
                   if (mousedown && mouseup) {
-                    model.zoomIn(mousedown, mouseup)
+                    model.zoomInToMouseCoords(mousedown, mouseup)
                   }
                   // below line is needed to prevent tooltip from sticking
                   setMouseOvered(false)

diff --git a/plugins/dotplot-view/src/DotplotView/components/PanButtons.tsx b/plugins/dotplot-view/src/DotplotView/components/PanButtons.tsx
@@ -41,39 +41,46 @@ const PanButtons = observer(function PanButtons({
       <div />
       <IconButton
         className={classes.icon}
-        onClick={() => model.vview.scroll(100)}
+        onClick={() => {
+          model.vview.scroll(100)
+        }}
       >
         <ArrowDropUp />
       </IconButton>
       <div />
 
       <IconButton
         className={classes.icon}
-        onClick={() => model.hview.scroll(-100)}
+        onClick={() => {
+          model.hview.scroll(-100)
+        }}
       >
         <ArrowLeft />
       </IconButton>
       <div />
       <IconButton
         className={classes.icon}
-        onClick={() => model.hview.scroll(100)}
+        onClick={() => {
+          model.hview.scroll(100)
+        }}
       >
         <ArrowRight />
       </IconButton>
 
       <div />
       <IconButton
         className={classes.icon}
-        onClick={() => model.vview.scroll(-100)}
+        onClick={() => {
+          model.vview.scroll(-100)
+        }}
       >
         <ArrowDropDown />
       </IconButton>
       <div />
       <IconButton
         className={classes.icon}
         onClick={() => {
-          model.hview.zoomIn()
-          model.vview.zoomIn()
+          model.zoomIn()
         }}
       >
         <ZoomIn />
@@ -82,8 +89,7 @@ const PanButtons = observer(function PanButtons({
       <IconButton
         className={classes.icon}
         onClick={() => {
-          model.hview.zoomOut()
-          model.vview.zoomOut()
+          model.zoomOut()
         }}
       >
         <ZoomOut />

diff --git a/plugins/dotplot-view/src/DotplotView/model.ts b/plugins/dotplot-view/src/DotplotView/model.ts
@@ -339,14 +339,14 @@ export default function stateModelFactory(pm: PluginManager) {
       /**
        * #action
        */
-      zoomOutButton() {
+      zoomOut() {
         self.hview.zoomOut()
         self.vview.zoomOut()
       },
       /**
        * #action
        */
-      zoomInButton() {
+      zoomIn() {
         self.hview.zoomIn()
         self.vview.zoomIn()
       },
@@ -454,7 +454,7 @@ export default function stateModelFactory(pm: PluginManager) {
        * #action
        * zooms into clicked and dragged region
        */
-      zoomIn(mousedown: Coord, mouseup: Coord) {
+      zoomInToMouseCoords(mousedown: Coord, mouseup: Coord) {
         const result = this.getCoords(mousedown, mouseup)
         if (result) {
           const [x1, x2, y1, y2] = result

diff --git a/plugins/linear-comparative-view/src/LinearComparativeView/components/Header.tsx b/plugins/linear-comparative-view/src/LinearComparativeView/components/Header.tsx
@@ -1,73 +1,53 @@
 import React, { useState } from 'react'
 import { observer } from 'mobx-react'
-import { makeStyles } from 'tss-react/mui'
+import { FormGroup } from '@mui/material'
 import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton'
 
 // icons
 import MoreVertIcon from '@mui/icons-material/MoreVert'
+import SearchIcon from '@mui/icons-material/Search'
 import { TrackSelector as TrackSelectorIcon } from '@jbrowse/core/ui/Icons'
 
 // locals
 import { LinearComparativeViewModel } from '../model'
 import HeaderSearchBoxes from './HeaderSearchBoxes'
 
-const useStyles = makeStyles()(() => ({
-  spacer: {
-    flexGrow: 1,
-  },
-  iconButton: {
-    margin: 5,
-  },
-}))
-
-const TrackSelector = observer(function ({
-  model,
-}: {
-  model: LinearComparativeViewModel
-}) {
-  const { views } = model
-  return (
-    <CascadingMenuButton
-      menuItems={[
-        {
-          label: 'Synteny track selectors',
-          type: 'subMenu',
-          subMenu: views.slice(0, -1).map((_, idx) => ({
-            label: `Synteny track selector (row ${idx + 1}->${idx + 2})`,
-            onClick: () => {
-              model.activateTrackSelector(idx)
-            },
-          })),
-        },
-
-        {
-          label: 'Row track selectors',
-          type: 'subMenu',
-          subMenu: views.map((view, idx) => ({
-            label: `Row ${idx + 1} track selector`,
-            onClick: () => view.activateTrackSelector(),
-          })),
-        },
-      ]}
-    >
-      <TrackSelectorIcon />
-    </CascadingMenuButton>
-  )
-})
-
 const Header = observer(function ({
   model,
 }: {
   model: LinearComparativeViewModel
 }) {
-  const { classes } = useStyles()
   const { views } = model
-  const [showSearchBoxes, setShowSearchBoxes] = useState(false)
+  const [showSearchBoxes, setShowSearchBoxes] = useState(true)
+  const [sideBySide, setSideBySide] = useState(true)
   return (
-    <div>
-      <TrackSelector model={model} />
+    <FormGroup row>
+      <CascadingMenuButton
+        menuItems={[
+          {
+            label: 'Synteny track selectors',
+            type: 'subMenu',
+            subMenu: views.slice(0, -1).map((_, idx) => ({
+              label: `Synteny track selector (row ${idx + 1}->${idx + 2})`,
+              onClick: () => {
+                model.activateTrackSelector(idx)
+              },
+            })),
+          },
+
+          {
+            label: 'Row track selectors',
+            type: 'subMenu',
+            subMenu: views.map((view, idx) => ({
+              label: `Row ${idx + 1} track selector`,
+              onClick: () => view.activateTrackSelector(),
+            })),
+          },
+        ]}
+      >
+        <TrackSelectorIcon />
+      </CascadingMenuButton>
       <CascadingMenuButton
-        className={classes.iconButton}
         menuItems={[
           {
             label: 'Row view menus',
@@ -77,31 +57,51 @@ const Header = observer(function ({
               subMenu: view.menuItems(),
             })),
           },
+          ...model.headerMenuItems(),
+        ]}
+      >
+        <MoreVertIcon />
+      </CascadingMenuButton>
+      <CascadingMenuButton
+        menuItems={[
           {
-            label: 'Show search boxes?',
-            checked: showSearchBoxes,
+            label: 'Show search boxes',
             type: 'checkbox',
+            checked: showSearchBoxes,
             onClick: () => {
               setShowSearchBoxes(!showSearchBoxes)
             },
           },
-          ...model.headerMenuItems(),
+
+          {
+            label: 'Orientation - Side-by-side',
+            type: 'radio',
+            checked: sideBySide,
+            onClick: () => {
+              setSideBySide(!sideBySide)
+            },
+          },
+          {
+            label: 'Orientation - Vertical',
+            type: 'radio',
+            checked: !sideBySide,
+            onClick: () => {
+              setSideBySide(!sideBySide)
+            },
+          },
         ]}
       >
-        <MoreVertIcon />
+        <SearchIcon />
       </CascadingMenuButton>
 
       {showSearchBoxes ? (
-        <div>
+        <span style={{ display: sideBySide ? 'inline-flex' : undefined }}>
           {views.map(view => (
             <HeaderSearchBoxes key={view.id} view={view} />
           ))}
-        </div>
+        </span>
       ) : null}
-
-      <div className={classes.spacer} />
-    </div>
+    </FormGroup>
   )
 })
-
 export default Header
diff --git a/plugins/linear-comparative-view/src/LinearComparativeView/components/HeaderSearchBoxes.tsx b/plugins/linear-comparative-view/src/LinearComparativeView/components/HeaderSearchBoxes.tsx
@@ -28,12 +28,12 @@ const HeaderSearchBoxes = observer(function ({
   const { classes } = useStyles()
   const { assemblyNames, coarseTotalBp } = view
   return (
-    <div className={classes.searchBox}>
+    <span className={classes.searchBox}>
       <SearchBox model={view} showHelp={false} />
       <Typography variant="body2" color="textSecondary" className={classes.bp}>
         {assemblyNames.join(',')} {toLocale(Math.round(coarseTotalBp))} bp
       </Typography>
-    </div>
+    </span>
   )
 })