@jbrowse/core 3.7.0 → 4.0.0

package/esm/ui/theme.d.ts

@@ -0,0 +1,58 @@
+import type { PaletteColor, PaletteColorOptions, Theme, ThemeOptions } from '@mui/material/styles';
+type MaybePaletteColor = PaletteColor | undefined;
+type Frames = [
+    null,
+    MaybePaletteColor,
+    MaybePaletteColor,
+    MaybePaletteColor,
+    MaybePaletteColor,
+    MaybePaletteColor,
+    MaybePaletteColor
+];
+declare module '@mui/material/styles' {
+    interface Palette {
+        tertiary: PaletteColor;
+        quaternary: PaletteColor;
+        highlight: PaletteColor;
+        stopCodon: string;
+        startCodon: string;
+        insertion: string;
+        softclip: string;
+        skip: string;
+        hardclip: string;
+        deletion: string;
+        bases: {
+            A: PaletteColor;
+            C: PaletteColor;
+            G: PaletteColor;
+            T: PaletteColor;
+        };
+        frames: Frames;
+        framesCDS: Frames;
+    }
+    interface PaletteOptions {
+        tertiary?: PaletteColorOptions;
+        quaternary?: PaletteColorOptions;
+        highlight?: PaletteColorOptions;
+        stopCodon?: string;
+        startCodon?: string;
+        hardclip?: string;
+        softclip?: string;
+        insertion?: string;
+        skip?: string;
+        deletion?: string;
+        bases?: {
+            A?: PaletteColorOptions;
+            C?: PaletteColorOptions;
+            G?: PaletteColorOptions;
+            T?: PaletteColorOptions;
+        };
+        framesCDS?: Frames;
+        frames?: Frames;
+    }
+}
+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): Theme;
+export {};

package/esm/ui/theme.js

