@jbrowse/plugin-alignments 1.7.11 → 2.0.0

package/esm/LinearAlignmentsDisplay/components/AlignmentsDisplay.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import { observer } from 'mobx-react';
+import { getConf } from '@jbrowse/core/configuration';
+import { ResizeHandle } from '@jbrowse/core/ui';
+import { makeStyles } from 'tss-react/mui';
+const useStyles = makeStyles()(() => ({
+    resizeHandle: {
+        height: 2,
+        position: 'absolute',
+        zIndex: 2,
+    },
+}));
+function AlignmentsDisplay({ model }) {
+    const { PileupDisplay, SNPCoverageDisplay, showPileup, showCoverage } = model;
+    const { classes } = useStyles();
+    const top = SNPCoverageDisplay.height;
+    return (React.createElement("div", { "data-testid": `display-${getConf(model, 'displayId')}`, style: { position: 'relative' } },
+        showCoverage ? (React.createElement(React.Fragment, null,
+            React.createElement("div", { "data-testid": "Blockset-snpcoverage" },
+                React.createElement(SNPCoverageDisplay.RenderingComponent, { model: SNPCoverageDisplay })),
+            React.createElement(ResizeHandle, { onDrag: delta => {
+                    SNPCoverageDisplay.setHeight(SNPCoverageDisplay.height + delta);
+                    return delta;
+                }, className: classes.resizeHandle, style: {
+                    top,
+                } }))) : null,
+        showPileup ? (React.createElement("div", { "data-testid": "Blockset-pileup", style: {
+                position: 'absolute',
+                top: showCoverage ? SNPCoverageDisplay.height : 0,
+            } },
+            React.createElement(PileupDisplay.RenderingComponent, { model: PileupDisplay }))) : null));
+}
+export default observer(AlignmentsDisplay);
+//# sourceMappingURL=AlignmentsDisplay.js.map

package/esm/LinearAlignmentsDisplay/components/AlignmentsDisplay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AlignmentsDisplay.js","sourceRoot":"","sources":["../../../src/LinearAlignmentsDisplay/components/AlignmentsDisplay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,OAAO,EAAE,OAAO,EAAE,MAAM,6BAA6B,CAAA;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAA;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAG1C,MAAM,SAAS,GAAG,UAAU,EAAE,CAAC,GAAG,EAAE,CAAC,CAAC;IACpC,YAAY,EAAE;QACZ,MAAM,EAAE,CAAC;QACT,QAAQ,EAAE,UAAU;QACpB,MAAM,EAAE,CAAC;KACV;CACF,CAAC,CAAC,CAAA;AAEH,SAAS,iBAAiB,CAAC,EAAE,KAAK,EAAqC;IACrE,MAAM,EAAE,aAAa,EAAE,kBAAkB,EAAE,UAAU,EAAE,YAAY,EAAE,GAAG,KAAK,CAAA;IAC7E,MAAM,EAAE,OAAO,EAAE,GAAG,SAAS,EAAE,CAAA;IAC/B,MAAM,GAAG,GAAG,kBAAkB,CAAC,MAAM,CAAA;IACrC,OAAO,CACL,4CACe,WAAW,OAAO,CAAC,KAAK,EAAE,WAAW,CAAC,EAAE,EACrD,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE;QAE9B,YAAY,CAAC,CAAC,CAAC,CACd;YACE,4CAAiB,sBAAsB;gBACrC,oBAAC,kBAAkB,CAAC,kBAAkB,IAAC,KAAK,EAAE,kBAAkB,GAAI,CAChE;YACN,oBAAC,YAAY,IACX,MAAM,EAAE,KAAK,CAAC,EAAE;oBACd,kBAAkB,CAAC,SAAS,CAAC,kBAAkB,CAAC,MAAM,GAAG,KAAK,CAAC,CAAA;oBAC/D,OAAO,KAAK,CAAA;gBACd,CAAC,EACD,SAAS,EAAE,OAAO,CAAC,YAAY,EAC/B,KAAK,EAAE;oBACL,GAAG;iBACJ,GACD,CACD,CACJ,CAAC,CAAC,CAAC,IAAI;QAEP,UAAU,CAAC,CAAC,CAAC,CACZ,4CACc,iBAAiB,EAC7B,KAAK,EAAE;gBACL,QAAQ,EAAE,UAAU;gBACpB,GAAG,EAAE,YAAY,CAAC,CAAC,CAAC,kBAAkB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;aAClD;YAED,oBAAC,aAAa,CAAC,kBAAkB,IAAC,KAAK,EAAE,aAAa,GAAI,CACtD,CACP,CAAC,CAAC,CAAC,IAAI,CACJ,CACP,CAAA;AACH,CAAC;AAED,eAAe,QAAQ,CAAC,iBAAiB,CAAC,CAAA"}

