@jbrowse/core 3.6.5 → 4.0.0

package/esm/ui/SanitizedHTML.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect } from 'react';
+import dompurify from 'dompurify';
+import escapeHTML from 'escape-html';
+import { linkify } from "../util/index.js";
+const htmlTags = [
+    'a',
+    'b',
+    'br',
+    'code',
+    'div',
+    'em',
+    'h1',
+    'h2',
+    'h3',
+    'h4',
+    'h5',
+    'h6',
+    'i',
+    'img',
+    'li',
+    'p',
+    'pre',
+    'span',
+    'small',
+    'strong',
+    'table',
+    'tbody',
+    'sup',
+    'sub',
+    'td',
+    'tfoot',
+    'th',
+    'thead',
+    'tr',
+    'u',
+    'ul',
+];
+let added = false;
+const full = new RegExp(htmlTags.map(tag => String.raw `<${tag}\b[^>]*>`).join('|'), 'i');
+function isHTML(str) {
+    return full.test(str);
+}
+export default function SanitizedHTML({ html: pre, className, }) {
+    const html = linkify(`${pre}`);
+    const value = isHTML(html) ? html : escapeHTML(html);
+    useEffect(() => {
+        if (!added) {
+            added = true;
+            dompurify.addHook('afterSanitizeAttributes', node => {
+                if (node.tagName === 'A') {
+                    node.setAttribute('rel', 'noopener noreferrer');
+                    node.setAttribute('target', '_blank');
+                }
+            });
+        }
+    }, []);
+    return (_jsx("span", { className: className, dangerouslySetInnerHTML: {
+            __html: dompurify.sanitize(value),
+        } }));
+}

package/esm/ui/Snackbar.d.ts

@@ -0,0 +1,10 @@
+import type { SnackbarMessage } from './SnackbarModel.tsx';
+import type { AbstractSessionModel } from '../util/index.ts';
+interface SnackbarSession extends AbstractSessionModel {
+    snackbarMessages: SnackbarMessage[];
+    popSnackbarMessage: () => void;
+}
+declare const Snackbar: ({ session, }: {
+    session: SnackbarSession;
+}) => import("react/jsx-runtime").JSX.Element | null;
+export default Snackbar;

package/esm/ui/Snackbar.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Suspense, lazy } from 'react';
+import { observer } from 'mobx-react';
+const SnackbarContents = lazy(() => import("./SnackbarContents.js"));
+const Snackbar = observer(function Snackbar({ session, }) {
+    const { snackbarMessages } = session;
+    const latestMessage = snackbarMessages.at(-1);
+    return latestMessage ? (_jsx(Suspense, { fallback: null, children: _jsx(SnackbarContents, { onClose: (_event, reason) => {
+                if (reason !== 'clickaway') {
+                    session.popSnackbarMessage();
+                }
+            }, contents: latestMessage }) })) : null;
+});
+export default Snackbar;

package/esm/ui/SnackbarContents.d.ts

@@ -0,0 +1,5 @@
+import type { SnackbarMessage } from './SnackbarModel.tsx';
+export default function SnackbarContents({ onClose, contents, }: {
+    onClose: (_event: unknown, reason?: string) => void;
+    contents: SnackbarMessage;
+}): import("react/jsx-runtime").JSX.Element;

package/esm/ui/SnackbarContents.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import CloseIcon from '@mui/icons-material/Close';
+import Report from '@mui/icons-material/Report';
+import { Alert, Button, IconButton, Snackbar as MUISnackbar, } from '@mui/material';
+export default function SnackbarContents({ onClose, contents, }) {
+    const actionName = contents.action?.name;
+    return (_jsx(MUISnackbar, { open: true, onClose: onClose, anchorOrigin: { vertical: 'bottom', horizontal: 'center' }, children: _jsx(Alert, { onClose: onClose, action: contents.action ? (_jsxs(_Fragment, { children: [_jsx(Button, { color: "inherit", onClick: e => {
+                            contents.action?.onClick();
+                            onClose(e);
+                        }, children: actionName === 'report' ? _jsx(Report, {}) : actionName }), _jsx(IconButton, { color: "inherit", onClick: onClose, children: _jsx(CloseIcon, {}) })] })) : null, severity: contents.level || 'warning', children: contents.message }) }));
+}

package/esm/ui/SnackbarModel.d.ts

