@jbrowse/plugin-alignments 2.13.1 → 2.15.0

package/esm/PileupRenderer/components/PileupRendering.js

@@ -2,65 +2,39 @@ import React, { useRef, useState, useEffect } from 'react';
 import { PrerenderedCanvas } from '@jbrowse/core/ui';
 import { bpSpanPx } from '@jbrowse/core/util';
 import { observer } from 'mobx-react';
-// used so that user can click-away-from-feature below the laid out features
-// (issue #1248)
-const canvasPadding = 100;
 const PileupRendering = observer(function (props) {
     var _a;
     const { onMouseMove, blockKey, displayModel, width, height, regions, bpPerPx, sortedBy, colorBy, filterBy, } = props;
-    const { selectedFeatureId, featureIdUnderMouse, contextMenuFeature } = displayModel;
-    const [region] = regions;
-    const highlightOverlayCanvas = useRef(null);
+    const { selectedFeatureId, featureIdUnderMouse, contextMenuFeature } = displayModel || {};
+    const [firstRender, setFirstRender] = useState(false);
+    useEffect(() => {
+        setFirstRender(true);
+    }, []);
+    const region = regions[0];
+    const ref = useRef(null);
     const [mouseIsDown, setMouseIsDown] = useState(false);
     const [movedDuringLastMouseDown, setMovedDuringLastMouseDown] = useState(false);
-    useEffect(() => {
-        var _a, _b;
-        const canvas = highlightOverlayCanvas.current;
-        if (!canvas) {
-            return;
-        }
-        const ctx = canvas.getContext('2d');
-        if (!ctx) {
-            return;
-        }
-        ctx.clearRect(0, 0, canvas.width, canvas.height);
-        const selectedRect = selectedFeatureId
-            ? (_a = displayModel.getFeatureByID) === null || _a === void 0 ? void 0 : _a.call(displayModel, blockKey, selectedFeatureId)
-            : undefined;
-        if (selectedRect) {
-            const [leftBp, topPx, rightBp, bottomPx] = selectedRect;
-            const [leftPx, rightPx] = bpSpanPx(leftBp, rightBp, region, bpPerPx);
-            const rectTop = Math.round(topPx);
-            const rectHeight = Math.round(bottomPx - topPx);
-            ctx.shadowColor = '#222266';
-            ctx.shadowBlur = 10;
-            ctx.lineJoin = 'bevel';
-            ctx.lineWidth = 2;
-            ctx.strokeStyle = '#00b8ff';
-            ctx.strokeRect(leftPx - 2, rectTop - 2, rightPx - leftPx + 4, rectHeight + 4);
-            ctx.clearRect(leftPx, rectTop, rightPx - leftPx, rectHeight);
-        }
-        const highlightedFeature = featureIdUnderMouse || (contextMenuFeature === null || contextMenuFeature === void 0 ? void 0 : contextMenuFeature.id());
-        const highlightedRect = highlightedFeature
-            ? (_b = displayModel.getFeatureByID) === null || _b === void 0 ? void 0 : _b.call(displayModel, blockKey, highlightedFeature)
-            : undefined;
-        if (highlightedRect) {
-            const [leftBp, topPx, rightBp, bottomPx] = highlightedRect;
-            const [leftPx, rightPx] = bpSpanPx(leftBp, rightBp, region, bpPerPx);
-            const rectTop = Math.round(topPx);
-            const rectHeight = Math.round(bottomPx - topPx);
-            ctx.fillStyle = '#0003';
-            ctx.fillRect(leftPx, rectTop, rightPx - leftPx, rectHeight);
-        }
-    }, [
-        bpPerPx,
-        region,
-        blockKey,
-        selectedFeatureId,
-        displayModel,
-        featureIdUnderMouse,
-        contextMenuFeature,
-    ]);
+    const selectedRect = selectedFeatureId
+        ? displayModel === null || displayModel === void 0 ? void 0 : displayModel.getFeatureByID(blockKey, selectedFeatureId)
+        : undefined;
+    const highlightedFeature = featureIdUnderMouse || (contextMenuFeature === null || contextMenuFeature === void 0 ? void 0 : contextMenuFeature.id());
+    const highlightedRect = highlightedFeature
+        ? displayModel === null || displayModel === void 0 ? void 0 : displayModel.getFeatureByID(blockKey, highlightedFeature)
+        : undefined;
+    function makeRect(r, offset = 2) {
+        const [leftBp, topPx, rightBp, bottomPx] = r;
+        const [leftPx, rightPx] = bpSpanPx(leftBp, rightBp, region, bpPerPx);
+        const rectTop = Math.round(topPx);
+        const rectHeight = Math.round(bottomPx - topPx);
+        return {
+            left: leftPx - offset,
+            top: rectTop - offset,
+            width: rightPx - leftPx,
+            height: rectHeight,
+        };
+    }
+    const selected = selectedRect ? makeRect(selectedRect) : undefined;
+    const highlight = highlightedRect ? makeRect(highlightedRect, 0) : undefined;
     function onMouseDown(event) {
         setMouseIsDown(true);
         setMovedDuringLastMouseDown(false);
@@ -93,18 +67,18 @@ const PileupRendering = observer(function (props) {
         callMouseHandler('ContextMenu', event);
     }
     function mouseMove(event) {
-        if (!highlightOverlayCanvas.current) {
+        if (!ref.current) {
             return;
         }
         if (mouseIsDown) {
             setMovedDuringLastMouseDown(true);
         }
-        const rect = highlightOverlayCanvas.current.getBoundingClientRect();
+        const rect = ref.current.getBoundingClientRect();
         const offsetX = event.clientX - rect.left;
         const offsetY = event.clientY - rect.top;
         const px = region.reversed ? width - offsetX : offsetX;
         const clientBp = region.start + bpPerPx * px;
-        onMouseMove === null || onMouseMove === void 0 ? void 0 : onMouseMove(event, displayModel.getFeatureOverlapping(blockKey, clientBp, offsetY));
+        onMouseMove === null || onMouseMove === void 0 ? void 0 : onMouseMove(event, displayModel === null || displayModel === void 0 ? void 0 : displayModel.getFeatureOverlapping(blockKey, clientBp, offsetY));
     }
     function callMouseHandler(handlerName, event) {
         // @ts-expect-error
@@ -120,15 +94,46 @@ const PileupRendering = observer(function (props) {
     }
     const canvasWidth = Math.ceil(width);
     // need to call this in render so we get the right observer behavior
-    return (React.createElement("div", { "data-testid": `pileup-${[
+    return (React.createElement("div", { ref: ref, "data-testid": [
+            'pileup-overlay',
             sortedBy === null || sortedBy === void 0 ? void 0 : sortedBy.type,
             colorBy === null || colorBy === void 0 ? void 0 : colorBy.type,
             colorBy === null || colorBy === void 0 ? void 0 : colorBy.tag,
             (_a = filterBy === null || filterBy === void 0 ? void 0 : filterBy.tagFilter) === null || _a === void 0 ? void 0 : _a.tag,
         ]
             .filter(f => !!f)
-            .join('-')}`, style: { position: 'relative', width: canvasWidth, height } },
+            .join('-'), style: { position: 'relative', width: canvasWidth, height }, onMouseDown: event => {
+            onMouseDown(event);
+        }, onMouseEnter: event => {
+            onMouseEnter(event);
+        }, onMouseOut: event => {
+            onMouseOut(event);
+        }, onMouseOver: event => {
+            onMouseOver(event);
+        }, onMouseUp: event => {
+            onMouseUp(event);
+        }, onMouseLeave: event => {
+            onMouseLeave(event);
+        }, onMouseMove: event => {
+            mouseMove(event);
+        }, onClick: event => {
+            onClick(event);
+        }, onContextMenu: event => {
+            onContextMenu(event);
+        }, onFocus: () => { }, onBlur: () => { } },
         React.createElement(PrerenderedCanvas, { ...props, style: { position: 'absolute', left: 0, top: 0 } }),
-        React.createElement("canvas", { "data-testid": "pileup_overlay_canvas", width: canvasWidth, height: height + canvasPadding, style: { position: 'absolute', left: 0, top: 0 }, className: "highlightOverlayCanvas", ref: highlightOverlayCanvas, onMouseDown: event => onMouseDown(event), onMouseEnter: event => onMouseEnter(event), onMouseOut: event => onMouseOut(event), onMouseOver: event => onMouseOver(event), onMouseUp: event => onMouseUp(event), onMouseLeave: event => onMouseLeave(event), onMouseMove: event => mouseMove(event), onClick: event => onClick(event), onContextMenu: event => onContextMenu(event), onFocus: () => { }, onBlur: () => { } })));
+        firstRender && highlight ? (React.createElement("div", { style: {
+                position: 'absolute',
+                backgroundColor: '#0003',
+                pointerEvents: 'none',
+                ...highlight,
+            } })) : null,
+        firstRender && selected ? (React.createElement("div", { style: {
+                position: 'absolute',
+                border: '2px solid #00b8ff',
+                boxSizing: 'content-box',
+                pointerEvents: 'none',
+                ...selected,
+            } })) : null));
 });
 export default PileupRendering;

package/esm/PileupRenderer/getAlignmentShapeColor.js

@@ -20,24 +20,32 @@ export function getAlignmentShapeColor({ colorType, tag, feature, config, defaul
             const tags = feature.get('tags');
             const val = tags ? tags[tag] : feature.get(tag);
             if (tag === 'XS' || tag === 'TS') {
-                return fillColor[{
-                    '-': 'color_rev_strand',
-                    '+': 'color_fwd_strand',
-                }[val] || 'color_nostrand'];
+                if (val === '-') {
+                    return fillColor.color_rev_strand;
+                }
+                else if (val === '+') {
+                    return fillColor.color_fwd_strand;
+                }
+                else {
+                    return fillColor.color_nostrand;
+                }
             }
-            else if (tag === 'ts') {
-                return fillColor[{
-                    '-': feature.get('strand') === -1
-                        ? 'color_fwd_strand'
-                        : 'color_rev_strand',
-                    '+': feature.get('strand') === -1
-                        ? 'color_rev_strand'
-                        : 'color_fwd_strand',
-                }[val] || 'color_nostrand'];
-            }
-            else {
-                return colorTagMap[val] || fillColor.color_nostrand;
+            if (tag === 'ts') {
+                if (val === '-') {
+                    return feature.get('strand') === -1
+                        ? fillColor.color_fwd_strand
+                        : fillColor.color_rev_strand;
+                }
+                else if (val === '+') {
+                    return feature.get('strand') === -1
+                        ? fillColor.color_rev_strand
+                        : fillColor.color_fwd_strand;
+                }
+                else {
+                    return fillColor.color_nostrand;
+                }
             }
+            return colorTagMap[val] || fillColor.color_nostrand;
         }
         case 'insertSizeAndPairOrientation':
             break;

package/esm/PileupRenderer/layoutFeature.js

@@ -9,7 +9,12 @@ export function layoutFeature({ feature, layout, bpPerPx, region, showSoftClip,
         if (seq) {
             for (const { type, start, cliplen = 0 } of mismatches) {
                 if (type === 'softclip') {
-                    start === 0 ? (expansionBefore = cliplen) : (expansionAfter = cliplen);
+                    if (start === 0) {
+                        expansionBefore = cliplen;
+                    }
+                    else {
+                        expansionAfter = cliplen;
+                    }
                 }
             }
         }

package/esm/PileupRenderer/layoutFeatures.js

@@ -6,13 +6,7 @@ import { sortFeature } from './sortUtil';
 // layout determines the height of the canvas that we use to render
 export function layoutFeats(props) {
     const { layout, features, sortedBy, config, bpPerPx, showSoftClip, regions } = props;
-    const [region] = regions;
-    if (!layout) {
-        throw new Error(`layout required`);
-    }
-    if (!layout.addRect) {
-        throw new Error('invalid layout object');
-    }
+    const region = regions[0];
     const featureMap = (sortedBy === null || sortedBy === void 0 ? void 0 : sortedBy.type) && region.start === sortedBy.pos
         ? sortFeature(features, sortedBy)
         : features;

package/esm/PileupRenderer/makeImageData.d.ts

@@ -11,5 +11,5 @@ export declare function makeImageData({ ctx, layoutRecords, canvasWidth, renderA
     canvasWidth: number;
     layoutRecords: LayoutFeature[];
     renderArgs: RenderArgsWithColor;
-}): void;
+}): undefined;
 export {};

package/esm/PileupRenderer/makeImageData.js

@@ -56,4 +56,5 @@ export function makeImageData({ ctx, layoutRecords, canvasWidth, renderArgs, })
             });
         }
     }
+    return undefined;
 }

