@jbrowse/core 2.3.2 → 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/FatalErrorDialog.js

@@ -36,7 +36,6 @@ const ResetComponent = ({ onFactoryReset, resetButtonText, }) => {
         react_1.default.createElement(FactoryResetDialog_1.default, { onClose: () => setDialogOpen(false), open: dialogOpen, onFactoryReset: onFactoryReset })));
 };
 const FatalErrorDialog = ({ componentStack, error = 'No error message provided', onFactoryReset, resetButtonText = 'Factory Reset', }) => {
-    console.error(error);
     return (react_1.default.createElement(material_1.Dialog, { open: true },
         react_1.default.createElement(material_1.DialogTitle, { style: { background: '#e88' } }, "Fatal error"),
         react_1.default.createElement(material_1.DialogContent, null,

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/Base1DUtils.d.ts

@@ -30,3 +30,9 @@ export declare function bpToPx({ refName, coord, regionNumber, self, }: {
     index: number;
     offsetPx: number;
 } | undefined;
+export declare function bpToPxMap({ refName, coord, regionNumber, self, }: {
+    refName: string;
+    coord: number;
+    regionNumber?: number;
+    self: ViewSnap;
+}): {};

package/util/Base1DUtils.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.bpToPx = exports.pxToBp = exports.moveTo = void 0;
+exports.bpToPxMap = exports.bpToPx = exports.pxToBp = exports.moveTo = void 0;
 const mobx_state_tree_1 = require("mobx-state-tree");
 function lengthBetween(self, start, end) {
     let bpSoFar = 0;
@@ -57,6 +57,9 @@ function moveTo(self, start, end) {
     self.scrollTo(Math.round(bpToStart / self.bpPerPx));
 }
 exports.moveTo = moveTo;
+function coord(r, bp) {
+    return Math.floor(r.reversed ? r.end - bp : r.start + bp) + 1;
+}
 // manual return type since getSnapshot hard to infer here
 function pxToBp(self, px) {
     var _a;
@@ -65,16 +68,14 @@ function pxToBp(self, px) {
     const blocks = staticBlocks.contentBlocks;
     const bp = (offsetPx + px) * bpPerPx;
     if (bp < 0) {
-        const region = displayedRegions[0];
-        const snap = (0, mobx_state_tree_1.getSnapshot)(region);
+        const r = displayedRegions[0];
+        const snap = (0, mobx_state_tree_1.getSnapshot)(r);
         // @ts-ignore
         return {
             // xref https://github.com/mobxjs/mobx-state-tree/issues/1524 for Omit
             ...snap,
             oob: true,
-            coord: region.reversed
-                ? Math.floor(region.end - bp) + 1
-                : Math.floor(region.start + bp) + 1,
+            coord: coord(r, bp),
             offset: bp,
             index: 0,
         };
@@ -82,20 +83,18 @@ function pxToBp(self, px) {
     const interRegionPaddingBp = interRegionPaddingWidth * bpPerPx;
     let currBlock = 0;
     for (let i = 0; i < displayedRegions.length; i++) {
-        const region = displayedRegions[i];
-        const len = region.end - region.start;
+        const r = displayedRegions[i];
+        const len = r.end - r.start;
         const offset = bp - bpSoFar;
         if (len + bpSoFar > bp && bpSoFar <= bp) {
-            const snap = (0, mobx_state_tree_1.getSnapshot)(region);
+            const snap = (0, mobx_state_tree_1.getSnapshot)(r);
             // @ts-ignore
             return {
                 // xref https://github.com/mobxjs/mobx-state-tree/issues/1524 for Omit
                 ...snap,
                 oob: false,
                 offset,
-                coord: region.reversed
-                    ? Math.floor(region.end - offset) + 1
-                    : Math.floor(region.start + offset) + 1,
+                coord: coord(r, offset),
                 index: i,
             };
         }
@@ -110,19 +109,17 @@ function pxToBp(self, px) {
         }
     }
     if (bp >= bpSoFar && displayedRegions.length) {
-        const region = displayedRegions[displayedRegions.length - 1];
-        const len = region.end - region.start;
+        const r = displayedRegions[displayedRegions.length - 1];
+        const len = r.end - r.start;
         const offset = bp - bpSoFar + len;
-        const snap = (0, mobx_state_tree_1.getSnapshot)(region);
+        const snap = (0, mobx_state_tree_1.getSnapshot)(r);
         // @ts-ignore
         return {
             // xref https://github.com/mobxjs/mobx-state-tree/issues/1524 for Omit
             ...snap,
             oob: true,
             offset,
-            coord: region.reversed
-                ? Math.floor(region.end - offset) + 1
-                : Math.floor(region.start + offset) + 1,
+            coord: coord(r, offset),
             index: displayedRegions.length - 1,
         };
     }
@@ -148,13 +145,11 @@ function bpToPx({ refName, coord, regionNumber, self, }) {
     let currBlock = 0;
     let i = 0;
     for (; i < displayedRegions.length; i++) {
-        const region = displayedRegions[i];
-        const len = region.end - region.start;
-        if (refName === region.refName &&
-            coord >= region.start &&
-            coord <= region.end) {
+        const r = displayedRegions[i];
+        const len = r.end - r.start;
+        if (refName === r.refName && coord >= r.start && coord <= r.end) {
             if (regionNumber ? regionNumber === i : true) {
-                bpSoFar += region.reversed ? region.end - coord : coord - region.start;
+                bpSoFar += r.reversed ? r.end - coord : coord - r.start;
                 break;
             }
         }
@@ -178,3 +173,41 @@ function bpToPx({ refName, coord, regionNumber, self, }) {
     return undefined;
 }
 exports.bpToPx = bpToPx;
+function bpToPxMap({ refName, coord, regionNumber, self, }) {
+    var _a;
+    let bpSoFar = 0;
+    const { interRegionPaddingWidth, bpPerPx, displayedRegions, staticBlocks } = self;
+    const blocks = staticBlocks.contentBlocks;
+    const interRegionPaddingBp = interRegionPaddingWidth * bpPerPx;
+    const map = {};
+    let currBlock = 0;
+    let i = 0;
+    for (; i < displayedRegions.length; i++) {
+        const r = displayedRegions[i];
+        const len = r.end - r.start;
+        if (refName === r.refName && coord >= r.start && coord <= r.end) {
+            if (regionNumber !== undefined ? regionNumber === i : true) {
+                bpSoFar += r.reversed ? r.end - coord : coord - r.start;
+                break;
+            }
+        }
+        // add the interRegionPaddingWidth if the boundary is in the screen e.g. in
+        // a static block
+        if (((_a = blocks[currBlock]) === null || _a === void 0 ? void 0 : _a.regionNumber) === i) {
+            bpSoFar += len + interRegionPaddingBp;
+            currBlock++;
+        }
+        else {
+            bpSoFar += len;
+        }
+    }
+    const found = displayedRegions[i];
+    if (found) {
+        return {
+            index: i,
+            offsetPx: Math.round(bpSoFar / bpPerPx),
+        };
+    }
+    return map;
+}
+exports.bpToPxMap = bpToPxMap;

package/util/Base1DViewModel.d.ts

@@ -78,7 +78,9 @@ declare const Base1DView: import("mobx-state-tree").IModelType<{
      */
     pxToBp(px: number): {
         coord: number;
-        index: number;
+        index: number; /**
+         * #getter
+         */
         refName: string;
         oob: boolean;
         assemblyName: string;

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,8 +337,18 @@ 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;
 };
 export declare function localStorageGetItem(item: string): string | null | undefined;
+export declare function max(arr: number[]): number;
+export declare function min(arr: number[]): number;
+export declare function sum(arr: number[]): number;
+export declare function avg(arr: number[]): number;

package/util/index.js

@@ -30,7 +30,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.bytesForRegions = exports.objectHash = exports.hashCode = exports.updateStatus = exports.generateCodonTable = exports.defaultCodonTable = exports.defaultStops = exports.defaultStarts = exports.measureText = exports.rIC = exports.blobToDataURL = exports.complement = exports.reverse = exports.revcom = exports.isElectron = exports.stringify = exports.shorten = exports.minmax = exports.renameRegionsIfNeeded = exports.renameRegionIfNeeded = exports.makeAbortableReaction = exports.findLastIndex = exports.iterMap = exports.bpSpanPx = exports.featureSpanPx = exports.cartesianToPolar = exports.polarToCartesian = exports.degToRad = exports.radToDeg = exports.bpToPx = exports.clamp = exports.compareLocStrings = exports.compareLocs = exports.parseLocString = exports.parseLocStringOneBased = exports.assembleLocStringFast = exports.assembleLocString = exports.getContainingDisplay = exports.getContainingTrack = exports.getContainingView = exports.getSession = exports.findParentThatIs = exports.springAnimate = exports.findParentThat = exports.useDebouncedCallback = exports.useDebounce = exports.inProduction = exports.inDevelopment = exports.isFeature = exports.SimpleFeature = void 0;
-exports.localStorageGetItem = exports.getEnv = exports.measureGridWidth = exports.getStr = exports.getUriLink = exports.useLocalStorage = exports.getLayoutId = exports.getViewParams = exports.getTickDisplayStr = exports.toLocale = exports.getBpDisplayStr = exports.supportedIndexingAdapters = void 0;
+exports.avg = exports.sum = exports.min = exports.max = exports.localStorageGetItem = exports.getEnv = exports.measureGridWidth = exports.getStr = exports.getUriLink = exports.useLocalStorage = exports.getLayoutId = exports.getViewParams = exports.getTickDisplayStr = exports.toLocale = exports.getBpDisplayStr = exports.supportedIndexingAdapters = void 0;
 /* eslint-disable @typescript-eslint/no-explicit-any */
 const react_1 = require("react");
 const is_object_1 = __importDefault(require("is-object"));
@@ -66,7 +66,7 @@ function useDebounce(value, delay) {
     return debouncedValue;
 }
 exports.useDebounce = useDebounce;
-// https://stackoverflow.com/questions/56283920/how-to-debounce-a-callback-in-functional-component-using-hooks
+// https://stackoverflow.com/questions/56283920/
 function useDebouncedCallback(callback, wait = 400) {
     // track args & timeout handle between calls
     const argsRef = (0, react_1.useRef)();
@@ -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 Math.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) {
@@ -1017,3 +1028,31 @@ function localStorageGetItem(item) {
         : undefined;
 }
 exports.localStorageGetItem = localStorageGetItem;
+function max(arr) {
+    let max = -Infinity;
+    for (let i = 0; i < arr.length; i++) {
+        max = arr[i] > max ? arr[i] : max;
+    }
+    return max;
+}
+exports.max = max;
+function min(arr) {
+    let min = Infinity;
+    for (let i = 0; i < arr.length; i++) {
+        min = arr[i] < min ? arr[i] : min;
+    }
+    return min;
+}
+exports.min = min;
+function sum(arr) {
+    let sum = 0;
+    for (let i = 0; i < arr.length; i++) {
+        sum += arr[i];
+    }
+    return sum;
+}
+exports.sum = sum;
+function avg(arr) {
+    return sum(arr) / arr.length;
+}
+exports.avg = avg;

package/util/stats.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.blankStats = exports.scoresToStats = exports.calcPerBaseStats = exports.rectifyStats = exports.calcStdFromSums = void 0;
+const rxjs_1 = require("rxjs");
 const operators_1 = require("rxjs/operators");
 /**
  * calculate standard deviation using the 'shortcut method' that accepts
@@ -96,8 +97,7 @@ async function scoresToStats(region, feats) {
         featureCount: 0,
     };
     let found = false;
-    const { scoreMin, scoreMax, scoreSum, scoreSumSquares, featureCount } = await feats
-        .pipe((0, operators_1.reduce)((acc, f) => {
+    const { scoreMin, scoreMax, scoreSum, scoreSumSquares, featureCount } = await (0, rxjs_1.firstValueFrom)(feats.pipe((0, operators_1.reduce)((acc, f) => {
         const s = f.get('score');
         const summary = f.get('summary');
         const { scoreMax, scoreMin } = acc;
@@ -108,8 +108,7 @@ async function scoresToStats(region, feats) {
         acc.featureCount += 1;
         found = true;
         return acc;
-    }, seed))
-        .toPromise();
+    }, seed)));
     return found
         ? rectifyStats({
             scoreMax,