@jbrowse/core 4.3.0 → 5.0.0-beta.10

package/esm/ui/theme.js

@@ -1,392 +1,292 @@
-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,
+import { createTheme } from '@mui/material/styles';
+import { deepMerge } from '../util/deepMerge.js';
+import { palettePresets, resolvePalette, resolveThemeSelection, } from './palette.js';
+import { DEFAULT_FONT_SIZE, DEFAULT_SPACING } from './styleTheme.js';
+// The colors themselves live in `palette.ts`, which imports no toolkit. This
+// module's job is to hand what `resolvePalette` produces to MUI, so JBrowse's
+// Material UI chrome and JBrowse's renderers cannot disagree about a color.
+// Nothing here decides one.
+// Static domain colors and the theme presets are re-exported from palette.ts so
+// existing `@jbrowse/core/ui` imports are unaffected. Import them from
+// `@jbrowse/core/ui/palette` to get them without pulling in Material UI.
+export { colorFwdStrand, colorInterchrom, colorLongInsert, colorLongreadInv, colorPairLL, colorPairLR, colorPairLRDark, colorPairRL, colorPairRR, colorRevStrand, colorShortInsert, colorSplitReadInversion, colorSupplementary, colorUnmappedMate, colorUnmappedMateDark, methylated5hmC, methylated5mC, tagColorPalette, unmethylated5mC, } from './palette.js';
+// The display names and MUI component overrides layered on top of each palette.
+// The colors come from palette.ts, so a palette is stated once and this map is
+// the Material UI half of it. Light and dark are not entries here — they are
+// `mode`, which every one of these resolves along.
+export const defaultThemes = {
+    default: { palette: palettePresets.default, name: 'Default (from config)' },
+    stock: {
+        name: 'Stock',
+        palette: palettePresets.stock,
+    },
+    minimal: {
+        name: 'Minimal',
+        palette: palettePresets.minimal,
+    },
 };