@@ -0,0 +1,392 @@
+import { createTheme } from '@mui/material';
+import { blue, green, grey, orange, red } from '@mui/material/colors';
+import deepmerge from 'deepmerge';
+const refTheme = 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' } });
+const mandarin = refTheme.palette.augmentColor({ color: { main: '#FFB11D' } });
+const lightgrey = refTheme.palette.augmentColor({ color: { main: '#aaa' } });
+const bases = {
+    A: refTheme.palette.augmentColor({ color: green }),
+    C: refTheme.palette.augmentColor({ color: blue }),
+    G: refTheme.palette.augmentColor({ color: orange }),
+    T: refTheme.palette.augmentColor({ color: red }),
+};
+const framesCDS = [
+    null,
+    refTheme.palette.augmentColor({ color: { main: '#FF8080' } }),
+    refTheme.palette.augmentColor({ color: { main: '#80FF80' } }),
+    refTheme.palette.augmentColor({ color: { main: '#8080FF' } }),
+    refTheme.palette.augmentColor({ color: { main: '#8080FF' } }),
+    refTheme.palette.augmentColor({ color: { main: '#80FF80' } }),
+    refTheme.palette.augmentColor({ color: { main: '#FF8080' } }),
+];
+const frames = [
+    null,
+    refTheme.palette.augmentColor({ color: { main: '#8f8f8f' } }),
+    refTheme.palette.augmentColor({ color: { main: '#adadad' } }),
+    refTheme.palette.augmentColor({ color: { main: '#d8d8d8' } }),
+    refTheme.palette.augmentColor({ color: { main: '#d8d8d8' } }),
+    refTheme.palette.augmentColor({ color: { main: '#adadad' } }),
+    refTheme.palette.augmentColor({ color: { main: '#8f8f8f' } }),
+];
+const stopCodon = '#e22';
+const startCodon = '#3e3';
+const insertion = '#800080';
+const deletion = '#808080';
+const hardclip = '#f00';
+const softclip = '#00f';
+const skip = '#97b8c9';
+const defaults = {
+    primary: midnight,
+    secondary: grape,
+    tertiary: forest,
+    quaternary: mandarin,
+    highlight: mandarin,
+    stopCodon,
+    startCodon,
+    insertion,
+    deletion,
+    softclip,
+    hardclip,
+    bases,
+    frames,
+    framesCDS,
+    skip,
+};
+function stockTheme() {
+    return {
+        palette: {
+            ...defaults,
+            mode: undefined,
+        },
+        components: {
+            MuiLink: {
+                styleOverrides: {
+                    root: ({ theme }) => ({
+                        color: theme.palette.tertiary.main,
+                    }),
+                },
+            },
+        },
+    };
+}
+function getDefaultTheme() {
+    return {
+        ...stockTheme(),
+        name: 'Default (from config)',
+    };
+}
+function getLightStockTheme() {
+    return {
+        ...stockTheme(),
+        name: 'Light (stock)',
+    };
+}
+function getDarkStockTheme() {
+    return {
+        name: 'Dark (stock)',
+        palette: {
+            ...defaults,
+            mode: 'dark',
+        },
+        components: {
+            MuiAppBar: {
+                defaultProps: {
+                    enableColorOnDark: true,
+                },
+                styleOverrides: {
+                    root: ({ theme }) => theme.palette.primary.main,
+                },
+            },
+        },
+    };
+}
+function getDarkMinimalTheme() {
+    return {
+        name: 'Dark (minimal)',
+        palette: {
+            ...defaults,
+            mode: 'dark',
+            primary: { main: grey[700] },
+            secondary: { main: grey[800] },
+            tertiary: refTheme.palette.augmentColor({ color: { main: grey[900] } }),
+        },
+    };
+}
+function getMinimalTheme() {
+    return {
+        name: 'Light (minimal)',
+        palette: {
+            ...defaults,
+            primary: { main: grey[900] },
+            secondary: { main: grey[800] },
+            tertiary: refTheme.palette.augmentColor({ color: { main: grey[900] } }),
+        },
+    };
+}
+export const defaultThemes = {
+    default: getDefaultTheme(),
+    lightStock: getLightStockTheme(),
+    lightMinimal: getMinimalTheme(),
+    darkMinimal: getDarkMinimalTheme(),
+    darkStock: getDarkStockTheme(),
+};
+function overwriteArrayMerge(_, sourceArray) {
+    return sourceArray;
+}
+export function createJBrowseBaseTheme(theme) {
+    const themeP = {
+        palette: theme?.palette,
+        typography: {
+            fontSize: 12,
+        },
+        spacing: 4,
+        components: {
+            MuiTooltip: {
+                styleOverrides: {
+                    tooltip: {
+                        fontSize: 12,
+                    },
+                },
+            },
+            MuiButton: {
+                defaultProps: {
+                    size: 'small',
+                },
+                styleOverrides: {
+                    root: ({ theme }) => theme.palette.mode === 'dark'
+                        ? {
+                            color: theme.palette.text.primary,
+                        }
+                        : undefined,
+                },
+            },
+            MuiAccordion: {
+                defaultProps: {
+                    disableGutters: true,
+                    slotProps: {
+                        transition: {
+                            timeout: 150,
+                            unmountOnExit: true,
+                        },
+                    },
+                },
+            },
+            MuiFilledInput: {
+                defaultProps: {
+                    margin: 'dense',
+                },
+            },
+            MuiFormControl: {
+                defaultProps: {
+                    margin: 'dense',
+                    size: 'small',
+                },
+            },
+            MuiFormHelperText: {
+                defaultProps: {
+                    margin: 'dense',
+                },
+            },
+            MuiIconButton: {
+                defaultProps: {
+                    size: 'small',
+                },
+            },
+            MuiInputBase: {
+                defaultProps: {
+                    margin: 'dense',
+                },
+            },
+            MuiAutocomplete: {
+                defaultProps: {
+                    size: 'small',
+                },
+            },
+            MuiInputLabel: {
+                defaultProps: {
+                    margin: 'dense',
+                },
+            },
+            MuiToolbar: {
+                defaultProps: {
+                    variant: 'dense',
+                },
+            },
+            MuiListItem: {
+                defaultProps: {
+                    dense: true,
+                },
+            },
+            MuiOutlinedInput: {
+                defaultProps: {
+                    margin: 'dense',
+                },
+            },
+            MuiFab: {
+                defaultProps: {
+                    size: 'small',
+                },
+                styleOverrides: {
+                    secondary: {
+                        backgroundColor: theme?.palette?.quaternary?.main,
+                    },
+                },
+            },
+            MuiTable: {
+                defaultProps: {
+                    size: 'small',
+                },
+            },
+            MuiPopover: {
+                defaultProps: {
+                    transitionDuration: 0,
+                },
+            },
+            MuiMenu: {
+                defaultProps: {
+                    transitionDuration: 0,
+                },
+            },
+            MuiMenuItem: {
+                defaultProps: {
+                    dense: true,
+                },
+            },
+            MuiTextField: {
+                defaultProps: {
+                    margin: 'dense',
+                    variant: 'standard',
+                },
+            },
+            MuiLink: {
+                styleOverrides: {
+                    root: ({ theme }) => ({
+                        color: theme.palette.text.secondary,
+                    }),
+                },
+            },
+            MuiCheckbox: {
+                styleOverrides: {
+                    root: ({ theme }) => theme.palette.mode === 'dark'
+                        ? {
+                            color: theme.palette.text.secondary,
+                            '&.Mui-checked': {
+                                color: theme.palette.text.secondary,
+                            },
+                        }
+                        : undefined,
+                },
+            },
+            MuiRadio: {
+                styleOverrides: {
+                    root: ({ theme }) => theme.palette.mode === 'dark'
+                        ? {
+                            color: theme.palette.text.secondary,
+                            '&.Mui-checked': {
+                                color: theme.palette.text.secondary,
+                            },
+                        }
+                        : undefined,
+                },
+            },
+            MuiFormLabel: {
+                styleOverrides: {
+                    root: ({ theme }) => theme.palette.mode === 'dark'
+                        ? {
+                            color: theme.palette.text.secondary,
+                            '&.Mui-focused': {
+                                color: theme.palette.text.secondary,
+                            },
+                        }
+                        : undefined,
+                },
+            },
+            MuiAccordionSummary: {
+                styleOverrides: {
+                    root: {
+                        backgroundColor: theme?.palette?.tertiary?.main,
+                    },
+                    content: {
+                        color: theme?.palette?.tertiary?.contrastText,
+                    },
+                },
+            },
+            MuiToggleButtonGroup: {
+                defaultProps: {
+                    size: 'small',
+                },
+            },
+            MuiButtonBase: {
+                styleOverrides: {
+                    root: {
+                        '& .MuiTouchRipple-ripple': {
+                            animationDuration: '50ms !important',
+                        },
+                        '& .MuiTouchRipple-child': {
+                            animationDuration: '50ms !important',
+                        },
+                    },
+                },
+            },
+        },
+    };
+    return deepmerge(themeP, theme || {}, { arrayMerge: overwriteArrayMerge });
+}
+const themeCache = new Map();
+function getThemeCacheKey(configTheme, themeName) {
+    return JSON.stringify({ configTheme, themeName });
+}
+export function createJBrowseTheme(configTheme = {}, themes = defaultThemes, themeName = 'default') {
+    const cacheKey = getThemeCacheKey(configTheme, themeName);
+    const cached = themeCache.get(cacheKey);
+    if (cached) {
+        return cached;
+    }
+    const theme = createTheme(createJBrowseBaseTheme(themeName === 'default'
+        ? deepmerge(themes.default, augmentThemeColors(configTheme), {
+            arrayMerge: overwriteArrayMerge,
+        })
+        : addMissingColors(themes[themeName])));
+    themeCache.set(cacheKey, theme);
+    return theme;
+}
+function augmentThemeColors(theme = {}) {
+    const augmentedPalette = Object.create(null);
+    for (const entry of [
+        'primary',
+        'secondary',
+        'tertiary',
+        'quaternary',
+        'highlight',
+    ]) {
+        const paletteEntry = theme.palette?.[entry];
+        if (paletteEntry) {
+            augmentedPalette[entry] = refTheme.palette.augmentColor('color' in paletteEntry
+                ? paletteEntry
+                : { color: paletteEntry });
+        }
+    }
+    return Object.keys(augmentedPalette).length > 0
+        ? deepmerge(theme, { palette: augmentedPalette })
+        : theme;
+}
+function addMissingColors(theme = {}) {
+    const { palette } = theme;
+    return augmentThemeColors(deepmerge(theme, {
+        palette: {
+            quaternary: palette?.quaternary || lightgrey,
+            tertiary: palette?.tertiary || lightgrey,
+            highlight: palette?.highlight || mandarin,
+            insertion: palette?.insertion || insertion,
+            softclip: palette?.softclip || softclip,
+            skip: palette?.skip || skip,
+            hardclip: palette?.hardclip || hardclip,
+            deletion: palette?.deletion || deletion,
+            startCodon: palette?.startCodon || startCodon,
+            stopCodon: palette?.stopCodon || stopCodon,
+        },
+    }));
+}