package/esm/LinearAlignmentsDisplay/index.d.ts

@@ -0,0 +1,2 @@
+import PluginManager from '@jbrowse/core/PluginManager';
+export default function (pluginManager: PluginManager): void;

package/esm/LinearAlignmentsDisplay/index.js

@@ -0,0 +1,19 @@
+import DisplayType from '@jbrowse/core/pluggableElementTypes/DisplayType';
+// locals
+import configSchemaFactory from './models/configSchema';
+import modelFactory from './models/model';
+import ReactComponent from './components/AlignmentsDisplay';
+export default function (pluginManager) {
+    pluginManager.addDisplayType(() => {
+        const configSchema = configSchemaFactory(pluginManager);
+        return new DisplayType({
+            name: 'LinearAlignmentsDisplay',
+            configSchema,
+            stateModel: modelFactory(pluginManager, configSchema),
+            trackType: 'AlignmentsTrack',
+            viewType: 'LinearGenomeView',
+            ReactComponent,
+        });
+    });
+}
+//# sourceMappingURL=index.js.map

package/esm/LinearAlignmentsDisplay/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/LinearAlignmentsDisplay/index.ts"],"names":[],"mappings":"AAAA,OAAO,WAAW,MAAM,iDAAiD,CAAA;AAEzE,SAAS;AACT,OAAO,mBAAmB,MAAM,uBAAuB,CAAA;AACvD,OAAO,YAAY,MAAM,gBAAgB,CAAA;AACzC,OAAO,cAAc,MAAM,gCAAgC,CAAA;AAE3D,MAAM,CAAC,OAAO,WAAW,aAA4B;IACnD,aAAa,CAAC,cAAc,CAAC,GAAG,EAAE;QAChC,MAAM,YAAY,GAAG,mBAAmB,CAAC,aAAa,CAAC,CAAA;QACvD,OAAO,IAAI,WAAW,CAAC;YACrB,IAAI,EAAE,yBAAyB;YAC/B,YAAY;YACZ,UAAU,EAAE,YAAY,CAAC,aAAa,EAAE,YAAY,CAAC;YACrD,SAAS,EAAE,iBAAiB;YAC5B,QAAQ,EAAE,kBAAkB;YAC5B,cAAc;SACf,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;AACJ,CAAC"}

package/esm/LinearAlignmentsDisplay/models/configSchema.d.ts

@@ -0,0 +1,4 @@
+import PluginManager from '@jbrowse/core/PluginManager';
+declare const configModelFactory: (pluginManager: PluginManager) => import("@jbrowse/core/configuration").AnyConfigurationSchemaType;
+export declare type AlignmentsConfigModel = ReturnType<typeof configModelFactory>;
+export default configModelFactory;

package/esm/LinearAlignmentsDisplay/models/configSchema.js

@@ -0,0 +1,12 @@
+import { ConfigurationSchema } from '@jbrowse/core/configuration';
+import { baseLinearDisplayConfigSchema } from '@jbrowse/plugin-linear-genome-view';
+const configModelFactory = (pluginManager) => {
+    const PileupDisplayConfigSchema = pluginManager.getDisplayType('LinearPileupDisplay').configSchema;
+    const SNPCoverageDisplayConfigSchema = pluginManager.getDisplayType('LinearSNPCoverageDisplay').configSchema;
+    return ConfigurationSchema('LinearAlignmentsDisplay', {
+        pileupDisplay: PileupDisplayConfigSchema,
+        snpCoverageDisplay: SNPCoverageDisplayConfigSchema,
+    }, { baseConfiguration: baseLinearDisplayConfigSchema, explicitlyTyped: true });
+};
+export default configModelFactory;
+//# sourceMappingURL=configSchema.js.map

