@jbrowse/core 2.2.0 → 2.2.1

package/ui/App.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { NotificationLevel, SessionWithDrawerWidgets, SnackAction } from '../util';
-import { MenuItem as JBMenuItem } from './index';
-declare type SnackbarMessage = [string, NotificationLevel, SnackAction];
+import { MenuItem as JBMenuItem } from './Menu';
+type SnackbarMessage = [string, NotificationLevel, SnackAction];
 declare const App: (props: {
     HeaderButtons?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
     session: SessionWithDrawerWidgets & {

package/ui/App.js

@@ -35,14 +35,15 @@ const mobx_react_1 = require("mobx-react");
 const mobx_state_tree_1 = require("mobx-state-tree");
 // locals
 const configuration_1 = require("../configuration");
+// ui elements
 const DrawerWidget_1 = __importDefault(require("./DrawerWidget"));
 const DropDownMenu_1 = __importDefault(require("./DropDownMenu"));
 const ErrorMessage_1 = __importDefault(require("./ErrorMessage"));
 const LoadingEllipses_1 = __importDefault(require("./LoadingEllipses"));
 const EditableTypography_1 = __importDefault(require("./EditableTypography"));
-const Logo_1 = require("./Logo");
 const Snackbar_1 = __importDefault(require("./Snackbar"));
 const ViewContainer_1 = __importDefault(require("./ViewContainer"));
+const Logo_1 = require("./Logo");
 const useStyles = (0, mui_1.makeStyles)()(theme => ({
     root: {
         fontFamily: 'Roboto',
@@ -143,9 +144,7 @@ const ViewLauncher = (0, mobx_react_1.observer)(({ session }) => {
         react_1.default.createElement(material_1.FormControl, { style: { margin: 2 } },
             react_1.default.createElement(material_1.Select, { value: value, onChange: event => setValue(event.target.value) }, viewTypes.map(({ name }) => (react_1.default.createElement(material_1.MenuItem, { key: name, value: name }, name))))),
         react_1.default.createElement(material_1.FormControl, { style: { margin: 2 } },
-            react_1.default.createElement(material_1.Button, { onClick: () => {
-                    session.addView(value, {});
-                }, variant: "contained", color: "primary" }, "Launch view"))));
+            react_1.default.createElement(material_1.Button, { onClick: () => session.addView(value, {}), variant: "contained", color: "primary" }, "Launch view"))));
 });
 const ViewPanel = (0, mobx_react_1.observer)(({ view, session }) => {
     const { pluginManager } = (0, mobx_state_tree_1.getEnv)(session);
@@ -154,9 +153,9 @@ const ViewPanel = (0, mobx_react_1.observer)(({ view, session }) => {
         throw new Error(`unknown view type ${view.type}`);
     }
     const { ReactComponent } = viewType;
-    return (react_1.default.createElement(ViewContainer_1.default, { view: view, onClose: () => session.removeView(view) },
+    return (react_1.default.createElement(ViewContainer_1.default, { view: view, onClose: () => session.removeView(view), onMinimize: () => view.setMinimized(!view.minimized) }, !view.minimized ? (react_1.default.createElement(react_error_boundary_1.ErrorBoundary, { FallbackComponent: ({ error }) => react_1.default.createElement(ErrorMessage_1.default, { error: error }) },
         react_1.default.createElement(react_1.Suspense, { fallback: react_1.default.createElement(LoadingEllipses_1.default, null) },
-            react_1.default.createElement(ReactComponent, { model: view, session: session, getTrackType: pluginManager.getTrackType }))));
+            react_1.default.createElement(ReactComponent, { model: view, session: session, getTrackType: pluginManager.getTrackType })))) : (false)));
 });
 const App = (0, mobx_react_1.observer)((props) => {
     const { session } = props;
@@ -187,8 +186,7 @@ const App = (0, mobx_react_1.observer)((props) => {
                 react_1.default.createElement(material_1.AppBar, { className: classes.appBar, position: "static" },
                     react_1.default.createElement(AppToolbar, { ...props }))),
             react_1.default.createElement("div", { className: classes.components },
-                views.length ? (views.map(view => (react_1.default.createElement(react_error_boundary_1.ErrorBoundary, { key: `view-${view.id}`, FallbackComponent: ({ error }) => (react_1.default.createElement(ErrorMessage_1.default, { error: error })) },
-                    react_1.default.createElement(ViewPanel, { view: view, session: session }))))) : (react_1.default.createElement(ViewLauncher, { ...props })),
+                views.length ? (views.map(view => (react_1.default.createElement(ViewPanel, { key: `view-${view.id}`, view: view, session: session })))) : (react_1.default.createElement(ViewLauncher, { ...props })),
                 react_1.default.createElement("div", { style: { height: 300 } }))),
         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.fabRight : classes.fabLeft, color: "primary", "data-testid": "drawer-maximize", onClick: () => session.showWidgetDrawer() },

package/ui/AssemblySelector.d.ts

@@ -4,7 +4,7 @@ import { AbstractSessionModel } from '../util';
 declare const AssemblySelector: ({ session, onChange, selected, InputProps, extra, }: {
     session: AbstractSessionModel;
     onChange: (arg: string) => void;
-    selected: string | undefined;
+    selected?: string | undefined;
     InputProps?: IIP | undefined;
     extra?: unknown;
 }) => JSX.Element;

package/ui/AssemblySelector.js

@@ -24,28 +24,30 @@ 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");
 const material_1 = require("@mui/material");
-const util_1 = require("@jbrowse/core/util");
+const mobx_react_1 = require("mobx-react");
 const mui_1 = require("tss-react/mui");
 // locals
 const configuration_1 = require("../configuration");
-const useStyles = (0, mui_1.makeStyles)()(() => ({
+const util_1 = require("../util");
+const useStyles = (0, mui_1.makeStyles)()({
     importFormEntry: {
         minWidth: 180,
     },
-}));
+});
 const AssemblySelector = (0, mobx_react_1.observer)(({ session, onChange, selected, InputProps, extra = 0, }) => {
     const { classes } = useStyles();
     const { assemblyNames, assemblyManager } = session;
     // constructs a localstorage key based on host/path/config to help
     // remember. non-config assists usage with e.g. embedded apps
     const config = new URLSearchParams(window.location.search).get('config');
-    const [lastSelected, setLastSelected] = (0, util_1.useLocalStorage)(`lastAssembly-${[
-        window.location.host + window.location.pathname,
-        config,
-        extra,
-    ].join('-')}`, selected);
+    const [lastSelected, setLastSelected] = typeof jest === 'undefined'
+        ? (0, util_1.useLocalStorage)(`lastAssembly-${[
+            window.location.host + window.location.pathname,
+            config,
+            extra,
+        ].join('-')}`, selected)
+        : (0, react_1.useState)(selected);
     const selection = assemblyNames.includes(lastSelected || '')
         ? lastSelected
         : selected;
@@ -55,7 +57,7 @@ const AssemblySelector = (0, mobx_react_1.observer)(({ session, onChange, select
         }
     }, [selection, onChange, selected]);
     const error = assemblyNames.length ? '' : 'No configured assemblies';
-    return (react_1.default.createElement(material_1.TextField, { select: true, label: "Assembly", variant: "outlined", helperText: error || 'Select assembly to view', value: selection, inputProps: { 'data-testid': 'assembly-selector' }, onChange: event => setLastSelected(event.target.value), error: !!error, InputProps: InputProps, disabled: !!error, className: classes.importFormEntry }, assemblyNames.map(name => {
+    return (react_1.default.createElement(material_1.TextField, { select: true, label: "Assembly", variant: "outlined", helperText: error || 'Select assembly to view', value: selection || '', inputProps: { 'data-testid': 'assembly-selector' }, onChange: event => setLastSelected(event.target.value), error: !!error, InputProps: InputProps, disabled: !!error, className: classes.importFormEntry }, assemblyNames.map(name => {
         const assembly = assemblyManager.get(name);
         const displayName = assembly ? (0, configuration_1.getConf)(assembly, 'displayName') : '';
         return (react_1.default.createElement(material_1.MenuItem, { key: name, value: name }, displayName || name));

package/ui/EditableTypography.d.ts

@@ -1,12 +1,12 @@
 import React from 'react';
 import { TypographyProps } from '@mui/material';
-declare type Variant = TypographyProps['variant'];
-declare type EditableTypographyClassKey = 'input' | 'inputBase' | 'inputRoot' | 'inputFocused';
-interface EditableTypographyPropTypes {
+type Variant = TypographyProps['variant'];
+type EditableTypographyClassKey = 'input' | 'inputBase' | 'inputRoot' | 'inputFocused';
+interface Props {
     value: string;
     setValue: (value: string) => void;
     variant: Variant;
     classes?: Partial<Record<EditableTypographyClassKey, string>>;
 }
-declare const EditableTypography: React.ForwardRefExoticComponent<EditableTypographyPropTypes & React.RefAttributes<HTMLDivElement>>;
+declare const EditableTypography: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
 export default EditableTypography;

package/ui/EditableTypography.js

@@ -48,13 +48,12 @@ const useStyles = (0, mui_1.makeStyles)()(theme => ({
 const EditableTypography = react_1.default.forwardRef((props, ref) => {
     const { value, setValue, variant, ...other } = props;
     const [editedValue, setEditedValue] = (0, react_1.useState)();
-    const [width, setWidth] = (0, react_1.useState)(0);
     const [sizerNode, setSizerNode] = (0, react_1.useState)(null);
     const [inputNode, setInputNode] = (0, react_1.useState)(null);
     const [blur, setBlur] = (0, react_1.useState)(false);
     (0, react_1.useEffect)(() => {
         if (blur) {
-            inputNode && inputNode.blur();
+            inputNode === null || inputNode === void 0 ? void 0 : inputNode.blur();
             setBlur(false);
         }
     }, [blur, inputNode]);
@@ -64,12 +63,11 @@ const EditableTypography = react_1.default.forwardRef((props, ref) => {
     const { classes } = useStyles(props, { props });
     const theme = (0, material_1.useTheme)();
     const clientWidth = sizerNode === null || sizerNode === void 0 ? void 0 : sizerNode.clientWidth;
-    if (clientWidth && clientWidth !== width) {
-        setWidth(clientWidth);
-    }
+    const width = clientWidth || 0;
+    const val = editedValue === undefined ? value : editedValue;
     return (react_1.default.createElement("div", { ...other, ref: ref },
         react_1.default.createElement("div", { style: { position: 'relative' } },
-            react_1.default.createElement(material_1.Typography, { ref: (node) => setSizerNode(node), component: "span", variant: variant, className: classes.typography }, editedValue === undefined ? value : editedValue)),
+            react_1.default.createElement(material_1.Typography, { ref: (node) => setSizerNode(node), component: "span", variant: variant, className: classes.typography }, val)),
         react_1.default.createElement(material_1.InputBase, { inputRef: node => setInputNode(node), className: classes.inputBase, inputProps: {
                 style: {
                     width,
@@ -81,18 +79,16 @@ const EditableTypography = react_1.default.forwardRef((props, ref) => {
                 input: classes.input,
                 root: classes.inputRoot,
                 focused: classes.inputFocused,
-            }, value: editedValue === undefined ? value : editedValue, onChange: event => setEditedValue(event.target.value), onKeyDown: event => {
+            }, value: val, onChange: event => setEditedValue(event.target.value), onKeyDown: event => {
                 if (event.key === 'Enter') {
-                    inputNode && inputNode.blur();
+                    inputNode === null || inputNode === void 0 ? void 0 : inputNode.blur();
                 }
                 else if (event.key === 'Escape') {
                     setEditedValue(undefined);
                     setBlur(true);
                 }
             }, onBlur: () => {
-                if (editedValue && editedValue !== value) {
-                    setValue(editedValue);
-                }
+                setValue(editedValue || '');
                 setEditedValue(undefined);
             } })));
 });

package/ui/Logo.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-declare type LogoVariant = 'color' | 'black' | 'white';
+type LogoVariant = 'color' | 'black' | 'white';
 interface LogoProps {
     variant?: LogoVariant;
 }

package/ui/Menu.d.ts

@@ -8,7 +8,7 @@ interface MenuItemEndDecorationSelectorProps {
     checked: boolean;
     disabled?: boolean;
 }
-declare type MenuItemEndDecorationProps = MenuItemEndDecorationSubMenuProps | MenuItemEndDecorationSelectorProps;
+type MenuItemEndDecorationProps = MenuItemEndDecorationSubMenuProps | MenuItemEndDecorationSelectorProps;
 export declare function MenuItemEndDecoration(props: MenuItemEndDecorationProps): JSX.Element;
 export interface MenuDivider {
     priority?: number;
@@ -44,7 +44,7 @@ export interface SubMenuItem extends BaseMenuItem {
     type?: 'subMenu';
     subMenu: MenuItem[];
 }
-export declare type MenuItem = MenuDivider | MenuSubHeader | NormalMenuItem | CheckboxMenuItem | RadioMenuItem | SubMenuItem;
+export type MenuItem = MenuDivider | MenuSubHeader | NormalMenuItem | CheckboxMenuItem | RadioMenuItem | SubMenuItem;
 interface MenuProps extends PopoverProps {
     menuItems: MenuItem[];
     onMenuItemClick: (event: React.MouseEvent<HTMLLIElement, MouseEvent>, callback: Function) => void;

package/ui/Snackbar.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { IAnyStateTreeNode } from 'mobx-state-tree';
 import { AbstractSessionModel, NotificationLevel, SnackAction } from '../util';
-declare type SnackbarMessage = [string, NotificationLevel, SnackAction];
+type SnackbarMessage = [string, NotificationLevel, SnackAction];
 interface SnackbarSession extends AbstractSessionModel {
     snackbarMessages: SnackbarMessage[];
     popSnackbarMessage: () => unknown;

package/ui/ViewContainer.d.ts

@@ -1,8 +1,9 @@
 import React from 'react';
 import { IBaseViewModel } from '../pluggableElementTypes/models';
-declare const ViewContainer: ({ view, onClose, style, children, }: {
+declare const ViewContainer: ({ view, onClose, onMinimize, style, children, }: {
     view: IBaseViewModel;
     onClose: () => void;
+    onMinimize: () => void;
     style?: React.CSSProperties | undefined;
     children: React.ReactNode;
 }) => JSX.Element;

package/ui/ViewContainer.js

@@ -29,13 +29,18 @@ 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 styles_1 = require("@mui/material/styles");
 const mobx_react_1 = require("mobx-react");
 const mobx_state_tree_1 = require("mobx-state-tree");
 const react_use_measure_1 = __importDefault(require("react-use-measure"));
 // 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 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"));
+// locals
+const util_1 = require("../util");
 const EditableTypography_1 = __importDefault(require("./EditableTypography"));
 const Menu_2 = __importDefault(require("./Menu"));
 const useStyles = (0, mui_1.makeStyles)()(theme => ({
@@ -50,14 +55,6 @@ const useStyles = (0, mui_1.makeStyles)()(theme => ({
     grow: {
         flexGrow: 1,
     },
-    iconRoot: {
-        '&:hover': {
-            backgroundColor: (0, styles_1.alpha)(theme.palette.secondary.contrastText, theme.palette.action.hoverOpacity),
-            '@media (hover: none)': {
-                backgroundColor: 'transparent',
-            },
-        },
-    },
     input: {
         paddingBottom: 0,
         paddingTop: 2,
@@ -78,17 +75,34 @@ const useStyles = (0, mui_1.makeStyles)()(theme => ({
 const ViewMenu = (0, mobx_react_1.observer)(({ model, IconButtonProps, IconProps, }) => {
     const [anchorEl, setAnchorEl] = (0, react_1.useState)();
     const { menuItems } = model;
-    // <=1.3.3 didn't use a function
-    const items = typeof menuItems === 'function' ? menuItems() : menuItems;
-    return (items === null || items === void 0 ? void 0 : items.length) ? (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(material_1.IconButton, { ...IconButtonProps, style: { padding: 3 }, onClick: event => setAnchorEl(event.currentTarget), "data-testid": "view_menu_icon", size: "small" },
+    const session = (0, util_1.getSession)(model);
+    const items = [
+        ...(session.views.length > 1
+            ? [
+                {
+                    label: 'Move view up',
+                    icon: ArrowUpward_1.default,
+                    onClick: () => session.moveViewUp(model.id),
+                },
+                {
+                    label: 'Move view down',
+                    icon: ArrowDownward_1.default,
+                    onClick: () => session.moveViewDown(model.id),
+                },
+            ]
+            : []),
+        // <=1.3.3 didn't use a function, so check as value also
+        ...((typeof menuItems === 'function' ? menuItems() : menuItems) || []),
+    ];
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(material_1.IconButton, { ...IconButtonProps, onClick: event => setAnchorEl(event.currentTarget), "data-testid": "view_menu_icon" },
             react_1.default.createElement(Menu_1.default, { ...IconProps, fontSize: "small" })),
         react_1.default.createElement(Menu_2.default, { anchorEl: anchorEl, open: Boolean(anchorEl), onMenuItemClick: (_event, callback) => {
                 callback();
                 setAnchorEl(undefined);
-            }, onClose: () => setAnchorEl(undefined), menuItems: model.menuItems() }))) : null;
+            }, onClose: () => setAnchorEl(undefined), menuItems: items })));
 });
-const ViewContainer = (0, mobx_react_1.observer)(({ view, onClose, style, children, }) => {
+const ViewContainer = (0, mobx_react_1.observer)(({ view, onClose, onMinimize, style, children, }) => {
     var _a;
     const { classes } = useStyles();
     const theme = (0, material_1.useTheme)();
@@ -109,24 +123,22 @@ const ViewContainer = (0, mobx_react_1.observer)(({ view, onClose, style, childr
     }, []);
     return (react_1.default.createElement(material_1.Paper, { ref: ref, elevation: 12, className: classes.viewContainer, style: { ...style, padding: `0px ${padWidth} ${padWidth}` } },
         react_1.default.createElement("div", { ref: scrollRef, style: { display: 'flex' } },
-            react_1.default.createElement(ViewMenu, { model: view, IconButtonProps: {
-                    classes: { root: classes.iconRoot },
-                    edge: 'start',
-                }, IconProps: { className: classes.icon } }),
+            react_1.default.createElement(ViewMenu, { model: view, IconProps: { className: classes.icon } }),
             react_1.default.createElement("div", { className: classes.grow }),
             react_1.default.createElement(material_1.Tooltip, { title: "Rename view", arrow: true },
-                react_1.default.createElement(EditableTypography_1.default, { value: view.displayName ||
+                react_1.default.createElement(EditableTypography_1.default, { value: (view.displayName ||
                         (
                         // @ts-ignore
                         (_a = view.assemblyNames) === null || _a === void 0 ? void 0 : _a.join(',')) ||
-                        'Untitled view', setValue: val => view.setDisplayName(val), variant: "body2", classes: {
+                        'Untitled view') + (view.minimized ? ' (minimized)' : ''), setValue: val => view.setDisplayName(val), variant: "body2", classes: {
                         input: classes.input,
                         inputBase: classes.inputBase,
                         inputRoot: classes.inputRoot,
                         inputFocused: classes.inputFocused,
                     } })),
             react_1.default.createElement("div", { className: classes.grow }),
-            react_1.default.createElement(material_1.IconButton, { "data-testid": "close_view", classes: { root: classes.iconRoot }, edge: "end", size: "small", onClick: onClose },
+            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(material_1.Paper, null, children)));
 });

package/util/Base1DViewModel.d.ts

@@ -22,21 +22,60 @@ declare const Base1DView: import("mobx-state-tree").IModelType<{
     features: Feature[] | undefined;
     volatileWidth: number;
 } & {
+    /**
+     * #action
+     */
     setDisplayedRegions(regions: IRegion[]): void;
+    /**
+     * #action
+     */
     setBpPerPx(val: number): void;
+    /**
+     * #action
+     */
     setVolatileWidth(width: number): void;
 } & {
+    /**
+     * #getter
+     */
     readonly width: number;
+    /**
+     * #getter
+     */
     readonly assemblyNames: string[];
+    /**
+     * #getter
+     */
     readonly displayedRegionsTotalPx: number;
+    /**
+     * #getter
+     */
     readonly maxOffset: number;
+    /**
+     * #getter
+     */
     readonly minOffset: number;
+    /**
+     * #getter
+     */
     readonly totalBp: number;
 } & {
+    /**
+     * #getter
+     */
     readonly dynamicBlocks: import("./blockTypes").BlockSet;
+    /**
+     * #getter
+     */
     readonly staticBlocks: import("./blockTypes").BlockSet;
+    /**
+     * #getter
+     */
     readonly currBp: number;
 } & {
+    /**
+     * #method
+     */
     pxToBp(px: number): {
         coord: number;
         index: number;
@@ -48,22 +87,53 @@ declare const Base1DView: import("mobx-state-tree").IModelType<{
         end: number;
         reversed: boolean;
     };
+    /**
+     * #method
+     */
     bpToPx({ refName, coord, regionNumber, }: {
         refName: string;
         coord: number;
         regionNumber?: number | undefined;
     }): number | undefined;
 } & {
+    /**
+     * #action
+     */
     setFeatures(features: Feature[]): void;
+    /**
+     * #action
+     * this makes a zoomed out view that shows all displayedRegions that makes
+     * the overview bar square with the scale bar
+     */
     showAllRegions(): void;
+    /**
+     * #action
+     */
     zoomOut(): void;
+    /**
+     * #action
+     */
     zoomIn(): void;
+    /**
+     * #action
+     */
     zoomTo(newBpPerPx: number, offset?: number): number;
+    /**
+     * #action
+     */
     scrollTo(offsetPx: number): number;
+    /**
+     * #action
+     */
     centerAt(coord: number, refName: string | undefined, regionNumber: number): void;
+    /**
+     * #action
+     * note: the scroll is clamped to keep the view on the main screen
+     */
     scroll(distance: number): number;
 } & {
     /**
+     * #action
      * offset is the base-pair-offset in the displayed region, index is the index of the
      * displayed region in the linear genome view
      *
@@ -72,6 +142,6 @@ declare const Base1DView: import("mobx-state-tree").IModelType<{
      */
     moveTo(start?: BpOffset, end?: BpOffset): void;
 }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>;
-export declare type Base1DViewStateModel = typeof Base1DView;
-export declare type Base1DViewModel = Instance<Base1DViewStateModel>;
+export type Base1DViewStateModel = typeof Base1DView;
+export type Base1DViewModel = Instance<Base1DViewStateModel>;
 export default Base1DView;