-function stockTheme() {
+// The default primary (midnight) has poor contrast as a control color in dark
+// mode, so a control takes `accent` there, the token JBrowse's own non-Material
+// controls read. The extra selectors recolor checked/focused states too.
+// xref https://stackoverflow.com/a/72546130/2129219
+function darkModeContrastOverride(extraSelectors = [], colorOf = p => p.accent) {
     return {
-        palette: {
-            ...defaults,
-            mode: undefined,
-        },
-        components: {
-            MuiLink: {
-                styleOverrides: {
-                    root: ({ theme }) => ({
-                        color: theme.palette.tertiary.main,
-                    }),
-                },
-            },
+        root: ({ theme }) => {
+            if (theme.palette.mode !== 'dark') {
+                return undefined;
+            }
+            const color = colorOf(theme.palette);
+            return {
+                color,
+                ...Object.fromEntries(extraSelectors.map(s => [s, { color }])),
+            };
         },
     };
 }
-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(),
+// midnight primary is nearly invisible as an icon color on the dark header/
+// toolbars, so swap color="primary" icons and icon buttons to a text color in
+// dark mode. Targets the colorPrimary slot only, leaving default/secondary/
+// error icons untouched.
+const darkModePrimaryIconOverride = {
+    colorPrimary: ({ theme }) => theme.palette.mode === 'dark'
+        ? { color: theme.palette.text.primary }
+        : undefined,
 };
-function overwriteArrayMerge(_, sourceArray) {
-    return sourceArray;
-}
-export function createJBrowseBaseTheme(theme) {
-    const themeP = {
-        palette: theme?.palette,
-        typography: {
-            fontSize: 12,
+// the static half of a JBrowse theme: sizing plus the MUI component defaults
+// and style overrides every theme shares. No palette — that is the caller's,
+// merged over this by createJBrowseBaseTheme.
+const baseThemeOptions = {
+    typography: {
+        fontSize: DEFAULT_FONT_SIZE,
+    },
+    spacing: DEFAULT_SPACING,
+    // an animation makes every popover, dialog and hover trail the input
+    motion: {
+        reducedMotion: 'always',
+    },
+    components: {
+        MuiAppBar: {
+            // JBrowse's header keeps its brand in dark mode; MUI's default is to
+            // flatten it to the paper colour. A property of the app rather than of
+            // one palette — it used to sit on `darkStock` alone, so the theme a
+            // reader reaches by picking Dark over the default palette lost the
+            // header the old dark theme had. MUI reads this only in dark mode.
+            defaultProps: { enableColorOnDark: true },
         },
-        spacing: 4,
-        components: {
-            MuiTooltip: {
-                styleOverrides: {
-                    tooltip: {
-                        fontSize: 12,
-                    },
+        MuiTooltip: {
+            styleOverrides: {
+                tooltip: {
+                    fontSize: 12,
                 },
             },
-            MuiButton: {
-                defaultProps: {
-                    size: 'small',
-                },
-                styleOverrides: {
-                    root: ({ theme }) => theme.palette.mode === 'dark'
-                        ? {
-                            color: theme.palette.text.primary,
-                        }
-                        : undefined,
-                },
+        },
+        MuiButton: {
+            defaultProps: {
+                size: 'small',
             },
-            MuiAccordion: {
-                defaultProps: {
-                    disableGutters: true,
-                    slotProps: {
-                        transition: {
-                            timeout: 150,
-                            unmountOnExit: true,
-                        },
+            // 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
+            styleOverrides: darkModeContrastOverride([], p => p.text.primary),
+        },
+        MuiAccordion: {
+            defaultProps: {
+                disableGutters: true,
+                slotProps: {
+                    transition: {
+                        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',
-                },
+        },
+        MuiFilledInput: {
+            defaultProps: {
+                margin: 'dense',
             },
-            MuiInputLabel: {
-                defaultProps: {
-                    margin: 'dense',
-                },
+        },
+        MuiFormControl: {
+            defaultProps: {
+                margin: 'dense',
+                size: 'small',
             },
-            MuiToolbar: {
-                defaultProps: {
-                    variant: 'dense',
-                },
+        },
+        MuiFormHelperText: {
+            defaultProps: {
+                margin: 'dense',
             },
-            MuiListItem: {
-                defaultProps: {
-                    dense: true,
-                },
+        },
+        MuiIconButton: {
+            defaultProps: {
+                size: 'small',
             },
-            MuiOutlinedInput: {
-                defaultProps: {
-                    margin: 'dense',
-                },
+            styleOverrides: darkModePrimaryIconOverride,
+        },
+        MuiSvgIcon: {
+            styleOverrides: darkModePrimaryIconOverride,
+        },
+        MuiInputBase: {
+            defaultProps: {
+                margin: 'dense',
             },
-            MuiFab: {
-                defaultProps: {
-                    size: 'small',
-                },
-                styleOverrides: {
-                    secondary: {
-                        backgroundColor: theme?.palette?.quaternary?.main,
-                    },
-                },
+        },
+        MuiAutocomplete: {
+            defaultProps: {
+                size: 'small',
             },
-            MuiTable: {
-                defaultProps: {
-                    size: 'small',
-                },
+        },
+        MuiInputLabel: {
+            defaultProps: {
+                margin: 'dense',
             },
-            MuiPopover: {
-                defaultProps: {
-                    transitionDuration: 0,
-                },
+        },
+        MuiToolbar: {
+            defaultProps: {
+                variant: 'dense',
             },
-            MuiMenu: {
-                defaultProps: {
-                    transitionDuration: 0,
-                },
+        },
+        MuiListItem: {
+            defaultProps: {
+                dense: true,
             },
-            MuiMenuItem: {
-                defaultProps: {
-                    dense: true,
-                },
+        },
+        MuiOutlinedInput: {
+            defaultProps: {
+                margin: 'dense',
             },
-            MuiTextField: {
-                defaultProps: {
-                    margin: 'dense',
-                    variant: 'standard',
-                },
+        },
+        MuiFab: {
+            defaultProps: {
+                size: 'small',
             },
-            MuiLink: {
-                styleOverrides: {
-                    root: ({ theme }) => ({
-                        color: theme.palette.text.secondary,
-                    }),
-                },
+            styleOverrides: {
+                secondary: ({ theme: t }) => ({
+                    backgroundColor: t.palette.quaternary.main,
+                }),
             },
-            MuiCheckbox: {
-                styleOverrides: {
-                    root: ({ theme }) => theme.palette.mode === 'dark'
-                        ? {
-                            color: theme.palette.text.secondary,
-                            '&.Mui-checked': {
-                                color: theme.palette.text.secondary,
-                            },
-                        }
-                        : undefined,
-                },
+        },
+        MuiTable: {
+            defaultProps: {
+                size: 'small',
             },
-            MuiRadio: {
-                styleOverrides: {
-                    root: ({ theme }) => theme.palette.mode === 'dark'
-                        ? {
-                            color: theme.palette.text.secondary,
-                            '&.Mui-checked': {
-                                color: theme.palette.text.secondary,
-                            },
-                        }
-                        : undefined,
-                },
+        },
+        MuiMenuItem: {
+            defaultProps: {
+                dense: true,
             },
-            MuiFormLabel: {
-                styleOverrides: {
-                    root: ({ theme }) => theme.palette.mode === 'dark'
-                        ? {
-                            color: theme.palette.text.secondary,
-                            '&.Mui-focused': {
-                                color: theme.palette.text.secondary,
-                            },
-                        }
-                        : undefined,
-                },
+        },
+        MuiTextField: {
+            defaultProps: {
+                margin: 'dense',
+                variant: 'standard',
             },
-            MuiAccordionSummary: {
-                styleOverrides: {
-                    root: {
-                        backgroundColor: theme?.palette?.tertiary?.main,
-                    },
-                    content: {
-                        color: theme?.palette?.tertiary?.contrastText,
-                    },
-                },
+        },
+        MuiLink: {
+            styleOverrides: {
+                // the default link color uses theme.palette.primary.main which is
+                // very bad with dark mode+midnight primary. use forest-green
+                // (tertiary) in light mode, but fall back to a text-like color in
+                // dark mode where tertiary has poor contrast on the dark background
+                root: ({ theme }) => ({
+                    color: theme.palette.mode === 'dark'
+                        ? theme.palette.text.secondary
+                        : theme.palette.tertiary.main,
+                }),
             },
-            MuiToggleButtonGroup: {
-                defaultProps: {
-                    size: 'small',
-                },
+        },
+        MuiCheckbox: {
+            styleOverrides: darkModeContrastOverride(['&.Mui-checked']),
+        },
+        MuiRadio: {
+            styleOverrides: darkModeContrastOverride(['&.Mui-checked']),
+        },
+        MuiFormLabel: {
+            styleOverrides: darkModeContrastOverride(['&.Mui-focused']),
+        },
+        // the rail, track and thumb are all `currentColor` off the root, so a
+        // midnight root paints the whole control dark-on-dark
+        MuiSlider: {
+            styleOverrides: darkModeContrastOverride(),
+        },
+        MuiAccordionSummary: {
+            styleOverrides: {
+                root: ({ theme: t }) => ({
+                    backgroundColor: t.palette.tertiary.main,
+                }),
+                content: ({ theme: t }) => ({
+                    color: t.palette.tertiary.contrastText,
+                }),
+                // MUI paints the chevron action.active, which vanishes on tertiary
+                expandIconWrapper: ({ theme: t }) => ({
+                    color: t.palette.tertiary.contrastText,
+                }),
             },
-            MuiButtonBase: {
-                styleOverrides: {
-                    root: {
-                        '& .MuiTouchRipple-ripple': {
-                            animationDuration: '50ms !important',
-                        },
-                        '& .MuiTouchRipple-child': {
-                            animationDuration: '50ms !important',
-                        },
-                    },
-                },
+        },
+        MuiToggleButtonGroup: {
+            defaultProps: {
+                size: 'small',
             },
         },
-    };
-    return deepmerge(themeP, theme || {}, { arrayMerge: overwriteArrayMerge });
+    },
+};
+export function createJBrowseBaseTheme(theme = {}) {
+    return deepMerge(baseThemeOptions, theme);
+}
+/**
+ * Rebuild a JBrowse theme from {@link SerializableThemeArgs}, the inverse of
+ * passing those args across RPC. Mirrors a session's `theme` getter so the main
+ * thread and a worker resolve to the same colors.
+ */
+export function createJBrowseThemeFromArgs(args = {}) {
+    return createJBrowseTheme(args.configTheme, { ...defaultThemes, ...args.extraThemes }, args.themeName, args.mode);
 }
+// Memoizes the built MUI theme across calls. Bounded in practice: the key space
+// is (config theme x selected preset), a handful of entries.
 const themeCache = new Map();
-function getThemeCacheKey(configTheme, themeName) {
-    return JSON.stringify({ configTheme, themeName });
+function getThemeCacheKey(configTheme, selectedTheme, themeName, mode) {
+    // key on the single selected theme definition, not the whole themes map,
+    // so configurable extraThemes that reuse a name still bust the cache.
+    // configTheme only participates on the 'default' path that reads it
+    return JSON.stringify({
+        configTheme: themeName === 'default' ? configTheme : undefined,
+        selectedTheme,
+        themeName,
+        mode,
+    }, 
+    // a plugin-supplied theme can carry style-override callbacks, which
+    // JSON.stringify drops, so two such themes would otherwise share a key
+    (_key, value) => typeof value === 'function' ? value.toString() : value);
 }
-export function createJBrowseTheme(configTheme = {}, themes = defaultThemes, themeName = 'default') {
-    const cacheKey = getThemeCacheKey(configTheme, themeName);
+/**
+ * Build the Material UI theme for a set of theme inputs.
+ *
+ * The colors are `resolvePalette`'s, spliced in already resolved, so this and
+ * every renderer read the same values by construction rather than by keeping
+ * two lists in step. What this adds on top is the Material UI half: the
+ * component defaults and style overrides in `baseThemeOptions`, plus whatever
+ * non-palette options the selected theme or the config theme declares.
+ */
+export function createJBrowseTheme(configTheme = {}, themes = defaultThemes, requestedName = 'default', requestedMode) {
+    // one resolver with resolvePalette, so a retired name and an extraThemes
+    // entry shadowing one mean the same thing to the colors and to the chrome
+    const { themeName, mode } = resolveThemeSelection(requestedName, requestedMode, themes);
+    const cacheKey = getThemeCacheKey(configTheme, themes[themeName], themeName, mode);
     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])));
+    const selected = themes[themeName] ?? themes.default ?? defaultThemes.default;
+    // only the 'default' theme draws from configTheme: the named themes are fixed
+    // presets and intentionally ignore config palette/spacing/components
+    const merged = themeName === 'default' ? deepMerge(selected, configTheme) : selected;
+    const theme = createTheme(createJBrowseBaseTheme({
+        ...merged,
+        palette: resolvePalette({
+            configTheme,
+            themeName,
+            mode,
+            extraThemes: themes,
+        }),
+    }));
     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,
-        },
-    }));
-}