@jbrowse/core 2.4.1 → 2.4.2

package/ui/ViewContainer.d.ts

@@ -1,10 +1,9 @@
 import React from 'react';
 import { IBaseViewModel } from '../pluggableElementTypes/models';
-declare const ViewContainer: ({ view, onClose, onMinimize, style, children, }: {
+declare const _default: ({ view, onClose, onMinimize, children, }: {
     view: IBaseViewModel;
     onClose: () => void;
     onMinimize: () => void;
-    style?: React.CSSProperties | undefined;
     children: React.ReactNode;
 }) => JSX.Element;
-export default ViewContainer;
+export default _default;

package/ui/ViewContainer.js

@@ -30,19 +30,19 @@ const react_1 = __importStar(require("react"));
 const material_1 = require("@mui/material");
 const mui_1 = require("tss-react/mui");
 const mobx_react_1 = require("mobx-react");
-const mobx_state_tree_1 = require("mobx-state-tree");
-const react_use_measure_1 = __importDefault(require("react-use-measure"));
 // icons
 const Close_1 = __importDefault(require("@mui/icons-material/Close"));
 const Minimize_1 = __importDefault(require("@mui/icons-material/Minimize"));
 const Add_1 = __importDefault(require("@mui/icons-material/Add"));
-const EditableTypography_1 = __importDefault(require("./EditableTypography"));
 const ViewMenu_1 = __importDefault(require("./ViewMenu"));
+const util_1 = require("../util");
+const ViewContainerTitle_1 = __importDefault(require("./ViewContainerTitle"));
 const useStyles = (0, mui_1.makeStyles)()(theme => ({
     viewContainer: {
         overflow: 'hidden',
         background: theme.palette.secondary.main,
         margin: theme.spacing(0.5),
+        padding: `0 ${theme.spacing(1)} ${theme.spacing(1)}`,
     },
     icon: {
         color: theme.palette.secondary.contrastText,
@@ -50,34 +50,11 @@ const useStyles = (0, mui_1.makeStyles)()(theme => ({
     grow: {
         flexGrow: 1,
     },
-    input: {
-        paddingBottom: 0,
-        paddingTop: 2,
-    },
-    inputBase: {
-        color: theme.palette.secondary.contrastText,
-    },
-    inputRoot: {
-        '&:hover': {
-            backgroundColor: theme.palette.secondary.light,
-        },
-    },
-    inputFocused: {
-        borderColor: theme.palette.primary.main,
-        backgroundColor: theme.palette.secondary.light,
-    },
 }));
-const ViewContainer = (0, mobx_react_1.observer)(function ({ view, onClose, onMinimize, style, children, }) {
-    var _a;
+exports.default = (0, mobx_react_1.observer)(function ({ view, onClose, onMinimize, children, }) {
     const { classes } = useStyles();
     const theme = (0, material_1.useTheme)();
-    const padWidth = theme.spacing(1);
-    const [ref, { width }] = (0, react_use_measure_1.default)();
-    (0, react_1.useEffect)(() => {
-        if (width && (0, mobx_state_tree_1.isAlive)(view)) {
-            view.setWidth(width - Number.parseInt(padWidth, 10) * 2);
-        }
-    }, [padWidth, view, width]);
+    const ref = (0, util_1.useWidthSetter)(view, theme.spacing(1));
     const scrollRef = (0, react_1.useRef)(null);
     // scroll the view into view when first mounted
     // note that this effect will run only once, because of
@@ -86,23 +63,14 @@ const ViewContainer = (0, mobx_react_1.observer)(function ({ view, onClose, onMi
         var _a, _b;
         (_b = (_a = scrollRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView) === null || _b === void 0 ? void 0 : _b.call(_a, { block: 'center' });
     }, []);
-    return (react_1.default.createElement(material_1.Paper, { ref: ref, elevation: 12, className: classes.viewContainer, style: { ...style, padding: `0px ${padWidth} ${padWidth}` } },
+    return (react_1.default.createElement(material_1.Paper, { ref: ref, elevation: 12, className: classes.viewContainer },
         react_1.default.createElement("div", { ref: scrollRef, style: { display: 'flex' } },
             react_1.default.createElement(ViewMenu_1.default, { model: view, IconProps: { className: classes.icon } }),
             react_1.default.createElement("div", { className: classes.grow }),
-            react_1.default.createElement(material_1.Tooltip, { title: "Rename view", arrow: true },
-                react_1.default.createElement(EditableTypography_1.default, { value: view.displayName ||
-                        // @ts-expect-error
-                        `${((_a = view.assemblyNames) === null || _a === void 0 ? void 0 : _a.join(',')) || 'Untitled view'}${view.minimized ? ' (minimized)' : ''}`, setValue: val => view.setDisplayName(val), variant: "body2", classes: {
-                        input: classes.input,
-                        inputBase: classes.inputBase,
-                        inputRoot: classes.inputRoot,
-                        inputFocused: classes.inputFocused,
-                    } })),
+            react_1.default.createElement(ViewContainerTitle_1.default, { view: view }),
             react_1.default.createElement("div", { className: classes.grow }),
             react_1.default.createElement(material_1.IconButton, { "data-testid": "minimize_view", onClick: onMinimize }, view.minimized ? (react_1.default.createElement(Add_1.default, { className: classes.icon, fontSize: "small" })) : (react_1.default.createElement(Minimize_1.default, { className: classes.icon, fontSize: "small" }))),
             react_1.default.createElement(material_1.IconButton, { "data-testid": "close_view", onClick: onClose },
                 react_1.default.createElement(Close_1.default, { className: classes.icon, fontSize: "small" }))),
         react_1.default.createElement(material_1.Paper, null, children)));
 });
-exports.default = ViewContainer;

package/ui/ViewContainerTitle.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { IBaseViewModel } from '../pluggableElementTypes';
+declare const _default: ({ view, }: {
+    view: IBaseViewModel;
+}) => JSX.Element;
+export default _default;

package/ui/ViewContainerTitle.js

@@ -0,0 +1,42 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const material_1 = require("@mui/material");
+const mui_1 = require("tss-react/mui");
+const mobx_react_1 = require("mobx-react");
+// locals
+const EditableTypography_1 = __importDefault(require("./EditableTypography"));
+const useStyles = (0, mui_1.makeStyles)()(theme => ({
+    input: {
+        paddingBottom: 0,
+        paddingTop: 2,
+    },
+    inputBase: {
+        color: theme.palette.secondary.contrastText,
+    },
+    inputRoot: {
+        '&:hover': {
+            backgroundColor: theme.palette.secondary.light,
+        },
+    },
+    inputFocused: {
+        borderColor: theme.palette.primary.main,
+        backgroundColor: theme.palette.secondary.light,
+    },
+}));
+exports.default = (0, mobx_react_1.observer)(function ViewContainerTitle({ view, }) {
+    var _a;
+    const { classes } = useStyles();
+    return (react_1.default.createElement(material_1.Tooltip, { title: "Rename view", arrow: true },
+        react_1.default.createElement(EditableTypography_1.default, { value: view.displayName ||
+                // @ts-expect-error
+                `${((_a = view.assemblyNames) === null || _a === void 0 ? void 0 : _a.join(',')) || 'Untitled view'}${view.minimized ? ' (minimized)' : ''}`, setValue: val => view.setDisplayName(val), variant: "body2", classes: {
+                input: classes.input,
+                inputBase: classes.inputBase,
+                inputRoot: classes.inputRoot,
+                inputFocused: classes.inputFocused,
+            } })));
+});

package/util/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import PluginManager from '../PluginManager';
 import { IAnyStateTreeNode, IStateTreeNode } from 'mobx-state-tree';
 import { IReactionPublic, IReactionOptions } from 'mobx';
@@ -14,12 +15,14 @@ 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 useWidthSetter(view: {
+    setWidth: (arg: number) => void;
+}, padding: string): import("react").RefObject<HTMLDivElement>;
 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)[];
-/** find the first node in the hierarchy that matches the given 'is' typescript type guard predicate */
-export declare function findParentThatIs<PREDICATE extends (thing: IAnyStateTreeNode) => boolean>(node: IAnyStateTreeNode, predicate: PREDICATE): TypeTestedByPredicate<PREDICATE> & IAnyStateTreeNode;
+export declare function findParentThatIs<T extends (a: IAnyStateTreeNode) => boolean>(node: IAnyStateTreeNode, predicate: T): TypeTestedByPredicate<T> & IAnyStateTreeNode;
 /** get the current JBrowse session model, starting at any node in the state tree */
 export declare function getSession(node: IAnyStateTreeNode): import("./types").AbstractSessionModel & IAnyStateTreeNode;
 /** get the state model of the view in the state tree that contains the given node */

package/util/index.js

@@ -17,8 +17,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getBpDisplayStr = exports.supportedIndexingAdapters = 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 = void 0;
-exports.isFeature = exports.SimpleFeature = exports.avg = exports.sum = exports.min = exports.max = exports.localStorageSetItem = exports.localStorageGetItem = exports.getEnv = exports.measureGridWidth = exports.getStr = exports.getUriLink = exports.useLocalStorage = exports.getLayoutId = exports.getViewParams = exports.getTickDisplayStr = exports.toLocale = void 0;
+exports.supportedIndexingAdapters = 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.useWidthSetter = exports.useDebounce = exports.inProduction = exports.inDevelopment = void 0;
+exports.isFeature = exports.SimpleFeature = exports.avg = exports.sum = exports.min = exports.max = exports.localStorageSetItem = exports.localStorageGetItem = exports.getEnv = exports.measureGridWidth = exports.getStr = exports.getUriLink = exports.useLocalStorage = exports.getLayoutId = exports.getViewParams = exports.getTickDisplayStr = exports.toLocale = exports.getBpDisplayStr = void 0;
 /* eslint-disable @typescript-eslint/no-explicit-any */
 const react_1 = require("react");
 const is_object_1 = __importDefault(require("is-object"));
@@ -27,6 +27,7 @@ const mobx_1 = require("mobx");
 const types_1 = require("./types");
 const aborting_1 = require("./aborting");
 const types_2 = require("./types");
+const useMeasure_1 = __importDefault(require("@jbrowse/core/util/useMeasure"));
 __exportStar(require("./types"), exports);
 __exportStar(require("./aborting"), exports);
 __exportStar(require("./when"), exports);
@@ -51,6 +52,20 @@ function useDebounce(value, delay) {
     return debouncedValue;
 }
 exports.useDebounce = useDebounce;
+// used in ViewContainer files to get the width
+function useWidthSetter(view, padding) {
+    const [ref, { width }] = (0, useMeasure_1.default)();
+    (0, react_1.useEffect)(() => {
+        if (width && (0, mobx_state_tree_1.isAlive)(view)) {
+            // sets after a requestAnimationFrame
+            // https://stackoverflow.com/a/58701523/2129219
+            // avoids ResizeObserver loop error being shown during development
+            requestAnimationFrame(() => view.setWidth(width - Number.parseInt(padding, 10) * 2));
+        }
+    }, [padding, view, width]);
+    return ref;
+}
+exports.useWidthSetter = useWidthSetter;
 // https://stackoverflow.com/questions/56283920/
 function useDebouncedCallback(callback, wait = 400) {
     // track args & timeout handle between calls
@@ -144,7 +159,7 @@ function springAnimate(fromValue, toValue, setValue, onFinish = () => { }, preci
     ];
 }
 exports.springAnimate = springAnimate;
-/** find the first node in the hierarchy that matches the given 'is' typescript type guard predicate */
+// find the first node in the hierarchy that matches the given 'is' typescript type guard predicate
 function findParentThatIs(node, predicate) {
     return findParentThat(node, predicate);
 }
@@ -616,7 +631,7 @@ async function renameRegionsIfNeeded(assemblyManager, args) {
         throw new Error('sessionId is required');
     }
     const assemblyNames = regions.map(region => region.assemblyName);
-    const assemblyMaps = Object.fromEntries(await Promise.all(assemblyNames.map(async (assemblyName) => {
+    const assemblyMaps = Object.fromEntries(await Promise.all([...new Set(assemblyNames)].map(async (assemblyName) => {
         return [
             assemblyName,
             await assemblyManager.getRefNameMapForAdapter(adapterConfig, assemblyName, args),

package/util/io/index.d.ts

@@ -1,6 +1,8 @@
 import { GenericFilehandle, Fetcher } from 'generic-filehandle';
-import { FileLocation } from '../types';
+import { FileLocation, UriLocation } from '../types';
 import PluginManager from '../../PluginManager';
+/** if a UriLocation has a baseUri, resolves its uri with respect to that base */
+export declare function resolveUriLocation(location: UriLocation): UriLocation;
 export declare function openLocation(location: FileLocation, pluginManager?: PluginManager): GenericFilehandle;
 export declare function getFetcher(location: FileLocation, pluginManager?: PluginManager): Fetcher;
 export { RemoteFileWithRangeCache } from './RemoteFileWithRangeCache';

package/util/io/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.RemoteFileWithRangeCache = exports.getFetcher = exports.openLocation = void 0;
+exports.RemoteFileWithRangeCache = exports.getFetcher = exports.openLocation = exports.resolveUriLocation = void 0;
 const generic_filehandle_1 = require("generic-filehandle");
 const detect_node_1 = __importDefault(require("detect-node"));
 // locals
@@ -17,6 +17,13 @@ function isLocalPathLocation(location) {
 function isBlobLocation(location) {
     return 'blobId' in location;
 }
+/** if a UriLocation has a baseUri, resolves its uri with respect to that base */
+function resolveUriLocation(location) {
+    return location.baseUri
+        ? { ...location, uri: new URL(location.uri, location.baseUri).href }
+        : location;
+}
+exports.resolveUriLocation = resolveUriLocation;
 function openLocation(location, pluginManager) {
     if (!location) {
         throw new Error('must provide a location to openLocation');
@@ -46,9 +53,7 @@ function openLocation(location, pluginManager) {
             throw new Error('No URI provided');
         }
         // Resolve any relative URLs to absolute URLs
-        const absoluteLocation = location.baseUri
-            ? { ...location, uri: new URL(location.uri, location.baseUri).href }
-            : location;
+        const absoluteLocation = resolveUriLocation(location);
         // If there is a plugin manager, we can try internet accounts
         if (pluginManager) {
             const internetAccount = getInternetAccount(location, pluginManager);

package/util/mst-reflection.d.ts

@@ -1,29 +1,24 @@
+import { IAnyType, IModelReflectionPropertiesData, IAnyComplexType, ISimpleType, UnionStringArray } from 'mobx-state-tree';
+export interface ILiteralType<T> extends ISimpleType<T> {
+    value: T;
+}
 /**
  * get the inner type of an MST optional, array, or late type object
- *
- * @param {IModelType} type
- * @returns {IModelType}
  */
-export function getSubType(type: IModelType): IModelType;
+export declare function getSubType(type: IAnyType): IAnyType;
 /**
- * get the array of
- * @param {MST Union Type obj} unionType
- * @returns {Array<IModelType>}
+ * get the array of the subtypes in a union
  */
-export function getUnionSubTypes(unionType: any): Array<IModelType>;
+export declare function getUnionSubTypes(unionType: IAnyType): IAnyType[];
 /**
  * get the type of one of the properties of the given MST model type
- *
- * @param {IModelType} type
- * @param {string} propertyName
- * @returns {IModelType}
  */
-export function getPropertyType(type: IModelType, propertyName: string): IModelType;
+export declare function getPropertyType(type: IModelReflectionPropertiesData, propertyName: string): IAnyType;
 /**
  * get the base type from inside an MST optional type
- * @param {*} type
  */
-export function getDefaultValue(type: any): any;
+export declare function getDefaultValue(type: IAnyType): any;
+export type IEnumerationType<T extends string> = ISimpleType<UnionStringArray<T[]>>;
 /** get the string values of an MST enumeration type */
-export function getEnumerationValues(type: any): any[];
-export function resolveLateType(maybeLate: any): any;
+export declare function getEnumerationValues(type: IAnyComplexType): string[];
+export declare function resolveLateType(maybeLate: IAnyType): any;

package/util/mst-reflection.js

@@ -5,19 +5,20 @@ exports.resolveLateType = exports.getEnumerationValues = exports.getDefaultValue
 const mobx_state_tree_1 = require("mobx-state-tree");
 /**
  * get the inner type of an MST optional, array, or late type object
- *
- * @param {IModelType} type
- * @returns {IModelType}
  */
 function getSubType(type) {
     let t;
     if ((0, mobx_state_tree_1.isOptionalType)(type)) {
+        // @ts-expect-error
         t = type._subtype || type.type;
     }
     else if ((0, mobx_state_tree_1.isArrayType)(type) || (0, mobx_state_tree_1.isMapType)(type)) {
+        // @ts-expect-error
         t = type._subtype || type._subType || type.subType;
+        // @ts-expect-error
     }
     else if (typeof type.getSubType === 'function') {
+        // @ts-expect-error
         return type.getSubType();
     }
     else {
@@ -31,17 +32,20 @@ function getSubType(type) {
 }
 exports.getSubType = getSubType;
 /**
- * get the array of
- * @param {MST Union Type obj} unionType
- * @returns {Array<IModelType>}
+ * get the array of the subtypes in a union
  */
 function getUnionSubTypes(unionType) {
     if (!(0, mobx_state_tree_1.isUnionType)(unionType)) {
         throw new TypeError('not an MST union type');
     }
-    const t = unionType._types ||
+    const t = 
+    // @ts-expect-error
+    unionType._types ||
+        // @ts-expect-error
         unionType.types ||
+        // @ts-expect-error
         getSubType(unionType)._types ||
+        // @ts-expect-error
         getSubType(unionType).types;
     if (!t) {
         // debugger
@@ -52,10 +56,6 @@ function getUnionSubTypes(unionType) {
 exports.getUnionSubTypes = getUnionSubTypes;
 /**
  * get the type of one of the properties of the given MST model type
- *
- * @param {IModelType} type
- * @param {string} propertyName
- * @returns {IModelType}
  */
 function getPropertyType(type, propertyName) {
     const propertyType = type.properties[propertyName];
@@ -64,12 +64,12 @@ function getPropertyType(type, propertyName) {
 exports.getPropertyType = getPropertyType;
 /**
  * get the base type from inside an MST optional type
- * @param {*} type
  */
 function getDefaultValue(type) {
     if (!(0, mobx_state_tree_1.isOptionalType)(type)) {
         throw new TypeError('type must be an optional type');
     }
+    // @ts-expect-error
     return type._defaultValue || type.defaultValue;
 }
 exports.getDefaultValue = getDefaultValue;
@@ -84,6 +84,7 @@ function resolveLateType(maybeLate) {
     if (!(0, mobx_state_tree_1.isUnionType)(maybeLate) &&
         !(0, mobx_state_tree_1.isArrayType)(maybeLate) &&
         (0, mobx_state_tree_1.isLateType)(maybeLate)) {
+        // @ts-expect-error
         return maybeLate.getSubType();
     }
     return maybeLate;

package/util/types/index.d.ts

@@ -194,6 +194,7 @@ 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 */
 export interface Region extends SnapshotIn<typeof MUIRegion> {
 }
 export interface AugmentedRegion extends Region {

package/util/useMeasure.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export default function useMeasure(): readonly [import("react").RefObject<HTMLDivElement>, {
+    width?: number | undefined;
+    height?: number | undefined;
+}];

package/util/useMeasure.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+function useMeasure() {
+    const ref = (0, react_1.useRef)(null);
+    const [dims, setDims] = (0, react_1.useState)({
+        width: undefined,
+        height: undefined,
+    });
+    (0, react_1.useEffect)(() => {
+        if (!ref.current) {
+            return;
+        }
+        const RS = typeof window !== 'undefined' && 'ResizeObserver' in window
+            ? window.ResizeObserver
+            : undefined;
+        if (!RS) {
+            return;
+        }
+        const observer = new RS(entries => {
+            setDims({
+                width: entries[0].contentRect.width,
+                height: entries[0].contentRect.height,
+            });
+        });
+        observer.observe(ref.current);
+        // Callback fired when component is unmounted
+        return () => {
+            observer.disconnect();
+        };
+    }, []);
+    return [ref, dims];
+}
+exports.default = useMeasure;