package/esm/LinearAlignmentsDisplay/models/configSchema.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"configSchema.js","sourceRoot":"","sources":["../../../src/LinearAlignmentsDisplay/models/configSchema.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAA;AACjE,OAAO,EAAE,6BAA6B,EAAE,MAAM,oCAAoC,CAAA;AAGlF,MAAM,kBAAkB,GAAG,CAAC,aAA4B,EAAE,EAAE;IAC1D,MAAM,yBAAyB,GAAG,aAAa,CAAC,cAAc,CAC5D,qBAAqB,CACtB,CAAC,YAAY,CAAA;IACd,MAAM,8BAA8B,GAAG,aAAa,CAAC,cAAc,CACjE,0BAA0B,CAC3B,CAAC,YAAY,CAAA;IAEd,OAAO,mBAAmB,CACxB,yBAAyB,EACzB;QACE,aAAa,EAAE,yBAAyB;QACxC,kBAAkB,EAAE,8BAA8B;KACnD,EACD,EAAE,iBAAiB,EAAE,6BAA6B,EAAE,eAAe,EAAE,IAAI,EAAE,CAC5E,CAAA;AACH,CAAC,CAAA;AAGD,eAAe,kBAAkB,CAAA"}

package/esm/LinearAlignmentsDisplay/models/model.d.ts

@@ -0,0 +1,105 @@
+import React from 'react';
+import { AnyConfigurationModel } from '@jbrowse/core/configuration';
+import PluginManager from '@jbrowse/core/PluginManager';
+import { MenuItem } from '@jbrowse/core/ui';
+import { Instance } from 'mobx-state-tree';
+import { AlignmentsConfigModel } from './configSchema';
+declare const stateModelFactory: (pluginManager: PluginManager, configSchema: AlignmentsConfigModel) => import("mobx-state-tree").IModelType<{
+    id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
+    type: import("mobx-state-tree").ISimpleType<string>;
+    rpcDriverName: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
+} & {
+    PileupDisplay: import("mobx-state-tree").IMaybe<import("mobx-state-tree").IAnyModelType>;
+    SNPCoverageDisplay: import("mobx-state-tree").IMaybe<import("mobx-state-tree").IAnyModelType>;
+    snpCovHeight: import("mobx-state-tree").IType<number | undefined, number, number>;
+    type: import("mobx-state-tree").ISimpleType<"LinearAlignmentsDisplay">;
+    configuration: import("mobx-state-tree").ITypeUnion<any, any, any>;
+    height: import("mobx-state-tree").IType<number | undefined, number, number>;
+    showCoverage: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    showPileup: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    userFeatureScreenDensity: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<number>>;
+}, {
+    rendererTypeName: string;
+    error: unknown;
+} & {
+    readonly RenderingComponent: React.FC<{
+        model: {
+            id: string;
+            type: string;
+            rpcDriverName: string | undefined;
+        } & import("mobx-state-tree/dist/internal").NonEmptyObject & {
+            rendererTypeName: string;
+            error: unknown;
+        } & import("mobx-state-tree").IStateTreeNode<import("mobx-state-tree").IModelType<{
+            id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
+            type: import("mobx-state-tree").ISimpleType<string>;
+            rpcDriverName: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
+        }, {
+            rendererTypeName: string;
+            error: unknown;
+        }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
+        onHorizontalScroll?: Function | undefined;
+        blockState?: Record<string, any> | undefined;
+    }>;
+    readonly DisplayBlurb: React.FC<{
+        model: {
+            id: string;
+            type: string;
+            rpcDriverName: string | undefined;
+        } & import("mobx-state-tree/dist/internal").NonEmptyObject & {
+            rendererTypeName: string;
+            error: unknown;
+        } & import("mobx-state-tree").IStateTreeNode<import("mobx-state-tree").IModelType<{
+            id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
+            type: import("mobx-state-tree").ISimpleType<string>;
+            rpcDriverName: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
+        }, {
+            rendererTypeName: string;
+            error: unknown;
+        }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
+    }> | null;
+    readonly adapterConfig: any;
+    readonly parentTrack: any;
+    renderProps(): any;
+    readonly rendererType: any;
+    readonly DisplayMessageComponent: React.FC<any> | undefined;
+    trackMenuItems(): MenuItem[];
+    readonly viewMenuActions: MenuItem[];
+    regionCannotBeRendered(): undefined;
+} & {
+    setError(error?: unknown): void;
+    setRpcDriverName(rpcDriverName: string): void;
+    reload(): void;
+} & {
+    scrollTop: number;
+} & {
+    toggleCoverage(): void;
+    togglePileup(): void;
+    setScrollTop(scrollTop: number): void;
+    setSNPCoverageHeight(n: number): void;
+} & {
+    readonly pileupDisplayConfig: any;
+    getFeatureByID(blockKey: string, id: string): any;
+    searchFeatureByID(id: string): any;
+    readonly features: any;
+    readonly DisplayBlurb: any;
+    readonly sortedBy: any;
+    readonly sortedByPosition: any;
+    readonly sortedByRefName: any;
+    readonly snpCoverageDisplayConfig: any;
+    trackMenuItems(): MenuItem[];
+} & {
+    setSNPCoverageDisplay(displayConfig: AnyConfigurationModel): void;
+    setUserFeatureScreenDensity(limit: number): void;
+    setPileupDisplay(displayConfig: AnyConfigurationModel): void;
+    setHeight(displayHeight: number): number;
+    resizeHeight(distance: number): number;
+} & {
+    afterAttach(): void;
+    renderSvg(opts: {
+        rasterizeLayers?: boolean;
+    }): Promise<JSX.Element>;
+}, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>;
+export default stateModelFactory;
+export declare type AlignmentsDisplayStateModel = ReturnType<typeof stateModelFactory>;
+export declare type AlignmentsDisplayModel = Instance<AlignmentsDisplayStateModel>;