package/esm/PileupRenderer/renderAlignmentShape.js

@@ -2,7 +2,7 @@ import { bpSpanPx } from '@jbrowse/core/util';
 export function renderAlignmentShape({ ctx, feat, renderArgs, }) {
     const { regions, bpPerPx } = renderArgs;
     const { heightPx, topPx, feature } = feat;
-    const [region] = regions;
+    const region = regions[0];
     const s = feature.get('start');
     const e = feature.get('end');
     const [leftPx, rightPx] = bpSpanPx(s, e, region, bpPerPx);

package/esm/PileupRenderer/renderMismatches.js

@@ -4,7 +4,7 @@ import { colord } from '@jbrowse/core/util/colord';
 export function renderMismatches({ ctx, feat, renderArgs, minSubfeatureWidth, largeInsertionIndicatorScale, mismatchAlpha, charWidth, charHeight, colorForBase, contrastForBase, canvasWidth, drawSNPsMuted, drawIndels = true, }) {
     const { bpPerPx, regions } = renderArgs;
     const { heightPx, topPx, feature } = feat;
-    const [region] = regions;
+    const region = regions[0];
     const start = feature.get('start');
     const pxPerBp = Math.min(1 / bpPerPx, 2);
     const mismatches = feature.get('mismatches');

package/esm/PileupRenderer/renderSoftClipping.js

@@ -6,7 +6,7 @@ import { fillRect, getCharWidthHeight } from './util';
 export function renderSoftClipping({ ctx, feat, renderArgs, config, theme, colorForBase, canvasWidth, }) {
     const { feature, topPx, heightPx } = feat;
     const { regions, bpPerPx } = renderArgs;
-    const [region] = regions;
+    const region = regions[0];
     const minFeatWidth = readConfObject(config, 'minSubfeatureWidth');
     const mismatches = feature.get('mismatches');
     const seq = feature.get('seq');

package/esm/PileupRenderer/util.js

@@ -3,12 +3,10 @@ export function fillRect(ctx, l, t, w, h, cw, color) {
     if (l + w < 0 || l > cw) {
         return;
     }
-    else {
-        if (color) {
-            ctx.fillStyle = color;
-        }
-        ctx.fillRect(l, t, w, h);
+    if (color) {
+        ctx.fillStyle = color;
     }
+    ctx.fillRect(l, t, w, h);
 }
 export function getColorBaseMap(theme) {
     const { bases } = theme.palette;

package/esm/SNPCoverageAdapter/generateCoverageBins.js

@@ -7,7 +7,6 @@ function mismatchLen(mismatch) {
 function isInterbase(type) {
     return type === 'softclip' || type === 'hardclip' || type === 'insertion';
 }
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 function inc(bin, strand, type, field) {
     let thisBin = bin[type][field];
     if (thisBin === undefined) {
@@ -92,12 +91,7 @@ export default async function generateCoverageBins(features, region, opts, fetch
                                 };
                             }
                             const bin = bins[epos];
-                            if (bin) {
-                                inc(bin, fstrand, 'cov', mod);
-                            }
-                            else {
-                                console.warn('Undefined position in modifications snpcoverage encountered');
-                            }
+                            inc(bin, fstrand, 'cov', mod);
                         }
                     }
                 }
@@ -142,14 +136,14 @@ export default async function generateCoverageBins(features, region, opts, fetch
                     }
                     else {
                         if (bin0) {
-                            if (!(dels === null || dels === void 0 ? void 0 : dels.some(d => doesIntersect2(j, j + 1, d.start + fstart, d.start + fstart + d.length)))) {
+                            if (!dels.some(d => doesIntersect2(j, j + 1, d.start + fstart, d.start + fstart + d.length))) {
                                 inc(bin0, fstrand, 'cov', 'unmeth');
                                 bin0.ref--;
-                                bin0[fstrand];
+                                bin0[fstrand]--;
                             }
                         }
                         if (bin1) {
-                            if (!(dels === null || dels === void 0 ? void 0 : dels.some(d => doesIntersect2(j + 1, j + 2, d.start + fstart, d.start + fstart + d.length)))) {
+                            if (!dels.some(d => doesIntersect2(j + 1, j + 2, d.start + fstart, d.start + fstart + d.length))) {
                                 inc(bin1, fstrand, 'cov', 'unmeth');
                                 bin1.ref--;
                                 bin1[fstrand]--;

package/esm/SNPCoverageRenderer/SNPCoverageRenderer.d.ts

@@ -13,8 +13,8 @@ export interface RenderArgsDeserializedWithFeatures extends RenderArgsDeserializ
         values: number[];
     };
     displayCrossHatches: boolean;
-    modificationTagMap?: Record<string, string | undefined>;
+    modificationTagMap?: Record<string, string>;
 }
 export default class SNPCoverageRenderer extends WiggleBaseRenderer {
-    draw(ctx: CanvasRenderingContext2D, props: RenderArgsDeserializedWithFeatures): Promise<void>;
+    draw(ctx: CanvasRenderingContext2D, props: RenderArgsDeserializedWithFeatures): Promise<undefined>;
 }

package/esm/SNPCoverageRenderer/SNPCoverageRenderer.js

@@ -9,17 +9,13 @@ export default class SNPCoverageRenderer extends WiggleBaseRenderer {
     async draw(ctx, props) {
         const { features, regions, bpPerPx, displayCrossHatches, modificationTagMap = {}, scaleOpts, height: unadjustedHeight, theme: configTheme, config: cfg, ticks, } = props;
         const theme = createJBrowseTheme(configTheme);
-        const [region] = regions;
+        const region = regions[0];
         const width = (region.end - region.start) / bpPerPx;
         // the adjusted height takes into account YSCALEBAR_LABEL_OFFSET from the
         // wiggle display, and makes the height of the actual drawn area add
         // "padding" to the top and bottom of the display
         const offset = YSCALEBAR_LABEL_OFFSET;
         const height = unadjustedHeight - offset * 2;
-        const { domain } = scaleOpts;
-        if (!domain) {
-            return;
-        }
         const opts = { ...scaleOpts, range: [0, height] };
         const viewScale = getScale(opts);
         // clipping and insertion indicators, uses a smaller height/2 scale
@@ -176,5 +172,6 @@ export default class SNPCoverageRenderer extends WiggleBaseRenderer {
                 ctx.stroke();
             });
         }
+        return undefined;
     }
 }

package/esm/index.js

@@ -37,7 +37,9 @@ export default class AlignmentsPlugin extends Plugin {
             LinearAlignmentsDisplayF,
             AlignmentsFeatureWidgetF,
             GuessAlignmentsTypesF,
-        ].map(f => f(pluginManager));
+        ].map(f => {
+            f(pluginManager);
+        });
     }
 }
 export { linearPileupDisplayStateModelFactory, linearPileupDisplayConfigSchemaFactory, SharedLinearPileupDisplayMixin, } from './LinearPileupDisplay';

package/esm/shared/BaseDisplayComponent.js

@@ -21,7 +21,9 @@ const useStyles = makeStyles()(theme => ({
 const BaseDisplayComponent = observer(function ({ model, children, }) {
     const { error, regionTooLarge } = model;
     return error ? (React.createElement(BlockMsg, { message: `${error}`, severity: "error", action: React.createElement(Tooltip, { title: "Reload" },
-            React.createElement(Button, { "data-testid": "reload_button", onClick: () => model.reload() }, "Reload")) })) : regionTooLarge ? (model.regionCannotBeRendered()) : (React.createElement(DataDisplay, { model: model }, children));
+            React.createElement(Button, { "data-testid": "reload_button", onClick: () => {
+                    model.reload();
+                } }, "Reload")) })) : regionTooLarge ? (model.regionCannotBeRendered()) : (React.createElement(DataDisplay, { model: model }, children));
 });
 const DataDisplay = observer(function ({ model, children, }) {
     const { drawn, loading } = model;

package/esm/shared/{FilterByTag.js → FilterByTagDialog.js}

@@ -29,7 +29,9 @@ const flagNames = [
 function Bitmask(props) {
     const { flag = 0, setFlag } = props;
     return (React.createElement(React.Fragment, null,
-        React.createElement(TextField, { type: "number", value: flag, onChange: event => setFlag(+event.target.value) }),
+        React.createElement(TextField, { type: "number", value: flag, onChange: event => {
+                setFlag(+event.target.value);
+            } }),
         flagNames.map((name, index) => {
             const val = flag & (1 << index);
             const key = `${name}_${val}`;
@@ -55,7 +57,7 @@ const FilterByTagDialog = observer(function (props) {
     const [tag, setTag] = useState(((_a = filterBy.tagFilter) === null || _a === void 0 ? void 0 : _a.tag) || '');
     const [tagValue, setTagValue] = useState(((_b = filterBy.tagFilter) === null || _b === void 0 ? void 0 : _b.value) || '');
     const [readName, setReadName] = useState(filterBy.readName || '');
-    const validTag = tag.match(/^[A-Za-z][A-Za-z0-9]$/);
+    const validTag = /^[A-Za-z][A-Za-z0-9]$/.exec(tag);
     const site = 'https://broadinstitute.github.io/picard/explain-flags.html';
     return (React.createElement(Dialog, { open: true, onClose: handleClose, title: "Filter options" },
         React.createElement(DialogContent, null,
@@ -74,11 +76,17 @@ const FilterByTagDialog = observer(function (props) {
                         React.createElement(Bitmask, { flag: flagExclude, setFlag: setFlagExclude })))),
             React.createElement(Paper, { className: classes.paper, variant: "outlined" },
                 React.createElement(Typography, null, "Filter by tag name and value. Use * in the value field to get all reads containing any value for that tag. Example: filter tag name SA with value * to get all split/supplementary reads. Other examples include HP for haplotype, or RG for read group"),
-                React.createElement(TextField, { className: classes.field, value: tag, onChange: event => setTag(event.target.value), placeholder: "Enter tag name", inputProps: { maxLength: 2 }, error: tag.length === 2 && !validTag, helperText: tag.length === 2 && !validTag ? 'Not a valid tag' : '' }),
-                React.createElement(TextField, { className: classes.field, value: tagValue, onChange: event => setTagValue(event.target.value), placeholder: "Enter tag value" })),
+                React.createElement(TextField, { className: classes.field, value: tag, onChange: event => {
+                        setTag(event.target.value);
+                    }, placeholder: "Enter tag name", inputProps: { maxLength: 2 }, error: tag.length === 2 && !validTag, helperText: tag.length === 2 && !validTag ? 'Not a valid tag' : '' }),
+                React.createElement(TextField, { className: classes.field, value: tagValue, onChange: event => {
+                        setTagValue(event.target.value);
+                    }, placeholder: "Enter tag value" })),
             React.createElement(Paper, { className: classes.paper, variant: "outlined" },
                 React.createElement(Typography, null, "Filter by read name"),
-                React.createElement(TextField, { className: classes.field, value: readName, onChange: event => setReadName(event.target.value), placeholder: "Enter read name" })),
+                React.createElement(TextField, { className: classes.field, value: readName, onChange: event => {
+                        setReadName(event.target.value);
+                    }, placeholder: "Enter read name" })),
             React.createElement(DialogActions, null,
                 React.createElement(Button, { variant: "contained", color: "primary", autoFocus: true, type: "submit", onClick: () => {
                         model.setFilterBy({
@@ -94,6 +102,8 @@ const FilterByTagDialog = observer(function (props) {
                         });
                         handleClose();
                     } }, "Submit"),
-                React.createElement(Button, { variant: "contained", color: "secondary", onClick: () => handleClose() }, "Cancel")))));
+                React.createElement(Button, { variant: "contained", color: "secondary", onClick: () => {
+                        handleClose();
+                    } }, "Cancel")))));
 });
 export default FilterByTagDialog;

package/esm/shared/color.js

@@ -50,10 +50,10 @@ export function getPairedInsertSizeColor(f1, f2, stats) {
     if (sameRef && tlen > ((stats === null || stats === void 0 ? void 0 : stats.upper) || 0)) {
         return [fillColor.color_longinsert, strokeColor.color_longinsert];
     }
-    else if (sameRef && tlen < ((stats === null || stats === void 0 ? void 0 : stats.lower) || 0)) {
+    if (sameRef && tlen < ((stats === null || stats === void 0 ? void 0 : stats.lower) || 0)) {
         return [fillColor.color_shortinsert, strokeColor.color_shortinsert];
     }
-    else if (!sameRef) {
+    if (!sameRef) {
         return [fillColor.color_interchrom, strokeColor.color_interchrom];
     }
     return undefined;

package/esm/shared/index.d.ts

@@ -1,28 +1,32 @@
 import { IAnyStateTreeNode } from 'mobx-state-tree';
 import { BlockSet } from '@jbrowse/core/util/blockTypes';
 import { AnyConfigurationModel } from '@jbrowse/core/configuration';
-export declare function getUniqueTagValues(self: IAnyStateTreeNode & {
-    adapterConfig: AnyConfigurationModel;
-}, colorScheme: {
-    type: string;
-    tag?: string;
-}, blocks: BlockSet, opts?: {
-    headers?: Record<string, string>;
-    signal?: AbortSignal;
-    filters?: string[];
+export declare function getUniqueTagValues({ self, tag, blocks, opts, }: {
+    self: IAnyStateTreeNode & {
+        adapterConfig: AnyConfigurationModel;
+    };
+    tag: string;
+    blocks: BlockSet;
+    opts?: {
+        headers?: Record<string, string>;
+        signal?: AbortSignal;
+        filters: string[];
+    };
 }): Promise<string[]>;
 type Track = IAnyStateTreeNode & {
     configuration: AnyConfigurationModel;
 };
-export declare function getUniqueModificationValues(self: IAnyStateTreeNode & {
-    parentTrack: Track;
-}, adapterConfig: AnyConfigurationModel, colorScheme: {
-    type: string;
-    tag?: string;
-}, blocks: BlockSet, opts?: {
-    headers?: Record<string, string>;
-    signal?: AbortSignal;
-    filters?: string[];
+export declare function getUniqueModificationValues({ self, adapterConfig, blocks, opts, }: {
+    self: IAnyStateTreeNode & {
+        parentTrack: Track;
+    };
+    adapterConfig: AnyConfigurationModel;
+    blocks: BlockSet;
+    opts?: {
+        headers?: Record<string, string>;
+        signal?: AbortSignal;
+        filters: string[];
+    };
 }): Promise<string[]>;
 export declare const FilterModel: import("mobx-state-tree").IModelType<{
     flagInclude: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<number>, [undefined]>;
@@ -30,7 +34,7 @@ export declare const FilterModel: import("mobx-state-tree").IModelType<{
     readName: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
     tagFilter: import("mobx-state-tree").IMaybe<import("mobx-state-tree").IModelType<{
         tag: import("mobx-state-tree").ISimpleType<string>;
-        value: import("mobx-state-tree").ISimpleType<string>;
+        value: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
     }, {}, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
 }, {}, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>;
 export interface IFilter {
@@ -39,7 +43,7 @@ export interface IFilter {
     readName?: string;
     tagFilter?: {
         tag: string;
-        value: string;
+        value?: string;
     };
 }
 export {};

package/esm/shared/index.js

@@ -1,25 +1,24 @@
 import { types } from 'mobx-state-tree';
 import { getSession } from '@jbrowse/core/util';
 import { getRpcSessionId } from '@jbrowse/core/util/tracks';
-export async function getUniqueTagValues(self, colorScheme, blocks, opts) {
+export async function getUniqueTagValues({ self, tag, blocks, opts, }) {
     const { rpcManager } = getSession(self);
     const { adapterConfig } = self;
     const sessionId = getRpcSessionId(self);
     const values = await rpcManager.call(getRpcSessionId(self), 'PileupGetGlobalValueForTag', {
         adapterConfig,
-        tag: colorScheme.tag,
+        tag,
         sessionId,
         regions: blocks.contentBlocks,
         ...opts,
     });
     return values;
 }
-export async function getUniqueModificationValues(self, adapterConfig, colorScheme, blocks, opts) {
+export async function getUniqueModificationValues({ self, adapterConfig, blocks, opts, }) {
     const { rpcManager } = getSession(self);
     const sessionId = getRpcSessionId(self);
     const values = await rpcManager.call(sessionId, 'PileupGetVisibleModifications', {
         adapterConfig,
-        tag: colorScheme.tag,
         sessionId,
         regions: blocks.contentBlocks,
         ...opts,
@@ -32,6 +31,6 @@ export const FilterModel = types.model({
     readName: types.maybe(types.string),
     tagFilter: types.maybe(types.model({
         tag: types.string,
-        value: types.string,
+        value: types.maybe(types.string),
     })),
 });

package/esm/shared/renderSvg.js

@@ -31,8 +31,6 @@ export async function renderSvg(self, opts, cb) {
             React.createElement("defs", null,
                 React.createElement("clipPath", { id: clipid },
                     React.createElement("rect", { x: 0, y: 0, width: width, height: height }))),
-            React.createElement("g", { 
-                /* eslint-disable-next-line react/no-danger */
-                dangerouslySetInnerHTML: { __html: ctx.getSvg().innerHTML }, clipPath: `url(#${clipid})` })));
+            React.createElement("g", { dangerouslySetInnerHTML: { __html: ctx.getSvg().innerHTML }, clipPath: `url(#${clipid})` })));
     }
 }

package/esm/util.d.ts

@@ -18,7 +18,7 @@ export declare const pairMap: {
 export declare function getColorWGBS(strand: number, base: string): "#f00" | "#00f" | "#888";
 export declare function fetchSequence(region: AugmentedRegion, adapter: BaseFeatureDataAdapter): Promise<any>;
 export declare function shouldFetchReferenceSequence(type?: string): type is "methylation";
-export declare const modificationColors: Record<string, string | undefined>;
+export declare const modificationColors: Record<string, string>;
 type DisplayModel = IAnyStateTreeNode & {
     setError: (arg: unknown) => void;
 };