@jbrowse/plugin-linear-genome-view 2.6.2 → 2.6.3

package/dist/LinearGenomeView/components/TrackRenderingContainer.js

@@ -27,6 +27,7 @@ const react_1 = __importStar(require("react"));
 const mui_1 = require("tss-react/mui");
 const mobx_react_1 = require("mobx-react");
 const configuration_1 = require("@jbrowse/core/configuration");
+const ui_1 = require("@jbrowse/core/ui");
 const useStyles = (0, mui_1.makeStyles)()({
     // aligns with block boundaries. check for example the breakpoint split view
     // demo to see if features align if wanting to change things
@@ -63,7 +64,8 @@ exports.default = (0, mobx_react_1.observer)(function TrackRenderingContainer({
     }, [model.trackRefs, trackId]);
     return (react_1.default.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_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement("div", { ref: ref, className: classes.renderingComponentContainer, style: { transform: `scaleX(${model.scaleFactor})` } },
-            react_1.default.createElement(RenderingComponent, { model: display, onHorizontalScroll: model.horizontalScroll })),
+            react_1.default.createElement(react_1.Suspense, { fallback: react_1.default.createElement(ui_1.LoadingEllipses, null) },
+                react_1.default.createElement(RenderingComponent, { model: display, onHorizontalScroll: model.horizontalScroll }))),
         DisplayBlurb ? (react_1.default.createElement("div", { style: {
                 position: 'absolute',
                 left: 0,

package/dist/LinearGenomeView/svgcomponents/SVGBackground.js

@@ -5,8 +5,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const material_1 = require("@mui/material");
+const color_1 = __importDefault(require("color"));
 function SVGBackground({ width, height, shift, }) {
     const theme = (0, material_1.useTheme)();
-    return (react_1.default.createElement("rect", { width: width + shift * 2, height: height, fill: theme.palette.background.default }));
+    return (react_1.default.createElement("rect", { width: width + shift * 2, height: height, fill: (0, color_1.default)(theme.palette.background.default).hex() }));
 }
 exports.default = SVGBackground;

package/dist/LinearGenomeView/svgcomponents/SVGHeader.js

@@ -7,6 +7,7 @@ const react_1 = __importDefault(require("react"));
 const util_1 = require("@jbrowse/core/util");
 const Base1DViewModel_1 = __importDefault(require("@jbrowse/core/util/Base1DViewModel"));
 const material_1 = require("@mui/material");
+const color_1 = __importDefault(require("color"));
 // locals
 const __1 = require("..");
 const Cytobands_1 = __importDefault(require("../components/Cytobands"));
@@ -19,6 +20,7 @@ function SVGHeader({ model, fontSize, cytobandHeight, rulerHeight, }) {
     const assemblyName = assemblyNames.length > 1 ? '' : assemblyNames[0];
     const assembly = assemblyManager.get(assemblyName);
     const theme = (0, material_1.useTheme)();
+    const c = (0, color_1.default)(theme.palette.text.primary).hex();
     const overview = Base1DViewModel_1.default.create({
         displayedRegions: JSON.parse(JSON.stringify(displayedRegions)),
         interRegionPaddingWidth: 0,
@@ -43,17 +45,17 @@ function SVGHeader({ model, fontSize, cytobandHeight, rulerHeight, }) {
         ...last,
         coord: last.reversed ? last.start : last.end,
     }) || 0;
-    const c = +showCytobands * cytobandHeight;
+    const y = +showCytobands * cytobandHeight;
     return (react_1.default.createElement("g", { id: "header" },
-        react_1.default.createElement("text", { x: 0, y: fontSize, fontSize: fontSize, fill: theme.palette.text.primary }, assemblyName),
+        react_1.default.createElement("text", { x: 0, y: 0, dominantBaseline: "hanging", fontSize: fontSize, fill: c }, assemblyName),
         showCytobands ? (react_1.default.createElement("g", { transform: `translate(0 ${rulerHeight})` },
             react_1.default.createElement(Cytobands_1.default, { overview: overview, assembly: assembly, block: block }),
             react_1.default.createElement("rect", { stroke: "red", fill: "rgb(255,0,0,0.1)", width: Math.max(lastOverviewPx - firstOverviewPx, 0.5), height: __1.HEADER_OVERVIEW_HEIGHT - 1, x: firstOverviewPx, y: 0.5 }),
             react_1.default.createElement("g", { transform: `translate(0,${__1.HEADER_OVERVIEW_HEIGHT})` },
                 react_1.default.createElement(OverviewScalebar_1.Polygon, { overview: overview, model: model, useOffset: false })))) : null,
-        react_1.default.createElement("g", { transform: `translate(0 ${fontSize + c})` },
+        react_1.default.createElement("g", { transform: `translate(0 ${fontSize + y})` },
             react_1.default.createElement(SVGScalebar_1.default, { model: model, fontSize: fontSize })),
-        react_1.default.createElement("g", { transform: `translate(0 ${rulerHeight + c})` },
+        react_1.default.createElement("g", { transform: `translate(0 ${rulerHeight + y})` },
             react_1.default.createElement(SVGRuler_1.default, { model: model, fontSize: fontSize }))));
 }
 exports.default = SVGHeader;

package/dist/LinearGenomeView/svgcomponents/SVGRuler.js

@@ -9,20 +9,22 @@ const material_1 = require("@mui/material");
 // locals
 const util_2 = require("../util");
 const SVGRegionSeparators_1 = __importDefault(require("./SVGRegionSeparators"));
+const color_1 = __importDefault(require("color"));
 function Ruler({ start, end, bpPerPx, reversed = false, major = true, minor = true, hideText = false, }) {
     const ticks = (0, util_2.makeTicks)(start, end, bpPerPx, major, minor);
     const theme = (0, material_1.useTheme)();
+    const c = (0, color_1.default)(theme.palette.text.secondary).hex();
     return (react_1.default.createElement(react_1.default.Fragment, null,
         ticks.map(tick => {
             const x = (reversed ? end - tick.base : tick.base - start) / bpPerPx;
-            return (react_1.default.createElement("line", { key: tick.base, x1: x, x2: x, y1: 0, y2: tick.type === 'major' ? 6 : 4, strokeWidth: 1, stroke: theme.palette.text.secondary }));
+            return (react_1.default.createElement("line", { key: 'tick-' + tick.base, x1: x, x2: x, y1: 0, y2: tick.type === 'major' ? 6 : 4, strokeWidth: 1, stroke: c }));
         }),
         !hideText
             ? ticks
                 .filter(tick => tick.type === 'major')
                 .map(tick => {
                 const x = (reversed ? end - tick.base : tick.base - start) / bpPerPx;
-                return (react_1.default.createElement("text", { x: x - 3, y: 7 + 11, key: `label-${tick.base}`, fontSize: 11, fill: theme.palette.text.primary }, (0, util_1.getTickDisplayStr)(tick.base + 1, bpPerPx)));
+                return (react_1.default.createElement("text", { key: `label-${tick.base}`, x: x - 3, y: 7 + 11, fontSize: 11, fill: c }, (0, util_1.getTickDisplayStr)(tick.base + 1, bpPerPx)));
             })
             : null));
 }
@@ -30,6 +32,7 @@ function SVGRuler({ model, fontSize, }) {
     const { dynamicBlocks: { contentBlocks }, offsetPx: viewOffsetPx, bpPerPx, } = model;
     const renderRuler = contentBlocks.length < 5;
     const theme = (0, material_1.useTheme)();
+    const c = (0, color_1.default)(theme.palette.text.primary).hex();
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(SVGRegionSeparators_1.default, { model: model, height: 30 }),
         contentBlocks.map(block => {
@@ -42,7 +45,7 @@ function SVGRuler({ model, fontSize, }) {
                         react_1.default.createElement("rect", { x: 0, y: 0, width: widthPx, height: 100 }))),
                 react_1.default.createElement("g", { transform: `translate(${offset} 0)` },
                     react_1.default.createElement("g", { clipPath: `url(#${clipid})` },
-                        react_1.default.createElement("text", { x: 4, y: fontSize, fontSize: fontSize, fill: theme.palette.text.primary }, refName),
+                        react_1.default.createElement("text", { x: 4, y: fontSize, fontSize: fontSize, fill: c }, refName),
                         react_1.default.createElement("g", { transform: "translate(0 20)" },
                             react_1.default.createElement(Ruler, { hideText: !renderRuler, start: start, end: end, bpPerPx: bpPerPx, reversed: reversed }))))));
         })));

package/dist/LinearGenomeView/svgcomponents/SVGScalebar.js

@@ -6,16 +6,20 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const util_1 = require("@jbrowse/core/util");
 const material_1 = require("@mui/material");
+const color_1 = __importDefault(require("color"));
 function SVGScalebar({ model, fontSize, }) {
     const { offsetPx, dynamicBlocks: { totalWidthPxWithoutBorders: totalWidthPx, totalBp }, } = model;
     const theme = (0, material_1.useTheme)();
     const displayBp = (0, util_1.getBpDisplayStr)(totalBp);
     const x0 = Math.max(-offsetPx, 0);
     const x1 = x0 + totalWidthPx;
+    const c = (0, color_1.default)(theme.palette.text.secondary).hex();
+    const x = x0 + (x1 - x0) / 2;
+    const y = fontSize;
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("line", { x1: x0, x2: x1, y1: 10, y2: 10, stroke: theme.palette.text.secondary }),
-        react_1.default.createElement("line", { x1: x0, x2: x0, y1: 5, y2: 15, stroke: theme.palette.text.secondary }),
-        react_1.default.createElement("line", { x1: x1, x2: x1, y1: 5, y2: 15, stroke: theme.palette.text.secondary }),
-        react_1.default.createElement("text", { x: x0 + (x1 - x0) / 2, y: fontSize * 2, textAnchor: "middle", fontSize: fontSize, fill: theme.palette.text.primary }, displayBp)));
+        react_1.default.createElement("line", { x1: x0, x2: x1, y1: 10, y2: 10, stroke: c }),
+        react_1.default.createElement("line", { x1: x0, x2: x0, y1: 5, y2: 15, stroke: c }),
+        react_1.default.createElement("line", { x1: x1, x2: x1, y1: 5, y2: 15, stroke: c }),
+        react_1.default.createElement("text", { x: x, y: y, textAnchor: "middle", dominantBaseline: "hanging", fontSize: fontSize, fill: c }, displayBp)));
 }
 exports.default = SVGScalebar;

package/esm/LinearGenomeView/components/TrackRenderingContainer.js

@@ -1,7 +1,8 @@
-import React, { useEffect, useRef } from 'react';
+import React, { Suspense, useEffect, useRef } from 'react';
 import { makeStyles } from 'tss-react/mui';
 import { observer } from 'mobx-react';
 import { getConf } from '@jbrowse/core/configuration';
+import { LoadingEllipses } from '@jbrowse/core/ui';
 const useStyles = makeStyles()({
     // aligns with block boundaries. check for example the breakpoint split view
     // demo to see if features align if wanting to change things
@@ -38,7 +39,8 @@ export default observer(function TrackRenderingContainer({ model, track, onDragE
     }, [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})` } },
-            React.createElement(RenderingComponent, { model: display, onHorizontalScroll: model.horizontalScroll })),
+            React.createElement(Suspense, { fallback: React.createElement(LoadingEllipses, null) },
+                React.createElement(RenderingComponent, { model: display, onHorizontalScroll: model.horizontalScroll }))),
         DisplayBlurb ? (React.createElement("div", { style: {
                 position: 'absolute',
                 left: 0,

package/esm/LinearGenomeView/svgcomponents/SVGBackground.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { useTheme } from '@mui/material';
+import Color from 'color';
 export default function SVGBackground({ width, height, shift, }) {
     const theme = useTheme();
-    return (React.createElement("rect", { width: width + shift * 2, height: height, fill: theme.palette.background.default }));
+    return (React.createElement("rect", { width: width + shift * 2, height: height, fill: Color(theme.palette.background.default).hex() }));
 }

package/esm/LinearGenomeView/svgcomponents/SVGHeader.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { getSession } from '@jbrowse/core/util';
 import Base1DView from '@jbrowse/core/util/Base1DViewModel';
 import { useTheme } from '@mui/material';
+import Color from 'color';
 // locals
 import { HEADER_OVERVIEW_HEIGHT } from '..';
 import Cytobands from '../components/Cytobands';
@@ -14,6 +15,7 @@ export default function SVGHeader({ model, fontSize, cytobandHeight, rulerHeight
     const assemblyName = assemblyNames.length > 1 ? '' : assemblyNames[0];
     const assembly = assemblyManager.get(assemblyName);
     const theme = useTheme();
+    const c = Color(theme.palette.text.primary).hex();
     const overview = Base1DView.create({
         displayedRegions: JSON.parse(JSON.stringify(displayedRegions)),
         interRegionPaddingWidth: 0,
@@ -38,16 +40,16 @@ export default function SVGHeader({ model, fontSize, cytobandHeight, rulerHeight
         ...last,
         coord: last.reversed ? last.start : last.end,
     }) || 0;
-    const c = +showCytobands * cytobandHeight;
+    const y = +showCytobands * cytobandHeight;
     return (React.createElement("g", { id: "header" },
-        React.createElement("text", { x: 0, y: fontSize, fontSize: fontSize, fill: theme.palette.text.primary }, assemblyName),
+        React.createElement("text", { x: 0, y: 0, dominantBaseline: "hanging", fontSize: fontSize, fill: c }, assemblyName),
         showCytobands ? (React.createElement("g", { transform: `translate(0 ${rulerHeight})` },
             React.createElement(Cytobands, { overview: overview, assembly: assembly, block: block }),
             React.createElement("rect", { stroke: "red", fill: "rgb(255,0,0,0.1)", width: Math.max(lastOverviewPx - firstOverviewPx, 0.5), height: HEADER_OVERVIEW_HEIGHT - 1, x: firstOverviewPx, y: 0.5 }),
             React.createElement("g", { transform: `translate(0,${HEADER_OVERVIEW_HEIGHT})` },
                 React.createElement(Polygon, { overview: overview, model: model, useOffset: false })))) : null,
-        React.createElement("g", { transform: `translate(0 ${fontSize + c})` },
+        React.createElement("g", { transform: `translate(0 ${fontSize + y})` },
             React.createElement(SVGScalebar, { model: model, fontSize: fontSize })),
-        React.createElement("g", { transform: `translate(0 ${rulerHeight + c})` },
+        React.createElement("g", { transform: `translate(0 ${rulerHeight + y})` },
             React.createElement(SVGRuler, { model: model, fontSize: fontSize }))));
 }

package/esm/LinearGenomeView/svgcomponents/SVGRuler.js

@@ -4,20 +4,22 @@ import { useTheme } from '@mui/material';
 // locals
 import { makeTicks } from '../util';
 import SVGRegionSeparators from './SVGRegionSeparators';
+import Color from 'color';
 function Ruler({ start, end, bpPerPx, reversed = false, major = true, minor = true, hideText = false, }) {
     const ticks = makeTicks(start, end, bpPerPx, major, minor);
     const theme = useTheme();
+    const c = Color(theme.palette.text.secondary).hex();
     return (React.createElement(React.Fragment, null,
         ticks.map(tick => {
             const x = (reversed ? end - tick.base : tick.base - start) / bpPerPx;
-            return (React.createElement("line", { key: tick.base, x1: x, x2: x, y1: 0, y2: tick.type === 'major' ? 6 : 4, strokeWidth: 1, stroke: theme.palette.text.secondary }));
+            return (React.createElement("line", { key: 'tick-' + tick.base, x1: x, x2: x, y1: 0, y2: tick.type === 'major' ? 6 : 4, strokeWidth: 1, stroke: c }));
         }),
         !hideText
             ? ticks
                 .filter(tick => tick.type === 'major')
                 .map(tick => {
                 const x = (reversed ? end - tick.base : tick.base - start) / bpPerPx;
-                return (React.createElement("text", { x: x - 3, y: 7 + 11, key: `label-${tick.base}`, fontSize: 11, fill: theme.palette.text.primary }, getTickDisplayStr(tick.base + 1, bpPerPx)));
+                return (React.createElement("text", { key: `label-${tick.base}`, x: x - 3, y: 7 + 11, fontSize: 11, fill: c }, getTickDisplayStr(tick.base + 1, bpPerPx)));
             })
             : null));
 }
@@ -25,6 +27,7 @@ export default function SVGRuler({ model, fontSize, }) {
     const { dynamicBlocks: { contentBlocks }, offsetPx: viewOffsetPx, bpPerPx, } = model;
     const renderRuler = contentBlocks.length < 5;
     const theme = useTheme();
+    const c = Color(theme.palette.text.primary).hex();
     return (React.createElement(React.Fragment, null,
         React.createElement(SVGRegionSeparators, { model: model, height: 30 }),
         contentBlocks.map(block => {
@@ -37,7 +40,7 @@ export default function SVGRuler({ model, fontSize, }) {
                         React.createElement("rect", { x: 0, y: 0, width: widthPx, height: 100 }))),
                 React.createElement("g", { transform: `translate(${offset} 0)` },
                     React.createElement("g", { clipPath: `url(#${clipid})` },
-                        React.createElement("text", { x: 4, y: fontSize, fontSize: fontSize, fill: theme.palette.text.primary }, refName),
+                        React.createElement("text", { x: 4, y: fontSize, fontSize: fontSize, fill: c }, refName),
                         React.createElement("g", { transform: "translate(0 20)" },
                             React.createElement(Ruler, { hideText: !renderRuler, start: start, end: end, bpPerPx: bpPerPx, reversed: reversed }))))));
         })));

