@jbrowse/plugin-linear-genome-view 2.11.1 → 2.12.0

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/model.d.ts

@@ -2,6 +2,7 @@
 import { AnyConfigurationSchemaType } from '@jbrowse/core/configuration';
 import { MenuItem } from '@jbrowse/core/ui';
 import { Instance } from 'mobx-state-tree';
+import SerializableFilterChain from '@jbrowse/core/pluggableElementTypes/renderers/util/serializableFilterChain';
 /**
  * #stateModel LinearBasicDisplay
  * #category display
@@ -50,11 +51,11 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
             model: {
                 error?: unknown;
                 reload: () => void;
-                message: import("react").ReactNode;
-                filled?: boolean | undefined;
-                status?: string | undefined; /**
-                 * #getter
+                message: import("react").ReactNode; /**
+                 * #property
                  */
+                filled?: boolean | undefined;
+                status?: string | undefined;
                 reactElement?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
             };
         }) => import("react").JSX.Element | undefined;
@@ -63,7 +64,9 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
         doReload(): void;
         afterAttach(): void;
         setStatus(message: string): void;
-        setLoading(abortController: AbortController): void;
+        setLoading(abortController: AbortController): void; /**
+         * #getter
+         */
         setMessage(messageText: string): void;
         setRendered(props: {
             reactElement: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
@@ -94,10 +97,17 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
         };
         mouseover: {
             type: string;
-            description: string;
+            description: string; /**
+             * #property
+             */
             defaultValue: string;
             contextVariable: string[];
         };
+        jexlFilters: {
+            type: string;
+            description: string;
+            defaultValue: never[];
+        };
     }, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, "displayId">>;
 } & {
     /**
@@ -124,6 +134,10 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
      * #property
      */
     configuration: AnyConfigurationSchemaType;
+    /**
+     * #property
+     */
+    jexlFilters: import("mobx-state-tree").IMaybe<import("mobx-state-tree").IArrayType<import("mobx-state-tree").ISimpleType<string>>>;
 }, {
     rendererTypeName: string;
     error: unknown;
@@ -140,7 +154,9 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
             message: string | undefined;
         } & import("mobx-state-tree").IStateTreeNode<import("mobx-state-tree").IModelType<{
             id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
-            type: import("mobx-state-tree").ISimpleType<string>;
+            type: import("mobx-state-tree").ISimpleType<string>; /**
+             * #property
+             */
             rpcDriverName: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
         }, {
             rendererTypeName: string;
@@ -166,11 +182,11 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
         }, {
             rendererTypeName: string;
             error: unknown;
-            message: string | undefined; /**
-             * #action
-             */
+            message: string | undefined;
         }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
-    }> | null;
+    }> | null; /**
+     * #getter
+     */
     readonly adapterConfig: any;
     readonly parentTrack: any;
     renderProps(): any;
@@ -208,13 +224,13 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
     setCurrStatsBpPerPx(n: number): void;
     setFeatureDensityStatsLimit(stats?: import("@jbrowse/core/data_adapters/BaseAdapter").FeatureDensityStats | undefined): void;
     getFeatureDensityStats(): Promise<import("@jbrowse/core/data_adapters/BaseAdapter").FeatureDensityStats>;
