@jbrowse/app-core 2.6.2 → 2.7.0

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/HistoryManagement/index.js

@@ -23,18 +23,21 @@ function HistoryManagementMixin() {
         .actions(self => ({
         afterCreate() {
             document.addEventListener('keydown', e => {
+                var _a, _b;
                 if (self.history.canRedo &&
                     // ctrl+shift+z or cmd+shift+z
                     (((e.ctrlKey || e.metaKey) && e.shiftKey && e.code === 'KeyZ') ||
                         // ctrl+y
-                        (e.ctrlKey && !e.shiftKey && e.code === 'KeyY'))) {
+                        (e.ctrlKey && !e.shiftKey && e.code === 'KeyY')) &&
+                    ((_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.tagName.toUpperCase()) !== 'INPUT') {
                     self.history.redo();
                 }
                 if (self.history.canUndo &&
                     // ctrl+z or cmd+z
                     (e.ctrlKey || e.metaKey) &&
                     !e.shiftKey &&
-                    e.code === 'KeyZ') {
+                    e.code === 'KeyZ' &&
+                    ((_b = document.activeElement) === null || _b === void 0 ? void 0 : _b.tagName.toUpperCase()) !== 'INPUT') {
                     self.history.undo();
                 }
             });

package/dist/JBrowseConfig/index.d.ts

@@ -17,9 +17,7 @@ export declare function JBrowseConfigF({ pluginManager, assemblyConfigSchema, }:
         rpc: import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
             defaultDriver: {
                 type: string;
-                description: string; /**
-                 * #slot configuration.formatDetails.feature
-                 */
+                description: string;
                 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]>;
@@ -32,27 +30,18 @@ export declare function JBrowseConfigF({ pluginManager, assemblyConfigSchema, }:
             defaultValue: number;
         };
         formatDetails: import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
-            /**
-             * #slot configuration.formatDetails.feature
-             */
             feature: {
                 type: string;
                 description: string;
                 defaultValue: {};
                 contextVariable: string[];
             };
-            /**
-             * #slot configuration.formatDetails.subfeatures
-             */
             subfeatures: {
                 type: string;
                 description: string;
                 defaultValue: {};
                 contextVariable: string[];
             };
-            /**
-             * #slot configuration.formatDetails.depth
-             */
             depth: {
                 type: string;
                 defaultValue: number;
@@ -60,18 +49,12 @@ export declare function JBrowseConfigF({ pluginManager, assemblyConfigSchema, }:
             };
         }, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, undefined>>;
         formatAbout: import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
-            /**
-             * #slot configuration.formatAbout.config
-             */
             config: {
                 type: string;
                 description: string;
                 defaultValue: {};
                 contextVariable: string[];
             };
-            /**
-             * #slot configuration.formatAbout.hideUris
-             */
             hideUris: {
                 type: string;
                 defaultValue: boolean;
@@ -88,6 +71,34 @@ export declare function JBrowseConfigF({ pluginManager, assemblyConfigSchema, }:
             type: string;
             defaultValue: boolean;
         };
+        hierarchical: import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
+            sort: import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
+                trackNames: {
+                    type: string;
+                    defaultValue: boolean;
+                };
+                categories: {
+                    type: string;
+                    defaultValue: boolean;
+                };
+            }, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, undefined>>;
+            defaultCollapsed: import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
+                categoryNames: {
+                    type: string;
+                    defaultValue: never[]; /**
+                     * #slot configuration.highResolutionScaling
+                     */
+                };
+                topLevelCategories: {
+                    type: string;
+                    defaultValue: boolean;
+                };
+                subCategories: {
+                    type: string;
+                    defaultValue: boolean;
+                };
+            }, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, undefined>>;
+        }, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, undefined>>;
         /**
          * #slot configuration.theme
          */

package/dist/JBrowseConfig/index.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.JBrowseConfigF = void 0;
 const configuration_1 = require("@jbrowse/core/configuration");
 const RpcManager_1 = __importDefault(require("@jbrowse/core/rpc/RpcManager"));
+const product_core_1 = require("@jbrowse/product-core");
 const mobx_state_tree_1 = require("mobx-state-tree");
 /**
  * #config JBrowseRootConfig
@@ -26,52 +27,8 @@ function JBrowseConfigF({ pluginManager, assemblyConfigSchema, }) {
                 type: 'number',
                 defaultValue: 2,
             },
-            formatDetails: (0, configuration_1.ConfigurationSchema)('FormatDetails', {
-                /**
-                 * #slot configuration.formatDetails.feature
-                 */
-                feature: {
-                    type: 'frozen',
-                    description: 'adds extra fields to the feature details',
-                    defaultValue: {},
-                    contextVariable: ['feature'],
-                },
-                /**
-                 * #slot configuration.formatDetails.subfeatures
-                 */
-                subfeatures: {
-                    type: 'frozen',
-                    description: 'adds extra fields to the subfeatures of a feature',
-                    defaultValue: {},
-                    contextVariable: ['feature'],
-                },
-                /**
-                 * #slot configuration.formatDetails.depth
-                 */
-                depth: {
-                    type: 'number',
-                    defaultValue: 2,
-                    description: 'depth to iterate on subfeatures',
-                },
-            }),
-            formatAbout: (0, configuration_1.ConfigurationSchema)('FormatAbout', {
-                /**
-                 * #slot configuration.formatAbout.config
-                 */
-                config: {
-                    type: 'frozen',
-                    description: 'formats configuration object in about dialog',
-                    defaultValue: {},
-                    contextVariable: ['config'],
-                },
-                /**
-                 * #slot configuration.formatAbout.hideUris
-                 */
-                hideUris: {
-                    type: 'boolean',
-                    defaultValue: false,
-                },
-            }),
+            formatDetails: (0, product_core_1.FormatDetailsConfigSchemaFactory)(),
+            formatAbout: (0, product_core_1.FormatAboutConfigSchemaFactory)(),
             /*
              * #slot configuration.shareURL
              */
@@ -86,6 +43,7 @@ function JBrowseConfigF({ pluginManager, assemblyConfigSchema, }) {
                 type: 'boolean',
                 defaultValue: false,
             },
+            hierarchical: (0, product_core_1.HierarchicalConfigSchemaFactory)(),
             /**
              * #slot configuration.theme
              */
@@ -96,7 +54,10 @@ function JBrowseConfigF({ pluginManager, assemblyConfigSchema, }) {
             /**
              * #slot configuration.extraThemes
              */
-            extraThemes: { type: 'frozen', defaultValue: {} },
+            extraThemes: {
+                type: 'frozen',
+                defaultValue: {},
+            },
             /**
              * #slot configuration.logoPath
              */

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;
@@ -59,11 +61,35 @@ export declare function JBrowseModelF({ pluginManager, assemblyConfigSchema, }:
             type: string;
             defaultValue: boolean;
         };
+        hierarchical: import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
+            sort: import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
+                trackNames: {
+                    type: string;
+                    defaultValue: boolean;
+                };
+                categories: {
+                    type: string;
+                    defaultValue: boolean;
+                };
+            }, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, undefined>>;
+            defaultCollapsed: import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
+                categoryNames: {
+                    type: string;
+                    defaultValue: never[];
+                };
+                topLevelCategories: {
+                    type: string;
+                    defaultValue: boolean;
+                };
+                subCategories: {
+                    type: string;
+                    defaultValue: boolean;
+                };
+            }, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, undefined>>;
+        }, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, undefined>>;
         theme: {
             type: string;
-            defaultValue: {}; /**
-             * #action
-             */
+            defaultValue: {};
         };
         extraThemes: {
             type: string;
@@ -71,9 +97,6 @@ export declare function JBrowseModelF({ pluginManager, assemblyConfigSchema, }:
         };
         logoPath: {
             type: string;
-            /**
-             * #action
-             */
             defaultValue: {
                 uri: string;
                 locationType: string;
@@ -133,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

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

package/dist/ui/App/DrawerHeader.js

@@ -0,0 +1,124 @@
+"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 = __importStar(require("react"));
+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");
+// icons
+const Delete_1 = __importDefault(require("@mui/icons-material/Delete"));
+const Close_1 = __importDefault(require("@mui/icons-material/Close"));
+const Minimize_1 = __importDefault(require("@mui/icons-material/Minimize"));
+const MoreVert_1 = __importDefault(require("@mui/icons-material/MoreVert"));
+const useStyles = (0, mui_1.makeStyles)()(theme => ({
+    formControl: {
+        margin: 0,
+    },
+    spacer: {
+        flexGrow: 1,
+    },
+    drawerSelect: {
+        margin: 0,
+        color: theme.palette.secondary.contrastText,
+    },
+    dropDownIcon: {
+        color: theme.palette.secondary.contrastText,
+    },
+    headerFocused: {
+        background: theme.palette.secondary.main,
+    },
+    headerUnfocused: {
+        background: theme.palette.secondary.dark,
+    },
+}));
+const DrawerHeader = (0, mobx_react_1.observer)(function ({ session, setToolbarHeight, }) {
+    var _a, _b;
+    const { classes } = useStyles();
+    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 }),
+            react_1.default.createElement(DrawerControls, { session: session }))));
+});
+const DrawerWidgetSelector = (0, mobx_react_1.observer)(function ({ session, }) {
+    const { visibleWidget, activeWidgets } = session;
+    const { classes } = useStyles();
+    const { pluginManager } = (0, util_1.getEnv)(session);
+    return (react_1.default.createElement(material_1.FormControl, { className: classes.formControl },
+        react_1.default.createElement(material_1.Select, { value: visibleWidget === null || visibleWidget === void 0 ? void 0 : visibleWidget.id, "data-testid": "widget-drawer-selects", className: classes.drawerSelect, classes: { icon: classes.dropDownIcon }, renderValue: widgetId => {
+                const widget = session.activeWidgets.get(widgetId);
+                if (!widget) {
+                    return (react_1.default.createElement(material_1.Typography, { variant: "h6", color: "inherit" }, "Unknown widget"));
+                }
+                const widgetType = pluginManager.getWidgetType(widget.type);
+                const { HeadingComponent, heading } = widgetType;
+                return HeadingComponent ? (react_1.default.createElement(HeadingComponent, { model: widget })) : (react_1.default.createElement(material_1.Typography, { variant: "h6", color: "inherit" }, heading));
+            }, onChange: e => {
+                const w = session.activeWidgets.get(e.target.value);
+                if (w) {
+                    session.showWidget(w);
+                }
+                else {
+                    session.notify(`Widget not found ${e.target.value}`, 'warning');
+                }
+            } }, [...activeWidgets.values()].map(widget => {
+            const widgetType = pluginManager.getWidgetType(widget.type);
+            const { HeadingComponent, heading } = widgetType;
+            return (react_1.default.createElement(material_1.MenuItem, { "data-testid": `widget-drawer-selects-item-${widget.type}`, key: widget.id, value: widget.id },
+                HeadingComponent ? (react_1.default.createElement(HeadingComponent, { model: widget })) : (react_1.default.createElement(material_1.Typography, { variant: "h6", color: "inherit" }, heading)),
+                react_1.default.createElement(material_1.IconButton, { "data-testid": `${widget.type}-drawer-delete`, color: "inherit", "aria-label": "Delete", onClick: () => session.hideWidget(widget) },
+                    react_1.default.createElement(Delete_1.default, null))));
+        }))));
+});
+const DrawerControls = (0, mobx_react_1.observer)(function ({ session, }) {
+    const [anchorEl, setAnchorEl] = (0, react_1.useState)(null);
+    const { drawerPosition, visibleWidget } = session;
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(material_1.IconButton, { color: "inherit", onClick: event => setAnchorEl(event.currentTarget) },
+            react_1.default.createElement(MoreVert_1.default, null)),
+        react_1.default.createElement(material_1.Tooltip, { title: "Minimize drawer" },
+            react_1.default.createElement(material_1.IconButton, { "data-testid": "drawer-minimize", color: "inherit", onClick: () => {
+                    session.notify(`Drawer minimized, click button on ${drawerPosition} side of screen to re-open`, 'info');
+                    session.minimizeWidgetDrawer();
+                } },
+                react_1.default.createElement(Minimize_1.default, null))),
+        react_1.default.createElement(material_1.Tooltip, { title: "Close drawer" },
+            react_1.default.createElement(material_1.IconButton, { color: "inherit", onClick: () => session.hideWidget(visibleWidget) },
+                react_1.default.createElement(Close_1.default, null))),
+        react_1.default.createElement(material_1.Menu, { anchorEl: anchorEl, open: Boolean(anchorEl), onClose: () => setAnchorEl(null) }, ['left', 'right'].map(option => (react_1.default.createElement(material_1.MenuItem, { key: option, selected: drawerPosition === 'option', onClick: () => {
+                session.setDrawerPosition(option);
+                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;