package/esm/LinearAlignmentsDisplay/models/model.js

@@ -0,0 +1,181 @@
+import React from 'react';
+import { ConfigurationReference, getConf, } from '@jbrowse/core/configuration';
+import { BaseDisplay } from '@jbrowse/core/pluggableElementTypes/models';
+import { autorun, when } from 'mobx';
+import { addDisposer, getSnapshot, types } from 'mobx-state-tree';
+import { getContainingTrack } from '@jbrowse/core/util';
+import deepEqual from 'fast-deep-equal';
+const minDisplayHeight = 20;
+const stateModelFactory = (pluginManager, configSchema) => {
+    return types
+        .compose('LinearAlignmentsDisplay', BaseDisplay, types.model({
+        PileupDisplay: types.maybe(pluginManager.getDisplayType('LinearPileupDisplay').stateModel),
+        SNPCoverageDisplay: types.maybe(pluginManager.getDisplayType('LinearSNPCoverageDisplay').stateModel),
+        snpCovHeight: 45,
+        type: types.literal('LinearAlignmentsDisplay'),
+        configuration: ConfigurationReference(configSchema),
+        height: 250,
+        showCoverage: true,
+        showPileup: true,
+        userFeatureScreenDensity: types.maybe(types.number),
+    }))
+        .volatile(() => ({
+        scrollTop: 0,
+    }))
+        .actions(self => ({
+        toggleCoverage() {
+            self.showCoverage = !self.showCoverage;
+        },
+        togglePileup() {
+            self.showPileup = !self.showPileup;
+        },
+        setScrollTop(scrollTop) {
+            self.scrollTop = scrollTop;
+        },
+        setSNPCoverageHeight(n) {
+            self.snpCovHeight = n;
+        },
+    }))
+        .views(self => {
+        const { trackMenuItems: superTrackMenuItems } = self;
+        return {
+            get pileupDisplayConfig() {
+                const conf = getConf(self, 'pileupDisplay');
+                const track = getContainingTrack(self);
+                return {
+                    ...conf,
+                    type: 'LinearPileupDisplay',
+                    name: `${getConf(track, 'name')} pileup`,
+                    displayId: `${self.configuration.displayId}_pileup_xyz`, // xyz to avoid someone accidentally naming the displayId similar to this
+                };
+            },
+            getFeatureByID(blockKey, id) {
+                return self.PileupDisplay.getFeatureByID(blockKey, id);
+            },
+            searchFeatureByID(id) {
+                return self.PileupDisplay.searchFeatureByID(id);
+            },
+            get features() {
+                return self.PileupDisplay.features;
+            },
+            get DisplayBlurb() {
+                var _a;
+                return (_a = self.PileupDisplay) === null || _a === void 0 ? void 0 : _a.DisplayBlurb;
+            },
+            get sortedBy() {
+                return self.PileupDisplay.sortedBy;
+            },
+            get sortedByPosition() {
+                return self.PileupDisplay.sortedByPosition;
+            },
+            get sortedByRefName() {
+                return self.PileupDisplay.sortedByRefName;
+            },
+            get snpCoverageDisplayConfig() {
+                const conf = getConf(self, 'snpCoverageDisplay');
+                const track = getContainingTrack(self);
+                return {
+                    ...conf,
+                    type: 'LinearSNPCoverageDisplay',
+                    name: `${getConf(track, 'name')} snp coverage`,
+                    displayId: `${self.configuration.displayId}_snpcoverage_xyz`, // xyz to avoid someone accidentally naming the displayId similar to this
+                };
+            },
+            trackMenuItems() {
+                return [
+                    ...superTrackMenuItems(),
+                    {
+                        type: 'subMenu',
+                        label: 'Pileup settings',
+                        subMenu: self.PileupDisplay.trackMenuItems(),
+                    },
+                    {
+                        type: 'subMenu',
+                        label: 'SNPCoverage settings',
+                        subMenu: self.SNPCoverageDisplay.trackMenuItems(),
+                    },
+                ];
+            },
+        };
+    })
+        .actions(self => ({
+        setSNPCoverageDisplay(displayConfig) {
+            self.SNPCoverageDisplay = {
+                type: 'LinearSNPCoverageDisplay',
+                configuration: displayConfig,
+                height: self.snpCovHeight,
+            };
+        },
+        setUserFeatureScreenDensity(limit) {
+            self.PileupDisplay.setUserFeatureScreenDensity(limit);
+            self.SNPCoverageDisplay.setUserFeatureScreenDensity(limit);
+        },
+        setPileupDisplay(displayConfig) {
+            self.PileupDisplay = {
+                type: 'LinearPileupDisplay',
+                configuration: displayConfig,
+            };
+        },
+        setHeight(displayHeight) {
+            if (displayHeight > minDisplayHeight) {
+                self.height = displayHeight;
+            }
+            else {
+                self.height = minDisplayHeight;
+            }
+            return self.height;
+        },
+        resizeHeight(distance) {
+            const oldHeight = self.height;
+            const newHeight = this.setHeight(self.height + distance);
+            return newHeight - oldHeight;
+        },
+    }))
+        .actions(self => ({
+        afterAttach() {
+            addDisposer(self, autorun(() => {
+                if (!self.SNPCoverageDisplay) {
+                    self.setSNPCoverageDisplay(self.snpCoverageDisplayConfig);
+                }
+                else if (!deepEqual(self.snpCoverageDisplayConfig, getSnapshot(self.SNPCoverageDisplay.configuration))) {
+                    self.SNPCoverageDisplay.setHeight(self.snpCovHeight);
+                    self.SNPCoverageDisplay.setConfig(self.snpCoverageDisplayConfig);
+                }
+                if (!self.PileupDisplay) {
+                    self.setPileupDisplay(self.pileupDisplayConfig);
+                }
+                else if (!deepEqual(self.pileupDisplayConfig, getSnapshot(self.PileupDisplay.configuration))) {
+                    self.PileupDisplay.setConfig(self.pileupDisplayConfig);
+                }
+                // propagate the filterBy setting from pileupdisplay to snpcoverage
+                // note: the snpcoverage display is not able to control filterBy
+                // itself
+                if (self.PileupDisplay.filterBy &&
+                    !deepEqual(getSnapshot(self.PileupDisplay.filterBy), getSnapshot(self.SNPCoverageDisplay.filterBy))) {
+                    self.SNPCoverageDisplay.setFilterBy(getSnapshot(self.PileupDisplay.filterBy));
+                }
+                if (self.PileupDisplay.colorBy &&
+                    !deepEqual(getSnapshot(self.PileupDisplay.colorBy), self.SNPCoverageDisplay.colorBy
+                        ? getSnapshot(self.SNPCoverageDisplay.colorBy)
+                        : {})) {
+                    self.SNPCoverageDisplay.setColorBy(getSnapshot(self.PileupDisplay.colorBy));
+                }
+            }));
+            addDisposer(self, autorun(() => {
+                self.setSNPCoverageHeight(self.SNPCoverageDisplay.height);
+            }));
+        },
+        async renderSvg(opts) {
+            const pileupHeight = self.height - self.SNPCoverageDisplay.height;
+            await when(() => self.PileupDisplay.ready);
+            return (React.createElement(React.Fragment, null,
+                React.createElement("g", null, await self.SNPCoverageDisplay.renderSvg(opts)),
+                React.createElement("g", { transform: `translate(0 ${self.SNPCoverageDisplay.height})` }, await self.PileupDisplay.renderSvg({
+                    ...opts,
+                    overrideHeight: pileupHeight,
+                }))));
+        },
+    }));
+};
+export default stateModelFactory;
+//# sourceMappingURL=model.js.map

