@jbrowse/plugin-wiggle 2.6.3 → 2.7.0

package/dist/CreateMultiWiggleExtension/index.js

@@ -48,17 +48,20 @@ function default_1(pm) {
                                 ];
                                 const now = +Date.now();
                                 const trackId = `multitrack-${now}-sessionTrack`;
-                                (0, util_1.getSession)(model).addTrackConf({
-                                    type: 'MultiQuantitativeTrack',
-                                    trackId,
-                                    name: arg.name,
-                                    assemblyNames,
-                                    adapter: {
-                                        type: 'MultiWiggleAdapter',
-                                        subadapters,
-                                    },
-                                });
-                                model.view.showTrack(trackId);
+                                const session = (0, util_1.getSession)(model);
+                                if ((0, util_1.isSessionWithAddTracks)(session)) {
+                                    session.addTrackConf({
+                                        type: 'MultiQuantitativeTrack',
+                                        trackId,
+                                        name: arg.name,
+                                        assemblyNames,
+                                        adapter: {
+                                            type: 'MultiWiggleAdapter',
+                                            subadapters,
+                                        },
+                                    });
+                                    model.view.showTrack(trackId);
+                                }
                             }
                             (0, util_1.getSession)(model).queueDialog(handleClose => [
                                 ConfirmDialog,

package/dist/LinearWiggleDisplay/components/SetColorDialog.d.ts

@@ -1,14 +1,13 @@
 import React from 'react';
-declare function SetColorDialog({ model, handleClose, }: {
+declare const SetColorDialog: ({ model, handleClose, }: {
     model: {
-        color?: string;
-        posColor?: string;
-        negColor?: string;
+        color?: string | undefined;
+        posColor?: string | undefined;
+        negColor?: string | undefined;
         setColor: (arg?: string) => void;
         setPosColor: (arg?: string) => void;
         setNegColor: (arg?: string) => void;
     };
     handleClose: () => void;
-}): React.JSX.Element;
-declare const _default: typeof SetColorDialog;
-export default _default;
+}) => React.JSX.Element;
+export default SetColorDialog;

package/dist/LinearWiggleDisplay/components/SetColorDialog.js

@@ -28,7 +28,7 @@ const mobx_react_1 = require("mobx-react");
 const material_1 = require("@mui/material");
 const ui_1 = require("@jbrowse/core/ui");
 const ColorPicker_1 = require("@jbrowse/core/ui/ColorPicker");
-function SetColorDialog({ model, handleClose, }) {
+const SetColorDialog = (0, mobx_react_1.observer)(function SetColorDialog({ model, handleClose, }) {
     const [posneg, setPosNeg] = (0, react_1.useState)(false);
     return (react_1.default.createElement(ui_1.Dialog, { open: true, onClose: handleClose, title: "Set color" },
         react_1.default.createElement(material_1.DialogContent, null,
@@ -55,5 +55,5 @@ function SetColorDialog({ model, handleClose, }) {
                     model.setColor(undefined);
                 }, color: "secondary", variant: "contained" }, "Restore default"),
             react_1.default.createElement(material_1.Button, { variant: "contained", color: "primary", type: "submit", onClick: () => handleClose() }, "Submit"))));
-}
-exports.default = (0, mobx_react_1.observer)(SetColorDialog);
+});
+exports.default = SetColorDialog;

package/dist/LinearWiggleDisplay/components/Tooltip.js

@@ -10,7 +10,7 @@ const mobx_react_1 = require("mobx-react");
 const Tooltip_1 = __importDefault(require("../../Tooltip"));
 const util_1 = require("../../util");
 const en = (n) => n.toLocaleString('en-US');