@@ -0,0 +1,17 @@
+import type { NotificationLevel, SnackAction } from '../util/types/index.ts';
+export interface SnackbarMessage {
+    message: string;
+    level?: NotificationLevel;
+    action?: SnackAction;
+}
+export default function SnackbarModel(): import("@jbrowse/mobx-state-tree").IModelType<{}, {
+    snackbarMessages: import("mobx").IObservableArray<SnackbarMessage>;
+} & {
+    readonly snackbarMessageSet: Map<string, SnackbarMessage>;
+} & {
+    notify(message: string, level?: NotificationLevel, action?: SnackAction): void;
+    notifyError(errorMessage: string, error?: unknown, extra?: unknown): void;
+    pushSnackbarMessage(message: string, level?: NotificationLevel, action?: SnackAction): void;
+    popSnackbarMessage(): SnackbarMessage | undefined;
+    removeSnackbarMessage(message: string): void;
+}, import("@jbrowse/mobx-state-tree")._NotCustomized, import("@jbrowse/mobx-state-tree")._NotCustomized>;

package/esm/ui/SnackbarModel.js

@@ -0,0 +1,55 @@
+import { lazy } from 'react';
+import { types } from '@jbrowse/mobx-state-tree';
+import { observable } from 'mobx';
+const ErrorMessageStackTraceDialog = lazy(() => import("./ErrorMessageStackTraceDialog.js"));
+export default function SnackbarModel() {
+    return types
+        .model({})
+        .volatile(() => ({
+        snackbarMessages: observable.array(),
+    }))
+        .views(self => ({
+        get snackbarMessageSet() {
+            return new Map(self.snackbarMessages.map(s => [s.message, s]));
+        },
+    }))
+        .actions(self => ({
+        notify(message, level, action) {
+            this.pushSnackbarMessage(message, level, action);
+            if (level === 'info' || level === 'success') {
+                setTimeout(() => {
+                    this.removeSnackbarMessage(message);
+                }, 5000);
+            }
+        },
+        notifyError(errorMessage, error, extra) {
+            this.notify(errorMessage, 'error', {
+                name: 'report',
+                onClick: () => {
+                    self.queueDialog((onClose) => [
+                        ErrorMessageStackTraceDialog,
+                        {
+                            onClose,
+                            error,
+                            extra,
+                        },
+                    ]);
+                },
+            });
+        },
+        pushSnackbarMessage(message, level, action) {
+            if (action || !self.snackbarMessageSet.has(message)) {
+                self.snackbarMessages.push({ message, level, action });
+            }
+        },
+        popSnackbarMessage() {
+            return self.snackbarMessages.pop();
+        },
+        removeSnackbarMessage(message) {
+            const element = self.snackbarMessageSet.get(message);
+            if (element !== undefined) {
+                self.snackbarMessages.remove(element);
+            }
+        },
+    }));
+}

package/esm/ui/colors.js

@@ -0,0 +1,67 @@
+const category10 = [
+    '#1f77b4',
+    '#ff7f0e',
+    '#2ca02c',
+    '#d62728',
+    '#9467bd',
+    '#8c564b',
+    '#e377c2',
+    '#7f7f7f',
+    '#bcbd22',
+    '#17becf',
+];
+const dark2 = [
+    '#1b9e77',
+    '#d95f02',
+    '#7570b3',
+    '#e7298a',
+    '#66a61e',
+    '#e6ab02',
+    '#a6761d',
+    '#666666',
+];
+const set1 = [
+    '#377eb8',
+    '#e41a1c',
+    '#4daf4a',
+    '#984ea3',
+    '#ff7f00',
+    '#ffff33',
+    '#a65628',
+    '#f781bf',
+    '#999999',
+];
+const set2 = [
+    '#66c2a5',
+    '#fc8d62',
+    '#8da0cb',
+    '#e78ac3',
+    '#a6d854',
+    '#ffd92f',
+    '#e5c494',
+    '#b3b3b3',
+];
+const tableau10 = [
+    '#4e79a7',
+    '#f28e2c',
+    '#e15759',
+    '#76b7b2',
+    '#59a14f',
+    '#edc949',
+    '#af7aa1',
+    '#ff9da7',
+    '#9c755f',
+    '#bab0ab',
+];
+const ggplot2Colors6 = [
+    '#F8766D',
+    '#B79F00',
+    '#00BA38',
+    '#00BFC4',
+    '#619CFF',
+    '#F564E3',
+];
+const ggplot2Colors5 = ['#F8766D', '#A3A500', '#00BF7D', '#00B0F6', '#E76BF3'];
+const ggplot2Colors4 = ['#F8766D', '#7CAE00', '#00BFC4', '#C77CFF'];
+const ggplot2Colors3 = ['#F8766D', '#00BA38', '#619CFF'];
+export { category10, dark2, ggplot2Colors3, ggplot2Colors4, ggplot2Colors5, ggplot2Colors6, set1, set2, tableau10, };