package/esm/LinearAlignmentsDisplay/models/model.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"model.js","sourceRoot":"","sources":["../../../src/LinearAlignmentsDisplay/models/model.tsx"],"names":[],"mappings":"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"}

package/esm/LinearPileupDisplay/components/ColorByModifications.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { ObservableMap } from 'mobx';
+declare function ColorByTagDlg(props: {
+    model: {
+        setColorScheme: Function;
+        modificationTagMap: ObservableMap<string, string>;
+        colorBy?: {
+            type: string;
+        };
+    };
+    handleClose: () => void;
+}): JSX.Element;
+declare const _default: typeof ColorByTagDlg;
+export default _default;

package/esm/LinearPileupDisplay/components/ColorByModifications.js

@@ -0,0 +1,71 @@
+import React from 'react';
+import { observer } from 'mobx-react';
+import { Button, CircularProgress, Dialog, DialogActions, DialogContent, DialogTitle, IconButton, Typography, } from '@mui/material';
+import { makeStyles } from 'tss-react/mui';
+import CloseIcon from '@mui/icons-material/Close';
+const useStyles = makeStyles()(theme => ({
+    closeButton: {
+        position: 'absolute',
+        right: theme.spacing(1),
+        top: theme.spacing(1),
+        color: theme.palette.grey[500],
+    },
+    table: {
+        border: '1px solid #888',
+        margin: theme.spacing(4),
+        '& td': {
+            padding: theme.spacing(1),
+        },
+    },
+}));
+function ModificationTable({ modifications, }) {
+    const { classes } = useStyles();
+    return (React.createElement("table", { className: classes.table },
+        React.createElement("tbody", null, modifications.map(([key, value]) => (React.createElement("tr", { key: key },
+            React.createElement("td", null, key),
+            React.createElement("td", null, value),
+            React.createElement("td", { style: {
+                    width: '1em',
+                    background: value,
+                } })))))));
+}
+function ColorByTagDlg(props) {
+    const { classes } = useStyles();
+    const { model, handleClose } = props;
+    const { colorBy, modificationTagMap } = model;
+    const modifications = [...modificationTagMap.entries()];
+    return (React.createElement(Dialog, { open: true, onClose: handleClose },
+        React.createElement(DialogTitle, null,
+            "Color by modifications",
+            React.createElement(IconButton, { "aria-label": "close", className: classes.closeButton, onClick: handleClose },
+                React.createElement(CloseIcon, null))),
+        React.createElement(DialogContent, null,
+            React.createElement(Typography, null, "You can choose to color the modifications in the BAM/CRAM MM/ML specification using this dialog. Choosing modifications colors the modified positions and can color multiple modification types. Choosing the methylation setting colors methylated and unmethylated CpG."),
+            React.createElement(Typography, null, "Note: you can revisit this dialog to see the current mapping of colors to modification type for the modification coloring mode"),
+            React.createElement("div", { style: { margin: 20 } },
+                (colorBy === null || colorBy === void 0 ? void 0 : colorBy.type) === 'modifications' ? (React.createElement("div", null, modifications.length ? (React.createElement(React.Fragment, null,
+                    "Current modification-type-to-color mapping",
+                    React.createElement(ModificationTable, { modifications: [...modificationTagMap.entries()] }))) : (React.createElement("div", null,
+                    React.createElement(Typography, null, "Note: color by modifications is already enabled. Loading current modifications..."),
+                    React.createElement(CircularProgress, { size: 15 }))))) : null,
+                (colorBy === null || colorBy === void 0 ? void 0 : colorBy.type) === 'methylation' ? (React.createElement(ModificationTable, { modifications: [
+                        ['methylated', 'red'],
+                        ['unmethylated', 'blue'],
+                    ] })) : null),
+            React.createElement(DialogActions, null,
+                React.createElement(Button, { variant: "contained", color: "primary", style: { margin: 5 }, onClick: () => {
+                        model.setColorScheme({
+                            type: 'modifications',
+                        });
+                        handleClose();
+                    } }, "Modifications"),
+                React.createElement(Button, { variant: "contained", color: "primary", style: { margin: 5 }, onClick: () => {
+                        model.setColorScheme({
+                            type: 'methylation',
+                        });
+                        handleClose();
+                    } }, "Methylation"),
+                React.createElement(Button, { variant: "contained", color: "secondary", style: { margin: 5 }, onClick: () => handleClose() }, "Cancel")))));
+}
+export default observer(ColorByTagDlg);
+//# sourceMappingURL=ColorByModifications.js.map

