@jbrowse/plugin-linear-genome-view 2.11.0 → 2.11.2

package/esm/BaseLinearDisplay/components/LinearBlocks.js

@@ -2,7 +2,6 @@ import React from 'react';
 import { makeStyles } from 'tss-react/mui';
 import { getContainingView } from '@jbrowse/core/util';
 import { observer } from 'mobx-react';
-import { ContentBlock, ElidedBlock, InterRegionPaddingBlock, } from '@jbrowse/core/util/blockTypes';
 import { ContentBlock as ContentBlockComponent, ElidedBlock as ElidedBlockComponent, InterRegionPaddingBlock as InterRegionPaddingBlockComponent, } from './Block';
 const useStyles = makeStyles()({
     linearBlocks: {
@@ -29,9 +28,10 @@ const RenderedBlocks = observer(function ({ model, }) {
     const { classes } = useStyles();
     const { blockDefinitions, blockState } = model;
     return (React.createElement(React.Fragment, null, blockDefinitions.map(block => {
-        if (block instanceof ContentBlock) {
+        const key = `${model.id}-${block.key}`;
+        if (block.type === 'ContentBlock') {
             const state = blockState.get(block.key);
-            return (React.createElement(ContentBlockComponent, { block: block, key: `${model.id}-${block.key}` },
+            return (React.createElement(ContentBlockComponent, { block: block, key: key },
                 (state === null || state === void 0 ? void 0 : state.ReactComponent) ? (React.createElement(state.ReactComponent, { model: state })) : null,
                 (state === null || state === void 0 ? void 0 : state.maxHeightReached) ? (React.createElement("div", { className: classes.heightOverflowed, style: {
                         top: state.layout.getTotalHeight() - 16,
@@ -39,11 +39,11 @@ const RenderedBlocks = observer(function ({ model, }) {
                         height: 16,
                     } }, "Max height reached")) : null));
         }
-        if (block instanceof ElidedBlock) {
-            return (React.createElement(ElidedBlockComponent, { key: `${model.id}-${block.key}`, width: block.widthPx }));
+        else if (block.type === 'ElidedBlock') {
+            return React.createElement(ElidedBlockComponent, { key: key, width: block.widthPx });
         }
-        if (block instanceof InterRegionPaddingBlock) {
-            return (React.createElement(InterRegionPaddingBlockComponent, { key: block.key, width: block.widthPx, style: { background: 'none' }, boundary: block.variant === 'boundary' }));
+        else if (block.type === 'InterRegionPaddingBlock') {
+            return (React.createElement(InterRegionPaddingBlockComponent, { key: key, width: block.widthPx, style: { background: 'none' }, boundary: block.variant === 'boundary' }));
         }
         throw new Error(`invalid block type ${JSON.stringify(block)}`);
     })));

package/esm/BaseLinearDisplay/components/Tooltip.js

@@ -35,6 +35,7 @@ const Tooltip = observer(function ({ model, clientMouseCoord, }) {
     const y = clientMouseCoord[1];
     const { refs, floatingStyles, context } = useFloating({
         placement: 'right',
+        strategy: 'fixed',
     });
     const clientPoint = useClientPoint(context, { x, y });
     const { getFloatingProps } = useInteractions([clientPoint]);

package/esm/BaseLinearDisplay/models/BaseLinearDisplayModel.d.ts

@@ -110,6 +110,11 @@ export declare const BaseLinearDisplay: import("mobx-state-tree").IModelType<{
             defaultValue: string;
             contextVariable: string[];
         };
+        jexlFilters: {
+            type: string;
+            description: string;
+            defaultValue: never[];
+        };
     }, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, "displayId">>;
 }, {
     rendererTypeName: string;
@@ -200,7 +205,9 @@ export declare const BaseLinearDisplay: import("mobx-state-tree").IModelType<{
     readonly regionTooLarge: boolean;
     readonly regionTooLargeReason: string;
 } & {
-    regionCannotBeRenderedText(_region: import("@jbrowse/core/util").Region): "" | "Force load to see features";
+    regionCannotBeRenderedText(_region: import("@jbrowse/core/util").Region): "" | "Force load to see features"; /**
+     * #action
+     */
     regionCannotBeRendered(_region: import("@jbrowse/core/util").Region): React.JSX.Element | null;
 } & {
     featureIdUnderMouse: string | undefined;
@@ -273,6 +280,10 @@ export declare const BaseLinearDisplay: import("mobx-state-tree").IModelType<{
      * #action
      */
     selectFeature(feature: Feature): void;
+    /**
+     * #action
+     */
+    navToFeature(feature: Feature): void;
     /**
      * #action
      */
@@ -401,6 +412,11 @@ export declare const BaseLinearDisplay: import("mobx-state-tree").IModelType<{
             defaultValue: string;
             contextVariable: string[];
         };
+        jexlFilters: {
+            type: string;
+            description: string;
+            defaultValue: never[];
+        };
     }, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, "displayId">>;
 }>>, {
     type: string;

package/esm/BaseLinearDisplay/models/BaseLinearDisplayModel.js

@@ -7,6 +7,7 @@ import { autorun } from 'mobx';
 import { addDisposer, isAlive, types } from 'mobx-state-tree';
 // icons
 import MenuOpenIcon from '@mui/icons-material/MenuOpen';
+import CenterFocusStrongIcon from '@mui/icons-material/CenterFocusStrong';
 import { Tooltip } from '../components/BaseLinearDisplay';
 import BlockState from './serverSideRenderedBlock';
 import configSchema from './configSchema';
@@ -182,6 +183,17 @@ function stateModelFactory() {
                 session.setSelection(feature);
             }
         },
+        /**
+         * #action
+         */
+        navToFeature(feature) {
+            const view = getContainingView(self);
+            view.navTo({
+                refName: feature.get('refName'),
+                start: feature.get('start'),
+                end: feature.get('end'),
+            });
+        },
         /**
          * #action
          */
@@ -239,6 +251,15 @@ function stateModelFactory() {
                                 }
                             },
                         },
+                        {
+                            label: 'Zoom to feature',
+                            icon: CenterFocusStrongIcon,
+                            onClick: () => {
+                                if (self.contextMenuFeature) {
+                                    self.navToFeature(self.contextMenuFeature);
+                                }
+                            },
+                        },
                     ]
                     : []),
             ];

package/esm/BaseLinearDisplay/models/configSchema.d.ts

@@ -32,5 +32,15 @@ declare const baseLinearDisplayConfigSchema: import("@jbrowse/core/configuration
         defaultValue: string;
         contextVariable: string[];
     };
+    /**
+     * #slot
+     * config jexlFilters are deferred evaluated so they are prepended with
+     * jexl at runtime rather than being stored with jexl in the config
+     */
+    jexlFilters: {
+        type: string;
+        description: string;
+        defaultValue: never[];
+    };
 }, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, "displayId">>;
 export default baseLinearDisplayConfigSchema;

package/esm/BaseLinearDisplay/models/configSchema.js

@@ -2,9 +2,11 @@ import { ConfigurationSchema } from '@jbrowse/core/configuration';
 /**
  * #config BaseLinearDisplay
  * #category display
- * `BaseLinearDisplay` is a "base" config that is extended by classes like
- * `LinearBasicDisplay` (used for feature tracks, etc) and `LinearBareDisplay`
- * (more stripped down than even the basic display, not commonly used)
+ *
+ * `BaseLinearDisplay` is a "base" config that is extended by other configs including
+ * - `LinearBasicDisplay` (used for feature tracks, etc)
+ * - `LinearBareDisplay` (more stripped down than even the basic display, not
+ *   commonly used)
  */
 function x() { } // eslint-disable-line @typescript-eslint/no-unused-vars
 const baseLinearDisplayConfigSchema = ConfigurationSchema('BaseLinearDisplay', {
@@ -41,6 +43,16 @@ const baseLinearDisplayConfigSchema = ConfigurationSchema('BaseLinearDisplay', {
         defaultValue: `jexl:get(feature,'name')`,
         contextVariable: ['feature'],
     },
+    /**
+     * #slot
+     * config jexlFilters are deferred evaluated so they are prepended with
+     * jexl at runtime rather than being stored with jexl in the config
+     */
+    jexlFilters: {
+        type: 'stringArray',
+        description: 'default set of jexl filters to apply to a track. note: these do not use the jexl prefix because they have a deferred evaluation system',
+        defaultValue: [],
+    },
 }, {
     /**
      * #identifier

package/esm/BaseLinearDisplay/models/serverSideRenderedBlock.js

@@ -96,6 +96,7 @@ const blockState = types
             renderInProgress = undefined;
         },
         setError(error) {
+            console.error(error);
             if (renderInProgress && !renderInProgress.signal.aborted) {
                 renderInProgress.abort();
             }

package/esm/BasicTrack/index.d.ts

@@ -1,3 +1,2 @@
 import PluginManager from '@jbrowse/core/PluginManager';
-declare const _default: (pm: PluginManager) => void;
-export default _default;
+export default function BasicTrackF(pm: PluginManager): void;

package/esm/BasicTrack/index.js

@@ -1,6 +1,6 @@
 import { createBaseTrackModel, TrackType, } from '@jbrowse/core/pluggableElementTypes';
 import configSchemaF from './configSchema';
-export default (pm) => {
+export default function BasicTrackF(pm) {
     pm.addTrackType(() => {
         const configSchema = configSchemaF(pm);
         return new TrackType({
@@ -9,4 +9,4 @@ export default (pm) => {
             stateModel: createBaseTrackModel(pm, 'BasicTrack', configSchema),
         });
     });
-};
+}

package/esm/FeatureTrack/index.d.ts

@@ -1,3 +1,2 @@
 import PluginManager from '@jbrowse/core/PluginManager';
-declare const _default: (pm: PluginManager) => void;
-export default _default;
+export default function FeatureTrackF(pm: PluginManager): void;

package/esm/FeatureTrack/index.js

@@ -1,6 +1,6 @@
 import { createBaseTrackModel, TrackType, } from '@jbrowse/core/pluggableElementTypes';
 import configSchemaF from './configSchema';
-export default (pm) => {
+export default function FeatureTrackF(pm) {
     pm.addTrackType(() => {
         const configSchema = configSchemaF(pm);
         return new TrackType({
@@ -10,4 +10,4 @@ export default (pm) => {
             stateModel: createBaseTrackModel(pm, 'FeatureTrack', configSchema),
         });
     });
-};
+}

package/esm/LaunchLinearGenomeView/index.d.ts

@@ -1,3 +1,2 @@
 import PluginManager from '@jbrowse/core/PluginManager';
-declare const _default: (pluginManager: PluginManager) => void;
-export default _default;
+export default function LaunchLinearGenomeViewF(pluginManager: PluginManager): void;

package/esm/LaunchLinearGenomeView/index.js

@@ -1,6 +1,6 @@
 import { when, parseLocString, } from '@jbrowse/core/util';
 import { handleSelectedRegion } from '../searchUtils';
-export default (pluginManager) => {
+export default function LaunchLinearGenomeViewF(pluginManager) {
     pluginManager.addToExtensionPoint('LaunchView-LinearGenomeView', 
     // @ts-expect-error
     async ({ session, assembly, loc, tracks = [], tracklist, nav, highlight, }) => {
@@ -49,7 +49,7 @@ export default (pluginManager) => {
             throw e;
         }
     });
-};
+}
 function tryTrack(model, trackId, idsNotFound) {
     try {
         model.showTrack(trackId);

package/esm/LinearBareDisplay/configSchema.d.ts

@@ -30,5 +30,10 @@ declare function configSchemaFactory(pluginManager: PluginManager): import("@jbr
         defaultValue: string;
         contextVariable: string[];
     };
+    jexlFilters: {
+        type: string;
+        description: string;
+        defaultValue: never[];
+    };
 }, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, "displayId">>, undefined>>;
 export { configSchemaFactory };

package/esm/LinearBareDisplay/index.d.ts

@@ -1,5 +1,4 @@
 import PluginManager from '@jbrowse/core/PluginManager';
-declare const _default: (pluginManager: PluginManager) => void;
-export default _default;
+export default function LinearBareDisplayF(pluginManager: PluginManager): void;
 export { configSchemaFactory } from './configSchema';
 export { stateModelFactory } from './model';

package/esm/LinearBareDisplay/index.js

@@ -3,7 +3,7 @@ import { DisplayType } from '@jbrowse/core/pluggableElementTypes';
 import { configSchemaFactory } from './configSchema';
 import { stateModelFactory } from './model';
 import { BaseLinearDisplayComponent } from '../BaseLinearDisplay/';
-export default (pluginManager) => {
+export default function LinearBareDisplayF(pluginManager) {
     pluginManager.addDisplayType(() => {
         const configSchema = configSchemaFactory(pluginManager);
         return new DisplayType({
@@ -16,6 +16,6 @@ export default (pluginManager) => {
             ReactComponent: BaseLinearDisplayComponent,
         });
     });
-};
+}
 export { configSchemaFactory } from './configSchema';
 export { stateModelFactory } from './model';

package/esm/LinearBareDisplay/model.d.ts

@@ -77,7 +77,9 @@ export declare function stateModelFactory(configSchema: AnyConfigurationSchemaTy
         };
         fetchSizeLimit: {
             type: string;
-            defaultValue: number;
+            defaultValue: number; /**
+             * #method
+             */
             description: string;
         };
         height: {
@@ -91,6 +93,11 @@ export declare function stateModelFactory(configSchema: AnyConfigurationSchemaTy
             defaultValue: string;
             contextVariable: string[];
         };
+        jexlFilters: {
+            type: string;
+            description: string;
+            defaultValue: never[];
+        };
     }, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, "displayId">>;
 } & {
     /**
@@ -215,6 +222,7 @@ export declare function stateModelFactory(configSchema: AnyConfigurationSchemaTy
     addBlock(key: string, block: import("@jbrowse/core/util/blockTypes").BaseBlock): void;
     deleteBlock(key: string): void;
     selectFeature(feature: import("@jbrowse/core/util").Feature): void;
+    navToFeature(feature: import("@jbrowse/core/util").Feature): void;
     clearFeatureSelection(): void;
     setFeatureIdUnderMouse(feature?: string | undefined): void;
     setContextMenuFeature(feature?: import("@jbrowse/core/util").Feature | undefined): void;
@@ -309,7 +317,9 @@ export declare function stateModelFactory(configSchema: AnyConfigurationSchemaTy
         };
         fetchSizeLimit: {
             type: string;
-            defaultValue: number;
+            defaultValue: number; /**
+             * #method
+             */
             description: string;
         };
         height: {
@@ -323,6 +333,11 @@ export declare function stateModelFactory(configSchema: AnyConfigurationSchemaTy
             defaultValue: string;
             contextVariable: string[];
         };
+        jexlFilters: {
+            type: string;
+            description: string;
+            defaultValue: never[];
+        };
     }, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, "displayId">>;
 }>> & import("mobx-state-tree/dist/internal").NonEmptyObject & import("mobx-state-tree")._NotCustomized, {
     type: string;

package/esm/LinearBasicDisplay/components/AddFiltersDialog.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+declare const AddFiltersDialog: ({ model, handleClose, }: {
+    model: {
+        jexlFilters?: string[];
+        activeFilters: string[];
+        setJexlFilters: (arg?: string[]) => void;
+    };
+    handleClose: () => void;
+}) => React.JSX.Element;
+export default AddFiltersDialog;

package/esm/LinearBasicDisplay/components/AddFiltersDialog.js

@@ -0,0 +1,69 @@
+import React, { useEffect, useState } from 'react';
+import { observer } from 'mobx-react';
+import { Dialog } from '@jbrowse/core/ui';
+import { Button, DialogActions, DialogContent, TextField } from '@mui/material';
+import { makeStyles } from 'tss-react/mui';
+import { stringToJexlExpression } from '@jbrowse/core/util/jexlStrings';
+const useStyles = makeStyles()({
+    dialogContent: {
+        width: '80em',
+    },
+    textAreaFont: {
+        fontFamily: 'Courier New',
+    },
+    error: {
+        color: 'red',
+        fontSize: '0.8em',
+    },
+});
+function checkJexl(code) {
+    stringToJexlExpression(code);
+}
+const AddFiltersDialog = observer(function ({ model, handleClose, }) {
+    const { classes } = useStyles();
+    const { activeFilters } = model;
+    const [data, setData] = useState(activeFilters.join('\n'));
+    const [error, setError] = useState();
+    useEffect(() => {
+        try {
+            data
+                .split('\n')
+                .map(line => line.trim())
+                .filter(line => !!line)
+                .map(line => checkJexl(line.trim()));
+            setError(undefined);
+        }
+        catch (e) {
+            console.error(e);
+            setError(e);
+        }
+    }, [data]);
+    return (React.createElement(Dialog, { maxWidth: "xl", open: true, onClose: handleClose, title: "Add track filters" },
+        React.createElement(DialogContent, null,
+            React.createElement("div", null,
+                "Add filters, in jexl format, one per line, starting with the string jexl:. Examples:",
+                ' ',
+                React.createElement("ul", null,
+                    React.createElement("li", null,
+                        React.createElement("code", null, "jexl:get(feature,'name')=='BRCA1'"),
+                        " - show only feature where the name attribute is BRCA1"),
+                    React.createElement("li", null,
+                        React.createElement("code", null, "jexl:get(feature,'type')=='gene'"),
+                        " - show only gene type features in a GFF that has many other feature types"),
+                    React.createElement("li", null,
+                        React.createElement("code", null, "jexl:get(feature,'score') > 400"),
+                        " - show only features that have a score greater than 400"))),
+            error ? React.createElement("p", { className: classes.error }, `${error}`) : null,
+            React.createElement(TextField, { variant: "outlined", multiline: true, minRows: 5, maxRows: 10, className: classes.dialogContent, fullWidth: true, value: data, onChange: event => setData(event.target.value), InputProps: {
+                    classes: {
+                        input: classes.textAreaFont,
+                    },
+                } })),
+        React.createElement(DialogActions, null,
+            React.createElement(Button, { variant: "contained", color: "primary", type: "submit", autoFocus: true, disabled: !!error, onClick: () => {
+                    model.setJexlFilters(data.split('\n'));
+                    handleClose();
+                } }, "Submit"),
+            React.createElement(Button, { variant: "contained", color: "secondary", onClick: () => handleClose() }, "Cancel"))));
+});
+export default AddFiltersDialog;

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

@@ -15,12 +15,12 @@ const SetMaxHeightDialog = observer(function ({ model, handleClose, }) {
     return (React.createElement(Dialog, { open: true, onClose: handleClose, title: "Set max height" },
         React.createElement(DialogContent, { className: classes.root },
             React.createElement(Typography, null, "Set max height for the track. For example, you can increase this if the layout says \"Max height reached\""),
-            React.createElement(TextField, { value: max, onChange: event => setMax(event.target.value), placeholder: "Enter max score" }),
-            React.createElement(DialogActions, null,
-                React.createElement(Button, { variant: "contained", color: "primary", type: "submit", autoFocus: true, onClick: () => {
-                        model.setMaxHeight(max !== '' && !Number.isNaN(+max) ? +max : undefined);
-                        handleClose();
-                    } }, "Submit"),
-                React.createElement(Button, { variant: "contained", color: "secondary", onClick: () => handleClose() }, "Cancel")))));
+            React.createElement(TextField, { value: max, onChange: event => setMax(event.target.value), placeholder: "Enter max score" })),
+        React.createElement(DialogActions, null,
+            React.createElement(Button, { variant: "contained", color: "primary", type: "submit", autoFocus: true, onClick: () => {
+                    model.setMaxHeight(max !== '' && !Number.isNaN(+max) ? +max : undefined);
+                    handleClose();
+                } }, "Submit"),
+            React.createElement(Button, { variant: "contained", color: "secondary", onClick: () => handleClose() }, "Cancel"))));
 });
 export default SetMaxHeightDialog;

package/esm/LinearBasicDisplay/configSchema.d.ts

@@ -30,5 +30,10 @@ declare function configSchemaFactory(pluginManager: PluginManager): import("@jbr
         defaultValue: string;
         contextVariable: string[];
     };
+    jexlFilters: {
+        type: string;
+        description: string;
+        defaultValue: never[];
+    };
 }, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, "displayId">>, undefined>>;
 export default configSchemaFactory;

package/esm/LinearBasicDisplay/index.d.ts

@@ -1,5 +1,4 @@
 import PluginManager from '@jbrowse/core/PluginManager';
-declare const _default: (pluginManager: PluginManager) => void;
-export default _default;
+export default function LinearBasicDisplay(pluginManager: PluginManager): void;
 export { default as modelFactory } from './model';
 export { default as configSchema } from './configSchema';

package/esm/LinearBasicDisplay/index.js

@@ -3,7 +3,7 @@ import { BaseLinearDisplayComponent } from '../BaseLinearDisplay';
 // locals
 import configSchema from './configSchema';
 import modelFactory from './model';
-export default (pluginManager) => {
+export default function LinearBasicDisplay(pluginManager) {
     pluginManager.addDisplayType(() => {
         const config = configSchema(pluginManager);
         return new DisplayType({
@@ -16,6 +16,6 @@ export default (pluginManager) => {
             ReactComponent: BaseLinearDisplayComponent,
         });
     });
-};
+}
 export { default as modelFactory } from './model';
 export { default as configSchema } from './configSchema';