@jbrowse/plugin-alignments 2.13.1 → 2.15.0

package/dist/PileupRenderer/components/PileupRendering.js

@@ -27,65 +27,39 @@ const react_1 = __importStar(require("react"));
 const ui_1 = require("@jbrowse/core/ui");
 const util_1 = require("@jbrowse/core/util");
 const mobx_react_1 = require("mobx-react");
-// used so that user can click-away-from-feature below the laid out features
-// (issue #1248)
-const canvasPadding = 100;
 const PileupRendering = (0, mobx_react_1.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 = (0, react_1.useRef)(null);
+    const { selectedFeatureId, featureIdUnderMouse, contextMenuFeature } = displayModel || {};
+    const [firstRender, setFirstRender] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        setFirstRender(true);
+    }, []);
+    const region = regions[0];
+    const ref = (0, react_1.useRef)(null);
     const [mouseIsDown, setMouseIsDown] = (0, react_1.useState)(false);
     const [movedDuringLastMouseDown, setMovedDuringLastMouseDown] = (0, react_1.useState)(false);
-    (0, react_1.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] = (0, util_1.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] = (0, util_1.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] = (0, util_1.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);
@@ -118,18 +92,18 @@ const PileupRendering = (0, mobx_react_1.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
@@ -145,15 +119,46 @@ const PileupRendering = (0, mobx_react_1.observer)(function (props) {
     }
     const canvasWidth = Math.ceil(width);
     // need to call this in render so we get the right observer behavior
-    return (react_1.default.createElement("div", { "data-testid": `pileup-${[
+    return (react_1.default.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_1.default.createElement(ui_1.PrerenderedCanvas, { ...props, style: { position: 'absolute', left: 0, top: 0 } }),
-        react_1.default.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_1.default.createElement("div", { style: {
+                position: 'absolute',
+                backgroundColor: '#0003',
+                pointerEvents: 'none',
+                ...highlight,
+            } })) : null,
+        firstRender && selected ? (react_1.default.createElement("div", { style: {
+                position: 'absolute',
+                border: '2px solid #00b8ff',
+                boxSizing: 'content-box',
+                pointerEvents: 'none',
+                ...selected,
+            } })) : null));
 });
 exports.default = PileupRendering;

package/dist/PileupRenderer/getAlignmentShapeColor.js

@@ -23,24 +23,32 @@ function getAlignmentShapeColor({ colorType, tag, feature, config, defaultColor,
             const tags = feature.get('tags');
             const val = tags ? tags[tag] : feature.get(tag);
             if (tag === 'XS' || tag === 'TS') {
-                return color_1.fillColor[{
-                    '-': 'color_rev_strand',
-                    '+': 'color_fwd_strand',
-                }[val] || 'color_nostrand'];
+                if (val === '-') {
+                    return color_1.fillColor.color_rev_strand;
+                }
+                else if (val === '+') {
+                    return color_1.fillColor.color_fwd_strand;
+                }
+                else {
+                    return color_1.fillColor.color_nostrand;
+                }
             }
-            else if (tag === 'ts') {
-                return color_1.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] || color_1.fillColor.color_nostrand;
+            if (tag === 'ts') {
+                if (val === '-') {
+                    return feature.get('strand') === -1
+                        ? color_1.fillColor.color_fwd_strand
+                        : color_1.fillColor.color_rev_strand;
+                }
+                else if (val === '+') {
+                    return feature.get('strand') === -1
+                        ? color_1.fillColor.color_rev_strand
+                        : color_1.fillColor.color_fwd_strand;
+                }
+                else {
+                    return color_1.fillColor.color_nostrand;
+                }
             }
+            return colorTagMap[val] || color_1.fillColor.color_nostrand;
         }
         case 'insertSizeAndPairOrientation':
             break;

package/dist/PileupRenderer/layoutFeature.js

@@ -12,7 +12,12 @@ function layoutFeature({ feature, layout, bpPerPx, region, showSoftClip, heightP
         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/dist/PileupRenderer/layoutFeatures.js

@@ -9,13 +9,7 @@ const sortUtil_1 = require("./sortUtil");
 // layout determines the height of the canvas that we use to render
 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
         ? (0, sortUtil_1.sortFeature)(features, sortedBy)
         : features;

package/dist/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/dist/PileupRenderer/makeImageData.js

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

package/dist/PileupRenderer/renderAlignmentShape.js

@@ -5,7 +5,7 @@ const util_1 = require("@jbrowse/core/util");
 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] = (0, util_1.bpSpanPx)(s, e, region, bpPerPx);

package/dist/PileupRenderer/renderMismatches.js

@@ -7,7 +7,7 @@ const colord_1 = require("@jbrowse/core/util/colord");
 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/dist/PileupRenderer/renderSoftClipping.js

@@ -9,7 +9,7 @@ const util_2 = require("./util");
 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 = (0, configuration_1.readConfObject)(config, 'minSubfeatureWidth');
     const mismatches = feature.get('mismatches');
     const seq = feature.get('seq');

package/dist/PileupRenderer/util.js

@@ -11,12 +11,10 @@ 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);
 }
 function getColorBaseMap(theme) {
     const { bases } = theme.palette;

package/dist/SNPCoverageAdapter/generateCoverageBins.js

@@ -10,7 +10,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) {
@@ -95,12 +94,7 @@ async function generateCoverageBins(features, region, opts, fetchSequence) {
                                 };
                             }
                             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);
                         }
                     }
                 }
@@ -145,14 +139,14 @@ async function generateCoverageBins(features, region, opts, fetchSequence) {
                     }
                     else {
                         if (bin0) {
-                            if (!(dels === null || dels === void 0 ? void 0 : dels.some(d => (0, util_2.doesIntersect2)(j, j + 1, d.start + fstart, d.start + fstart + d.length)))) {
+                            if (!dels.some(d => (0, util_2.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 => (0, util_2.doesIntersect2)(j + 1, j + 2, d.start + fstart, d.start + fstart + d.length)))) {
+                            if (!dels.some(d => (0, util_2.doesIntersect2)(j + 1, j + 2, d.start + fstart, d.start + fstart + d.length))) {
                                 inc(bin1, fstrand, 'cov', 'unmeth');
                                 bin1.ref--;
                                 bin1[fstrand]--;

package/dist/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/dist/SNPCoverageRenderer/SNPCoverageRenderer.js

@@ -11,17 +11,13 @@ class SNPCoverageRenderer extends plugin_wiggle_1.WiggleBaseRenderer {
     async draw(ctx, props) {
         const { features, regions, bpPerPx, displayCrossHatches, modificationTagMap = {}, scaleOpts, height: unadjustedHeight, theme: configTheme, config: cfg, ticks, } = props;
         const theme = (0, ui_1.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 = plugin_wiggle_1.YSCALEBAR_LABEL_OFFSET;
         const height = unadjustedHeight - offset * 2;
-        const { domain } = scaleOpts;
-        if (!domain) {
-            return;
-        }
         const opts = { ...scaleOpts, range: [0, height] };
         const viewScale = (0, plugin_wiggle_1.getScale)(opts);
         // clipping and insertion indicators, uses a smaller height/2 scale
@@ -178,6 +174,7 @@ class SNPCoverageRenderer extends plugin_wiggle_1.WiggleBaseRenderer {
                 ctx.stroke();
             });
         }
+        return undefined;
     }
 }
 exports.default = SNPCoverageRenderer;

package/dist/index.js

@@ -66,7 +66,9 @@ class AlignmentsPlugin extends Plugin_1.default {
             LinearAlignmentsDisplay_1.default,
             AlignmentsFeatureDetail_1.default,
             GuessAlignmentsTypes_1.default,
-        ].map(f => f(pluginManager));
+        ].map(f => {
+            f(pluginManager);
+        });
     }
 }
 exports.default = AlignmentsPlugin;

package/dist/shared/BaseDisplayComponent.js

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

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

@@ -54,7 +54,9 @@ const flagNames = [
 function Bitmask(props) {
     const { flag = 0, setFlag } = props;
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(material_1.TextField, { type: "number", value: flag, onChange: event => setFlag(+event.target.value) }),
+        react_1.default.createElement(material_1.TextField, { type: "number", value: flag, onChange: event => {
+                setFlag(+event.target.value);
+            } }),
         flagNames.map((name, index) => {
             const val = flag & (1 << index);
             const key = `${name}_${val}`;
@@ -80,7 +82,7 @@ const FilterByTagDialog = (0, mobx_react_1.observer)(function (props) {
     const [tag, setTag] = (0, react_1.useState)(((_a = filterBy.tagFilter) === null || _a === void 0 ? void 0 : _a.tag) || '');
     const [tagValue, setTagValue] = (0, react_1.useState)(((_b = filterBy.tagFilter) === null || _b === void 0 ? void 0 : _b.value) || '');
     const [readName, setReadName] = (0, react_1.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_1.default.createElement(ui_1.Dialog, { open: true, onClose: handleClose, title: "Filter options" },
         react_1.default.createElement(material_1.DialogContent, null,
@@ -99,11 +101,17 @@ const FilterByTagDialog = (0, mobx_react_1.observer)(function (props) {
                         react_1.default.createElement(Bitmask, { flag: flagExclude, setFlag: setFlagExclude })))),
             react_1.default.createElement(material_1.Paper, { className: classes.paper, variant: "outlined" },
                 react_1.default.createElement(material_1.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_1.default.createElement(material_1.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_1.default.createElement(material_1.TextField, { className: classes.field, value: tagValue, onChange: event => setTagValue(event.target.value), placeholder: "Enter tag value" })),
+                react_1.default.createElement(material_1.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_1.default.createElement(material_1.TextField, { className: classes.field, value: tagValue, onChange: event => {
+                        setTagValue(event.target.value);
+                    }, placeholder: "Enter tag value" })),
             react_1.default.createElement(material_1.Paper, { className: classes.paper, variant: "outlined" },
                 react_1.default.createElement(material_1.Typography, null, "Filter by read name"),
-                react_1.default.createElement(material_1.TextField, { className: classes.field, value: readName, onChange: event => setReadName(event.target.value), placeholder: "Enter read name" })),
+                react_1.default.createElement(material_1.TextField, { className: classes.field, value: readName, onChange: event => {
+                        setReadName(event.target.value);
+                    }, placeholder: "Enter read name" })),
             react_1.default.createElement(material_1.DialogActions, null,
                 react_1.default.createElement(material_1.Button, { variant: "contained", color: "primary", autoFocus: true, type: "submit", onClick: () => {
                         model.setFilterBy({
@@ -119,6 +127,8 @@ const FilterByTagDialog = (0, mobx_react_1.observer)(function (props) {
                         });
                         handleClose();
                     } }, "Submit"),
-                react_1.default.createElement(material_1.Button, { variant: "contained", color: "secondary", onClick: () => handleClose() }, "Cancel")))));
+                react_1.default.createElement(material_1.Button, { variant: "contained", color: "secondary", onClick: () => {
+                        handleClose();
+                    } }, "Cancel")))));
 });
 exports.default = FilterByTagDialog;

package/dist/shared/color.js

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

package/dist/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/dist/shared/index.js

@@ -6,25 +6,24 @@ exports.getUniqueModificationValues = getUniqueModificationValues;
 const mobx_state_tree_1 = require("mobx-state-tree");
 const util_1 = require("@jbrowse/core/util");
 const tracks_1 = require("@jbrowse/core/util/tracks");
-async function getUniqueTagValues(self, colorScheme, blocks, opts) {
+async function getUniqueTagValues({ self, tag, blocks, opts, }) {
     const { rpcManager } = (0, util_1.getSession)(self);
     const { adapterConfig } = self;
     const sessionId = (0, tracks_1.getRpcSessionId)(self);
     const values = await rpcManager.call((0, tracks_1.getRpcSessionId)(self), 'PileupGetGlobalValueForTag', {
         adapterConfig,
-        tag: colorScheme.tag,
+        tag,
         sessionId,
         regions: blocks.contentBlocks,
         ...opts,
     });
     return values;
 }
-async function getUniqueModificationValues(self, adapterConfig, colorScheme, blocks, opts) {
+async function getUniqueModificationValues({ self, adapterConfig, blocks, opts, }) {
     const { rpcManager } = (0, util_1.getSession)(self);
     const sessionId = (0, tracks_1.getRpcSessionId)(self);
     const values = await rpcManager.call(sessionId, 'PileupGetVisibleModifications', {
         adapterConfig,
-        tag: colorScheme.tag,
         sessionId,
         regions: blocks.contentBlocks,
         ...opts,
@@ -37,6 +36,6 @@ exports.FilterModel = mobx_state_tree_1.types.model({
     readName: mobx_state_tree_1.types.maybe(mobx_state_tree_1.types.string),
     tagFilter: mobx_state_tree_1.types.maybe(mobx_state_tree_1.types.model({
         tag: mobx_state_tree_1.types.string,
-        value: mobx_state_tree_1.types.string,
+        value: mobx_state_tree_1.types.maybe(mobx_state_tree_1.types.string),
     })),
 });

package/dist/shared/renderSvg.js

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

package/dist/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;
 };

package/esm/AlignmentsFeatureDetail/AlignmentsFeatureDetail.js

@@ -14,13 +14,15 @@ import Formatter from './Formatter';
 const omit = ['clipPos', 'flags'];
 const AlignmentsFeatureDetails = observer(function (props) {
     const { model } = props;
-    const feat = clone(model.featureData);
+    const { featureData } = model;
+    const feat = clone(featureData);
     const SA = getTag('SA', feat);
+    const { flags } = feat;
     return (React.createElement(Paper, { "data-testid": "alignment-side-drawer" },
         React.createElement(FeatureDetails, { ...props, omit: omit, 
             // @ts-expect-error
             descriptions: { ...tags, tags: tags }, feature: feat, formatter: (value, key) => key === 'next_segment_position' ? (React.createElement(PairLink, { model: model, locString: value })) : (React.createElement(Formatter, { value: value })) }),
-        SA ? React.createElement(SuppAlignments, { model: model, tag: SA, feature: feat }) : null,
-        feat.flags !== undefined ? React.createElement(Flags, { feature: feat, ...props }) : null));
+        SA !== undefined ? (React.createElement(SuppAlignments, { model: model, tag: SA, feature: feat })) : null,
+        flags !== undefined ? React.createElement(Flags, { feature: feat, ...props }) : null));
 });
 export default AlignmentsFeatureDetails;