@jbrowse/plugin-alignments 3.7.0 → 4.0.0

package/dist/shared/afterAttach.js

@@ -1,41 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.doAfterAttach = doAfterAttach;
-const util_1 = require("@jbrowse/core/util");
-const util_2 = require("../util");
-const fetchChains_1 = require("./fetchChains");
-function doAfterAttach(self, cb) {
-    (0, util_2.createAutorun)(self, async () => {
-        await (0, fetchChains_1.fetchChains)(self);
-    }, { delay: 1000 });
-    function draw(view) {
-        const canvas = self.ref;
-        if (!canvas) {
-            return;
-        }
-        const ctx = canvas.getContext('2d');
-        if (!ctx) {
-            return;
-        }
-        if (!self.chainData) {
-            return;
-        }
-        const height = 'layoutHeight' in self ? self.layoutHeight || 1 : self.height;
-        ctx.resetTransform();
-        ctx.clearRect(0, 0, canvas.width, canvas.height);
-        ctx.scale(2, 2);
-        cb(self, ctx, canvas.width, height);
-        self.setLastDrawnOffsetPx(view.offsetPx);
-        self.setLastDrawnBpPerPx(view.bpPerPx);
-    }
-    (0, util_2.createAutorun)(self, async () => {
-        const view = (0, util_1.getContainingView)(self);
-        if (view.bpPerPx !== self.lastDrawnBpPerPx) {
-            draw(view);
-        }
-    });
-    (0, util_2.createAutorun)(self, async () => {
-        const view = (0, util_1.getContainingView)(self);
-        draw(view);
-    }, { delay: 1000 });
-}

package/dist/shared/canvasUtils.d.ts

@@ -1,2 +0,0 @@
-export declare function fillRectCtx(x: number, y: number, width: number, height: number, ctx: CanvasRenderingContext2D, fillColor?: string): void;
-export declare function strokeRectCtx(x: number, y: number, width: number, height: number, ctx: CanvasRenderingContext2D, strokeColor?: string): void;

package/dist/shared/canvasUtils.js

@@ -1,32 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.fillRectCtx = fillRectCtx;
-exports.strokeRectCtx = strokeRectCtx;
-function fillRectCtx(x, y, width, height, ctx, fillColor) {
-    if (width < 0) {
-        x += width;
-        width = -width;
-    }
-    if (height < 0) {
-        y += height;
-        height = -height;
-    }
-    if (fillColor) {
-        ctx.fillStyle = fillColor;
-    }
-    ctx.fillRect(x, y, width, height);
-}
-function strokeRectCtx(x, y, width, height, ctx, strokeColor) {
-    if (width < 0) {
-        x += width;
-        width = -width;
-    }
-    if (height < 0) {
-        y += height;
-        height = -height;
-    }
-    if (strokeColor) {
-        ctx.strokeStyle = strokeColor;
-    }
-    ctx.strokeRect(x, y, width, height);
-}

package/dist/shared/chainToSimpleFeature.js

@@ -1,43 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.chainToSimpleFeature = chainToSimpleFeature;
-const util_1 = require("@jbrowse/core/util");
-function chainToSimpleFeature(chain) {
-    if (chain.length === 0) {
-        throw new Error('Chain cannot be empty');
-    }
-    const firstFeat = chain[0];
-    return new util_1.SimpleFeature({
-        uniqueId: firstFeat.id,
-        id: firstFeat.id,
-        name: firstFeat.name,
-        refName: firstFeat.refName,
-        start: Math.min(...chain.map(f => f.start)),
-        end: Math.max(...chain.map(f => f.end)),
-        strand: firstFeat.strand,
-        flags: firstFeat.flags,
-        tlen: firstFeat.tlen,
-        pair_orientation: firstFeat.pair_orientation,
-        clipPos: firstFeat.clipPos,
-        ...(firstFeat.next_ref && { next_ref: firstFeat.next_ref }),
-        ...(firstFeat.next_pos !== undefined && { next_pos: firstFeat.next_pos }),
-        ...(firstFeat.SA && { SA: firstFeat.SA }),
-        subfeatures: chain.map((feat, idx) => ({
-            uniqueId: `${feat.id}_${idx}`,
-            id: `${feat.id}_${idx}`,
-            name: feat.name,
-            refName: feat.refName,
-            start: feat.start,
-            end: feat.end,
-            strand: feat.strand,
-            type: 'alignment_part',
-            flags: feat.flags,
-            tlen: feat.tlen,
-            pair_orientation: feat.pair_orientation,
-            clipPos: feat.clipPos,
-            ...(feat.next_ref && { next_ref: feat.next_ref }),
-            ...(feat.next_pos !== undefined && { next_pos: feat.next_pos }),
-            ...(feat.SA && { SA: feat.SA }),
-        })),
-    });
-}

