Misc

package.json

@@ -80,6 +80,7 @@
     "@types/rbush": "^3.0.0",
     "@types/react": "^19.0.1",
     "@types/react-dom": "^19.0.1",
+    "@types/react-resizable": "^3.0.8",
     "@types/react-virtualized-auto-sizer": "^1.0.0",
     "@types/set-value": "^4.0.1",
     "@types/string-template": "^1.0.2",

packages/app-core/package.json

@@ -45,7 +45,8 @@
     "@jbrowse/product-core": "^2.18.0",
     "@mui/icons-material": "^6.0.0",
     "@mui/material": "^6.0.0",
-    "copy-to-clipboard": "^3.3.1"
+    "copy-to-clipboard": "^3.3.1",
+    "react-resizable": "^3.0.5"
   },
   "peerDependencies": {
     "mobx": "^6.0.0",

packages/app-core/src/ui/App/DraggableViewPanel.tsx

@@ -0,0 +1,53 @@
+import React, { useRef } from 'react'
+import { Portal } from '@mui/material'
+import { observer } from 'mobx-react'
+
+import {
+  useClientPoint,
+  useFloating,
+  useInteractions,
+} from '@floating-ui/react'
+import Draggable, { DraggableEventHandler } from 'react-draggable'
+
+const DraggableViewPanel = observer(function DraggableViewPanel({
+  children,
+  zIndex = 100,
+  onStop,
+}: {
+  children: React.ReactNode
+  zIndex?: number
+  x?: number
+  y?: number
+  onStop?: DraggableEventHandler
+}) {
+  const ref = useRef<HTMLDivElement>(null)
+  const { refs, floatingStyles, context } = useFloating({
+    placement: 'bottom-start',
+  })
+  const clientPoint = useClientPoint(context, { x: 100, y: 100 })
+  const { getFloatingProps } = useInteractions([clientPoint])
+  return (
+    <Portal>
+      {/* @ts-expect-error */}
+      <Draggable nodeRef={ref} handle=".viewHeader" onStop={onStop}>
+        <div
+          ref={ref}
+          style={{
+            position: 'fixed',
+            zIndex,
+          }}
+        >
+          <div
+            ref={refs.setFloating}
+            style={floatingStyles}
+            {...getFloatingProps()}
+          >
+            {children}
+          </div>
+        </div>
+      </Draggable>
+    </Portal>
+  )
+})
+
+export default DraggableViewPanel

packages/app-core/src/ui/App/FloatingViewPanel.tsx

@@ -1,22 +1,16 @@
-import React, { useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
 import { ResizableBox } from 'react-resizable'
 import { observer } from 'mobx-react'
 import { AbstractViewModel, SessionWithDrawerWidgets } from '@jbrowse/core/util'
 import { SnackbarMessage } from '@jbrowse/core/ui/SnackbarModel'
-import { MenuItem as JBMenuItem } from '@jbrowse/core/ui/Menu'
-import DraggableDialog from '@jbrowse/core/ui/DraggableDialog'
 
 // locals
 import StaticViewPanel from './StaticViewPanel'
 import './test.css'
 import useMeasure from '@jbrowse/core/util/useMeasure'
+import DraggableViewPanel from './DraggableViewPanel'
 
 type AppSession = SessionWithDrawerWidgets & {
-  savedSessionNames: string[]
-  menus: {
-    label: string
-    menuItems: JBMenuItem[]
-  }[]
   snackbarMessages: SnackbarMessage[]
   renameCurrentSession: (arg: string) => void
   popSnackbarMessage: () => unknown
@@ -42,7 +36,7 @@ const FloatingViewPanel = observer(function ({
   }, [h, height])
 
   return (
-    <DraggableDialog zIndex={zIndex}>
+    <DraggableViewPanel zIndex={zIndex}>
       <ResizableBox
         className="box"
         height={(height || 100) + 20}
@@ -56,7 +50,7 @@ const FloatingViewPanel = observer(function ({
           <StaticViewPanel view={view} session={session} />
         </div>
       </ResizableBox>
-    </DraggableDialog>
+    </DraggableViewPanel>
   )
 })
 

packages/app-core/src/ui/App/StaticViewPanel.tsx

@@ -1,4 +1,4 @@
-import React, { Suspense } from 'react'
+import { Suspense } from 'react'
 import { ErrorBoundary } from '@jbrowse/core/ui/ErrorBoundary'
 import { observer } from 'mobx-react'
 
@@ -13,14 +13,11 @@ import { SnackbarMessage } from '@jbrowse/core/ui/SnackbarModel'
 // ui elements
 import ErrorMessage from '@jbrowse/core/ui/ErrorMessage'
 import LoadingEllipses from '@jbrowse/core/ui/LoadingEllipses'
-import { MenuItem as JBMenuItem } from '@jbrowse/core/ui/Menu'
 
 // locals
 import ViewContainer from './ViewContainer'
 
 type AppSession = SessionWithDrawerWidgets & {
-  savedSessionNames: string[]
-  menus: { label: string; menuItems: JBMenuItem[] }[]
   snackbarMessages: SnackbarMessage[]
   renameCurrentSession: (arg: string) => void
   popSnackbarMessage: () => unknown

packages/app-core/src/ui/App/ViewHeader.tsx

@@ -40,7 +40,7 @@ const ViewHeader = observer(function ({
   onClose: () => void
   onMinimize: () => void
 }) {
-  const { classes } = useStyles()
+  const { classes, cx } = useStyles()
   const scrollRef = useRef<HTMLDivElement>(null)
   const session = getSession(view)