@jbrowse/core 2.3.4 → 2.4.1

package/ui/ViewPanel.js

@@ -0,0 +1,49 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const react_error_boundary_1 = require("react-error-boundary");
+const mobx_react_1 = require("mobx-react");
+// locals
+const util_1 = require("../util");
+// ui elements
+const ErrorMessage_1 = __importDefault(require("./ErrorMessage"));
+const LoadingEllipses_1 = __importDefault(require("./LoadingEllipses"));
+const ViewContainer_1 = __importDefault(require("./ViewContainer"));
+const ViewPanel = (0, mobx_react_1.observer)(function ({ view, session, }) {
+    const { pluginManager } = (0, util_1.getEnv)(session);
+    const viewType = pluginManager.getViewType(view.type);
+    if (!viewType) {
+        throw new Error(`unknown view type ${view.type}`);
+    }
+    const { ReactComponent } = viewType;
+    return (react_1.default.createElement(ViewContainer_1.default, { view: view, onClose: () => session.removeView(view), onMinimize: () => view.setMinimized(!view.minimized) }, !view.minimized ? (react_1.default.createElement(react_error_boundary_1.ErrorBoundary, { FallbackComponent: ({ error }) => react_1.default.createElement(ErrorMessage_1.default, { error: error }) },
+        react_1.default.createElement(react_1.Suspense, { fallback: react_1.default.createElement(LoadingEllipses_1.default, { variant: "h6" }) },
+            react_1.default.createElement(ReactComponent, { model: view, session: session })))) : (false)));
+});
+exports.default = ViewPanel;

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,169 +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";
-            };
-        };
-        MuiPopover: {
-            defaultProps: {
-                transitionDuration: number;
-            };
-        };
-        MuiMenu: {
-            defaultProps: {
-                transitionDuration: number;
-            };
-        };
-        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.orange }),
+                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.orange }),
+                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.orange }),
+                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.orange }),
+                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,6 +224,12 @@ function createJBrowseDefaultProps( /* palette: PaletteOptions = {} */) {
                 defaultProps: {
                     size: 'small',
                 },
+                styleOverrides: {
+                    secondary: {
+                        // @ts-expect-error
+                        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: {
@@ -128,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-expect-error
+                        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-expect-error
+                        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, {
@@ -207,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;