@jbrowse/core 3.7.0 → 4.0.1

package/ui/HoverMenu.js

@@ -1,50 +0,0 @@
-"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 () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const React = __importStar(require("react"));
-const material_1 = require("@mui/material");
-const HoverMenu = React.forwardRef(function HoverMenu(props, ref) {
-    return ((0, jsx_runtime_1.jsx)(material_1.Menu, { ...props, ref: ref, style: {
-            pointerEvents: 'none',
-            ...props.style,
-        }, slotProps: {
-            ...props.slotProps,
-            paper: {
-                style: { pointerEvents: 'auto' },
-            },
-        } }));
-});
-exports.default = HoverMenu;

package/ui/Icons.js

@@ -1,23 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Indexing = Indexing;
-exports.TrackSelector = TrackSelector;
-exports.DNA = DNA;
-exports.Cable = Cable;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const SvgIcon_1 = __importDefault(require("@mui/material/SvgIcon"));
-function Indexing(props) {
-    return ((0, jsx_runtime_1.jsx)(SvgIcon_1.default, { ...props, children: (0, jsx_runtime_1.jsx)("path", { d: "M19.31 18.9L22.39 22L21 23.39L17.88 20.32C17.19 20.75 16.37 21 15.5 21C13 21 11 19 11 16.5C11 14 13 12 15.5 12C18 12 20 14 20 16.5C20 17.38 19.75 18.21 19.31 18.9M15.5 19C16.88 19 18 17.88 18 16.5C18 15.12 16.88 14 15.5 14C14.12 14 13 15.12 13 16.5C13 17.88 14.12 19 15.5 19M21 4V6H3V4H21M3 16V14H9V16H3M3 11V9H21V11H18.97C17.96 10.37 16.77 10 15.5 10C14.23 10 13.04 10.37 12.03 11H3Z" }) }));
-}
-function TrackSelector(props) {
-    return ((0, jsx_runtime_1.jsx)(SvgIcon_1.default, { ...props, children: (0, jsx_runtime_1.jsx)("path", { d: "M21 19v-2H8v2h13m0-6v-2H8v2h13M8 7h13V5H8v2M4 5v2h2V5H4M3 5a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V5m1 6v2h2v-2H4m-1 0a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1v-2m1 6v2h2v-2H4m-1 0a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1v-2z" }) }));
-}
-function DNA(props) {
-    return ((0, jsx_runtime_1.jsx)(SvgIcon_1.default, { ...props, children: (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M4,2H6V4C6,5.44 6.68,6.61 7.88,7.78C8.74,8.61 9.89,9.41 11.09,10.2L9.26,11.39C8.27,10.72 7.31,10 6.5,9.21C5.07,7.82 4,6.1 4,4V2M18,2H20V4C20,6.1 18.93,7.82 17.5,9.21C16.09,10.59 14.29,11.73 12.54,12.84C10.79,13.96 9.09,15.05 7.88,16.22C6.68,17.39 6,18.56 6,20V22H4V20C4,17.9 5.07,16.18 6.5,14.79C7.91,13.41 9.71,12.27 11.46,11.16C13.21,10.04 14.91,8.95 16.12,7.78C17.32,6.61 18,5.44 18,4V2M14.74,12.61C15.73,13.28 16.69,14 17.5,14.79C18.93,16.18 20,17.9 20,20V22H18V20C18,18.56 17.32,17.39 16.12,16.22C15.26,15.39 14.11,14.59 12.91,13.8L14.74,12.61M7,3H17V4L16.94,4.5H7.06L7,4V3M7.68,6H16.32C16.08,6.34 15.8,6.69 15.42,7.06L14.91,7.5H9.07L8.58,7.06C8.2,6.69 7.92,6.34 7.68,6M9.09,16.5H14.93L15.42,16.94C15.8,17.31 16.08,17.66 16.32,18H7.68C7.92,17.66 8.2,17.31 8.58,16.94L9.09,16.5M7.06,19.5H16.94L17,20V21H7V20L7.06,19.5Z" }) }));
-}
-function Cable(props) {
-    return ((0, jsx_runtime_1.jsx)(SvgIcon_1.default, { ...props, children: (0, jsx_runtime_1.jsx)("path", { d: "M20 5V4c0-.55-.45-1-1-1h-2c-.55 0-1 .45-1 1v1h-1v4c0 .55.45 1 1 1h1v7c0 1.1-.9 2-2 2s-2-.9-2-2V7c0-2.21-1.79-4-4-4S5 4.79 5 7v7H4c-.55 0-1 .45-1 1v4h1v1c0 .55.45 1 1 1h2c.55 0 1-.45 1-1v-1h1v-4c0-.55-.45-1-1-1H7V7c0-1.1.9-2 2-2s2 .9 2 2v10c0 2.21 1.79 4 4 4s4-1.79 4-4v-7h1c.55 0 1-.45 1-1V5h-1z" }) }));
-}

package/ui/LoadingEllipses.js

@@ -1,35 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = LoadingEllipses;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const material_1 = require("@mui/material");
-const tss_react_1 = require("tss-react");
-const mui_1 = require("tss-react/mui");
-const useStyles = (0, mui_1.makeStyles)()({
-    dots: {
-        '&::after': {
-            display: 'inline-block',
-            content: '""',
-            width: '1em',
-            textAlign: 'left',
-            animation: `${(0, tss_react_1.keyframes) `
-      0% {
-        content: '';
-      }
-      25% {
-          content: '.';
-      }
-      50% {
-        content: '..';
-      }
-      75% {
-        content: '...';
-      }
-      `} 1.2s infinite ease-in-out`,
-        },
-    },
-});
-function LoadingEllipses({ message, children, variant = 'body2', ...rest }) {
-    const { cx, classes } = useStyles();
-    return ((0, jsx_runtime_1.jsx)(material_1.Typography, { className: cx(classes.dots, rest.className), ...rest, variant: variant, children: message || 'Loading' }));
-}

package/ui/Logo.js

@@ -1,46 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Logomark = Logomark;
-exports.LogoFull = LogoFull;
-const jsx_runtime_1 = require("react/jsx-runtime");
-function getColors(variant) {
-    if (variant === 'black') {
-        return {
-            midnight: '#808080',
-            forrest: '#666666',
-            grape: '#4d4d4d',
-            mandarin: '#333333',
-            gray: '#1a1a1a',
-        };
-    }
-    if (variant === 'white') {
-        return {
-            midnight: '#ffffff',
-            forrest: '#e6e6e6',
-            grape: '#cccccc',
-            mandarin: '#b3b3b3',
-            gray: '#999999',
-        };
-    }
-    return {
-        midnight: '#0d233f',
-        forrest: '#135560',
-        grape: '#721e63',
-        mandarin: '#ffb11d',
-        gray: '#dadada',
-    };
-}
-function Logomark({ variant }) {
-    return ((0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 175 175", children: (0, jsx_runtime_1.jsx)(Icon, { variant: variant }) }));
-}
-function LogoFull({ variant }) {
-    return ((0, jsx_runtime_1.jsxs)("svg", { viewBox: "0 0 641 175", children: [(0, jsx_runtime_1.jsx)(Text, { variant: variant }), (0, jsx_runtime_1.jsx)(Icon, { variant: variant })] }));
-}
-function Icon({ variant }) {
-    const colors = getColors(variant);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("path", { style: { fill: colors.midnight }, d: "M120.5,57.5c.168,0,.333.012.5.013V40.506c-.167,0-.333-.006-.5-.006a98.325,98.325,0,0,0-77.4,37.565q-2.664,3.378-5.023,6.994l14.206,9.327Q54.043,91.709,56,89.179A81.363,81.363,0,0,1,120.5,57.5Z" }), (0, jsx_runtime_1.jsx)("path", { style: { fill: colors.forrest }, d: "M148.668,86.223c.308.133.6.283.908.42l6.746-15.618c-.153-.067-.3-.143-.454-.21a81.36,81.36,0,0,0-71.777,3.5q-2.8,1.544-5.469,3.309l9.249,14.054A63.93,63.93,0,0,1,148.668,86.223Z" }), (0, jsx_runtime_1.jsx)("path", { style: { fill: colors.grape }, d: "M170.894,109.37A63.929,63.929,0,0,0,113.4,88.861l2.336,15.474a48.456,48.456,0,0,1,44.322,15.42c.111.125.214.255.324.381l11.16-10C171.323,109.879,171.118,109.62,170.894,109.37Z" }), (0, jsx_runtime_1.jsx)("path", { style: { fill: colors.mandarin }, d: "M150.921,150.314c.04.163.07.326.107.489l16.509-4.058c-.039-.163-.067-.326-.107-.489A48.457,48.457,0,0,0,135.575,111.8l-5.515,15.591A32.466,32.466,0,0,1,150.921,150.314Z" }), (0, jsx_runtime_1.jsx)("path", { style: { fill: colors.gray }, d: "M134.1,138.129l-9.779,13.213a32.486,32.486,0,0,1,7.823,14.463l15.147.852c.012-.166.032-.331.041-.5A32.464,32.464,0,0,0,134.1,138.129Z" })] }));
-}
-function Text({ variant }) {
-    const colors = getColors(variant);
-    return ((0, jsx_runtime_1.jsxs)("g", { "aria-label": "JBrowse", transform: "translate(213.084 144.241)", style: { fill: colors.midnight }, children: [(0, jsx_runtime_1.jsx)("path", { d: "m 26.355,-71.505 v 54.075 2.835 q 0,6.825 -0.42,10.185 -0.735,5.67 -2.835,9.135 -3.255,5.355 -8.505,8.4 -4.83,2.73 -11.55,3.57 L 1.47,11.76 Q 7.35,10.185 9.24,4.2 10.605,-0.105 10.605,-9.975 v -5.565 -55.965 q 1.785,0 4.62,0.315 2.835,0.21 3.255,0.21 1.785,0 2.94,-0.105 4.515,-0.42 4.935,-0.42 z" }), (0, jsx_runtime_1.jsx)("path", { d: "m 60.68836,-65.415 v 24.78 h 3.255 q 2.94,0 4.935,-0.525 2.1,-0.525 3.885,-2.1 2.31,-1.995 3.36,-4.83 1.155,-2.835 1.155,-6.09 0,-5.565 -2.94,-8.61 -2.94,-3.045 -8.295,-3.045 -2.52,0 -5.355,0.42 z m 0,30.87 V -6.09 h 5.25 q 4.725,0 8.505,-3.675 3.885,-3.78 3.885,-10.08 0,-8.19 -4.62,-11.655 -4.095,-3.045 -13.02,-3.045 z M 44.93836,0 v -71.505 h 27.09 q 9.135,0 14.385,3.255 6.51,3.99 6.51,12.6 0,7.035 -5.25,11.655 -4.62,4.095 -11.97,5.145 v 0.945 q 7.56,0.735 12.285,3.99 6.615,4.62 6.615,13.335 0,10.185 -7.98,15.75 -6.93,4.83 -17.43,4.83 z" }), (0, jsx_runtime_1.jsx)("path", { d: "M 109.44281,0.525 V -50.4 q 1.785,0.21 3.99,0.42 2.31,0.105 3.255,0.105 2.31,0 4.2,-0.21 1.89,-0.21 3.045,-0.315 v 13.02 q 1.89,-6.51 5.46,-9.87 4.41,-4.095 11.655,-4.095 -0.315,2.73 -0.42,6.825 -0.105,3.99 -0.105,7.455 l -0.945,0.84 q -0.945,-0.735 -2.415,-1.05 -1.47,-0.315 -2.94,-0.315 -3.57,0 -6.195,1.89 -2.52,1.785 -3.465,5.04 -0.42,1.155 -0.525,3.15 -0.105,1.89 -0.105,4.515 v 4.515 19.005 q -1.785,-0.21 -2.625,-0.21 -3.675,-0.315 -4.62,-0.315 -2.31,0 -4.2,0.21 -1.89,0.21 -3.045,0.315 z" }), (0, jsx_runtime_1.jsx)("path", { d: "m 173.77337,1.47 q -11.655,0 -18.585,-6.825 -6.93,-6.825 -6.93,-18.48 0,-12.6 6.72,-20.055 6.825,-7.455 18.9,-7.455 11.97,0 18.9,6.72 6.93,6.72 6.93,18.48 0,12.285 -6.72,19.74 -7.14,7.875 -19.215,7.875 z m 0.735,-48.09 q -5.88,0 -8.505,6.51 -2.205,5.565 -2.205,15.96 0,8.19 1.47,12.915 2.415,7.98 8.505,7.98 5.565,0 8.19,-7.875 2.205,-6.51 2.205,-16.695 0,-8.505 -2.1,-13.23 -2.52,-5.565 -7.56,-5.565 z" }), (0, jsx_runtime_1.jsx)("path", { d: "m 222.03563,-50.4 10.5,36.015 q 3.675,-11.235 5.67,-17.85 2.415,-8.085 5.04,-18.165 1.05,0.105 3.045,0.315 2.1,0.21 2.835,0.21 1.995,0 3.15,-0.105 1.26,-0.21 2.73,-0.42 l 10.71,36.015 q 5.88,-17.43 10.71,-36.015 l 4.2,0.315 4.095,-0.315 q -5.145,13.125 -9.135,24.57 -5.04,14.28 -8.505,26.355 -1.89,-0.21 -3.36,-0.42 -1.365,-0.105 -2.205,-0.105 -1.89,0 -3.36,0.21 -1.365,0.21 -2.31,0.315 l -10.605,-34.755 q -4.41,13.65 -6.72,21.105 -2.31,7.35 -4.095,13.65 -1.89,-0.21 -3.36,-0.42 -1.365,-0.105 -2.31,-0.105 -1.995,0 -3.465,0.21 -1.365,0.21 -2.31,0.315 -3.78,-12.81 -5.04,-17.01 -2.205,-7.245 -5.46,-17.01 -2.835,-8.4 -5.88,-16.905 1.575,0 4.305,0.315 2.73,0.21 3.36,0.21 1.47,0 4.305,-0.21 2.835,-0.315 3.465,-0.315 z" }), (0, jsx_runtime_1.jsx)("path", { d: "m 292.84172,-12.81 h 2.625 q 1.47,4.095 4.62,6.51 3.15,2.415 7.35,2.415 2.94,0 5.46,-1.785 2.625,-1.89 2.625,-4.62 0,-3.885 -6.195,-6.615 -10.395,-4.62 -11.655,-5.46 -6.405,-4.515 -6.405,-12.285 0,-7.77 5.25,-12.18 5.25,-4.515 12.81,-4.515 3.99,0 8.085,1.365 4.095,1.26 7.14,3.57 l -2.52,9.24 h -2.94 q -0.63,-3.57 -3.57,-6.195 -2.835,-2.625 -6.405,-2.625 -3.15,0 -5.46,1.575 -2.31,1.47 -2.31,4.515 0,3.885 6.405,6.51 10.185,4.095 11.865,5.25 6.405,4.41 6.405,12.81 0,7.455 -5.46,12.18 -5.355,4.62 -14.805,4.62 -8.19,0 -14.49,-4.305 z" }), (0, jsx_runtime_1.jsx)("path", { d: "m 349.61228,-29.925 h 15.54 q 0,-6.51 -1.05,-10.395 -1.68,-6.3 -5.88,-6.3 -5.04,0 -7.14,6.195 -1.47,4.305 -1.47,10.5 z m 30.03,5.04 h -30.03 q 0,9.135 3.045,13.86 3.57,5.67 11.55,5.67 3.255,0 6.405,-1.26 3.15,-1.26 5.88,-3.465 l 1.26,0.945 -2.31,5.88 q -6.72,4.725 -15.015,4.725 -12.915,0 -19.635,-7.245 -6.72,-7.245 -6.72,-20.37 0,-11.235 6.405,-18.165 6.51,-7.035 17.64,-7.035 11.655,0 16.905,7.56 4.62,6.615 4.62,18.9 z" })] }));
-}

package/ui/Menu.d.ts

@@ -1,54 +0,0 @@
-import type { PopoverProps, SvgIconProps } from '@mui/material';
-interface MenuItemEndDecorationSubMenuProps {
-    type: 'subMenu';
-}
-interface MenuItemEndDecorationSelectorProps {
-    type: 'checkbox' | 'radio';
-    checked: boolean;
-    disabled?: boolean;
-}
-type MenuItemEndDecorationProps = MenuItemEndDecorationSubMenuProps | MenuItemEndDecorationSelectorProps;
-export declare function MenuItemEndDecoration(props: MenuItemEndDecorationProps): import("react/jsx-runtime").JSX.Element;
-export interface MenuDivider {
-    priority?: number;
-    type: 'divider';
-}
-export interface MenuSubHeader {
-    type: 'subHeader';
-    priority?: number;
-    label: string;
-}
-export interface BaseMenuItem {
-    id?: string;
-    label: React.ReactNode;
-    priority?: number;
-    subLabel?: string;
-    icon?: React.ComponentType<SvgIconProps>;
-    disabled?: boolean;
-    helpText?: string;
-}
-export interface NormalMenuItem extends BaseMenuItem {
-    type?: 'normal';
-    onClick: (...args: any[]) => void;
-}
-export interface CheckboxMenuItem extends BaseMenuItem {
-    type: 'checkbox';
-    checked: boolean;
-    onClick: (...args: any[]) => void;
-}
-export interface RadioMenuItem extends BaseMenuItem {
-    type: 'radio';
-    checked: boolean;
-    onClick: (...args: any[]) => void;
-}
-export interface SubMenuItem extends BaseMenuItem {
-    type?: 'subMenu';
-    subMenu: MenuItem[];
-}
-export type MenuItem = MenuDivider | MenuSubHeader | NormalMenuItem | CheckboxMenuItem | RadioMenuItem | SubMenuItem;
-interface MenuProps extends PopoverProps {
-    menuItems: MenuItem[];
-    onMenuItemClick: (event: React.MouseEvent<HTMLLIElement>, callback: (...args: any[]) => void) => void;
-}
-declare function Menu(props: MenuProps): import("react/jsx-runtime").JSX.Element;
-export default Menu;

package/ui/Menu.js

@@ -1,233 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.MenuItemEndDecoration = MenuItemEndDecoration;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const ArrowRight_1 = __importDefault(require("@mui/icons-material/ArrowRight"));
-const CheckBox_1 = __importDefault(require("@mui/icons-material/CheckBox"));
-const CheckBoxOutlineBlank_1 = __importDefault(require("@mui/icons-material/CheckBoxOutlineBlank"));
-const RadioButtonChecked_1 = __importDefault(require("@mui/icons-material/RadioButtonChecked"));
-const RadioButtonUnchecked_1 = __importDefault(require("@mui/icons-material/RadioButtonUnchecked"));
-const material_1 = require("@mui/material");
-const mui_1 = require("tss-react/mui");
-const util_1 = require("../util");
-const useStyles = (0, mui_1.makeStyles)()({
-    paper: {
-        position: 'fixed',
-        overflowY: 'auto',
-        overflowX: 'hidden',
-        minWidth: 16,
-        minHeight: 16,
-        maxWidth: 'calc(100% - 32px)',
-        maxHeight: 'calc(100% - 32px)',
-        top: 0,
-        left: 0,
-        outline: 0,
-    },
-    menuItemEndDecoration: {
-        padding: 0,
-        margin: 0,
-        height: 16,
-    },
-});
-function MenuItemEndDecoration(props) {
-    const { classes } = useStyles();
-    const { type } = props;
-    let checked;
-    let disabled;
-    if ('checked' in props) {
-        ;
-        ({ checked, disabled } = props);
-    }
-    let icon;
-    switch (type) {
-        case 'subMenu': {
-            icon = (0, jsx_runtime_1.jsx)(ArrowRight_1.default, { color: "action" });
-            break;
-        }
-        case 'checkbox': {
-            if (checked) {
-                const color = disabled ? 'inherit' : undefined;
-                icon = (0, jsx_runtime_1.jsx)(CheckBox_1.default, { color: color });
-            }
-            else {
-                icon = (0, jsx_runtime_1.jsx)(CheckBoxOutlineBlank_1.default, { color: "action" });
-            }
-            break;
-        }
-        case 'radio': {
-            if (checked) {
-                const color = disabled ? 'inherit' : undefined;
-                icon = (0, jsx_runtime_1.jsx)(RadioButtonChecked_1.default, { color: color });
-            }
-            else {
-                icon = (0, jsx_runtime_1.jsx)(RadioButtonUnchecked_1.default, { color: "action" });
-            }
-            break;
-        }
-    }
-    return (0, jsx_runtime_1.jsx)("div", { className: classes.menuItemEndDecoration, children: icon });
-}
-function checkIfValid(m) {
-    return m.type !== 'divider' && m.type !== 'subHeader' && !m.disabled;
-}
-function findNextValidIdx(menuItems, currentIdx) {
-    const idx = menuItems.slice(currentIdx + 1).findIndex(checkIfValid);
-    if (idx === -1) {
-        return idx;
-    }
-    return currentIdx + 1 + idx;
-}
-function findPreviousValidIdx(menuItems, currentIdx) {
-    return (0, util_1.findLastIndex)(menuItems.slice(0, currentIdx), checkIfValid);
-}
-const MenuPage = (0, react_1.forwardRef)(function MenuPage2(props, ref) {
-    const [subMenuAnchorEl, setSubMenuAnchorEl] = (0, react_1.useState)();
-    const [openSubMenuIdx, setOpenSubMenuIdx] = (0, react_1.useState)();
-    const [isSubMenuOpen, setIsSubMenuOpen] = (0, react_1.useState)(false);
-    const [selectedMenuItemIdx, setSelectedMenuItemIdx] = (0, react_1.useState)();
-    const [position, setPosition] = (0, react_1.useState)();
-    const paperRef = (0, react_1.useRef)(null);
-    const { classes } = useStyles();
-    const { menuItems, onMenuItemClick, open, onClose, anchorEl, top = false, } = props;
-    (0, react_1.useEffect)(() => {
-        if (!open) {
-            setSubMenuAnchorEl(undefined);
-            setOpenSubMenuIdx(undefined);
-        }
-    }, [open]);
-    (0, react_1.useEffect)(() => {
-        const shouldSubMenuBeOpen = open && Boolean(subMenuAnchorEl);
-        let timer;
-        if (shouldSubMenuBeOpen && !isSubMenuOpen) {
-            timer = setTimeout(() => {
-                setIsSubMenuOpen(true);
-            }, 300);
-        }
-        else if (!shouldSubMenuBeOpen && isSubMenuOpen) {
-            timer = setTimeout(() => {
-                setIsSubMenuOpen(false);
-            }, 300);
-        }
-        return () => {
-            clearTimeout(timer);
-        };
-    }, [isSubMenuOpen, open, subMenuAnchorEl]);
-    (0, react_1.useLayoutEffect)(() => {
-        if (anchorEl) {
-            const rect = anchorEl.getBoundingClientRect();
-            if (position) {
-                if (rect.top !== position.top ||
-                    rect.left + rect.width !== position.left) {
-                    setPosition({ top: rect.top, left: rect.left + rect.width });
-                }
-            }
-            else {
-                setPosition({ top: rect.top, left: rect.left + rect.width });
-            }
-        }
-        else if (!position) {
-            setPosition({});
-        }
-    }, [position, anchorEl]);
-    const hasIcon = menuItems.some(menuItem => 'icon' in menuItem && menuItem.icon);
-    const menuItemStyle = {};
-    function handleClick(callback) {
-        return (event) => {
-            onMenuItemClick(event, callback);
-        };
-    }
-    const ListContents = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.MenuList, { autoFocusItem: open && !isSubMenuOpen, dense: true, children: menuItems
-                    .sort((a, b) => (b.priority || 0) - (a.priority || 0))
-                    .map((menuItem, idx) => {
-                    if (menuItem.type === 'divider') {
-                        return ((0, jsx_runtime_1.jsx)(material_1.Divider, { component: "li" }, `divider-${JSON.stringify(menuItem)}-${idx}`));
-                    }
-                    if (menuItem.type === 'subHeader') {
-                        return ((0, jsx_runtime_1.jsx)(material_1.ListSubheader, { children: menuItem.label }, `subHeader-${menuItem.label}-${idx}`));
-                    }
-                    let icon = null;
-                    let endDecoration = null;
-                    if (menuItem.icon) {
-                        const Icon = menuItem.icon;
-                        icon = ((0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(Icon, {}) }));
-                    }
-                    if ('subMenu' in menuItem) {
-                        endDecoration = (0, jsx_runtime_1.jsx)(MenuItemEndDecoration, { type: "subMenu" });
-                    }
-                    else if (menuItem.type === 'checkbox' ||
-                        menuItem.type === 'radio') {
-                        endDecoration = ((0, jsx_runtime_1.jsx)(MenuItemEndDecoration, { type: menuItem.type, checked: menuItem.checked, disabled: menuItem.disabled }));
-                    }
-                    const onClick = 'onClick' in menuItem
-                        ? handleClick(menuItem.onClick)
-                        : undefined;
-                    return ((0, jsx_runtime_1.jsxs)(material_1.MenuItem, { style: menuItemStyle, selected: idx === selectedMenuItemIdx, onClick: onClick, onMouseMove: e => {
-                            if (e.currentTarget !== document.activeElement) {
-                                e.currentTarget.focus();
-                                setSelectedMenuItemIdx(idx);
-                            }
-                            if ('subMenu' in menuItem) {
-                                if (openSubMenuIdx !== idx) {
-                                    setSubMenuAnchorEl(e.currentTarget);
-                                    setOpenSubMenuIdx(idx);
-                                }
-                            }
-                            else {
-                                setSubMenuAnchorEl(undefined);
-                                setOpenSubMenuIdx(undefined);
-                            }
-                        }, onKeyDown: e => {
-                            switch (e.key) {
-                                case 'ArrowLeft':
-                                case 'Escape': {
-                                    onClose === null || onClose === void 0 ? void 0 : onClose(e, 'escapeKeyDown');
-                                    break;
-                                }
-                                case 'ArrowUp': {
-                                    setSelectedMenuItemIdx(findPreviousValidIdx(menuItems, idx));
-                                    break;
-                                }
-                                case 'ArrowDown': {
-                                    const a = findNextValidIdx(menuItems, idx);
-                                    setSelectedMenuItemIdx(a);
-                                    break;
-                                }
-                                default: {
-                                    if ('subMenu' in menuItem &&
-                                        (e.key === 'ArrowRight' || e.key === 'Enter')) {
-                                        setSubMenuAnchorEl(e.currentTarget);
-                                        setOpenSubMenuIdx(idx);
-                                        setIsSubMenuOpen(true);
-                                    }
-                                }
-                            }
-                        }, disabled: Boolean(menuItem.disabled), children: [icon, (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: menuItem.label, secondary: menuItem.subLabel, inset: hasIcon && !menuItem.icon }), endDecoration] }, menuItem.id || String(menuItem.label)));
-                }) }), menuItems.map((menuItem, idx) => {
-                let subMenu = null;
-                if ('subMenu' in menuItem) {
-                    subMenu = ((0, jsx_runtime_1.jsx)(MenuPage, { anchorEl: subMenuAnchorEl, open: isSubMenuOpen && openSubMenuIdx === idx, onClose: () => {
-                            setIsSubMenuOpen(false);
-                            setSubMenuAnchorEl(undefined);
-                        }, onMenuItemClick: onMenuItemClick, menuItems: menuItem.subMenu }, menuItem.id || String(menuItem.label)));
-                }
-                return subMenu;
-            })] }));
-    return top ? (ListContents) : ((0, jsx_runtime_1.jsx)(material_1.Grow, { in: open, style: { transformOrigin: '0 0 0' }, ref: ref, children: (0, jsx_runtime_1.jsx)(material_1.Paper, { elevation: 8, ref: paperRef, className: classes.paper, style: { ...position }, children: ListContents }) }));
-});
-function Menu(props) {
-    const { open, onClose, menuItems, onMenuItemClick, ...other } = props;
-    return ((0, jsx_runtime_1.jsx)(material_1.Popover, { open: open, onClose: onClose, style: { zIndex: 10000, ...other.style }, anchorOrigin: {
-            vertical: 'bottom',
-            horizontal: 'right',
-            ...other.anchorOrigin,
-        }, transformOrigin: {
-            vertical: 'top',
-            horizontal: 'left',
-            ...other.transformOrigin,
-        }, ...other, children: (0, jsx_runtime_1.jsx)(MenuPage, { open: open, onClose: onClose, menuItems: menuItems, onMenuItemClick: onMenuItemClick, top: true }) }));
-}
-exports.default = Menu;

