@jbrowse/core 3.7.0 → 4.0.0

package/esm/ui/FileSelector/useInternetAccounts.d.ts

@@ -0,0 +1,178 @@
+import type { AbstractRootModel } from '../../util/types/index.ts';
+export default function useInternetAccounts(rootModel?: AbstractRootModel): {
+    accountMap: {
+        [k: string]: {
+            id: string;
+            type: string;
+            configuration: {
+                [x: string]: any;
+            } & import("@jbrowse/mobx-state-tree/dist/internal").NonEmptyObject & {
+                setSubschema(slotName: string, data: Record<string, unknown>): Record<string, unknown> | ({
+                    [x: string]: any;
+                } & import("@jbrowse/mobx-state-tree/dist/internal").NonEmptyObject & {
+                    setSubschema(slotName: string, data: Record<string, unknown>): Record<string, unknown> | ({
+                        [x: string]: any;
+                    } & import("@jbrowse/mobx-state-tree/dist/internal").NonEmptyObject & any & import("@jbrowse/mobx-state-tree").IStateTreeNode<import("../../configuration/types.ts").AnyConfigurationSchemaType>);
+                } & import("@jbrowse/mobx-state-tree").IStateTreeNode<import("../../configuration/types.ts").AnyConfigurationSchemaType>);
+            } & import("@jbrowse/mobx-state-tree").IStateTreeNode<import("../../configuration/configurationSchema.ts").ConfigurationSchemaType<{
+                name: {
+                    description: string;
+                    type: string;
+                    defaultValue: string;
+                };
+                description: {
+                    description: string;
+                    type: string;
+                    defaultValue: string;
+                };
+                authHeader: {
+                    description: string;
+                    type: string;
+                    defaultValue: string;
+                };
+                tokenType: {
+                    description: string;
+                    type: string;
+                    defaultValue: string;
+                };
+                domains: {
+                    description: string;
+                    type: string;
+                    defaultValue: never[];
+                };
+            }, import("../../configuration/configurationSchema.ts").ConfigurationSchemaOptions<undefined, "internetAccountId">>>;
+        } & import("@jbrowse/mobx-state-tree/dist/internal").NonEmptyObject & {
+            readonly name: string;
+            readonly description: string;
+            readonly internetAccountId: string;
+            readonly authHeader: string;
+            readonly tokenType: string;
+            readonly domains: string[];
+            readonly toggleContents: React.ReactNode;
+            readonly SelectorComponent: import("../../util/index.ts").AnyReactComponentType | undefined;
+            readonly selectorLabel: string | undefined;
+        } & {
+            handlesLocation(location: import("../../util/index.ts").UriLocation): boolean;
+            readonly tokenKey: string;
+        } & {
+            getTokenFromUser(_resolve: (token: string) => void, _reject: (error: Error) => void): void;
+            storeToken(token: string): void;
+            removeToken(): void;
+            retrieveToken(): string | null;
+            validateToken(token: string, _loc: import("../../util/index.ts").UriLocation): Promise<string>;
+        } & {
+            getToken(location?: import("../../util/index.ts").UriLocation): Promise<string>;
+        } & {
+            addAuthHeaderToInit(init?: RequestInit, token?: string): {
+                headers: Headers;
+                body?: BodyInit | null;
+                cache?: RequestCache;
+                credentials?: RequestCredentials;
+                integrity?: string;
+                keepalive?: boolean;
+                method?: string;
+                mode?: RequestMode;
+                priority?: RequestPriority;
+                redirect?: RequestRedirect;
+                referrer?: string;
+                referrerPolicy?: ReferrerPolicy;
+                signal?: AbortSignal | null;
+                window?: null;
+            };
+            getPreAuthorizationInformation(location: import("../../util/index.ts").UriLocation): Promise<{
+                internetAccountType: string;
+                authInfo: {
+                    token: string;
+                    configuration: any;
+                };
+            }>;
+        } & {
+            getFetcher(loc?: import("../../util/index.ts").UriLocation): (input: RequestInfo, init?: RequestInit) => Promise<Response>;
+        } & {
+            openLocation(location: import("../../util/index.ts").UriLocation): import("../../util/io/RemoteFileWithRangeCache.ts").RemoteFileWithRangeCache;
+        } & import("@jbrowse/mobx-state-tree").IStateTreeNode<import("@jbrowse/mobx-state-tree").IModelType<{
+            id: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").ISimpleType<string>, [undefined]>;
+            type: import("@jbrowse/mobx-state-tree").ISimpleType<string>;
+            configuration: import("../../configuration/configurationSchema.ts").ConfigurationSchemaType<{
+                name: {
+                    description: string;
+                    type: string;
+                    defaultValue: string;
+                };
+                description: {
+                    description: string;
+                    type: string;
+                    defaultValue: string;
+                };
+                authHeader: {
+                    description: string;
+                    type: string;
+                    defaultValue: string;
+                };
+                tokenType: {
+                    description: string;
+                    type: string;
+                    defaultValue: string;
+                };
+                domains: {
+                    description: string;
+                    type: string;
+                    defaultValue: never[];
+                };
+            }, import("../../configuration/configurationSchema.ts").ConfigurationSchemaOptions<undefined, "internetAccountId">>;
+        }, {
+            readonly name: string;
+            readonly description: string;
+            readonly internetAccountId: string;
+            readonly authHeader: string;
+            readonly tokenType: string;
+            readonly domains: string[];
+            readonly toggleContents: React.ReactNode;
+            readonly SelectorComponent: import("../../util/index.ts").AnyReactComponentType | undefined;
+            readonly selectorLabel: string | undefined;
+        } & {
+            handlesLocation(location: import("../../util/index.ts").UriLocation): boolean;
+            readonly tokenKey: string;
+        } & {
+            getTokenFromUser(_resolve: (token: string) => void, _reject: (error: Error) => void): void;
+            storeToken(token: string): void;
+            removeToken(): void;
+            retrieveToken(): string | null;
+            validateToken(token: string, _loc: import("../../util/index.ts").UriLocation): Promise<string>;
+        } & {
+            getToken(location?: import("../../util/index.ts").UriLocation): Promise<string>;
+        } & {
+            addAuthHeaderToInit(init?: RequestInit, token?: string): {
+                headers: Headers;
+                body?: BodyInit | null;
+                cache?: RequestCache;
+                credentials?: RequestCredentials;
+                integrity?: string;
+                keepalive?: boolean;
+                method?: string;
+                mode?: RequestMode;
+                priority?: RequestPriority;
+                redirect?: RequestRedirect;
+                referrer?: string;
+                referrerPolicy?: ReferrerPolicy;
+                signal?: AbortSignal | null;
+                window?: null;
+            };
+            getPreAuthorizationInformation(location: import("../../util/index.ts").UriLocation): Promise<{
+                internetAccountType: string;
+                authInfo: {
+                    token: string;
+                    configuration: any;
+                };
+            }>;
+        } & {
+            getFetcher(loc?: import("../../util/index.ts").UriLocation): (input: RequestInfo, init?: RequestInit) => Promise<Response>;
+        } & {
+            openLocation(location: import("../../util/index.ts").UriLocation): import("../../util/io/RemoteFileWithRangeCache.ts").RemoteFileWithRangeCache;
+        }, import("@jbrowse/mobx-state-tree")._NotCustomized, import("@jbrowse/mobx-state-tree")._NotCustomized>>;
+    };
+    shownAccountIds: string[];
+    hiddenAccountIds: string[];
+    recentlyUsed: string[];
+    setRecentlyUsed: (value: string[] | ((val: string[]) => string[])) => void;
+};