-const TooltipContents = react_1.default.forwardRef(function ({ feature }, ref) {
+const TooltipContents = react_1.default.forwardRef(function TooltipContents2({ feature }, ref) {
     const start = feature.get('start');
     const end = feature.get('end');
     const name = feature.get('refName');

package/dist/MultiLinearWiggleDisplay/components/DraggableDialog.d.ts

@@ -1,7 +1,6 @@
 import React from 'react';
 import { DialogProps } from '@mui/material';
-declare function DraggableDialog(props: DialogProps & {
+declare const DraggableDialog: (props: DialogProps & {
     title: string;
-}): React.JSX.Element;
-declare const _default: typeof DraggableDialog;
-export default _default;
+}) => React.JSX.Element;
+export default DraggableDialog;

package/dist/MultiLinearWiggleDisplay/components/DraggableDialog.js

@@ -23,7 +23,7 @@ function PaperComponent(props) {
     return (react_1.default.createElement(react_draggable_1.default, { handle: "#draggable-dialog-title", cancel: '[class*="MuiDialogContent-root"]' },
         react_1.default.createElement(material_1.Paper, { ...props })));
 }
-function DraggableDialog(props) {
+const DraggableDialog = (0, mobx_react_1.observer)(function DraggableDialog(props) {
     const { classes } = useStyles();
     const { title, children, onClose } = props;
     return (react_1.default.createElement(material_1.Dialog, { ...props, PaperComponent: PaperComponent, "aria-labelledby": "draggable-dialog-title" // this area is important for the draggable functionality
@@ -38,5 +38,5 @@ function DraggableDialog(props) {
                     react_1.default.createElement(Close_1.default, null))) : null),
             react_1.default.createElement(material_1.Divider, null),
             children)));
-}
-exports.default = (0, mobx_react_1.observer)(DraggableDialog);
+});
+exports.default = DraggableDialog;

package/dist/MultiLinearWiggleDisplay/components/SetColorDialog.js

@@ -46,6 +46,11 @@ const useStyles = (0, mui_1.makeStyles)()({
     content: {
         minWidth: 800,
     },
+    cell: {
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+    },
 });
 function SetColorDialog({ model, handleClose, }) {
     const { classes } = useStyles();
@@ -83,6 +88,7 @@ function SetColorDialog({ model, handleClose, }) {
 }
 exports.default = SetColorDialog;
 function SourcesGrid({ rows, onChange, showTips, }) {
+    const { classes } = useStyles();
     const [anchorEl, setAnchorEl] = (0, react_1.useState)(null);
     const [selected, setSelected] = (0, react_1.useState)([]);
     // @ts-expect-error
@@ -143,7 +149,7 @@ function SourcesGrid({ rows, onChange, showTips, }) {
                         sortingOrder: [null],
                         renderCell: (params) => {
                             const { value } = params;
-                            return (0, util_1.isUriLocation)(value) ? (react_1.default.createElement(UriLink_1.default, { value: value })) : ((0, util_1.getStr)(value));
+                            return (react_1.default.createElement("div", { className: classes.cell }, (0, util_1.isUriLocation)(value) ? (react_1.default.createElement(UriLink_1.default, { value: value })) : (react_1.default.createElement(react_1.default.Fragment, null, (0, util_1.getStr)(value)))));
                         },
                         // @ts-ignore
                         width: (0, util_1.measureGridWidth)(rows.map(r => r[val])),

package/dist/MultiLinearWiggleDisplay/components/Tooltip.d.ts

@@ -2,12 +2,13 @@ import React from 'react';
 import { Feature } from '@jbrowse/core/util';
 import { Source } from '../../util';
 import { TooltipContentsComponent } from '../../Tooltip';
-declare const TooltipContents: React.ForwardRefExoticComponent<{
+interface Props {
     model: {
         sources: Source[];
     };
     feature: Feature;
-} & React.RefAttributes<HTMLDivElement>>;
+}
+declare const TooltipContents: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
 type Coord = [number, number];
 declare const WiggleTooltip: (props: {
     model: {

package/dist/MultiLinearWiggleDisplay/components/Tooltip.js

@@ -10,7 +10,7 @@ const mobx_react_1 = require("mobx-react");
 const util_1 = require("../../util");
 const Tooltip_1 = __importDefault(require("../../Tooltip"));
 const en = (n) => n.toLocaleString('en-US');
-const TooltipContents = react_1.default.forwardRef(({ model, feature }, ref) => {
+const TooltipContents = react_1.default.forwardRef(function TooltipContents2({ model, feature }, ref) {
     const start = feature.get('start');
     const end = feature.get('end');
     const refName = feature.get('refName');

package/dist/MultiLinearWiggleDisplay/components/WiggleDisplayComponent.d.ts

@@ -1,7 +1,6 @@
 import React from 'react';
 import { WiggleDisplayModel } from '../models/model';
-declare const _default: (props: {
+declare const MultiLinearWiggleDisplayComponent: (props: {
     model: WiggleDisplayModel;
 }) => React.JSX.Element;
-export default _default;
-export { default as YScaleBar } from '../../shared/YScaleBar';
+export default MultiLinearWiggleDisplayComponent;

package/dist/MultiLinearWiggleDisplay/components/WiggleDisplayComponent.js

@@ -3,16 +3,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.YScaleBar = void 0;
 const react_1 = __importDefault(require("react"));
 const plugin_linear_genome_view_1 = require("@jbrowse/plugin-linear-genome-view");
 const mobx_react_1 = require("mobx-react");
 const YScaleBars_1 = __importDefault(require("./YScaleBars"));
-exports.default = (0, mobx_react_1.observer)((props) => {
+const MultiLinearWiggleDisplayComponent = (0, mobx_react_1.observer)((props) => {
     const { model } = props;
     return (react_1.default.createElement("div", null,
         react_1.default.createElement(plugin_linear_genome_view_1.BaseLinearDisplayComponent, { ...props }),
         react_1.default.createElement(YScaleBars_1.default, { model: model })));
 });
-var YScaleBar_1 = require("../../shared/YScaleBar");
-Object.defineProperty(exports, "YScaleBar", { enumerable: true, get: function () { return __importDefault(YScaleBar_1).default; } });
+exports.default = MultiLinearWiggleDisplayComponent;

package/dist/MultiLinearWiggleDisplay/components/util.js

@@ -8,8 +8,7 @@ function moveUp(arr, sel, by = 1) {
         .map(l => arr.findIndex(v => v.name === l))
         .sort((a, b) => a - b);
     let lastIdx = 0;
-    for (let i = 0; i < idxs.length; i++) {
-        const old = idxs[i];
+    for (const old of idxs) {
         const idx = Math.max(lastIdx, old - by);
         if (idx >= lastIdx) {
             arr.splice(idx, 0, arr.splice(old, 1)[0]);
@@ -24,8 +23,7 @@ function moveDown(arr, sel, by = 1) {
         .map(l => arr.findIndex(v => v.name === l))
         .sort((a, b) => b - a);
     let lastIdx = arr.length - 1;
-    for (let i = 0; i < idxs.length; i++) {
-        const old = idxs[i];
+    for (const old of idxs) {
         const idx = Math.min(lastIdx, old + by);
         if (idx <= lastIdx) {
             arr.splice(idx, 0, arr.splice(old, 1)[0]);

package/dist/MultiRowXYPlotRenderer/MultiRowXYPlotRenderer.js

@@ -1,27 +1,4 @@
 "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 };
 };
@@ -37,7 +14,6 @@ class MultiXYPlotRenderer extends WiggleBaseRenderer_1.default {
         const groups = (0, util_1.groupBy)([...features.values()], f => f.get('source'));
         const height = props.height / sources.length;
         const width = (region.end - region.start) / bpPerPx;
-        const Color = await Promise.resolve().then(() => __importStar(require('color'))).then(f => f.default);
         let feats = [];
         ctx.save();
         sources.forEach(source => {
@@ -50,7 +26,6 @@ class MultiXYPlotRenderer extends WiggleBaseRenderer_1.default {
                 features,
                 height,
                 colorCallback: () => source.color || 'blue',
-                Color,
             });
             ctx.strokeStyle = 'rgba(200,200,200,0.8)';
             ctx.beginPath();

package/dist/MultiWiggleAddTrackWidget/AddTrackWorkflow.js

@@ -85,19 +85,23 @@ function MultiWiggleWidget({ model }) {
                 const obj = typeof bigWigs[0] === 'string'
                     ? { bigWigs }
                     : { subadapters: bigWigs };
-                session.addTrackConf({
-                    trackId,
-                    type: 'MultiQuantitativeTrack',
-                    name: trackName,
-                    assemblyNames: [model.assembly],
-                    adapter: {
-                        type: 'MultiWiggleAdapter',
-                        ...obj,
-                    },
-                });
-                (_a = model.view) === null || _a === void 0 ? void 0 : _a.showTrack(trackId);
+                if ((0, util_1.isSessionWithAddTracks)(session)) {
+                    session.addTrackConf({
+                        trackId,
+                        type: 'MultiQuantitativeTrack',
+                        name: trackName,
+                        assemblyNames: [model.assembly],
+                        adapter: {
+                            type: 'MultiWiggleAdapter',
+                            ...obj,
+                        },
+                    });
+                    (_a = model.view) === null || _a === void 0 ? void 0 : _a.showTrack(trackId);
+                }
                 model.clearData();
-                session.hideWidget(model);
+                if ((0, util_1.isSessionModelWithWidgets)(session)) {
+                    session.hideWidget(model);
+                }
             } }, "Submit"),
         react_1.default.createElement("p", null, "Additional notes: "),
         react_1.default.createElement("ul", null,

package/dist/MultiWiggleRendering.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { Region } from '@jbrowse/core/util/types';
 import { Feature } from '@jbrowse/core/util';
 import { Source } from './util';
-declare function WiggleRendering(props: {
+declare const MultiWiggleRendering: (props: {
     regions: Region[];
     features: Map<string, Feature>;
     bpPerPx: number;
@@ -16,6 +16,5 @@ declare function WiggleRendering(props: {
     displayModel: {
         isMultiRow: boolean;
     };
-}): React.JSX.Element;
-declare const _default: typeof WiggleRendering;
-export default _default;
+}) => React.JSX.Element;
+export default MultiWiggleRendering;

package/dist/MultiWiggleRendering.js

@@ -27,7 +27,7 @@ const mobx_react_1 = require("mobx-react");
 const react_1 = __importStar(require("react"));
 const util_1 = require("@jbrowse/core/util");
 const ui_1 = require("@jbrowse/core/ui");
-function WiggleRendering(props) {
+const MultiWiggleRendering = (0, mobx_react_1.observer)(function (props) {
     const { regions, features, bpPerPx, width, height, sources, onMouseLeave = () => { }, onMouseMove = () => { }, onFeatureClick = () => { }, displayModel, } = props;
     const [region] = regions;
     const ref = (0, react_1.useRef)(null);
@@ -84,10 +84,12 @@ function WiggleRendering(props) {
         return featureUnderMouse;
     }
     return (react_1.default.createElement("div", { ref: ref, onMouseMove: event => {
-            const featureUnderMouse = getFeatureUnderMouse(event.clientX, event.clientY);
+            const { clientX, clientY } = event;
+            const featureUnderMouse = getFeatureUnderMouse(clientX, clientY);
             onMouseMove(event, featureUnderMouse);
         }, onClick: event => {
-            const featureUnderMouse = getFeatureUnderMouse(event.clientX, event.clientY);
+            const { clientX, clientY } = event;
+            const featureUnderMouse = getFeatureUnderMouse(clientX, clientY);
             onFeatureClick(event, featureUnderMouse);
         }, onMouseLeave: event => onMouseLeave(event), style: {
             overflow: 'visible',
@@ -95,5 +97,5 @@ function WiggleRendering(props) {
             height,
         } },
         react_1.default.createElement(ui_1.PrerenderedCanvas, { ...props })));
-}
-exports.default = (0, mobx_react_1.observer)(WiggleRendering);
+});
+exports.default = MultiWiggleRendering;

package/dist/MultiXYPlotRenderer/MultiXYPlotRenderer.js

@@ -1,27 +1,4 @@
 "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 };
 };
@@ -35,7 +12,6 @@ class MultiXYPlotRenderer extends WiggleBaseRenderer_1.default {
     async draw(ctx, props) {
         const { sources, features } = props;
         const groups = (0, util_1.groupBy)([...features.values()], f => f.get('source'));
-        const Color = await Promise.resolve().then(() => __importStar(require('color'))).then(f => f.default);
         let feats = [];
         for (const source of sources) {
             const features = groups[source.name];
@@ -47,7 +23,6 @@ class MultiXYPlotRenderer extends WiggleBaseRenderer_1.default {
                 features,
                 offset: util_2.YSCALEBAR_LABEL_OFFSET,
                 colorCallback: () => source.color || 'blue',
-                Color,
             });
             feats = [...feats, ...reducedFeatures];
         }

package/dist/Tooltip.d.ts

@@ -5,16 +5,15 @@ export type TooltipContentsComponent = React.ForwardRefExoticComponent<{
     feature: Feature;
     model: any;
 } & React.RefAttributes<HTMLDivElement>>;
-declare function Tooltip({ model, height, clientMouseCoord, offsetMouseCoord, clientRect, TooltipContents, useClientY, }: {
+declare const Tooltip: ({ model, height, clientMouseCoord, offsetMouseCoord, clientRect, TooltipContents, useClientY, }: {
     model: {
         featureUnderMouse: Feature;
     };
-    useClientY?: boolean;
+    useClientY?: boolean | undefined;
     height: number;
     clientMouseCoord: Coord;
     offsetMouseCoord: Coord;
-    clientRect?: DOMRect;
+    clientRect?: DOMRect | undefined;
     TooltipContents: TooltipContentsComponent;
-}): React.JSX.Element | null;
-declare const _default: typeof Tooltip;
-export default _default;
+}) => React.JSX.Element | null;
+export default Tooltip;

package/dist/Tooltip.js

@@ -57,7 +57,7 @@ const useStyles = (0, mui_1.makeStyles)()(theme => ({
         pointerEvents: 'none',
     },
 }));
-function Tooltip({ model, height, clientMouseCoord, offsetMouseCoord, clientRect, TooltipContents, useClientY, }) {
+const Tooltip = (0, mobx_react_1.observer)(function Tooltip({ model, height, clientMouseCoord, offsetMouseCoord, clientRect, TooltipContents, useClientY, }) {
     const { featureUnderMouse } = model;
     const [width, setWidth] = (0, react_1.useState)(0);
     const [anchorEl, setAnchorEl] = (0, react_1.useState)(null);
@@ -91,5 +91,5 @@ function Tooltip({ model, height, clientMouseCoord, offsetMouseCoord, clientRect
                 left: offsetMouseCoord[0],
                 height: height - util_1.YSCALEBAR_LABEL_OFFSET * 2,
             } }))) : null;
-}
-exports.default = (0, mobx_react_1.observer)(Tooltip);
+});
+exports.default = Tooltip;

package/dist/WiggleRendering.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Region } from '@jbrowse/core/util/types';
 import { Feature } from '@jbrowse/core/util';
-declare function WiggleRendering(props: {
+declare const WiggleRendering: (props: {
     regions: Region[];
     features: Map<string, Feature>;
     bpPerPx: number;
@@ -11,6 +11,5 @@ declare function WiggleRendering(props: {
     onMouseMove: Function;
     onFeatureClick: Function;
     blockKey: string;
-}): React.JSX.Element;
-declare const _default: typeof WiggleRendering;
-export default _default;
+}) => React.JSX.Element;
+export default WiggleRendering;

package/dist/WiggleRendering.js

@@ -26,7 +26,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const mobx_react_1 = require("mobx-react");
 const react_1 = __importStar(require("react"));
 const ui_1 = require("@jbrowse/core/ui");
-function WiggleRendering(props) {
+const WiggleRendering = (0, mobx_react_1.observer)(function (props) {
     const { regions, features, bpPerPx, width, height, onMouseLeave = () => { }, onMouseMove = () => { }, onFeatureClick = () => { }, } = props;
     const [region] = regions;
     const ref = (0, react_1.useRef)(null);
@@ -56,5 +56,5 @@ function WiggleRendering(props) {
             height,
         } },
         react_1.default.createElement(ui_1.PrerenderedCanvas, { ...props })));
-}
-exports.default = (0, mobx_react_1.observer)(WiggleRendering);
+});
+exports.default = WiggleRendering;

package/dist/XYPlotRenderer/XYPlotRenderer.js

@@ -1,27 +1,4 @@
 "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 };
 };
@@ -39,7 +16,6 @@ class XYPlotRenderer extends WiggleBaseRenderer_1.default {
         const pivotValue = (0, configuration_1.readConfObject)(config, 'bicolorPivotValue');
         const negColor = (0, configuration_1.readConfObject)(config, 'negColor');
         const posColor = (0, configuration_1.readConfObject)(config, 'posColor');
-        const Color = await Promise.resolve().then(() => __importStar(require('color'))).then(f => f.default);
         return (0, drawxy_1.drawXY)(ctx, {
             ...props,
             colorCallback: (0, configuration_1.readConfObject)(config, 'color') === '#f0f'
@@ -47,7 +23,6 @@ class XYPlotRenderer extends WiggleBaseRenderer_1.default {
                 : (feature, _score) => (0, configuration_1.readConfObject)(config, 'color', { feature }),
             offset: util_1.YSCALEBAR_LABEL_OFFSET,
             features: [...features.values()],
-            Color,
         });
     }
 }

package/dist/drawxy.d.ts

@@ -14,7 +14,6 @@ export declare function drawXY(ctx: CanvasRenderingContext2D, props: {
     displayCrossHatches: boolean;
     offset?: number;
     colorCallback: (f: Feature, score: number) => string;
-    Color: typeof import('color');
 }): {
     reducedFeatures: Feature[];
 };

package/dist/drawxy.js

@@ -2,7 +2,18 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.drawDensity = exports.drawLine = exports.drawXY = void 0;
 const configuration_1 = require("@jbrowse/core/configuration");
+const colord_1 = require("@jbrowse/core/util/colord");
 const util_1 = require("@jbrowse/core/util");
+function lighten(color, amount) {
+    const hslColor = color.toHsl();
+    const l = hslColor.l * (1 + amount);
+    return (0, colord_1.colord)({ ...hslColor, l: (0, util_1.clamp)(l, 0, 100) });
+}
+function darken(color, amount) {
+    const hslColor = color.toHsl();
+    const l = hslColor.l * (1 - amount);
+    return (0, colord_1.colord)({ ...hslColor, l: (0, util_1.clamp)(l, 0, 100) });
+}
 // locals
 const util_2 = require("./util");
 // avoid drawing negative width features for SVG exports
@@ -20,10 +31,10 @@ function fillRectCtx(x, y, width, height, ctx, color) {
     }
     ctx.fillRect(x, y, width, height);
 }
-const fudgeFactor = 0.4;
+const fudgeFactor = 0.3;
 const clipHeight = 2;
 function drawXY(ctx, props) {
-    const { features, bpPerPx, regions, scaleOpts, height: unadjustedHeight, config, ticks, displayCrossHatches, offset = 0, colorCallback, Color, } = props;
+    const { features, bpPerPx, regions, scaleOpts, height: unadjustedHeight, config, ticks, displayCrossHatches, offset = 0, colorCallback, } = props;
     const [region] = regions;
     const width = (region.end - region.start) / bpPerPx;
     // the adjusted height takes into account YSCALEBAR_LABEL_OFFSET from the
@@ -61,7 +72,7 @@ function drawXY(ctx, props) {
                     ? c
                     : c === lastCol
                         ? lastMix
-                        : (lastMix = Color(c).lighten(0.4).toString());
+                        : (lastMix = lighten((0, colord_1.colord)(c), 0.4).toHex());
                 fillRectCtx(leftPx, toY(max), w, getHeight(max), ctx, effectiveC);
                 lastCol = c;
             }
@@ -78,8 +89,8 @@ function drawXY(ctx, props) {
             const effectiveC = crossingOrigin && summary
                 ? c === lastCol
                     ? lastMix
-                    : (lastMix = Color(colorCallback(feature, max))
-                        .mix(Color(colorCallback(feature, min)))
+                    : (lastMix = (0, colord_1.colord)(colorCallback(feature, max))
+                        .mix((0, colord_1.colord)(colorCallback(feature, min)))
                         .toString())
                 : c;
             const w = Math.max(rightPx - leftPx + fudgeFactor, minSize);
@@ -104,7 +115,7 @@ function drawXY(ctx, props) {
                     ? c
                     : c === lastCol
                         ? lastMix
-                        : (lastMix = Color(c).darken(0.4).toString());
+                        : (lastMix = darken((0, colord_1.colord)(c), 0.4).toHex());
                 fillRectCtx(leftPx, toY(min), w, getHeight(min), ctx, effectiveC);
                 lastCol = c;
             }

package/dist/shared/YScaleBar.d.ts

@@ -1,10 +1,10 @@
 import React from 'react';
 import { axisPropsFromTickScale } from 'react-d3-axis-mod';
 type Ticks = ReturnType<typeof axisPropsFromTickScale>;
-declare const _default: ({ model, orientation, }: {
+declare const YScaleBar: ({ model, orientation, }: {
     model: {
         ticks?: Ticks;
     };
     orientation?: string | undefined;
 }) => React.JSX.Element | null;
-export default _default;
+export default YScaleBar;

package/dist/shared/YScaleBar.js

@@ -7,8 +7,9 @@ const react_1 = __importDefault(require("react"));
 const material_1 = require("@mui/material");
 const mobx_react_1 = require("mobx-react");
 const react_d3_axis_mod_1 = require("react-d3-axis-mod");
-exports.default = (0, mobx_react_1.observer)(function YScaleBar({ model, orientation, }) {
+const YScaleBar = (0, mobx_react_1.observer)(function ({ model, orientation, }) {
     const { ticks } = model;
     const theme = (0, material_1.useTheme)();
     return ticks ? (react_1.default.createElement(react_d3_axis_mod_1.Axis, { ...ticks, shadow: 2, format: (n) => n, style: { orient: orientation === 'left' ? react_d3_axis_mod_1.LEFT : react_d3_axis_mod_1.RIGHT }, bg: theme.palette.background.default, fg: theme.palette.text.primary })) : null;
 });
+exports.default = YScaleBar;

package/dist/shared/modelShared.d.ts

@@ -247,7 +247,10 @@ export default function SharedWiggleMixin(configSchema: AnyConfigurationSchemaTy
     readonly regionTooLargeReason: string;
 } & {
     regionCannotBeRenderedText(_region: import("@jbrowse/core/util").Region): "" | "Force load to see features";
-    regionCannotBeRendered(_region: import("@jbrowse/core/util").Region): import("react").JSX.Element | null;
+    regionCannotBeRendered(_region: import("@jbrowse/core/util").Region): import("react").JSX.Element | null; /**
+     * #getter
+     * subclasses can define these, as snpcoverage track does
+     */
 } & {
     featureIdUnderMouse: string | undefined;
     contextMenuFeature: Feature | undefined;