@jbrowse/plugin-linear-genome-view
Version:
JBrowse 2 linear genome view
155 lines (154 loc) • 6.14 kB
JavaScript
import { lazy } from 'react';
import { ConfigurationReference, getConf } from '@jbrowse/core/configuration';
import SerializableFilterChain from '@jbrowse/core/pluggableElementTypes/renderers/util/serializableFilterChain';
import { getSession } from '@jbrowse/core/util';
import VisibilityIcon from '@mui/icons-material/Visibility';
import { cast, getEnv, types } from 'mobx-state-tree';
import { BaseLinearDisplay } from '../BaseLinearDisplay';
const SetMaxHeightDialog = lazy(() => import('./components/SetMaxHeightDialog'));
const AddFiltersDialog = lazy(() => import('./components/AddFiltersDialog'));
function stateModelFactory(configSchema) {
return types
.compose('LinearBasicDisplay', BaseLinearDisplay, types.model({
type: types.literal('LinearBasicDisplay'),
trackShowLabels: types.maybe(types.boolean),
trackShowDescriptions: types.maybe(types.boolean),
trackDisplayMode: types.maybe(types.string),
trackMaxHeight: types.maybe(types.number),
configuration: ConfigurationReference(configSchema),
jexlFilters: types.maybe(types.array(types.string)),
}))
.views(self => ({
get activeFilters() {
var _a;
return ((_a = self.jexlFilters) !== null && _a !== void 0 ? _a : getConf(self, 'jexlFilters').map((r) => `jexl:${r}`));
},
get rendererTypeName() {
return getConf(self, ['renderer', 'type']);
},
get showLabels() {
var _a;
return (_a = self.trackShowLabels) !== null && _a !== void 0 ? _a : getConf(self, ['renderer', 'showLabels']);
},
get showDescriptions() {
var _a;
return ((_a = self.trackShowDescriptions) !== null && _a !== void 0 ? _a : getConf(self, ['renderer', 'showDescriptions']));
},
get maxHeight() {
var _a;
return (_a = self.trackMaxHeight) !== null && _a !== void 0 ? _a : getConf(self, ['renderer', 'maxHeight']);
},
get displayMode() {
var _a;
return ((_a = self.trackDisplayMode) !== null && _a !== void 0 ? _a : getConf(self, ['renderer', 'displayMode']));
},
}))
.views(self => ({
get rendererConfig() {
const configBlob = getConf(self, ['renderer']) || {};
const config = configBlob;
return self.rendererType.configSchema.create({
...config,
showLabels: self.showLabels,
showDescriptions: self.showDescriptions,
displayMode: self.displayMode,
maxHeight: self.maxHeight,
}, getEnv(self));
},
}))
.actions(self => ({
setJexlFilters(f) {
self.jexlFilters = cast(f);
},
toggleShowLabels() {
self.trackShowLabels = !self.showLabels;
},
toggleShowDescriptions() {
self.trackShowDescriptions = !self.showDescriptions;
},
setDisplayMode(val) {
self.trackDisplayMode = val;
},
setMaxHeight(val) {
self.trackMaxHeight = val;
},
}))
.views(self => {
const { trackMenuItems: superTrackMenuItems, renderProps: superRenderProps, } = self;
return {
renderProps() {
const superProps = superRenderProps();
return {
...superProps,
config: self.rendererConfig,
filters: new SerializableFilterChain({
filters: self.activeFilters,
}),
};
},
trackMenuItems() {
return [
...superTrackMenuItems(),
{
label: 'Show labels',
icon: VisibilityIcon,
type: 'checkbox',
checked: self.showLabels,
onClick: () => {
self.toggleShowLabels();
},
},
{
label: 'Show descriptions',
icon: VisibilityIcon,
type: 'checkbox',
checked: self.showDescriptions,
onClick: () => {
self.toggleShowDescriptions();
},
},
{
label: 'Display mode',
icon: VisibilityIcon,
subMenu: [
'compact',
'reducedRepresentation',
'normal',
'collapse',
].map(val => ({
label: val,
onClick: () => {
self.setDisplayMode(val);
},
})),
},
{
label: 'Set max height',
onClick: () => {
getSession(self).queueDialog(handleClose => [
SetMaxHeightDialog,
{
model: self,
handleClose,
},
]);
},
},
{
label: 'Edit filters',
onClick: () => {
getSession(self).queueDialog(handleClose => [
AddFiltersDialog,
{
model: self,
handleClose,
},
]);
},
},
];
},
};
});
}
export default stateModelFactory;