@jbrowse/core 2.3.3 → 2.4.0

package/ui/theme.d.ts

@@ -1,9 +1,10 @@
 import { ThemeOptions } from '@mui/material/styles';
-import type { PaletteOptions } from '@mui/material/styles/createPalette';
 declare module '@mui/material/styles/createPalette' {
     interface Palette {
         tertiary: Palette['primary'];
         quaternary: Palette['primary'];
+        stopCodon?: string;
+        startCodon?: string;
         bases: {
             A: Palette['primary'];
             C: Palette['primary'];
@@ -14,6 +15,8 @@ declare module '@mui/material/styles/createPalette' {
     interface PaletteOptions {
         tertiary?: PaletteOptions['primary'];
         quaternary?: PaletteOptions['primary'];
+        stopCodon?: string;
+        startCodon?: string;
         bases?: {
             A?: PaletteOptions['primary'];
             C?: PaletteOptions['primary'];
@@ -22,159 +25,10 @@ declare module '@mui/material/styles/createPalette' {
         };
     }
 }
-export declare const jbrowseDefaultPalette: {
-    primary: {
-        main: string;
-    };
-    secondary: {
-        main: string;
-    };
-    tertiary: import("@mui/material/styles").PaletteColor;
-    quaternary: import("@mui/material/styles").PaletteColor;
-    stopCodon: string;
-    startCodon: string;
-    bases: {
-        A: import("@mui/material/styles").PaletteColor;
-        C: import("@mui/material/styles").PaletteColor;
-        G: import("@mui/material/styles").PaletteColor;
-        T: import("@mui/material/styles").PaletteColor;
-    };
+export declare const defaultThemes: ThemeMap;
+export declare function createJBrowseBaseTheme(theme?: ThemeOptions): ThemeOptions;
+type ThemeMap = {
+    [key: string]: ThemeOptions;
 };
-export declare function createJBrowseDefaultProps(): {
-    components: {
-        MuiButton: {
-            defaultProps: {
-                size: "small";
-            };
-        };
-        MuiAccordion: {
-            defaultProps: {
-                disableGutters: boolean;
-                TransitionProps: {
-                    timeout: number;
-                };
-            };
-        };
-        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: boolean;
-            };
-        };
-        MuiOutlinedInput: {
-            defaultProps: {
-                margin: "dense";
-            };
-        };
-        MuiFab: {
-            defaultProps: {
-                size: "small";
-            };
-        };
-        MuiTable: {
-            defaultProps: {
-                size: "small";
-            };
-        };
-        MuiMenuList: {
-            defaultProps: {
-                dense: boolean;
-            };
-        };
-        MuiMenuItem: {
-            defaultProps: {
-                dense: boolean;
-            };
-        };
-        MuiTextField: {
-            defaultProps: {
-                margin: "dense";
-                variant: "standard";
-            };
-        };
-    };
-};
-export declare function createJBrowseDefaultOverrides(palette?: PaletteOptions): {
-    components: {
-        MuiIconButton: {
-            styleOverrides: {
-                colorSecondary: {
-                    color: string;
-                };
-            };
-        };
-        MuiButton: {
-            styleOverrides: {
-                textSecondary: {
-                    color: string;
-                };
-            };
-        };
-        MuiFab: {
-            styleOverrides: {
-                secondary: {
-                    backgroundColor: string;
-                };
-            };
-        };
-        MuiLink: {
-            styleOverrides: {
-                root: {
-                    color: string;
-                };
-            };
-        };
-        MuiAccordionSummary: {
-            styleOverrides: {
-                root: {
-                    backgroundColor: string;
-                };
-                content: {
-                    color: string;
-                };
-            };
-        };
-    };
-};
-export declare function createJBrowseBaseTheme(palette?: PaletteOptions): ThemeOptions;
-export declare function createJBrowseTheme(theme?: ThemeOptions): import("@mui/material/styles").Theme;
+export declare function createJBrowseTheme(configTheme?: ThemeOptions, themes?: ThemeMap, themeName?: string): import("@mui/material/styles").Theme;
+export {};

package/ui/theme.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.createJBrowseTheme = exports.createJBrowseBaseTheme = exports.createJBrowseDefaultOverrides = exports.createJBrowseDefaultProps = exports.jbrowseDefaultPalette = void 0;
+exports.createJBrowseTheme = exports.createJBrowseBaseTheme = exports.defaultThemes = void 0;
 const colors_1 = require("@mui/material/colors");
 const styles_1 = require("@mui/material/styles");
 const deepmerge_1 = __importDefault(require("deepmerge"));
@@ -12,28 +12,156 @@ const grape = '#721E63';
 const forest = '#135560';
 const mandarin = '#FFB11D';
 const refTheme = (0, styles_1.createTheme)();
-exports.jbrowseDefaultPalette = {
-    // type: 'dark',
-    primary: { main: midnight },
-    secondary: { main: grape },
-    tertiary: refTheme.palette.augmentColor({ color: { main: forest } }),
-    quaternary: refTheme.palette.augmentColor({ color: { main: mandarin } }),
-    stopCodon: '#e22',
-    startCodon: '#3e3',
-    bases: {
-        A: refTheme.palette.augmentColor({ color: colors_1.green }),
-        C: refTheme.palette.augmentColor({ color: colors_1.blue }),
-        G: refTheme.palette.augmentColor({ color: colors_1.amber }),
-        T: refTheme.palette.augmentColor({ color: colors_1.red }),
-    },
+function stockTheme() {
+    return {
+        palette: {
+            mode: undefined,
+            primary: { main: midnight },
+            secondary: { main: grape },
+            tertiary: refTheme.palette.augmentColor({ color: { main: forest } }),
+            quaternary: refTheme.palette.augmentColor({ color: { main: mandarin } }),
+            stopCodon: '#e22',
+            startCodon: '#3e3',
+            bases: {
+                A: refTheme.palette.augmentColor({ color: colors_1.green }),
+                C: refTheme.palette.augmentColor({ color: colors_1.blue }),
+                G: refTheme.palette.augmentColor({ color: colors_1.amber }),
+                T: refTheme.palette.augmentColor({ color: colors_1.red }),
+            },
+        },
+        components: {
+            MuiLink: {
+                styleOverrides: {
+                    // the default link color uses theme.palette.primary.main which is
+                    // very bad with dark mode+midnight primary
+                    //
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    root: ({ theme }) => ({
+                        color: theme.palette.tertiary.main,
+                    }),
+                },
+            },
+        },
+    };
+}
+function getDefaultTheme() {
+    return {
+        name: 'Default (from config)',
+        ...stockTheme(),
+    };
+}
+function getLightStockTheme() {
+    return {
+        name: 'Light (stock)',
+        ...stockTheme(),
+    };
+}
+function getDarkStockTheme() {
+    return {
+        name: 'Dark (stock)',
+        palette: {
+            mode: 'dark',
+            primary: { main: midnight },
+            secondary: { main: grape },
+            tertiary: refTheme.palette.augmentColor({ color: { main: forest } }),
+            quaternary: refTheme.palette.augmentColor({ color: { main: mandarin } }),
+            stopCodon: '#e22',
+            startCodon: '#3e3',
+            bases: {
+                A: refTheme.palette.augmentColor({ color: colors_1.green }),
+                C: refTheme.palette.augmentColor({ color: colors_1.blue }),
+                G: refTheme.palette.augmentColor({ color: colors_1.amber }),
+                T: refTheme.palette.augmentColor({ color: colors_1.red }),
+            },
+        },
+        components: {
+            MuiAppBar: {
+                defaultProps: {
+                    enableColorOnDark: true,
+                },
+                styleOverrides: {
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    primary: (props) => {
+                        return props.theme.palette.primary.main;
+                    },
+                },
+            },
+        },
+    };
+}
+function getDarkMinimalTheme() {
+    return {
+        name: 'Dark (minimal)',
+        palette: {
+            mode: 'dark',
+            primary: { main: colors_1.grey[700] },
+            secondary: { main: colors_1.grey[800] },
+            tertiary: refTheme.palette.augmentColor({ color: { main: colors_1.grey[900] } }),
+            quaternary: refTheme.palette.augmentColor({ color: { main: mandarin } }),
+            stopCodon: '#e22',
+            startCodon: '#3e3',
+            bases: {
+                A: refTheme.palette.augmentColor({ color: colors_1.green }),
+                C: refTheme.palette.augmentColor({ color: colors_1.blue }),
+                G: refTheme.palette.augmentColor({ color: colors_1.amber }),
+                T: refTheme.palette.augmentColor({ color: colors_1.red }),
+            },
+        },
+    };
+}
+function getMinimalTheme() {
+    return {
+        name: 'Light (minimal)',
+        palette: {
+            primary: { main: colors_1.grey[900] },
+            secondary: { main: colors_1.grey[800] },
+            tertiary: refTheme.palette.augmentColor({ color: { main: colors_1.grey[900] } }),
+            quaternary: refTheme.palette.augmentColor({ color: { main: mandarin } }),
+            stopCodon: '#e22',
+            startCodon: '#3e3',
+            bases: {
+                A: refTheme.palette.augmentColor({ color: colors_1.green }),
+                C: refTheme.palette.augmentColor({ color: colors_1.blue }),
+                G: refTheme.palette.augmentColor({ color: colors_1.amber }),
+                T: refTheme.palette.augmentColor({ color: colors_1.red }),
+            },
+        },
+    };
+}
+exports.defaultThemes = {
+    default: getDefaultTheme(),
+    lightStock: getLightStockTheme(),
+    lightMinimal: getMinimalTheme(),
+    darkMinimal: getDarkMinimalTheme(),
+    darkStock: getDarkStockTheme(),
 };
-function createJBrowseDefaultProps( /* palette: PaletteOptions = {} */) {
+function createDefaultProps(theme) {
+    var _a, _b, _c, _d, _e, _f;
     return {
         components: {
             MuiButton: {
                 defaultProps: {
                     size: 'small',
                 },
+                styleOverrides: {
+                    // the default button, especially when not using variant=contained, uses
+                    // theme.palette.primary.main for text which is very bad with dark
+                    // mode+midnight primary
+                    //
+                    // keeps text secondary for darkmode, uses
+                    // a text-like coloring to ensure contrast
+                    // xref https://stackoverflow.com/a/72546130/2129219
+                    //
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    root: (props) => {
+                        const { theme } = props;
+                        return theme.palette.mode === 'dark'
+                            ? {
+                                color: theme.palette.text.primary,
+                            }
+                            : undefined;
+                    },
+                },
             },
             MuiAccordion: {
                 defaultProps: {
@@ -96,12 +224,28 @@ function createJBrowseDefaultProps( /* palette: PaletteOptions = {} */) {
                 defaultProps: {
                     size: 'small',
                 },
+                styleOverrides: {
+                    secondary: {
+                        // @ts-ignore
+                        backgroundColor: (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _a === void 0 ? void 0 : _a.quaternary) === null || _b === void 0 ? void 0 : _b.main,
+                    },
+                },
             },
             MuiTable: {
                 defaultProps: {
                     size: 'small',
                 },
             },
+            MuiPopover: {
+                defaultProps: {
+                    transitionDuration: 0,
+                },
+            },
+            MuiMenu: {
+                defaultProps: {
+                    transitionDuration: 0,
+                },
+            },
             MuiMenuList: {
                 defaultProps: {
                     dense: true,
@@ -118,66 +262,125 @@ function createJBrowseDefaultProps( /* palette: PaletteOptions = {} */) {
                     variant: 'standard',
                 },
             },
-        },
-    };
-}
-exports.createJBrowseDefaultProps = createJBrowseDefaultProps;
-function createJBrowseDefaultOverrides(palette = {}) {
-    const generatedPalette = (0, deepmerge_1.default)(exports.jbrowseDefaultPalette, palette);
-    return {
-        components: {
-            MuiIconButton: {
+            MuiLink: {
                 styleOverrides: {
-                    colorSecondary: {
-                        color: generatedPalette.tertiary.main,
-                    },
+                    // the default link color uses theme.palette.primary.main which is
+                    // very bad with dark mode+midnight primary
+                    //
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    root: ({ theme }) => ({
+                        color: theme.palette.text.secondary,
+                    }),
                 },
             },
-            MuiButton: {
+            MuiCheckbox: {
                 styleOverrides: {
-                    textSecondary: {
-                        color: generatedPalette.tertiary.main,
+                    // the default checkbox-when-checked color uses
+                    // theme.palette.primary.main which is very bad with dark
+                    // mode+midnight primary
+                    //
+                    // keeps the forest-green checkbox by default but for darkmode, uses
+                    // a text-like coloring to ensure contrast
+                    // xref https://stackoverflow.com/a/72546130/2129219
+                    //
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    root: (props) => {
+                        const { theme } = props;
+                        return theme.palette.mode === 'dark'
+                            ? {
+                                color: theme.palette.text.secondary,
+                                '&.Mui-checked': {
+                                    color: theme.palette.text.secondary,
+                                },
+                            }
+                            : undefined;
                     },
                 },
             },
-            MuiFab: {
+            MuiRadio: {
                 styleOverrides: {
-                    secondary: {
-                        backgroundColor: generatedPalette.quaternary.main,
+                    // the default checkbox-when-checked color uses
+                    // theme.palette.primary.main which is very bad with dark
+                    // mode+midnight primary
+                    //
+                    // keeps the forest-green checkbox by default but for darkmode, uses
+                    // a text-like coloring to ensure contrast
+                    // xref https://stackoverflow.com/a/72546130/2129219
+                    //
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    root: (props) => {
+                        const { theme } = props;
+                        return theme.palette.mode === 'dark'
+                            ? {
+                                color: theme.palette.text.secondary,
+                                '&.Mui-checked': {
+                                    color: theme.palette.text.secondary,
+                                },
+                            }
+                            : undefined;
                     },
                 },
             },
-            MuiLink: {
+            MuiFormLabel: {
                 styleOverrides: {
-                    root: {
-                        color: generatedPalette.tertiary.main,
+                    // the default checkbox-when-checked color uses
+                    // theme.palette.primary.main which is very bad with dark
+                    // mode+midnight primary
+                    //
+                    // keeps the forest-green checkbox by default but for darkmode, uses
+                    // a text-like coloring to ensure contrast
+                    // xref https://stackoverflow.com/a/72546130/2129219
+                    //
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    root: (props) => {
+                        const { theme } = props;
+                        return theme.palette.mode === 'dark'
+                            ? {
+                                color: theme.palette.text.secondary,
+                                '&.Mui-focused': {
+                                    color: theme.palette.text.secondary,
+                                },
+                            }
+                            : undefined;
                     },
                 },
             },
             MuiAccordionSummary: {
                 styleOverrides: {
                     root: {
-                        backgroundColor: generatedPalette.tertiary.main,
+                        // @ts-ignore
+                        backgroundColor: (_d = (_c = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _c === void 0 ? void 0 : _c.tertiary) === null || _d === void 0 ? void 0 : _d.main,
                     },
                     content: {
-                        color: generatedPalette.tertiary.contrastText,
+                        // @ts-ignore
+                        color: (_f = (_e = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _e === void 0 ? void 0 : _e.tertiary) === null || _f === void 0 ? void 0 : _f.contrastText,
                     },
                 },
             },
+            MuiToggleButtonGroup: {
+                defaultProps: {
+                    size: 'small',
+                },
+            },
         },
     };
 }
-exports.createJBrowseDefaultOverrides = createJBrowseDefaultOverrides;
-function createJBrowseBaseTheme(palette) {
-    return {
-        palette: exports.jbrowseDefaultPalette,
+function createJBrowseBaseTheme(theme) {
+    return (0, deepmerge_1.default)({
+        palette: theme === null || theme === void 0 ? void 0 : theme.palette,
         typography: { fontSize: 12 },
         spacing: 4,
-        ...(0, deepmerge_1.default)(createJBrowseDefaultProps(), createJBrowseDefaultOverrides(palette)),
-    };
+        ...createDefaultProps(theme),
+    }, theme || {});
 }
 exports.createJBrowseBaseTheme = createJBrowseBaseTheme;
-function createJBrowseTheme(theme) {
+function createJBrowseTheme(configTheme = {}, themes = exports.defaultThemes, themeName = 'default') {
+    return (0, styles_1.createTheme)(createJBrowseBaseTheme(themeName === 'default'
+        ? (0, deepmerge_1.default)(themes['default'], augmentTheme(configTheme))
+        : augmentThemePlus(themes[themeName]) || themes['default']));
+}
+exports.createJBrowseTheme = createJBrowseTheme;
+function augmentTheme(theme = {}) {
     var _a, _b;
     if ((_a = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _a === void 0 ? void 0 : _a.tertiary) {
         theme = (0, deepmerge_1.default)(theme, {
@@ -197,6 +400,25 @@ function createJBrowseTheme(theme) {
             },
         });
     }
-    return (0, styles_1.createTheme)((0, deepmerge_1.default)(createJBrowseBaseTheme(theme === null || theme === void 0 ? void 0 : theme.palette), theme || {}));
+    return theme;
+}
+// creates some blank quaternary/tertiary colors if unsupplied by a user theme
+function augmentThemePlus(theme = {}) {
+    var _a, _b;
+    theme = augmentTheme(theme);
+    if (!((_a = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _a === void 0 ? void 0 : _a.quaternary)) {
+        theme = (0, deepmerge_1.default)(theme, {
+            palette: {
+                quaternary: refTheme.palette.augmentColor({ color: { main: '#aaa' } }),
+            },
+        });
+    }
+    if (!((_b = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _b === void 0 ? void 0 : _b.tertiary)) {
+        theme = (0, deepmerge_1.default)(theme, {
+            palette: {
+                tertiary: refTheme.palette.augmentColor({ color: { main: '#aaa' } }),
+            },
+        });
+    }
+    return theme;
 }
-exports.createJBrowseTheme = createJBrowseTheme;

package/util/index.d.ts

@@ -1,22 +1,22 @@
 import PluginManager from '../PluginManager';
 import { IAnyStateTreeNode, IStateTreeNode } from 'mobx-state-tree';
 import { IReactionPublic, IReactionOptions } from 'mobx';
-import SimpleFeature, { Feature, isFeature } from './simpleFeature';
+import SimpleFeature, { Feature, SimpleFeatureSerialized, isFeature } from './simpleFeature';
 import { AssemblyManager, Region, TypeTestedByPredicate } from './types';
 import { BaseBlock } from './blockTypes';
-export type { Feature };
 export * from './types';
 export * from './aborting';
 export * from './when';
 export * from './range';
 export * from './dedupe';
 export { SimpleFeature, isFeature };
+export type { Feature, SimpleFeatureSerialized };
 export * from './offscreenCanvasPonyfill';
 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 useDebouncedCallback<A extends any[]>(callback: (...args: A) => void, wait?: number): (...args: A) => void;
+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)[];
@@ -153,7 +153,7 @@ export declare function bpSpanPx(leftBp: number, rightBp: number, region: {
     end: number;
     reversed?: boolean;
 }, bpPerPx: number): [number, number];
-export declare function iterMap<T, U>(iterable: Iterable<T>, func: (item: T) => U, sizeHint?: number): U[];
+export declare function iterMap<T, U>(iter: Iterable<T>, func: (arg: T) => U, sizeHint?: number): U[];
 /**
  * Returns the index of the last element in the array where predicate is true,
  * and -1 otherwise.
@@ -280,8 +280,8 @@ export declare const defaultCodonTable: {
     GGT: string;
 };
 /**
- *  take CodonTable above and generate larger codon table that includes
- *  all permutations of upper and lower case nucleotides
+ * take CodonTable above and generate larger codon table that includes all
+ * permutations of upper and lower case nucleotides
  */
 export declare function generateCodonTable(table: any): {
     [key: string]: string;
@@ -337,12 +337,19 @@ export declare function getUriLink(value: {
     baseUri?: string;
 }): string;
 export declare function getStr(obj: unknown): string;
-export declare function measureGridWidth(elements: string[]): number;
+export declare function measureGridWidth(elements: string[], args?: {
+    minWidth?: number;
+    fontSize?: number;
+    maxWidth?: number;
+    padding?: number;
+    stripHTML?: boolean;
+}): number;
 export declare function getEnv(obj: any): {
     pluginManager: PluginManager;
 };
 export declare function localStorageGetItem(item: string): string | null | undefined;
-export declare function max(arr: number[]): number;
-export declare function min(arr: number[]): number;
+export declare function localStorageSetItem(str: string, item: string): void;
+export declare function max(arr: number[], init?: number): number;
+export declare function min(arr: number[], init?: number): number;
 export declare function sum(arr: number[]): number;
 export declare function avg(arr: number[]): number;