@jbrowse/plugin-linear-genome-view 3.6.5 → 4.0.0

package/esm/LinearBasicDisplay/model.js

@@ -1,154 +1,154 @@
-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'));
+import { types } from '@jbrowse/mobx-state-tree';
+import { modelFactory as LinearFeatureDisplayModelFactory } from "../LinearFeatureDisplay/index.js";
+function findSubMenu(items, label) {
+    return items.find((item) => 'label' in item && item.label === label);
+}
 function stateModelFactory(configSchema) {
     return types
-        .compose('LinearBasicDisplay', BaseLinearDisplay, types.model({
+        .compose('LinearBasicDisplay', LinearFeatureDisplayModelFactory(configSchema), 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),
+        trackGeneGlyphMode: types.maybe(types.string),
+        trackSubfeatureLabels: types.maybe(types.string),
+        trackDisplayDirectionalChevrons: types.maybe(types.boolean),
         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 geneGlyphMode() {
+            return (self.trackGeneGlyphMode ??
+                getConf(self, ['renderer', 'geneGlyphMode']));
         },
-        get showDescriptions() {
-            var _a;
-            return ((_a = self.trackShowDescriptions) !== null && _a !== void 0 ? _a : getConf(self, ['renderer', 'showDescriptions']));
+        get subfeatureLabels() {
+            return (self.trackSubfeatureLabels ??
+                getConf(self, ['renderer', 'subfeatureLabels']));
         },
-        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']));
+        get displayDirectionalChevrons() {
+            return (self.trackDisplayDirectionalChevrons ??
+                getConf(self, ['renderer', 'displayDirectionalChevrons']));
         },
     }))
         .views(self => ({
         get rendererConfig() {
             const configBlob = getConf(self, ['renderer']) || {};
             const config = configBlob;
-            return self.rendererType.configSchema.create({
+            return {
                 ...config,
-                showLabels: self.showLabels,
-                showDescriptions: self.showDescriptions,
-                displayMode: self.displayMode,
-                maxHeight: self.maxHeight,
-            }, getEnv(self));
+                showLabels: self.trackShowLabels ?? config.showLabels,
+                showDescriptions: self.trackShowDescriptions ?? config.showDescriptions,
+                subfeatureLabels: self.trackSubfeatureLabels ?? config.subfeatureLabels,
+                displayMode: self.trackDisplayMode ?? config.displayMode,
+                maxHeight: self.trackMaxHeight ?? config.maxHeight,
+                geneGlyphMode: self.trackGeneGlyphMode ?? config.geneGlyphMode,
+                displayDirectionalChevrons: self.trackDisplayDirectionalChevrons ??
+                    config.displayDirectionalChevrons,
+            };
         },
     }))
         .actions(self => ({
-        setJexlFilters(f) {
-            self.jexlFilters = cast(f);
-        },
-        toggleShowLabels() {
-            self.trackShowLabels = !self.showLabels;
-        },
-        toggleShowDescriptions() {
-            self.trackShowDescriptions = !self.showDescriptions;
+        setGeneGlyphMode(val) {
+            self.trackGeneGlyphMode = val;
         },
-        setDisplayMode(val) {
-            self.trackDisplayMode = val;
+        setSubfeatureLabels(val) {
+            self.trackSubfeatureLabels = val;
         },
-        setMaxHeight(val) {
-            self.trackMaxHeight = val;
+        toggleDisplayDirectionalChevrons() {
+            self.trackDisplayDirectionalChevrons = !self.displayDirectionalChevrons;
         },
     }))
         .views(self => {
-        const { trackMenuItems: superTrackMenuItems, renderProps: superRenderProps, } = self;
+        const { trackMenuItems: superTrackMenuItems } = 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,
+                const items = superTrackMenuItems();
+                const showMenu = findSubMenu(items, 'Show...');
+                if (showMenu) {
+                    showMenu.subMenu = [
+                        ...showMenu.subMenu,
+                        {
+                            label: 'Show chevrons',
+                            type: 'checkbox',
+                            checked: self.displayDirectionalChevrons,
                             onClick: () => {
-                                self.setDisplayMode(val);
+                                self.toggleDisplayDirectionalChevrons();
                             },
-                        })),
-                    },
-                    {
-                        label: 'Set max height',
-                        onClick: () => {
-                            getSession(self).queueDialog(handleClose => [
-                                SetMaxHeightDialog,
-                                {
-                                    model: self,
-                                    handleClose,
+                        },
+                        {
+                            label: 'Subfeature labels',
+                            subMenu: ['none', 'below', 'overlay'].map(val => ({
+                                label: val,
+                                type: 'radio',
+                                checked: self.subfeatureLabels === val,
+                                onClick: () => {
+                                    self.setSubfeatureLabels(val);
                                 },
-                            ]);
+                            })),
                         },
-                    },
-                    {
-                        label: 'Edit filters',
-                        onClick: () => {
-                            getSession(self).queueDialog(handleClose => [
-                                AddFiltersDialog,
+                        {
+                            label: 'Gene glyph',
+                            subMenu: [
                                 {
-                                    model: self,
-                                    handleClose,
+                                    value: 'all',
+                                    label: 'All transcripts',
                                 },
-                            ]);
+                                {
+                                    value: 'longest',
+                                    label: 'Longest transcript',
+                                },
+                                {
+                                    value: 'longestCoding',
+                                    label: 'Longest coding transcript',
+                                },
+                            ].map(({ value, label }) => ({
+                                label,
+                                type: 'radio',
+                                checked: self.geneGlyphMode === value,
+                                onClick: () => {
+                                    self.setGeneGlyphMode(value);
+                                },
+                            })),
                         },
-                    },
-                ];
+                    ];
+                }
+                const filtersMenu = findSubMenu(items, 'Filters');
+                if (filtersMenu) {
+                    filtersMenu.subMenu = [
+                        {
+                            label: 'Show only genes',
+                            type: 'checkbox',
+                            checked: self.activeFilters.includes("jexl:get(feature,'type')=='gene'"),
+                            onClick: () => {
+                                const geneFilter = "jexl:get(feature,'type')=='gene'";
+                                const currentFilters = self.activeFilters;
+                                if (currentFilters.includes(geneFilter)) {
+                                    self.setJexlFilters(currentFilters.filter((f) => f !== geneFilter));
+                                }
+                                else {
+                                    self.setJexlFilters([...currentFilters, geneFilter]);
+                                }
+                            },
+                        },
+                        ...filtersMenu.subMenu,
+                    ];
+                }
+                return items;
             },
         };
+    })
+        .postProcessSnapshot(snap => {
+        if (!snap) {
+            return snap;
+        }
+        const { trackGeneGlyphMode, trackSubfeatureLabels, trackDisplayDirectionalChevrons, ...rest } = snap;
+        return {
+            ...rest,
+            ...(trackGeneGlyphMode !== undefined ? { trackGeneGlyphMode } : {}),
+            ...(trackSubfeatureLabels !== undefined
+                ? { trackSubfeatureLabels }
+                : {}),
+            ...(trackDisplayDirectionalChevrons !== undefined
+                ? { trackDisplayDirectionalChevrons }
+                : {}),
+        };
     });
 }
 export default stateModelFactory;