package/dist/shared/chevron.d.ts

@@ -1 +0,0 @@
-export declare function drawChevron(ctx: CanvasRenderingContext2D, x: number, y: number, width: number, height: number, strand: number, color: string, chevronWidth: number, stroke?: string): void;

package/dist/shared/chevron.js

@@ -1,27 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.drawChevron = drawChevron;
-function drawChevron(ctx, x, y, width, height, strand, color, chevronWidth, stroke) {
-    ctx.fillStyle = color;
-    ctx.beginPath();
-    if (strand === -1) {
-        ctx.moveTo(x - chevronWidth, y + height / 2);
-        ctx.lineTo(x, y + height);
-        ctx.lineTo(x + width, y + height);
-        ctx.lineTo(x + width, y);
-        ctx.lineTo(x, y);
-    }
-    else {
-        ctx.moveTo(x, y);
-        ctx.lineTo(x, y + height);
-        ctx.lineTo(x + width, y + height);
-        ctx.lineTo(x + width + chevronWidth, y + height / 2);
-        ctx.lineTo(x + width, y);
-    }
-    ctx.closePath();
-    ctx.fill();
-    if (stroke) {
-        ctx.strokeStyle = stroke;
-        ctx.stroke();
-    }
-}

package/dist/shared/color.d.ts

@@ -1,95 +0,0 @@
-import type { ChainStats, ReducedFeature } from './fetchChains';
-export declare const PairType: {
-    readonly PROPER_PAIR: 0;
-    readonly LONG_INSERT: 1;
-    readonly SHORT_INSERT: 2;
-    readonly INTER_CHROM: 3;
-    readonly ABNORMAL_ORIENTATION: 4;
-    readonly UNMAPPED_MATE: 5;
-};
-export type PairTypeValue = (typeof PairType)[keyof typeof PairType];
-export declare const fillColor: {
-    color_fwd_strand_not_proper: string;
-    color_rev_strand_not_proper: string;
-    color_fwd_strand: string;
-    color_rev_strand: string;
-    color_fwd_missing_mate: string;
-    color_rev_missing_mate: string;
-    color_fwd_diff_chr: string;
-    color_rev_diff_chr: string;
-    color_pair_lr: string;
-    color_pair_rr: string;
-    color_pair_rl: string;
-    color_pair_ll: string;
-    color_nostrand: string;
-    color_interchrom: string;
-    color_longinsert: string;
-    color_shortinsert: string;
-    color_unmapped_mate: string;
-    color_unknown: string;
-};
-export declare const strokeColor: {
-    color_fwd_strand_not_proper: string;
-    color_rev_strand_not_proper: string;
-    color_fwd_strand: string;
-    color_rev_strand: string;
-    color_fwd_missing_mate: string;
-    color_rev_missing_mate: string;
-    color_fwd_diff_chr: string;
-    color_rev_diff_chr: string;
-    color_pair_lr: string;
-    color_pair_rr: string;
-    color_pair_rl: string;
-    color_pair_ll: string;
-    color_nostrand: string;
-    color_interchrom: string;
-    color_longinsert: string;
-    color_shortinsert: string;
-    color_unmapped_mate: string;
-    color_unknown: string;
-};
-export declare function getPairedType({ type, f1, f2, stats, }: {
-    type: string;
-    f1: {
-        refName: string;
-        pair_orientation?: string;
-        tlen?: number;
-        flags?: number;
-    };
-    f2: {
-        refName: string;
-    };
-    stats?: ChainStats;
-}): PairTypeValue;
-export declare function getPairedInsertSizeColor(f1: {
-    refName: string;
-    tlen?: number;
-    flags?: number;
-}, f2: {
-    refName: string;
-}, stats?: ChainStats): readonly [string, string] | undefined;
-export declare function getPairedOrientationColorOrDefault(f: {
-    pair_orientation?: string;
-    flags?: number;
-}): readonly [string, string] | undefined;
-export declare function getPairedOrientationColor(f: {
-    pair_orientation?: string;
-    flags?: number;
-}): readonly [string, string];
-export declare function getPairedInsertSizeAndOrientationColor(f1: {
-    refName: string;
-    pair_orientation?: string;
-    tlen?: number;
-    flags?: number;
-}, f2: {
-    refName: string;
-}, stats?: ChainStats): readonly [string, string];
-export declare function getSingletonColor(f: {
-    tlen?: number;
-}, stats?: ChainStats): readonly [string, string];
-export declare function getPairedColor({ type, v0, v1, stats, }: {
-    type: string;
-    v0: ReducedFeature;
-    v1: ReducedFeature;
-    stats?: ChainStats;
-}): readonly [string, string] | undefined;