-    setFeatureDensityStatsP(arg: any): void; /**
-     * #method
-     */
+    setFeatureDensityStatsP(arg: any): void;
     setFeatureDensityStats(featureDensityStats?: import("@jbrowse/core/data_adapters/BaseAdapter").FeatureDensityStats | undefined): void;
     clearFeatureDensityStats(): void;
 } & {
-    readonly regionTooLarge: boolean;
+    readonly regionTooLarge: boolean; /**
+     * #method
+     */
     readonly regionTooLargeReason: string;
 } & {
     regionCannotBeRenderedText(_region: import("@jbrowse/core/util").Region): "" | "Force load to see features";
@@ -240,6 +256,7 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
     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;
@@ -253,6 +270,10 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
     renderSvg(opts: import("../BaseLinearDisplay").ExportSvgDisplayOptions): Promise<import("react").JSX.Element>;
     afterAttach(): void;
 } & {
+    /**
+     * #getter
+     */
+    readonly activeFilters: any;
     /**
      * #getter
      */
@@ -283,6 +304,10 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
         setSubschema(slotName: string, data: unknown): any;
     } & import("mobx-state-tree").IStateTreeNode<AnyConfigurationSchemaType>;
 } & {
+    /**
+     * #action
+     */
+    setJexlFilters(f?: string[]): void;
     /**
      * #action
      */
@@ -309,6 +334,7 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
         } & import("mobx-state-tree/dist/internal").NonEmptyObject & {
             setSubschema(slotName: string, data: unknown): any;
         } & import("mobx-state-tree").IStateTreeNode<AnyConfigurationSchemaType>;
+        filters: SerializableFilterChain;
     };
     /**
      * #method
@@ -355,11 +381,11 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
             model: {
                 error?: unknown;
                 reload: () => void;
-                message: import("react").ReactNode;
-                filled?: boolean | undefined;
-                status?: string | undefined; /**
-                 * #getter
+                message: import("react").ReactNode; /**
+                 * #property
                  */
+                filled?: boolean | undefined;
+                status?: string | undefined;
                 reactElement?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
             };
         }) => import("react").JSX.Element | undefined;
@@ -368,7 +394,9 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
         doReload(): void;
         afterAttach(): void;
         setStatus(message: string): void;
