@jbrowse/app-core 2.6.3 → 2.7.1

package/dist/AppFocus/index.d.ts

@@ -0,0 +1,13 @@
+/**
+ * #stateModel AppFocusMixin
+ * #category session
+ */
+export declare function AppFocusMixin(): import("mobx-state-tree").IModelType<{
+    /**
+     * #property
+     * used to keep track of which view is in focus
+     */
+    focusedViewId: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
+}, {
+    setFocusedViewId(viewId: string): void;
+}, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>;

package/dist/AppFocus/index.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AppFocusMixin = void 0;
+const mobx_state_tree_1 = require("mobx-state-tree");
+/**
+ * #stateModel AppFocusMixin
+ * #category session
+ */
+function AppFocusMixin() {
+    return mobx_state_tree_1.types
+        .model({
+        /**
+         * #property
+         * used to keep track of which view is in focus
+         */
+        focusedViewId: mobx_state_tree_1.types.maybe(mobx_state_tree_1.types.string),
+    })
+        .actions(self => ({
+        setFocusedViewId(viewId) {
+            self.focusedViewId = viewId;
+        },
+    }));
+}
+exports.AppFocusMixin = AppFocusMixin;

package/dist/JBrowseModel/index.d.ts

@@ -15,7 +15,9 @@ export declare function JBrowseModelF({ pluginManager, assemblyConfigSchema, }:
                 defaultValue: string;
             };
             drivers: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").IMapType<import("mobx-state-tree").ITypeUnion<import("mobx-state-tree").ModelCreationType<import("mobx-state-tree/dist/internal").ExtractCFromProps<Record<string, any>>> | undefined, import("mobx-state-tree").ModelSnapshotType<Record<string, any>>, (Partial<import("mobx-state-tree/dist/internal").ExtractCFromProps<Record<string, any>>> & import("mobx-state-tree/dist/internal").NonEmptyObject) | undefined>>, [undefined]>;