package/esm/ui/FileSelector/useInternetAccounts.js

@@ -0,0 +1,18 @@
+import { useLocalStorage } from "../../util/index.js";
+import { isAppRootModel } from "../../util/types/index.js";
+const NUM_SHOWN = 2;
+export default function useInternetAccounts(rootModel) {
+    const [recentlyUsed, setRecentlyUsed] = useLocalStorage('fileSelector-recentlyUsedInternetAccounts', []);
+    const accounts = isAppRootModel(rootModel)
+        ? rootModel.internetAccounts.filter(f => f.type !== 'HTTPBasicInternetAccount')
+        : [];
+    const accountMap = Object.fromEntries(accounts.map(a => [a.internetAccountId, a]));
+    const sortedIds = [...new Set(accounts.map(s => s.internetAccountId))].sort((a, b) => recentlyUsed.indexOf(a) - recentlyUsed.indexOf(b));
+    return {
+        accountMap,
+        shownAccountIds: sortedIds.slice(0, NUM_SHOWN),
+        hiddenAccountIds: sortedIds.slice(NUM_SHOWN),
+        recentlyUsed,
+        setRecentlyUsed,
+    };
+}

package/esm/ui/HoverMenu.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { Menu } from '@mui/material';
+const HoverMenu = React.forwardRef(function HoverMenu(props, ref) {
+    return (_jsx(Menu, { ...props, ref: ref, style: {
+            pointerEvents: 'none',
+            ...props.style,
+        }, slotProps: {
+            ...props.slotProps,
+            paper: {
+                style: { pointerEvents: 'auto' },
+            },
+        } }));
+});
+export default HoverMenu;

