@jbrowse/plugin-wiggle 2.7.0 → 2.7.2

package/dist/DensityRenderer/DensityRenderer.js

@@ -3,11 +3,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const drawxy_1 = require("../drawxy");
+const drawDensity_1 = require("../drawDensity");
 const WiggleBaseRenderer_1 = __importDefault(require("../WiggleBaseRenderer"));
 class DensityRenderer extends WiggleBaseRenderer_1.default {
     async draw(ctx, props) {
-        return (0, drawxy_1.drawDensity)(ctx, props);
+        return (0, drawDensity_1.drawDensity)(ctx, props);
     }
 }
 exports.default = DensityRenderer;

package/dist/LinePlotRenderer/LinePlotRenderer.js

@@ -5,10 +5,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const WiggleBaseRenderer_1 = __importDefault(require("../WiggleBaseRenderer"));
 const util_1 = require("../util");
-const drawxy_1 = require("../drawxy");
+const drawLine_1 = require("../drawLine");
 class LinePlotRenderer extends WiggleBaseRenderer_1.default {
     async draw(ctx, props) {
-        return (0, drawxy_1.drawLine)(ctx, {
+        return (0, drawLine_1.drawLine)(ctx, {
             ...props,
             offset: util_1.YSCALEBAR_LABEL_OFFSET,
             colorCallback: () => 'grey',

package/dist/MultiDensityRenderer/MultiDensityRenderer.js

@@ -5,23 +5,20 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const util_1 = require("@jbrowse/core/util");
 const WiggleBaseRenderer_1 = __importDefault(require("../WiggleBaseRenderer"));
-const drawxy_1 = require("../drawxy");
+const drawDensity_1 = require("../drawDensity");
 class MultiXYPlotRenderer extends WiggleBaseRenderer_1.default {
     // @ts-expect-error
     async draw(ctx, props) {
         const { bpPerPx, sources, regions, features } = props;
         const [region] = regions;
-        const groups = (0, util_1.groupBy)([...features.values()], f => f.get('source'));
+        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;
         let feats = [];
         ctx.save();
         sources.forEach(source => {
-            const features = groups[source.name];
-            if (!features) {
-                return;
-            }
-            const { reducedFeatures } = (0, drawxy_1.drawDensity)(ctx, {
+            const features = groups[source.name] || [];
+            const { reducedFeatures } = (0, drawDensity_1.drawDensity)(ctx, {
                 ...props,
                 features,
                 height,
@@ -32,7 +29,7 @@ class MultiXYPlotRenderer extends WiggleBaseRenderer_1.default {
             ctx.lineTo(width, height);
             ctx.stroke();
             ctx.translate(0, height);
-            feats = [...feats, ...reducedFeatures];
+            feats = feats.concat(reducedFeatures);
         });
         ctx.restore();
         return { reducedFeatures: feats };

package/dist/MultiLineRenderer/MultiLineRenderer.js

@@ -4,25 +4,21 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const util_1 = require("@jbrowse/core/util");
-const drawxy_1 = require("../drawxy");
+const drawLine_1 = require("../drawLine");
 const WiggleBaseRenderer_1 = __importDefault(require("../WiggleBaseRenderer"));
 class MultiLineRenderer extends WiggleBaseRenderer_1.default {
     // @ts-expect-error
     async draw(ctx, props) {
         const { sources, features } = props;
-        const groups = (0, util_1.groupBy)([...features.values()], f => f.get('source'));
+        const groups = (0, util_1.groupBy)(features.values(), f => f.get('source'));
         let feats = [];
         sources.forEach(source => {
-            const features = groups[source.name];
-            if (!features) {
-                return;
-            }
-            const { reducedFeatures } = (0, drawxy_1.drawLine)(ctx, {
+            const { reducedFeatures } = (0, drawLine_1.drawLine)(ctx, {
                 ...props,
-                features,
+                features: groups[source.name] || [],
                 colorCallback: () => source.color || 'blue',
             });
-            feats = [...feats, ...reducedFeatures];
+            feats = feats.concat(reducedFeatures);
         });
         return { reducedFeatures: feats };
     }

package/dist/MultiLinearWiggleDisplay/components/SetColorDialog.js

@@ -30,27 +30,14 @@ const react_1 = __importStar(require("react"));
 const material_1 = require("@mui/material");
 const mui_1 = require("tss-react/mui");
 const util_1 = require("@jbrowse/core/util");
-const x_data_grid_1 = require("@mui/x-data-grid");
 const clone_1 = __importDefault(require("clone"));
 // locals
 const DraggableDialog_1 = __importDefault(require("./DraggableDialog"));
-const ColorPicker_1 = __importStar(require("@jbrowse/core/ui/ColorPicker"));
-const util_2 = require("./util");
-// icons
-const KeyboardDoubleArrowUp_1 = __importDefault(require("@mui/icons-material/KeyboardDoubleArrowUp"));
-const KeyboardDoubleArrowDown_1 = __importDefault(require("@mui/icons-material/KeyboardDoubleArrowDown"));
-const KeyboardArrowDown_1 = __importDefault(require("@mui/icons-material/KeyboardArrowDown"));
-const KeyboardArrowUp_1 = __importDefault(require("@mui/icons-material/KeyboardArrowUp"));
-const UriLink_1 = __importDefault(require("@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail/UriLink"));
+const SourcesGrid_1 = __importDefault(require("./SourcesGrid"));
 const useStyles = (0, mui_1.makeStyles)()({
     content: {
         minWidth: 800,
     },
-    cell: {
-        whiteSpace: 'nowrap',
-        overflow: 'hidden',
-        textOverflow: 'ellipsis',
-    },
 });
 function SetColorDialog({ model, handleClose, }) {
     const { classes } = useStyles();
@@ -71,7 +58,7 @@ function SetColorDialog({ model, handleClose, }) {
                     react_1.default.createElement("li", null, "Changes are applied when you hit Submit"),
                     react_1.default.createElement("li", null, "You can click and drag the dialog box to move it on the screen"),
                     react_1.default.createElement("li", null, "Columns in the table can be hidden using a vertical '...' menu on the right side of each column")))) : null,
-            react_1.default.createElement(SourcesGrid, { rows: currLayout, onChange: setCurrLayout, showTips: showTips })),
+            react_1.default.createElement(SourcesGrid_1.default, { rows: currLayout, onChange: setCurrLayout, showTips: showTips })),
         react_1.default.createElement(material_1.DialogActions, null,
             react_1.default.createElement(material_1.Button, { variant: "contained", type: "submit", color: "inherit", onClick: () => {
                     model.clearLayout();
@@ -87,90 +74,3 @@ function SetColorDialog({ model, handleClose, }) {
                 } }, "Submit"))));
 }
 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
-    const { name: _name, color: _color, baseUri: _baseUri, ...rest } = rows[0];
-    const [widgetColor, setWidgetColor] = (0, react_1.useState)('blue');
-    const [currSort, setCurrSort] = (0, react_1.useState)({
-        idx: 0,
-        field: null,
-    });
-    return (react_1.default.createElement("div", null,
-        react_1.default.createElement(material_1.Button, { disabled: !selected.length, onClick: event => setAnchorEl(event.currentTarget) }, "Change color of selected items"),
-        react_1.default.createElement(material_1.Button, { onClick: () => onChange((0, util_2.moveUp)([...rows], selected)), disabled: !selected.length },
-            react_1.default.createElement(KeyboardArrowUp_1.default, null),
-            showTips ? 'Move selected items up' : null),
-        react_1.default.createElement(material_1.Button, { onClick: () => onChange((0, util_2.moveDown)([...rows], selected)), disabled: !selected.length },
-            react_1.default.createElement(KeyboardArrowDown_1.default, null),
-            showTips ? 'Move selected items down' : null),
-        react_1.default.createElement(material_1.Button, { onClick: () => onChange((0, util_2.moveUp)([...rows], selected, rows.length)), disabled: !selected.length },
-            react_1.default.createElement(KeyboardDoubleArrowUp_1.default, null),
-            showTips ? 'Move selected items to top' : null),
-        react_1.default.createElement(material_1.Button, { onClick: () => onChange((0, util_2.moveDown)([...rows], selected, rows.length)), disabled: !selected.length },
-            react_1.default.createElement(KeyboardDoubleArrowDown_1.default, null),
-            showTips ? 'Move selected items to bottom' : null),
-        react_1.default.createElement(ColorPicker_1.ColorPopover, { anchorEl: anchorEl, color: widgetColor, onChange: c => {
-                setWidgetColor(c);
-                selected.forEach(id => {
-                    const elt = rows.find(f => f.name === id);
-                    if (elt) {
-                        elt.color = c;
-                    }
-                });
-                onChange([...rows]);
-            }, onClose: () => setAnchorEl(null) }),
-        react_1.default.createElement("div", { style: { height: 400, width: '100%' } },
-            react_1.default.createElement(x_data_grid_1.DataGrid, { getRowId: row => row.name, checkboxSelection: true, disableRowSelectionOnClick: true, onRowSelectionModelChange: arg => setSelected(arg), rows: rows, rowHeight: 25, columnHeaderHeight: 33, columns: [
-                    {
-                        field: 'color',
-                        headerName: 'Color',
-                        renderCell: params => {
-                            const { value, id } = params;
-                            return (react_1.default.createElement(ColorPicker_1.default, { color: value || 'blue', onChange: c => {
-                                    const elt = rows.find(f => f.name === id);
-                                    if (elt) {
-                                        elt.color = c;
-                                    }
-                                    onChange([...rows]);
-                                } }));
-                        },
-                    },
-                    {
-                        field: 'name',
-                        sortingOrder: [null],
-                        headerName: 'Name',
-                        width: (0, util_1.measureGridWidth)(rows.map(r => r.name)),
-                    },
-                    ...Object.keys(rest).map(val => ({
-                        field: val,
-                        sortingOrder: [null],
-                        renderCell: (params) => {
-                            const { value } = params;
-                            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])),
-                    })),
-                ], sortModel: [
-                /* we control the sort as a controlled component using onSortModelChange */
-                ], onSortModelChange: args => {
-                    const sort = args[0];
-                    const idx = (currSort.idx + 1) % 2;
-                    const field = (sort === null || sort === void 0 ? void 0 : sort.field) || currSort.field;
-                    setCurrSort({ idx, field });
-                    onChange(field
-                        ? [...rows].sort((a, b) => {
-                            // @ts-expect-error
-                            const aa = (0, util_1.getStr)(a[field]);
-                            // @ts-expect-error
-                            const bb = (0, util_1.getStr)(b[field]);
-                            return idx === 1
-                                ? aa.localeCompare(bb)
-                                : bb.localeCompare(aa);
-                        })
-                        : rows);
-                } }))));
-}

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import { Source } from '../../util';
+declare function SourcesGrid({ rows, onChange, showTips, }: {
+    rows: Source[];
+    onChange: (arg: Source[]) => void;
+    showTips: boolean;
+}): React.JSX.Element;
+export default SourcesGrid;

package/dist/MultiLinearWiggleDisplay/components/SourcesGrid.js

@@ -0,0 +1,138 @@
+"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 };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const material_1 = require("@mui/material");
+const util_1 = require("@jbrowse/core/util");
+const x_data_grid_1 = require("@mui/x-data-grid");
+const mui_1 = require("tss-react/mui");
+// locals
+const ColorPicker_1 = __importStar(require("@jbrowse/core/ui/ColorPicker"));
+const util_2 = require("./util");
+// icons
+const KeyboardDoubleArrowUp_1 = __importDefault(require("@mui/icons-material/KeyboardDoubleArrowUp"));
+const KeyboardDoubleArrowDown_1 = __importDefault(require("@mui/icons-material/KeyboardDoubleArrowDown"));
+const KeyboardArrowDown_1 = __importDefault(require("@mui/icons-material/KeyboardArrowDown"));
+const KeyboardArrowUp_1 = __importDefault(require("@mui/icons-material/KeyboardArrowUp"));
+const ui_1 = require("@jbrowse/core/ui");
+const useStyles = (0, mui_1.makeStyles)()({
+    cell: {
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+    },
+});
+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
+    const { name: _name, color: _color, baseUri: _baseUri, ...rest } = rows[0];
+    const [widgetColor, setWidgetColor] = (0, react_1.useState)('blue');
+    const [currSort, setCurrSort] = (0, react_1.useState)({
+        idx: 0,
+        field: null,
+    });
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement(material_1.Button, { disabled: !selected.length, onClick: event => setAnchorEl(event.currentTarget) }, "Change color of selected items"),
+        react_1.default.createElement(material_1.Button, { onClick: () => onChange((0, util_2.moveUp)([...rows], selected)), disabled: !selected.length },
+            react_1.default.createElement(KeyboardArrowUp_1.default, null),
+            showTips ? 'Move selected items up' : null),
+        react_1.default.createElement(material_1.Button, { onClick: () => onChange((0, util_2.moveDown)([...rows], selected)), disabled: !selected.length },
+            react_1.default.createElement(KeyboardArrowDown_1.default, null),
+            showTips ? 'Move selected items down' : null),
+        react_1.default.createElement(material_1.Button, { onClick: () => onChange((0, util_2.moveUp)([...rows], selected, rows.length)), disabled: !selected.length },
+            react_1.default.createElement(KeyboardDoubleArrowUp_1.default, null),
+            showTips ? 'Move selected items to top' : null),
+        react_1.default.createElement(material_1.Button, { onClick: () => onChange((0, util_2.moveDown)([...rows], selected, rows.length)), disabled: !selected.length },
+            react_1.default.createElement(KeyboardDoubleArrowDown_1.default, null),
+            showTips ? 'Move selected items to bottom' : null),
+        react_1.default.createElement(ColorPicker_1.ColorPopover, { anchorEl: anchorEl, color: widgetColor, onChange: c => {
+                setWidgetColor(c);
+                selected.forEach(id => {
+                    const elt = rows.find(f => f.name === id);
+                    if (elt) {
+                        elt.color = c;
+                    }
+                });
+                onChange([...rows]);
+            }, onClose: () => setAnchorEl(null) }),
+        react_1.default.createElement("div", { style: { height: 400, width: '100%' } },
+            react_1.default.createElement(x_data_grid_1.DataGrid, { getRowId: row => row.name, checkboxSelection: true, disableRowSelectionOnClick: true, onRowSelectionModelChange: arg => setSelected(arg), rows: rows, rowHeight: 25, columnHeaderHeight: 33, columns: [
+                    {
+                        field: 'color',
+                        headerName: 'Color',
+                        renderCell: params => {
+                            const { value, id } = params;
+                            return (react_1.default.createElement(ColorPicker_1.default, { color: value || 'blue', onChange: c => {
+                                    const elt = rows.find(f => f.name === id);
+                                    if (elt) {
+                                        elt.color = c;
+                                    }
+                                    onChange([...rows]);
+                                } }));
+                        },
+                    },
+                    {
+                        field: 'name',
+                        sortingOrder: [null],
+                        headerName: 'Name',
+                        width: (0, util_1.measureGridWidth)(rows.map(r => r.name)),
+                    },
+                    ...Object.keys(rest).map(val => ({
+                        field: val,
+                        sortingOrder: [null],
+                        renderCell: (params) => {
+                            const { value } = params;
+                            return (react_1.default.createElement("div", { className: classes.cell },
+                                react_1.default.createElement(ui_1.SanitizedHTML, { html: (0, util_1.getStr)(value) })));
+                        },
+                        // @ts-ignore
+                        width: (0, util_1.measureGridWidth)(rows.map(r => r[val])),
+                    })),
+                ], sortModel: [
+                /* we control the sort as a controlled component using onSortModelChange */
+                ], onSortModelChange: args => {
+                    const sort = args[0];
+                    const idx = (currSort.idx + 1) % 2;
+                    const field = (sort === null || sort === void 0 ? void 0 : sort.field) || currSort.field;
+                    setCurrSort({ idx, field });
+                    onChange(field
+                        ? [...rows].sort((a, b) => {
+                            // @ts-expect-error
+                            const aa = (0, util_1.getStr)(a[field]);
+                            // @ts-expect-error
+                            const bb = (0, util_1.getStr)(b[field]);
+                            return idx === 1
+                                ? aa.localeCompare(bb)
+                                : bb.localeCompare(aa);
+                        })
+                        : rows);
+                } }))));
+}
+exports.default = SourcesGrid;

package/dist/MultiRowLineRenderer/MultiRowLineRenderer.js

@@ -4,22 +4,22 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const util_1 = require("@jbrowse/core/util");
-const drawxy_1 = require("../drawxy");
+const drawLine_1 = require("../drawLine");
 const WiggleBaseRenderer_1 = __importDefault(require("../WiggleBaseRenderer"));
 class MultiRowLineRenderer extends WiggleBaseRenderer_1.default {
     // @ts-expect-error
     async draw(ctx, props) {
         const { bpPerPx, sources, regions, features } = props;
         const [region] = regions;
-        const groups = (0, util_1.groupBy)([...features.values()], f => f.get('source'));
+        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;
         let feats = [];
         ctx.save();
         sources.forEach(source => {
-            const { reducedFeatures } = (0, drawxy_1.drawLine)(ctx, {
+            const { reducedFeatures } = (0, drawLine_1.drawLine)(ctx, {
                 ...props,
-                features: groups[source.name],
+                features: groups[source.name] || [],
                 height,
                 colorCallback: () => source.color || 'blue',
             });
@@ -29,7 +29,7 @@ class MultiRowLineRenderer extends WiggleBaseRenderer_1.default {
             ctx.lineTo(width, height);
             ctx.stroke();
             ctx.translate(0, height);
-            feats = [...feats, ...reducedFeatures];
+            feats = feats.concat(reducedFeatures);
         });
         ctx.restore();
         return { reducedFeatures: feats };

package/dist/MultiRowXYPlotRenderer/MultiRowXYPlotRenderer.js

@@ -4,26 +4,22 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const util_1 = require("@jbrowse/core/util");
-const drawxy_1 = require("../drawxy");
+const drawXY_1 = require("../drawXY");
 const WiggleBaseRenderer_1 = __importDefault(require("../WiggleBaseRenderer"));
 class MultiXYPlotRenderer extends WiggleBaseRenderer_1.default {
     // @ts-expect-error
     async draw(ctx, props) {
         const { bpPerPx, sources, regions, features } = props;
         const [region] = regions;
-        const groups = (0, util_1.groupBy)([...features.values()], f => f.get('source'));
+        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;
         let feats = [];
         ctx.save();
         sources.forEach(source => {
-            const features = groups[source.name];
-            if (!features) {
-                return;
-            }
-            const { reducedFeatures } = (0, drawxy_1.drawXY)(ctx, {
+            const { reducedFeatures } = (0, drawXY_1.drawXY)(ctx, {
                 ...props,
-                features,
+                features: groups[source.name] || [],
                 height,
                 colorCallback: () => source.color || 'blue',
             });
@@ -33,7 +29,7 @@ class MultiXYPlotRenderer extends WiggleBaseRenderer_1.default {
             ctx.lineTo(width, height);
             ctx.stroke();
             ctx.translate(0, height);
-            feats = [...feats, ...reducedFeatures];
+            feats = feats.concat(reducedFeatures);
         });
         ctx.restore();
         return { reducedFeatures: feats };

package/dist/MultiXYPlotRenderer/MultiXYPlotRenderer.js

@@ -4,27 +4,24 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const util_1 = require("@jbrowse/core/util");
-const drawxy_1 = require("../drawxy");
+const drawXY_1 = require("../drawXY");
 const util_2 = require("../util");
 const WiggleBaseRenderer_1 = __importDefault(require("../WiggleBaseRenderer"));
 class MultiXYPlotRenderer extends WiggleBaseRenderer_1.default {
     // @ts-expect-error
     async draw(ctx, props) {
         const { sources, features } = props;
-        const groups = (0, util_1.groupBy)([...features.values()], f => f.get('source'));
+        const groups = (0, util_1.groupBy)(features.values(), f => f.get('source'));
         let feats = [];
         for (const source of sources) {
-            const features = groups[source.name];
-            if (!features) {
-                continue;
-            }
-            const { reducedFeatures } = (0, drawxy_1.drawXY)(ctx, {
+            const features = groups[source.name] || [];
+            const { reducedFeatures } = (0, drawXY_1.drawXY)(ctx, {
                 ...props,
                 features,
                 offset: util_2.YSCALEBAR_LABEL_OFFSET,
                 colorCallback: () => source.color || 'blue',
             });
-            feats = [...feats, ...reducedFeatures];
+            feats = feats.concat(reducedFeatures);
         }
         return { reducedFeatures: feats };
     }

package/dist/Tooltip.js

@@ -58,6 +58,8 @@ const useStyles = (0, mui_1.makeStyles)()(theme => ({
     },
 }));
 const Tooltip = (0, mobx_react_1.observer)(function Tooltip({ model, height, clientMouseCoord, offsetMouseCoord, clientRect, TooltipContents, useClientY, }) {
+    var _a, _b;
+    const theme = (0, material_1.useTheme)();
     const { featureUnderMouse } = model;
     const [width, setWidth] = (0, react_1.useState)(0);
     const [anchorEl, setAnchorEl] = (0, react_1.useState)(null);
@@ -81,8 +83,9 @@ const Tooltip = (0, mobx_react_1.observer)(function Tooltip({ model, height, cli
         },
     }), [clientRect === null || clientRect === void 0 ? void 0 : clientRect.top, clientMouseCoord, width, useClientY]);
     const { styles, attributes } = (0, react_popper_1.usePopper)(virtElement, anchorEl);
+    const popperTheme = (_a = theme === null || theme === void 0 ? void 0 : theme.components) === null || _a === void 0 ? void 0 : _a.MuiPopper;
     return featureUnderMouse ? (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(material_1.Portal, null,
+        react_1.default.createElement(material_1.Portal, { container: (_b = popperTheme === null || popperTheme === void 0 ? void 0 : popperTheme.defaultProps) === null || _b === void 0 ? void 0 : _b.container },
             react_1.default.createElement("div", { ref: setAnchorEl, className: classes.tooltip, 
                 // zIndex needed to go over widget drawer
                 style: { ...styles.popper, zIndex: 100000 }, ...attributes.popper },

package/dist/XYPlotRenderer/XYPlotRenderer.js

@@ -4,7 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const configuration_1 = require("@jbrowse/core/configuration");
-const drawxy_1 = require("../drawxy");
+const drawXY_1 = require("../drawXY");
 const WiggleBaseRenderer_1 = __importDefault(require("../WiggleBaseRenderer"));
 const util_1 = require("../util");
 class XYPlotRenderer extends WiggleBaseRenderer_1.default {
@@ -16,7 +16,7 @@ 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');
-        return (0, drawxy_1.drawXY)(ctx, {
+        return (0, drawXY_1.drawXY)(ctx, {
             ...props,
             colorCallback: (0, configuration_1.readConfObject)(config, 'color') === '#f0f'
                 ? (_, score) => score < pivotValue ? negColor : posColor

package/dist/drawDensity.d.ts

@@ -0,0 +1,17 @@
+import { AnyConfigurationModel } from '@jbrowse/core/configuration';
+import { Feature, Region } from '@jbrowse/core/util';
+import { ScaleOpts } from './util';
+export declare function drawDensity(ctx: CanvasRenderingContext2D, props: {
+    features: Map<string, Feature> | Feature[];
+    regions: Region[];
+    bpPerPx: number;
+    scaleOpts: ScaleOpts;
+    height: number;
+    ticks: {
+        values: number[];
+    };
+    displayCrossHatches: boolean;
+    config: AnyConfigurationModel;
+}): {
+    reducedFeatures: Feature[];
+};

package/dist/drawDensity.js

@@ -0,0 +1,66 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.drawDensity = void 0;
+const configuration_1 = require("@jbrowse/core/configuration");
+const util_1 = require("@jbrowse/core/util");
+// locals
+const util_2 = require("./util");
+const fudgeFactor = 0.3;
+const clipHeight = 2;
+function drawDensity(ctx, props) {
+    const { features, regions, bpPerPx, scaleOpts, height, config } = props;
+    const [region] = regions;
+    const pivot = (0, configuration_1.readConfObject)(config, 'bicolorPivot');
+    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 = (0, configuration_1.readConfObject)(config, 'color');
+    const clipColor = (0, configuration_1.readConfObject)(config, 'clipColor');
+    const crossing = pivot !== 'none' && scaleOpts.scaleType !== 'log';
+    const scale = (0, util_2.getScale)({
+        ...scaleOpts,
+        pivotValue: crossing ? pivotValue : undefined,
+        range: crossing ? [negColor, 'white', posColor] : ['white', posColor],
+    });
+    const scale2 = (0, util_2.getScale)({ ...scaleOpts, range: [0, height] });
+    const cb = color === '#f0f'
+        ? (_, score) => scale(score)
+        : (feature, score) => (0, configuration_1.readConfObject)(config, 'color', { feature, score });
+    const [niceMin, niceMax] = scale2.domain();
+    let prevLeftPx = -Infinity;
+    let hasClipping = false;
+    const reducedFeatures = [];
+    for (const feature of features.values()) {
+        const [leftPx, rightPx] = (0, util_1.featureSpanPx)(feature, region, bpPerPx);
+        // create reduced features, avoiding multiple features per px
+        if (Math.floor(leftPx) !== Math.floor(prevLeftPx)) {
+            reducedFeatures.push(feature);
+            prevLeftPx = leftPx;
+        }
+        const score = feature.get('score');
+        hasClipping = hasClipping || score > niceMax || score < niceMin;
+        const w = rightPx - leftPx + fudgeFactor;
+        ctx.fillStyle = cb(feature, score);
+        ctx.fillRect(leftPx, 0, w, height);
+    }
+    // second pass: draw clipping
+    // avoid persisting the red fillstyle with save/restore
+    ctx.save();
+    if (hasClipping) {
+        ctx.fillStyle = clipColor;
+        for (const feature of features.values()) {
+            const [leftPx, rightPx] = (0, util_1.featureSpanPx)(feature, region, bpPerPx);
+            const w = rightPx - leftPx + fudgeFactor;
+            const score = feature.get('score');
+            if (score > niceMax) {
+                (0, util_2.fillRectCtx)(leftPx, 0, w, clipHeight, ctx);
+            }
+            else if (score < niceMin && scaleOpts.scaleType !== 'log') {
+                (0, util_2.fillRectCtx)(leftPx, 0, w, clipHeight, ctx);
+            }
+        }
+    }
+    ctx.restore();
+    return { reducedFeatures };
+}
+exports.drawDensity = drawDensity;

package/dist/drawLine.d.ts

@@ -0,0 +1,19 @@
+import { AnyConfigurationModel } from '@jbrowse/core/configuration';
+import { Feature, Region } from '@jbrowse/core/util';
+import { ScaleOpts } from './util';
+export declare function drawLine(ctx: CanvasRenderingContext2D, props: {
+    features: Map<string, Feature> | Feature[];
+    regions: Region[];
+    bpPerPx: number;
+    scaleOpts: ScaleOpts;
+    height: number;
+    ticks: {
+        values: number[];
+    };
+    displayCrossHatches: boolean;
+    colorCallback: (f: Feature, score: number) => string;
+    config: AnyConfigurationModel;
+    offset?: number;
+}): {
+    reducedFeatures: Feature[];
+};