-        }, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, undefined>>;
+        }, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, undefined>>; /**
+         * #getter
+         */
         highResolutionScaling: {
             type: string;
             defaultValue: number;
@@ -29,16 +31,12 @@ export declare function JBrowseModelF({ pluginManager, assemblyConfigSchema, }:
             };
             subfeatures: {
                 type: string;
-                description: string; /**
-                 * #getter
-                 */
+                description: string;
                 defaultValue: {};
                 contextVariable: string[];
             };
             depth: {
-                type: string; /**
-                 * #getter
-                 */
+                type: string;
                 defaultValue: number;
                 description: string;
             };
@@ -81,9 +79,7 @@ export declare function JBrowseModelF({ pluginManager, assemblyConfigSchema, }:
                 };
                 topLevelCategories: {
                     type: string;
-                    defaultValue: boolean; /**
-                     * #action
-                     */
+                    defaultValue: boolean;
                 };
                 subCategories: {
                     type: string;
@@ -96,9 +92,7 @@ export declare function JBrowseModelF({ pluginManager, assemblyConfigSchema, }:
             defaultValue: {};
         };
         extraThemes: {
-            type: string; /**
-             * #action
-             */
+            type: string;
             defaultValue: {};
         };
         logoPath: {
@@ -162,6 +156,10 @@ export declare function JBrowseModelF({ pluginManager, assemblyConfigSchema, }:
      * #action
      */
     removePlugin(pluginDefinition: PluginDefinition): void;
+    /**
+     * #action
+     */
+    setDefaultSessionConf(sessionConf: AnyConfigurationModel): void;
     /**
      * #action
      */

package/dist/JBrowseModel/index.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.JBrowseModelF = void 0;
 const mobx_state_tree_1 = require("mobx-state-tree");
 const configuration_1 = require("@jbrowse/core/configuration");
+const mobx_1 = require("mobx");
 // locals
 const JBrowseConfig_1 = require("../JBrowseConfig");
 function JBrowseModelF({ pluginManager, assemblyConfigSchema, }) {
@@ -109,6 +110,20 @@ function JBrowseModelF({ pluginManager, assemblyConfigSchema, }) {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             (0, mobx_state_tree_1.getParent)(self).setPluginsUpdated(true);
         },
+        /**
+         * #action
+         */
+        setDefaultSessionConf(sessionConf) {
+            const newDefault = 
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            (0, mobx_state_tree_1.getParent)(self).session.name === sessionConf.name
+                ? (0, mobx_state_tree_1.getSnapshot)(sessionConf)
+                : (0, mobx_1.toJS)(sessionConf);
+            if (!newDefault.name) {
+                throw new Error(`unable to set default session to ${newDefault.name}`);
+            }
+            self.defaultSession = (0, mobx_state_tree_1.cast)(newDefault);
+        },
         /**
          * #action
          */

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 export * from './ui';
 export * from './HistoryManagement';
+export * from './AppFocus';
 export * from './JBrowseConfig';
 export * from './JBrowseModel';
 export * from './Assemblies';

package/dist/index.js

@@ -16,6 +16,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./ui"), exports);
 __exportStar(require("./HistoryManagement"), exports);
+__exportStar(require("./AppFocus"), exports);
 __exportStar(require("./JBrowseConfig"), exports);
 __exportStar(require("./JBrowseModel"), exports);
 __exportStar(require("./Assemblies"), exports);

package/dist/ui/App/App.d.ts

@@ -1,10 +1,10 @@
 import React from 'react';
-import { SessionWithDrawerWidgets } from '@jbrowse/core/util';
+import { SessionWithFocusedViewAndDrawerWidgets } from '@jbrowse/core/util';
 import { SnackbarMessage } from '@jbrowse/core/ui/SnackbarModel';
 import { MenuItem as JBMenuItem } from '@jbrowse/core/ui/Menu';
-type Props = {
+interface Props {
     HeaderButtons?: React.ReactElement;
-    session: SessionWithDrawerWidgets & {
+    session: SessionWithFocusedViewAndDrawerWidgets & {
         savedSessionNames: string[];
         menus: {
             label: string;
@@ -14,6 +14,6 @@ type Props = {
         snackbarMessages: SnackbarMessage[];
         popSnackbarMessage: () => unknown;
     };
-};
+}
 declare const App: (props: Props) => React.JSX.Element;
 export { App };

package/dist/ui/App/AppFab.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { SessionWithDrawerWidgets } from '@jbrowse/core/util';
-declare const _default: ({ session, }: {
+declare const AppFab: ({ session, }: {
     session: SessionWithDrawerWidgets;
 }) => React.JSX.Element | null;
-export default _default;
+export default AppFab;

package/dist/ui/App/AppFab.js

@@ -23,10 +23,11 @@ const useStyles = (0, mui_1.makeStyles)()(theme => ({
         right: theme.spacing(2),
     },
 }));
-exports.default = (0, mobx_react_1.observer)(function AppFab({ session, }) {
+const AppFab = (0, mobx_react_1.observer)(function ({ session, }) {
     const { minimized, activeWidgets, drawerPosition } = session;
     const { classes } = useStyles();
     return activeWidgets.size > 0 && minimized ? (react_1.default.createElement(material_1.Tooltip, { title: "Open drawer widget" },
         react_1.default.createElement(material_1.Fab, { className: drawerPosition === 'right' ? classes.right : classes.left, color: "primary", "data-testid": "drawer-maximize", onClick: () => session.showWidgetDrawer() },
             react_1.default.createElement(Launch_1.default, null)))) : null;
 });
+exports.default = AppFab;

package/dist/ui/App/DialogQueue.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { SessionWithDrawerWidgets } from '@jbrowse/core/util';
-declare const _default: ({ session, }: {
+declare const DialogQueue: ({ session, }: {
     session: SessionWithDrawerWidgets;
 }) => React.JSX.Element;
-export default _default;
+export default DialogQueue;

package/dist/ui/App/DialogQueue.js

@@ -25,8 +25,9 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importStar(require("react"));
 const mobx_react_1 = require("mobx-react");
-exports.default = (0, mobx_react_1.observer)(function ({ session, }) {
+const DialogQueue = (0, mobx_react_1.observer)(function ({ session, }) {
     const { DialogComponent, DialogProps } = session;
     return (react_1.default.createElement(react_1.default.Fragment, null, DialogComponent ? (react_1.default.createElement(react_1.Suspense, { fallback: react_1.default.createElement(react_1.default.Fragment, null) },
         react_1.default.createElement(DialogComponent, { ...DialogProps }))) : null));
 });
+exports.default = DialogQueue;

package/dist/ui/App/Drawer.d.ts

@@ -1,8 +1,7 @@
 import React from 'react';
-import { SessionWithDrawerWidgets } from '@jbrowse/core/util/types';
-declare function Drawer({ children, session, }: {
+import { SessionWithFocusedViewAndDrawerWidgets } from '@jbrowse/core/util/types';
+declare const Drawer: ({ children, session, }: {
     children: React.ReactNode;
-    session: SessionWithDrawerWidgets;
-}): React.JSX.Element;
-declare const _default: typeof Drawer;
-export default _default;
+    session: SessionWithFocusedViewAndDrawerWidgets;
+}) => React.JSX.Element;
+export default Drawer;

package/dist/ui/App/Drawer.js

@@ -1,9 +1,32 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
 const material_1 = require("@mui/material");
 const mui_1 = require("tss-react/mui");
 const mobx_react_1 = require("mobx-react");
@@ -23,12 +46,33 @@ const useStyles = (0, mui_1.makeStyles)()(theme => ({
         zIndex: theme.zIndex.drawer + 1,
     },
 }));
-function Drawer({ children, session, }) {
+const Drawer = (0, mobx_react_1.observer)(function ({ children, session, }) {
     const { drawerPosition, drawerWidth } = session;
     const { classes } = useStyles();
-    return (react_1.default.createElement(material_1.Paper, { className: classes.paper, elevation: 16, square: true },
+    const ref = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        function handleSelectView(e) {
+            var _a, _b;
+            if (e.target instanceof Element) {
+                if ((ref === null || ref === void 0 ? void 0 : ref.current) && ref.current.contains(e.target)) {
+                    // @ts-ignore
+                    const visibleWidgetId = (_b = (_a = session.visibleWidget) === null || _a === void 0 ? void 0 : _a.view) === null || _b === void 0 ? void 0 : _b.id;
+                    if (visibleWidgetId) {
+                        session.setFocusedViewId(visibleWidgetId);
+                    }
+                }
+            }
+        }
+        document.addEventListener('mousedown', handleSelectView);
+        document.addEventListener('keydown', handleSelectView);
+        return () => {
+            document.removeEventListener('mousedown', handleSelectView);
+            document.removeEventListener('keydown', handleSelectView);
+        };
+    }, [ref, session]);
+    return (react_1.default.createElement(material_1.Paper, { ref: ref, className: classes.paper, elevation: 16, square: true },
         drawerPosition === 'right' ? (react_1.default.createElement(ResizeHandle_1.default, { onDrag: session.resizeDrawer, className: classes.resizeHandle, vertical: true })) : null,
         children,
         drawerPosition === 'left' ? (react_1.default.createElement(ResizeHandle_1.default, { onDrag: session.resizeDrawer, className: classes.resizeHandle, style: { left: drawerWidth }, vertical: true })) : null));
-}
-exports.default = (0, mobx_react_1.observer)(Drawer);
+});
+exports.default = Drawer;

package/dist/ui/App/DrawerHeader.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
-import { SessionWithDrawerWidgets } from '@jbrowse/core/util/types';
-declare const _default: ({ session, setToolbarHeight, }: {
-    session: SessionWithDrawerWidgets;
+import { SessionWithFocusedViewAndDrawerWidgets } from '@jbrowse/core/util/types';
+declare const DrawerHeader: ({ session, setToolbarHeight, }: {
+    session: SessionWithFocusedViewAndDrawerWidgets;
     setToolbarHeight: (arg: number) => void;
 }) => React.JSX.Element;
-export default _default;
+export default DrawerHeader;

package/dist/ui/App/DrawerHeader.js

@@ -50,13 +50,22 @@ const useStyles = (0, mui_1.makeStyles)()(theme => ({
     dropDownIcon: {
         color: theme.palette.secondary.contrastText,
     },
-    header: {
+    headerFocused: {
         background: theme.palette.secondary.main,
     },
+    headerUnfocused: {
+        background: theme.palette.secondary.dark,
+    },
 }));
-exports.default = (0, mobx_react_1.observer)(function ({ session, setToolbarHeight, }) {
+const DrawerHeader = (0, mobx_react_1.observer)(function ({ session, setToolbarHeight, }) {
+    var _a, _b;
     const { classes } = useStyles();
-    return (react_1.default.createElement(material_1.AppBar, { position: "sticky", className: classes.header, ref: ref => setToolbarHeight((ref === null || ref === void 0 ? void 0 : ref.getBoundingClientRect().height) || 0) },
+    const focusedViewId = session.focusedViewId;
+    // @ts-ignore
+    const viewWidgetId = (_b = (_a = session.visibleWidget) === null || _a === void 0 ? void 0 : _a.view) === null || _b === void 0 ? void 0 : _b.id;
+    return (react_1.default.createElement(material_1.AppBar, { position: "sticky", className: focusedViewId === viewWidgetId
+            ? classes.headerFocused
+            : classes.headerUnfocused, ref: ref => setToolbarHeight((ref === null || ref === void 0 ? void 0 : ref.getBoundingClientRect().height) || 0) },
         react_1.default.createElement(material_1.Toolbar, { disableGutters: true },
             react_1.default.createElement(DrawerWidgetSelector, { session: session }),
             react_1.default.createElement("div", { className: classes.spacer }),
@@ -112,3 +121,4 @@ const DrawerControls = (0, mobx_react_1.observer)(function ({ session, }) {
                 setAnchorEl(null);
             } }, option))))));
 });
+exports.default = DrawerHeader;

package/dist/ui/App/DrawerWidget.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { SessionWithDrawerWidgets } from '@jbrowse/core/util/types';
+import { SessionWithFocusedViewAndDrawerWidgets } from '@jbrowse/core/util/types';
 declare const DrawerWidget: ({ session, }: {
-    session: SessionWithDrawerWidgets;
+    session: SessionWithFocusedViewAndDrawerWidgets;
 }) => React.JSX.Element;
 export default DrawerWidget;

package/dist/ui/App/ViewContainer.d.ts

@@ -1,9 +1,9 @@
 import React from 'react';
 import { IBaseViewModel } from '@jbrowse/core/pluggableElementTypes/models';
-declare const _default: ({ view, onClose, onMinimize, children, }: {
+declare const ViewContainer: ({ view, onClose, onMinimize, children, }: {
     view: IBaseViewModel;
     onClose: () => void;
     onMinimize: () => void;
     children: React.ReactNode;
 }) => React.JSX.Element;
-export default _default;
+export default ViewContainer;

package/dist/ui/App/ViewContainer.js

@@ -31,6 +31,7 @@ const material_1 = require("@mui/material");
 const mui_1 = require("tss-react/mui");
 const mobx_react_1 = require("mobx-react");
 const util_1 = require("@jbrowse/core/util");
+const clsx_1 = __importDefault(require("clsx"));
 // icons
 const Close_1 = __importDefault(require("@mui/icons-material/Close"));
 const Minimize_1 = __importDefault(require("@mui/icons-material/Minimize"));
@@ -41,7 +42,6 @@ const ViewContainerTitle_1 = __importDefault(require("./ViewContainerTitle"));
 const useStyles = (0, mui_1.makeStyles)()(theme => ({
     viewContainer: {
         overflow: 'hidden',
-        background: theme.palette.secondary.main,
         margin: theme.spacing(0.5),
         padding: `0 ${theme.spacing(1)} ${theme.spacing(1)}`,
     },
@@ -51,19 +51,43 @@ const useStyles = (0, mui_1.makeStyles)()(theme => ({
     grow: {
         flexGrow: 1,
     },
+    focusedView: {
+        background: theme.palette.secondary.main,
+    },
+    unfocusedView: {
+        background: theme.palette.secondary.dark,
+    },
 }));
-exports.default = (0, mobx_react_1.observer)(function ({ view, onClose, onMinimize, children, }) {
+const ViewContainer = (0, mobx_react_1.observer)(function ({ view, onClose, onMinimize, children, }) {
     const { classes } = useStyles();
     const theme = (0, material_1.useTheme)();
     const ref = (0, util_1.useWidthSetter)(view, theme.spacing(1));
     const scrollRef = (0, react_1.useRef)(null);
+    const session = (0, util_1.getSession)(view);
     // scroll the view into view when first mounted. note: this effect will run
     // only once, because of the empty array second param
     (0, react_1.useEffect)(() => {
         var _a, _b;
         (_b = (_a = scrollRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView) === null || _b === void 0 ? void 0 : _b.call(_a, { block: 'center' });
     }, []);
-    return (react_1.default.createElement(material_1.Paper, { ref: ref, elevation: 12, className: classes.viewContainer },
+    (0, react_1.useEffect)(() => {
+        function handleSelectView(e) {
+            if (e.target instanceof Element) {
+                if ((ref === null || ref === void 0 ? void 0 : ref.current) && ref.current.contains(e.target)) {
+                    session.setFocusedViewId(view.id);
+                }
+            }
+        }
+        document.addEventListener('mousedown', handleSelectView);
+        document.addEventListener('keydown', handleSelectView);
+        return () => {
+            document.removeEventListener('mousedown', handleSelectView);
+            document.removeEventListener('keydown', handleSelectView);
+        };
+    }, [ref, session, view]);
+    return (react_1.default.createElement(material_1.Paper, { ref: ref, elevation: 12, className: (0, clsx_1.default)(classes.viewContainer, session.focusedViewId === view.id
+            ? classes.focusedView
+            : classes.unfocusedView) },
         react_1.default.createElement("div", { ref: scrollRef, style: { display: 'flex' } },
             react_1.default.createElement(ViewMenu_1.default, { model: view, IconProps: { className: classes.icon } }),
             react_1.default.createElement("div", { className: classes.grow }),
@@ -74,3 +98,4 @@ exports.default = (0, mobx_react_1.observer)(function ({ view, onClose, onMinimi
                 react_1.default.createElement(Close_1.default, { className: classes.icon, fontSize: "small" }))),
         react_1.default.createElement(material_1.Paper, null, children)));
 });
+exports.default = ViewContainer;

package/dist/ui/App/ViewContainerTitle.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { IBaseViewModel } from '@jbrowse/core/pluggableElementTypes';
-declare const _default: ({ view, }: {
+declare const ViewContainerTitle: ({ view, }: {
     view: IBaseViewModel;
 }) => React.JSX.Element;
-export default _default;
+export default ViewContainerTitle;

package/dist/ui/App/ViewContainerTitle.js

@@ -27,7 +27,7 @@ const useStyles = (0, mui_1.makeStyles)()(theme => ({
         backgroundColor: theme.palette.secondary.light,
     },
 }));
-exports.default = (0, mobx_react_1.observer)(function ViewContainerTitle({ view, }) {
+const ViewContainerTitle = (0, mobx_react_1.observer)(function ({ view, }) {
     var _a;
     const { classes } = useStyles();
     return (react_1.default.createElement(material_1.Tooltip, { title: "Rename view", arrow: true },
@@ -40,3 +40,4 @@ exports.default = (0, mobx_react_1.observer)(function ViewContainerTitle({ view,
                 inputFocused: classes.inputFocused,
             } })));
 });
+exports.default = ViewContainerTitle;

package/dist/ui/App/ViewMenu.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { SvgIconProps, IconButtonProps as IconButtonPropsType } from '@mui/material';
 import { IBaseViewModel } from '@jbrowse/core/pluggableElementTypes/models';
-declare const ViewMenu: ({ model, IconButtonProps, IconProps, }: {
+declare const ViewMenu: ({ model, IconProps, }: {
     model: IBaseViewModel;
     IconButtonProps?: IconButtonPropsType | undefined;
     IconProps: SvgIconProps;

package/dist/ui/App/ViewMenu.js

@@ -11,7 +11,7 @@ const CascadingMenuButton_1 = __importDefault(require("@jbrowse/core/ui/Cascadin
 const Menu_1 = __importDefault(require("@mui/icons-material/Menu"));
 const ArrowDownward_1 = __importDefault(require("@mui/icons-material/ArrowDownward"));
 const ArrowUpward_1 = __importDefault(require("@mui/icons-material/ArrowUpward"));
-const ViewMenu = (0, mobx_react_1.observer)(function ({ model, IconButtonProps, IconProps, }) {
+const ViewMenu = (0, mobx_react_1.observer)(function ({ model, IconProps, }) {
     const { menuItems } = model;
     const session = (0, util_1.getSession)(model);
     const items = [

package/esm/AppFocus/index.d.ts

@@ -0,0 +1,13 @@
+/**
+ * #stateModel AppFocusMixin
+ * #category session
+ */
+export declare function AppFocusMixin(): import("mobx-state-tree").IModelType<{
+    /**
+     * #property
+     * used to keep track of which view is in focus
+     */
+    focusedViewId: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
+}, {
+    setFocusedViewId(viewId: string): void;
+}, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>;

package/esm/AppFocus/index.js

@@ -0,0 +1,20 @@
+import { types } from 'mobx-state-tree';
+/**
+ * #stateModel AppFocusMixin
+ * #category session
+ */
+export function AppFocusMixin() {
+    return types
+        .model({
+        /**
+         * #property
+         * used to keep track of which view is in focus
+         */
+        focusedViewId: types.maybe(types.string),
+    })
+        .actions(self => ({
+        setFocusedViewId(viewId) {
+            self.focusedViewId = viewId;
+        },
+    }));
+}

package/esm/JBrowseModel/index.d.ts

@@ -15,7 +15,9 @@ export declare function JBrowseModelF({ pluginManager, assemblyConfigSchema, }:
                 defaultValue: string;
             };
             drivers: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").IMapType<import("mobx-state-tree").ITypeUnion<import("mobx-state-tree").ModelCreationType<import("mobx-state-tree/dist/internal").ExtractCFromProps<Record<string, any>>> | undefined, import("mobx-state-tree").ModelSnapshotType<Record<string, any>>, (Partial<import("mobx-state-tree/dist/internal").ExtractCFromProps<Record<string, any>>> & import("mobx-state-tree/dist/internal").NonEmptyObject) | undefined>>, [undefined]>;
-        }, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, undefined>>;
+        }, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, undefined>>; /**
+         * #getter
+         */
         highResolutionScaling: {
             type: string;
             defaultValue: number;
@@ -29,16 +31,12 @@ export declare function JBrowseModelF({ pluginManager, assemblyConfigSchema, }:
             };
             subfeatures: {
                 type: string;
-                description: string; /**
-                 * #getter
-                 */
+                description: string;
                 defaultValue: {};
                 contextVariable: string[];
             };
             depth: {
-                type: string; /**
-                 * #getter
-                 */
+                type: string;
                 defaultValue: number;
                 description: string;
             };
@@ -81,9 +79,7 @@ export declare function JBrowseModelF({ pluginManager, assemblyConfigSchema, }:
                 };
                 topLevelCategories: {
                     type: string;
-                    defaultValue: boolean; /**
-                     * #action
-                     */
+                    defaultValue: boolean;
                 };
                 subCategories: {
                     type: string;
@@ -96,9 +92,7 @@ export declare function JBrowseModelF({ pluginManager, assemblyConfigSchema, }:
             defaultValue: {};
         };
         extraThemes: {
-            type: string; /**
-             * #action
-             */
+            type: string;
             defaultValue: {};
         };
         logoPath: {
@@ -162,6 +156,10 @@ export declare function JBrowseModelF({ pluginManager, assemblyConfigSchema, }:
      * #action
      */
     removePlugin(pluginDefinition: PluginDefinition): void;
+    /**
+     * #action
+     */
+    setDefaultSessionConf(sessionConf: AnyConfigurationModel): void;
     /**
      * #action
      */

package/esm/JBrowseModel/index.js

@@ -1,5 +1,6 @@
-import { cast, getParent } from 'mobx-state-tree';
+import { cast, getParent, getSnapshot } from 'mobx-state-tree';
 import { readConfObject, } from '@jbrowse/core/configuration';
+import { toJS } from 'mobx';
 // locals
 import { JBrowseConfigF } from '../JBrowseConfig';
 export function JBrowseModelF({ pluginManager, assemblyConfigSchema, }) {
@@ -106,6 +107,20 @@ export function JBrowseModelF({ pluginManager, assemblyConfigSchema, }) {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             getParent(self).setPluginsUpdated(true);
         },
+        /**
+         * #action
+         */
+        setDefaultSessionConf(sessionConf) {
+            const newDefault = 
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            getParent(self).session.name === sessionConf.name
+                ? getSnapshot(sessionConf)
+                : toJS(sessionConf);
+            if (!newDefault.name) {
+                throw new Error(`unable to set default session to ${newDefault.name}`);
+            }
+            self.defaultSession = cast(newDefault);
+        },
         /**
          * #action
          */

package/esm/index.d.ts

@@ -1,5 +1,6 @@
 export * from './ui';
 export * from './HistoryManagement';
+export * from './AppFocus';
 export * from './JBrowseConfig';
 export * from './JBrowseModel';
 export * from './Assemblies';

package/esm/index.js

@@ -1,5 +1,6 @@
 export * from './ui';
 export * from './HistoryManagement';
+export * from './AppFocus';
 export * from './JBrowseConfig';
 export * from './JBrowseModel';
 export * from './Assemblies';

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

@@ -1,10 +1,10 @@
 import React from 'react';
-import { SessionWithDrawerWidgets } from '@jbrowse/core/util';
+import { SessionWithFocusedViewAndDrawerWidgets } from '@jbrowse/core/util';
 import { SnackbarMessage } from '@jbrowse/core/ui/SnackbarModel';
 import { MenuItem as JBMenuItem } from '@jbrowse/core/ui/Menu';
-type Props = {
+interface Props {
     HeaderButtons?: React.ReactElement;
-    session: SessionWithDrawerWidgets & {
+    session: SessionWithFocusedViewAndDrawerWidgets & {
         savedSessionNames: string[];
         menus: {
             label: string;
@@ -14,6 +14,6 @@ type Props = {
         snackbarMessages: SnackbarMessage[];
         popSnackbarMessage: () => unknown;
     };
-};
+}
 declare const App: (props: Props) => React.JSX.Element;
 export { App };

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { SessionWithDrawerWidgets } from '@jbrowse/core/util';
-declare const _default: ({ session, }: {
+declare const AppFab: ({ session, }: {
     session: SessionWithDrawerWidgets;
 }) => React.JSX.Element | null;
-export default _default;
+export default AppFab;

package/esm/ui/App/AppFab.js

@@ -18,10 +18,11 @@ const useStyles = makeStyles()(theme => ({
         right: theme.spacing(2),
     },
 }));
-export default observer(function AppFab({ session, }) {
+const AppFab = observer(function ({ session, }) {
     const { minimized, activeWidgets, drawerPosition } = session;
     const { classes } = useStyles();
     return activeWidgets.size > 0 && minimized ? (React.createElement(Tooltip, { title: "Open drawer widget" },
         React.createElement(Fab, { className: drawerPosition === 'right' ? classes.right : classes.left, color: "primary", "data-testid": "drawer-maximize", onClick: () => session.showWidgetDrawer() },
             React.createElement(LaunchIcon, null)))) : null;
 });
+export default AppFab;

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { SessionWithDrawerWidgets } from '@jbrowse/core/util';
-declare const _default: ({ session, }: {
+declare const DialogQueue: ({ session, }: {
     session: SessionWithDrawerWidgets;
 }) => React.JSX.Element;
-export default _default;
+export default DialogQueue;

package/esm/ui/App/DialogQueue.js

@@ -1,7 +1,8 @@
 import React, { Suspense } from 'react';
 import { observer } from 'mobx-react';
-export default observer(function ({ session, }) {
+const DialogQueue = observer(function ({ session, }) {
     const { DialogComponent, DialogProps } = session;
     return (React.createElement(React.Fragment, null, DialogComponent ? (React.createElement(Suspense, { fallback: React.createElement(React.Fragment, null) },
         React.createElement(DialogComponent, { ...DialogProps }))) : null));
 });
+export default DialogQueue;

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

@@ -1,8 +1,7 @@
 import React from 'react';
-import { SessionWithDrawerWidgets } from '@jbrowse/core/util/types';
-declare function Drawer({ children, session, }: {
+import { SessionWithFocusedViewAndDrawerWidgets } from '@jbrowse/core/util/types';
+declare const Drawer: ({ children, session, }: {
     children: React.ReactNode;
-    session: SessionWithDrawerWidgets;
-}): React.JSX.Element;
-declare const _default: typeof Drawer;
-export default _default;
+    session: SessionWithFocusedViewAndDrawerWidgets;
+}) => React.JSX.Element;
+export default Drawer;

package/esm/ui/App/Drawer.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import { Paper } from '@mui/material';
 import { makeStyles } from 'tss-react/mui';
 import { observer } from 'mobx-react';
@@ -18,12 +18,33 @@ const useStyles = makeStyles()(theme => ({
         zIndex: theme.zIndex.drawer + 1,
     },
 }));
-function Drawer({ children, session, }) {
+const Drawer = observer(function ({ children, session, }) {
     const { drawerPosition, drawerWidth } = session;
     const { classes } = useStyles();
-    return (React.createElement(Paper, { className: classes.paper, elevation: 16, square: true },
+    const ref = useRef(null);
+    useEffect(() => {
+        function handleSelectView(e) {
+            var _a, _b;
+            if (e.target instanceof Element) {
+                if ((ref === null || ref === void 0 ? void 0 : ref.current) && ref.current.contains(e.target)) {
+                    // @ts-ignore
+                    const visibleWidgetId = (_b = (_a = session.visibleWidget) === null || _a === void 0 ? void 0 : _a.view) === null || _b === void 0 ? void 0 : _b.id;
+                    if (visibleWidgetId) {
+                        session.setFocusedViewId(visibleWidgetId);
+                    }
+                }
+            }
+        }
+        document.addEventListener('mousedown', handleSelectView);
+        document.addEventListener('keydown', handleSelectView);
+        return () => {
+            document.removeEventListener('mousedown', handleSelectView);
+            document.removeEventListener('keydown', handleSelectView);
+        };
+    }, [ref, session]);
+    return (React.createElement(Paper, { ref: ref, className: classes.paper, elevation: 16, square: true },
         drawerPosition === 'right' ? (React.createElement(ResizeHandle, { onDrag: session.resizeDrawer, className: classes.resizeHandle, vertical: true })) : null,
         children,
         drawerPosition === 'left' ? (React.createElement(ResizeHandle, { onDrag: session.resizeDrawer, className: classes.resizeHandle, style: { left: drawerWidth }, vertical: true })) : null));
-}
-export default observer(Drawer);
+});
+export default Drawer;

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

@@ -1,7 +1,7 @@
 import React from 'react';
-import { SessionWithDrawerWidgets } from '@jbrowse/core/util/types';
-declare const _default: ({ session, setToolbarHeight, }: {
-    session: SessionWithDrawerWidgets;
+import { SessionWithFocusedViewAndDrawerWidgets } from '@jbrowse/core/util/types';
+declare const DrawerHeader: ({ session, setToolbarHeight, }: {
+    session: SessionWithFocusedViewAndDrawerWidgets;
     setToolbarHeight: (arg: number) => void;
 }) => React.JSX.Element;
-export default _default;
+export default DrawerHeader;

package/esm/ui/App/DrawerHeader.js

@@ -22,13 +22,22 @@ const useStyles = makeStyles()(theme => ({
     dropDownIcon: {
         color: theme.palette.secondary.contrastText,
     },
-    header: {
+    headerFocused: {
         background: theme.palette.secondary.main,
     },
+    headerUnfocused: {
+        background: theme.palette.secondary.dark,
+    },
 }));
-export default observer(function ({ session, setToolbarHeight, }) {
+const DrawerHeader = observer(function ({ session, setToolbarHeight, }) {
+    var _a, _b;
     const { classes } = useStyles();
-    return (React.createElement(AppBar, { position: "sticky", className: classes.header, ref: ref => setToolbarHeight((ref === null || ref === void 0 ? void 0 : ref.getBoundingClientRect().height) || 0) },
+    const focusedViewId = session.focusedViewId;
+    // @ts-ignore
+    const viewWidgetId = (_b = (_a = session.visibleWidget) === null || _a === void 0 ? void 0 : _a.view) === null || _b === void 0 ? void 0 : _b.id;
+    return (React.createElement(AppBar, { position: "sticky", className: focusedViewId === viewWidgetId
+            ? classes.headerFocused
+            : classes.headerUnfocused, ref: ref => setToolbarHeight((ref === null || ref === void 0 ? void 0 : ref.getBoundingClientRect().height) || 0) },
         React.createElement(Toolbar, { disableGutters: true },
             React.createElement(DrawerWidgetSelector, { session: session }),
             React.createElement("div", { className: classes.spacer }),
@@ -84,3 +93,4 @@ const DrawerControls = observer(function ({ session, }) {
                 setAnchorEl(null);
             } }, option))))));
 });
+export default DrawerHeader;

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

@@ -1,6 +1,6 @@
 import React from 'react';
-import { SessionWithDrawerWidgets } from '@jbrowse/core/util/types';
+import { SessionWithFocusedViewAndDrawerWidgets } from '@jbrowse/core/util/types';
 declare const DrawerWidget: ({ session, }: {
-    session: SessionWithDrawerWidgets;
+    session: SessionWithFocusedViewAndDrawerWidgets;
 }) => React.JSX.Element;
 export default DrawerWidget;

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

@@ -1,9 +1,9 @@
 import React from 'react';
 import { IBaseViewModel } from '@jbrowse/core/pluggableElementTypes/models';
-declare const _default: ({ view, onClose, onMinimize, children, }: {
+declare const ViewContainer: ({ view, onClose, onMinimize, children, }: {
     view: IBaseViewModel;
     onClose: () => void;
     onMinimize: () => void;
     children: React.ReactNode;
 }) => React.JSX.Element;
-export default _default;
+export default ViewContainer;

package/esm/ui/App/ViewContainer.js

@@ -2,7 +2,8 @@ import React, { useEffect, useRef } from 'react';
 import { IconButton, Paper, useTheme } from '@mui/material';
 import { makeStyles } from 'tss-react/mui';
 import { observer } from 'mobx-react';
-import { useWidthSetter } from '@jbrowse/core/util';
+import { getSession, useWidthSetter } from '@jbrowse/core/util';
+import clsx from 'clsx';
 // icons
 import CloseIcon from '@mui/icons-material/Close';
 import MinimizeIcon from '@mui/icons-material/Minimize';
@@ -13,7 +14,6 @@ import ViewContainerTitle from './ViewContainerTitle';
 const useStyles = makeStyles()(theme => ({
     viewContainer: {
         overflow: 'hidden',
-        background: theme.palette.secondary.main,
         margin: theme.spacing(0.5),
         padding: `0 ${theme.spacing(1)} ${theme.spacing(1)}`,
     },
@@ -23,19 +23,43 @@ const useStyles = makeStyles()(theme => ({
     grow: {
         flexGrow: 1,
     },
+    focusedView: {
+        background: theme.palette.secondary.main,
+    },
+    unfocusedView: {
+        background: theme.palette.secondary.dark,
+    },
 }));
-export default observer(function ({ view, onClose, onMinimize, children, }) {
+const ViewContainer = observer(function ({ view, onClose, onMinimize, children, }) {
     const { classes } = useStyles();
     const theme = useTheme();
     const ref = useWidthSetter(view, theme.spacing(1));
     const scrollRef = useRef(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
     useEffect(() => {
         var _a, _b;
         (_b = (_a = scrollRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView) === null || _b === void 0 ? void 0 : _b.call(_a, { block: 'center' });
     }, []);
-    return (React.createElement(Paper, { ref: ref, elevation: 12, className: classes.viewContainer },
+    useEffect(() => {
+        function handleSelectView(e) {
+            if (e.target instanceof Element) {
+                if ((ref === null || ref === void 0 ? void 0 : ref.current) && ref.current.contains(e.target)) {
+                    session.setFocusedViewId(view.id);
+                }
+            }
+        }
+        document.addEventListener('mousedown', handleSelectView);
+        document.addEventListener('keydown', handleSelectView);
+        return () => {
+            document.removeEventListener('mousedown', handleSelectView);
+            document.removeEventListener('keydown', handleSelectView);
+        };
+    }, [ref, session, view]);
+    return (React.createElement(Paper, { ref: ref, elevation: 12, className: clsx(classes.viewContainer, session.focusedViewId === view.id
+            ? classes.focusedView
+            : classes.unfocusedView) },
         React.createElement("div", { ref: scrollRef, style: { display: 'flex' } },
             React.createElement(ViewMenu, { model: view, IconProps: { className: classes.icon } }),
             React.createElement("div", { className: classes.grow }),
@@ -46,3 +70,4 @@ export default observer(function ({ view, onClose, onMinimize, children, }) {
                 React.createElement(CloseIcon, { className: classes.icon, fontSize: "small" }))),
         React.createElement(Paper, null, children)));
 });
+export default ViewContainer;

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { IBaseViewModel } from '@jbrowse/core/pluggableElementTypes';
-declare const _default: ({ view, }: {
+declare const ViewContainerTitle: ({ view, }: {
     view: IBaseViewModel;
 }) => React.JSX.Element;
-export default _default;
+export default ViewContainerTitle;

package/esm/ui/App/ViewContainerTitle.js

@@ -22,7 +22,7 @@ const useStyles = makeStyles()(theme => ({
         backgroundColor: theme.palette.secondary.light,
     },
 }));
-export default observer(function ViewContainerTitle({ view, }) {
+const ViewContainerTitle = observer(function ({ view, }) {
     var _a;
     const { classes } = useStyles();
     return (React.createElement(Tooltip, { title: "Rename view", arrow: true },
@@ -35,3 +35,4 @@ export default observer(function ViewContainerTitle({ view, }) {
                 inputFocused: classes.inputFocused,
             } })));
 });
+export default ViewContainerTitle;

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { SvgIconProps, IconButtonProps as IconButtonPropsType } from '@mui/material';
 import { IBaseViewModel } from '@jbrowse/core/pluggableElementTypes/models';
-declare const ViewMenu: ({ model, IconButtonProps, IconProps, }: {
+declare const ViewMenu: ({ model, IconProps, }: {
     model: IBaseViewModel;
     IconButtonProps?: IconButtonPropsType | undefined;
     IconProps: SvgIconProps;

package/esm/ui/App/ViewMenu.js

@@ -6,7 +6,7 @@ import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton';
 import MenuIcon from '@mui/icons-material/Menu';
 import ArrowDownward from '@mui/icons-material/ArrowDownward';
 import ArrowUpward from '@mui/icons-material/ArrowUpward';
-const ViewMenu = observer(function ({ model, IconButtonProps, IconProps, }) {
+const ViewMenu = observer(function ({ model, IconProps, }) {
     const { menuItems } = model;
     const session = getSession(model);
     const items = [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/app-core",
-  "version": "2.6.3",
+  "version": "2.7.1",
   "description": "JBrowse 2 code shared between the 'full featured' apps e.g. jbrowse-web and jbrowse-desktop",
   "keywords": [
     "jbrowse",
@@ -42,24 +42,24 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.16.3",
-    "@jbrowse/product-core": "^2.6.3",
+    "@jbrowse/product-core": "^2.7.1",
     "@mui/icons-material": "^5.0.0",
     "@mui/material": "^5.10.17",
+    "clsx": "^2.0.0",
     "copy-to-clipboard": "^3.3.1",
-    "react-error-boundary": "^4.0.3",
-    "shortid": "^2.2.15"
+    "react-error-boundary": "^4.0.3"
   },
   "peerDependencies": {
     "mobx": "^6.0.0",
-    "mobx-react": "^7.0.0",
+    "mobx-react": "^9.0.0",
     "mobx-state-tree": "^5.0.0",
-    "react": "^17.0.0",
-    "react-dom": "^17.0.0",
+    "react": ">=17.0.0",
+    "react-dom": ">=17.0.0",
     "rxjs": "^7.0.0",
     "tss-react": "^4.0.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "ed402c87efb0904858d602c363bd1757d5742129"
+  "gitHead": "2cda1611eebd12517f2a3cfc1b612face27005d4"
 }