@jbrowse/core 2.3.3 → 2.3.4

package/ui/Dialog.js

@@ -7,8 +7,11 @@ const react_1 = __importDefault(require("react"));
 const material_1 = require("@mui/material");
 const mobx_react_1 = require("mobx-react");
 const mui_1 = require("tss-react/mui");
+const react_error_boundary_1 = require("react-error-boundary");
 // icons
 const Close_1 = __importDefault(require("@mui/icons-material/Close"));
+// locals
+const ErrorMessage_1 = __importDefault(require("./ErrorMessage"));
 const useStyles = (0, mui_1.makeStyles)()(theme => ({
     closeButton: {
         position: 'absolute',
@@ -17,6 +20,10 @@ const useStyles = (0, mui_1.makeStyles)()(theme => ({
         color: theme.palette.grey[500],
     },
 }));
+function DialogError({ error }) {
+    return (react_1.default.createElement("div", { style: { width: 800, margin: 40 } },
+        react_1.default.createElement(ErrorMessage_1.default, { error: error })));
+}
 function JBrowseDialog(props) {
     const { classes } = useStyles();
     const { title, children, onClose } = props;
@@ -30,6 +37,6 @@ function JBrowseDialog(props) {
                     } },
                     react_1.default.createElement(Close_1.default, null))) : null),
             react_1.default.createElement(material_1.Divider, null),
-            children)));
+            react_1.default.createElement(react_error_boundary_1.ErrorBoundary, { FallbackComponent: DialogError }, children))));
 }
 exports.default = (0, mobx_react_1.observer)(JBrowseDialog);

package/ui/DropDownMenu.js

@@ -33,9 +33,6 @@ const mobx_react_1 = require("mobx-react");
 const ArrowDropDown_1 = __importDefault(require("@mui/icons-material/ArrowDropDown"));
 const Menu_1 = __importDefault(require("./Menu"));
 const useStyles = (0, mui_1.makeStyles)()(theme => ({
-    root: {
-        display: 'flex',
-    },
     buttonRoot: {
         '&:hover': {
             backgroundColor: (0, material_1.alpha)(theme.palette.primary.contrastText, theme.palette.action.hoverOpacity),
@@ -59,7 +56,7 @@ function DropDownMenu({ menuTitle, session, menuItems, }) {
     function handleClose() {
         setOpen(false);
     }
-    return (react_1.default.createElement("div", { className: classes.root },
+    return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(material_1.Button, { ref: anchorEl, onClick: handleToggle, color: "inherit", "data-testid": "dropDownMenuButton", classes: { root: classes.buttonRoot } },
             menuTitle,
             react_1.default.createElement(ArrowDropDown_1.default, null)),

package/ui/EditableTypography.js

@@ -88,7 +88,7 @@ const EditableTypography = react_1.default.forwardRef((props, ref) => {
                     setBlur(true);
                 }
             }, onBlur: () => {
-                setValue(editedValue || '');
+                setValue(editedValue || value || '');
                 setEditedValue(undefined);
             } })));
 });

package/ui/Menu.js

@@ -245,7 +245,15 @@ const MenuPage = react_1.default.forwardRef((props, ref) => {
 });
 function Menu(props) {
     const { open, onClose, menuItems, onMenuItemClick, ...other } = props;
-    return (react_1.default.createElement(material_1.Popover, { transitionDuration: 0, open: open, onClose: onClose, BackdropProps: { invisible: true }, ...other },
+    return (react_1.default.createElement(material_1.Popover, { open: open, onClose: onClose, BackdropProps: { invisible: true }, anchorOrigin: {
+            vertical: 'bottom',
+            horizontal: 'right',
+            ...other.anchorOrigin,
+        }, transformOrigin: {
+            vertical: 'top',
+            horizontal: 'left',
+            ...other.transformOrigin,
+        }, ...other },
         react_1.default.createElement(MenuPage, { open: open, onClose: onClose, menuItems: menuItems, onMenuItemClick: onMenuItemClick, top: true })));
 }
 exports.default = Menu;

package/ui/ResizeBar.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+export declare function useResizeBar(): {
+    ref: React.RefObject<HTMLDivElement>;
+    scrollLeft: number;
+};
+export default function ResizeBar({ widths, setWidths, checkbox, scrollLeft, }: {
+    widths: number[];
+    setWidths: (arg: number[]) => void;
+    checkbox?: boolean;
+    scrollLeft?: number;
+}): JSX.Element;

package/ui/ResizeBar.js

@@ -0,0 +1,95 @@
+"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 });
+exports.useResizeBar = void 0;
+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)()({
+    resizeBar: {
+        background: 'lightgrey',
+        height: 12,
+        position: 'relative',
+        overflow: 'hidden',
+    },
+    tick: {
+        position: 'absolute',
+        height: '100%',
+        pointerEvents: 'none',
+        background: 'black',
+        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);
+    (0, react_1.useEffect)(() => {
+        const timer = setInterval(() => {
+            var _a;
+            const elt = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.querySelector('.MuiDataGrid-virtualScroller');
+            if (elt) {
+                setScrollLeft(elt.scrollLeft);
+            }
+        }, 100);
+        return () => {
+            clearInterval(timer);
+        };
+    }, []);
+    return { ref, scrollLeft };
+}
+exports.useResizeBar = useResizeBar;
+function Tick({ left, scrollLeft, idx, onDrag, }) {
+    const { classes } = useStyles();
+    const cb = (0, react_1.useCallback)((d) => {
+        onDrag(d, idx);
+    }, [idx, onDrag]);
+    // has an invisible wider than tick mark (1px) clickable area (5px)
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(ResizeHandle_1.default, { onDrag: cb, vertical: true, className: classes.hiddenTick, style: { left: left - scrollLeft - 2.5 } }),
+        react_1.default.createElement("div", { style: { left: left - scrollLeft }, className: classes.tick })));
+}
+function ResizeBar({ widths, setWidths, checkbox, scrollLeft = 0, }) {
+    const { classes } = useStyles();
+    const offsets = [];
+    widths.reduce((a, b, i) => (offsets[i] = a + b), checkbox ? 52 : 0);
+    const onDrag = (0, react_1.useCallback)((distance, idx) => {
+        const newWidths = [...widths];
+        // mui doesn't allow columns smaller than 50
+        newWidths[idx] = Math.max(newWidths[idx] + distance, 50);
+        setWidths(newWidths);
+    }, [widths, setWidths]);
+    return (react_1.default.createElement("div", { className: classes.resizeBar }, offsets.map((left, i) => (react_1.default.createElement(Tick, { key: i, left: i === offsets.length - 1 ? left - 3 : left, onDrag: onDrag, idx: i, scrollLeft: scrollLeft })))));
+}
+exports.default = ResizeBar;

package/ui/ResizeHandle.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 declare function ResizeHandle({ onDrag, vertical, flexbox, className: originalClassName, ...props }: {
-    onDrag: (arg: number) => number;
+    onDrag: (arg: number) => number | void;
     vertical?: boolean;
     flexbox?: boolean;
     className?: string;

package/ui/ResizeHandle.js

@@ -89,6 +89,6 @@ function ResizeHandle({ onDrag, vertical = false, flexbox = false, className: or
             event.preventDefault();
             prevPos.current = vertical ? event.clientX : event.clientY;
             setMouseDragging(true);
-        }, role: "presentation", className: cx(className, originalClassName), ...props }));
+        }, className: cx(className, originalClassName), ...props }));
 }
 exports.default = ResizeHandle;

