Add extra styling to emphasize currently focused view (#4024)

GMOD · Nov 2, 2023 · 7ff2095 · 7ff2095
1 parent 4fe46f8
commit 7ff2095
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 15 deletions.
diff --git a/packages/app-core/src/ui/App/ViewHeader.tsx b/packages/app-core/src/ui/App/ViewHeader.tsx
@@ -8,10 +8,12 @@ import { IBaseViewModel } from '@jbrowse/core/pluggableElementTypes/models'
 import CloseIcon from '@mui/icons-material/Close'
 import MinimizeIcon from '@mui/icons-material/Minimize'
 import AddIcon from '@mui/icons-material/Add'
+import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight'
 
 // locals
 import ViewMenu from './ViewMenu'
 import ViewContainerTitle from './ViewContainerTitle'
+import { getSession } from '@jbrowse/core/util'
 
 const useStyles = makeStyles()(theme => ({
   icon: {
@@ -23,8 +25,38 @@ const useStyles = makeStyles()(theme => ({
   viewHeader: {
     display: 'flex',
   },
+  viewTitle: {
+    display: 'flex',
+    alignItems: 'center',
+  },
 }))
 
+const ViewButtons = observer(function ({
+  view,
+  onClose,
+  onMinimize,
+}: {
+  view: IBaseViewModel
+  onClose: () => void
+  onMinimize: () => void
+}) {
+  const { classes } = useStyles()
+  return (
+    <>
+      <IconButton data-testid="minimize_view" onClick={onMinimize}>
+        {view.minimized ? (
+          <AddIcon className={classes.icon} fontSize="small" />
+        ) : (
+          <MinimizeIcon className={classes.icon} fontSize="small" />
+        )}
+      </IconButton>
+      <IconButton data-testid="close_view" onClick={onClose}>
+        <CloseIcon className={classes.icon} fontSize="small" />
+      </IconButton>
+    </>
+  )
+})
+
 const ViewHeader = observer(function ({
   view,
   onClose,
@@ -36,6 +68,7 @@ const ViewHeader = observer(function ({
 }) {
   const { classes } = useStyles()
   const scrollRef = useRef<HTMLDivElement>(null)
+  const session = getSession(view)
 
   // scroll the view into view when first mounted. note: this effect will run
   // only once, because of the empty array second param
@@ -46,19 +79,14 @@ const ViewHeader = observer(function ({
     <div ref={scrollRef} className={classes.viewHeader}>
       <ViewMenu model={view} IconProps={{ className: classes.icon }} />
       <div className={classes.grow} />
-
-      <ViewContainerTitle view={view} />
+      <div className={classes.viewTitle}>
+        {session.focusedViewId === view.id ? (
+          <KeyboardArrowRightIcon className={classes.icon} fontSize="small" />
+        ) : null}
+        <ViewContainerTitle view={view} />
+      </div>
       <div className={classes.grow} />
-      <IconButton data-testid="minimize_view" onClick={onMinimize}>
-        {view.minimized ? (
-          <AddIcon className={classes.icon} fontSize="small" />
-        ) : (
-          <MinimizeIcon className={classes.icon} fontSize="small" />
-        )}
-      </IconButton>
-      <IconButton data-testid="close_view" onClick={onClose}>
-        <CloseIcon className={classes.icon} fontSize="small" />
-      </IconButton>
+      <ViewButtons onClose={onClose} onMinimize={onMinimize} view={view} />
     </div>
   )
 })

diff --git a/products/jbrowse-web/src/tests/ExportSvg.test.tsx b/products/jbrowse-web/src/tests/ExportSvg.test.tsx
@@ -189,9 +189,9 @@ test('export svg of synteny', async () => {
       },
     })
 
-    fireEvent.click(await findByTestId('view_menu_icon'))
-    fireEvent.click((await findAllByText('Export SVG'))[0])
-    fireEvent.click(await findByText('Submit'))
+    fireEvent.click(await findByTestId('view_menu_icon', ...opts))
+    fireEvent.click((await findAllByText('Export SVG', ...opts))[0])
+    fireEvent.click(await findByText('Submit', ...opts))
 
     await waitFor(() => expect(FileSaver.saveAs).toHaveBeenCalled(), delay)