package/ui/MenuButton.d.ts

@@ -1,10 +0,0 @@
-import type { MenuItem } from '@jbrowse/core/ui';
-declare const MenuButton: ({ children, menuItems, closeAfterItemClick, stopPropagation, setOpen, ...rest }: {
-    closeAfterItemClick?: boolean;
-    children?: React.ReactElement;
-    menuItems: MenuItem[];
-    stopPropagation?: boolean;
-    setOpen?: (arg: boolean) => void;
-    [key: string]: unknown;
-}) => import("react/jsx-runtime").JSX.Element;
-export default MenuButton;

package/ui/MenuButton.js

@@ -1,28 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const Menu_1 = __importDefault(require("@jbrowse/core/ui/Menu"));
-const material_1 = require("@mui/material");
-const mobx_react_1 = require("mobx-react");
-const MenuButton = (0, mobx_react_1.observer)(function MenuButton({ children, menuItems, closeAfterItemClick = true, stopPropagation, setOpen, ...rest }) {
-    const [anchorEl, setAnchorEl] = (0, react_1.useState)();
-    const isOpen = !!anchorEl;
-    (0, react_1.useEffect)(() => {
-        setOpen === null || setOpen === void 0 ? void 0 : setOpen(isOpen);
-    }, [isOpen, setOpen]);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, { ...rest, onClick: event => {
-                    setAnchorEl(event.currentTarget);
-                }, children: children }), (0, jsx_runtime_1.jsx)(Menu_1.default, { open: !!anchorEl, anchorEl: anchorEl, onClose: () => {
-                    setAnchorEl(undefined);
-                }, onMenuItemClick: (_, callback) => {
-                    callback();
-                    if (closeAfterItemClick) {
-                        setAnchorEl(undefined);
-                    }
-                }, menuItems: menuItems })] }));
-});
-exports.default = MenuButton;