package/esm/ui/Icons.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import SvgIcon from '@mui/material/SvgIcon';
+export function Indexing(props) {
+    return (_jsx(SvgIcon, { ...props, children: _jsx("path", { d: "M19.31 18.9L22.39 22L21 23.39L17.88 20.32C17.19 20.75 16.37 21 15.5 21C13 21 11 19 11 16.5C11 14 13 12 15.5 12C18 12 20 14 20 16.5C20 17.38 19.75 18.21 19.31 18.9M15.5 19C16.88 19 18 17.88 18 16.5C18 15.12 16.88 14 15.5 14C14.12 14 13 15.12 13 16.5C13 17.88 14.12 19 15.5 19M21 4V6H3V4H21M3 16V14H9V16H3M3 11V9H21V11H18.97C17.96 10.37 16.77 10 15.5 10C14.23 10 13.04 10.37 12.03 11H3Z" }) }));
+}
+export function TrackSelector(props) {
+    return (_jsx(SvgIcon, { ...props, children: _jsx("path", { d: "M21 19v-2H8v2h13m0-6v-2H8v2h13M8 7h13V5H8v2M4 5v2h2V5H4M3 5a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V5m1 6v2h2v-2H4m-1 0a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1v-2m1 6v2h2v-2H4m-1 0a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1v-2z" }) }));
+}
+export function DNA(props) {
+    return (_jsx(SvgIcon, { ...props, children: _jsx("path", { fill: "currentColor", d: "M4,2H6V4C6,5.44 6.68,6.61 7.88,7.78C8.74,8.61 9.89,9.41 11.09,10.2L9.26,11.39C8.27,10.72 7.31,10 6.5,9.21C5.07,7.82 4,6.1 4,4V2M18,2H20V4C20,6.1 18.93,7.82 17.5,9.21C16.09,10.59 14.29,11.73 12.54,12.84C10.79,13.96 9.09,15.05 7.88,16.22C6.68,17.39 6,18.56 6,20V22H4V20C4,17.9 5.07,16.18 6.5,14.79C7.91,13.41 9.71,12.27 11.46,11.16C13.21,10.04 14.91,8.95 16.12,7.78C17.32,6.61 18,5.44 18,4V2M14.74,12.61C15.73,13.28 16.69,14 17.5,14.79C18.93,16.18 20,17.9 20,20V22H18V20C18,18.56 17.32,17.39 16.12,16.22C15.26,15.39 14.11,14.59 12.91,13.8L14.74,12.61M7,3H17V4L16.94,4.5H7.06L7,4V3M7.68,6H16.32C16.08,6.34 15.8,6.69 15.42,7.06L14.91,7.5H9.07L8.58,7.06C8.2,6.69 7.92,6.34 7.68,6M9.09,16.5H14.93L15.42,16.94C15.8,17.31 16.08,17.66 16.32,18H7.68C7.92,17.66 8.2,17.31 8.58,16.94L9.09,16.5M7.06,19.5H16.94L17,20V21H7V20L7.06,19.5Z" }) }));
+}
+export function Cable(props) {
+    return (_jsx(SvgIcon, { ...props, children: _jsx("path", { d: "M20 5V4c0-.55-.45-1-1-1h-2c-.55 0-1 .45-1 1v1h-1v4c0 .55.45 1 1 1h1v7c0 1.1-.9 2-2 2s-2-.9-2-2V7c0-2.21-1.79-4-4-4S5 4.79 5 7v7H4c-.55 0-1 .45-1 1v4h1v1c0 .55.45 1 1 1h2c.55 0 1-.45 1-1v-1h1v-4c0-.55-.45-1-1-1H7V7c0-1.1.9-2 2-2s2 .9 2 2v10c0 2.21 1.79 4 4 4s4-1.79 4-4v-7h1c.55 0 1-.45 1-1V5h-1z" }) }));
+}