package/dist/shared/color.js

@@ -1,158 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.strokeColor = exports.fillColor = exports.PairType = void 0;
-exports.getPairedType = getPairedType;
-exports.getPairedInsertSizeColor = getPairedInsertSizeColor;
-exports.getPairedOrientationColorOrDefault = getPairedOrientationColorOrDefault;
-exports.getPairedOrientationColor = getPairedOrientationColor;
-exports.getPairedInsertSizeAndOrientationColor = getPairedInsertSizeAndOrientationColor;
-exports.getSingletonColor = getSingletonColor;
-exports.getPairedColor = getPairedColor;
-const util_1 = require("../util");
-exports.PairType = {
-    PROPER_PAIR: 0,
-    LONG_INSERT: 1,
-    SHORT_INSERT: 2,
-    INTER_CHROM: 3,
-    ABNORMAL_ORIENTATION: 4,
-    UNMAPPED_MATE: 5,
-};
-exports.fillColor = {
-    color_fwd_strand_not_proper: '#ECC8C8',
-    color_rev_strand_not_proper: '#BEBED8',
-    color_fwd_strand: '#EC8B8B',
-    color_rev_strand: '#8F8FD8',
-    color_fwd_missing_mate: '#D11919',
-    color_rev_missing_mate: '#1919D1',
-    color_fwd_diff_chr: '#000',
-    color_rev_diff_chr: '#969696',
-    color_pair_lr: '#c8c8c8',
-    color_pair_rr: '#3a3a9d',
-    color_pair_rl: 'teal',
-    color_pair_ll: 'green',
-    color_nostrand: '#c8c8c8',
-    color_interchrom: 'purple',
-    color_longinsert: 'red',
-    color_shortinsert: 'pink',
-    color_unmapped_mate: '#8B008B',
-    color_unknown: 'grey',
-};
-exports.strokeColor = {
-    color_fwd_strand_not_proper: '#CA6767',
-    color_rev_strand_not_proper: '#7272AA',
-    color_fwd_strand: '#DC2A2A',
-    color_rev_strand: '#4141BA',
-    color_fwd_missing_mate: '#921111',
-    color_rev_missing_mate: '#111192',
-    color_fwd_diff_chr: '#000000',
-    color_rev_diff_chr: '#696969',
-    color_pair_lr: '#8C8C8C',
-    color_pair_rr: '#00002A',
-    color_pair_rl: '#005A5A',
-    color_pair_ll: '#005A00',
-    color_nostrand: '#8C8C8C',
-    color_interchrom: '#5A005A',
-    color_longinsert: '#B30000',
-    color_shortinsert: '#FF3A5C',
-    color_unmapped_mate: '#5A005A',
-    color_unknown: '#444',
-};
-const defaultColor = [
-    exports.fillColor.color_pair_lr,
-    exports.strokeColor.color_pair_lr,
-];
-function getPairedType({ type, f1, f2, stats, }) {
-    if (f1.flags !== undefined && f1.flags & 8) {
-        return exports.PairType.UNMAPPED_MATE;
-    }
-    if (type === 'insertSizeAndOrientation' || type === 'orientation') {
-        const orientationType = util_1.orientationTypes.fr;
-        const r = orientationType[f1.pair_orientation || ''];
-        if (r && r !== 'LR') {
-            return exports.PairType.ABNORMAL_ORIENTATION;
-        }
-    }
-    if (type === 'insertSizeAndOrientation' || type === 'insertSize') {
-        const sameRef = f1.refName === f2.refName;
-        const tlen = Math.abs(f1.tlen || 0);
-        if (!sameRef) {
-            return exports.PairType.INTER_CHROM;
-        }
-        if (stats) {
-            if (tlen > stats.upper) {
-                return exports.PairType.LONG_INSERT;
-            }
-            if (tlen < stats.lower) {
-                return exports.PairType.SHORT_INSERT;
-            }
-        }
-    }
-    return exports.PairType.PROPER_PAIR;
-}
-function getPairedInsertSizeColor(f1, f2, stats) {
-    const pairType = getPairedType({ type: 'insertSize', f1, f2, stats });
-    switch (pairType) {
-        case exports.PairType.UNMAPPED_MATE:
-            return [
-                exports.fillColor.color_unmapped_mate,
-                exports.strokeColor.color_unmapped_mate,
-            ];
-        case exports.PairType.LONG_INSERT:
-            return [exports.fillColor.color_longinsert, exports.strokeColor.color_longinsert];
-        case exports.PairType.SHORT_INSERT:
-            return [
-                exports.fillColor.color_shortinsert,
-                exports.strokeColor.color_shortinsert,
-            ];
-        case exports.PairType.INTER_CHROM:
-            return [exports.fillColor.color_interchrom, exports.strokeColor.color_interchrom];
-        case exports.PairType.PROPER_PAIR:
-            return undefined;
-        default:
-            return undefined;
-    }
-}
-function getPairedOrientationColorOrDefault(f) {
-    if (f.flags !== undefined && f.flags & 8) {
-        return [
-            exports.fillColor.color_unmapped_mate,
-            exports.strokeColor.color_unmapped_mate,
-        ];
-    }
-    const type = util_1.orientationTypes.fr;
-    const r = type[f.pair_orientation || ''];
-    const type2 = util_1.pairMap[r];
-    return r === 'LR'
-        ? undefined
-        : [exports.fillColor[type2], exports.strokeColor[type2]];
-}
-function getPairedOrientationColor(f) {
-    return getPairedOrientationColorOrDefault(f) || defaultColor;
-}
-function getPairedInsertSizeAndOrientationColor(f1, f2, stats) {
-    return (getPairedOrientationColorOrDefault(f1) ||
-        getPairedInsertSizeColor(f1, f2, stats) ||
-        defaultColor);
-}
-function getSingletonColor(f, stats) {
-    const tlen = Math.abs(f.tlen || 0);
-    if (stats && tlen > stats.upper) {
-        return [
-            exports.fillColor.color_fwd_missing_mate,
-            exports.strokeColor.color_fwd_missing_mate,
-        ];
-    }
-    return defaultColor;
-}
-function getPairedColor({ type, v0, v1, stats, }) {
-    if (type === 'insertSizeAndOrientation') {
-        return getPairedInsertSizeAndOrientationColor(v0, v1, stats);
-    }
-    if (type === 'orientation') {
-        return getPairedOrientationColor(v0);
-    }
-    if (type === 'insertSize') {
-        return getPairedInsertSizeColor(v0, v1, stats);
-    }
-    return undefined;
-}