package/esm/LinearPileupDisplay/components/ColorByModifications.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorByModifications.js","sourceRoot":"","sources":["../../../src/LinearPileupDisplay/components/ColorByModifications.tsx"],"names":[],"mappings":"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"}

package/esm/LinearPileupDisplay/components/ColorByTag.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+declare function ColorByTagDlg(props: {
+    model: {
+        setColorScheme: Function;
+    };
+    handleClose: () => void;
+}): JSX.Element;
+declare const _default: typeof ColorByTagDlg;
+export default _default;

package/esm/LinearPileupDisplay/components/ColorByTag.js

@@ -0,0 +1,45 @@
+import React, { useState } from 'react';
+import { observer } from 'mobx-react';
+import { Button, Dialog, DialogContent, DialogActions, DialogTitle, IconButton, TextField, Typography, } from '@mui/material';
+import { makeStyles } from 'tss-react/mui';
+import CloseIcon from '@mui/icons-material/Close';
+const useStyles = makeStyles()(theme => ({
+    root: {
+        width: 300,
+    },
+    closeButton: {
+        position: 'absolute',
+        right: theme.spacing(1),
+        top: theme.spacing(1),
+        color: theme.palette.grey[500],
+    },
+}));
+function ColorByTagDlg(props) {
+    const { classes } = useStyles();
+    const { model, handleClose } = props;
+    const [tag, setTag] = useState('');
+    const validTag = tag.match(/^[A-Za-z][A-Za-z0-9]$/);
+    return (React.createElement(Dialog, { open: true, onClose: handleClose },
+        React.createElement(DialogTitle, null,
+            "Color by tag",
+            React.createElement(IconButton, { "aria-label": "close", className: classes.closeButton, onClick: handleClose },
+                React.createElement(CloseIcon, null))),
+        React.createElement(DialogContent, { style: { overflowX: 'hidden' } },
+            React.createElement(Typography, null, "Enter tag to color by: "),
+            React.createElement(Typography, { color: "textSecondary" }, "Examples: XS or TS for RNA-seq inferred read strand, ts (lower-case) for minimap2 read strand, HP for haplotype, RG for read group, etc."),
+            React.createElement(TextField, { value: tag, onChange: event => setTag(event.target.value), placeholder: "Enter tag name", inputProps: {
+                    maxLength: 2,
+                    'data-testid': 'color-tag-name-input',
+                }, error: tag.length === 2 && !validTag, helperText: tag.length === 2 && !validTag ? 'Not a valid tag' : '', autoComplete: "off", "data-testid": "color-tag-name" }),
+            React.createElement(DialogActions, null,
+                React.createElement(Button, { variant: "contained", color: "primary", onClick: () => {
+                        model.setColorScheme({
+                            type: 'tag',
+                            tag,
+                        });
+                        handleClose();
+                    }, disabled: !validTag }, "Submit"),
+                React.createElement(Button, { variant: "contained", color: "secondary", onClick: handleClose }, "Cancel")))));
+}
+export default observer(ColorByTagDlg);
+//# sourceMappingURL=ColorByTag.js.map

