@jbrowse/plugin-linear-genome-view 2.7.1 → 2.8.0

package/dist/BaseLinearDisplay/components/Tooltip.js

@@ -53,7 +53,8 @@ const TooltipContents = react_1.default.forwardRef(function TooltipContents2({ m
     return (react_1.default.createElement("div", { ref: ref }, react_1.default.isValidElement(message) ? (message) : message ? (react_1.default.createElement(ui_1.SanitizedHTML, { html: String(message) })) : null));
 });
 const Tooltip = (0, mobx_react_1.observer)(({ model, clientMouseCoord, }) => {
-    const { classes } = useStyles();
+    var _a, _b;
+    const { theme, classes } = useStyles();
     const { featureUnderMouse } = model;
     const [width, setWidth] = (0, react_1.useState)(0);
     const [popperElt, setPopperElt] = (0, react_1.useState)(null);
@@ -79,7 +80,8 @@ const Tooltip = (0, mobx_react_1.observer)(({ model, clientMouseCoord, }) => {
     const contents = featureUnderMouse
         ? (0, configuration_1.getConf)(model, 'mouseover', { feature: featureUnderMouse })
         : undefined;
-    return featureUnderMouse && contents ? (react_1.default.createElement(material_1.Portal, null,
+    const popperTheme = (_a = theme === null || theme === void 0 ? void 0 : theme.components) === null || _a === void 0 ? void 0 : _a.MuiPopper;
+    return featureUnderMouse && contents ? (react_1.default.createElement(material_1.Portal, { container: (_b = popperTheme === null || popperTheme === void 0 ? void 0 : popperTheme.defaultProps) === null || _b === void 0 ? void 0 : _b.container },
         react_1.default.createElement("div", { ref: setPopperElt, className: classes.tooltip, 
             // zIndex needed to go over widget drawer
             style: { ...styles.popper, zIndex: 100000 }, ...attributes.popper },

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

@@ -69,7 +69,11 @@ export declare const BaseLinearDisplay: import("mobx-state-tree").IModelType<{
         setMessage(messageText: string): void;
         setRendered(props: {
             reactElement: React.ReactElement<any, string | React.JSXElementConstructor<any>>;
-            features: Map<string, Feature>;
+            features: Map<string, Feature>; /**
+             * #getter
+             * a CompositeMap of `featureId -> feature obj` that
+             * just looks in all the block data for that feature
+             */
             layout: any;
             maxHeightReached: boolean;
             renderProps: any;
@@ -128,7 +132,9 @@ export declare const BaseLinearDisplay: import("mobx-state-tree").IModelType<{
             message: string | undefined;
         }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
         onHorizontalScroll?: Function | undefined;
-        blockState?: Record<string, any> | undefined;
+        blockState?: Record<string, any> | undefined; /**
+         * #property
+         */
     }>;
     readonly DisplayBlurb: React.FC<{
         model: {
@@ -136,7 +142,9 @@ export declare const BaseLinearDisplay: import("mobx-state-tree").IModelType<{
             type: string;
             rpcDriverName: string | undefined;
         } & import("mobx-state-tree/dist/internal").NonEmptyObject & {
-            rendererTypeName: string;
+            rendererTypeName: string; /**
+             * #getter
+             */
             error: unknown;
             message: string | undefined;
         } & import("mobx-state-tree").IStateTreeNode<import("mobx-state-tree").IModelType<{
@@ -144,9 +152,7 @@ export declare const BaseLinearDisplay: import("mobx-state-tree").IModelType<{
             type: import("mobx-state-tree").ISimpleType<string>;
             rpcDriverName: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
         }, {
-            rendererTypeName: string; /**
-             * #getter
-             */
+            rendererTypeName: string;
             error: unknown;
             message: string | undefined;
         }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
@@ -179,10 +185,7 @@ export declare const BaseLinearDisplay: import("mobx-state-tree").IModelType<{
 } & {
     readonly currentBytesRequested: number;
     readonly currentFeatureScreenDensity: number;
-    readonly maxFeatureScreenDensity: any; /**
-     * #property
-     * updated via autorun
-     */
+    readonly maxFeatureScreenDensity: any;
     readonly featureDensityStatsReady: boolean;
     readonly maxAllowableBytes: number;
 } & {
@@ -358,7 +361,11 @@ export declare const BaseLinearDisplay: import("mobx-state-tree").IModelType<{
         setMessage(messageText: string): void;
         setRendered(props: {
             reactElement: React.ReactElement<any, string | React.JSXElementConstructor<any>>;
-            features: Map<string, Feature>;
+            features: Map<string, Feature>; /**
+             * #getter
+             * a CompositeMap of `featureId -> feature obj` that
+             * just looks in all the block data for that feature
+             */
             layout: any;
             maxHeightReached: boolean;
             renderProps: any;

package/dist/BaseLinearDisplay/models/BaseLinearDisplayModel.js

@@ -1,4 +1,27 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -16,7 +39,6 @@ const MenuOpen_1 = __importDefault(require("@mui/icons-material/MenuOpen"));
 const BaseLinearDisplay_1 = require("../components/BaseLinearDisplay");
 const serverSideRenderedBlock_1 = __importDefault(require("./serverSideRenderedBlock"));
 const configSchema_1 = __importDefault(require("./configSchema"));
-const renderSvg_1 = __importDefault(require("./renderSvg"));
 const TrackHeightMixin_1 = __importDefault(require("./TrackHeightMixin"));
 const FeatureDensityMixin_1 = __importDefault(require("./FeatureDensityMixin"));
 /**
@@ -296,7 +318,8 @@ function stateModelFactory() {
          * #method
          */
         async renderSvg(opts) {
-            return (0, renderSvg_1.default)(self, opts);
+            const { renderBaseLinearDisplaySvg } = await Promise.resolve().then(() => __importStar(require('./renderSvg')));
+            return renderBaseLinearDisplaySvg(self, opts);
         },
         afterAttach() {
             // watch the parent's blocks to update our block state when they change,

package/dist/BaseLinearDisplay/models/renderSvg.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { ThemeOptions } from '@mui/material';
 import { ExportSvgOptions } from '../../LinearGenomeView';
 import { BaseLinearDisplayModel } from './BaseLinearDisplayModel';
-export default function renderBaseLinearDisplaySvg(self: BaseLinearDisplayModel, opts: ExportSvgOptions & {
+export declare function renderBaseLinearDisplaySvg(self: BaseLinearDisplayModel, opts: ExportSvgOptions & {
     overrideHeight: number;
     theme: ThemeOptions;
 }): Promise<React.JSX.Element>;

package/dist/BaseLinearDisplay/models/renderSvg.js

@@ -26,6 +26,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderBaseLinearDisplaySvg = void 0;
 const react_1 = __importDefault(require("react"));
 const util_1 = require("@jbrowse/core/util");
 const serverSideRenderedBlock_1 = __importStar(require("./serverSideRenderedBlock"));
@@ -79,4 +80,4 @@ async function renderBaseLinearDisplaySvg(self, opts) {
                     react_1.default.createElement(util_1.ReactRendering, { rendering: rendering })))));
     })));
 }
-exports.default = renderBaseLinearDisplaySvg;
+exports.renderBaseLinearDisplaySvg = renderBaseLinearDisplaySvg;

package/dist/LinearBasicDisplay/model.d.ts

@@ -219,7 +219,9 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
     featureIdUnderMouse: string | undefined;
     contextMenuFeature: import("@jbrowse/core/util").Feature | undefined;
 } & {
-    readonly blockType: "dynamicBlocks" | "staticBlocks";
+    readonly blockType: "dynamicBlocks" | "staticBlocks"; /**
+     * #getter
+     */
     readonly blockDefinitions: import("@jbrowse/core/util/blockTypes").BlockSet;
 } & {
     readonly renderDelay: number;

package/dist/LinearGenomeView/components/LinearGenomeView.js

@@ -30,12 +30,12 @@ const react_1 = __importStar(require("react"));
 const material_1 = require("@mui/material");
 const mui_1 = require("tss-react/mui");
 const ui_1 = require("@jbrowse/core/ui");
+const util_1 = require("@jbrowse/core/util");
 const mobx_react_1 = require("mobx-react");
 // icons
 const Icons_1 = require("@jbrowse/core/ui/Icons");
 const TrackContainer_1 = __importDefault(require("./TrackContainer"));
 const TracksContainer_1 = __importDefault(require("./TracksContainer"));
-const util_1 = require("@jbrowse/core/util");
 const ImportForm = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./ImportForm'))));
 const useStyles = (0, mui_1.makeStyles)()(theme => ({
     note: {
@@ -43,14 +43,28 @@ const useStyles = (0, mui_1.makeStyles)()(theme => ({
         paddingTop: theme.spacing(1),
         paddingBottom: theme.spacing(1),
     },
+    rel: {
+        position: 'relative',
+    },
+    top: {
+        zIndex: 1000,
+    },
 }));
+function NoTracksActive({ model }) {
+    const { classes } = useStyles();
+    const { hideNoTracksActive } = model;
+    return (react_1.default.createElement(material_1.Paper, { className: classes.note }, !hideNoTracksActive ? (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(material_1.Typography, null, "No tracks active."),
+        react_1.default.createElement(material_1.Button, { variant: "contained", color: "primary", onClick: () => model.activateTrackSelector(), className: classes.top, startIcon: react_1.default.createElement(Icons_1.TrackSelector, null) }, "Open track selector"))) : (react_1.default.createElement("div", { style: { height: '48px' } }))));
+}
 const LinearGenomeView = (0, mobx_react_1.observer)(({ model }) => {
     const { tracks, error, initialized, hasDisplayedRegions } = model;
-    const { classes } = useStyles();
     const ref = (0, react_1.useRef)(null);
     const session = (0, util_1.getSession)(model);
+    const { classes } = useStyles();
     (0, react_1.useEffect)(() => {
-        // sets the focused view id based on a click within the LGV; necessary for subviews to be focused properly
+        // sets the focused view id based on a click within the LGV;
+        // necessary for subviews to be focused properly
         function handleSelectView(e) {
             var _a, _b;
             if (e.target instanceof Element && ((_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
@@ -72,11 +86,19 @@ const LinearGenomeView = (0, mobx_react_1.observer)(({ model }) => {
     }
     const MiniControlsComponent = model.MiniControlsComponent();
     const HeaderComponent = model.HeaderComponent();
-    return (react_1.default.createElement("div", { style: { position: 'relative' }, ref: ref },
+    return (react_1.default.createElement("div", { className: classes.rel, ref: ref, onMouseLeave: () => session.setHovered(undefined), onMouseMove: event => {
+            const c = ref.current;
+            if (!c) {
+                return;
+            }
+            const { tracks } = model;
+            const leftPx = event.clientX - c.getBoundingClientRect().left;
+            const hoverPosition = model.pxToBp(leftPx);
+            const hoverFeature = tracks.find(t => t.displays[0].featureUnderMouse);
+            session.setHovered({ hoverPosition, hoverFeature });
+        } },
         react_1.default.createElement(HeaderComponent, { model: model }),
         react_1.default.createElement(MiniControlsComponent, { model: model }),
-        react_1.default.createElement(TracksContainer_1.default, { model: model }, !tracks.length ? (react_1.default.createElement(material_1.Paper, { variant: "outlined", className: classes.note }, !model.hideNoTracksActive ? (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement(material_1.Typography, null, "No tracks active."),
-            react_1.default.createElement(material_1.Button, { variant: "contained", color: "primary", onClick: model.activateTrackSelector, style: { zIndex: 1000 }, startIcon: react_1.default.createElement(Icons_1.TrackSelector, null) }, "Open track selector"))) : (react_1.default.createElement("div", { style: { height: '48px' } })))) : (tracks.map(track => (react_1.default.createElement(TrackContainer_1.default, { key: track.id, model: model, track: track })))))));
+        react_1.default.createElement(TracksContainer_1.default, { model: model }, !tracks.length ? (react_1.default.createElement(NoTracksActive, { model: model })) : (tracks.map(track => (react_1.default.createElement(TrackContainer_1.default, { key: track.id, model: model, track: track })))))));
 });
 exports.default = LinearGenomeView;

package/dist/LinearGenomeView/components/OverviewRubberband.js

@@ -46,6 +46,9 @@ const useStyles = (0, mui_1.makeStyles)()({
         position: 'absolute',
         zIndex: 10,
     },
+    rel: {
+        position: 'relative',
+    },
 });
 const HoverTooltip = (0, mobx_react_1.observer)(function ({ model, open, guideX, overview, }) {
     var _a;
@@ -131,7 +134,7 @@ const OverviewRubberband = (0, mobx_react_1.observer)(function OverviewRubberban
         setGuideX(undefined);
     }
     if (startX === undefined) {
-        return (react_1.default.createElement("div", { style: { position: 'relative' } },
+        return (react_1.default.createElement("div", { className: classes.rel },
             guideX !== undefined ? (react_1.default.createElement(HoverTooltip, { model: model, open: !mouseDragging, overview: overview, guideX: guideX })) : null,
             react_1.default.createElement("div", { className: classes.rubberbandControl, ref: controlsRef, onMouseDown: mouseDown, onMouseOut: mouseOut, onMouseMove: mouseMove }, ControlComponent)));
     }
@@ -152,7 +155,7 @@ const OverviewRubberband = (0, mobx_react_1.observer)(function OverviewRubberban
             [leftBpOffset, rightBpOffset] = [rightBpOffset, leftBpOffset];
         }
     }
-    return (react_1.default.createElement("div", { style: { position: 'relative' } },
+    return (react_1.default.createElement("div", { className: classes.rel },
         leftBpOffset && rightBpOffset ? (react_1.default.createElement(RubberbandSpan_1.default, { leftBpOffset: leftBpOffset, rightBpOffset: rightBpOffset, width: Math.abs(width), left: left })) : null,
         react_1.default.createElement("div", { "data-testid": "rubberband_controls", className: classes.rubberbandControl, ref: controlsRef, onMouseDown: mouseDown, onMouseOut: mouseOut, onMouseMove: mouseMove }, ControlComponent)));
 });

package/dist/LinearGenomeView/components/SearchBox.js

@@ -17,6 +17,11 @@ const useStyles = (0, mui_1.makeStyles)()(() => ({
         minWidth: 100,
     },
 }));
+function checkRef(str, allRefs) {
+    const [ref, rest] = (0, util_2.splitLast)(str, ':');
+    return (allRefs.includes(str) ||
+        (allRefs.includes(ref) && !Number.isNaN(Number.parseInt(rest, 10))));
+}
 const SearchBox = (0, mobx_react_1.observer)(function ({ model, showHelp, }) {
     const { classes } = useStyles();
     const theme = (0, material_1.useTheme)();
@@ -44,38 +49,34 @@ const SearchBox = (0, mobx_react_1.observer)(function ({ model, showHelp, }) {
     async function handleSelectedRegion(option) {
         var _a;
         try {
+            const input = option.getLabel();
+            const allRefs = (assembly === null || assembly === void 0 ? void 0 : assembly.allRefNamesWithLowerCase) || [];
             if (option.hasLocation()) {
                 await navToOption(option);
             }
             else if ((_a = option.results) === null || _a === void 0 ? void 0 : _a.length) {
                 model.setSearchResults(option.results, option.getLabel());
             }
+            else if (input.split(' ').every(entry => checkRef(entry, allRefs))) {
+                await model.navToLocString(input, assemblyName);
+            }
             else {
-                const input = option.getLabel();
-                const [ref, rest] = (0, util_2.splitLast)(input, ':');
-                const allRefs = (assembly === null || assembly === void 0 ? void 0 : assembly.allRefNamesWithLowerCase) || [];
-                if (allRefs.includes(input) ||
-                    (allRefs.includes(ref) && !Number.isNaN(Number.parseInt(rest, 10)))) {
-                    await model.navToLocString(input, assemblyName);
+                const results = await (0, util_2.fetchResults)({
+                    queryString: input,
+                    searchType: 'exact',
+                    searchScope,
+                    rankSearchResults,
+                    textSearchManager,
+                    assembly,
+                });
+                if (results.length > 1) {
+                    model.setSearchResults(results, input.toLowerCase());
+                }
+                else if (results.length === 1) {
+                    await navToOption(results[0]);
                 }
                 else {
-                    const results = await (0, util_2.fetchResults)({
-                        queryString: input,
-                        searchType: 'exact',
-                        searchScope,
-                        rankSearchResults,
-                        textSearchManager,
-                        assembly,
-                    });
-                    if (results.length > 1) {
-                        model.setSearchResults(results, input.toLowerCase());
-                    }
-                    else if (results.length === 1) {
-                        await navToOption(results[0]);
-                    }
-                    else {
-                        await model.navToLocString(input, assemblyName);
-                    }
+                    await model.navToLocString(input, assemblyName);
                 }
             }
         }

package/dist/LinearGenomeView/components/TrackLabelContainer.js

@@ -23,9 +23,9 @@ const TrackLabelContainer = (0, mobx_react_1.observer)(function ({ track, view,
     const { classes, cx } = useStyles();
     const display = track.displays[0];
     const { trackLabel, trackLabelOverlap, trackLabelOffset } = classes;
-    const labelStyle = view.trackLabels !== 'overlapping' || display.prefersOffset
+    const labelStyle = view.trackLabelsSetting !== 'overlapping' || display.prefersOffset
         ? trackLabelOffset
         : trackLabelOverlap;
-    return view.trackLabels !== 'hidden' ? (react_1.default.createElement(TrackLabel_1.default, { track: track, className: cx(trackLabel, labelStyle) })) : null;
+    return view.trackLabelsSetting !== 'hidden' ? (react_1.default.createElement(TrackLabel_1.default, { track: track, className: cx(trackLabel, labelStyle) })) : null;
 });
 exports.default = TrackLabelContainer;

package/dist/LinearGenomeView/model.d.ts

@@ -71,9 +71,9 @@ export declare function stateModelFactory(pluginManager: PluginManager): import(
     hideHeaderOverview: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
     hideNoTracksActive: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
     trackSelectorType: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
-    trackLabels: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
     showCenterLine: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
     showCytobandsSetting: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
+    trackLabels: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
     showGridlines: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
 }, {
     width: number;
@@ -96,6 +96,12 @@ export declare function stateModelFactory(pluginManager: PluginManager): import(
     leftOffset: BpOffset | undefined;
     rightOffset: BpOffset | undefined;
 } & {
+    /**
+     * #getter
+     * this is the effective value of the track labels setting, incorporating
+     * both the config and view state. use this instead of view.trackLabels
+     */
+    readonly trackLabelsSetting: any;
     /**
      * #getter
      */

package/dist/LinearGenomeView/model.js

@@ -85,7 +85,7 @@ exports.WIDGET_HEIGHT = 32;
  */
 function stateModelFactory(pluginManager) {
     return mobx_state_tree_1.types
-        .compose(models_1.BaseViewModel, mobx_state_tree_1.types.model('LinearGenomeView', {
+        .compose('LinearGenomeView', models_1.BaseViewModel, mobx_state_tree_1.types.model({
         /**
          * #property
          */
@@ -137,12 +137,6 @@ function stateModelFactory(pluginManager) {
          * #property
          */
         trackSelectorType: mobx_state_tree_1.types.optional(mobx_state_tree_1.types.enumeration(['hierarchical']), 'hierarchical'),
-        /**
-         * #property
-         * how to display the track labels, can be "overlapping", "offset", or
-         * "hidden"
-         */
-        trackLabels: mobx_state_tree_1.types.optional(mobx_state_tree_1.types.string, () => (0, util_1.localStorageGetItem)('lgv-trackLabels') || 'overlapping'),
         /**
          * #property
          * show the "center line"
@@ -153,6 +147,15 @@ function stateModelFactory(pluginManager) {
          * show the "cytobands" in the overview scale bar
          */
         showCytobandsSetting: mobx_state_tree_1.types.optional(mobx_state_tree_1.types.boolean, () => Boolean(JSON.parse((0, util_1.localStorageGetItem)('lgv-showCytobands') || 'true'))),
+        /**
+         * #property
+         * how to display the track labels, can be "overlapping", "offset", or
+         * "hidden", or empty string "" (which results in conf being used). see
+         * LinearGenomeViewPlugin
+         * https://jbrowse.org/jb2/docs/config/lineargenomeviewplugin/ docs for
+         * how conf is used
+         */
+        trackLabels: mobx_state_tree_1.types.optional(mobx_state_tree_1.types.string, () => (0, util_1.localStorageGetItem)('lgv-trackLabels') || ''),
         /**
          * #property
          * show the "gridlines" in the track area
@@ -175,6 +178,18 @@ function stateModelFactory(pluginManager) {
         rightOffset: undefined,
     }))
         .views(self => ({
+        /**
+         * #getter
+         * this is the effective value of the track labels setting, incorporating
+         * both the config and view state. use this instead of view.trackLabels
+         */
+        get trackLabelsSetting() {
+            const sessionSetting = (0, configuration_1.getConf)((0, util_1.getSession)(self), [
+                'LinearGenomeViewPlugin',
+                'trackLabels',
+            ]);
+            return self.trackLabels || sessionSetting;
+        },
         /**
          * #getter
          */
@@ -615,6 +630,7 @@ function stateModelFactory(pluginManager) {
          * #action
          */
         setTrackLabels(setting) {
+            localStorage.setItem('lgv-trackLabels', setting);
             self.trackLabels = setting;
         },
         /**
@@ -945,21 +961,21 @@ function stateModelFactory(pluginManager) {
                             label: 'Overlapping',
                             icon: Visibility_1.default,
                             type: 'radio',
-                            checked: self.trackLabels === 'overlapping',
+                            checked: self.trackLabelsSetting === 'overlapping',
                             onClick: () => self.setTrackLabels('overlapping'),
                         },
                         {
                             label: 'Offset',
                             icon: Visibility_1.default,
                             type: 'radio',
-                            checked: self.trackLabels === 'offset',
+                            checked: self.trackLabelsSetting === 'offset',
                             onClick: () => self.setTrackLabels('offset'),
                         },
                         {
                             label: 'Hidden',
                             icon: Visibility_1.default,
                             type: 'radio',
-                            checked: self.trackLabels === 'hidden',
+                            checked: self.trackLabelsSetting === 'hidden',
                             onClick: () => self.setTrackLabels('hidden'),
                         },
                     ],
@@ -1050,9 +1066,8 @@ function stateModelFactory(pluginManager) {
             }, { delay: 150 }));
             (0, mobx_state_tree_1.addDisposer)(self, (0, mobx_1.autorun)(() => {
                 const s = (s) => JSON.stringify(s);
-                const { trackLabels, showCytobandsSetting, showCenterLine } = self;
+                const { showCytobandsSetting, showCenterLine } = self;
                 if (typeof localStorage !== 'undefined') {
-                    localStorage.setItem('lgv-trackLabels', trackLabels);
                     localStorage.setItem('lgv-showCytobands', s(showCytobandsSetting));
                     localStorage.setItem('lgv-showCenterLine', s(showCenterLine));
                 }
@@ -1264,22 +1279,18 @@ function stateModelFactory(pluginManager) {
                 if (session.focusedViewId === self.id && (e.ctrlKey || e.metaKey)) {
                     if (e.code === 'ArrowLeft') {
                         e.preventDefault();
-                        // pan left
                         self.slide(-0.9);
                     }
-                    if (e.code === 'ArrowRight') {
+                    else if (e.code === 'ArrowRight') {
                         e.preventDefault();
-                        // pan right
                         self.slide(0.9);
                     }
-                    if (e.code === 'ArrowUp' && self.scaleFactor === 1) {
+                    else if (e.code === 'ArrowUp' && self.scaleFactor === 1) {
                         e.preventDefault();
-                        // zoom in
                         self.zoom(self.bpPerPx / 2);
                     }
-                    if (e.code === 'ArrowDown' && self.scaleFactor === 1) {
+                    else if (e.code === 'ArrowDown' && self.scaleFactor === 1) {
                         e.preventDefault();
-                        // zoom out
                         self.zoom(self.bpPerPx * 2);
                     }
                 }