-        setLoading(abortController: AbortController): void;
+        setLoading(abortController: AbortController): void; /**
+         * #getter
+         */
         setMessage(messageText: string): void;
         setRendered(props: {
             reactElement: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
@@ -399,10 +427,17 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
         };
         mouseover: {
             type: string;
-            description: string;
+            description: string; /**
+             * #property
+             */
             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/model.js

@@ -1,12 +1,14 @@
 import { lazy } from 'react';
 import { getConf, ConfigurationReference, } from '@jbrowse/core/configuration';
 import { getSession } from '@jbrowse/core/util';
-import { types, getEnv } from 'mobx-state-tree';
+import { types, getEnv, cast } from 'mobx-state-tree';
 // icons
 import VisibilityIcon from '@mui/icons-material/Visibility';
 // locals
 import { BaseLinearDisplay } from '../BaseLinearDisplay';
-const SetMaxHeightDialog = lazy(() => import('./components/SetMaxHeight'));
+import SerializableFilterChain from '@jbrowse/core/pluggableElementTypes/renderers/util/serializableFilterChain';
+const SetMaxHeightDialog = lazy(() => import('./components/SetMaxHeightDialog'));
+const AddFiltersDialog = lazy(() => import('./components/AddFiltersDialog'));
 /**
  * #stateModel LinearBasicDisplay
  * #category display
@@ -43,8 +45,21 @@ function stateModelFactory(configSchema) {
          * #property
          */
         configuration: ConfigurationReference(configSchema),
+        /**
+         * #property
+         */
+        jexlFilters: types.maybe(types.array(types.string)),
     }))
         .views(self => ({
+        /**
+         * #getter
+         */
+        get activeFilters() {
+            var _a;
+            // config jexlFilters are deferred evaluated so they are prepended with
+            // jexl at runtime rather than being stored with jexl in the config
+            return ((_a = self.jexlFilters) !== null && _a !== void 0 ? _a : getConf(self, 'jexlFilters').map((r) => `jexl:${r}`));
+        },
         /**
          * #getter
          */
@@ -97,6 +112,12 @@ function stateModelFactory(configSchema) {
         },
     }))
         .actions(self => ({
+        /**
+         * #action
+         */
+        setJexlFilters(f) {
+            self.jexlFilters = cast(f);
+        },
         /**
          * #action
          */
@@ -129,12 +150,13 @@ function stateModelFactory(configSchema) {
              * #method
              */
             renderProps() {
-                const config = self.rendererConfig;
                 const superProps = superRenderProps();
-                const superPropsOmit = superProps;
                 return {
-                    ...superPropsOmit,
-                    config,
+                    ...superProps,
+                    config: self.rendererConfig,
+                    filters: new SerializableFilterChain({
+                        filters: self.activeFilters,
+                    }),
                 };
             },
             /**
@@ -179,6 +201,15 @@ function stateModelFactory(configSchema) {
                             ]);
                         },
                     },
+                    {
+                        label: 'Edit filters',
+                        onClick: () => {
+                            getSession(self).queueDialog(handleClose => [
+                                AddFiltersDialog,
+                                { model: self, handleClose },
+                            ]);
+                        },
+                    },
                 ];
             },
         };

package/esm/LinearGenomeView/components/Gridlines.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import { ContentBlock, ElidedBlock, InterRegionPaddingBlock, } from '@jbrowse/core/util/blockTypes';
 import { makeStyles } from 'tss-react/mui';
 import { observer } from 'mobx-react';
 import { ContentBlock as ContentBlockComponent, ElidedBlock as ElidedBlockComponent, InterRegionPaddingBlock as InterRegionPaddingBlockComponent, } from '../../BaseLinearDisplay/components/Block';
@@ -45,13 +44,13 @@ const RenderedVerticalGuides = observer(({ model }) => {
     const { staticBlocks, bpPerPx } = model;
     return (React.createElement(React.Fragment, null, staticBlocks.map((block, index) => {
         const k = `${block.key}-${index}`;
-        if (block instanceof ContentBlock) {
+        if (block.type === 'ContentBlock') {
             return React.createElement(RenderedBlockLines, { key: k, block: block, bpPerPx: bpPerPx });
         }
-        else if (block instanceof ElidedBlock) {
+        else if (block.type === 'ElidedBlock') {
             return React.createElement(ElidedBlockComponent, { key: k, width: block.widthPx });
         }
-        else if (block instanceof InterRegionPaddingBlock) {
+        else if (block.type === 'InterRegionPaddingBlock') {
             return (React.createElement(InterRegionPaddingBlockComponent, { key: k, width: block.widthPx, boundary: block.variant === 'boundary' }));
         }
         return null;

package/esm/LinearGenomeView/components/Highlight.js

@@ -33,26 +33,6 @@ const Highlight = observer(function Highlight({ model, highlight, }) {
     const dismissHighlight = () => {
         model.removeHighlight(highlight);
     };
-    const menuItems = [
-        {
-            label: 'Dismiss highlight',
-            icon: CloseIcon,
-            onClick: () => dismissHighlight(),
-        },
-        {
-            label: 'Bookmark highlighted region',
-            icon: BookmarkIcon,
-            onClick: () => {
-                let bookmarkWidget = session.widgets.get('GridBookmark');
-                if (!bookmarkWidget) {
-                    bookmarkWidget = session.addWidget('GridBookmarkWidget', 'GridBookmark');
-                }
-                // @ts-ignore
-                bookmarkWidget.addBookmark(highlight);
-                dismissHighlight();
-            },
-        },
-    ];
     function handleClose() {
         setOpen(false);
     }
@@ -90,7 +70,26 @@ const Highlight = observer(function Highlight({ model, highlight, }) {
         React.createElement(Menu, { anchorEl: anchorEl.current, onMenuItemClick: (_event, callback) => {
                 callback(session);
                 handleClose();
-            }, open: open, onClose: handleClose, menuItems: menuItems }))) : null;
+            }, open: open, onClose: handleClose, menuItems: [
+                {
+                    label: 'Dismiss highlight',
+                    icon: CloseIcon,
+                    onClick: () => dismissHighlight(),
+                },
+                {
+                    label: 'Bookmark highlighted region',
+                    icon: BookmarkIcon,
+                    onClick: () => {
+                        let bookmarkWidget = session.widgets.get('GridBookmark');
+                        if (!bookmarkWidget) {
+                            bookmarkWidget = session.addWidget('GridBookmarkWidget', 'GridBookmark');
+                        }
+                        // @ts-ignore
+                        bookmarkWidget.addBookmark(highlight);
+                        dismissHighlight();
+                    },
+                },
+            ] }))) : null;
 });
 const HighlightGroup = observer(function HighlightGroup({ model, }) {
     return model.highlight.map((highlight, idx) => (React.createElement(Highlight, { key: JSON.stringify(highlight) + '-' + idx, model: model, highlight: highlight })));

package/esm/LinearGenomeView/components/OverviewScalebar.js

@@ -5,7 +5,6 @@ import { observer } from 'mobx-react';
 // core
 import Base1DView from '@jbrowse/core/util/Base1DViewModel';
 import { getEnv, getSession, getTickDisplayStr } from '@jbrowse/core/util';
-import { ContentBlock } from '@jbrowse/core/util/blockTypes';
 // locals
 import { HEADER_BAR_HEIGHT, HEADER_OVERVIEW_HEIGHT, } from '..';
 import { chooseGridPitch } from '../util';
@@ -148,7 +147,7 @@ const Scalebar = observer(function ({ model, scale, overview, }) {
                 borderColor: color,
             } }),
         overviewVisibleRegions.map((block, idx) => {
-            return !(block instanceof ContentBlock) ? (React.createElement("div", { key: `${JSON.stringify(block)}-${idx}`, className: classes.scalebarContig, style: {
+            return !(block.type === 'ContentBlock') ? (React.createElement("div", { key: `${JSON.stringify(block)}-${idx}`, className: classes.scalebarContig, style: {
                     width: block.widthPx,
                     left: block.offsetPx,
                     backgroundColor: '#999',

package/esm/LinearGenomeView/components/Scalebar.js

@@ -1,6 +1,5 @@
 import { Paper, Typography } from '@mui/material';
 import { makeStyles } from 'tss-react/mui';
-import { ContentBlock, ElidedBlock, InterRegionPaddingBlock, } from '@jbrowse/core/util/blockTypes';
 import { observer } from 'mobx-react';
 import React from 'react';
 import { ContentBlock as ContentBlockComponent, ElidedBlock as ElidedBlockComponent, InterRegionPaddingBlock as InterRegionPaddingBlockComponent, } from '../../BaseLinearDisplay/components/Block';
@@ -56,7 +55,7 @@ const RenderedRefNameLabels = observer(({ model }) => {
         }
     });
     return (React.createElement(React.Fragment, null, model.staticBlocks.map((block, index) => {
-        return block instanceof ContentBlock &&
+        return block.type === 'ContentBlock' &&
             (block.isLeftEndOfDisplayedRegion || index === lastLeftBlock) ? (React.createElement(Typography, { key: `refLabel-${block.key}-${index}`, style: {
                 left: index === lastLeftBlock
                     ? Math.max(0, -model.offsetPx)
@@ -83,13 +82,13 @@ const RenderedScalebarLabels = observer(({ model }) => {
     return (React.createElement(React.Fragment, null, staticBlocks.map((block, idx) => {
         const { key, widthPx } = block;
         const k = `${key}-${idx}`;
-        if (block instanceof ContentBlock) {
+        if (block.type === 'ContentBlock') {
             return React.createElement(RenderedBlockTicks, { key: k, block: block, bpPerPx: bpPerPx });
         }
-        else if (block instanceof ElidedBlock) {
+        else if (block.type === 'ElidedBlock') {
             return React.createElement(ElidedBlockComponent, { key: k, width: widthPx });
         }
-        else if (block instanceof InterRegionPaddingBlock) {
+        else if (block.type === 'InterRegionPaddingBlock') {
             return (React.createElement(InterRegionPaddingBlockComponent, { key: k, width: widthPx, style: { background: 'none' }, boundary: block.variant === 'boundary' }));
         }
         return null;

package/esm/LinearGenomeView/components/TrackLabel.js

@@ -25,10 +25,7 @@ const useStyles = makeStyles()(theme => ({
         },
     },
     trackName: {
-        margin: '0 auto',
-        width: '90%',
         fontSize: '0.8rem',
-        pointerEvents: 'none',
     },
     iconButton: {
         padding: theme.spacing(1),
@@ -82,7 +79,10 @@ const TrackLabel = observer(React.forwardRef(function TrackLabel2({ track, class
         React.createElement(TrackLabelDragHandle, { track: track, trackId: trackId, view: view }),
         React.createElement(IconButton, { onClick: () => view.hideTrack(trackId), className: classes.iconButton, title: "close this track" },
             React.createElement(CloseIcon, { fontSize: "small" })),
-        React.createElement(Typography, { variant: "body1", component: "span", className: classes.trackName },
+        React.createElement(Typography, { variant: "body1", component: "span", className: classes.trackName, onMouseDown: event => {
+                // avoid becoming a click-and-drag action on the lgv
+                event.stopPropagation();
+            } },
             React.createElement(SanitizedHTML, { html: [trackName, minimized ? '(minimized)' : '']
                     .filter(f => !!f)
                     .join(' ') })),

package/esm/LinearGenomeView/components/TrackRenderingContainer.js

@@ -26,19 +26,24 @@ const TrackRenderingContainer = observer(function ({ model, track, onDragEnter,
     const { classes } = useStyles();
     const display = track.displays[0];
     const { height, RenderingComponent, DisplayBlurb } = display;
+    const { trackRefs, id, scaleFactor } = model;
     const trackId = getConf(track, 'trackId');
     const ref = useRef(null);
     const minimized = track.minimized;
     useEffect(() => {
         if (ref.current) {
-            model.trackRefs[trackId] = ref.current;
+            trackRefs[trackId] = ref.current;
         }
         return () => {
-            delete model.trackRefs[trackId];
+            delete trackRefs[trackId];
         };
-    }, [model.trackRefs, trackId]);
-    return (React.createElement("div", { className: classes.trackRenderingContainer, style: { height: minimized ? 20 : height }, onScroll: evt => display.setScrollTop(evt.currentTarget.scrollTop), onDragEnter: onDragEnter, "data-testid": `trackRenderingContainer-${model.id}-${trackId}` }, !minimized ? (React.createElement(React.Fragment, null,
-        React.createElement("div", { ref: ref, className: classes.renderingComponentContainer, style: { transform: `scaleX(${model.scaleFactor})` } },
+    }, [trackRefs, trackId]);
+    return (React.createElement("div", { className: classes.trackRenderingContainer, style: {
+            height: minimized ? 20 : height,
+        }, onScroll: evt => display.setScrollTop(evt.currentTarget.scrollTop), onDragEnter: onDragEnter, "data-testid": `trackRenderingContainer-${id}-${trackId}` }, !minimized ? (React.createElement(React.Fragment, null,
+        React.createElement("div", { ref: ref, className: classes.renderingComponentContainer, style: {
+                transform: scaleFactor !== 1 ? `scaleX(${scaleFactor})` : undefined,
+            } },
             React.createElement(Suspense, { fallback: React.createElement(LoadingEllipses, null) },
                 React.createElement(RenderingComponent, { model: display, onHorizontalScroll: model.horizontalScroll }))),
         DisplayBlurb ? (React.createElement("div", { style: {

package/esm/LinearGenomeView/components/hooks.d.ts

@@ -42,7 +42,7 @@ export declare function useRangeSelect(ref: React.RefObject<HTMLDivElement>, mod
         offset: number;
         start: number;
         end: number;
-        reversed: boolean;
+        reversed?: boolean | undefined;
     };
     rightBpOffset: {
         coord: number;
@@ -53,7 +53,7 @@ export declare function useRangeSelect(ref: React.RefObject<HTMLDivElement>, mod
         offset: number;
         start: number;
         end: number;
-        reversed: boolean;
+        reversed?: boolean | undefined;
     };
     anchorPosition: AnchorPosition | undefined;
     numOfBpSelected: number;