package/esm/LinearPileupDisplay/components/ColorByTag.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorByTag.js","sourceRoot":"","sources":["../../../src/LinearPileupDisplay/components/ColorByTag.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,OAAO,EACL,MAAM,EACN,MAAM,EACN,aAAa,EACb,aAAa,EACb,WAAW,EACX,UAAU,EACV,SAAS,EACT,UAAU,GACX,MAAM,eAAe,CAAA;AACtB,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,SAAS,MAAM,2BAA2B,CAAA;AAEjD,MAAM,SAAS,GAAG,UAAU,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;IACvC,IAAI,EAAE;QACJ,KAAK,EAAE,GAAG;KACX;IACD,WAAW,EAAE;QACX,QAAQ,EAAE,UAAU;QACpB,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;QACvB,GAAG,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;QACrB,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;KAC/B;CACF,CAAC,CAAC,CAAA;AAEH,SAAS,aAAa,CAAC,KAGtB;IACC,MAAM,EAAE,OAAO,EAAE,GAAG,SAAS,EAAE,CAAA;IAC/B,MAAM,EAAE,KAAK,EAAE,WAAW,EAAE,GAAG,KAAK,CAAA;IACpC,MAAM,CAAC,GAAG,EAAE,MAAM,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAA;IAClC,MAAM,QAAQ,GAAG,GAAG,CAAC,KAAK,CAAC,uBAAuB,CAAC,CAAA;IAEnD,OAAO,CACL,oBAAC,MAAM,IAAC,IAAI,QAAC,OAAO,EAAE,WAAW;QAC/B,oBAAC,WAAW;;YAEV,oBAAC,UAAU,kBACE,OAAO,EAClB,SAAS,EAAE,OAAO,CAAC,WAAW,EAC9B,OAAO,EAAE,WAAW;gBAEpB,oBAAC,SAAS,OAAG,CACF,CACD;QACd,oBAAC,aAAa,IAAC,KAAK,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE;YAC3C,oBAAC,UAAU,kCAAqC;YAChD,oBAAC,UAAU,IAAC,KAAK,EAAC,eAAe,+IAGpB;YAEb,oBAAC,SAAS,IACR,KAAK,EAAE,GAAG,EACV,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,EAC7C,WAAW,EAAC,gBAAgB,EAC5B,UAAU,EAAE;oBACV,SAAS,EAAE,CAAC;oBACZ,aAAa,EAAE,sBAAsB;iBACtC,EACD,KAAK,EAAE,GAAG,CAAC,MAAM,KAAK,CAAC,IAAI,CAAC,QAAQ,EACpC,UAAU,EAAE,GAAG,CAAC,MAAM,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAE,EAClE,YAAY,EAAC,KAAK,iBACN,gBAAgB,GAC5B;YACF,oBAAC,aAAa;gBACZ,oBAAC,MAAM,IACL,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,SAAS,EACf,OAAO,EAAE,GAAG,EAAE;wBACZ,KAAK,CAAC,cAAc,CAAC;4BACnB,IAAI,EAAE,KAAK;4BACX,GAAG;yBACJ,CAAC,CAAA;wBACF,WAAW,EAAE,CAAA;oBACf,CAAC,EACD,QAAQ,EAAE,CAAC,QAAQ,aAGZ;gBACT,oBAAC,MAAM,IAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,WAAW,EAAC,OAAO,EAAE,WAAW,aAEzD,CACK,CACF,CACT,CACV,CAAA;AACH,CAAC;AAED,eAAe,QAAQ,CAAC,aAAa,CAAC,CAAA"}

package/esm/LinearPileupDisplay/components/FilterByTag.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+declare function FilterByTagDlg(props: {
+    model: {
+        filterBy?: {
+            flagExclude: number;
+            flagInclude: number;
+            readName?: string;
+            tagFilter?: {
+                tag: string;
+                value: string;
+            };
+        };
+        setFilterBy: Function;
+    };
+    handleClose: () => void;
+}): JSX.Element;
+declare const _default: typeof FilterByTagDlg;
+export default _default;