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

package/esm/ui/App/ViewWrapper.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Suspense } from 'react';
+import { ViewLoadingScreen } from '@jbrowse/core/ui';
 import { ErrorBoundary } from '@jbrowse/core/ui/ErrorBoundary';
-import LoadingEllipses from '@jbrowse/core/ui/LoadingEllipses';
 import { getEnv } from '@jbrowse/core/util';
 import { observer } from 'mobx-react';
 import ViewErrorFallback from './ViewErrorFallback.js';
@@ -12,7 +12,7 @@ import ViewErrorFallback from './ViewErrorFallback.js';
 const ViewComponent = observer(function ViewComponent({ view, session, }) {
     const { pluginManager } = getEnv(session);
     const { ReactComponent } = pluginManager.getViewType(view.type);
-    return (_jsx(Suspense, { fallback: _jsx(LoadingEllipses, { variant: "h6", "data-view-component-pending": "true" }), children: _jsx(ReactComponent, { model: view, session: session }) }));
+    return (_jsx(Suspense, { fallback: _jsx("div", { "data-view-component-pending": "true", children: _jsx(ViewLoadingScreen, {}) }), children: _jsx(ReactComponent, { model: view, session: session }) }));
 });
 /**
  * A view's body, and the boundary that keeps a view that throws from being an

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/esm/ui/App/viewTitle.d.ts

@@ -2,10 +2,15 @@ interface TitledView {
     displayName?: string;
     assemblyNames?: string[];
     minimized?: boolean;
+    initialized?: boolean;
+    showImportForm?: boolean;
+    error?: unknown;
 }
 /**
  * The view's own name, or its assemblies'. An emptied name counts as unset, so
- * clearing the title in the header puts the derived one back.
+ * clearing the title in the header puts the derived one back. A view still
+ * resolving its assembly is not untitled, only unnamed so far, so it reads
+ * blank rather than "Untitled view" for the moment before its name arrives.
  */
 export declare function viewName(view: TitledView, getDisplayName: (assemblyName: string) => string): string;
 export declare function viewTitle(view: TitledView, getDisplayName: (assemblyName: string) => string): string;

package/esm/ui/App/viewTitle.js

@@ -1,15 +1,20 @@
 /**
  * The view's own name, or its assemblies'. An emptied name counts as unset, so
- * clearing the title in the header puts the derived one back.
+ * clearing the title in the header puts the derived one back. A view still
+ * resolving its assembly is not untitled, only unnamed so far, so it reads
+ * blank rather than "Untitled view" for the moment before its name arrives.
  */
 export function viewName(view, getDisplayName) {
     // assemblyNames is [] (not undefined) for a view with no displayed regions
     // yet, so fall back on emptiness rather than nullishness
     const assemblyNames = view.assemblyNames ?? [];
+    const launching = view.initialized === false && !view.showImportForm && !view.error;
     return (view.displayName ||
         (assemblyNames.length
             ? assemblyNames.map(r => getDisplayName(r)).join(', ')
-            : 'Untitled view'));
+            : launching
+                ? ''
+                : 'Untitled view'));
 }
 export function viewTitle(view, getDisplayName) {
     const name = viewName(view, getDisplayName);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/app-core",
-  "version": "5.0.0-beta.11",
+  "version": "5.0.0-beta.14",
   "type": "module",
   "description": "JBrowse 2 code shared between the 'full featured' apps e.g. jbrowse-web and jbrowse-desktop",
   "keywords": [
@@ -24,13 +24,13 @@
     "esm"
   ],
   "dependencies": {
-    "@jbrowse/mobx-state-tree": "^6.7.0",
-    "@mui/icons-material": "^9.4.0",
-    "@mui/material": "^9.4.0",
-    "mobx": "^7.0.5",
+    "@jbrowse/mobx-state-tree": "^6.9.0",
+    "@mui/icons-material": "^9.5.0",
+    "@mui/material": "^9.5.0",
+    "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/core": "^5.0.0-beta.14",
+    "@jbrowse/product-core": "^5.0.0-beta.14"
   },
   "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;