@jbrowse/core 2.11.1 → 2.12.0

package/ui/Dialog.js

@@ -12,6 +12,7 @@ const react_error_boundary_1 = require("react-error-boundary");
 const Close_1 = __importDefault(require("@mui/icons-material/Close"));
 // locals
 const ErrorMessage_1 = __importDefault(require("./ErrorMessage"));
+const SanitizedHTML_1 = __importDefault(require("./SanitizedHTML"));
 const useStyles = (0, mui_1.makeStyles)()(theme => ({
     closeButton: {
         position: 'absolute',
@@ -31,7 +32,7 @@ const Dialog = (0, mobx_react_1.observer)(function (props) {
     return (react_1.default.createElement(material_1.Dialog, { ...props },
         react_1.default.createElement(material_1.ScopedCssBaseline, null,
             react_1.default.isValidElement(header) ? (header) : (react_1.default.createElement(material_1.DialogTitle, null,
-                title,
+                react_1.default.createElement(SanitizedHTML_1.default, { html: title || '' }),
                 onClose ? (react_1.default.createElement(material_1.IconButton, { className: classes.closeButton, onClick: () => {
                         // @ts-expect-error
                         onClose();

package/ui/ErrorMessageStackTraceDialog.js

@@ -28,6 +28,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importStar(require("react"));
 const material_1 = require("@mui/material");
+const mui_1 = require("tss-react/mui");
 const source_map_js_1 = require("source-map-js");
 const copy_to_clipboard_1 = __importDefault(require("copy-to-clipboard"));
 // locals
@@ -90,7 +91,7 @@ async function mapStackTrace(stack) {
             mappedStack.push(line);
             continue;
         }
-        mappedStack.push(`${originalPosition.source}:${originalPosition.line}:${originalPosition.column + 1}`);
+        mappedStack.push(`${originalPosition.source}:${originalPosition.line}:${originalPosition.column + 1} (${match[1].trim()})`);
     }
     return mappedStack.join('\n');
 }
@@ -107,7 +108,17 @@ function stripMessage(trace, error) {
         return trace;
     }
 }
+const useStyles = (0, mui_1.makeStyles)()(theme => ({
+    pre: {
+        background: (0, material_1.alpha)(theme.palette.error.main, 0.2),
+        border: `1px solid ${theme.palette.divider}`,
+        overflow: 'auto',
+        margin: 20,
+        maxHeight: 300,
+    },
+}));
 function Contents({ text, extra }) {
+    const { classes } = useStyles();
     const err = encodeURIComponent([
         'I got this error from JBrowse, here is the stack trace:\n',
         '```',
@@ -129,13 +140,7 @@ function Contents({ text, extra }) {
             " or send an email to ",
             react_1.default.createElement(Link2, { href: emailLink }, email),
             ' '),
-        react_1.default.createElement("pre", { style: {
-                background: 'lightgrey',
-                border: '1px solid black',
-                overflow: 'auto',
-                margin: 20,
-                maxHeight: 300,
-            } }, err2)));
+        react_1.default.createElement("pre", { className: classes.pre }, err2)));
 }
 function ErrorMessageStackTraceDialog({ error, onClose, extra, }) {
     const [mappedStackTrace, setMappedStackTrace] = (0, react_1.useState)();

package/util/Base1DUtils.d.ts

@@ -19,7 +19,7 @@ export declare function pxToBp(self: ViewSnap, px: number): {
     offset: number;
     start: number;
     end: number;
-    reversed: boolean;
+    reversed?: boolean;
 };
 export declare function bpToPx({ refName, coord, regionNumber, self, }: {
     refName: string;

package/util/Base1DUtils.js

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 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;
     const { displayedRegions } = self;
@@ -69,8 +68,7 @@ function pxToBp(self, px) {
     const bp = (offsetPx + px) * bpPerPx;
     if (bp < 0) {
         const r = displayedRegions[0];
-        const snap = (0, mobx_state_tree_1.getSnapshot)(r);
-        // @ts-expect-error
+        const snap = r;
         return {
             // xref https://github.com/mobxjs/mobx-state-tree/issues/1524 for Omit
             ...snap,
@@ -87,8 +85,7 @@ function pxToBp(self, px) {
         const len = r.end - r.start;
         const offset = bp - bpSoFar;
         if (len + bpSoFar > bp && bpSoFar <= bp) {
-            const snap = (0, mobx_state_tree_1.getSnapshot)(r);
-            // @ts-expect-error
+            const snap = r;
             return {
                 // xref https://github.com/mobxjs/mobx-state-tree/issues/1524 for Omit
                 ...snap,
@@ -112,8 +109,7 @@ function pxToBp(self, px) {
         const r = displayedRegions.at(-1);
         const len = r.end - r.start;
         const offset = bp - bpSoFar + len;
-        const snap = (0, mobx_state_tree_1.getSnapshot)(r);
-        // @ts-expect-error
+        const snap = r;
         return {
             // xref https://github.com/mobxjs/mobx-state-tree/issues/1524 for Omit
             ...snap,

package/util/Base1DViewModel.d.ts

@@ -4,16 +4,7 @@ import { Region as IRegion } from './types';
 import { BpOffset } from './Base1DUtils';
 declare const Base1DView: import("mobx-state-tree").IModelType<{
     id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
-    displayedRegions: import("mobx-state-tree").IArrayType<import("mobx-state-tree").IModelType<{
-        refName: import("mobx-state-tree").ISimpleType<string>;
-        start: import("mobx-state-tree").ISimpleType<number>;
-        end: import("mobx-state-tree").ISimpleType<number>;
-        reversed: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
-    } & {
-        assemblyName: import("mobx-state-tree").ISimpleType<string>;
-    }, {
-        setRefName(newRefName: string): void;
-    }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
+    displayedRegions: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").IType<IRegion[], IRegion[], IRegion[]>, [undefined]>;
     bpPerPx: import("mobx-state-tree").IType<number | undefined, number, number>;
     offsetPx: import("mobx-state-tree").IType<number | undefined, number, number>;
     interRegionPaddingWidth: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<number>, [undefined]>;
@@ -78,16 +69,14 @@ declare const Base1DView: import("mobx-state-tree").IModelType<{
      */
     pxToBp(px: number): {
         coord: number;
-        index: number; /**
-         * #getter
-         */
+        index: number;
         refName: string;
         oob: boolean;
         assemblyName: string;
         offset: number;
         start: number;
         end: number;
-        reversed: boolean;
+        reversed?: boolean | undefined;
     };
     /**
      * #method
@@ -136,8 +125,8 @@ declare const Base1DView: import("mobx-state-tree").IModelType<{
 } & {
     /**
      * #action
-     * offset is the base-pair-offset in the displayed region, index is the index of the
-     * displayed region in the linear genome view
+     * offset is the base-pair-offset in the displayed region, index is the
+     * index of the displayed region in the linear genome view
      *
      * @param start - object as `{start, end, offset, index}`
      * @param end - object as `{start, end, offset, index}`

package/util/Base1DViewModel.js

@@ -24,7 +24,7 @@ const Base1DView = mobx_state_tree_1.types
     /**
      * #property
      */
-    displayedRegions: mobx_state_tree_1.types.array(mst_1.Region),
+    displayedRegions: mobx_state_tree_1.types.optional(mobx_state_tree_1.types.frozen(), []),
     /**
      * #property
      */
@@ -77,9 +77,7 @@ const Base1DView = mobx_state_tree_1.types
      * #getter
      */
     get assemblyNames() {
-        return [
-            ...new Set(self.displayedRegions.map(region => region.assemblyName)),
-        ];
+        return [...new Set(self.displayedRegions.map(r => r.assemblyName))];
     },
     /**
      * #getter
@@ -107,9 +105,7 @@ const Base1DView = mobx_state_tree_1.types
      * #getter
      */
     get totalBp() {
-        return self.displayedRegions
-            .map(a => a.end - a.start)
-            .reduce((a, b) => a + b, 0);
+        return (0, index_1.sum)(self.displayedRegions.map(a => a.end - a.start));
     },
 }))
     .views(self => ({
@@ -129,9 +125,7 @@ const Base1DView = mobx_state_tree_1.types
      * #getter
      */
     get currBp() {
-        return this.dynamicBlocks
-            .map(a => a.end - a.start)
-            .reduce((a, b) => a + b, 0);
+        return (0, index_1.sum)(this.dynamicBlocks.map(a => a.end - a.start));
     },
 }))
     .views(self => ({
@@ -230,8 +224,8 @@ const Base1DView = mobx_state_tree_1.types
     .actions(self => ({
     /**
      * #action
-     * offset is the base-pair-offset in the displayed region, index is the index of the
-     * displayed region in the linear genome view
+     * offset is the base-pair-offset in the displayed region, index is the
+     * index of the displayed region in the linear genome view
      *
      * @param start - object as `{start, end, offset, index}`
      * @param end - object as `{start, end, offset, index}`

package/util/blockTypes.d.ts

@@ -21,6 +21,7 @@ export declare class BlockSet {
     get totalBp(): number;
 }
 export declare class BaseBlock {
+    type: string;
     regionNumber?: number;
     reversed?: boolean;
     refName: string;
@@ -45,12 +46,14 @@ export declare class BaseBlock {
     };
 }
 export declare class ContentBlock extends BaseBlock {
+    type: string;
 }
 /**
  * marker block representing one or more blocks that are
  * too small to be shown at the current zoom level
  */
 export declare class ElidedBlock extends BaseBlock {
+    type: string;
     widthPx: number;
     elidedBlockCount: number;
     constructor(data: Record<string, any>);
@@ -61,5 +64,6 @@ export declare class ElidedBlock extends BaseBlock {
  * and provides a thick border between them
  */
 export declare class InterRegionPaddingBlock extends BaseBlock {
+    type: string;
 }
 export {};

package/util/blockTypes.js

@@ -7,9 +7,10 @@ class BlockSet {
         this.blocks = blocks;
     }
     push(block) {
-        if (block instanceof ElidedBlock && this.blocks.length > 0) {
+        if (block.type === 'ElidedBlock' && this.blocks.length > 0) {
             const lastBlock = this.blocks.at(-1);
-            if (lastBlock instanceof ElidedBlock) {
+            if ((lastBlock === null || lastBlock === void 0 ? void 0 : lastBlock.type) === 'ElidedBlock') {
+                ;
                 lastBlock.push(block);
                 return;
             }
@@ -49,7 +50,7 @@ class BlockSet {
         return this.blocks.length > 0 ? this.blocks[0].offsetPx : 0;
     }
     get contentBlocks() {
-        return this.blocks.filter(block => block instanceof ContentBlock);
+        return this.blocks.filter(block => block.type === 'ContentBlock');
     }
     get totalBp() {
         return (0, _1.sum)(this.contentBlocks.map(block => block.end - block.start));
@@ -62,6 +63,7 @@ class BaseBlock {
      */
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     constructor(data) {
+        this.type = 'BaseBlock';
         this.widthPx = 0;
         Object.assign(this, data);
         this.assemblyName = data.assemblyName;
@@ -83,6 +85,10 @@ class BaseBlock {
 }
 exports.BaseBlock = BaseBlock;
 class ContentBlock extends BaseBlock {
+    constructor() {
+        super(...arguments);
+        this.type = 'ContentBlock';
+    }
 }
 exports.ContentBlock = ContentBlock;
 /**
@@ -93,6 +99,7 @@ class ElidedBlock extends BaseBlock {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     constructor(data) {
         super(data);
+        this.type = 'ElidedBlock';
         this.elidedBlockCount = 0;
         this.widthPx = data.widthPx;
     }
@@ -112,5 +119,9 @@ exports.ElidedBlock = ElidedBlock;
  * and provides a thick border between them
  */
 class InterRegionPaddingBlock extends BaseBlock {
+    constructor() {
+        super(...arguments);
+        this.type = 'InterRegionPaddingBlock';
+    }
 }
 exports.InterRegionPaddingBlock = InterRegionPaddingBlock;

package/util/calculateDynamicBlocks.js

@@ -38,10 +38,9 @@ function calculateDynamicBlocks(model, padding = true, elision = true) {
         const displayedRegionRightPx = displayedRegionLeftPx + (regionEnd - regionStart) / bpPerPx;
         const regionWidthPx = (regionEnd - regionStart) / bpPerPx;
         const parentRegion = (0, mobx_state_tree_1.isStateTreeNode)(region) ? (0, mobx_state_tree_1.getSnapshot)(region) : region;
-        if (displayedRegionLeftPx < windowRightPx &&
-            displayedRegionRightPx > windowLeftPx) {
+        const [leftPx, rightPx] = (0, range_1.intersection2)(windowLeftPx, windowRightPx, displayedRegionLeftPx, displayedRegionRightPx);
+        if (leftPx !== undefined && rightPx !== undefined) {
             // this displayed region overlaps the view, so make a record for it
-            const [leftPx, rightPx] = (0, range_1.intersection2)(windowLeftPx, windowRightPx, displayedRegionLeftPx, displayedRegionRightPx);
             let start;
             let end;
             let isLeftEndOfDisplayedRegion;

package/util/index.d.ts

@@ -337,7 +337,7 @@ export interface ViewSnap {
         start: number;
         end: number;
         refName: string;
-        reversed: boolean;
+        reversed?: boolean;
         assemblyName: string;
     })[];
 }

package/util/range.d.ts

@@ -5,7 +5,7 @@
  *
  * @returns array of [left, right], or [] if the ranges do not intersect. the choice of [] is because it allows destructuring array assignment without check for undefined return
  */
-export declare function intersection2(left1: number, right1: number, left2: number, right2: number): number[];
+export declare function intersection2(left1: number, right1: number, left2: number, right2: number): [number, number] | [];
 /**
  * Return whether 2 interbase coordinate ranges intersect.
  *

package/util/tracks.d.ts

@@ -4,11 +4,12 @@ import { AnyConfigurationModel } from '../configuration';
 export declare function getTrackAssemblyNames(track: IAnyStateTreeNode & {
     configuration: AnyConfigurationModel;
 }): string[];
+export declare function getConfAssemblyNames(conf: AnyConfigurationModel): string[];
 /** return the rpcSessionId of the highest parent node in the tree that has an rpcSessionId */
 export declare function getRpcSessionId(thisNode: IAnyStateTreeNode): string;
 /**
- * given an MST node, get the renderprops of the first parent container that has
- * renderProps
+ * given an MST node, get the renderprops of the first parent container that
+ * has renderProps
  * @param node -
  * @returns renderprops, or empty object if none found
  */

package/util/tracks.js

@@ -1,23 +1,27 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getTrackName = exports.generateUnknownTrackConf = exports.generateUnsupportedTrackConf = exports.guessTrackType = exports.guessAdapter = exports.getFileName = exports.makeIndexType = exports.makeIndex = exports.storeBlobLocation = exports.setBlobMap = exports.getBlobMap = exports.getBlob = exports.UNSUPPORTED = exports.UNKNOWN = exports.getParentRenderProps = exports.getRpcSessionId = exports.getTrackAssemblyNames = void 0;
+exports.getTrackName = exports.generateUnknownTrackConf = exports.generateUnsupportedTrackConf = exports.guessTrackType = exports.guessAdapter = exports.getFileName = exports.makeIndexType = exports.makeIndex = exports.storeBlobLocation = exports.setBlobMap = exports.getBlobMap = exports.getBlob = exports.UNSUPPORTED = exports.UNKNOWN = exports.getParentRenderProps = exports.getRpcSessionId = exports.getConfAssemblyNames = exports.getTrackAssemblyNames = void 0;
 const mobx_state_tree_1 = require("mobx-state-tree");
 const index_1 = require("./index");
 const configuration_1 = require("../configuration");
 /* utility functions for use by track models and so forth */
 function getTrackAssemblyNames(track) {
-    const trackAssemblyNames = (0, configuration_1.getConf)(track, 'assemblyNames');
+    return getConfAssemblyNames(track.configuration);
+}
+exports.getTrackAssemblyNames = getTrackAssemblyNames;
+function getConfAssemblyNames(conf) {
+    const trackAssemblyNames = (0, configuration_1.readConfObject)(conf, 'assemblyNames');
     if (!trackAssemblyNames) {
         // Check if it's an assembly sequence track
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        const parent = (0, mobx_state_tree_1.getParent)(track.configuration);
+        const parent = (0, mobx_state_tree_1.getParent)(conf);
         if ('sequence' in parent) {
             return [(0, configuration_1.readConfObject)(parent, 'name')];
         }
     }
     return trackAssemblyNames;
 }
-exports.getTrackAssemblyNames = getTrackAssemblyNames;
+exports.getConfAssemblyNames = getConfAssemblyNames;
 /** return the rpcSessionId of the highest parent node in the tree that has an rpcSessionId */
 function getRpcSessionId(thisNode) {
     let highestRpcSessionId;
@@ -34,8 +38,8 @@ function getRpcSessionId(thisNode) {
 }
 exports.getRpcSessionId = getRpcSessionId;
 /**
- * given an MST node, get the renderprops of the first parent container that has
- * renderProps
+ * given an MST node, get the renderprops of the first parent container that
+ * has renderProps
  * @param node -
  * @returns renderprops, or empty object if none found
  */

package/util/types/index.d.ts

@@ -225,7 +225,10 @@ export interface AbstractMenuManager {
 export declare function isAbstractMenuManager(thing: unknown): thing is AbstractMenuManager;
 export interface NoAssemblyRegion extends SnapshotIn<typeof MUNoAssemblyRegion> {
 }
-/** a description of a specific genomic region. assemblyName, refName, start, end, and reversed */
+/**
+ * a description of a specific genomic region. assemblyName, refName, start,
+ * end, and reversed
+ */
 export interface Region extends SnapshotIn<typeof MUIRegion> {
 }
 export interface AugmentedRegion extends Region {

package/ui/ResizeBar.d.ts

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

package/ui/ResizeBar.js

@@ -1,80 +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 (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 mui_1 = require("tss-react/mui");
-// locals
-const ResizeHandle_1 = __importDefault(require("./ResizeHandle"));
-const useStyles = (0, mui_1.makeStyles)()(theme => ({
-    resizeBar: {
-        background: theme.palette.action.disabledBackground,
-        height: 12,
-        position: 'relative',
-        overflow: 'hidden',
-    },
-    tick: {
-        position: 'absolute',
-        height: '100%',
-        pointerEvents: 'none',
-        background: theme.palette.action.disabled,
-        width: 1,
-    },
-    hiddenTick: {
-        position: 'absolute',
-        height: '100%',
-        width: 5,
-    },
-}));
-function Tick({ left, scrollLeft, idx, onDrag, onMouseDown, }) {
-    const { classes } = useStyles();
-    const onDragCallback = (0, react_1.useCallback)((lastFrameDistance, totalDistance) => onDrag(lastFrameDistance, totalDistance, 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: onDragCallback, onMouseDown: onMouseDown, 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 = [];
-    const [initial, setInitial] = (0, react_1.useState)();
-    let init = checkbox ? 52 : 0;
-    for (let i = 0; i < widths.length; i++) {
-        const width = widths[i];
-        offsets[i] = width + init;
-        init += width;
-    }
-    return (react_1.default.createElement("div", { className: classes.resizeBar }, offsets.map((left, i) => (react_1.default.createElement(Tick, { key: i, onMouseDown: () => {
-            setInitial([...widths]);
-        }, left: i === offsets.length - 1 ? left - 3 : left, onDrag: (_, totalDistance, idx) => {
-            const newWidths = [...widths];
-            // mui doesn't allow columns smaller than 50
-            newWidths[idx] = Math.max(initial[idx] - totalDistance, 50);
-            setWidths(newWidths);
-        }, idx: i, scrollLeft: scrollLeft })))));
-}
-exports.default = ResizeBar;

package/ui/useResizeBar.d.ts

@@ -1,5 +0,0 @@
-/// <reference types="react" />
-export declare function useResizeBar(): {
-    ref: import("react").RefObject<HTMLDivElement>;
-    scrollLeft: number;
-};

package/ui/useResizeBar.js

@@ -1,22 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useResizeBar = void 0;
-const react_1 = require("react");
-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;