package/ui/PrerenderedCanvas.d.ts

@@ -1,10 +0,0 @@
-declare function PrerenderedCanvas(props: {
-    width: number;
-    height: number;
-    highResolutionScaling?: number;
-    style?: any;
-    imageData?: any;
-    showSoftClip?: boolean;
-    blockKey?: string;
-}): import("react/jsx-runtime").JSX.Element;
-export default PrerenderedCanvas;

package/ui/PrerenderedCanvas.js

@@ -1,34 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const offscreenCanvasPonyfill_1 = require("../util/offscreenCanvasPonyfill");
-function PrerenderedCanvas(props) {
-    const { width, height, highResolutionScaling = 1, style = {}, imageData, blockKey, showSoftClip, } = props;
-    const [done, setDone] = (0, react_1.useState)(false);
-    const featureCanvas = (0, react_1.useRef)(null);
-    (0, react_1.useEffect)(() => {
-        if (!imageData) {
-            return;
-        }
-        const canvas = featureCanvas.current;
-        if (!canvas) {
-            return;
-        }
-        const context = canvas.getContext('2d');
-        if (!context) {
-            return;
-        }
-        (0, offscreenCanvasPonyfill_1.drawImageOntoCanvasContext)(imageData, context);
-        setDone(true);
-    }, [imageData]);
-    return ((0, jsx_runtime_1.jsx)("canvas", { "data-testid": [
-            'prerendered_canvas',
-            showSoftClip ? 'softclipped' : '',
-            blockKey,
-            done ? 'done' : '',
-        ]
-            .filter(f => !!f)
-            .join('_'), ref: featureCanvas, width: width * highResolutionScaling, height: height * highResolutionScaling, style: { width, height, ...style } }));
-}
-exports.default = PrerenderedCanvas;