package/esm/ui/LoadingEllipses.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Typography } from '@mui/material';
+import { cx, keyframes, makeStyles } from "../util/tss-react/index.js";
+const useStyles = makeStyles()({
+    dots: {
+        '&::after': {
+            display: 'inline-block',
+            content: '""',
+            width: '1em',
+            textAlign: 'left',
+            animation: `${keyframes `
+      0% {
+        content: '';
+      }
+      25% {
+          content: '.';
+      }
+      50% {
+        content: '..';
+      }
+      75% {
+        content: '...';
+      }
+      `} 1.2s infinite ease-in-out`,
+        },
+    },
+});
+export default function LoadingEllipses({ message, children, variant = 'body2', ...rest }) {
+    const { classes } = useStyles();
+    return (_jsx(Typography, { className: cx(classes.dots, rest.className), ...rest, variant: variant, children: message || 'Loading' }));
+}

package/esm/ui/Logo.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+function getColors(variant) {
+    if (variant === 'black') {
+        return {
+            midnight: '#808080',
+            forrest: '#666666',
+            grape: '#4d4d4d',
+            mandarin: '#333333',
+            gray: '#1a1a1a',
+        };
+    }
+    if (variant === 'white') {
+        return {
+            midnight: '#ffffff',
+            forrest: '#e6e6e6',
+            grape: '#cccccc',
+            mandarin: '#b3b3b3',
+            gray: '#999999',
+        };
+    }
+    return {
+        midnight: '#0d233f',
+        forrest: '#135560',
+        grape: '#721e63',
+        mandarin: '#ffb11d',
+        gray: '#dadada',
+    };
+}
+export function Logomark({ variant }) {
+    return (_jsx("svg", { viewBox: "0 0 175 175", children: _jsx(Icon, { variant: variant }) }));
+}
+export function LogoFull({ variant }) {
+    return (_jsxs("svg", { viewBox: "0 0 641 175", children: [_jsx(Text, { variant: variant }), _jsx(Icon, { variant: variant })] }));
+}
+function Icon({ variant }) {
+    const colors = getColors(variant);
+    return (_jsxs(_Fragment, { children: [_jsx("path", { style: { fill: colors.midnight }, d: "M120.5,57.5c.168,0,.333.012.5.013V40.506c-.167,0-.333-.006-.5-.006a98.325,98.325,0,0,0-77.4,37.565q-2.664,3.378-5.023,6.994l14.206,9.327Q54.043,91.709,56,89.179A81.363,81.363,0,0,1,120.5,57.5Z" }), _jsx("path", { style: { fill: colors.forrest }, d: "M148.668,86.223c.308.133.6.283.908.42l6.746-15.618c-.153-.067-.3-.143-.454-.21a81.36,81.36,0,0,0-71.777,3.5q-2.8,1.544-5.469,3.309l9.249,14.054A63.93,63.93,0,0,1,148.668,86.223Z" }), _jsx("path", { style: { fill: colors.grape }, d: "M170.894,109.37A63.929,63.929,0,0,0,113.4,88.861l2.336,15.474a48.456,48.456,0,0,1,44.322,15.42c.111.125.214.255.324.381l11.16-10C171.323,109.879,171.118,109.62,170.894,109.37Z" }), _jsx("path", { style: { fill: colors.mandarin }, d: "M150.921,150.314c.04.163.07.326.107.489l16.509-4.058c-.039-.163-.067-.326-.107-.489A48.457,48.457,0,0,0,135.575,111.8l-5.515,15.591A32.466,32.466,0,0,1,150.921,150.314Z" }), _jsx("path", { style: { fill: colors.gray }, d: "M134.1,138.129l-9.779,13.213a32.486,32.486,0,0,1,7.823,14.463l15.147.852c.012-.166.032-.331.041-.5A32.464,32.464,0,0,0,134.1,138.129Z" })] }));
+}
+function Text({ variant }) {
+    const colors = getColors(variant);
+    return (_jsxs("g", { "aria-label": "JBrowse", transform: "translate(213.084 144.241)", style: { fill: colors.midnight }, children: [_jsx("path", { d: "m 26.355,-71.505 v 54.075 2.835 q 0,6.825 -0.42,10.185 -0.735,5.67 -2.835,9.135 -3.255,5.355 -8.505,8.4 -4.83,2.73 -11.55,3.57 L 1.47,11.76 Q 7.35,10.185 9.24,4.2 10.605,-0.105 10.605,-9.975 v -5.565 -55.965 q 1.785,0 4.62,0.315 2.835,0.21 3.255,0.21 1.785,0 2.94,-0.105 4.515,-0.42 4.935,-0.42 z" }), _jsx("path", { d: "m 60.68836,-65.415 v 24.78 h 3.255 q 2.94,0 4.935,-0.525 2.1,-0.525 3.885,-2.1 2.31,-1.995 3.36,-4.83 1.155,-2.835 1.155,-6.09 0,-5.565 -2.94,-8.61 -2.94,-3.045 -8.295,-3.045 -2.52,0 -5.355,0.42 z m 0,30.87 V -6.09 h 5.25 q 4.725,0 8.505,-3.675 3.885,-3.78 3.885,-10.08 0,-8.19 -4.62,-11.655 -4.095,-3.045 -13.02,-3.045 z M 44.93836,0 v -71.505 h 27.09 q 9.135,0 14.385,3.255 6.51,3.99 6.51,12.6 0,7.035 -5.25,11.655 -4.62,4.095 -11.97,5.145 v 0.945 q 7.56,0.735 12.285,3.99 6.615,4.62 6.615,13.335 0,10.185 -7.98,15.75 -6.93,4.83 -17.43,4.83 z" }), _jsx("path", { d: "M 109.44281,0.525 V -50.4 q 1.785,0.21 3.99,0.42 2.31,0.105 3.255,0.105 2.31,0 4.2,-0.21 1.89,-0.21 3.045,-0.315 v 13.02 q 1.89,-6.51 5.46,-9.87 4.41,-4.095 11.655,-4.095 -0.315,2.73 -0.42,6.825 -0.105,3.99 -0.105,7.455 l -0.945,0.84 q -0.945,-0.735 -2.415,-1.05 -1.47,-0.315 -2.94,-0.315 -3.57,0 -6.195,1.89 -2.52,1.785 -3.465,5.04 -0.42,1.155 -0.525,3.15 -0.105,1.89 -0.105,4.515 v 4.515 19.005 q -1.785,-0.21 -2.625,-0.21 -3.675,-0.315 -4.62,-0.315 -2.31,0 -4.2,0.21 -1.89,0.21 -3.045,0.315 z" }), _jsx("path", { d: "m 173.77337,1.47 q -11.655,0 -18.585,-6.825 -6.93,-6.825 -6.93,-18.48 0,-12.6 6.72,-20.055 6.825,-7.455 18.9,-7.455 11.97,0 18.9,6.72 6.93,6.72 6.93,18.48 0,12.285 -6.72,19.74 -7.14,7.875 -19.215,7.875 z m 0.735,-48.09 q -5.88,0 -8.505,6.51 -2.205,5.565 -2.205,15.96 0,8.19 1.47,12.915 2.415,7.98 8.505,7.98 5.565,0 8.19,-7.875 2.205,-6.51 2.205,-16.695 0,-8.505 -2.1,-13.23 -2.52,-5.565 -7.56,-5.565 z" }), _jsx("path", { d: "m 222.03563,-50.4 10.5,36.015 q 3.675,-11.235 5.67,-17.85 2.415,-8.085 5.04,-18.165 1.05,0.105 3.045,0.315 2.1,0.21 2.835,0.21 1.995,0 3.15,-0.105 1.26,-0.21 2.73,-0.42 l 10.71,36.015 q 5.88,-17.43 10.71,-36.015 l 4.2,0.315 4.095,-0.315 q -5.145,13.125 -9.135,24.57 -5.04,14.28 -8.505,26.355 -1.89,-0.21 -3.36,-0.42 -1.365,-0.105 -2.205,-0.105 -1.89,0 -3.36,0.21 -1.365,0.21 -2.31,0.315 l -10.605,-34.755 q -4.41,13.65 -6.72,21.105 -2.31,7.35 -4.095,13.65 -1.89,-0.21 -3.36,-0.42 -1.365,-0.105 -2.31,-0.105 -1.995,0 -3.465,0.21 -1.365,0.21 -2.31,0.315 -3.78,-12.81 -5.04,-17.01 -2.205,-7.245 -5.46,-17.01 -2.835,-8.4 -5.88,-16.905 1.575,0 4.305,0.315 2.73,0.21 3.36,0.21 1.47,0 4.305,-0.21 2.835,-0.315 3.465,-0.315 z" }), _jsx("path", { d: "m 292.84172,-12.81 h 2.625 q 1.47,4.095 4.62,6.51 3.15,2.415 7.35,2.415 2.94,0 5.46,-1.785 2.625,-1.89 2.625,-4.62 0,-3.885 -6.195,-6.615 -10.395,-4.62 -11.655,-5.46 -6.405,-4.515 -6.405,-12.285 0,-7.77 5.25,-12.18 5.25,-4.515 12.81,-4.515 3.99,0 8.085,1.365 4.095,1.26 7.14,3.57 l -2.52,9.24 h -2.94 q -0.63,-3.57 -3.57,-6.195 -2.835,-2.625 -6.405,-2.625 -3.15,0 -5.46,1.575 -2.31,1.47 -2.31,4.515 0,3.885 6.405,6.51 10.185,4.095 11.865,5.25 6.405,4.41 6.405,12.81 0,7.455 -5.46,12.18 -5.355,4.62 -14.805,4.62 -8.19,0 -14.49,-4.305 z" }), _jsx("path", { d: "m 349.61228,-29.925 h 15.54 q 0,-6.51 -1.05,-10.395 -1.68,-6.3 -5.88,-6.3 -5.04,0 -7.14,6.195 -1.47,4.305 -1.47,10.5 z m 30.03,5.04 h -30.03 q 0,9.135 3.045,13.86 3.57,5.67 11.55,5.67 3.255,0 6.405,-1.26 3.15,-1.26 5.88,-3.465 l 1.26,0.945 -2.31,5.88 q -6.72,4.725 -15.015,4.725 -12.915,0 -19.635,-7.245 -6.72,-7.245 -6.72,-20.37 0,-11.235 6.405,-18.165 6.51,-7.035 17.64,-7.035 11.655,0 16.905,7.56 4.62,6.615 4.62,18.9 z" })] }));
+}

