@jbrowse/app-core 5.0.0-beta.11 → 5.0.0-beta.13

package/esm/WorkspaceLayout/workspaceTheme.d.ts

@@ -0,0 +1,27 @@
+/**
+ * The workspace chrome: tab strips, splitters and drop indicators.
+ *
+ * Fixed and dark in every JBrowse theme, the way the app bar is, so the frame
+ * never reads as content. The cell body is not chrome and follows
+ * `theme.palette.background.default` in `PanelView`.
+ */
+export declare const workspaceTheme: {
+    readonly stripBackground: '#252526';
+    readonly stripHeight: 35;
+    readonly stripFontSize: 13;
+    readonly tabDivider: '#1e1e1e';
+    readonly selectedTabBackground: '#1e1e1e';
+    readonly tabBackground: '#2d2d2d';
+    readonly iconHoverBackground: 'rgba(90, 93, 94, 0.31)';
+    readonly splitterLine: 'rgb(68, 68, 68)';
+    /** grab area; the line drawn inside it is 1px */
+    readonly splitterSize: 4;
+    readonly dropWash: 'rgba(83, 89, 93, 0.5)';
+    readonly accent: 'rgba(56, 139, 253, 0.9)';
+};
+export declare function tabColors(cellActive: boolean, selected: boolean): {
+    background: "#1e1e1e" | "#2d2d2d";
+    color: string;
+};
+/** the panel actions' icons, which sit on the strip beside unselected tabs */
+export declare const stripIconColor: string;

package/esm/WorkspaceLayout/workspaceTheme.js

@@ -0,0 +1,37 @@
+/**
+ * The workspace chrome: tab strips, splitters and drop indicators.
+ *
+ * Fixed and dark in every JBrowse theme, the way the app bar is, so the frame
+ * never reads as content. The cell body is not chrome and follows
+ * `theme.palette.background.default` in `PanelView`.
+ */
+export const workspaceTheme = {
+    stripBackground: '#252526',
+    stripHeight: 35,
+    stripFontSize: 13,
+    tabDivider: '#1e1e1e',
+    selectedTabBackground: '#1e1e1e',
+    tabBackground: '#2d2d2d',
+    iconHoverBackground: 'rgba(90, 93, 94, 0.31)',
+    splitterLine: 'rgb(68, 68, 68)',
+    /** grab area; the line drawn inside it is 1px */
+    splitterSize: 4,
+    dropWash: 'rgba(83, 89, 93, 0.5)',
+    accent: 'rgba(56, 139, 253, 0.9)',
+};
+// the active cell's selected tab is the one fully white label on screen
+const tabTextColors = {
+    activeCell: { selected: 'white', other: '#969696' },
+    otherCell: { selected: '#8f8f8f', other: '#626262' },
+};
+export function tabColors(cellActive, selected) {
+    const text = cellActive ? tabTextColors.activeCell : tabTextColors.otherCell;
+    return {
+        background: selected
+            ? workspaceTheme.selectedTabBackground
+            : workspaceTheme.tabBackground,
+        color: selected ? text.selected : text.other,
+    };
+}
+/** the panel actions' icons, which sit on the strip beside unselected tabs */
+export const stripIconColor = tabTextColors.activeCell.other;

package/esm/ui/App/App.js

@@ -38,6 +38,9 @@ const useStyles = makeStyles()(theme => ({
     appBar: {
         flexGrow: 1,
         gridRow: 'menubar',
+        // above the workspace, whose cells paint a background its shadow falls on
+        position: 'relative',
+        zIndex: 1,
     },
 }));
 const App = observer(function App(props) {

package/esm/ui/App/JBrowseTabMenu.js

@@ -54,5 +54,5 @@ export default function JBrowseTabMenu({ onRename, onClose, }) {
                     icon: CloseIcon,
                     onClick: onClose,
                 },
-            ], size: "small", className: classes.tabIcon, setOpen: setOpen, stopPropagation: true, children: _jsx(MoreVertIcon, { className: classes.smallIcon }) }) }));
+            ], tooltip: "Tab menu", size: "small", className: classes.tabIcon, setOpen: setOpen, stopPropagation: true, children: _jsx(MoreVertIcon, { className: classes.smallIcon }) }) }));
 }

package/esm/ui/App/ThemeModeButton.js