package/dist/shared/components/BaseDisplayComponent.d.ts

@@ -1,16 +0,0 @@
-import type React from 'react';
-interface BaseDisplayModel {
-    error?: unknown;
-    regionTooLarge?: boolean;
-    reload: () => void;
-    regionCannotBeRendered: () => React.ReactElement | null;
-    drawn: boolean;
-    loading: boolean;
-    lastDrawnOffsetPx?: number;
-    message?: string;
-}
-declare const BaseDisplayComponent: ({ model, children, }: {
-    model: BaseDisplayModel;
-    children?: React.ReactNode;
-}) => import("react/jsx-runtime").JSX.Element | null;
-export default BaseDisplayComponent;

package/dist/shared/components/BaseDisplayComponent.js

@@ -1,44 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const ui_1 = require("@jbrowse/core/ui");
-const util_1 = require("@jbrowse/core/util");
-const plugin_linear_genome_view_1 = require("@jbrowse/plugin-linear-genome-view");
-const material_1 = require("@mui/material");
-const mobx_react_1 = require("mobx-react");
-const mui_1 = require("tss-react/mui");
-const useStyles = (0, mui_1.makeStyles)()(theme => ({
-    loading: {
-        backgroundColor: theme.palette.background.default,
-        backgroundImage: `repeating-linear-gradient(45deg, transparent, transparent 5px, ${theme.palette.action.disabledBackground} 5px, ${theme.palette.action.disabledBackground} 10px)`,
-        position: 'absolute',
-        bottom: 0,
-        height: 50,
-        width: 300,
-        right: 0,
-        pointerEvents: 'none',
-        textAlign: 'center',
-    },
-}));
-const BlockError = (0, mobx_react_1.observer)(function ({ model }) {
-    const { error } = model;
-    return ((0, jsx_runtime_1.jsx)(plugin_linear_genome_view_1.BlockMsg, { message: `${error}`, severity: "error", action: (0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: "Reload", children: (0, jsx_runtime_1.jsx)(material_1.Button, { "data-testid": "reload_button", onClick: () => {
-                    model.reload();
-                }, children: "Reload" }) }) }));
-});
-const BaseDisplayComponent = (0, mobx_react_1.observer)(function ({ model, children, }) {
-    const { error, regionTooLarge } = model;
-    return error ? ((0, jsx_runtime_1.jsx)(BlockError, { model: model })) : regionTooLarge ? (model.regionCannotBeRendered()) : ((0, jsx_runtime_1.jsx)(DataDisplay, { model: model, children: children }));
-});
-const DataDisplay = (0, mobx_react_1.observer)(function ({ model, children, }) {
-    const { drawn, loading } = model;
-    const view = (0, util_1.getContainingView)(model);
-    const left = (model.lastDrawnOffsetPx || 0) - view.offsetPx;
-    return ((0, jsx_runtime_1.jsxs)("div", { "data-testid": `drawn-${drawn}`, children: [(0, jsx_runtime_1.jsx)("div", { style: { position: 'absolute', left }, children: children }), left !== 0 || loading ? (0, jsx_runtime_1.jsx)(LoadingBar, { model: model }) : null] }));
-});
-const LoadingBar = (0, mobx_react_1.observer)(function ({ model }) {
-    const { classes } = useStyles();
-    const { message } = model;
-    return ((0, jsx_runtime_1.jsx)("div", { className: classes.loading, children: (0, jsx_runtime_1.jsx)(ui_1.LoadingEllipses, { message: message }) }));
-});
-exports.default = BaseDisplayComponent;

