@jbrowse/plugin-wiggle 2.6.3 → 2.7.1

package/esm/MultiLinearWiggleDisplay/components/SourcesGrid.js

@@ -0,0 +1,110 @@
+import React, { useState } from 'react';
+import { Button } from '@mui/material';
+import { getStr, measureGridWidth } from '@jbrowse/core/util';
+import { DataGrid } from '@mui/x-data-grid';
+import { makeStyles } from 'tss-react/mui';
+// locals
+import ColorPicker, { ColorPopover } from '@jbrowse/core/ui/ColorPicker';
+import { moveUp, moveDown } from './util';
+// icons
+import KeyboardDoubleArrowUpIcon from '@mui/icons-material/KeyboardDoubleArrowUp';
+import KeyboardDoubleArrowDownIcon from '@mui/icons-material/KeyboardDoubleArrowDown';
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
+import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
+import { SanitizedHTML } from '@jbrowse/core/ui';
+const useStyles = makeStyles()({
+    cell: {
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+    },
+});
+function SourcesGrid({ rows, onChange, showTips, }) {
+    const { classes } = useStyles();
+    const [anchorEl, setAnchorEl] = useState(null);
+    const [selected, setSelected] = useState([]);
+    // @ts-expect-error
+    const { name: _name, color: _color, baseUri: _baseUri, ...rest } = rows[0];
+    const [widgetColor, setWidgetColor] = useState('blue');
+    const [currSort, setCurrSort] = useState({
+        idx: 0,
+        field: null,
+    });
+    return (React.createElement("div", null,
+        React.createElement(Button, { disabled: !selected.length, onClick: event => setAnchorEl(event.currentTarget) }, "Change color of selected items"),
+        React.createElement(Button, { onClick: () => onChange(moveUp([...rows], selected)), disabled: !selected.length },
+            React.createElement(KeyboardArrowUpIcon, null),
+            showTips ? 'Move selected items up' : null),
+        React.createElement(Button, { onClick: () => onChange(moveDown([...rows], selected)), disabled: !selected.length },
+            React.createElement(KeyboardArrowDownIcon, null),
+            showTips ? 'Move selected items down' : null),
+        React.createElement(Button, { onClick: () => onChange(moveUp([...rows], selected, rows.length)), disabled: !selected.length },
+            React.createElement(KeyboardDoubleArrowUpIcon, null),
+            showTips ? 'Move selected items to top' : null),
+        React.createElement(Button, { onClick: () => onChange(moveDown([...rows], selected, rows.length)), disabled: !selected.length },
+            React.createElement(KeyboardDoubleArrowDownIcon, null),
+            showTips ? 'Move selected items to bottom' : null),
+        React.createElement(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.createElement("div", { style: { height: 400, width: '100%' } },
+            React.createElement(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.createElement(ColorPicker, { 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: measureGridWidth(rows.map(r => r.name)),
+                    },
+                    ...Object.keys(rest).map(val => ({
+                        field: val,
+                        sortingOrder: [null],
+                        renderCell: (params) => {
+                            const { value } = params;
+                            return (React.createElement("div", { className: classes.cell },
+                                React.createElement(SanitizedHTML, { html: getStr(value) })));
+                        },
+                        // @ts-ignore
+                        width: 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 = getStr(a[field]);
+                            // @ts-expect-error
+                            const bb = getStr(b[field]);
+                            return idx === 1
+                                ? aa.localeCompare(bb)
+                                : bb.localeCompare(aa);
+                        })
+                        : rows);
+                } }))));
+}
+export default SourcesGrid;

package/esm/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/esm/MultiLinearWiggleDisplay/components/Tooltip.js

@@ -4,7 +4,7 @@ import { observer } from 'mobx-react';
 import { toP } from '../../util';
 import Tooltip from '../../Tooltip';
 const en = (n) => n.toLocaleString('en-US');