package/esm/{LinearBasicDisplay → LinearFeatureDisplay}/components/AddFiltersDialog.js

@@ -2,9 +2,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
 import { Dialog } from '@jbrowse/core/ui';
 import { stringToJexlExpression } from '@jbrowse/core/util/jexlStrings';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
 import { Button, DialogActions, DialogContent, TextField } from '@mui/material';
 import { observer } from 'mobx-react';
-import { makeStyles } from 'tss-react/mui';
 const useStyles = makeStyles()({
     dialogContent: {
         width: '80em',
@@ -20,7 +20,7 @@ const useStyles = makeStyles()({
 function checkJexl(code) {
     stringToJexlExpression(code);
 }
-const AddFiltersDialog = observer(function ({ model, handleClose, }) {
+const AddFiltersDialog = observer(function AddFiltersDialog({ model, handleClose, }) {
     const { classes } = useStyles();
     const { activeFilters } = model;
     const [data, setData] = useState(activeFilters.join('\n'));

package/esm/{LinearBasicDisplay → LinearFeatureDisplay}/components/SetMaxHeightDialog.js

@@ -1,20 +1,20 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import { Dialog } from '@jbrowse/core/ui';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
 import { Button, DialogActions, DialogContent, TextField, Typography, } from '@mui/material';
 import { observer } from 'mobx-react';
-import { makeStyles } from 'tss-react/mui';
 const useStyles = makeStyles()({
     root: {
         width: 500,
     },
 });
-const SetMaxHeightDialog = observer(function ({ model, handleClose, }) {
+const SetMaxHeightDialog = observer(function SetMaxHeightDialog({ model, handleClose, }) {
     const { classes } = useStyles();
     const { maxHeight = '' } = model;
     const [max, setMax] = useState(`${maxHeight}`);
     const ok = max !== '' && !Number.isNaN(+max);
-    return (_jsxs(Dialog, { open: true, onClose: handleClose, title: "Set max height", children: [_jsxs(DialogContent, { className: classes.root, children: [_jsx(Typography, { children: "Set max height for the track. For example, you can increase this if the layout says \"Max height reached\"" }), _jsx(TextField, { value: max, onChange: event => {
+    return (_jsxs(Dialog, { open: true, onClose: handleClose, title: "Set max track height", children: [_jsxs(DialogContent, { className: classes.root, children: [_jsx(Typography, { children: "Set max layout height for the track. For example, you can increase this if the layout says \"Max height reached\"" }), _jsx(TextField, { value: max, onChange: event => {
                             setMax(event.target.value);
                         }, placeholder: "Enter max score" }), !ok ? _jsx("div", { style: { color: 'red' }, children: "Invalid number" }) : null] }), _jsxs(DialogActions, { children: [_jsx(Button, { variant: "contained", color: "primary", type: "submit", autoFocus: true, disabled: !ok, onClick: () => {
                             model.setMaxHeight(+max);

package/{dist/LinearBasicDisplay → esm/LinearFeatureDisplay}/configSchema.d.ts

@@ -1,7 +1,7 @@
 import type PluginManager from '@jbrowse/core/PluginManager';
-declare function configSchemaFactory(pluginManager: PluginManager): import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
-    renderer: import("mobx-state-tree").IAnyModelType;
-}, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
+declare function configSchemaFactory(pluginManager: PluginManager): import("node_modules/@jbrowse/core/src/configuration/configurationSchema.ts").ConfigurationSchemaType<{
+    renderer: import("@jbrowse/mobx-state-tree").IAnyModelType;
+}, import("node_modules/@jbrowse/core/src/configuration/configurationSchema.ts").ConfigurationSchemaOptions<import("node_modules/@jbrowse/core/src/configuration/configurationSchema.ts").ConfigurationSchemaType<{
     maxFeatureScreenDensity: {
         type: string;
         description: string;
@@ -28,5 +28,5 @@ declare function configSchemaFactory(pluginManager: PluginManager): import("@jbr
         description: string;
         defaultValue: never[];
     };
-}, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, "displayId">>, undefined>>;
+}, import("node_modules/@jbrowse/core/src/configuration/configurationSchema.ts").ConfigurationSchemaOptions<undefined, "displayId">>, undefined>>;
 export default configSchemaFactory;

package/esm/LinearFeatureDisplay/configSchema.js

@@ -0,0 +1,11 @@
+import { ConfigurationSchema } from '@jbrowse/core/configuration';
+import { baseLinearDisplayConfigSchema } from "../BaseLinearDisplay/index.js";
+function configSchemaFactory(pluginManager) {
+    return ConfigurationSchema('LinearFeatureDisplay', {
+        renderer: pluginManager.pluggableConfigSchemaType('renderer'),
+    }, {
+        baseConfiguration: baseLinearDisplayConfigSchema,
+        explicitlyTyped: true,
+    });
+}
+export default configSchemaFactory;

package/esm/LinearFeatureDisplay/index.d.ts

@@ -0,0 +1,3 @@
+export { default as modelFactory } from './model.ts';
+export { default as configSchema } from './configSchema.ts';
+export type { LinearFeatureDisplayModel, LinearFeatureDisplayStateModel, } from './model.ts';

package/esm/LinearFeatureDisplay/index.js

@@ -0,0 +1,2 @@
+export { default as modelFactory } from "./model.js";
+export { default as configSchema } from "./configSchema.js";