@jbrowse/plugin-linear-genome-view 2.12.3 → 2.13.1

package/dist/LinearGenomeView/components/LinearGenomeView.js

@@ -27,16 +27,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 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 ImportForm = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./ImportForm'))));
+const NoTracksActiveButton = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./NoTracksActiveButton'))));
 const useStyles = (0, mui_1.makeStyles)()(theme => ({
     note: {
         textAlign: 'center',
@@ -50,13 +48,6 @@ const useStyles = (0, mui_1.makeStyles)()(theme => ({
         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 ref = (0, react_1.useRef)(null);
@@ -99,6 +90,7 @@ const LinearGenomeView = (0, mobx_react_1.observer)(({ model }) => {
         } },
         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(NoTracksActive, { model: model })) : (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(react_1.Suspense, { fallback: react_1.default.createElement(react_1.default.Fragment, null) },
+            react_1.default.createElement(NoTracksActiveButton, { 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/NoTracksActiveButton.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { LinearGenomeViewModel } from '..';
+declare const NoTracksActiveButton: ({ model, }: {
+    model: LinearGenomeViewModel;
+}) => React.JSX.Element;
+export default NoTracksActiveButton;

package/dist/LinearGenomeView/components/NoTracksActiveButton.js

@@ -0,0 +1,29 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const material_1 = require("@mui/material");
+const mui_1 = require("tss-react/mui");
+const mobx_react_1 = require("mobx-react");
+// icons
+const Icons_1 = require("@jbrowse/core/ui/Icons");
+const useStyles = (0, mui_1.makeStyles)()(theme => ({
+    note: {
+        textAlign: 'center',
+        paddingTop: theme.spacing(1),
+        paddingBottom: theme.spacing(1),
+    },
+    top: {
+        zIndex: 1000,
+    },
+}));
+const NoTracksActiveButton = (0, mobx_react_1.observer)(function ({ 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' } }))));
+});
+exports.default = NoTracksActiveButton;

package/dist/LinearGenomeView/components/Scalebar.js

@@ -7,9 +7,9 @@ const material_1 = require("@mui/material");
 const mui_1 = require("tss-react/mui");
 const mobx_react_1 = require("mobx-react");
 const react_1 = __importDefault(require("react"));
+const util_1 = require("@jbrowse/core/util");
 const Block_1 = require("../../BaseLinearDisplay/components/Block");
-const util_1 = require("../util");
-const util_2 = require("@jbrowse/core/util");
+const util_2 = require("../util");
 const useStyles = (0, mui_1.makeStyles)()(theme => ({
     scalebarContainer: {
         overflow: 'hidden',
@@ -50,39 +50,45 @@ const useStyles = (0, mui_1.makeStyles)()(theme => ({
         background: theme.palette.background.paper,
     },
 }));
-const RenderedRefNameLabels = (0, mobx_react_1.observer)(({ model }) => {
+const RenderedRefNameLabels = (0, mobx_react_1.observer)(function ({ model }) {
     const { classes } = useStyles();
+    const { staticBlocks, offsetPx, scaleBarDisplayPrefix } = model;
     // find the block that needs pinning to the left side for context
     let lastLeftBlock = 0;
-    model.staticBlocks.forEach((block, i) => {
-        if (block.offsetPx - model.offsetPx < 0) {
+    staticBlocks.forEach((block, i) => {
+        if (block.offsetPx - offsetPx < 0) {
             lastLeftBlock = i;
         }
     });
-    return (react_1.default.createElement(react_1.default.Fragment, null, model.staticBlocks.map((block, index) => {
-        return block.type === 'ContentBlock' &&
-            (block.isLeftEndOfDisplayedRegion || index === lastLeftBlock) ? (react_1.default.createElement(material_1.Typography, { key: `refLabel-${block.key}-${index}`, style: {
-                left: index === lastLeftBlock
-                    ? Math.max(0, -model.offsetPx)
-                    : block.offsetPx - model.offsetPx - 1,
-                paddingLeft: index === lastLeftBlock ? 0 : 1,
-            }, className: classes.refLabel, "data-testid": `refLabel-${block.refName}` }, block.refName)) : null;
-    })));
+    const val = scaleBarDisplayPrefix();
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        staticBlocks.blocks[0].type !== 'ContentBlock' && val ? (react_1.default.createElement(material_1.Typography, { style: { left: 0, zIndex: 100 }, className: classes.refLabel }, val)) : null,
+        staticBlocks.map((block, index) => {
+            return block.type === 'ContentBlock' &&
+                (block.isLeftEndOfDisplayedRegion || index === lastLeftBlock) ? (react_1.default.createElement(material_1.Typography, { key: `refLabel-${block.key}-${index}`, style: {
+                    left: index === lastLeftBlock
+                        ? Math.max(0, -offsetPx)
+                        : block.offsetPx - offsetPx - 1,
+                    paddingLeft: index === lastLeftBlock ? 0 : 1,
+                }, className: classes.refLabel, "data-testid": `refLabel-${block.refName}` },
+                index === lastLeftBlock && val ? `${val}:` : '',
+                block.refName)) : null;
+        })));
 });
 const RenderedBlockTicks = function ({ block, bpPerPx, }) {
     const { classes } = useStyles();
     const { reversed, start, end } = block;
-    const ticks = (0, util_1.makeTicks)(start, end, bpPerPx, true, false);
+    const ticks = (0, util_2.makeTicks)(start, end, bpPerPx, true, false);
     return (react_1.default.createElement(Block_1.ContentBlock, { block: block }, ticks.map(({ type, base }) => {
         if (type === 'major') {
             const x = (reversed ? end - base : base - start) / bpPerPx;
             const baseNumber = base + 1;
-            return (react_1.default.createElement("div", { key: base, className: classes.tick, style: { left: x } }, baseNumber ? (react_1.default.createElement(material_1.Typography, { className: classes.majorTickLabel }, (0, util_2.getTickDisplayStr)(baseNumber, bpPerPx))) : null));
+            return (react_1.default.createElement("div", { key: base, className: classes.tick, style: { left: x } }, baseNumber ? (react_1.default.createElement(material_1.Typography, { className: classes.majorTickLabel }, (0, util_1.getTickDisplayStr)(baseNumber, bpPerPx))) : null));
         }
         return null;
     })));
 };
-const RenderedScalebarLabels = (0, mobx_react_1.observer)(({ model }) => {
+const RenderedScalebarLabels = (0, mobx_react_1.observer)(function ({ model }) {
     const { staticBlocks, bpPerPx } = model;
     return (react_1.default.createElement(react_1.default.Fragment, null, staticBlocks.map((block, idx) => {
         const { key, widthPx } = block;

package/dist/LinearGenomeView/components/TrackContainer.js

@@ -49,9 +49,9 @@ const useStyles = (0, mui_1.makeStyles)()({
 const TrackContainer = (0, mobx_react_1.observer)(function ({ model, track, }) {
     const { classes } = useStyles();
     const display = track.displays[0];
-    const { draggingTrackId } = model;
+    const { draggingTrackId, showTrackOutlines } = model;
     const ref = (0, react_1.useRef)(null);
-    return (react_1.default.createElement(material_1.Paper, { ref: ref, className: classes.root, variant: "outlined", onClick: event => {
+    return (react_1.default.createElement(material_1.Paper, { ref: ref, className: classes.root, variant: showTrackOutlines ? 'outlined' : undefined, elevation: showTrackOutlines ? undefined : 0, onClick: event => {
             var _a;
             if (event.detail === 2 && !track.displays[0].featureIdUnderMouse) {
                 const left = ((_a = ref.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().left) || 0;

package/dist/LinearGenomeView/model.d.ts

@@ -74,6 +74,7 @@ export declare function stateModelFactory(pluginManager: PluginManager): import(
     showGridlines: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
     highlight: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").IArrayType<import("mobx-state-tree").IType<Required<ParsedLocString>, Required<ParsedLocString>, Required<ParsedLocString>>>, [undefined]>;
     colorByCDS: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
+    showTrackOutlines: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
 }, {
     width: number;
 } & {
@@ -114,6 +115,10 @@ export declare function stateModelFactory(pluginManager: PluginManager): import(
      */
     readonly assemblyNames: string[];
 } & {
+    /**
+     * #method
+     */
+    scaleBarDisplayPrefix(): string;
     /**
      * #method
      */
@@ -216,6 +221,10 @@ export declare function stateModelFactory(pluginManager: PluginManager): import(
      */
     readonly trackTypeActions: Map<string, MenuItem[]>;
 } & {
+    /**
+     * #action
+     */
+    setShowTrackOutlines(arg: boolean): void;
     /**
      * #action
      */
@@ -615,6 +624,7 @@ export declare function stateModelFactory(pluginManager: PluginManager): import(
     showGridlines: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
     highlight: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").IArrayType<import("mobx-state-tree").IType<Required<ParsedLocString>, Required<ParsedLocString>, Required<ParsedLocString>>>, [undefined]>;
     colorByCDS: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
+    showTrackOutlines: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
 }>>, import("mobx-state-tree")._NotCustomized>;
 export type LinearGenomeViewStateModel = ReturnType<typeof stateModelFactory>;
 export type LinearGenomeViewModel = Instance<LinearGenomeViewStateModel>;

package/dist/LinearGenomeView/model.js

@@ -177,6 +177,11 @@ function stateModelFactory(pluginManager) {
          * color by CDS
          */
         colorByCDS: mobx_state_tree_1.types.optional(mobx_state_tree_1.types.boolean, () => Boolean(JSON.parse((0, util_1.localStorageGetItem)('lgv-colorByCDS') || 'false'))),
+        /**
+         * #property
+         * color by CDS
+         */
+        showTrackOutlines: mobx_state_tree_1.types.optional(mobx_state_tree_1.types.boolean, () => Boolean(JSON.parse((0, util_1.localStorageGetItem)('lgv-showTrackOutlines') || 'true'))),
     }))
         .volatile(() => ({
         volatileWidth: undefined,
@@ -231,6 +236,15 @@ function stateModelFactory(pluginManager) {
         },
     }))
         .views(self => ({
+        /**
+         * #method
+         */
+        scaleBarDisplayPrefix() {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            return (0, mobx_state_tree_1.getParent)(self, 2).type === 'LinearSyntenyView'
+                ? self.assemblyNames[0]
+                : '';
+        },
         /**
          * #method
          */
@@ -250,8 +264,7 @@ function stateModelFactory(pluginManager) {
          */
         get assemblyErrors() {
             const { assemblyManager } = (0, util_1.getSession)(self);
-            const { assemblyNames } = self;
-            return assemblyNames
+            return self.assemblyNames
                 .map(a => { var _a; return (_a = assemblyManager.get(a)) === null || _a === void 0 ? void 0 : _a.error; })
                 .filter(f => !!f)
                 .join(', ');
@@ -438,6 +451,12 @@ function stateModelFactory(pluginManager) {
         },
     }))
         .actions(self => ({
+        /**
+         * #action
+         */
+        setShowTrackOutlines(arg) {
+            self.showTrackOutlines = arg;
+        },
         /**
          * #action
          */
@@ -1014,6 +1033,12 @@ function stateModelFactory(pluginManager) {
                             checked: !self.hideHeader,
                             onClick: () => self.setHideHeader(!self.hideHeader),
                         },
+                        {
+                            label: 'Show track outlines',
+                            type: 'checkbox',
+                            checked: self.showTrackOutlines,
+                            onClick: () => self.setShowTrackOutlines(!self.showTrackOutlines),
+                        },
                         {
                             label: 'Show header overview',
                             type: 'checkbox',

package/dist/LinearGenomeView/util.d.ts

@@ -23,9 +23,9 @@ export declare function makeTicks(start: number, end: number, bpPerPx: number, e
 export declare function generateLocations(regions: ParsedLocString[] | undefined, assemblyManager: AssemblyManager, assemblyName?: string): Promise<{
     assemblyName: string;
     parentRegion: import("@jbrowse/core/assemblyManager/assembly").BasicRegion;
-    end?: number;
-    start?: number;
-    reversed?: boolean;
+    end?: number | undefined;
+    start?: number | undefined;
+    reversed?: boolean | undefined;
     refName: string;
 }[]>;
 /**

package/dist/index.d.ts

@@ -380,6 +380,7 @@ export default class LinearGenomeViewPlugin extends Plugin {
                 showGridlines: boolean;
                 highlight: import("mobx-state-tree").IMSTArray<import("mobx-state-tree").IType<Required<import("@jbrowse/core/util").ParsedLocString>, Required<import("@jbrowse/core/util").ParsedLocString>, Required<import("@jbrowse/core/util").ParsedLocString>>> & import("mobx-state-tree").IStateTreeNode<import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").IArrayType<import("mobx-state-tree").IType<Required<import("@jbrowse/core/util").ParsedLocString>, Required<import("@jbrowse/core/util").ParsedLocString>, Required<import("@jbrowse/core/util").ParsedLocString>>>, [undefined]>>;
                 colorByCDS: boolean;
+                showTrackOutlines: boolean;
             } & import("mobx-state-tree/dist/internal").NonEmptyObject & {
                 width: number;
             } & {
@@ -406,6 +407,7 @@ export default class LinearGenomeViewPlugin extends Plugin {
                 readonly interRegionPaddingWidth: number;
                 readonly assemblyNames: string[];
             } & {
+                scaleBarDisplayPrefix(): string;
                 MiniControlsComponent(): import("react").FC<any>;
                 HeaderComponent(): import("react").FC<any>;
                 readonly assemblyErrors: string;
@@ -435,6 +437,7 @@ export default class LinearGenomeViewPlugin extends Plugin {
                 rewriteOnClicks(trackType: string, viewMenuActions: import("@jbrowse/core/ui").MenuItem[]): void;
                 readonly trackTypeActions: Map<string, import("@jbrowse/core/ui").MenuItem[]>;
             } & {
+                setShowTrackOutlines(arg: boolean): void;
                 setColorByCDS(flag: boolean): void;
                 setShowCytobands(flag: boolean): void;
                 setWidth(newWidth: number): void;
@@ -575,6 +578,7 @@ export default class LinearGenomeViewPlugin extends Plugin {
                 showGridlines: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
                 highlight: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").IArrayType<import("mobx-state-tree").IType<Required<import("@jbrowse/core/util").ParsedLocString>, Required<import("@jbrowse/core/util").ParsedLocString>, Required<import("@jbrowse/core/util").ParsedLocString>>>, [undefined]>;
                 colorByCDS: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
+                showTrackOutlines: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
             }, {
                 width: number;
             } & {
@@ -601,6 +605,7 @@ export default class LinearGenomeViewPlugin extends Plugin {
                 readonly interRegionPaddingWidth: number;
                 readonly assemblyNames: string[];
             } & {
+                scaleBarDisplayPrefix(): string;
                 MiniControlsComponent(): import("react").FC<any>;
                 HeaderComponent(): import("react").FC<any>;
                 readonly assemblyErrors: string;
@@ -630,6 +635,7 @@ export default class LinearGenomeViewPlugin extends Plugin {
                 rewriteOnClicks(trackType: string, viewMenuActions: import("@jbrowse/core/ui").MenuItem[]): void;
                 readonly trackTypeActions: Map<string, import("@jbrowse/core/ui").MenuItem[]>;
             } & {
+                setShowTrackOutlines(arg: boolean): void;
                 setColorByCDS(flag: boolean): void;
                 setShowCytobands(flag: boolean): void;
                 setWidth(newWidth: number): void;
@@ -770,6 +776,7 @@ export default class LinearGenomeViewPlugin extends Plugin {
                 showGridlines: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
                 highlight: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").IArrayType<import("mobx-state-tree").IType<Required<import("@jbrowse/core/util").ParsedLocString>, Required<import("@jbrowse/core/util").ParsedLocString>, Required<import("@jbrowse/core/util").ParsedLocString>>>, [undefined]>;
                 colorByCDS: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
+                showTrackOutlines: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
             }>>, import("mobx-state-tree")._NotCustomized>>;
         }) => import("react").JSX.Element;
     };

package/esm/LinearGenomeView/components/LinearGenomeView.js

@@ -1,14 +1,12 @@
-import React, { lazy, useEffect, useRef } from 'react';
-import { Button, Paper, Typography } from '@mui/material';
+import React, { lazy, Suspense, useEffect, useRef } from 'react';
 import { makeStyles } from 'tss-react/mui';
 import { LoadingEllipses } from '@jbrowse/core/ui';
 import { getSession } from '@jbrowse/core/util';
 import { observer } from 'mobx-react';
-// icons
-import { TrackSelector as TrackSelectorIcon } from '@jbrowse/core/ui/Icons';
 import TrackContainer from './TrackContainer';
 import TracksContainer from './TracksContainer';
 const ImportForm = lazy(() => import('./ImportForm'));
+const NoTracksActiveButton = lazy(() => import('./NoTracksActiveButton'));
 const useStyles = makeStyles()(theme => ({
     note: {
         textAlign: 'center',
@@ -22,13 +20,6 @@ const useStyles = makeStyles()(theme => ({
         zIndex: 1000,
     },
 }));
-function NoTracksActive({ model }) {
-    const { classes } = useStyles();
-    const { hideNoTracksActive } = model;
-    return (React.createElement(Paper, { className: classes.note }, !hideNoTracksActive ? (React.createElement(React.Fragment, null,
-        React.createElement(Typography, null, "No tracks active."),
-        React.createElement(Button, { variant: "contained", color: "primary", onClick: () => model.activateTrackSelector(), className: classes.top, startIcon: React.createElement(TrackSelectorIcon, null) }, "Open track selector"))) : (React.createElement("div", { style: { height: '48px' } }))));
-}
 const LinearGenomeView = observer(({ model }) => {
     const { tracks, error, initialized, hasDisplayedRegions } = model;
     const ref = useRef(null);
@@ -71,6 +62,7 @@ const LinearGenomeView = observer(({ model }) => {
         } },
         React.createElement(HeaderComponent, { model: model }),
         React.createElement(MiniControlsComponent, { model: model }),
-        React.createElement(TracksContainer, { model: model }, !tracks.length ? (React.createElement(NoTracksActive, { model: model })) : (tracks.map(track => (React.createElement(TrackContainer, { key: track.id, model: model, track: track })))))));
+        React.createElement(TracksContainer, { model: model }, !tracks.length ? (React.createElement(Suspense, { fallback: React.createElement(React.Fragment, null) },
+            React.createElement(NoTracksActiveButton, { model: model }))) : (tracks.map(track => (React.createElement(TrackContainer, { key: track.id, model: model, track: track })))))));
 });
 export default LinearGenomeView;

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import { LinearGenomeViewModel } from '..';
+declare const NoTracksActiveButton: ({ model, }: {
+    model: LinearGenomeViewModel;
+}) => React.JSX.Element;
+export default NoTracksActiveButton;

package/esm/LinearGenomeView/components/NoTracksActiveButton.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Button, Paper, Typography } from '@mui/material';
+import { makeStyles } from 'tss-react/mui';
+import { observer } from 'mobx-react';
+// icons
+import { TrackSelector as TrackSelectorIcon } from '@jbrowse/core/ui/Icons';
+const useStyles = makeStyles()(theme => ({
+    note: {
+        textAlign: 'center',
+        paddingTop: theme.spacing(1),
+        paddingBottom: theme.spacing(1),
+    },
+    top: {
+        zIndex: 1000,
+    },
+}));
+const NoTracksActiveButton = observer(function ({ model, }) {
+    const { classes } = useStyles();
+    const { hideNoTracksActive } = model;
+    return (React.createElement(Paper, { className: classes.note }, !hideNoTracksActive ? (React.createElement(React.Fragment, null,
+        React.createElement(Typography, null, "No tracks active."),
+        React.createElement(Button, { variant: "contained", color: "primary", onClick: () => model.activateTrackSelector(), className: classes.top, startIcon: React.createElement(TrackSelectorIcon, null) }, "Open track selector"))) : (React.createElement("div", { style: { height: '48px' } }))));
+});
+export default NoTracksActiveButton;

package/esm/LinearGenomeView/components/Scalebar.js

@@ -2,9 +2,9 @@ import { Paper, Typography } from '@mui/material';
 import { makeStyles } from 'tss-react/mui';
 import { observer } from 'mobx-react';
 import React from 'react';
+import { getTickDisplayStr } from '@jbrowse/core/util';
 import { ContentBlock as ContentBlockComponent, ElidedBlock as ElidedBlockComponent, InterRegionPaddingBlock as InterRegionPaddingBlockComponent, } from '../../BaseLinearDisplay/components/Block';
 import { makeTicks } from '../util';
-import { getTickDisplayStr } from '@jbrowse/core/util';
 const useStyles = makeStyles()(theme => ({
     scalebarContainer: {
         overflow: 'hidden',
@@ -45,24 +45,30 @@ const useStyles = makeStyles()(theme => ({
         background: theme.palette.background.paper,
     },
 }));
-const RenderedRefNameLabels = observer(({ model }) => {
+const RenderedRefNameLabels = observer(function ({ model }) {
     const { classes } = useStyles();
+    const { staticBlocks, offsetPx, scaleBarDisplayPrefix } = model;
     // find the block that needs pinning to the left side for context
     let lastLeftBlock = 0;
-    model.staticBlocks.forEach((block, i) => {
-        if (block.offsetPx - model.offsetPx < 0) {
+    staticBlocks.forEach((block, i) => {
+        if (block.offsetPx - offsetPx < 0) {
             lastLeftBlock = i;
         }
     });
-    return (React.createElement(React.Fragment, null, model.staticBlocks.map((block, index) => {
-        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)
-                    : block.offsetPx - model.offsetPx - 1,
-                paddingLeft: index === lastLeftBlock ? 0 : 1,
-            }, className: classes.refLabel, "data-testid": `refLabel-${block.refName}` }, block.refName)) : null;
-    })));
+    const val = scaleBarDisplayPrefix();
+    return (React.createElement(React.Fragment, null,
+        staticBlocks.blocks[0].type !== 'ContentBlock' && val ? (React.createElement(Typography, { style: { left: 0, zIndex: 100 }, className: classes.refLabel }, val)) : null,
+        staticBlocks.map((block, index) => {
+            return block.type === 'ContentBlock' &&
+                (block.isLeftEndOfDisplayedRegion || index === lastLeftBlock) ? (React.createElement(Typography, { key: `refLabel-${block.key}-${index}`, style: {
+                    left: index === lastLeftBlock
+                        ? Math.max(0, -offsetPx)
+                        : block.offsetPx - offsetPx - 1,
+                    paddingLeft: index === lastLeftBlock ? 0 : 1,
+                }, className: classes.refLabel, "data-testid": `refLabel-${block.refName}` },
+                index === lastLeftBlock && val ? `${val}:` : '',
+                block.refName)) : null;
+        })));
 });
 const RenderedBlockTicks = function ({ block, bpPerPx, }) {
     const { classes } = useStyles();
@@ -77,7 +83,7 @@ const RenderedBlockTicks = function ({ block, bpPerPx, }) {
         return null;
     })));
 };
-const RenderedScalebarLabels = observer(({ model }) => {
+const RenderedScalebarLabels = observer(function ({ model }) {
     const { staticBlocks, bpPerPx } = model;
     return (React.createElement(React.Fragment, null, staticBlocks.map((block, idx) => {
         const { key, widthPx } = block;

package/esm/LinearGenomeView/components/TrackContainer.js

@@ -21,9 +21,9 @@ const useStyles = makeStyles()({
 const TrackContainer = observer(function ({ model, track, }) {
     const { classes } = useStyles();
     const display = track.displays[0];
-    const { draggingTrackId } = model;
+    const { draggingTrackId, showTrackOutlines } = model;
     const ref = useRef(null);
-    return (React.createElement(Paper, { ref: ref, className: classes.root, variant: "outlined", onClick: event => {
+    return (React.createElement(Paper, { ref: ref, className: classes.root, variant: showTrackOutlines ? 'outlined' : undefined, elevation: showTrackOutlines ? undefined : 0, onClick: event => {
             var _a;
             if (event.detail === 2 && !track.displays[0].featureIdUnderMouse) {
                 const left = ((_a = ref.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().left) || 0;

package/esm/LinearGenomeView/model.d.ts

@@ -74,6 +74,7 @@ export declare function stateModelFactory(pluginManager: PluginManager): import(
     showGridlines: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
     highlight: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").IArrayType<import("mobx-state-tree").IType<Required<ParsedLocString>, Required<ParsedLocString>, Required<ParsedLocString>>>, [undefined]>;
     colorByCDS: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
+    showTrackOutlines: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
 }, {
     width: number;
 } & {
@@ -114,6 +115,10 @@ export declare function stateModelFactory(pluginManager: PluginManager): import(
      */
     readonly assemblyNames: string[];
 } & {
+    /**
+     * #method
+     */
+    scaleBarDisplayPrefix(): string;
     /**
      * #method
      */
@@ -216,6 +221,10 @@ export declare function stateModelFactory(pluginManager: PluginManager): import(
      */
     readonly trackTypeActions: Map<string, MenuItem[]>;
 } & {
+    /**
+     * #action
+     */
+    setShowTrackOutlines(arg: boolean): void;
     /**
      * #action
      */
@@ -615,6 +624,7 @@ export declare function stateModelFactory(pluginManager: PluginManager): import(
     showGridlines: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
     highlight: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").IArrayType<import("mobx-state-tree").IType<Required<ParsedLocString>, Required<ParsedLocString>, Required<ParsedLocString>>>, [undefined]>;
     colorByCDS: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
+    showTrackOutlines: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
 }>>, import("mobx-state-tree")._NotCustomized>;
 export type LinearGenomeViewStateModel = ReturnType<typeof stateModelFactory>;
 export type LinearGenomeViewModel = Instance<LinearGenomeViewStateModel>;

package/esm/LinearGenomeView/model.js

@@ -7,7 +7,7 @@ import calculateDynamicBlocks from '@jbrowse/core/util/calculateDynamicBlocks';
 import calculateStaticBlocks from '@jbrowse/core/util/calculateStaticBlocks';
 import { getParentRenderProps } from '@jbrowse/core/util/tracks';
 import { when, transaction, autorun } from 'mobx';
-import { addDisposer, cast, getSnapshot, getRoot, resolveIdentifier, types, } from 'mobx-state-tree';
+import { addDisposer, cast, getSnapshot, getRoot, resolveIdentifier, types, getParent, } from 'mobx-state-tree';
 import Base1DView from '@jbrowse/core/util/Base1DViewModel';
 import { moveTo, pxToBp, bpToPx } from '@jbrowse/core/util/Base1DUtils';
 import { saveAs } from 'file-saver';
@@ -147,6 +147,11 @@ export function stateModelFactory(pluginManager) {
          * color by CDS
          */
         colorByCDS: types.optional(types.boolean, () => Boolean(JSON.parse(localStorageGetItem('lgv-colorByCDS') || 'false'))),
+        /**
+         * #property
+         * color by CDS
+         */
+        showTrackOutlines: types.optional(types.boolean, () => Boolean(JSON.parse(localStorageGetItem('lgv-showTrackOutlines') || 'true'))),
     }))
         .volatile(() => ({
         volatileWidth: undefined,
@@ -201,6 +206,15 @@ export function stateModelFactory(pluginManager) {
         },
     }))
         .views(self => ({
+        /**
+         * #method
+         */
+        scaleBarDisplayPrefix() {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            return getParent(self, 2).type === 'LinearSyntenyView'
+                ? self.assemblyNames[0]
+                : '';
+        },
         /**
          * #method
          */
@@ -220,8 +234,7 @@ export function stateModelFactory(pluginManager) {
          */
         get assemblyErrors() {
             const { assemblyManager } = getSession(self);
-            const { assemblyNames } = self;
-            return assemblyNames
+            return self.assemblyNames
                 .map(a => { var _a; return (_a = assemblyManager.get(a)) === null || _a === void 0 ? void 0 : _a.error; })
                 .filter(f => !!f)
                 .join(', ');
@@ -408,6 +421,12 @@ export function stateModelFactory(pluginManager) {
         },
     }))
         .actions(self => ({
+        /**
+         * #action
+         */
+        setShowTrackOutlines(arg) {
+            self.showTrackOutlines = arg;
+        },
         /**
          * #action
          */
@@ -984,6 +1003,12 @@ export function stateModelFactory(pluginManager) {
                             checked: !self.hideHeader,
                             onClick: () => self.setHideHeader(!self.hideHeader),
                         },
+                        {
+                            label: 'Show track outlines',
+                            type: 'checkbox',
+                            checked: self.showTrackOutlines,
+                            onClick: () => self.setShowTrackOutlines(!self.showTrackOutlines),
+                        },
                         {
                             label: 'Show header overview',
                             type: 'checkbox',

package/esm/LinearGenomeView/util.d.ts

@@ -23,9 +23,9 @@ export declare function makeTicks(start: number, end: number, bpPerPx: number, e
 export declare function generateLocations(regions: ParsedLocString[] | undefined, assemblyManager: AssemblyManager, assemblyName?: string): Promise<{
     assemblyName: string;
     parentRegion: import("@jbrowse/core/assemblyManager/assembly").BasicRegion;
-    end?: number;
-    start?: number;
-    reversed?: boolean;
+    end?: number | undefined;
+    start?: number | undefined;
+    reversed?: boolean | undefined;
     refName: string;
 }[]>;
 /**

package/esm/index.d.ts

@@ -380,6 +380,7 @@ export default class LinearGenomeViewPlugin extends Plugin {
                 showGridlines: boolean;
                 highlight: import("mobx-state-tree").IMSTArray<import("mobx-state-tree").IType<Required<import("@jbrowse/core/util").ParsedLocString>, Required<import("@jbrowse/core/util").ParsedLocString>, Required<import("@jbrowse/core/util").ParsedLocString>>> & import("mobx-state-tree").IStateTreeNode<import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").IArrayType<import("mobx-state-tree").IType<Required<import("@jbrowse/core/util").ParsedLocString>, Required<import("@jbrowse/core/util").ParsedLocString>, Required<import("@jbrowse/core/util").ParsedLocString>>>, [undefined]>>;
                 colorByCDS: boolean;
+                showTrackOutlines: boolean;
             } & import("mobx-state-tree/dist/internal").NonEmptyObject & {
                 width: number;
             } & {
@@ -406,6 +407,7 @@ export default class LinearGenomeViewPlugin extends Plugin {
                 readonly interRegionPaddingWidth: number;
                 readonly assemblyNames: string[];
             } & {
+                scaleBarDisplayPrefix(): string;
                 MiniControlsComponent(): import("react").FC<any>;
                 HeaderComponent(): import("react").FC<any>;
                 readonly assemblyErrors: string;
@@ -435,6 +437,7 @@ export default class LinearGenomeViewPlugin extends Plugin {
                 rewriteOnClicks(trackType: string, viewMenuActions: import("@jbrowse/core/ui").MenuItem[]): void;
                 readonly trackTypeActions: Map<string, import("@jbrowse/core/ui").MenuItem[]>;
             } & {
+                setShowTrackOutlines(arg: boolean): void;
                 setColorByCDS(flag: boolean): void;
                 setShowCytobands(flag: boolean): void;
                 setWidth(newWidth: number): void;
@@ -575,6 +578,7 @@ export default class LinearGenomeViewPlugin extends Plugin {
                 showGridlines: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
                 highlight: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").IArrayType<import("mobx-state-tree").IType<Required<import("@jbrowse/core/util").ParsedLocString>, Required<import("@jbrowse/core/util").ParsedLocString>, Required<import("@jbrowse/core/util").ParsedLocString>>>, [undefined]>;
                 colorByCDS: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
+                showTrackOutlines: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
             }, {
                 width: number;
             } & {
@@ -601,6 +605,7 @@ export default class LinearGenomeViewPlugin extends Plugin {
                 readonly interRegionPaddingWidth: number;
                 readonly assemblyNames: string[];
             } & {
+                scaleBarDisplayPrefix(): string;
                 MiniControlsComponent(): import("react").FC<any>;
                 HeaderComponent(): import("react").FC<any>;
                 readonly assemblyErrors: string;
@@ -630,6 +635,7 @@ export default class LinearGenomeViewPlugin extends Plugin {
                 rewriteOnClicks(trackType: string, viewMenuActions: import("@jbrowse/core/ui").MenuItem[]): void;
                 readonly trackTypeActions: Map<string, import("@jbrowse/core/ui").MenuItem[]>;
             } & {
+                setShowTrackOutlines(arg: boolean): void;
                 setColorByCDS(flag: boolean): void;
                 setShowCytobands(flag: boolean): void;
                 setWidth(newWidth: number): void;
@@ -770,6 +776,7 @@ export default class LinearGenomeViewPlugin extends Plugin {
                 showGridlines: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
                 highlight: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").IArrayType<import("mobx-state-tree").IType<Required<import("@jbrowse/core/util").ParsedLocString>, Required<import("@jbrowse/core/util").ParsedLocString>, Required<import("@jbrowse/core/util").ParsedLocString>>>, [undefined]>;
                 colorByCDS: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
+                showTrackOutlines: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
             }>>, import("mobx-state-tree")._NotCustomized>>;
         }) => import("react").JSX.Element;
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/plugin-linear-genome-view",
-  "version": "2.12.3",
+  "version": "2.13.1",
   "description": "JBrowse 2 linear genome view",
   "keywords": [
     "jbrowse",
@@ -61,5 +61,5 @@
     "access": "public"
   },
   "module": "esm/index.js",
-  "gitHead": "2775490221cde56af344acebb0afa7e14531cd81"
+  "gitHead": "fcebca71cc1d066654603e1a9accfa6c6d4f764d"
 }