-const TooltipContents = React.forwardRef(({ model, feature }, ref) => {
+const TooltipContents = React.forwardRef(function TooltipContents2({ model, feature }, ref) {
     const start = feature.get('start');
     const end = feature.get('end');
     const refName = feature.get('refName');

package/esm/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/esm/MultiLinearWiggleDisplay/components/WiggleDisplayComponent.js

@@ -2,10 +2,10 @@ import React from 'react';
 import { BaseLinearDisplayComponent } from '@jbrowse/plugin-linear-genome-view';
 import { observer } from 'mobx-react';
 import YScaleBars from './YScaleBars';
-export default observer((props) => {
+const MultiLinearWiggleDisplayComponent = observer((props) => {
     const { model } = props;
     return (React.createElement("div", null,
         React.createElement(BaseLinearDisplayComponent, { ...props }),
         React.createElement(YScaleBars, { model: model })));
 });
-export { default as YScaleBar } from '../../shared/YScaleBar';
+export default MultiLinearWiggleDisplayComponent;

package/esm/MultiLinearWiggleDisplay/components/util.js

@@ -5,8 +5,7 @@ export 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]);
@@ -20,8 +19,7 @@ export 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/esm/MultiRowLineRenderer/MultiRowLineRenderer.js

@@ -1,12 +1,12 @@
 import { groupBy } from '@jbrowse/core/util';
-import { drawLine } from '../drawxy';
+import { drawLine } from '../drawLine';
 import WiggleBaseRenderer from '../WiggleBaseRenderer';
 export default class MultiRowLineRenderer extends WiggleBaseRenderer {
     // @ts-expect-error
     async draw(ctx, props) {
         const { bpPerPx, sources, regions, features } = props;
         const [region] = regions;
-        const groups = groupBy([...features.values()], f => f.get('source'));
+        const groups = groupBy(features.values(), f => f.get('source'));
         const height = props.height / sources.length;
         const width = (region.end - region.start) / bpPerPx;
         let feats = [];
@@ -14,7 +14,7 @@ export default class MultiRowLineRenderer extends WiggleBaseRenderer {
         sources.forEach(source => {
             const { reducedFeatures } = drawLine(ctx, {
                 ...props,
-                features: groups[source.name],
+                features: groups[source.name] || [],
                 height,
                 colorCallback: () => source.color || 'blue',
             });
@@ -24,7 +24,7 @@ export default class MultiRowLineRenderer extends WiggleBaseRenderer {
             ctx.lineTo(width, height);
             ctx.stroke();
             ctx.translate(0, height);
-            feats = [...feats, ...reducedFeatures];
+            feats = feats.concat(reducedFeatures);
         });
         ctx.restore();
         return { reducedFeatures: feats };

package/esm/MultiRowXYPlotRenderer/MultiRowXYPlotRenderer.js

@@ -1,28 +1,22 @@
 import { groupBy } from '@jbrowse/core/util';
-import { drawXY } from '../drawxy';
+import { drawXY } from '../drawXY';
 import WiggleBaseRenderer from '../WiggleBaseRenderer';
 export default class MultiXYPlotRenderer extends WiggleBaseRenderer {
     // @ts-expect-error
     async draw(ctx, props) {
         const { bpPerPx, sources, regions, features } = props;
         const [region] = regions;
-        const groups = groupBy([...features.values()], f => f.get('source'));
+        const groups = groupBy(features.values(), f => f.get('source'));
         const height = props.height / sources.length;
         const width = (region.end - region.start) / bpPerPx;
-        const Color = await import('color').then(f => f.default);
         let feats = [];
         ctx.save();
         sources.forEach(source => {
-            const features = groups[source.name];
-            if (!features) {
-                return;
-            }
             const { reducedFeatures } = drawXY(ctx, {
                 ...props,
-                features,
+                features: groups[source.name] || [],
                 height,
                 colorCallback: () => source.color || 'blue',
-                Color,
             });
             ctx.strokeStyle = 'rgba(200,200,200,0.8)';
             ctx.beginPath();
@@ -30,7 +24,7 @@ export default class MultiXYPlotRenderer extends WiggleBaseRenderer {
             ctx.lineTo(width, height);
             ctx.stroke();
             ctx.translate(0, height);
-            feats = [...feats, ...reducedFeatures];
+            feats = feats.concat(reducedFeatures);
         });
         ctx.restore();
         return { reducedFeatures: feats };

package/esm/MultiWiggleAddTrackWidget/AddTrackWorkflow.js

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { Button, Paper, TextField } from '@mui/material';
 import { makeStyles } from 'tss-react/mui';
-import { getSession, isElectron } from '@jbrowse/core/util';
+import { getSession, isElectron, isSessionModelWithWidgets, isSessionWithAddTracks, } from '@jbrowse/core/util';
 import { storeBlobLocation } from '@jbrowse/core/util/tracks';
 const useStyles = makeStyles()(theme => ({
     textbox: {
@@ -60,19 +60,23 @@ export default 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 (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 (isSessionModelWithWidgets(session)) {
+                    session.hideWidget(model);
+                }
             } }, "Submit"),
         React.createElement("p", null, "Additional notes: "),
         React.createElement("ul", null,

package/esm/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/esm/MultiWiggleRendering.js

@@ -2,7 +2,7 @@ import { observer } from 'mobx-react';
 import React, { useRef } from 'react';
 import { SimpleFeature } from '@jbrowse/core/util';
 import { PrerenderedCanvas } from '@jbrowse/core/ui';
-function WiggleRendering(props) {
+const MultiWiggleRendering = observer(function (props) {
     const { regions, features, bpPerPx, width, height, sources, onMouseLeave = () => { }, onMouseMove = () => { }, onFeatureClick = () => { }, displayModel, } = props;
     const [region] = regions;
     const ref = useRef(null);
@@ -59,10 +59,12 @@ function WiggleRendering(props) {
         return featureUnderMouse;
     }
     return (React.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',
@@ -70,5 +72,5 @@ function WiggleRendering(props) {
             height,
         } },
         React.createElement(PrerenderedCanvas, { ...props })));
-}
-export default observer(WiggleRendering);
+});
+export default MultiWiggleRendering;

package/esm/MultiXYPlotRenderer/MultiXYPlotRenderer.js

@@ -1,27 +1,22 @@
 import { groupBy } from '@jbrowse/core/util';
-import { drawXY } from '../drawxy';
+import { drawXY } from '../drawXY';
 import { YSCALEBAR_LABEL_OFFSET } from '../util';
 import WiggleBaseRenderer from '../WiggleBaseRenderer';
 export default class MultiXYPlotRenderer extends WiggleBaseRenderer {
     // @ts-expect-error
     async draw(ctx, props) {
         const { sources, features } = props;
-        const groups = groupBy([...features.values()], f => f.get('source'));
-        const Color = await import('color').then(f => f.default);
+        const groups = groupBy(features.values(), f => f.get('source'));
         let feats = [];
         for (const source of sources) {
-            const features = groups[source.name];
-            if (!features) {
-                continue;
-            }
+            const features = groups[source.name] || [];
             const { reducedFeatures } = drawXY(ctx, {
                 ...props,
                 features,
                 offset: YSCALEBAR_LABEL_OFFSET,
                 colorCallback: () => source.color || 'blue',
-                Color,
             });
-            feats = [...feats, ...reducedFeatures];
+            feats = feats.concat(reducedFeatures);
         }
         return { reducedFeatures: feats };
     }

package/esm/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/esm/Tooltip.js

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

package/esm/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/esm/WiggleRendering.js

@@ -1,7 +1,7 @@
 import { observer } from 'mobx-react';
 import React, { useRef } from 'react';
 import { PrerenderedCanvas } from '@jbrowse/core/ui';
-function WiggleRendering(props) {
+const WiggleRendering = observer(function (props) {
     const { regions, features, bpPerPx, width, height, onMouseLeave = () => { }, onMouseMove = () => { }, onFeatureClick = () => { }, } = props;
     const [region] = regions;
     const ref = useRef(null);
@@ -31,5 +31,5 @@ function WiggleRendering(props) {
             height,
         } },
         React.createElement(PrerenderedCanvas, { ...props })));
-}
-export default observer(WiggleRendering);
+});
+export default WiggleRendering;

package/esm/XYPlotRenderer/XYPlotRenderer.js

@@ -1,5 +1,5 @@
 import { readConfObject } from '@jbrowse/core/configuration';
-import { drawXY } from '../drawxy';
+import { drawXY } from '../drawXY';
 import WiggleBaseRenderer from '../WiggleBaseRenderer';
 import { YSCALEBAR_LABEL_OFFSET } from '../util';
 export default class XYPlotRenderer extends WiggleBaseRenderer {
@@ -11,7 +11,6 @@ export default class XYPlotRenderer extends WiggleBaseRenderer {
         const pivotValue = readConfObject(config, 'bicolorPivotValue');
         const negColor = readConfObject(config, 'negColor');
         const posColor = readConfObject(config, 'posColor');
-        const Color = await import('color').then(f => f.default);
         return drawXY(ctx, {
             ...props,
             colorCallback: readConfObject(config, 'color') === '#f0f'
@@ -19,7 +18,6 @@ export default class XYPlotRenderer extends WiggleBaseRenderer {
                 : (feature, _score) => readConfObject(config, 'color', { feature }),
             offset: YSCALEBAR_LABEL_OFFSET,
             features: [...features.values()],
-            Color,
         });
     }
 }

package/esm/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/esm/drawDensity.js

@@ -0,0 +1,62 @@
+import { readConfObject, } from '@jbrowse/core/configuration';
+import { featureSpanPx } from '@jbrowse/core/util';
+// locals
+import { fillRectCtx, getScale } from './util';
+const fudgeFactor = 0.3;
+const clipHeight = 2;
+export function drawDensity(ctx, props) {
+    const { features, regions, bpPerPx, scaleOpts, height, config } = props;
+    const [region] = regions;
+    const pivot = readConfObject(config, 'bicolorPivot');
+    const pivotValue = readConfObject(config, 'bicolorPivotValue');
+    const negColor = readConfObject(config, 'negColor');
+    const posColor = readConfObject(config, 'posColor');
+    const color = readConfObject(config, 'color');
+    const clipColor = readConfObject(config, 'clipColor');
+    const crossing = pivot !== 'none' && scaleOpts.scaleType !== 'log';
+    const scale = getScale({
+        ...scaleOpts,
+        pivotValue: crossing ? pivotValue : undefined,
+        range: crossing ? [negColor, 'white', posColor] : ['white', posColor],
+    });
+    const scale2 = getScale({ ...scaleOpts, range: [0, height] });
+    const cb = color === '#f0f'
+        ? (_, score) => scale(score)
+        : (feature, score) => 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] = 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] = featureSpanPx(feature, region, bpPerPx);
+            const w = rightPx - leftPx + fudgeFactor;
+            const score = feature.get('score');
+            if (score > niceMax) {
+                fillRectCtx(leftPx, 0, w, clipHeight, ctx);
+            }
+            else if (score < niceMin && scaleOpts.scaleType !== 'log') {
+                fillRectCtx(leftPx, 0, w, clipHeight, ctx);
+            }
+        }
+    }
+    ctx.restore();
+    return { reducedFeatures };
+}

package/esm/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[];
+};