package/esm/ui/index.d.ts

@@ -0,0 +1,20 @@
+export * from './theme.ts';
+export { LogoFull, Logomark } from './Logo.tsx';
+export { default as AssemblySelector } from './AssemblySelector.tsx';
+export { default as CascadingMenu } from './CascadingMenu.tsx';
+export { default as CascadingMenuButton } from './CascadingMenuButton.tsx';
+export { default as Dialog } from './Dialog.tsx';
+export { default as EditableTypography } from './EditableTypography.tsx';
+export { default as ErrorMessage } from './ErrorMessage.tsx';
+export { default as FatalErrorDialog } from './FatalErrorDialog.tsx';
+export { default as FileSelector } from './FileSelector/index.ts';
+export { default as LoadingEllipses } from './LoadingEllipses.tsx';
+export { default as Menu } from './Menu.tsx';
+export { default as PrerenderedCanvas } from './PrerenderedCanvas.tsx';
+export { default as ResizeHandle } from './ResizeHandle.tsx';
+export { default as ExternalLink } from './ExternalLink.tsx';
+export { default as SanitizedHTML } from './SanitizedHTML.tsx';
+export { default as BaseTooltip } from './BaseTooltip.tsx';
+export * from './Menu.tsx';
+export * from './MenuTypes.ts';
+export declare const VIEW_HEADER_HEIGHT = 28;

package/esm/ui/index.js

@@ -0,0 +1,20 @@
+export * from "./theme.js";
+export { LogoFull, Logomark } from "./Logo.js";
+export { default as AssemblySelector } from "./AssemblySelector.js";
+export { default as CascadingMenu } from "./CascadingMenu.js";
+export { default as CascadingMenuButton } from "./CascadingMenuButton.js";
+export { default as Dialog } from "./Dialog.js";
+export { default as EditableTypography } from "./EditableTypography.js";
+export { default as ErrorMessage } from "./ErrorMessage.js";
+export { default as FatalErrorDialog } from "./FatalErrorDialog.js";
+export { default as FileSelector } from "./FileSelector/index.js";
+export { default as LoadingEllipses } from "./LoadingEllipses.js";
+export { default as Menu } from "./Menu.js";
+export { default as PrerenderedCanvas } from "./PrerenderedCanvas.js";
+export { default as ResizeHandle } from "./ResizeHandle.js";
+export { default as ExternalLink } from "./ExternalLink.js";
+export { default as SanitizedHTML } from "./SanitizedHTML.js";
+export { default as BaseTooltip } from "./BaseTooltip.js";
+export * from "./Menu.js";
+export * from "./MenuTypes.js";
+export const VIEW_HEADER_HEIGHT = 28;

package/esm/ui/react-colorful.d.ts

@@ -0,0 +1,3 @@
+import e from 'react';
+declare const X: (e: any) => void, J: (r: any) => e.FunctionComponentElement<any>, Z: (r: any) => e.FunctionComponentElement<any>, re: (r: any) => e.FunctionComponentElement<any>, oe: (r: any) => e.FunctionComponentElement<any>, le: (r: any) => e.FunctionComponentElement<any>, se: (r: any) => e.FunctionComponentElement<any>, ue: (r: any) => e.FunctionComponentElement<any>, de: (r: any) => e.FunctionComponentElement<any>, he: (r: any) => e.FunctionComponentElement<any>, me: (r: any) => e.FunctionComponentElement<any>, pe: (r: any) => e.FunctionComponentElement<any>, _e: (r: any) => e.FunctionComponentElement<any>, Ce: (r: any) => e.FunctionComponentElement<any>, Ne: (r: any) => e.FunctionComponentElement<any>;
+export { Ne as HexColorInput, J as HexColorPicker, oe as HslColorPicker, le as HslStringColorPicker, Z as HslaColorPicker, re as HslaStringColorPicker, de as HsvColorPicker, he as HsvStringColorPicker, se as HsvaColorPicker, ue as HsvaStringColorPicker, _e as RgbColorPicker, Ce as RgbStringColorPicker, me as RgbaColorPicker, pe as RgbaStringColorPicker, X as setNonce, };