package/esm/ui/useEvent.js

@@ -0,0 +1,10 @@
+import * as React from 'react';
+export function useEvent(handler) {
+    const handlerRef = React.useRef(null);
+    React.useLayoutEffect(() => {
+        handlerRef.current = handler;
+    });
+    return React.useCallback((...args) => {
+        handlerRef.current?.(...args);
+    }, []);
+}

package/esm/util/Base1DUtils.d.ts

@@ -0,0 +1,38 @@
+import type { ViewSnap } from './index.ts';
+export interface BpOffset {
+    refName?: string;
+    index: number;
+    offset: number;
+    start?: number;
+    end?: number;
+}
+export declare function moveTo(self: ViewSnap & {
+    zoomTo: (arg: number) => number;
+    scrollTo: (arg: number) => void;
+}, start?: BpOffset, end?: BpOffset): void;
+export declare function pxToBp(self: ViewSnap, px: number): {
+    coord: number;
+    index: number;
+    refName: string;
+    oob: boolean;
+    assemblyName: string;
+    offset: number;
+    start: number;
+    end: number;
+    reversed?: boolean;
+};
+export declare function bpToPx({ refName, coord, regionNumber, self, }: {
+    refName: string;
+    coord: number;
+    regionNumber?: number;
+    self: ViewSnap;
+}): {
+    index: number;
+    offsetPx: number;
+} | undefined;
+export declare function bpToPxMap({ refName, coord, regionNumber, self, }: {
+    refName: string;
+    coord: number;
+    regionNumber?: number;
+    self: ViewSnap;
+}): {};