package/ui/SanitizedHTML.js

@@ -65,7 +65,7 @@ function SanitizedHTML({ html }) {
             }
         });
     }
-    return (react_1.default.createElement("div", { 
+    return (react_1.default.createElement("span", { 
         // eslint-disable-next-line react/no-danger
         dangerouslySetInnerHTML: {
             __html: dompurify_1.default.sanitize(value),

package/ui/theme.d.ts

@@ -116,6 +116,16 @@ export declare function createJBrowseDefaultProps(): {
                 size: "small";
             };
         };
+        MuiPopover: {
+            defaultProps: {
+                transitionDuration: number;
+            };
+        };
+        MuiMenu: {
+            defaultProps: {
+                transitionDuration: number;
+            };
+        };
         MuiMenuList: {
             defaultProps: {
                 dense: boolean;

package/ui/theme.js

@@ -102,6 +102,16 @@ function createJBrowseDefaultProps( /* palette: PaletteOptions = {} */) {
                     size: 'small',
                 },
             },
+            MuiPopover: {
+                defaultProps: {
+                    transitionDuration: 0,
+                },
+            },
+            MuiMenu: {
+                defaultProps: {
+                    transitionDuration: 0,
+                },
+            },
             MuiMenuList: {
                 defaultProps: {
                     dense: true,

package/util/index.d.ts

@@ -1,22 +1,22 @@
 import PluginManager from '../PluginManager';
 import { IAnyStateTreeNode, IStateTreeNode } from 'mobx-state-tree';
 import { IReactionPublic, IReactionOptions } from 'mobx';
-import SimpleFeature, { Feature, isFeature } from './simpleFeature';
+import SimpleFeature, { Feature, SimpleFeatureSerialized, isFeature } from './simpleFeature';
 import { AssemblyManager, Region, TypeTestedByPredicate } from './types';
 import { BaseBlock } from './blockTypes';
-export type { Feature };
 export * from './types';
 export * from './aborting';
 export * from './when';
 export * from './range';
 export * from './dedupe';
 export { SimpleFeature, isFeature };
+export type { Feature, SimpleFeatureSerialized };
 export * from './offscreenCanvasPonyfill';
 export * from './offscreenCanvasUtils';
 export declare const inDevelopment: boolean;
 export declare const inProduction: boolean;
 export declare function useDebounce<T>(value: T, delay: number): T;
-export declare function useDebouncedCallback<A extends any[]>(callback: (...args: A) => void, wait?: number): (...args: A) => void;
+export declare function useDebouncedCallback<T>(callback: (...args: T[]) => void, wait?: number): (...args: T[]) => void;
 /** find the first node in the hierarchy that matches the given predicate */
 export declare function findParentThat(node: IAnyStateTreeNode, predicate: (thing: IAnyStateTreeNode) => boolean): IAnyStateTreeNode;
 export declare function springAnimate(fromValue: number, toValue: number, setValue: (value: number) => void, onFinish?: () => void, precision?: number, tension?: number, friction?: number): (() => void)[];
@@ -153,7 +153,7 @@ export declare function bpSpanPx(leftBp: number, rightBp: number, region: {
     end: number;
     reversed?: boolean;
 }, bpPerPx: number): [number, number];
-export declare function iterMap<T, U>(iterable: Iterable<T>, func: (item: T) => U, sizeHint?: number): U[];
+export declare function iterMap<T, U>(iter: Iterable<T>, func: (arg: T) => U, sizeHint?: number): U[];
 /**
  * Returns the index of the last element in the array where predicate is true,
  * and -1 otherwise.
@@ -280,8 +280,8 @@ export declare const defaultCodonTable: {
     GGT: string;
 };
 /**
- *  take CodonTable above and generate larger codon table that includes
- *  all permutations of upper and lower case nucleotides
+ * take CodonTable above and generate larger codon table that includes all
+ * permutations of upper and lower case nucleotides
  */
 export declare function generateCodonTable(table: any): {
     [key: string]: string;
@@ -337,7 +337,13 @@ export declare function getUriLink(value: {
     baseUri?: string;
 }): string;
 export declare function getStr(obj: unknown): string;
-export declare function measureGridWidth(elements: string[]): number;
+export declare function measureGridWidth(elements: string[], args?: {
+    minWidth?: number;
+    fontSize?: number;
+    maxWidth?: number;
+    padding?: number;
+    stripHTML?: boolean;
+}): number;
 export declare function getEnv(obj: any): {
     pluginManager: PluginManager;
 };

package/util/index.js

@@ -504,10 +504,10 @@ function bpSpanPx(leftBp, rightBp, region, bpPerPx) {
 }
 exports.bpSpanPx = bpSpanPx;
 // do an array map of an iterable
-function iterMap(iterable, func, sizeHint) {
+function iterMap(iter, func, sizeHint) {
     const results = sizeHint ? new Array(sizeHint) : [];
     let counter = 0;
-    for (const item of iterable) {
+    for (const item of iter) {
         results[counter] = func(item);
         counter += 1;
     }
@@ -664,8 +664,10 @@ function stringify({ refName, coord, oob, }) {
         : '';
 }
 exports.stringify = stringify;
-// this is recommended in a later comment in https://github.com/electron/electron/issues/2288
-// for detecting electron in a renderer process, which is the one that has node enabled for us
+// this is recommended in a later comment in
+// https://github.com/electron/electron/issues/2288 for detecting electron in a
+// renderer process, which is the one that has node enabled for us
+//
 // const isElectron = process.versions.electron
 // const i2 = process.versions.hasOwnProperty('electron')
 exports.isElectron = /electron/i.test(typeof navigator !== 'undefined' ? navigator.userAgent : '');
@@ -829,8 +831,8 @@ exports.defaultCodonTable = {
     GGT: 'G',
 };
 /**
- *  take CodonTable above and generate larger codon table that includes
- *  all permutations of upper and lower case nucleotides
+ * take CodonTable above and generate larger codon table that includes all
+ * permutations of upper and lower case nucleotides
  */
 function generateCodonTable(table) {
     const tempCodonTable = {};
@@ -1002,9 +1004,18 @@ function getStr(obj) {
         : String(obj);
 }
 exports.getStr = getStr;
+// tries to measure grid width without HTML tags included
+function coarseStripHTML(s) {
+    return s.replace(/(<([^>]+)>)/gi, '');
+}
 // heuristic measurement for a column of a @mui/x-data-grid, pass in values from a column
-function measureGridWidth(elements) {
-    return max(elements.map(element => Math.min(Math.max(measureText(getStr(element), 14) + 50, 80), 1000)));
+function measureGridWidth(elements, args) {
+    const { padding = 30, minWidth = 80, fontSize = 12, maxWidth = 1000, stripHTML = false, } = args || {};
+    return max(elements
+        .map(element => getStr(element))
+        .map(str => (stripHTML ? coarseStripHTML(str) : str))
+        .map(str => measureText(str, fontSize))
+        .map(n => Math.min(Math.max(n + padding, minWidth), maxWidth)));
 }
 exports.measureGridWidth = measureGridWidth;
 function getEnv(obj) {