package/esm/ui/Menu.d.ts

@@ -0,0 +1,2 @@
+export type { MenuItem } from './MenuTypes.ts';
+export { default } from './CascadingMenu.tsx';

package/esm/ui/Menu.js

@@ -0,0 +1 @@
+export { default } from "./CascadingMenu.js";

package/esm/ui/MenuButton.d.ts

@@ -0,0 +1 @@
+export { default } from './CascadingMenuButton.tsx';

package/esm/ui/MenuButton.js

@@ -0,0 +1 @@
+export { default } from "./CascadingMenuButton.js";

package/esm/ui/MenuItems.d.ts

@@ -0,0 +1,15 @@
+interface MenuItemEndDecorationSubMenuProps {
+    type: 'subMenu';
+}
+interface MenuItemEndDecorationSelectorProps {
+    type: 'checkbox' | 'radio';
+    checked: boolean;
+    disabled?: boolean;
+}
+type MenuItemEndDecorationProps = MenuItemEndDecorationSubMenuProps | MenuItemEndDecorationSelectorProps;
+export declare function MenuItemEndDecoration(props: MenuItemEndDecorationProps): import("react/jsx-runtime").JSX.Element;
+export declare function LoadingMenuItem(): import("react/jsx-runtime").JSX.Element;
+export declare function ErrorMenuItem({ error }: {
+    error: unknown;
+}): import("react/jsx-runtime").JSX.Element;
+export {};