@@ -13,10 +13,11 @@ import { observer } from 'mobx-react';
 const ThemeModeButton = observer(function ThemeModeButton({ session, }) {
     const dark = session.themeIsDark;
     const drawnMode = dark ? 'dark' : 'light';
-    // A palette pinned to its own mode draws dark whatever the OS says, so the
-    // two disagree and the system is steering nothing to report. Everything else
-    // that hides this control is `themeMode`.
-    const followsSystem = session.themeMode === 'system' && drawnMode === session.effectiveThemeMode;
+    // A palette pinned to its own mode, or Dark Reader, draws dark whatever the
+    // OS says, so a click here would change nothing.
+    const followsSystem = session.themeMode === 'system' &&
+        !session.darkReaderDark &&
+        drawnMode === session.effectiveThemeMode;
     if (!followsSystem) {
         return null;
     }

package/esm/ui/App/ViewMenu.js

@@ -4,18 +4,19 @@ import { getSession } from '@jbrowse/core/util';
 import { renameIds } from '@jbrowse/core/util/types/mst';
 import { getSnapshot } from '@jbrowse/mobx-state-tree';
 import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+import HorizontalSplitIcon from '@mui/icons-material/HorizontalSplit';
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
 import KeyboardDoubleArrowDownIcon from '@mui/icons-material/KeyboardDoubleArrowDown';
 import KeyboardDoubleArrowUpIcon from '@mui/icons-material/KeyboardDoubleArrowUp';
 import MenuIcon from '@mui/icons-material/Menu';
 import OpenInNewIcon from '@mui/icons-material/OpenInNew';
+import TabIcon from '@mui/icons-material/Tab';
 import VerticalSplitIcon from '@mui/icons-material/VerticalSplit';
 import { observer } from 'mobx-react';
-// takes the icon's class, not an SvgIconProps object: the object was built
-// inline by ViewHeader and so was new on each of its renders, which defeated
-// mobx-react's memo for this whole menu (a Tooltip and an IconButton) every
-// time anything re-rendered the header
+import { tabDisplayName } from '../../WorkspaceLayout/tabName.js';
+// takes a class string rather than an SvgIconProps object, which a caller
+// builds inline and so defeats this observer's memo
 const ViewMenu = observer(function ViewMenu({ model, className, }) {
     const session = getSession(model);
     const moves = {
@@ -24,35 +25,30 @@ const ViewMenu = observer(function ViewMenu({ model, className, }) {
         down: session.moveViewDown,
         bottom: session.moveViewToBottom,
     };
-    // Give this view a home of its own: its own tab beside the rest, or its own
-    // split to their right. One path, whether or not the workspace is already up
-    // — the layout is session state either way, so there is nothing to defer and
-    // no second implementation for "the panels do not exist yet". That fork is
-    // the reason `init` existed.
-    const moveViewOut = (direction) => {
+    const moveViewOut = (to) => {
         const allViewIds = session.views.map(v => v.id);
-        if (direction === 'tabs') {
+        if (to === 'tab') {
             session.moveViewToNewTab(model.id, allViewIds);
         }
         else {
-            session.moveViewToSplitRight(model.id, allViewIds);
+            session.moveViewToSplit(model.id, to, allViewIds);
         }
-        session.setUseWorkspaces(true);
+    };
+    // views render in `session.views` order within a tab, so a view joining one
+    // goes to its bottom rather than wherever its old slot falls
+    const moveViewToTab = (tabId) => {
+        const members = session.findTab(tabId)?.tab.viewIds ?? [];
+        session.moveViewToTab(model.id, tabId, session.views.map(v => v.id));
+        session.moveViewToBottom(model.id, [...members, model.id]);
     };
     return (_jsx(CascadingMenuButton, { "data-testid": "view_menu_icon", tooltip: "View menu", menuItems: () => {
-            // The views this move is relative to: in a workspace, the ones sharing
-            // this view's panel; in the classic stack, all of them. `session.views`
-            // is the order either way, so the mode decides the SCOPE of a move and
-            // nothing else. There is one implementation of "move a view" again.
-            //
-            // Resolved here rather than during render. It scans every panel's
-            // assignment list and copies one of them, and reading those lists in
-            // render would also subscribe this menu to them, so a view moving
-            // between panels anywhere re-rendered every view's menu. None of it is
-            // needed until the menu opens.
-            const scopeIds = session.effectiveUseWorkspaces
-                ? session.tabContainingView(model.id)?.tab.viewIds.slice()
-                : undefined;
+            // A move's scope is this view's tab. Read on open rather than in
+            // render, so the menu does not observe every tab's membership.
+            const home = session.tabContainingView(model.id);
+            const scopeIds = home?.tab.viewIds.slice();
+            const otherTabs = home
+                ? session.tabs.filter(t => t.id !== home.tab.id)
+                : [];
             const viewCount = scopeIds?.length ?? session.views.length;
             return [
                 {
@@ -70,14 +66,36 @@ const ViewMenu = observer(function ViewMenu({ model, className, }) {
                             label: 'Move to new tab',
                             icon: OpenInNewIcon,
                             onClick: () => {
-                                moveViewOut('tabs');
+                                moveViewOut('tab');
                             },
                         },
+                        ...(otherTabs.length > 0
+                            ? [
+                                {
+                                    label: 'Move to tab',
+                                    icon: TabIcon,
+                                    type: 'subMenu',
+                                    subMenu: otherTabs.map(tab => ({
+                                        label: tabDisplayName(tab, session.views.filter(v => tab.viewIds.includes(v.id)), session),
+                                        onClick: () => {
+                                            moveViewToTab(tab.id);
+                                        },
+                                    })),
+                                },
+                            ]
+                            : []),
                         {
-                            label: 'Move to split view (right side of screen)',
+                            label: 'Move to split view (right)',
                             icon: VerticalSplitIcon,
                             onClick: () => {
-                                moveViewOut('horizontal');
+                                moveViewOut('row');
+                            },
+                        },
+                        {
+                            label: 'Move to split view (below)',
+                            icon: HorizontalSplitIcon,
+                            onClick: () => {
+                                moveViewOut('column');
                             },
                         },
                         // 'top'/'bottom' only mean something with a view above *and* below

package/esm/ui/App/ViewsContainer.js

@@ -2,8 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Suspense } from 'react';
 import { makeStyles } from '@jbrowse/core/util/tss-react';
 import { observer } from 'mobx-react';
-import { isSessionWithWorkspaceLayout } from '../../WorkspaceLayout/model.js';
-import { ClassicViewsContainer, ViewLauncher, WorkspaceContainer, } from './lazyParts.js';
+import { ViewLauncher, WorkspaceContainer } from './lazyParts.js';
 const useStyles = makeStyles()({
     viewsContainer: {
         gridRow: 'components',
@@ -11,8 +10,8 @@ const useStyles = makeStyles()({
     },
 });
 const ViewsContainer = observer(function ViewsContainer({ session, }) {
-    const { views, effectiveUseWorkspaces } = session;
+    const { views } = session;
     const { classes } = useStyles();
-    return (_jsx("div", { className: classes.viewsContainer, children: _jsx(Suspense, { fallback: null, children: views.length > 0 ? (effectiveUseWorkspaces && isSessionWithWorkspaceLayout(session) ? (_jsx(WorkspaceContainer, { session: session })) : (_jsx(ClassicViewsContainer, { session: session }))) : (_jsx(ViewLauncher, { session: session })) }) }));
+    return (_jsx("div", { className: classes.viewsContainer, children: _jsx(Suspense, { fallback: null, children: views.length > 0 ? (_jsx(WorkspaceContainer, { session: session })) : (_jsx(ViewLauncher, { session: session })) }) }));
 });
 export default ViewsContainer;

package/esm/ui/App/lazyParts.d.ts

@@ -7,11 +7,6 @@ export declare const DrawerWidget: import("react").LazyExoticComponent<({ sessio
         }) => import("react").JSX.Element;
     }>;
 };
-export declare const ClassicViewsContainer: import("react").LazyExoticComponent<({ session, }: import("./ClassicViewsContainer.tsx").ClassicViewsContainerProps) => import("react").JSX.Element> & {
-    preload: () => Promise<{
-        default: ({ session, }: import("./ClassicViewsContainer.tsx").ClassicViewsContainerProps) => import("react").JSX.Element;
-    }>;
-};
 export declare const WorkspaceContainer: import("react").LazyExoticComponent<({ session, }: {
     session: import("@jbrowse/core/util").SessionWithFocusedViewAndDrawerWidgets & import("../../index.ts").WorkspaceLayout;
 }) => import("react").JSX.Element> & {

package/esm/ui/App/lazyParts.js

@@ -1,7 +1,6 @@
 import { lazyWithPreload } from '@jbrowse/core/util/lazyWithPreload';
 import { lazyChunk } from './lazyChunk.js';
 export const DrawerWidget = lazyWithPreload(lazyChunk('DrawerWidget', () => import('./DrawerWidget.js')));
-export const ClassicViewsContainer = lazyWithPreload(lazyChunk('ClassicViewsContainer', () => import('./ClassicViewsContainer.js')));
 export const WorkspaceContainer = lazyWithPreload(lazyChunk('WorkspaceContainer', () => import('../../WorkspaceLayout/WorkspaceContainer.js').then(m => ({
     default: m.WorkspaceContainer,
 }))));

package/esm/ui/App/preloadAppShell.js

@@ -1,7 +1,6 @@
 import { preloadComponent } from '@jbrowse/core/util/preloadComponent';
 import { getEnv } from '@jbrowse/mobx-state-tree';
-import { isSessionWithWorkspaceLayout } from '../../WorkspaceLayout/model.js';
-import { ClassicViewsContainer, DrawerWidget, WorkspaceContainer, } from './lazyParts.js';
+import { DrawerWidget, WorkspaceContainer } from './lazyParts.js';
 /**
  * Load the views container and the drawer while the session's own view code
  * downloads, settling when both have. An app that renders after this renders
@@ -10,7 +9,7 @@ import { ClassicViewsContainer, DrawerWidget, WorkspaceContainer, } from './lazy
  */
 export async function preloadAppFrame() {
     await Promise.allSettled([
-        ClassicViewsContainer.preload(),
+        WorkspaceContainer.preload(),
         DrawerWidget.preload(),
     ]);
 }
@@ -21,9 +20,7 @@ export async function preloadAppFrame() {
  */
 export function preloadAppShell(session) {
     if (session.views.length > 0) {
-        preloadComponent(session.effectiveUseWorkspaces && isSessionWithWorkspaceLayout(session)
-            ? WorkspaceContainer
-            : ClassicViewsContainer);
+        preloadComponent(WorkspaceContainer);
     }
     const { drawerVisible, visibleWidget } = session;
     if (drawerVisible) {

package/esm/ui/App/types.d.ts

@@ -1,3 +1,4 @@
+import type { WorkspaceLayout } from '../../WorkspaceLayout/model.ts';
 import type { Menu } from '../../menus.ts';
 import type { ErrorDialogState, SnackbarMessage } from '@jbrowse/core/ui/SnackbarModel';
 import type { SessionWithFocusedViewAndDrawerWidgets } from '@jbrowse/core/util';
@@ -6,15 +7,15 @@ export interface ThemeSwitchSession {
     themeMode: 'light' | 'dark' | 'system';
     effectiveThemeMode: 'light' | 'dark';
     themeIsDark: boolean;
+    darkReaderDark: boolean;
     systemThemeOverride?: 'light' | 'dark';
     setSystemThemeOverride: (mode?: 'light' | 'dark') => void;
 }
 export type WorkspaceSessionType = SessionWithFocusedViewAndDrawerWidgets;
-export type AppSession = WorkspaceSessionType & ThemeSwitchSession & {
+export type AppSession = WorkspaceSessionType & WorkspaceLayout & ThemeSwitchSession & {
     menus: () => Menu[];
     errorDialog: ErrorDialogState | undefined;
     setErrorDialog: (state: ErrorDialogState | undefined) => void;
-    effectiveUseWorkspaces: boolean;
     renameCurrentSession: (arg: string) => void;
     snackbarMessages: SnackbarMessage[];
     popSnackbarMessage: () => unknown;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/app-core",
-  "version": "5.0.0-beta.11",
+  "version": "5.0.0-beta.13",
   "type": "module",
   "description": "JBrowse 2 code shared between the 'full featured' apps e.g. jbrowse-web and jbrowse-desktop",
   "keywords": [
@@ -27,10 +27,10 @@
     "@jbrowse/mobx-state-tree": "^6.7.0",
     "@mui/icons-material": "^9.4.0",
     "@mui/material": "^9.4.0",
-    "mobx": "^7.0.5",
+    "mobx": "^7.0.6",
     "mobx-react": "^10.0.2",
-    "@jbrowse/core": "^5.0.0-beta.11",
-    "@jbrowse/product-core": "^5.0.0-beta.11"
+    "@jbrowse/product-core": "^5.0.0-beta.13",
+    "@jbrowse/core": "^5.0.0-beta.13"
   },
   "peerDependencies": {
     "react": ">=19.0.0",

package/esm/WorkspaceLayout/dockviewTheme.d.ts

@@ -1,69 +0,0 @@
-/**
- * dockview's `dockview-theme-dark`, transcribed.
- *
- * We render the workspace ourselves now, but the look is deliberately not a new
- * design — it is the theme we already shipped, so nothing about the chrome
- * changed for users when the engine underneath it did. Every value below is
- * copied from `dockview/dist/styles/dockview.css`'s `.dockview-theme-dark`
- * block (v8.0.0); the names are its CSS custom properties with the `--dv-`
- * prefix dropped.
- *
- * **Fixed, not theme-derived.** These apply in a light JBrowse theme too, the
- * same way the app bar is dark in both — the chrome frames the content rather
- * than matching it. Don't wire them to `theme.palette`: a light strip reads as
- * content, which is exactly what it looked like before this file existed.
- *
- * **This is the chrome only, and the panel BODY is not chrome.** dockview also
- * has a `--dv-group-view-background-color` (`#1e1e1e`) for the surface a tab's
- * content sits on, and transcribing it is what made a light JBrowse theme come
- * up dark below the views — the frame swallowing the thing it frames. The body
- * follows `theme.palette.background.default` in `PanelView` instead, so the
- * cell matches every other surface the app draws content on. It is deliberately
- * absent here rather than present and unused, since an unused colour named
- * after the panel reads as a value someone forgot to wire up.
- *
- * A consequence worth knowing before "fixing" it: dockview's selected tab is
- * `#1e1e1e` **because** the body was, so the tab merged into its content. Ours
- * cannot merge into a light body, and the four values below are kept anyway —
- * darker-than-the-strip still reads as selected, and it is the one cue that
- * survives being the only dark band on screen.
- *
- * Kept in one module because four components draw parts of the same chrome, and
- * the four-way tab colouring below is a rule about the whole, not about any one
- * of them.
- */
-export declare const dv: {
-    /** the tab strip itself */
-    readonly tabsBackground: '#252526';
-    readonly activeGroupVisibleTabBackground: '#1e1e1e';
-    readonly activeGroupHiddenTabBackground: '#2d2d2d';
-    readonly inactiveGroupVisibleTabBackground: '#1e1e1e';
-    readonly inactiveGroupHiddenTabBackground: '#2d2d2d';
-    readonly activeGroupVisibleTabColor: 'white';
-    readonly activeGroupHiddenTabColor: '#969696';
-    readonly inactiveGroupVisibleTabColor: '#8f8f8f';
-    readonly inactiveGroupHiddenTabColor: '#626262';
-    readonly tabDividerColor: '#1e1e1e';
-    readonly separatorBorder: 'rgb(68, 68, 68)';
-    readonly iconHoverBackground: 'rgba(90, 93, 94, 0.31)';
-    readonly dragOverBackground: 'rgba(83, 89, 93, 0.5)';
-    readonly edgeDockIndicatorColor: 'rgba(56, 139, 253, 0.9)';
-    readonly tabsHeight: 35;
-    readonly tabsFontSize: 13;
-    /** the sash is 4px of grab area with a 1px line drawn inside it */
-    readonly sashSize: 4;
-};
-/** The background and text a tab takes, given where it sits. */
-export declare function tabColors(groupActive: boolean, visible: boolean): {
-    background: "#1e1e1e";
-    color: "white";
-} | {
-    background: "#2d2d2d";
-    color: "#969696";
-} | {
-    background: "#1e1e1e";
-    color: "#8f8f8f";
-} | {
-    background: "#2d2d2d";
-    color: "#626262";
-};

package/esm/WorkspaceLayout/dockviewTheme.js

@@ -1,82 +0,0 @@
-/**
- * dockview's `dockview-theme-dark`, transcribed.
- *
- * We render the workspace ourselves now, but the look is deliberately not a new
- * design — it is the theme we already shipped, so nothing about the chrome
- * changed for users when the engine underneath it did. Every value below is
- * copied from `dockview/dist/styles/dockview.css`'s `.dockview-theme-dark`
- * block (v8.0.0); the names are its CSS custom properties with the `--dv-`
- * prefix dropped.
- *
- * **Fixed, not theme-derived.** These apply in a light JBrowse theme too, the
- * same way the app bar is dark in both — the chrome frames the content rather
- * than matching it. Don't wire them to `theme.palette`: a light strip reads as
- * content, which is exactly what it looked like before this file existed.
- *
- * **This is the chrome only, and the panel BODY is not chrome.** dockview also
- * has a `--dv-group-view-background-color` (`#1e1e1e`) for the surface a tab's
- * content sits on, and transcribing it is what made a light JBrowse theme come
- * up dark below the views — the frame swallowing the thing it frames. The body
- * follows `theme.palette.background.default` in `PanelView` instead, so the
- * cell matches every other surface the app draws content on. It is deliberately
- * absent here rather than present and unused, since an unused colour named
- * after the panel reads as a value someone forgot to wire up.
- *
- * A consequence worth knowing before "fixing" it: dockview's selected tab is
- * `#1e1e1e` **because** the body was, so the tab merged into its content. Ours
- * cannot merge into a light body, and the four values below are kept anyway —
- * darker-than-the-strip still reads as selected, and it is the one cue that
- * survives being the only dark band on screen.
- *
- * Kept in one module because four components draw parts of the same chrome, and
- * the four-way tab colouring below is a rule about the whole, not about any one
- * of them.
- */
-export const dv = {
-    /** the tab strip itself */
-    tabsBackground: '#252526',
-    // A tab's colours depend on TWO things: whether its panel is the active one,
-    // and whether it is the tab that panel is showing. dockview enumerates all
-    // four rather than dimming one axis, so the focused panel's selected tab is
-    // the only fully-white label on screen.
-    activeGroupVisibleTabBackground: '#1e1e1e',
-    activeGroupHiddenTabBackground: '#2d2d2d',
-    inactiveGroupVisibleTabBackground: '#1e1e1e',
-    inactiveGroupHiddenTabBackground: '#2d2d2d',
-    activeGroupVisibleTabColor: 'white',
-    activeGroupHiddenTabColor: '#969696',
-    inactiveGroupVisibleTabColor: '#8f8f8f',
-    inactiveGroupHiddenTabColor: '#626262',
-    tabDividerColor: '#1e1e1e',
-    separatorBorder: 'rgb(68, 68, 68)',
-    iconHoverBackground: 'rgba(90, 93, 94, 0.31)',
-    dragOverBackground: 'rgba(83, 89, 93, 0.5)',
-    edgeDockIndicatorColor: 'rgba(56, 139, 253, 0.9)',
-    tabsHeight: 35,
-    tabsFontSize: 13,
-    /** the sash is 4px of grab area with a 1px line drawn inside it */
-    sashSize: 4,
-};
-/** The background and text a tab takes, given where it sits. */
-export function tabColors(groupActive, visible) {
-    if (groupActive) {
-        return visible
-            ? {
-                background: dv.activeGroupVisibleTabBackground,
-                color: dv.activeGroupVisibleTabColor,
-            }
-            : {
-                background: dv.activeGroupHiddenTabBackground,
-                color: dv.activeGroupHiddenTabColor,
-            };
-    }
-    return visible
-        ? {
-            background: dv.inactiveGroupVisibleTabBackground,
-            color: dv.inactiveGroupVisibleTabColor,
-        }
-        : {
-            background: dv.inactiveGroupHiddenTabBackground,
-            color: dv.inactiveGroupHiddenTabColor,
-        };
-}

package/esm/ui/App/ClassicViewsContainer.d.ts

@@ -1,6 +0,0 @@
-import type { SessionWithFocusedViewAndDrawerWidgets } from '@jbrowse/core/util';
-export interface ClassicViewsContainerProps {
-    session: SessionWithFocusedViewAndDrawerWidgets;
-}
-declare const ClassicViewsContainer: ({ session, }: ClassicViewsContainerProps) => import("react").JSX.Element;
-export default ClassicViewsContainer;

package/esm/ui/App/ClassicViewsContainer.js

@@ -1,22 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { persistentScrollbarStyle } from '@jbrowse/core/ui/persistentScrollbarStyle';
-import { useScrollPortHeightVar } from '@jbrowse/core/util/hooks';
-import { makeStyles } from '@jbrowse/core/util/tss-react';
-import { observer } from 'mobx-react';
-import ViewStack from './ViewStack.js';
-const useStyles = makeStyles()(theme => ({
-    container: {
-        height: '100%',
-        width: '100%',
-        gridRow: 'components',
-        overflowY: 'auto',
-        ...persistentScrollbarStyle(theme),
-    },
-}));
-const ClassicViewsContainer = observer(function ClassicViewsContainer({ session, }) {
-    const { classes } = useStyles();
-    const { views } = session;
-    const ref = useScrollPortHeightVar();
-    return (_jsx("div", { ref: ref, className: classes.container, children: _jsx(ViewStack, { views: views, session: session }) }));
-});
-export default ClassicViewsContainer;