@jbrowse/app-core 2.7.1 → 2.8.0

package/dist/ui/App/ViewContainer.js

@@ -31,26 +31,14 @@ 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"));
-const Add_1 = __importDefault(require("@mui/icons-material/Add"));
 // locals
-const ViewMenu_1 = __importDefault(require("./ViewMenu"));
-const ViewContainerTitle_1 = __importDefault(require("./ViewContainerTitle"));
+const ViewHeader_1 = __importDefault(require("./ViewHeader"));
 const useStyles = (0, mui_1.makeStyles)()(theme => ({
     viewContainer: {
         overflow: 'hidden',
         margin: theme.spacing(0.5),
         padding: `0 ${theme.spacing(1)} ${theme.spacing(1)}`,
     },
-    icon: {
-        color: theme.palette.secondary.contrastText,
-    },
-    grow: {
-        flexGrow: 1,
-    },
     focusedView: {
         background: theme.palette.secondary.main,
     },
@@ -59,17 +47,10 @@ const useStyles = (0, mui_1.makeStyles)()(theme => ({
     },
 }));
 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 { classes, cx } = useStyles();
     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' });
-    }, []);
     (0, react_1.useEffect)(() => {
         function handleSelectView(e) {
             if (e.target instanceof Element) {
@@ -85,17 +66,10 @@ const ViewContainer = (0, mobx_react_1.observer)(function ({ view, onClose, onMi
             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
+    return (react_1.default.createElement(material_1.Paper, { ref: ref, elevation: 12, className: cx(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 }),
-            react_1.default.createElement(ViewContainerTitle_1.default, { view: view }),
-            react_1.default.createElement("div", { className: classes.grow }),
-            react_1.default.createElement(material_1.IconButton, { "data-testid": "minimize_view", onClick: onMinimize }, view.minimized ? (react_1.default.createElement(Add_1.default, { className: classes.icon, fontSize: "small" })) : (react_1.default.createElement(Minimize_1.default, { className: classes.icon, fontSize: "small" }))),
-            react_1.default.createElement(material_1.IconButton, { "data-testid": "close_view", onClick: onClose },
-                react_1.default.createElement(Close_1.default, { className: classes.icon, fontSize: "small" }))),
+        react_1.default.createElement(ViewHeader_1.default, { view: view, onClose: onClose, onMinimize: onMinimize }),
         react_1.default.createElement(material_1.Paper, null, children)));
 });
 exports.default = ViewContainer;

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

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

package/dist/ui/App/ViewHeader.js

@@ -0,0 +1,83 @@
+"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");
+// icons
+const Close_1 = __importDefault(require("@mui/icons-material/Close"));
+const Minimize_1 = __importDefault(require("@mui/icons-material/Minimize"));
+const Add_1 = __importDefault(require("@mui/icons-material/Add"));
+const KeyboardArrowRight_1 = __importDefault(require("@mui/icons-material/KeyboardArrowRight"));
+// locals
+const ViewMenu_1 = __importDefault(require("./ViewMenu"));
+const ViewContainerTitle_1 = __importDefault(require("./ViewContainerTitle"));
+const util_1 = require("@jbrowse/core/util");
+const useStyles = (0, mui_1.makeStyles)()(theme => ({
+    icon: {
+        color: theme.palette.secondary.contrastText,
+    },
+    grow: {
+        flexGrow: 1,
+    },
+    viewHeader: {
+        display: 'flex',
+    },
+    viewTitle: {
+        display: 'flex',
+        alignItems: 'center',
+    },
+}));
+const ViewButtons = (0, mobx_react_1.observer)(function ({ view, onClose, onMinimize, }) {
+    const { classes } = useStyles();
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(material_1.IconButton, { "data-testid": "minimize_view", onClick: onMinimize }, view.minimized ? (react_1.default.createElement(Add_1.default, { className: classes.icon, fontSize: "small" })) : (react_1.default.createElement(Minimize_1.default, { className: classes.icon, fontSize: "small" }))),
+        react_1.default.createElement(material_1.IconButton, { "data-testid": "close_view", onClick: onClose },
+            react_1.default.createElement(Close_1.default, { className: classes.icon, fontSize: "small" }))));
+});
+const ViewHeader = (0, mobx_react_1.observer)(function ({ view, onClose, onMinimize, }) {
+    const { classes } = useStyles();
+    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("div", { ref: scrollRef, className: classes.viewHeader },
+        react_1.default.createElement(ViewMenu_1.default, { model: view, IconProps: { className: classes.icon } }),
+        react_1.default.createElement("div", { className: classes.grow }),
+        react_1.default.createElement("div", { className: classes.viewTitle },
+            session.focusedViewId === view.id ? (react_1.default.createElement(KeyboardArrowRight_1.default, { className: classes.icon, fontSize: "small" })) : null,
+            react_1.default.createElement(ViewContainerTitle_1.default, { view: view })),
+        react_1.default.createElement("div", { className: classes.grow }),
+        react_1.default.createElement(ViewButtons, { onClose: onClose, onMinimize: onMinimize, view: view })));
+});
+exports.default = ViewHeader;

package/esm/ui/App/ViewContainer.js

@@ -1,28 +1,16 @@
-import React, { useEffect, useRef } from 'react';
-import { IconButton, Paper, useTheme } from '@mui/material';
+import React, { useEffect } from 'react';
+import { Paper, useTheme } from '@mui/material';
 import { makeStyles } from 'tss-react/mui';
 import { observer } from 'mobx-react';
 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';
