@jbrowse/plugin-alignments 3.6.4 → 3.7.0

package/esm/LinearReadCloudDisplay/model.d.ts

@@ -1,6 +1,5 @@
 import type React from 'react';
-import type { ChainData } from '../shared/fetchChains';
-import type { ColorBy, FilterBy } from '../shared/types';
+import type { ReducedFeature } from '../shared/fetchChains';
 import type { AnyConfigurationSchemaType } from '@jbrowse/core/configuration';
 import type { Instance } from 'mobx-state-tree';
 declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): import("mobx-state-tree").IModelType<{
@@ -12,12 +11,20 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
 } & {
     userBpPerPxLimit: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<number>>;
     userByteSizeLimit: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<number>>;
+} & {
+    filterBySetting: import("mobx-state-tree").IType<import("../shared/types").FilterBy | undefined, import("../shared/types").FilterBy | undefined, import("../shared/types").FilterBy | undefined>;
+    colorBySetting: import("mobx-state-tree").IType<import("../shared/types").ColorBy | undefined, import("../shared/types").ColorBy | undefined, import("../shared/types").ColorBy | undefined>;
+} & {
+    drawSingletons: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    drawProperPairs: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    flipStrandLongReadChains: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    featureHeight: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<number>>;
 } & {
     type: import("mobx-state-tree").ISimpleType<"LinearReadCloudDisplay">;
     configuration: AnyConfigurationSchemaType;
-    filterBySetting: import("mobx-state-tree").IType<FilterBy | undefined, FilterBy | undefined, FilterBy | undefined>;
-    colorBySetting: import("mobx-state-tree").IType<ColorBy | undefined, ColorBy | undefined, ColorBy | undefined>;
-    drawSingletons: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    drawCloud: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    noSpacing: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<boolean>>;
+    trackMaxHeight: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<number>>;
 }, {
     rendererTypeName: string;
     error: unknown;
@@ -112,57 +119,70 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
     regionCannotBeRendered(_region: import("@jbrowse/core/util").Region): import("react/jsx-runtime").JSX.Element | null;
 } & {
     loading: boolean;
-    chainData: ChainData | undefined;
+    chainData: import("../shared/fetchChains").ChainData | undefined;
     lastDrawnOffsetPx: number | undefined;
     lastDrawnBpPerPx: number;
     ref: HTMLCanvasElement | null;
 } & {
-    readonly colorBy: any;
-    readonly filterBy: any;
-} & {
-    setDrawSingletons(f: boolean): void;
     setLastDrawnOffsetPx(n: number): void;
     setLastDrawnBpPerPx(n: number): void;
     setLoading(f: boolean): void;
-    reload(): void;
     setRef(ref: HTMLCanvasElement | null): void;
     setColorScheme(colorBy: {
         type: string;
     }): void;
-    setChainData(args: ChainData): void;
-    setFilterBy(filter: FilterBy): void;
+    setChainData(args: import("../shared/fetchChains").ChainData): void;
+    setFilterBy(filter: import("../shared/types").FilterBy): void;
 } & {
     readonly drawn: boolean;
+} & {
+    featureLayout: import("@jbrowse/core/util/flatbush").default | undefined;
+    mouseoverRef: HTMLCanvasElement | null;
+    featuresForFlatbush: import("../shared/flatbushType").FlatbushEntry[];
+} & {
+    setFeatureLayout(layout: import("@jbrowse/core/util/flatbush").default): void;
+    setMouseoverRef(ref: HTMLCanvasElement | null): void;
+    setFeaturesForFlatbush(features: import("../shared/flatbushType").FlatbushEntry[]): void;
+} & {
+    setDrawSingletons(f: boolean): void;
+    setDrawProperPairs(f: boolean): void;
+    setFlipStrandLongReadChains(f: boolean): void;
+    setFeatureHeight(n?: number): void;
+} & {
+    layoutHeight: number;
+} & {
+    readonly colorBy: any;
+    readonly filterBy: any;
+    readonly featureHeightSetting: any;
+} & {
+    reload(): void;
+    setNoSpacing(flag?: boolean): void;
+    setMaxHeight(n?: number): void;
+    setLayoutHeight(n: number): void;
+    selectFeature(chain: ReducedFeature[]): void;
+    setDrawCloud(b: boolean): void;
 } & {
     renderProps(): any;
     trackMenuItems(): (import("@jbrowse/core/ui").MenuDivider | import("@jbrowse/core/ui").MenuSubHeader | import("@jbrowse/core/ui").NormalMenuItem | import("@jbrowse/core/ui").CheckboxMenuItem | import("@jbrowse/core/ui").RadioMenuItem | import("@jbrowse/core/ui").SubMenuItem | {
-        label: string;
-        type: string;
-        checked: boolean;
-        onClick: () => void;
-        icon?: undefined;
-        subMenu?: undefined;
-    } | {
         label: string;
         icon: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
             muiName: string;
         };
-        onClick: () => void;
-        type?: undefined;
-        checked?: undefined;
-        subMenu?: undefined;
+        subMenu: {
+            label: string;
+            onClick: () => void;
+        }[];
     } | {
         label: string;
         icon: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
             muiName: string;
         };
-        subMenu: {
-            label: string;
-            onClick: () => void;
-        }[];
-        type?: undefined;
-        checked?: undefined;
-        onClick?: undefined;
+        onClick: () => void;
+    } | {
+        label: string;
+        type: string;
+        checked: boolean;
+        onClick: () => void;
     })[];
     renderSvg(opts: {
         rasterizeLayers?: boolean;

package/esm/LinearReadCloudDisplay/model.js

@@ -1,27 +1,26 @@
 import { lazy } from 'react';
 import { ConfigurationReference, getConf } from '@jbrowse/core/configuration';
 import { BaseDisplay } from '@jbrowse/core/pluggableElementTypes';
-import { getSession } from '@jbrowse/core/util';
+import { getContainingTrack, getContainingView, getSession, isSessionModelWithWidgets, } from '@jbrowse/core/util';
 import { FeatureDensityMixin, TrackHeightMixin, } from '@jbrowse/plugin-linear-genome-view';
-import FilterListIcon from '@mui/icons-material/ClearAll';
-import PaletteIcon from '@mui/icons-material/Palette';
 import { types } from 'mobx-state-tree';
-const FilterByTagDialog = lazy(() => import('../shared/components/FilterByTagDialog'));
+import { LinearReadDisplayBaseMixin } from '../shared/LinearReadDisplayBaseMixin';
+import { LinearReadDisplayWithLayoutMixin } from '../shared/LinearReadDisplayWithLayoutMixin';
+import { LinearReadDisplayWithPairFiltersMixin } from '../shared/LinearReadDisplayWithPairFiltersMixin';
+import { chainToSimpleFeature } from '../shared/chainToSimpleFeature';
+import { getColorSchemeMenuItem, getFilterByMenuItem, } from '../shared/menuItems';
+const SetFeatureHeightDialog = lazy(() => import('./components/SetFeatureHeightDialog'));
 function stateModelFactory(configSchema) {
     return types
-        .compose('LinearReadCloudDisplay', BaseDisplay, TrackHeightMixin(), FeatureDensityMixin(), types.model({
+        .compose('LinearReadCloudDisplay', BaseDisplay, TrackHeightMixin(), FeatureDensityMixin(), LinearReadDisplayBaseMixin(), LinearReadDisplayWithLayoutMixin(), LinearReadDisplayWithPairFiltersMixin(), types.model({
         type: types.literal('LinearReadCloudDisplay'),
         configuration: ConfigurationReference(configSchema),
-        filterBySetting: types.frozen(),
-        colorBySetting: types.frozen(),
-        drawSingletons: true,
+        drawCloud: false,
+        noSpacing: types.maybe(types.boolean),
+        trackMaxHeight: types.maybe(types.number),
     }))
         .volatile(() => ({
-        loading: false,
-        chainData: undefined,
-        lastDrawnOffsetPx: undefined,
-        lastDrawnBpPerPx: 0,
-        ref: null,
+        layoutHeight: 0,
     }))
         .views(self => ({
         get colorBy() {
@@ -32,43 +31,39 @@ function stateModelFactory(configSchema) {
             var _a;
             return (_a = self.filterBySetting) !== null && _a !== void 0 ? _a : getConf(self, 'filterBy');
         },
+        get featureHeightSetting() {
+            var _a;
+            return (_a = self.featureHeight) !== null && _a !== void 0 ? _a : getConf(self, 'featureHeight');
+        },
     }))
         .actions(self => ({
-        setDrawSingletons(f) {
-            self.drawSingletons = f;
-        },
-        setLastDrawnOffsetPx(n) {
-            self.lastDrawnOffsetPx = n;
-        },
-        setLastDrawnBpPerPx(n) {
-            self.lastDrawnBpPerPx = n;
-        },
-        setLoading(f) {
-            self.loading = f;
-        },
         reload() {
             self.error = undefined;
         },
-        setRef(ref) {
-            self.ref = ref;
+        setNoSpacing(flag) {
+            self.noSpacing = flag;
         },
-        setColorScheme(colorBy) {
-            self.colorBySetting = {
-                ...colorBy,
-            };
+        setMaxHeight(n) {
+            self.trackMaxHeight = n;
         },
-        setChainData(args) {
-            self.chainData = args;
+        setLayoutHeight(n) {
+            self.layoutHeight = n;
         },
-        setFilterBy(filter) {
-            self.filterBySetting = {
-                ...filter,
-            };
+        selectFeature(chain) {
+            const session = getSession(self);
+            const syntheticFeature = chainToSimpleFeature(chain);
+            if (isSessionModelWithWidgets(session)) {
+                const featureWidget = session.addWidget('AlignmentsFeatureWidget', 'alignmentFeature', {
+                    featureData: syntheticFeature.toJSON(),
+                    view: getContainingView(self),
+                    track: getContainingTrack(self),
+                });
+                session.showWidget(featureWidget);
+            }
+            session.setSelection(syntheticFeature);
         },
-    }))
-        .views(self => ({
-        get drawn() {
-            return self.lastDrawnOffsetPx !== undefined;
+        setDrawCloud(b) {
+            self.drawCloud = b;
         },
     }))
         .views(self => {
@@ -84,59 +79,82 @@ function stateModelFactory(configSchema) {
                 return [
                     ...superTrackMenuItems(),
                     {
-                        label: 'Draw singletons',
-                        type: 'checkbox',
-                        checked: self.drawSingletons,
-                        onClick: () => {
-                            self.setDrawSingletons(!self.drawSingletons);
-                        },
-                    },
-                    {
-                        label: 'Filter by',
-                        icon: FilterListIcon,
-                        onClick: () => {
-                            getSession(self).queueDialog(handleClose => [
-                                FilterByTagDialog,
-                                { model: self, handleClose },
-                            ]);
-                        },
-                    },
-                    {
-                        label: 'Color scheme',
-                        icon: PaletteIcon,
+                        label: 'Set feature height...',
                         subMenu: [
                             {
-                                label: 'Insert size ± 3σ and orientation',
-                                onClick: () => {
-                                    self.setColorScheme({ type: 'insertSizeAndOrientation' });
-                                },
-                            },
-                            {
-                                label: 'Insert size ± 3σ',
+                                label: 'Normal',
                                 onClick: () => {
-                                    self.setColorScheme({ type: 'insertSize' });
+                                    self.setFeatureHeight(7);
+                                    self.setNoSpacing(false);
                                 },
                             },
                             {
-                                label: 'Orientation',
+                                label: 'Compact',
                                 onClick: () => {
-                                    self.setColorScheme({ type: 'orientation' });
+                                    self.setFeatureHeight(3);
+                                    self.setNoSpacing(true);
                                 },
                             },
                             {
-                                label: 'Insert size gradient',
+                                label: 'Manually set height...',
                                 onClick: () => {
-                                    self.setColorScheme({ type: 'gradient' });
+                                    getSession(self).queueDialog(handleClose => [
+                                        SetFeatureHeightDialog,
+                                        {
+                                            model: self,
+                                            handleClose,
+                                        },
+                                    ]);
                                 },
                             },
                         ],
                     },
+                    {
+                        label: 'Toggle read cloud (y-coordinate proportional to TLEN)',
+                        type: 'checkbox',
+                        checked: self.drawCloud,
+                        onClick: () => {
+                            self.setDrawCloud(!self.drawCloud);
+                        },
+                    },
+                    {
+                        label: 'Draw singletons',
+                        type: 'checkbox',
+                        checked: self.drawSingletons,
+                        onClick: () => {
+                            self.setDrawSingletons(!self.drawSingletons);
+                        },
+                    },
+                    {
+                        label: 'Draw proper pairs',
+                        type: 'checkbox',
+                        checked: self.drawProperPairs,
+                        onClick: () => {
+                            self.setDrawProperPairs(!self.drawProperPairs);
+                        },
+                    },
+                    {
+                        label: 'Flip strand relative to primary alignment for long read chains',
+                        type: 'checkbox',
+                        checked: self.flipStrandLongReadChains,
+                        onClick: () => {
+                            self.setFlipStrandLongReadChains(!self.flipStrandLongReadChains);
+                        },
+                    },
+                    getFilterByMenuItem(self),
+                    getColorSchemeMenuItem(self),
                 ];
             },
             async renderSvg(opts) {
                 const { renderSvg } = await import('../shared/renderSvgUtil');
-                const { drawFeats } = await import('./drawFeats');
-                return renderSvg(self, opts, drawFeats);
+                if (self.drawCloud) {
+                    const { drawFeats } = await import('./drawFeatsCloud');
+                    return renderSvg(self, opts, drawFeats);
+                }
+                else {
+                    const { drawFeats } = await import('./drawFeatsStack');
+                    return renderSvg(self, opts, drawFeats);
+                }
             },
         };
     })
@@ -146,7 +164,7 @@ function stateModelFactory(configSchema) {
             (async () => {
                 try {
                     const { doAfterAttach } = await import('../shared/afterAttach');
-                    const { drawFeats } = await import('./drawFeats');
+                    const { drawFeats } = await import('./drawFeatsAbstract');
                     doAfterAttach(self, drawFeats);
                 }
                 catch (e) {

package/esm/LinearSNPCoverageDisplay/components/TooltipContents.d.ts

@@ -4,7 +4,10 @@ interface Props {
     model: {
         visibleModifications: Map<string, {
             color: string;
+            base: string;
+            strand: string;
         }>;
+        simplexModifications?: Set<string>;
     };
 }
 declare const TooltipContents: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<HTMLDivElement>>;

package/esm/LinearSNPCoverageDisplay/components/TooltipContents.js

@@ -1,22 +1,160 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { toLocale } from '@jbrowse/core/util';
 import { makeStyles } from 'tss-react/mui';
+import { getModificationName } from '../../shared/modificationData';
 const useStyles = makeStyles()(() => ({
     td: {
         whiteSpace: 'nowrap',
     },
+    table: {
+        width: '100%',
+        tableLayout: 'auto',
+    },
 }));
-const toP = (s = 0) => +(+s).toFixed(1);
+const toP = (s = 0) => +s.toFixed(1);
 const pct = (n, total = 1) => `${toP((n / (total || 1)) * 100)}%`;
-function ColorSquare({ base, model, }) {
+function getModificationColor(base, model) {
     var _a;
-    const { visibleModifications } = model;
-    return base.startsWith('mod_') ? (_jsx("div", { style: {
-            width: 10,
-            height: 10,
-            background: (_a = visibleModifications.get(base.replace('mod_', ''))) === null || _a === void 0 ? void 0 : _a.color,
-        } })) : null;
+    if (!base.startsWith('mod_') && !base.startsWith('nonmod_')) {
+        return undefined;
+    }
+    if (base.startsWith('nonmod_')) {
+        return 'blue';
+    }
+    return (_a = model.visibleModifications.get(base.replace(/^mod_/, ''))) === null || _a === void 0 ? void 0 : _a.color;
+}
+function isModification(base) {
+    return base.startsWith('mod_') || base.startsWith('nonmod_');
+}
+function getModificationType(base) {
+    return base.replace(/^(mod_|nonmod_)/, '');
+}
+function formatStrandCounts(score) {
+    const neg = score['-1'] ? `${score['-1']}(-)` : '';
+    const pos = score['1'] ? `${score['1']}(+)` : '';
+    return neg + pos;
+}
+function shouldShowPercentage(base) {
+    return base !== 'depth' && base !== 'skip';
+}
+function getModificationLabel(base, model) {
+    const isNonmod = base.startsWith('nonmod_');
+    if (isNonmod) {
+        const genomicBase = base.replace('nonmod_', '');
+        return `Unmodified ${genomicBase}`;
+    }
+    const modType = getModificationType(base);
+    const mod = model.visibleModifications.get(modType);
+    if (mod) {
+        const modName = getModificationName(modType);
+        return modName;
+    }
+    return base.toUpperCase();
+}
+function getDuplexModificationLabel(base, model) {
+    const isNonmod = base.startsWith('nonmod_');
+    if (isNonmod) {
+        const genomicBase = base.replace('nonmod_', '');
+        return `Unmodified ${genomicBase}`;
+    }
+    const modType = getModificationType(base);
+    const mod = model.visibleModifications.get(modType);
+    if (!mod) {
+        return base.toUpperCase();
+    }
+    const modName = getModificationName(modType);
+    return modName;
+}
+function ColorSquare({ base, model }) {
+    const color = getModificationColor(base, model);
+    if (!color) {
+        return null;
+    }
+    return _jsx("div", { style: { width: 10, height: 10, background: color } });
+}
+function TableHeader() {
+    return (_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", {}), _jsx("th", { children: "Base" }), _jsx("th", { children: "Count" }), _jsx("th", { children: "% of Reads" }), _jsx("th", { children: "Strands" }), _jsx("th", { children: "Avg Prob" })] }) }));
+}
+function TotalRow({ readsCounted }) {
+    return (_jsxs("tr", { children: [_jsx("td", {}), _jsx("td", { children: "Total" }), _jsx("td", { children: readsCounted }), _jsx("td", { children: " " }), _jsx("td", { children: " " }), _jsx("td", { children: " " })] }));
+}
+function RefRow({ referenceBase, reference, readsCounted, }) {
+    return (_jsxs("tr", { children: [_jsx("td", {}), _jsxs("td", { children: ["REF ", referenceBase ? `(${referenceBase.toUpperCase()})` : ''] }), _jsx("td", { children: reference.entryDepth }), _jsx("td", { children: pct(reference.entryDepth, readsCounted) }), _jsx("td", { children: formatStrandCounts(reference) }), _jsx("td", { children: " " })] }));
+}
+function DuplexModificationRow({ base, score, readsCounted, model, tdClass, rowKey, }) {
+    return (_jsxs("tr", { children: [_jsx("td", { children: _jsx(ColorSquare, { model: model, base: base }) }), _jsx("td", { children: getDuplexModificationLabel(base, model) }), _jsx("td", { className: tdClass, children: score.entryDepth }), _jsx("td", { children: shouldShowPercentage(base)
+                    ? pct(score.entryDepth, readsCounted)
+                    : '---' }), _jsx("td", { children: formatStrandCounts(score) }), _jsx("td", { children: score.avgProbability !== undefined ? pct(score.avgProbability) : '' })] }, rowKey));
+}
+function SimplexOrRegularRow({ base, score, isMod, readsCounted, model, tdClass, rowKey, }) {
+    return (_jsxs("tr", { children: [_jsx("td", { children: _jsx(ColorSquare, { model: model, base: base }) }), _jsx("td", { children: isMod ? getModificationLabel(base, model) : base.toUpperCase() }), _jsx("td", { className: tdClass, children: score.entryDepth }), _jsx("td", { children: shouldShowPercentage(base)
+                    ? pct(score.entryDepth, readsCounted)
+                    : '---' }), _jsx("td", { children: formatStrandCounts(score) }), _jsx("td", { children: score.avgProbability !== undefined ? pct(score.avgProbability) : '' })] }, rowKey));
+}
+function ModificationRows({ info, readsCounted, model, tdClass, }) {
+    const consolidatedEntries = {};
+    for (const [key, entry] of Object.entries(info)) {
+        for (const [base, score] of Object.entries(entry)) {
+            const isNonmod = base.startsWith('nonmod_');
+            if (isNonmod) {
+                const modType = getModificationType(base);
+                const mod = model.visibleModifications.get(modType);
+                const genomicBase = (mod === null || mod === void 0 ? void 0 : mod.base) || 'X';
+                const consolidatedKey = `${key}_nonmod_${genomicBase}`;
+                if (!consolidatedEntries[consolidatedKey]) {
+                    consolidatedEntries[consolidatedKey] = {
+                        base: `nonmod_${genomicBase}`,
+                        score: {
+                            entryDepth: 0,
+                            '1': 0,
+                            '-1': 0,
+                            avgProbability: 0,
+                        },
+                        isNonmod: true,
+                    };
+                }
+                const consolidated = consolidatedEntries[consolidatedKey];
+                consolidated.score.entryDepth += score.entryDepth;
+                consolidated.score['1'] += score['1'];
+                consolidated.score['-1'] += score['-1'];
+                if (score.avgProbability !== undefined) {
+                    const prevAvg = consolidated.score.avgProbability || 0;
+                    const prevCount = consolidated.score.entryDepth - score.entryDepth;
+                    consolidated.score.avgProbability =
+                        prevCount > 0
+                            ? (prevAvg * prevCount +
+                                score.avgProbability * score.entryDepth) /
+                                consolidated.score.entryDepth
+                            : score.avgProbability;
+                }
+            }
+            else {
+                consolidatedEntries[`${key}_${base}`] = {
+                    base,
+                    score: { ...score },
+                    isNonmod: false,
+                };
+            }
+        }
+    }
+    return (_jsx(_Fragment, { children: Object.entries(consolidatedEntries).map(([rowKey, { base, score, isNonmod }]) => {
+            var _a;
+            const modType = getModificationType(base);
+            const isMod = isModification(base) || isNonmod;
+            const isSimplex = !isNonmod && isMod && ((_a = model.simplexModifications) === null || _a === void 0 ? void 0 : _a.has(modType));
+            const posStrandCount = score['1'] || 0;
+            const negStrandCount = score['-1'] || 0;
+            if (isNonmod) {
+                return (_jsx(SimplexOrRegularRow, { base: base, score: score, isMod: true, isSimplex: false, readsCounted: readsCounted, model: model, tdClass: tdClass, rowKey: rowKey }, rowKey));
+            }
+            if (isMod &&
+                !isSimplex &&
+                (posStrandCount > 0 || negStrandCount > 0)) {
+                return (_jsx(DuplexModificationRow, { base: base, score: score, posStrandCount: posStrandCount, negStrandCount: negStrandCount, readsCounted: readsCounted, model: model, tdClass: tdClass, rowKey: rowKey }, rowKey));
+            }
+            return (_jsx(SimplexOrRegularRow, { base: base, score: score, isMod: isMod, isSimplex: isSimplex, readsCounted: readsCounted, model: model, tdClass: tdClass, rowKey: rowKey }, rowKey));
+        }) }));
 }
 const TooltipContents = forwardRef(function TooltipContents2(props, reactRef) {
     const { feature, model } = props;
@@ -24,7 +162,7 @@ const TooltipContents = forwardRef(function TooltipContents2(props, reactRef) {
     const start = feature.get('start') + 1;
     const end = feature.get('end');
     const name = feature.get('refName');
-    const { refbase, readsCounted, depth, ref, ...info } = feature.get('snpinfo');
+    const { refbase: referenceBase, readsCounted, depth, ref: reference, ...info } = feature.get('snpinfo');
     return (_jsx("div", { ref: reactRef, children: _jsxs("table", { children: [_jsx("caption", { children: [
                         name,
                         start === end
@@ -32,15 +170,6 @@ const TooltipContents = forwardRef(function TooltipContents2(props, reactRef) {
                             : `${toLocale(start)}..${toLocale(end)}`,
                     ]
                         .filter(f => !!f)
-                        .join(':') }), _jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", {}), _jsx("th", { children: "Base" }), _jsx("th", { children: "Count" }), _jsx("th", { children: "% of Total" }), _jsx("th", { children: "Strands" })] }) }), _jsxs("tbody", { children: [_jsxs("tr", { children: [_jsx("td", {}), _jsx("td", { children: "Total" }), _jsx("td", { children: readsCounted }), _jsx("td", { children: " " }), _jsx("td", { children: " " })] }), _jsxs("tr", { children: [_jsx("td", {}), _jsxs("td", { children: ["REF ", refbase ? `(${refbase.toUpperCase()})` : ''] }), _jsx("td", { children: ref.entryDepth }), _jsx("td", { children: pct(ref.entryDepth, readsCounted) }), _jsxs("td", { children: [ref['-1'] ? `${ref['-1']}(-)` : '', ref['1'] ? `${ref['1']}(+)` : ''] })] }), Object.entries(info).map(([key, entry]) => Object.entries(entry).map(([base, score]) => (_jsxs("tr", { children: [_jsx("td", { children: _jsx(ColorSquare, { model: model, base: base }) }), _jsxs("td", { children: [base.toUpperCase(), " "] }), _jsx("td", { className: classes.td, children: [
-                                        score.entryDepth,
-                                        score.avgProbability !== undefined
-                                            ? `(avg. ${pct(score.avgProbability)} prob.)`
-                                            : '',
-                                    ]
-                                        .filter(f => !!f)
-                                        .join(' ') }), _jsx("td", { children: base === 'depth' || base === 'skip'
-                                        ? '---'
-                                        : pct(score.entryDepth, readsCounted) }), _jsxs("td", { children: [score['-1'] ? `${score['-1']}(-)` : '', score['1'] ? `${score['1']}(+)` : ''] })] }, `${key}_${base}`))))] })] }) }));
+                        .join(':') }), _jsx(TableHeader, {}), _jsxs("tbody", { children: [_jsx(TotalRow, { readsCounted: readsCounted }), _jsx(RefRow, { referenceBase: referenceBase, reference: reference, readsCounted: readsCounted }), _jsx(ModificationRows, { info: info, readsCounted: readsCounted, model: model, tdClass: classes.td })] })] }) }));
 });
 export default TooltipContents;

package/esm/LinearSNPCoverageDisplay/model.js

@@ -23,6 +23,7 @@ function stateModelFactory(pluginManager, configSchema) {
     }))
         .volatile(() => ({
         visibleModifications: observable.map({}),
+        simplexModifications: new Set(),
         modificationsReady: false,
     }))
         .views(self => ({
@@ -64,10 +65,17 @@ function stateModelFactory(pluginManager, configSchema) {
                 }
             }
         },
+        setSimplexModifications(simplex) {
+            self.simplexModifications = new Set(simplex);
+        },
     }))
         .views(self => {
         const { adapterProps: superAdapterProps } = self;
         return {
+            get modificationThreshold() {
+                var _a, _b, _c;
+                return (_c = (_b = (_a = self.colorBy) === null || _a === void 0 ? void 0 : _a.modifications) === null || _b === void 0 ? void 0 : _b.threshold) !== null && _c !== void 0 ? _c : 10;
+            },
             get rendererConfig() {
                 const configBlob = getConf(self, ['renderers', self.rendererTypeName]) || {};
                 const { showArcs, showInterbaseCounts, showInterbaseIndicators } = self;
@@ -103,6 +111,7 @@ function stateModelFactory(pluginManager, configSchema) {
                     ...superProps,
                     filters,
                     filterBy,
+                    modificationThreshold: this.modificationThreshold,
                 };
             },
         };
@@ -132,13 +141,14 @@ function stateModelFactory(pluginManager, configSchema) {
                 const { staticBlocks } = view;
                 const { colorBy } = self;
                 if ((colorBy === null || colorBy === void 0 ? void 0 : colorBy.type) === 'modifications') {
-                    const vals = await getUniqueModifications({
+                    const { modifications, simplexModifications } = await getUniqueModifications({
                         model: self,
                         adapterConfig: getConf(self.parentTrack, 'adapter'),
                         blocks: staticBlocks,
                     });
                     if (isAlive(self)) {
-                        self.updateVisibleModifications(vals);
+                        self.updateVisibleModifications(modifications);
+                        self.setSimplexModifications(simplexModifications);
                         self.setModificationsReady(true);
                     }
                 }
@@ -156,12 +166,13 @@ function stateModelFactory(pluginManager, configSchema) {
                 return !superProps.notReady && self.modificationsReady;
             },
             renderProps() {
-                const { colorBy, visibleModifications } = self;
+                const { colorBy, visibleModifications, simplexModifications } = self;
                 return {
                     ...superRenderProps(),
                     notReady: !this.renderReady(),
                     colorBy,
                     visibleModifications: Object.fromEntries(visibleModifications.toJSON()),
+                    simplexModifications: [...simplexModifications],
                 };
             },
             get TooltipComponent() {

package/esm/MismatchParser/cigarToMismatches.js

@@ -27,6 +27,7 @@ export function cigarToMismatches(ops, seq, ref, qual) {
                 start: roffset,
                 type: 'insertion',
                 base: `${len}`,
+                insertedBases: seq === null || seq === void 0 ? void 0 : seq.slice(soffset, soffset + len),
                 length: 0,
             });
             soffset += len;

package/esm/ModificationParser/detectSimplexModifications.d.ts

@@ -0,0 +1,4 @@
+import type { ModificationType } from '../shared/types';
+type ModificationTypeList = readonly ModificationType[];
+export declare function detectSimplexModifications(modifications: ModificationTypeList): ReadonlySet<string>;
+export {};