package/esm/LinearGenomeView/svgcomponents/SVGScalebar.js

@@ -1,15 +1,19 @@
 import React from 'react';
 import { getBpDisplayStr } from '@jbrowse/core/util';
 import { useTheme } from '@mui/material';
+import Color from 'color';
 export default function SVGScalebar({ model, fontSize, }) {
     const { offsetPx, dynamicBlocks: { totalWidthPxWithoutBorders: totalWidthPx, totalBp }, } = model;
     const theme = useTheme();
     const displayBp = getBpDisplayStr(totalBp);
     const x0 = Math.max(-offsetPx, 0);
     const x1 = x0 + totalWidthPx;
+    const c = Color(theme.palette.text.secondary).hex();
+    const x = x0 + (x1 - x0) / 2;
+    const y = fontSize;
     return (React.createElement(React.Fragment, null,
-        React.createElement("line", { x1: x0, x2: x1, y1: 10, y2: 10, stroke: theme.palette.text.secondary }),
-        React.createElement("line", { x1: x0, x2: x0, y1: 5, y2: 15, stroke: theme.palette.text.secondary }),
-        React.createElement("line", { x1: x1, x2: x1, y1: 5, y2: 15, stroke: theme.palette.text.secondary }),
-        React.createElement("text", { x: x0 + (x1 - x0) / 2, y: fontSize * 2, textAnchor: "middle", fontSize: fontSize, fill: theme.palette.text.primary }, displayBp)));
+        React.createElement("line", { x1: x0, x2: x1, y1: 10, y2: 10, stroke: c }),
+        React.createElement("line", { x1: x0, x2: x0, y1: 5, y2: 15, stroke: c }),
+        React.createElement("line", { x1: x1, x2: x1, y1: 5, y2: 15, stroke: c }),
+        React.createElement("text", { x: x, y: y, textAnchor: "middle", dominantBaseline: "hanging", fontSize: fontSize, fill: c }, displayBp)));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/plugin-linear-genome-view",
-  "version": "2.6.2",
+  "version": "2.6.3",
   "description": "JBrowse 2 linear genome view",
   "keywords": [
     "jbrowse",
@@ -44,6 +44,7 @@
     "@types/normalize-wheel": "^1.0.0",
     "clone": "^2.1.2",
     "clsx": "^1.0.4",
+    "color": "^3.1.3",
     "copy-to-clipboard": "^3.3.1",
     "file-saver": "^2.0.0",
     "material-ui-popup-state": "^5.0.0",
@@ -65,5 +66,5 @@
     "access": "public"
   },
   "module": "esm/index.js",
-  "gitHead": "bbea587a402d9974acdd804a33f4b77f31a2fd5f"
+  "gitHead": "ed402c87efb0904858d602c363bd1757d5742129"
 }