-import AddIcon from '@mui/icons-material/Add';
 // locals
-import ViewMenu from './ViewMenu';
-import ViewContainerTitle from './ViewContainerTitle';
+import ViewHeader from './ViewHeader';
 const useStyles = makeStyles()(theme => ({
     viewContainer: {
         overflow: 'hidden',
         margin: theme.spacing(0.5),
         padding: `0 ${theme.spacing(1)} ${theme.spacing(1)}`,
     },
-    icon: {
-        color: theme.palette.secondary.contrastText,
-    },
-    grow: {
-        flexGrow: 1,
-    },
     focusedView: {
         background: theme.palette.secondary.main,
     },
@@ -31,17 +19,10 @@ const useStyles = makeStyles()(theme => ({
     },
 }));
 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 { classes, cx } = useStyles();
     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' });
-    }, []);
     useEffect(() => {
         function handleSelectView(e) {
             if (e.target instanceof Element) {
@@ -57,17 +38,10 @@ const ViewContainer = observer(function ({ view, onClose, onMinimize, children,
             document.removeEventListener('keydown', handleSelectView);
         };
     }, [ref, session, view]);
-    return (React.createElement(Paper, { ref: ref, elevation: 12, className: clsx(classes.viewContainer, session.focusedViewId === view.id
+    return (React.createElement(Paper, { ref: ref, elevation: 12, className: cx(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 }),
-            React.createElement(ViewContainerTitle, { view: view }),
-            React.createElement("div", { className: classes.grow }),
-            React.createElement(IconButton, { "data-testid": "minimize_view", onClick: onMinimize }, view.minimized ? (React.createElement(AddIcon, { className: classes.icon, fontSize: "small" })) : (React.createElement(MinimizeIcon, { className: classes.icon, fontSize: "small" }))),
-            React.createElement(IconButton, { "data-testid": "close_view", onClick: onClose },
-                React.createElement(CloseIcon, { className: classes.icon, fontSize: "small" }))),
+        React.createElement(ViewHeader, { view: view, onClose: onClose, onMinimize: onMinimize }),
         React.createElement(Paper, null, children)));
 });
 export default ViewContainer;

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

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

package/esm/ui/App/ViewHeader.js

@@ -0,0 +1,55 @@
+import React, { useEffect, useRef } from 'react';
+import { IconButton } from '@mui/material';
+import { makeStyles } from 'tss-react/mui';
+import { observer } from 'mobx-react';
+// icons
+import CloseIcon from '@mui/icons-material/Close';
+import MinimizeIcon from '@mui/icons-material/Minimize';
+import AddIcon from '@mui/icons-material/Add';
+import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
+// locals
+import ViewMenu from './ViewMenu';
+import ViewContainerTitle from './ViewContainerTitle';
+import { getSession } from '@jbrowse/core/util';
+const useStyles = makeStyles()(theme => ({
+    icon: {
+        color: theme.palette.secondary.contrastText,
+    },
+    grow: {
+        flexGrow: 1,
+    },
+    viewHeader: {
+        display: 'flex',
+    },
+    viewTitle: {
+        display: 'flex',
+        alignItems: 'center',
+    },
+}));
+const ViewButtons = observer(function ({ view, onClose, onMinimize, }) {
+    const { classes } = useStyles();
+    return (React.createElement(React.Fragment, null,
+        React.createElement(IconButton, { "data-testid": "minimize_view", onClick: onMinimize }, view.minimized ? (React.createElement(AddIcon, { className: classes.icon, fontSize: "small" })) : (React.createElement(MinimizeIcon, { className: classes.icon, fontSize: "small" }))),
+        React.createElement(IconButton, { "data-testid": "close_view", onClick: onClose },
+            React.createElement(CloseIcon, { className: classes.icon, fontSize: "small" }))));
+});
+const ViewHeader = observer(function ({ view, onClose, onMinimize, }) {
+    const { classes } = useStyles();
+    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("div", { ref: scrollRef, className: classes.viewHeader },
+        React.createElement(ViewMenu, { model: view, IconProps: { className: classes.icon } }),
+        React.createElement("div", { className: classes.grow }),
+        React.createElement("div", { className: classes.viewTitle },
+            session.focusedViewId === view.id ? (React.createElement(KeyboardArrowRightIcon, { className: classes.icon, fontSize: "small" })) : null,
+            React.createElement(ViewContainerTitle, { view: view })),
+        React.createElement("div", { className: classes.grow }),
+        React.createElement(ViewButtons, { onClose: onClose, onMinimize: onMinimize, view: view })));
+});
+export default ViewHeader;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/app-core",
-  "version": "2.7.1",
+  "version": "2.8.0",
   "description": "JBrowse 2 code shared between the 'full featured' apps e.g. jbrowse-web and jbrowse-desktop",
   "keywords": [
     "jbrowse",
@@ -42,7 +42,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.16.3",
-    "@jbrowse/product-core": "^2.7.1",
+    "@jbrowse/product-core": "^2.8.0",
     "@mui/icons-material": "^5.0.0",
     "@mui/material": "^5.10.17",
     "clsx": "^2.0.0",
@@ -61,5 +61,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "2cda1611eebd12517f2a3cfc1b612face27005d4"
+  "gitHead": "ee8c2bdc8bd4f1a70b1eefda984f04a2830d9ca0"
 }