package/esm/ui/MenuItems.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import ArrowRightIcon from '@mui/icons-material/ArrowRight';
+import CheckBoxIcon from '@mui/icons-material/CheckBox';
+import CheckBoxOutlineBlankIcon from '@mui/icons-material/CheckBoxOutlineBlank';
+import RadioButtonCheckedIcon from '@mui/icons-material/RadioButtonChecked';
+import RadioButtonUncheckedIcon from '@mui/icons-material/RadioButtonUnchecked';
+import { CircularProgress, ListItemIcon, ListItemText, MenuItem, } from '@mui/material';
+import { makeStyles } from "../util/tss-react/index.js";
+const useStyles = makeStyles()({
+    menuItemEndDecoration: {
+        padding: 0,
+        margin: 0,
+        height: 16,
+    },
+});
+export function MenuItemEndDecoration(props) {
+    const { classes } = useStyles();
+    const { type } = props;
+    let checked;
+    let disabled;
+    if ('checked' in props) {
+        ;
+        ({ checked, disabled } = props);
+    }
+    let icon;
+    switch (type) {
+        case 'subMenu': {
+            icon = _jsx(ArrowRightIcon, { color: "action" });
+            break;
+        }
+        case 'checkbox': {
+            if (checked) {
+                const color = disabled ? 'inherit' : undefined;
+                icon = _jsx(CheckBoxIcon, { color: color });
+            }
+            else {
+                icon = _jsx(CheckBoxOutlineBlankIcon, { color: "action" });
+            }
+            break;
+        }
+        case 'radio': {
+            if (checked) {
+                const color = disabled ? 'inherit' : undefined;
+                icon = _jsx(RadioButtonCheckedIcon, { color: color });
+            }
+            else {
+                icon = _jsx(RadioButtonUncheckedIcon, { color: "action" });
+            }
+            break;
+        }
+    }
+    return _jsx("div", { className: classes.menuItemEndDecoration, children: icon });
+}
+export function LoadingMenuItem() {
+    return (_jsxs(MenuItem, { disabled: true, children: [_jsx(ListItemIcon, { children: _jsx(CircularProgress, { size: 20 }) }), _jsx(ListItemText, { primary: "Loading..." })] }));
+}
+export function ErrorMenuItem({ error }) {
+    return (_jsx(MenuItem, { disabled: true, children: _jsx(ListItemText, { primary: "Error loading menu", secondary: error instanceof Error ? error.message : String(error) }) }));
+}