package/esm/util/Base1DUtils.js

@@ -0,0 +1,205 @@
+function lengthBetween(self, start, end) {
+    let bpSoFar = 0;
+    const { displayedRegions } = self;
+    if (start.index === end.index) {
+        bpSoFar += end.offset - start.offset;
+    }
+    else {
+        const s = displayedRegions[start.index];
+        bpSoFar += s.end - s.start - start.offset;
+        if (end.index - start.index >= 2) {
+            for (let i = start.index + 1, l = end.index; i < l; i++) {
+                const region = displayedRegions[i];
+                const len = region.end - region.start;
+                bpSoFar += len;
+            }
+        }
+        bpSoFar += end.offset;
+    }
+    return bpSoFar;
+}
+export function moveTo(self, start, end) {
+    if (!start || !end) {
+        return;
+    }
+    const { width, interRegionPaddingWidth, displayedRegions, bpPerPx, minimumBlockWidth, } = self;
+    const len = lengthBetween(self, start, end);
+    let numBlocksWideEnough = 0;
+    for (let i = start.index, l = end.index; i < l; i++) {
+        const r = displayedRegions[i];
+        if ((r.end - r.start) / bpPerPx > minimumBlockWidth) {
+            numBlocksWideEnough++;
+        }
+    }
+    const targetBpPerPx = len / (width - interRegionPaddingWidth * numBlocksWideEnough);
+    const newBpPerPx = self.zoomTo(targetBpPerPx);
+    let extraBp = 0;
+    if (targetBpPerPx < newBpPerPx) {
+        extraBp = ((newBpPerPx - targetBpPerPx) * self.width) / 2;
+    }
+    let bpToStart = -extraBp;
+    for (let i = 0, l = displayedRegions.length; i < l; i++) {
+        const region = displayedRegions[i];
+        if (start.index === i) {
+            bpToStart += start.offset;
+            break;
+        }
+        else {
+            bpToStart += region.end - region.start;
+        }
+    }
+    const scrollPos = Math.round(bpToStart / self.bpPerPx);
+    self.scrollTo(scrollPos);
+}
+function coord(r, bp) {
+    return Math.floor(r.reversed ? r.end - bp : r.start + bp) + 1;
+}
+export function pxToBp(self, px) {
+    let bpSoFar = 0;
+    const { bpPerPx, offsetPx, displayedRegions, interRegionPaddingWidth, staticBlocks, } = self;
+    const blocks = staticBlocks.contentBlocks;
+    const bp = (offsetPx + px) * bpPerPx;
+    if (bp < 0) {
+        const r = displayedRegions[0];
+        const snap = r;
+        return {
+            ...snap,
+            oob: true,
+            coord: coord(r, bp),
+            offset: bp,
+            index: 0,
+        };
+    }
+    const interRegionPaddingBp = interRegionPaddingWidth * bpPerPx;
+    let currBlock = 0;
+    for (let i = 0, l = displayedRegions.length; i < l; i++) {
+        const r = displayedRegions[i];
+        const len = r.end - r.start;
+        const offset = bp - bpSoFar;
+        if (len + bpSoFar > bp && bpSoFar <= bp) {
+            const snap = r;
+            return {
+                ...snap,
+                oob: false,
+                offset,
+                coord: coord(r, offset),
+                index: i,
+            };
+        }
+        if (blocks[currBlock]?.regionNumber === i) {
+            const paddingStart = bpSoFar + len;
+            const paddingEnd = paddingStart + interRegionPaddingBp;
+            if (bp >= paddingStart &&
+                bp < paddingEnd &&
+                i + 1 < displayedRegions.length) {
+                const nextR = displayedRegions[i + 1];
+                const snap = nextR;
+                return {
+                    ...snap,
+                    oob: false,
+                    offset: 0,
+                    coord: coord(nextR, 0),
+                    index: i + 1,
+                };
+            }
+            bpSoFar += len + interRegionPaddingBp;
+            currBlock++;
+        }
+        else {
+            bpSoFar += len;
+        }
+    }
+    if (bp >= bpSoFar && displayedRegions.length > 0) {
+        const r = displayedRegions.at(-1);
+        const len = r.end - r.start;
+        const offset = bp - bpSoFar + len;
+        const snap = r;
+        return {
+            ...snap,
+            oob: true,
+            offset,
+            coord: coord(r, offset),
+            index: displayedRegions.length - 1,
+        };
+    }
+    return {
+        coord: 0,
+        index: 0,
+        refName: '',
+        oob: true,
+        assemblyName: '',
+        offset: 0,
+        start: 0,
+        end: 0,
+        reversed: false,
+    };
+}
+export function bpToPx({ refName, coord, regionNumber, self, }) {
+    let bpSoFar = 0;
+    const { interRegionPaddingWidth, bpPerPx, displayedRegions, staticBlocks } = self;
+    const blocks = staticBlocks.contentBlocks;
+    const interRegionPaddingBp = interRegionPaddingWidth * bpPerPx;
+    let currBlock = 0;
+    let i = 0;
+    for (let l = displayedRegions.length; i < l; i++) {
+        const r = displayedRegions[i];
+        const len = r.end - r.start;
+        if (refName === r.refName &&
+            coord >= r.start &&
+            coord <= r.end &&
+            (regionNumber ? regionNumber === i : true)) {
+            bpSoFar += r.reversed ? r.end - coord : coord - r.start;
+            break;
+        }
+        if (blocks[currBlock]?.regionNumber === i) {
+            bpSoFar += len + interRegionPaddingBp;
+            currBlock++;
+        }
+        else {
+            bpSoFar += len;
+        }
+    }
+    const found = displayedRegions[i];
+    if (found) {
+        return {
+            index: i,
+            offsetPx: Math.round(bpSoFar / bpPerPx),
+        };
+    }
+    return undefined;
+}
+export function bpToPxMap({ refName, coord, regionNumber, self, }) {
+    let bpSoFar = 0;
+    const { interRegionPaddingWidth, bpPerPx, displayedRegions, staticBlocks } = self;
+    const blocks = staticBlocks.contentBlocks;
+    const interRegionPaddingBp = interRegionPaddingWidth * bpPerPx;
+    const map = {};
+    let currBlock = 0;
+    let i = 0;
+    for (let l = displayedRegions.length; i < l; i++) {
+        const r = displayedRegions[i];
+        const len = r.end - r.start;
+        if (refName === r.refName &&
+            coord >= r.start &&
+            coord <= r.end &&
+            (regionNumber === undefined ? true : regionNumber === i)) {
+            bpSoFar += r.reversed ? r.end - coord : coord - r.start;
+            break;
+        }
+        if (blocks[currBlock]?.regionNumber === i) {
+            bpSoFar += len + interRegionPaddingBp;
+            currBlock++;
+        }
+        else {
+            bpSoFar += len;
+        }
+    }
+    const found = displayedRegions[i];
+    if (found) {
+        return {
+            index: i,
+            offsetPx: Math.round(bpSoFar / bpPerPx),
+        };
+    }
+    return map;
+}