@jbrowse/plugin-alignments 2.16.1 → 2.18.0

package/dist/LinearPileupDisplay/components/GroupByDialog.js

@@ -24,41 +24,37 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importStar(require("react"));
-const mobx_react_1 = require("mobx-react");
-const material_1 = require("@mui/material");
 const ui_1 = require("@jbrowse/core/ui");
-const mobx_state_tree_1 = require("mobx-state-tree");
 const util_1 = require("@jbrowse/core/util");
-// locals
-const shared_1 = require("../../shared");
-function clone(c) {
-    return JSON.parse(JSON.stringify(c));
-}
+const material_1 = require("@mui/material");
+const mobx_react_1 = require("mobx-react");
+const mobx_state_tree_1 = require("mobx-state-tree");
+const getUniqueTags_1 = require("../../shared/getUniqueTags");
+const util_2 = require("../../shared/util");
 const GroupByTagDialog = (0, mobx_react_1.observer)(function (props) {
     const { model, handleClose } = props;
-    const [tag, setTag] = (0, react_1.useState)('');
-    const [tagSet, setTagSet] = (0, react_1.useState)();
+    const [tag, setGroupByTag] = (0, react_1.useState)('');
+    const [tagSet, setGroupByTagSet] = (0, react_1.useState)();
     const [loading, setLoading] = (0, react_1.useState)(false);
     const [error, setError] = (0, react_1.useState)();
-    const [includeUndefined, setIncludeUndefined] = (0, react_1.useState)(true);
     const validTag = /^[A-Za-z][A-Za-z0-9]$/.exec(tag);
     const isInvalid = tag.length === 2 && !validTag;
     const debouncedTag = (0, util_1.useDebounce)(tag, 1000);
+    const [type, setType] = (0, react_1.useState)('');
     (0, react_1.useEffect)(() => {
-        // eslint-disable-next-line @typescript-eslint/no-floating-promises
         ;
         (async () => {
             try {
                 if (!isInvalid) {
                     setError(undefined);
                     setLoading(true);
-                    const vals = await (0, shared_1.getUniqueTagValues)({
+                    const vals = await (0, getUniqueTags_1.getUniqueTags)({
                         self: model,
                         tag: debouncedTag,
                         blocks: (0, util_1.getContainingView)(model)
                             .staticBlocks,
                     });
-                    setTagSet(vals);
+                    setGroupByTagSet(vals);
                 }
             }
             catch (e) {
@@ -70,55 +66,114 @@ const GroupByTagDialog = (0, mobx_react_1.observer)(function (props) {
             }
         })();
     }, [model, isInvalid, debouncedTag]);
-    return (react_1.default.createElement(ui_1.Dialog, { open: true, onClose: handleClose, title: "Group by tag" },
+    return (react_1.default.createElement(ui_1.Dialog, { open: true, onClose: handleClose, title: "Group by" },
         react_1.default.createElement(material_1.DialogContent, null,
-            react_1.default.createElement(material_1.Typography, null, "Set the tag to group by. NOTE: this will make a set of fully functional subtracks with the filter by by default set to the values of the tag that are visible in the current view"),
-            react_1.default.createElement(material_1.Typography, { color: "textSecondary" }, "Examples: HP for haplotype, RG for read group, etc."),
-            react_1.default.createElement(material_1.FormControlLabel, { control: react_1.default.createElement(material_1.Checkbox, { checked: includeUndefined, onChange: () => {
-                        setIncludeUndefined(!includeUndefined);
-                    } }), label: "Make a new subtrack for undefined values of tag as well?" }),
-            react_1.default.createElement(material_1.TextField, { value: tag, onChange: event => {
-                    setTag(event.target.value);
-                }, placeholder: "Enter tag name", inputProps: {
-                    maxLength: 2,
-                    'data-testid': 'group-tag-name-input',
-                }, error: isInvalid, helperText: isInvalid ? 'Not a valid tag' : '', autoComplete: "off", "data-testid": "group-tag-name" }),
-            error ? (react_1.default.createElement(ui_1.ErrorMessage, { error: error })) : loading ? (react_1.default.createElement(ui_1.LoadingEllipses, { title: "Loading unique tags" })) : tagSet ? (react_1.default.createElement("div", null,
-                react_1.default.createElement("div", null,
-                    "Found unique ",
-                    tag,
-                    " values:"),
-                react_1.default.createElement("div", null, tagSet.join(', ')))) : null),
+            react_1.default.createElement(material_1.Typography, null, "NOTE: this will create new session tracks with the \"filter by\" set to the values chosen here rather than affecting the current track state"),
+            react_1.default.createElement(material_1.TextField, { fullWidth: true, value: type, onChange: event => {
+                    setType(event.target.value);
+                }, label: "Group by...", select: true },
+                react_1.default.createElement(material_1.MenuItem, { value: "strand" }, "Strand"),
+                react_1.default.createElement(material_1.MenuItem, { value: "tag" }, "Tag")),
+            type === 'tag' ? (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(material_1.Typography, { color: "textSecondary" }, "Examples: HP for haplotype, RG for read group, etc."),
+                react_1.default.createElement(material_1.TextField, { value: tag, onChange: event => {
+                        setGroupByTag(event.target.value);
+                    }, placeholder: "Enter tag name", error: isInvalid, helperText: isInvalid ? 'Not a valid tag' : '', autoComplete: "off", "data-testid": "group-tag-name", slotProps: {
+                        htmlInput: {
+                            maxLength: 2,
+                            'data-testid': 'group-tag-name-input',
+                        },
+                    } }),
+                error ? (react_1.default.createElement(ui_1.ErrorMessage, { error: error })) : loading ? (react_1.default.createElement(ui_1.LoadingEllipses, { title: "Loading unique tags" })) : tagSet ? (react_1.default.createElement("div", null,
+                    react_1.default.createElement("div", null,
+                        "Found unique ",
+                        tag,
+                        " values:"),
+                    react_1.default.createElement("div", null, tagSet.join(', ')))) : null)) : null),
         react_1.default.createElement(material_1.DialogActions, null,
             react_1.default.createElement(material_1.Button, { variant: "contained", color: "primary", type: "submit", disabled: !tagSet, autoFocus: true, onClick: () => {
                     const track = (0, util_1.getContainingTrack)(model);
-                    const trackConf = clone((0, mobx_state_tree_1.getSnapshot)(track.configuration));
+                    const trackConf = structuredClone((0, mobx_state_tree_1.getSnapshot)(track.configuration));
                     const session = (0, util_1.getSession)(model);
-                    if (tagSet) {
-                        const ret = [...tagSet];
-                        if (includeUndefined) {
-                            ret.push(undefined);
+                    const view = (0, util_1.getContainingView)(model);
+                    if (type === 'tag') {
+                        if (tagSet) {
+                            const ret = [...tagSet, undefined];
+                            for (const tagValue of ret) {
+                                const t1 = `${trackConf.trackId}-${tag}:${tagValue}-${+Date.now()}-sessionTrack`;
+                                session.addTrackConf({
+                                    ...trackConf,
+                                    trackId: t1,
+                                    name: `${trackConf.name} (-)`,
+                                    displays: [
+                                        {
+                                            displayId: `${t1}-LinearAlignmentsDisplay`,
+                                            type: 'LinearAlignmentsDisplay',
+                                            pileupDisplay: {
+                                                displayId: `${t1}-LinearAlignmentsDisplay-LinearPileupDisplay`,
+                                                type: 'LinearPileupDisplay',
+                                                filterBy: {
+                                                    ...util_2.defaultFilterFlags,
+                                                    tagFilter: {
+                                                        tag,
+                                                        value: tagValue,
+                                                    },
+                                                },
+                                            },
+                                        },
+                                    ],
+                                });
+                                view.showTrack(t1);
+                            }
                         }
-                        for (const tagValue of ret) {
-                            // @ts-expect-error
-                            const newTrackConf = session.addTrackConf({
-                                ...trackConf,
-                                trackId: `${trackConf.trackId}-${tag}:${tagValue}-${+Date.now()}-sessionTrack`,
-                                name: `${trackConf.name} ${tag}:${tagValue}`,
-                                displays: undefined,
-                            });
-                            const view = (0, util_1.getContainingView)(model);
-                            const t = view.showTrack(newTrackConf.trackId);
-                            const d = t.displays[0];
-                            d.setFilterBy({
-                                flagInclude: 0,
-                                flagExclude: 1540,
-                                tagFilter: {
-                                    tag,
-                                    value: tagValue,
+                    }
+                    else if (type === 'strand') {
+                        const t1 = `${trackConf.trackId}-${tag}:(-)-${+Date.now()}-sessionTrack`;
+                        const t2 = `${trackConf.trackId}-${tag}:(+)-${+Date.now()}-sessionTrack`;
+                        session.addTrackConf({
+                            ...trackConf,
+                            trackId: t1,
+                            name: `${trackConf.name} (-)`,
+                            displays: [
+                                {
+                                    displayId: `${t1}-LinearAlignmentsDisplay`,
+                                    type: 'LinearAlignmentsDisplay',
+                                    pileupDisplay: {
+                                        displayId: `${t1}-LinearAlignmentsDisplay-LinearPileupDisplay`,
+                                        type: 'LinearPileupDisplay',
+                                        filterBy: util_2.negFlags,
+                                    },
                                 },
-                            });
-                        }
+                                {
+                                    displayId: `${t1}-LinearSNPCoverageDisplay`,
+                                    type: 'LinearSNPCoverageDisplay',
+                                    filterBy: util_2.negFlags,
+                                },
+                            ],
+                        });
+                        session.addTrackConf({
+                            ...trackConf,
+                            trackId: t2,
+                            name: `${trackConf.name} (+)`,
+                            displays: [
+                                {
+                                    displayId: `${t2}-LinearAlignmentsDisplay`,
+                                    type: 'LinearAlignmentsDisplay',
+                                    pileupDisplay: {
+                                        displayId: `${t2}-LinearAlignmentsDisplay-LinearPileupDisplay`,
+                                        type: 'LinearPileupDisplay',
+                                        filterBy: util_2.posFlags,
+                                    },
+                                },
+                                {
+                                    displayId: `${t2}-LinearSNPCoverageDisplay`,
+                                    type: 'LinearSNPCoverageDisplay',
+                                    filterBy: util_2.posFlags,
+                                },
+                            ],
+                        });
+                        view.showTrack(t1);
+                        view.showTrack(t2);
                     }
                     handleClose();
                 } }, "Submit"),

package/dist/LinearPileupDisplay/components/LinearPileupDisplayBlurb.d.ts

@@ -1,12 +1,8 @@
 import React from 'react';
+import type { SortedBy } from '../../shared/types';
 declare const LinearPileupDisplayBlurb: ({ model, }: {
     model: {
-        sortedBy?: {
-            pos: number;
-            refName: number;
-            type: string;
-            tag?: string;
-        };
+        sortedBy?: SortedBy;
     };
 }) => React.JSX.Element | null;
 export default LinearPileupDisplayBlurb;

package/dist/LinearPileupDisplay/components/LinearPileupDisplayBlurb.js

@@ -4,8 +4,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
-const mobx_react_1 = require("mobx-react");
 const material_1 = require("@mui/material");
+const mobx_react_1 = require("mobx-react");
 const LinearPileupDisplayBlurb = (0, mobx_react_1.observer)(function ({ model, }) {
     var _a;
     const { sortedBy } = model;

package/dist/LinearPileupDisplay/components/SetFeatureHeightDialog.js

@@ -24,9 +24,9 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importStar(require("react"));
-const mobx_react_1 = require("mobx-react");
-const material_1 = require("@mui/material");
 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;

package/dist/LinearPileupDisplay/components/SetMaxHeightDialog.js

@@ -24,9 +24,9 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importStar(require("react"));
-const mobx_react_1 = require("mobx-react");
-const material_1 = require("@mui/material");
 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: {

package/dist/LinearPileupDisplay/components/SortByTagDialog.js

@@ -24,9 +24,9 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importStar(require("react"));
-const mobx_react_1 = require("mobx-react");
-const material_1 = require("@mui/material");
 const ui_1 = require("@jbrowse/core/ui");
+const material_1 = require("@mui/material");
+const mobx_react_1 = require("mobx-react");
 const SortByTagDialog = (0, mobx_react_1.observer)(function (props) {
     const { model, handleClose } = props;
     const [tag, setTag] = (0, react_1.useState)('');
@@ -37,10 +37,12 @@ const SortByTagDialog = (0, mobx_react_1.observer)(function (props) {
             react_1.default.createElement(material_1.Typography, { color: "textSecondary" }, "Examples: HP for haplotype, RG for read group, etc."),
             react_1.default.createElement(material_1.TextField, { value: tag, onChange: event => {
                     setTag(event.target.value);
-                }, placeholder: "Enter tag name", inputProps: {
-                    maxLength: 2,
-                    'data-testid': 'sort-tag-name-input',
-                }, error: tag.length === 2 && !validTag, helperText: tag.length === 2 && !validTag ? 'Not a valid tag' : '', autoComplete: "off", "data-testid": "sort-tag-name" }),
+                }, placeholder: "Enter tag name", error: tag.length === 2 && !validTag, helperText: tag.length === 2 && !validTag ? 'Not a valid tag' : '', autoComplete: "off", "data-testid": "sort-tag-name", slotProps: {
+                    htmlInput: {
+                        maxLength: 2,
+                        'data-testid': 'sort-tag-name-input',
+                    },
+                } }),
             react_1.default.createElement(material_1.DialogActions, null,
                 react_1.default.createElement(material_1.Button, { variant: "contained", color: "primary", type: "submit", autoFocus: true, onClick: () => {
                         model.setSortedBy('tag', tag);

package/dist/LinearPileupDisplay/configSchema.d.ts

@@ -1,35 +1,32 @@
-import PluginManager from '@jbrowse/core/PluginManager';
+import type PluginManager from '@jbrowse/core/PluginManager';
 declare function configSchemaF(pluginManager: PluginManager): import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
-    /**
-     * #slot
-     */
     defaultRendering: {
         type: string;
         model: import("mobx-state-tree").ISimpleType<string>;
         defaultValue: string;
     };
-    /**
-     * #slot
-     */
     renderers: import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
         PileupRenderer: import("@jbrowse/core/configuration").AnyConfigurationSchemaType;
     }, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, undefined>>;
-    /**
-     * #slot
-     */
     maxFeatureScreenDensity: {
         type: string;
         description: string;
         defaultValue: number;
     };
-    /**
-     * #slot
-     */
-    colorScheme: {
+    colorBy: {
         type: string;
-        model: import("mobx-state-tree").ISimpleType<string>;
         description: string;
-        defaultValue: string;
+        defaultValue: {
+            type: string;
+        };
+    };
+    filterBy: {
+        type: string;
+        description: string;
+        defaultValue: {
+            flagInclude: number;
+            flagExclude: number;
+        };
     };
 }, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
     renderer: import("mobx-state-tree").IAnyModelType;

package/dist/LinearPileupDisplay/configSchema.js

@@ -3,54 +3,36 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const configuration_1 = require("@jbrowse/core/configuration");
 const plugin_linear_genome_view_1 = require("@jbrowse/plugin-linear-genome-view");
 const mobx_state_tree_1 = require("mobx-state-tree");
-/**
- * #config LinearPileupDisplay
- */
-function x() { } // eslint-disable-line @typescript-eslint/no-unused-vars
+const util_1 = require("../shared/util");
+function x() { }
 function configSchemaF(pluginManager) {
     return (0, configuration_1.ConfigurationSchema)('LinearPileupDisplay', {
-        /**
-         * #slot
-         */
         defaultRendering: {
             type: 'stringEnum',
             model: mobx_state_tree_1.types.enumeration('Rendering', ['pileup']),
             defaultValue: 'pileup',
         },
-        /**
-         * #slot
-         */
         renderers: (0, configuration_1.ConfigurationSchema)('RenderersConfiguration', {
             PileupRenderer: pluginManager.getRendererType('PileupRenderer').configSchema,
         }),
-        /**
-         * #slot
-         */
         maxFeatureScreenDensity: {
             type: 'number',
             description: 'maximum features per pixel that is displayed in the view',
             defaultValue: 5,
         },
-        /**
-         * #slot
-         */
-        colorScheme: {
-            type: 'stringEnum',
-            model: mobx_state_tree_1.types.enumeration('colorScheme', [
-                'strand',
-                'normal',
-                'insertSize',
-                'insertSizeAndOrientation',
-                'mappingQuality',
-                'tag',
-            ]),
+        colorBy: {
+            type: 'frozen',
             description: 'color scheme to use',
-            defaultValue: 'normal',
+            defaultValue: {
+                type: 'normal',
+            },
+        },
+        filterBy: {
+            type: 'frozen',
+            description: 'default filters to use',
+            defaultValue: util_1.defaultFilterFlags,
         },
     }, {
-        /**
-         * #baseConfiguration
-         */
         baseConfiguration: (0, plugin_linear_genome_view_1.linearBasicDisplayConfigSchemaFactory)(pluginManager),
         explicitlyTyped: true,
     });

package/dist/LinearPileupDisplay/index.d.ts

@@ -1,4 +1,4 @@
-import PluginManager from '@jbrowse/core/PluginManager';
+import type PluginManager from '@jbrowse/core/PluginManager';
 export default function register(pluginManager: PluginManager): void;
 export { default as linearPileupDisplayStateModelFactory } from './model';
 export { default as linearPileupDisplayConfigSchemaFactory } from './configSchema';

package/dist/LinearPileupDisplay/index.js

@@ -5,10 +5,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SharedLinearPileupDisplayMixin = exports.linearPileupDisplayConfigSchemaFactory = exports.linearPileupDisplayStateModelFactory = void 0;
 exports.default = register;
-const configSchema_1 = __importDefault(require("./configSchema"));
-const model_1 = __importDefault(require("./model"));
 const DisplayType_1 = __importDefault(require("@jbrowse/core/pluggableElementTypes/DisplayType"));
 const plugin_linear_genome_view_1 = require("@jbrowse/plugin-linear-genome-view");
+const configSchema_1 = __importDefault(require("./configSchema"));
+const model_1 = __importDefault(require("./model"));
 function register(pluginManager) {
     pluginManager.addDisplayType(() => {
         const configSchema = (0, configSchema_1.default)(pluginManager);