@jbrowse/core 2.3.4 → 2.4.0

package/ui/App.js

@@ -30,24 +30,20 @@ const react_1 = __importStar(require("react"));
 const material_1 = require("@mui/material");
 const mui_1 = require("tss-react/mui");
 const Launch_1 = __importDefault(require("@mui/icons-material/Launch"));
-const react_error_boundary_1 = require("react-error-boundary");
 const mobx_react_1 = require("mobx-react");
-// locals
-const util_1 = require("../util");
 // ui elements
 const DrawerWidget_1 = __importDefault(require("./DrawerWidget"));
 const AppToolbar_1 = __importDefault(require("./AppToolbar"));
-const ErrorMessage_1 = __importDefault(require("./ErrorMessage"));
-const LoadingEllipses_1 = __importDefault(require("./LoadingEllipses"));
 const Snackbar_1 = __importDefault(require("./Snackbar"));
-const ViewContainer_1 = __importDefault(require("./ViewContainer"));
 const ViewLauncher_1 = __importDefault(require("./ViewLauncher"));
+const ViewPanel_1 = __importDefault(require("./ViewPanel"));
 const useStyles = (0, mui_1.makeStyles)()(theme => ({
     root: {
         fontFamily: 'Roboto',
         display: 'grid',
         height: '100vh',
         width: '100%',
+        colorScheme: theme.palette.mode,
     },
     fabLeft: {
         zIndex: 10000,
@@ -78,17 +74,6 @@ const useStyles = (0, mui_1.makeStyles)()(theme => ({
         flexGrow: 1,
     },
 }));
-const ViewPanel = (0, mobx_react_1.observer)(function ({ view, session, }) {
-    const { pluginManager } = (0, util_1.getEnv)(session);
-    const viewType = pluginManager.getViewType(view.type);
-    if (!viewType) {
-        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), 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 })))) : (false)));
-});
 const App = (0, mobx_react_1.observer)(function (props) {
     const { session } = props;
     const { classes } = useStyles();
@@ -118,7 +103,7 @@ const App = (0, mobx_react_1.observer)(function (props) {
                 react_1.default.createElement(material_1.AppBar, { className: classes.appBar, position: "static" },
                     react_1.default.createElement(AppToolbar_1.default, { ...props }))),
             react_1.default.createElement("div", { className: classes.components },
-                views.length ? (views.map(view => (react_1.default.createElement(ViewPanel, { key: `view-${view.id}`, view: view, session: session })))) : (react_1.default.createElement(ViewLauncher_1.default, { ...props })),
+                views.length ? (views.map(view => (react_1.default.createElement(ViewPanel_1.default, { key: `view-${view.id}`, view: view, session: session })))) : (react_1.default.createElement(ViewLauncher_1.default, { ...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/LoadingEllipses.js

@@ -16,22 +16,22 @@ const useStyles = (0, mui_1.makeStyles)()({
             textAlign: 'left',
             animation: `${(0, tss_react_1.keyframes) `
       0% {
-        content: '';
+        content: '...';
       }
       25% {
-          content: '.';
+          content: '';
       }
       50% {
-        content: '..';
+        content: '.';
       }
       75% {
-        content: '...';
+        content: '..';
       }
-      `} 1.4s infinite ease-in-out`,
+      `} 1.2s infinite ease-in-out`,
         },
     },
 });
-function LoadingEllipses({ message = 'Loading', variant = 'body2', ...rest }) {
+function LoadingEllipses({ message, variant = 'body2', ...rest }) {
     const { classes } = useStyles();
     return (react_1.default.createElement(material_1.Typography, { className: classes.dots, ...rest, variant: variant }, `${message || 'Loading'}`));
 }

package/ui/Menu.js

@@ -74,7 +74,7 @@ function MenuItemEndDecoration(props) {
     }
     else if (type === 'checkbox') {
         if (checked) {
-            const color = disabled ? 'inherit' : 'secondary';
+            const color = disabled ? 'inherit' : undefined;
             icon = react_1.default.createElement(CheckBox_1.default, { color: color });
         }
         else {
@@ -83,7 +83,7 @@ function MenuItemEndDecoration(props) {
     }
     else if (type === 'radio') {
         if (checked) {
-            const color = disabled ? 'inherit' : 'secondary';
+            const color = disabled ? 'inherit' : undefined;
             icon = react_1.default.createElement(RadioButtonChecked_1.default, { color: color });
         }
         else {

package/ui/ResizeBar.js

@@ -31,9 +31,9 @@ const react_1 = __importStar(require("react"));
 const mui_1 = require("tss-react/mui");
 // locals
 const ResizeHandle_1 = __importDefault(require("./ResizeHandle"));
-const useStyles = (0, mui_1.makeStyles)()({
+const useStyles = (0, mui_1.makeStyles)()(theme => ({
     resizeBar: {
-        background: 'lightgrey',
+        background: theme.palette.action.disabledBackground,
         height: 12,
         position: 'relative',
         overflow: 'hidden',
@@ -42,16 +42,15 @@ const useStyles = (0, mui_1.makeStyles)()({
         position: 'absolute',
         height: '100%',
         pointerEvents: 'none',
-        background: 'black',
+        background: theme.palette.divider,
         width: 1,
     },
     hiddenTick: {
         position: 'absolute',
         height: '100%',
-        background: 'lightgrey',
         width: 5,
     },
-});
+}));
 function useResizeBar() {
     const ref = (0, react_1.useRef)(null);
     const [scrollLeft, setScrollLeft] = (0, react_1.useState)(0);

package/ui/SanitizedHTML.js

@@ -35,6 +35,8 @@ const htmlTags = [
     'strong',
     'table',
     'tbody',
+    'sup',
+    'sub',
     'td',
     'tfoot',
     'th',

package/ui/ViewContainer.js

@@ -36,13 +36,8 @@ const react_use_measure_1 = __importDefault(require("react-use-measure"));
 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 ViewMenu_1 = __importDefault(require("./ViewMenu"));
 const useStyles = (0, mui_1.makeStyles)()(theme => ({
     viewContainer: {
         overflow: 'hidden',
@@ -72,37 +67,7 @@ const useStyles = (0, mui_1.makeStyles)()(theme => ({
         backgroundColor: theme.palette.secondary.light,
     },
 }));
-const ViewMenu = (0, mobx_react_1.observer)(({ model, IconButtonProps, IconProps, }) => {
-    const [anchorEl, setAnchorEl] = (0, react_1.useState)();
-    const { menuItems } = model;
-    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: items })));
-});
-const ViewContainer = (0, mobx_react_1.observer)(({ view, onClose, onMinimize, style, children, }) => {
+const ViewContainer = (0, mobx_react_1.observer)(function ({ view, onClose, onMinimize, style, children, }) {
     var _a;
     const { classes } = useStyles();
     const theme = (0, material_1.useTheme)();
@@ -123,7 +88,7 @@ const ViewContainer = (0, mobx_react_1.observer)(({ view, onClose, onMinimize, s
     }, []);
     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, IconProps: { className: classes.icon } }),
+            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(material_1.Tooltip, { title: "Rename view", arrow: true },
                 react_1.default.createElement(EditableTypography_1.default, { value: (view.displayName ||

package/ui/ViewMenu.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { SvgIconProps, IconButtonProps as IconButtonPropsType } from '@mui/material';
+import { IBaseViewModel } from '../pluggableElementTypes/models';
+declare const ViewMenu: ({ model, IconButtonProps, IconProps, }: {
+    model: IBaseViewModel;
+    IconButtonProps?: IconButtonPropsType<"button", {}> | undefined;
+    IconProps: SvgIconProps;
+}) => JSX.Element;
+export default ViewMenu;

package/ui/ViewMenu.js

@@ -0,0 +1,69 @@
+"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 mobx_react_1 = require("mobx-react");
+// icons
+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 Menu_2 = __importDefault(require("./Menu"));
+const ViewMenu = (0, mobx_react_1.observer)(function ({ model, IconButtonProps, IconProps, }) {
+    const [anchorEl, setAnchorEl] = (0, react_1.useState)();
+    const { menuItems } = model;
+    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: items })));
+});
+exports.default = ViewMenu;

package/ui/ViewPanel.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import { AbstractViewModel, NotificationLevel, SessionWithDrawerWidgets, SnackAction } from '../util';
+import { MenuItem as JBMenuItem } from './Menu';
+type SnackbarMessage = [string, NotificationLevel, SnackAction];
+type AppSession = SessionWithDrawerWidgets & {
+    savedSessionNames: string[];
+    menus: {
+        label: string;
+        menuItems: JBMenuItem[];
+    }[];
+    renameCurrentSession: (arg: string) => void;
+    snackbarMessages: SnackbarMessage[];
+    popSnackbarMessage: () => unknown;
+};
+declare const ViewPanel: ({ view, session, }: {
+    view: AbstractViewModel;
+    session: AppSession;
+}) => JSX.Element;
+export default ViewPanel;

package/ui/ViewPanel.js

@@ -0,0 +1,49 @@
+"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 react_error_boundary_1 = require("react-error-boundary");
+const mobx_react_1 = require("mobx-react");
+// locals
+const util_1 = require("../util");
+// ui elements
+const ErrorMessage_1 = __importDefault(require("./ErrorMessage"));
+const LoadingEllipses_1 = __importDefault(require("./LoadingEllipses"));
+const ViewContainer_1 = __importDefault(require("./ViewContainer"));
+const ViewPanel = (0, mobx_react_1.observer)(function ({ view, session, }) {
+    const { pluginManager } = (0, util_1.getEnv)(session);
+    const viewType = pluginManager.getViewType(view.type);
+    if (!viewType) {
+        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), 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, { variant: "h6" }) },
+            react_1.default.createElement(ReactComponent, { model: view, session: session })))) : (false)));
+});
+exports.default = ViewPanel;

package/ui/theme.d.ts

@@ -1,9 +1,10 @@
 import { ThemeOptions } from '@mui/material/styles';
-import type { PaletteOptions } from '@mui/material/styles/createPalette';
 declare module '@mui/material/styles/createPalette' {
     interface Palette {
         tertiary: Palette['primary'];
         quaternary: Palette['primary'];
+        stopCodon?: string;
+        startCodon?: string;
         bases: {
             A: Palette['primary'];
             C: Palette['primary'];
@@ -14,6 +15,8 @@ declare module '@mui/material/styles/createPalette' {
     interface PaletteOptions {
         tertiary?: PaletteOptions['primary'];
         quaternary?: PaletteOptions['primary'];
+        stopCodon?: string;
+        startCodon?: string;
         bases?: {
             A?: PaletteOptions['primary'];
             C?: PaletteOptions['primary'];
@@ -22,169 +25,10 @@ declare module '@mui/material/styles/createPalette' {
         };
     }
 }
-export declare const jbrowseDefaultPalette: {
-    primary: {
-        main: string;
-    };
-    secondary: {
-        main: string;
-    };
-    tertiary: import("@mui/material/styles").PaletteColor;
-    quaternary: import("@mui/material/styles").PaletteColor;
-    stopCodon: string;
-    startCodon: string;
-    bases: {
-        A: import("@mui/material/styles").PaletteColor;
-        C: import("@mui/material/styles").PaletteColor;
-        G: import("@mui/material/styles").PaletteColor;
-        T: import("@mui/material/styles").PaletteColor;
-    };
+export declare const defaultThemes: ThemeMap;
+export declare function createJBrowseBaseTheme(theme?: ThemeOptions): ThemeOptions;
+type ThemeMap = {
+    [key: string]: ThemeOptions;
 };
-export declare function createJBrowseDefaultProps(): {
-    components: {
-        MuiButton: {
-            defaultProps: {
-                size: "small";
-            };
-        };
-        MuiAccordion: {
-            defaultProps: {
-                disableGutters: boolean;
-                TransitionProps: {
-                    timeout: number;
-                };
-            };
-        };
-        MuiFilledInput: {
-            defaultProps: {
-                margin: "dense";
-            };
-        };
-        MuiFormControl: {
-            defaultProps: {
-                margin: "dense";
-                size: "small";
-            };
-        };
-        MuiFormHelperText: {
-            defaultProps: {
-                margin: "dense";
-            };
-        };
-        MuiIconButton: {
-            defaultProps: {
-                size: "small";
-            };
-        };
-        MuiInputBase: {
-            defaultProps: {
-                margin: "dense";
-            };
-        };
-        MuiAutocomplete: {
-            defaultProps: {
-                size: "small";
-            };
-        };
-        MuiInputLabel: {
-            defaultProps: {
-                margin: "dense";
-            };
-        };
-        MuiToolbar: {
-            defaultProps: {
-                variant: "dense";
-            };
-        };
-        MuiListItem: {
-            defaultProps: {
-                dense: boolean;
-            };
-        };
-        MuiOutlinedInput: {
-            defaultProps: {
-                margin: "dense";
-            };
-        };
-        MuiFab: {
-            defaultProps: {
-                size: "small";
-            };
-        };
-        MuiTable: {
-            defaultProps: {
-                size: "small";
-            };
-        };
-        MuiPopover: {
-            defaultProps: {
-                transitionDuration: number;
-            };
-        };
-        MuiMenu: {
-            defaultProps: {
-                transitionDuration: number;
-            };
-        };
-        MuiMenuList: {
-            defaultProps: {
-                dense: boolean;
-            };
-        };
-        MuiMenuItem: {
-            defaultProps: {
-                dense: boolean;
-            };
-        };
-        MuiTextField: {
-            defaultProps: {
-                margin: "dense";
-                variant: "standard";
-            };
-        };
-    };
-};
-export declare function createJBrowseDefaultOverrides(palette?: PaletteOptions): {
-    components: {
-        MuiIconButton: {
-            styleOverrides: {
-                colorSecondary: {
-                    color: string;
-                };
-            };
-        };
-        MuiButton: {
-            styleOverrides: {
-                textSecondary: {
-                    color: string;
-                };
-            };
-        };
-        MuiFab: {
-            styleOverrides: {
-                secondary: {
-                    backgroundColor: string;
-                };
-            };
-        };
-        MuiLink: {
-            styleOverrides: {
-                root: {
-                    color: string;
-                };
-            };
-        };
-        MuiAccordionSummary: {
-            styleOverrides: {
-                root: {
-                    backgroundColor: string;
-                };
-                content: {
-                    color: string;
-                };
-            };
-        };
-    };
-};
-export declare function createJBrowseBaseTheme(palette?: PaletteOptions): ThemeOptions;
-export declare function createJBrowseTheme(theme?: ThemeOptions): import("@mui/material/styles").Theme;
+export declare function createJBrowseTheme(configTheme?: ThemeOptions, themes?: ThemeMap, themeName?: string): import("@mui/material/styles").Theme;
+export {};