Back with main

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

@@ -0,0 +1,70 @@
+import React, { Suspense } from 'react'
+import { ErrorBoundary } from 'react-error-boundary'
+import { observer } from 'mobx-react'
+
+// locals
+import {
+  getEnv,
+  AbstractViewModel,
+  SessionWithDrawerWidgets,
+} from '@jbrowse/core/util'
+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
+}
+
+const ViewPanel = observer(function ({
+  view,
+  session,
+}: {
+  view: AbstractViewModel
+  session: AppSession
+}) {
+  const { pluginManager } = getEnv(session)
+  const viewType = pluginManager.getViewType(view.type)
+  if (!viewType) {
+    throw new Error(`unknown view type ${view.type}`)
+  }
+  const { ReactComponent } = viewType
+  return (
+    <ViewContainer
+      view={view}
+      onClose={() => {
+        session.removeView(view)
+      }}
+      onMinimize={() => {
+        view.setMinimized(!view.minimized)
+      }}
+    >
+      {!view.minimized ? (
+        <ErrorBoundary
+          FallbackComponent={({ error }) => <ErrorMessage error={error} />}
+        >
+          <Suspense fallback={<LoadingEllipses variant="h6" />}>
+            <ReactComponent model={view} session={session} />
+          </Suspense>
+        </ErrorBoundary>
+      ) : (
+        false
+      )}
+    </ViewContainer>
+  )
+})
+
+export default ViewPanel

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

@@ -7,7 +7,8 @@ import { MenuItem as JBMenuItem } from '@jbrowse/core/ui/Menu'
 
 // locals
 import ViewLauncher from './ViewLauncher'
-import ViewPanel from './ViewPanel'
+import FloatingViewPanel from './FloatingViewPanel'
+import StaticViewPanel from './StaticViewPanel'
 
 const useStyles = makeStyles()({
   viewsContainer: {
@@ -34,9 +35,21 @@ const ViewsContainer = observer(function ViewsContainer(props: Props) {
   return (
     <div className={classes.viewsContainer}>
       {views.length > 0 ? (
-        views.map(view => (
-          <ViewPanel key={`view-${view.id}`} view={view} session={session} />
-        ))
+        views.map(view =>
+          view.isFloating ? (
+            <FloatingViewPanel
+              key={`view-${view.id}`}
+              view={view}
+              session={session}
+            />
+          ) : (
+            <StaticViewPanel
+              key={`view-${view.id}`}
+              view={view}
+              session={session}
+            />
+          ),
+        )
       ) : (
         <ViewLauncher {...props} />
       )}