package/esm/ui/MenuTypes.d.ts

@@ -0,0 +1,39 @@
+import type { SvgIconProps } from '@mui/material';
+export interface MenuDivider {
+    priority?: number;
+    type: 'divider';
+}
+export interface MenuSubHeader {
+    type: 'subHeader';
+    priority?: number;
+    label: string;
+}
+export interface BaseMenuItem {
+    id?: string;
+    label: React.ReactNode;
+    priority?: number;
+    subLabel?: string;
+    icon?: React.ComponentType<SvgIconProps>;
+    disabled?: boolean;
+    helpText?: string;
+}
+export interface NormalMenuItem extends BaseMenuItem {
+    type?: 'normal';
+    onClick: (...args: any[]) => void;
+}
+export interface CheckboxMenuItem extends BaseMenuItem {
+    type: 'checkbox';
+    checked: boolean;
+    onClick: (...args: any[]) => void;
+}
+export interface RadioMenuItem extends BaseMenuItem {
+    type: 'radio';
+    checked: boolean;
+    onClick: (...args: any[]) => void;
+}
+export interface SubMenuItem extends BaseMenuItem {
+    type?: 'subMenu';
+    subMenu: MenuItem[];
+}
+export type MenuItem = MenuDivider | MenuSubHeader | NormalMenuItem | CheckboxMenuItem | RadioMenuItem | SubMenuItem;
+export type MenuItemsGetter = MenuItem[] | (() => MenuItem[]);

package/esm/ui/MenuTypes.js

@@ -0,0 +1 @@
+export {};

package/esm/ui/PrerenderedCanvas.d.ts

