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

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

@@ -95,6 +95,7 @@ export declare function stateModelFactory(pluginManager: PluginManager): import(
     leftOffset: undefined | BpOffset;
     rightOffset: undefined | BpOffset;
 } & {
+    scaleBarDisplayPrefix(): "";
     /**
      * #getter
      * this is the effective value of the track labels setting, incorporating

package/dist/LinearGenomeView/model.js

@@ -194,6 +194,9 @@ function stateModelFactory(pluginManager) {
         rightOffset: undefined,
     }))
         .views(self => ({
+        scaleBarDisplayPrefix() {
+            return '';
+        },
         /**
          * #getter
          * this is the effective value of the track labels setting, incorporating

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

@@ -401,6 +401,7 @@ export default class LinearGenomeViewPlugin extends Plugin {
                 leftOffset: undefined | import("./LinearGenomeView").BpOffset;
                 rightOffset: undefined | import("./LinearGenomeView").BpOffset;
             } & {
+                scaleBarDisplayPrefix(): "";
                 readonly trackLabelsSetting: any;
                 readonly width: number;
                 readonly interRegionPaddingWidth: number;
@@ -596,6 +597,7 @@ export default class LinearGenomeViewPlugin extends Plugin {
                 leftOffset: undefined | import("./LinearGenomeView").BpOffset;
                 rightOffset: undefined | import("./LinearGenomeView").BpOffset;
             } & {
+                scaleBarDisplayPrefix(): "";
                 readonly trackLabelsSetting: any;
                 readonly width: number;
                 readonly interRegionPaddingWidth: number;

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

@@ -95,6 +95,7 @@ export declare function stateModelFactory(pluginManager: PluginManager): import(
     leftOffset: undefined | BpOffset;
     rightOffset: undefined | BpOffset;
 } & {
+    scaleBarDisplayPrefix(): "";
     /**
      * #getter
      * this is the effective value of the track labels setting, incorporating

package/esm/LinearGenomeView/model.js

@@ -164,6 +164,9 @@ export function stateModelFactory(pluginManager) {
         rightOffset: undefined,
     }))
         .views(self => ({
+        scaleBarDisplayPrefix() {
+            return '';
+        },
         /**
          * #getter
          * this is the effective value of the track labels setting, incorporating

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

@@ -401,6 +401,7 @@ export default class LinearGenomeViewPlugin extends Plugin {
                 leftOffset: undefined | import("./LinearGenomeView").BpOffset;
                 rightOffset: undefined | import("./LinearGenomeView").BpOffset;
             } & {
+                scaleBarDisplayPrefix(): "";
                 readonly trackLabelsSetting: any;
                 readonly width: number;
                 readonly interRegionPaddingWidth: number;
@@ -596,6 +597,7 @@ export default class LinearGenomeViewPlugin extends Plugin {
                 leftOffset: undefined | import("./LinearGenomeView").BpOffset;
                 rightOffset: undefined | import("./LinearGenomeView").BpOffset;
             } & {
+                scaleBarDisplayPrefix(): "";
                 readonly trackLabelsSetting: any;
                 readonly width: number;
                 readonly interRegionPaddingWidth: number;

package/package.json

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