package/dist/shared/components/FilterByTagDialog.d.ts

@@ -1,9 +0,0 @@
-import type { FilterBy } from '../types';
-declare const FilterByTagDialog: (props: {
-    model: {
-        filterBy: FilterBy;
-        setFilterBy: (arg: FilterBy) => void;
-    };
-    handleClose: () => void;
-}) => import("react/jsx-runtime").JSX.Element;
-export default FilterByTagDialog;

package/dist/shared/components/FilterByTagDialog.js

@@ -1,88 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const ui_1 = require("@jbrowse/core/ui");
-const material_1 = require("@mui/material");
-const mobx_react_1 = require("mobx-react");
-const mui_1 = require("tss-react/mui");
-const useStyles = (0, mui_1.makeStyles)()(theme => ({
-    paper: {
-        padding: theme.spacing(2),
-        margin: theme.spacing(2),
-    },
-    field: {
-        margin: theme.spacing(2),
-    },
-}));
-const flagNames = [
-    'read paired',
-    'read mapped in proper pair',
-    'read unmapped',
-    'mate unmapped',
-    'read reverse strand',
-    'mate reverse strand',
-    'first in pair',
-    'second in pair',
-    'not primary alignment',
-    'read fails platform/vendor quality checks',
-    'read is PCR or optical duplicate',
-    'supplementary alignment',
-];
-function Bitmask(props) {
-    const { flag = 0, setFlag } = props;
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(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}`;
-                return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", checked: Boolean(val), onChange: event => {
-                                if (event.target.checked) {
-                                    setFlag(flag | (1 << index));
-                                }
-                                else {
-                                    setFlag(flag & ~(1 << index));
-                                }
-                            } }), (0, jsx_runtime_1.jsx)("label", { htmlFor: key, children: name })] }, key));
-            })] }));
-}
-const FilterByTagDialog = (0, mobx_react_1.observer)(function (props) {
-    var _a, _b;
-    const { model, handleClose } = props;
-    const { classes } = useStyles();
-    const { filterBy } = model;
-    const [flagInclude, setFlagInclude] = (0, react_1.useState)(filterBy.flagInclude);
-    const [flagExclude, setFlagExclude] = (0, react_1.useState)(filterBy.flagExclude);
-    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 = /^[A-Za-z][A-Za-z0-9]$/.exec(tag);
-    const site = 'https://broadinstitute.github.io/picard/explain-flags.html';
-    return ((0, jsx_runtime_1.jsx)(ui_1.Dialog, { open: true, onClose: handleClose, title: "Filter options", children: (0, jsx_runtime_1.jsxs)(material_1.DialogContent, { children: [(0, jsx_runtime_1.jsxs)(material_1.Typography, { children: ["Set filter bitmask options. Refer to ", (0, jsx_runtime_1.jsx)(material_1.Link, { href: site, children: site }), ' ', "for details"] }), (0, jsx_runtime_1.jsx)(material_1.Paper, { className: classes.paper, variant: "outlined", children: (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex' }, children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { children: "Read must have ALL these flags" }), (0, jsx_runtime_1.jsx)(Bitmask, { flag: flagInclude, setFlag: setFlagInclude })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { children: "Read must have NONE of these flags" }), (0, jsx_runtime_1.jsx)(Bitmask, { flag: flagExclude, setFlag: setFlagExclude })] })] }) }), (0, jsx_runtime_1.jsxs)(material_1.Paper, { className: classes.paper, variant: "outlined", children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { children: "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" }), (0, jsx_runtime_1.jsx)(material_1.TextField, { className: classes.field, value: tag, onChange: event => {
-                                setTag(event.target.value);
-                            }, placeholder: "Enter tag name", error: tag.length === 2 && !validTag, helperText: tag.length === 2 && !validTag ? 'Not a valid tag' : '', slotProps: {
-                                htmlInput: {
-                                    maxLength: 2,
-                                },
-                            } }), (0, jsx_runtime_1.jsx)(material_1.TextField, { className: classes.field, value: tagValue, onChange: event => {
-                                setTagValue(event.target.value);
-                            }, placeholder: "Enter tag value" })] }), (0, jsx_runtime_1.jsxs)(material_1.Paper, { className: classes.paper, variant: "outlined", children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { children: "Filter by read name" }), (0, jsx_runtime_1.jsx)(material_1.TextField, { className: classes.field, value: readName, onChange: event => {
-                                setReadName(event.target.value);
-                            }, placeholder: "Enter read name" })] }), (0, jsx_runtime_1.jsxs)(material_1.DialogActions, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", color: "primary", autoFocus: true, type: "submit", onClick: () => {
-                                model.setFilterBy({
-                                    flagInclude,
-                                    flagExclude,
-                                    readName,
-                                    tagFilter: tag !== ''
-                                        ? {
-                                            tag,
-                                            value: tagValue,
-                                        }
-                                        : undefined,
-                                });
-                                handleClose();
-                            }, children: "Submit" }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", color: "secondary", onClick: () => {
-                                handleClose();
-                            }, children: "Cancel" })] })] }) }));
-});
-exports.default = FilterByTagDialog;

package/dist/shared/components/SetFeatureHeightDialog.d.ts

@@ -1,10 +0,0 @@
-declare const SetFeatureHeightDialog: (props: {
-    model: {
-        setFeatureHeight: (arg?: number) => void;
-        setNoSpacing: (arg?: boolean) => void;
-        featureHeightSetting: number;
-        noSpacing?: boolean;
-    };
-    handleClose: () => void;
-}) => import("react/jsx-runtime").JSX.Element;
-export default SetFeatureHeightDialog;

package/dist/shared/components/SetFeatureHeightDialog.js

@@ -1,26 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const ui_1 = require("@jbrowse/core/ui");
-const material_1 = require("@mui/material");
-const mobx_react_1 = require("mobx-react");
-const SetFeatureHeightDialog = (0, mobx_react_1.observer)(function (props) {
-    const { model, handleClose } = props;
-    const { featureHeightSetting, noSpacing: noSpacingSetting } = model;
-    const [height, setHeight] = (0, react_1.useState)(`${featureHeightSetting}`);
-    const [noSpacing, setNoSpacing] = (0, react_1.useState)(noSpacingSetting);
-    const ok = height !== '' && !Number.isNaN(+height);
-    return ((0, jsx_runtime_1.jsx)(ui_1.Dialog, { open: true, onClose: handleClose, title: "Set feature height", children: (0, jsx_runtime_1.jsxs)(material_1.DialogContent, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { children: "Adjust the feature height and whether there is any spacing between features. Setting feature height to 1 and removing spacing makes the display very compact." }), (0, jsx_runtime_1.jsx)(material_1.TextField, { value: height, helperText: "Feature height", onChange: event => {
-                        setHeight(event.target.value);
-                    } }), (0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { control: (0, jsx_runtime_1.jsx)(material_1.Checkbox, { checked: !!noSpacing, onChange: () => {
-                            setNoSpacing(val => !val);
-                        } }), label: "Remove spacing between features in y-direction?" }), (0, jsx_runtime_1.jsxs)(material_1.DialogActions, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", color: "primary", type: "submit", autoFocus: true, disabled: !ok, onClick: () => {
-                                model.setFeatureHeight(height !== '' && !Number.isNaN(+height) ? +height : undefined);
-                                model.setNoSpacing(noSpacing);
-                                handleClose();
-                            }, children: "Submit" }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", color: "secondary", onClick: () => {
-                                handleClose();
-                            }, children: "Cancel" })] })] }) }));
-});
-exports.default = SetFeatureHeightDialog;

package/dist/shared/components/SetMaxHeightDialog.d.ts

@@ -1,8 +0,0 @@
-declare const SetMaxHeightDialog: (props: {
-    model: {
-        maxHeight?: number;
-        setMaxHeight: (arg?: number) => void;
-    };
-    handleClose: () => void;
-}) => import("react/jsx-runtime").JSX.Element;
-export default SetMaxHeightDialog;

package/dist/shared/components/SetMaxHeightDialog.js

@@ -1,28 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const ui_1 = require("@jbrowse/core/ui");
-const material_1 = require("@mui/material");
-const mobx_react_1 = require("mobx-react");
-const mui_1 = require("tss-react/mui");
-const useStyles = (0, mui_1.makeStyles)()({
-    root: {
-        width: 500,
-    },
-});
-const SetMaxHeightDialog = (0, mobx_react_1.observer)(function (props) {
-    const { model, handleClose } = props;
-    const { classes } = useStyles();
-    const { maxHeight = '' } = model;
-    const [max, setMax] = (0, react_1.useState)(`${maxHeight}`);
-    return ((0, jsx_runtime_1.jsx)(ui_1.Dialog, { open: true, onClose: handleClose, title: "Set max height", children: (0, jsx_runtime_1.jsxs)(material_1.DialogContent, { className: classes.root, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { children: "Set max height for the track. For example, you can increase this if the layout says \"Max height reached\"" }), (0, jsx_runtime_1.jsx)(material_1.TextField, { value: max, autoFocus: true, onChange: event => {
-                        setMax(event.target.value);
-                    }, placeholder: "Enter max height for layout" }), (0, jsx_runtime_1.jsxs)(material_1.DialogActions, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", color: "primary", type: "submit", autoFocus: true, onClick: () => {
-                                model.setMaxHeight(max !== '' && !Number.isNaN(+max) ? +max : undefined);
-                                handleClose();
-                            }, children: "Submit" }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", color: "secondary", onClick: () => {
-                                handleClose();
-                            }, children: "Cancel" })] })] }) }));
-});
-exports.default = SetMaxHeightDialog;