package/ui/RedErrorMessageBox.js

@@ -1,19 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = RedErrorMessageBox;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const mui_1 = require("tss-react/mui");
-const useStyles = (0, mui_1.makeStyles)()(theme => ({
-    bg: {
-        padding: 4,
-        margin: 4,
-        overflow: 'auto',
-        maxHeight: 200,
-        background: theme.palette.mode === 'dark' ? '#833' : '#f88',
-        border: `1px solid ${theme.palette.divider}`,
-    },
-}));
-function RedErrorMessageBox({ children, }) {
-    const { classes } = useStyles();
-    return (0, jsx_runtime_1.jsx)("div", { className: classes.bg, children: children });
-}

package/ui/ResizeHandle.js

@@ -1,72 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const mui_1 = require("tss-react/mui");
-const useStyles = (0, mui_1.makeStyles)()({
-    horizontalHandle: {
-        cursor: 'row-resize',
-        width: '100%',
-    },
-    verticalHandle: {
-        cursor: 'col-resize',
-        height: '100%',
-    },
-    flexbox_verticalHandle: {
-        cursor: 'col-resize',
-        alignSelf: 'stretch',
-    },
-    flexbox_horizontalHandle: {
-        cursor: 'row-resize',
-        alignSelf: 'stretch',
-    },
-});
-function ResizeHandle({ onDrag, vertical = false, flexbox = false, className: originalClassName, onMouseDown, ...props }) {
-    const [mouseDragging, setMouseDragging] = (0, react_1.useState)(false);
-    const initialPosition = (0, react_1.useRef)(0);
-    const prevPos = (0, react_1.useRef)(0);
-    const { classes, cx } = useStyles();
-    (0, react_1.useEffect)(() => {
-        function mouseMove(event) {
-            event.preventDefault();
-            const pos = vertical ? event.clientX : event.clientY;
-            const totalDistance = initialPosition.current - pos;
-            const lastFrameDistance = pos - prevPos.current;
-            prevPos.current = pos;
-            onDrag(lastFrameDistance, totalDistance);
-        }
-        function mouseUp() {
-            setMouseDragging(false);
-        }
-        if (mouseDragging) {
-            window.addEventListener('mousemove', mouseMove, true);
-            window.addEventListener('mouseup', mouseUp, true);
-            return () => {
-                window.removeEventListener('mousemove', mouseMove, true);
-                window.removeEventListener('mouseup', mouseUp, true);
-            };
-        }
-        return () => { };
-    }, [mouseDragging, onDrag, vertical]);
-    let className;
-    if (flexbox) {
-        className = vertical
-            ? classes.flexbox_verticalHandle
-            : classes.flexbox_horizontalHandle;
-    }
-    else if (vertical) {
-        className = classes.verticalHandle;
-    }
-    else {
-        className = classes.horizontalHandle;
-    }
-    return ((0, jsx_runtime_1.jsx)("div", { "data-resizer": "true", onMouseDown: event => {
-            event.preventDefault();
-            const pos = vertical ? event.clientX : event.clientY;
-            initialPosition.current = pos;
-            prevPos.current = pos;
-            setMouseDragging(true);
-            onMouseDown === null || onMouseDown === void 0 ? void 0 : onMouseDown(event);
-        }, className: cx(className, originalClassName), ...props }));
-}
-exports.default = ResizeHandle;

package/ui/ReturnToImportFormDialog.js

@@ -1,18 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const material_1 = require("@mui/material");
-const mobx_react_1 = require("mobx-react");
-const Dialog_1 = __importDefault(require("./Dialog"));
-const ReturnToImportFormDialog = (0, mobx_react_1.observer)(function ({ model, handleClose, }) {
-    return ((0, jsx_runtime_1.jsxs)(Dialog_1.default, { maxWidth: "xl", open: true, onClose: handleClose, title: "Reference sequence", children: [(0, jsx_runtime_1.jsx)(material_1.DialogContent, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, { children: "Are you sure you want to return to the import form? This will lose your current view" }) }), (0, jsx_runtime_1.jsxs)(material_1.DialogActions, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, { onClick: () => {
-                            model.clearView();
-                            handleClose();
-                        }, variant: "contained", color: "primary", autoFocus: true, children: "OK" }), (0, jsx_runtime_1.jsx)(material_1.Button, { onClick: () => {
-                            handleClose();
-                        }, color: "secondary", variant: "contained", children: "Cancel" })] })] }));
-});
-exports.default = ReturnToImportFormDialog;