@jbrowse/core
Version:
JBrowse 2 core libraries used by plugins
382 lines (381 loc) • 13.1 kB
JavaScript
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.defaultThemes = void 0;
exports.createJBrowseBaseTheme = createJBrowseBaseTheme;
exports.createJBrowseTheme = createJBrowseTheme;
const material_1 = require("@mui/material");
const colors_1 = require("@mui/material/colors");
const deepmerge_1 = __importDefault(require("deepmerge"));
const refTheme = (0, material_1.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: 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 }),
};
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: colors_1.grey[700] },
secondary: { main: colors_1.grey[800] },
tertiary: refTheme.palette.augmentColor({ color: { main: colors_1.grey[900] } }),
},
};
}
function getMinimalTheme() {
return {
name: 'Light (minimal)',
palette: {
...defaults,
primary: { main: colors_1.grey[900] },
secondary: { main: colors_1.grey[800] },
tertiary: refTheme.palette.augmentColor({ color: { main: colors_1.grey[900] } }),
},
};
}
exports.defaultThemes = {
default: getDefaultTheme(),
lightStock: getLightStockTheme(),
lightMinimal: getMinimalTheme(),
darkMinimal: getDarkMinimalTheme(),
darkStock: getDarkStockTheme(),
};
function overwriteArrayMerge(_, sourceArray) {
return sourceArray;
}
function createJBrowseBaseTheme(theme) {
var _a, _b, _c, _d, _e, _f;
const themeP = {
palette: theme === null || theme === void 0 ? void 0 : 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: (_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,
},
},
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: (_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: (_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',
},
},
},
};
return (0, deepmerge_1.default)(themeP, theme || {}, { arrayMerge: overwriteArrayMerge });
}
function createJBrowseTheme(configTheme = {}, themes = exports.defaultThemes, themeName = 'default') {
return (0, material_1.createTheme)(createJBrowseBaseTheme(themeName === 'default'
? (0, deepmerge_1.default)(themes.default, augmentThemeColors(configTheme), {
arrayMerge: overwriteArrayMerge,
})
: addMissingColors(themes[themeName])));
}
function augmentThemeColors(theme = {}) {
var _a;
for (const entry of [
'primary',
'secondary',
'tertiary',
'quaternary',
'highlight',
]) {
if ((_a = theme.palette) === null || _a === void 0 ? void 0 : _a[entry]) {
theme = (0, deepmerge_1.default)(theme, {
palette: {
[entry]: refTheme.palette.augmentColor('color' in theme.palette[entry]
? theme.palette[entry]
: {
color: theme.palette[entry],
}),
},
});
}
}
return theme;
}
function addMissingColors(theme = {}) {
const { palette } = theme;
return augmentThemeColors((0, deepmerge_1.default)(theme, {
palette: {
quaternary: (palette === null || palette === void 0 ? void 0 : palette.quaternary) || lightgrey,
tertiary: (palette === null || palette === void 0 ? void 0 : palette.tertiary) || lightgrey,
highlight: (palette === null || palette === void 0 ? void 0 : palette.highlight) || mandarin,
insertion: (palette === null || palette === void 0 ? void 0 : palette.insertion) || insertion,
softclip: (palette === null || palette === void 0 ? void 0 : palette.softclip) || softclip,
skip: (palette === null || palette === void 0 ? void 0 : palette.skip) || skip,
hardclip: (palette === null || palette === void 0 ? void 0 : palette.hardclip) || hardclip,
deletion: (palette === null || palette === void 0 ? void 0 : palette.deletion) || deletion,
startCodon: (palette === null || palette === void 0 ? void 0 : palette.startCodon) || startCodon,
stopCodon: (palette === null || palette === void 0 ? void 0 : palette.stopCodon) || stopCodon,
},
}));
}