@jbrowse/app-core 2.6.2 → 2.7.0

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

@@ -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/esm/ui/App/DrawerHeader.js

@@ -0,0 +1,96 @@
+import React, { useState } from 'react';
+import { AppBar, FormControl, IconButton, Menu, MenuItem, Select, Toolbar, Tooltip, Typography, } from '@mui/material';
+import { makeStyles } from 'tss-react/mui';
+import { observer } from 'mobx-react';
+import { getEnv } from '@jbrowse/core/util';
+// icons
+import DeleteIcon from '@mui/icons-material/Delete';
+import CloseIcon from '@mui/icons-material/Close';
+import MinimizeIcon from '@mui/icons-material/Minimize';
+import MoreVertIcon from '@mui/icons-material/MoreVert';
+const useStyles = 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 = 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.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 }),
+            React.createElement(DrawerControls, { session: session }))));
+});
+const DrawerWidgetSelector = observer(function ({ session, }) {
+    const { visibleWidget, activeWidgets } = session;
+    const { classes } = useStyles();
+    const { pluginManager } = getEnv(session);
+    return (React.createElement(FormControl, { className: classes.formControl },
+        React.createElement(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.createElement(Typography, { variant: "h6", color: "inherit" }, "Unknown widget"));
+                }
+                const widgetType = pluginManager.getWidgetType(widget.type);
+                const { HeadingComponent, heading } = widgetType;
+                return HeadingComponent ? (React.createElement(HeadingComponent, { model: widget })) : (React.createElement(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.createElement(MenuItem, { "data-testid": `widget-drawer-selects-item-${widget.type}`, key: widget.id, value: widget.id },
+                HeadingComponent ? (React.createElement(HeadingComponent, { model: widget })) : (React.createElement(Typography, { variant: "h6", color: "inherit" }, heading)),
+                React.createElement(IconButton, { "data-testid": `${widget.type}-drawer-delete`, color: "inherit", "aria-label": "Delete", onClick: () => session.hideWidget(widget) },
+                    React.createElement(DeleteIcon, null))));
+        }))));
+});
+const DrawerControls = observer(function ({ session, }) {
+    const [anchorEl, setAnchorEl] = useState(null);
+    const { drawerPosition, visibleWidget } = session;
+    return (React.createElement(React.Fragment, null,
+        React.createElement(IconButton, { color: "inherit", onClick: event => setAnchorEl(event.currentTarget) },
+            React.createElement(MoreVertIcon, null)),
+        React.createElement(Tooltip, { title: "Minimize drawer" },
+            React.createElement(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.createElement(MinimizeIcon, null))),
+        React.createElement(Tooltip, { title: "Close drawer" },
+            React.createElement(IconButton, { color: "inherit", onClick: () => session.hideWidget(visibleWidget) },
+                React.createElement(CloseIcon, null))),
+        React.createElement(Menu, { anchorEl: anchorEl, open: Boolean(anchorEl), onClose: () => setAnchorEl(null) }, ['left', 'right'].map(option => (React.createElement(MenuItem, { key: option, selected: drawerPosition === 'option', onClick: () => {
+                session.setDrawerPosition(option);
+                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/DrawerWidget.js

@@ -1,86 +1,12 @@
 import React, { Suspense, useState } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
-import { AppBar, FormControl, IconButton, Menu, MenuItem, Select, Toolbar, Tooltip, Typography, } from '@mui/material';
-import { makeStyles } from 'tss-react/mui';
 import { observer } from 'mobx-react';
 import { getEnv } from '@jbrowse/core/util';
 import LoadingEllipses from '@jbrowse/core/ui/LoadingEllipses';
 import ErrorMessage from '@jbrowse/core/ui/ErrorMessage';
-// icons
-import DeleteIcon from '@mui/icons-material/Delete';
-import CloseIcon from '@mui/icons-material/Close';
-import MinimizeIcon from '@mui/icons-material/Minimize';
-import MoreVertIcon from '@mui/icons-material/MoreVert';
 // locals
 import Drawer from './Drawer';
-const useStyles = makeStyles()(theme => ({
-    formControl: {
-        margin: 0,
-    },
-    spacer: {
-        flexGrow: 1,
-    },
-    drawerSelect: {
-        margin: 0,
-        color: theme.palette.secondary.contrastText,
-    },
-    dropDownIcon: {
-        color: theme.palette.secondary.contrastText,
-    },
-    header: {
-        background: theme.palette.secondary.main,
-    },
-}));
-const DrawerHeader = observer(function ({ session, setToolbarHeight, }) {
-    const { pluginManager } = getEnv(session);
-    const { visibleWidget, activeWidgets, drawerPosition } = session;
-    const { classes } = useStyles();
-    const [anchorEl, setAnchorEl] = useState(null);
-    return (React.createElement(AppBar, { position: "sticky", className: classes.header, ref: ref => setToolbarHeight((ref === null || ref === void 0 ? void 0 : ref.getBoundingClientRect().height) || 0) },
-        React.createElement(Toolbar, { disableGutters: true },
-            React.createElement(FormControl, { className: classes.formControl },
-                React.createElement(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.createElement(Typography, { variant: "h6", color: "inherit" }, "Unknown widget"));
-                        }
-                        const widgetType = pluginManager.getWidgetType(widget.type);
-                        const { HeadingComponent, heading } = widgetType;
-                        return HeadingComponent ? (React.createElement(HeadingComponent, { model: widget })) : (React.createElement(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.createElement(MenuItem, { "data-testid": `widget-drawer-selects-item-${widget.type}`, key: widget.id, value: widget.id },
-                        HeadingComponent ? (React.createElement(HeadingComponent, { model: widget })) : (React.createElement(Typography, { variant: "h6", color: "inherit" }, heading)),
-                        React.createElement(IconButton, { "data-testid": `${widget.type}-drawer-delete`, color: "inherit", "aria-label": "Delete", onClick: () => session.hideWidget(widget) },
-                            React.createElement(DeleteIcon, null))));
-                }))),
-            React.createElement("div", { className: classes.spacer }),
-            React.createElement("div", null,
-                React.createElement(IconButton, { "data-testid": "drawer-close", color: "inherit", onClick: event => setAnchorEl(event.currentTarget) },
-                    React.createElement(MoreVertIcon, null)),
-                React.createElement(Tooltip, { title: "Minimize drawer" },
-                    React.createElement(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.createElement(MinimizeIcon, null))),
-                React.createElement(Tooltip, { title: "Close drawer" },
-                    React.createElement(IconButton, { "data-testid": "drawer-close", color: "inherit", onClick: () => session.hideWidget(visibleWidget) },
-                        React.createElement(CloseIcon, null))))),
-        React.createElement(Menu, { anchorEl: anchorEl, open: Boolean(anchorEl), onClose: () => setAnchorEl(null) }, ['left', 'right'].map(option => (React.createElement(MenuItem, { key: option, selected: drawerPosition === 'option', onClick: () => {
-                session.setDrawerPosition(option);
-                setAnchorEl(null);
-            } }, option))))));
-});
+import DrawerHeader from './DrawerHeader';
 const DrawerWidget = observer(function ({ session, }) {
     const { visibleWidget } = session;
     const { pluginManager } = getEnv(session);

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.2",
+  "version": "2.7.0",
   "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.2",
+    "@jbrowse/product-core": "^2.7.0",
     "@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": "bbea587a402d9974acdd804a33f4b77f31a2fd5f"
+  "gitHead": "dbe7fb1af01fc89f833d2744635eb44a17365b41"
 }