@jbrowse/core 3.3.0 → 3.5.0

package/ui/Dialog.d.ts

@@ -1,6 +1,7 @@
 import type { DialogProps } from '@mui/material';
 interface Props extends DialogProps {
     header?: React.ReactNode;
+    titleNode?: React.ReactNode;
 }
 declare const Dialog: (props: Props) => import("react/jsx-runtime").JSX.Element;
 export default Dialog;

package/ui/Dialog.js

@@ -19,15 +19,21 @@ const useStyles = (0, mui_1.makeStyles)()(theme => ({
         top: theme.spacing(1),
         color: theme.palette.grey[500],
     },
+    errorBox: {
+        width: 800,
+        margin: 40,
+    },
 }));
 function DialogError({ error }) {
-    return ((0, jsx_runtime_1.jsx)("div", { style: { width: 800, margin: 40 }, children: (0, jsx_runtime_1.jsx)(ErrorMessage_1.default, { error: error }) }));
+    const { classes } = useStyles();
+    return ((0, jsx_runtime_1.jsx)("div", { className: classes.errorBox, children: (0, jsx_runtime_1.jsx)(ErrorMessage_1.default, { error: error }) }));
 }
 const Dialog = (0, mobx_react_1.observer)(function (props) {
     const { classes } = useStyles();
-    const { title, header, children, onClose } = props;
+    const { titleNode, ...rest } = props;
+    const { title, header, children, onClose } = rest;
     const theme = (0, material_1.useTheme)();
-    return ((0, jsx_runtime_1.jsx)(material_1.Dialog, { ...props, children: (0, jsx_runtime_1.jsxs)(material_1.ScopedCssBaseline, { children: [(0, react_1.isValidElement)(header) ? (header) : ((0, jsx_runtime_1.jsxs)(material_1.DialogTitle, { children: [(0, jsx_runtime_1.jsx)(SanitizedHTML_1.default, { html: title || '' }), onClose ? ((0, jsx_runtime_1.jsx)(material_1.IconButton, { className: classes.closeButton, onClick: () => {
+    return ((0, jsx_runtime_1.jsx)(material_1.Dialog, { ...rest, children: (0, jsx_runtime_1.jsxs)(material_1.ScopedCssBaseline, { children: [(0, react_1.isValidElement)(header) ? (header) : ((0, jsx_runtime_1.jsxs)(material_1.DialogTitle, { children: [titleNode || (0, jsx_runtime_1.jsx)(SanitizedHTML_1.default, { html: title || '' }), onClose ? ((0, jsx_runtime_1.jsx)(material_1.IconButton, { className: classes.closeButton, onClick: () => {
                                 onClose();
                             }, children: (0, jsx_runtime_1.jsx)(Close_1.default, {}) })) : null] })), (0, jsx_runtime_1.jsx)(material_1.Divider, {}), (0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { FallbackComponent: DialogError, children: (0, jsx_runtime_1.jsx)(material_1.ThemeProvider, { theme: (0, material_1.createTheme)(theme, {
                             components: {

package/ui/ErrorMessageStackTraceDialog.js

@@ -11,10 +11,8 @@ const copy_to_clipboard_1 = __importDefault(require("copy-to-clipboard"));
 const source_map_js_1 = require("source-map-js");
 const mui_1 = require("tss-react/mui");
 const Dialog_1 = __importDefault(require("./Dialog"));
+const ExternalLink_1 = __importDefault(require("./ExternalLink"));
 const LoadingEllipses_1 = __importDefault(require("./LoadingEllipses"));
-function Link2({ href, children, }) {
-    return ((0, jsx_runtime_1.jsx)(material_1.Link, { target: "_blank", href: href, children: children }));
-}
 async function myfetch(uri) {
     const res = await fetch(uri);
     if (!res.ok) {
@@ -106,7 +104,7 @@ function Contents({ text, extra }) {
     const email = 'jbrowse2@berkeley.edu';
     const githubLink = `https://github.com/GMOD/jbrowse-components/issues/new?labels=bug&title=JBrowse+issue&body=${err}`;
     const emailLink = `mailto:${email}?subject=JBrowse%202%20error&body=${err}`;
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.Typography, { children: ["Post a new issue at ", (0, jsx_runtime_1.jsx)(Link2, { href: githubLink, children: "GitHub" }), " or send an email to ", (0, jsx_runtime_1.jsx)(Link2, { href: emailLink, children: email }), ' '] }), (0, jsx_runtime_1.jsx)("pre", { className: classes.pre, children: err2 })] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.Typography, { children: ["Post a new issue at", ' ', (0, jsx_runtime_1.jsx)(ExternalLink_1.default, { href: githubLink, children: "GitHub" }), " or send an email to ", (0, jsx_runtime_1.jsx)(ExternalLink_1.default, { href: emailLink, children: email }), ' '] }), (0, jsx_runtime_1.jsx)("pre", { className: classes.pre, children: err2 })] }));
 }
 function ErrorMessageStackTraceDialog({ error, onClose, extra, }) {
     const [mappedStackTrace, setMappedStackTrace] = (0, react_1.useState)();

package/ui/ExternalLink.d.ts

@@ -0,0 +1,2 @@
+import type { LinkProps } from '@mui/material';
+export default function ExternalLink(props: LinkProps): import("react/jsx-runtime").JSX.Element;

package/ui/ExternalLink.js

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = ExternalLink;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const OpenInNew_1 = __importDefault(require("@mui/icons-material/OpenInNew"));
+const material_1 = require("@mui/material");
+function ExternalLink(props) {
+    const { children, ...rest } = props;
+    return ((0, jsx_runtime_1.jsxs)(material_1.Link, { ...rest, target: "_blank", rel: "noopener noreferrer", children: [children, " ", (0, jsx_runtime_1.jsx)(OpenInNew_1.default, { fontSize: "small" })] }));
+}

package/ui/index.d.ts

@@ -12,6 +12,8 @@ export { default as LoadingEllipses } from './LoadingEllipses';
 export { default as Menu } from './Menu';
 export { default as PrerenderedCanvas } from './PrerenderedCanvas';
 export { default as ResizeHandle } from './ResizeHandle';
+export { default as ExternalLink } from './ExternalLink';
 export { default as SanitizedHTML } from './SanitizedHTML';
+export { default as BaseTooltip } from './BaseTooltip';
 export * from './Menu';
 export declare const VIEW_HEADER_HEIGHT = 28;

package/ui/index.js

@@ -17,7 +17,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.VIEW_HEADER_HEIGHT = exports.SanitizedHTML = exports.ResizeHandle = exports.PrerenderedCanvas = exports.Menu = exports.LoadingEllipses = exports.FileSelector = exports.FatalErrorDialog = exports.ErrorMessage = exports.EditableTypography = exports.Dialog = exports.CascadingMenuButton = exports.CascadingMenu = exports.AssemblySelector = exports.Logomark = exports.LogoFull = void 0;
+exports.VIEW_HEADER_HEIGHT = exports.BaseTooltip = exports.SanitizedHTML = exports.ExternalLink = exports.ResizeHandle = exports.PrerenderedCanvas = exports.Menu = exports.LoadingEllipses = exports.FileSelector = exports.FatalErrorDialog = exports.ErrorMessage = exports.EditableTypography = exports.Dialog = exports.CascadingMenuButton = exports.CascadingMenu = exports.AssemblySelector = exports.Logomark = exports.LogoFull = void 0;
 __exportStar(require("./theme"), exports);
 var Logo_1 = require("./Logo");
 Object.defineProperty(exports, "LogoFull", { enumerable: true, get: function () { return Logo_1.LogoFull; } });
@@ -46,7 +46,11 @@ var PrerenderedCanvas_1 = require("./PrerenderedCanvas");
 Object.defineProperty(exports, "PrerenderedCanvas", { enumerable: true, get: function () { return __importDefault(PrerenderedCanvas_1).default; } });
 var ResizeHandle_1 = require("./ResizeHandle");
 Object.defineProperty(exports, "ResizeHandle", { enumerable: true, get: function () { return __importDefault(ResizeHandle_1).default; } });
+var ExternalLink_1 = require("./ExternalLink");
+Object.defineProperty(exports, "ExternalLink", { enumerable: true, get: function () { return __importDefault(ExternalLink_1).default; } });
 var SanitizedHTML_1 = require("./SanitizedHTML");
 Object.defineProperty(exports, "SanitizedHTML", { enumerable: true, get: function () { return __importDefault(SanitizedHTML_1).default; } });
+var BaseTooltip_1 = require("./BaseTooltip");
+Object.defineProperty(exports, "BaseTooltip", { enumerable: true, get: function () { return __importDefault(BaseTooltip_1).default; } });
 __exportStar(require("./Menu"), exports);
 exports.VIEW_HEADER_HEIGHT = 28;

package/ui/theme.d.ts

@@ -1,4 +1,4 @@
-import type { ThemeOptions } from '@mui/material/styles';
+import type { ThemeOptions } from '@mui/material';
 import type { PaletteColor } from '@mui/material/styles/createPalette';
 type MaybePaletteColor = PaletteColor | undefined;
 type Frames = [
@@ -55,5 +55,5 @@ declare module '@mui/material/styles/createPalette' {
 export declare const defaultThemes: ThemeMap;
 export declare function createJBrowseBaseTheme(theme?: ThemeOptions): ThemeOptions;
 type ThemeMap = Record<string, ThemeOptions>;
-export declare function createJBrowseTheme(configTheme?: ThemeOptions, themes?: ThemeMap, themeName?: string): import("@mui/material/styles").Theme;
+export declare function createJBrowseTheme(configTheme?: ThemeOptions, themes?: ThemeMap, themeName?: string): import("@mui/material").Theme;
 export {};

package/ui/theme.js

@@ -6,10 +6,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.defaultThemes = void 0;
 exports.createJBrowseBaseTheme = createJBrowseBaseTheme;
 exports.createJBrowseTheme = createJBrowseTheme;
+const material_1 = require("@mui/material");
 const colors_1 = require("@mui/material/colors");
-const styles_1 = require("@mui/material/styles");
 const deepmerge_1 = __importDefault(require("deepmerge"));
-const refTheme = (0, styles_1.createTheme)();
+const refTheme = (0, material_1.createTheme)();
 const midnight = refTheme.palette.augmentColor({ color: { main: '#0D233F' } });
 const grape = refTheme.palette.augmentColor({ color: { main: '#721E63' } });
 const forest = refTheme.palette.augmentColor({ color: { main: '#135560' } });
@@ -333,7 +333,7 @@ function createJBrowseBaseTheme(theme) {
     return (0, deepmerge_1.default)(themeP, theme || {}, { arrayMerge: overwriteArrayMerge });
 }
 function createJBrowseTheme(configTheme = {}, themes = exports.defaultThemes, themeName = 'default') {
-    return (0, styles_1.createTheme)(createJBrowseBaseTheme(themeName === 'default'
+    return (0, material_1.createTheme)(createJBrowseBaseTheme(themeName === 'default'
         ? (0, deepmerge_1.default)(themes.default, augmentThemeColors(configTheme), {
             arrayMerge: overwriteArrayMerge,
         })
@@ -341,13 +341,21 @@ function createJBrowseTheme(configTheme = {}, themes = exports.defaultThemes, th
 }
 function augmentThemeColors(theme = {}) {
     var _a;
-    for (const entry of ['tertiary', 'quaternary', 'highlight']) {
+    for (const entry of [
+        'primary',
+        'secondary',
+        'tertiary',
+        'quaternary',
+        'highlight',
+    ]) {
         if ((_a = theme.palette) === null || _a === void 0 ? void 0 : _a[entry]) {
             theme = (0, deepmerge_1.default)(theme, {
                 palette: {
                     [entry]: refTheme.palette.augmentColor('color' in theme.palette[entry]
                         ? theme.palette[entry]
-                        : { color: theme.palette[entry] }),
+                        : {
+                            color: theme.palette[entry],
+                        }),
                 },
             });
         }

package/util/index.d.ts

@@ -259,6 +259,7 @@ export declare function fetchAndMaybeUnzipText(loc: GenericFilehandle, opts?: Ba
 export declare function isObject(x: unknown): x is Record<string | symbol | number, unknown>;
 export declare function localStorageGetNumber(key: string, defaultVal: number): number;
 export declare function localStorageGetBoolean(key: string, defaultVal: boolean): boolean;
+export declare function localStorageSetBoolean(key: string, value: boolean): void;
 export declare function forEachWithStopTokenCheck<T>(iter: Iterable<T>, stopToken: string | undefined, arg: (arg: T, idx: number) => void, durationMs?: number): void;
 export declare function testAdapter(fileName: string, regex: RegExp, adapterHint: string | undefined, expected: string): boolean;
 export { type Feature, type SimpleFeatureSerialized, type SimpleFeatureSerializedNoId, default as SimpleFeature, isFeature, } from './simpleFeature';

package/util/index.js

@@ -96,6 +96,7 @@ exports.fetchAndMaybeUnzipText = fetchAndMaybeUnzipText;
 exports.isObject = isObject;
 exports.localStorageGetNumber = localStorageGetNumber;
 exports.localStorageGetBoolean = localStorageGetBoolean;
+exports.localStorageSetBoolean = localStorageSetBoolean;
 exports.forEachWithStopTokenCheck = forEachWithStopTokenCheck;
 exports.testAdapter = testAdapter;
 const react_1 = require("react");
@@ -984,9 +985,9 @@ function renderToStaticMarkup(node) {
 function isGzip(buf) {
     return buf[0] === 31 && buf[1] === 139 && buf[2] === 8;
 }
-async function fetchAndMaybeUnzip(loc, opts) {
-    const { statusCallback = () => { } } = opts || {};
-    const buf = (await updateStatus('Downloading file', statusCallback, () => loc.readFile(opts)));
+async function fetchAndMaybeUnzip(loc, opts = {}) {
+    const { statusCallback = () => { } } = opts;
+    const buf = await updateStatus('Downloading file', statusCallback, () => loc.readFile(opts));
     return isGzip(buf)
         ? await updateStatus('Unzipping', statusCallback, () => (0, bgzf_filehandle_1.unzip)(buf))
         : buf;
@@ -1008,6 +1009,9 @@ function localStorageGetNumber(key, defaultVal) {
 function localStorageGetBoolean(key, defaultVal) {
     return Boolean(JSON.parse(localStorageGetItem(key) || JSON.stringify(defaultVal)));
 }
+function localStorageSetBoolean(key, value) {
+    localStorageSetItem(key, JSON.stringify(value));
+}
 function forEachWithStopTokenCheck(iter, stopToken, arg, durationMs = 400) {
     let start = performance.now();
     let i = 0;

package/util/offscreenCanvasUtils.d.ts

@@ -6,13 +6,14 @@ interface RenderToAbstractCanvasOptions {
     exportSVG?: ExportSVGOptions;
     highResolutionScaling?: number;
 }
-export declare function renderToAbstractCanvas<T>(width: number, height: number, opts: RenderToAbstractCanvasOptions, cb: (ctx: CanvasRenderingContext2D) => T): Promise<(Awaited<T> & {
-    canvasRecordedData: any;
-}) | (Awaited<T> & {
-    reactElement: import("react/jsx-runtime").JSX.Element;
-}) | (Awaited<T> & {
+type R<T extends Record<string, unknown> | undefined> = Omit<T, never> & ({
+    canvasRecordedData: Record<string, unknown>;
+} | {
     imageData: any;
-})>;
+} | {
+    reactElement: React.ReactElement;
+});
+export declare function renderToAbstractCanvas<T extends Record<string, unknown> | undefined>(width: number, height: number, opts: RenderToAbstractCanvasOptions, cb: (ctx: CanvasRenderingContext2D) => Promise<T> | T): Promise<R<T>>;
 export declare function getSerializedSvg(results: {
     width: number;
     height: number;

package/util/offscreenCanvasUtils.js

@@ -46,9 +46,9 @@ async function renderToAbstractCanvas(width, height, opts, cb) {
     if (exportSVG) {
         if (!exportSVG.rasterizeLayers) {
             const fakeCtx = new canvas_sequencer_1.CanvasSequence();
-            const result = await cb(fakeCtx);
+            const callbackResult = await cb(fakeCtx);
             return {
-                ...result,
+                ...callbackResult,
                 canvasRecordedData: fakeCtx.toJSON(),
             };
         }
@@ -60,9 +60,9 @@ async function renderToAbstractCanvas(width, height, opts, cb) {
                 throw new Error('2d canvas rendering not supported on this platform');
             }
             ctx.scale(s, s);
-            const result = await cb(ctx);
+            const callbackResult = await cb(ctx);
             return {
-                ...result,
+                ...callbackResult,
                 reactElement: ((0, jsx_runtime_1.jsx)("image", { width: width, height: height, xlinkHref: 'convertToBlob' in canvas
                         ? await (0, blobToDataURL_1.blobToDataURL)(await canvas.convertToBlob({
                             type: 'image/png',
@@ -79,9 +79,9 @@ async function renderToAbstractCanvas(width, height, opts, cb) {
             throw new Error('2d canvas rendering not supported on this platform');
         }
         ctx.scale(s, s);
-        const result = await cb(ctx);
+        const callbackResult = await cb(ctx);
         return {
-            ...result,
+            ...callbackResult,
             imageData: await (0, offscreenCanvasPonyfill_1.createImageBitmap)(canvas),
         };
     }