@@ -0,0 +1,10 @@
+declare function PrerenderedCanvas(props: {
+    width: number;
+    height: number;
+    highResolutionScaling?: number;
+    style?: React.CSSProperties;
+    imageData?: unknown;
+    showSoftClip?: boolean;
+    blockKey?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export default PrerenderedCanvas;

package/esm/ui/PrerenderedCanvas.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { drawImageOntoCanvasContext } from "../util/offscreenCanvasPonyfill.js";
+function PrerenderedCanvas(props) {
+    const { width, height, highResolutionScaling = 1, style = {}, imageData, blockKey, showSoftClip, } = props;
+    const [done, setDone] = useState(false);
+    const featureCanvas = useRef(null);
+    useEffect(() => {
+        if (!imageData) {
+            return;
+        }
+        const canvas = featureCanvas.current;
+        if (!canvas) {
+            return;
+        }
+        const context = canvas.getContext('2d');
+        if (!context) {
+            return;
+        }
+        context.clearRect(0, 0, canvas.width, canvas.height);
+        drawImageOntoCanvasContext(imageData, context);
+        setDone(true);
+    }, [imageData]);
+    return (_jsx("canvas", { "data-testid": [
+            'prerendered_canvas',
+            showSoftClip ? 'softclipped' : '',
+            blockKey,
+            done ? 'done' : '',
+        ]
+            .filter(f => !!f)
+            .join('_'), ref: featureCanvas, width: width * highResolutionScaling, height: height * highResolutionScaling, style: { width, height, ...style } }));
+}
+export default PrerenderedCanvas;

package/esm/ui/RedErrorMessageBox.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { makeStyles } from "../util/tss-react/index.js";
+const useStyles = makeStyles()(theme => ({
+    bg: {
+        padding: 4,
+        margin: 4,
+        overflow: 'auto',
+        maxHeight: 200,
+        background: theme.palette.mode === 'dark' ? '#833' : '#f88',
+        border: `1px solid ${theme.palette.divider}`,
+    },
+}));
+export default function RedErrorMessageBox({ children, }) {
+    const { classes } = useStyles();
+    return _jsx("div", { className: classes.bg, children: children });
+}

package/esm/ui/ResizeHandle.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { cx, makeStyles } from "../util/tss-react/index.js";
+const useStyles = makeStyles()({
+    horizontalHandle: {
+        cursor: 'row-resize',
+        width: '100%',
+    },
+    verticalHandle: {
+        cursor: 'col-resize',
+        height: '100%',
+    },
+    flexbox_verticalHandle: {
+        cursor: 'col-resize',
+        alignSelf: 'stretch',
+    },
+    flexbox_horizontalHandle: {
+        cursor: 'row-resize',
+        alignSelf: 'stretch',
+    },
+});
+function ResizeHandle({ onDrag, vertical = false, flexbox = false, className: originalClassName, onMouseDown, ...props }) {
+    const [mouseDragging, setMouseDragging] = useState(false);
+    const initialPosition = useRef(0);
+    const prevPos = useRef(0);
+    const { classes } = useStyles();
+    const getPosition = useCallback((event) => vertical ? event.clientX : event.clientY, [vertical]);
+    useEffect(() => {
+        if (!mouseDragging) {
+            return;
+        }
+        function mouseMove(event) {
+            event.preventDefault();
+            const pos = getPosition(event);
+            const totalDistance = initialPosition.current - pos;
+            const lastFrameDistance = pos - prevPos.current;
+            prevPos.current = pos;
+            onDrag(lastFrameDistance, totalDistance);
+        }
+        function mouseUp() {
+            setMouseDragging(false);
+        }
+        window.addEventListener('mousemove', mouseMove, true);
+        window.addEventListener('mouseup', mouseUp, true);
+        return () => {
+            window.removeEventListener('mousemove', mouseMove, true);
+            window.removeEventListener('mouseup', mouseUp, true);
+        };
+    }, [mouseDragging, onDrag, getPosition]);
+    const handleMouseDown = useCallback((event) => {
+        event.preventDefault();
+        const pos = getPosition(event);
+        initialPosition.current = pos;
+        prevPos.current = pos;
+        setMouseDragging(true);
+        onMouseDown?.(event);
+    }, [getPosition, onMouseDown]);
+    const className = flexbox
+        ? vertical
+            ? classes.flexbox_verticalHandle
+            : classes.flexbox_horizontalHandle
+        : vertical
+            ? classes.verticalHandle
+            : classes.horizontalHandle;
+    return (_jsx("div", { "data-resizer": "true", onMouseDown: handleMouseDown, className: cx(originalClassName, className), ...props }));
+}
+export default ResizeHandle;

package/esm/ui/ReturnToImportFormDialog.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, DialogActions, DialogContent, Typography } from '@mui/material';
+import { observer } from 'mobx-react';
+import Dialog from "./Dialog.js";
+const ReturnToImportFormDialog = observer(function ReturnToImportFormDialog({ model, handleClose, }) {
+    return (_jsxs(Dialog, { maxWidth: "xl", open: true, onClose: handleClose, title: "Reference sequence", children: [_jsx(DialogContent, { children: _jsx(Typography, { children: "Are you sure you want to return to the import form? This will lose your current view" }) }), _jsxs(DialogActions, { children: [_jsx(Button, { onClick: () => {
+                            model.clearView();
+                            handleClose();
+                        }, variant: "contained", color: "primary", autoFocus: true, children: "OK" }), _jsx(Button, { onClick: () => {
+                            handleClose();
+                        }, color: "secondary", variant: "contained", children: "Cancel" })] })] }));
+});
+export default ReturnToImportFormDialog;

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),
+        } }));
+}