@jbrowse/plugin-alignments 2.16.1 → 2.18.0

package/esm/LinearPileupDisplay/components/GroupByDialog.js

@@ -1,39 +1,35 @@
 import React, { useEffect, useState } from 'react';
-import { observer } from 'mobx-react';
-import { Button, Checkbox, DialogActions, DialogContent, FormControlLabel, TextField, Typography, } from '@mui/material';
 import { Dialog, ErrorMessage, LoadingEllipses } from '@jbrowse/core/ui';
-import { getSnapshot } from 'mobx-state-tree';
 import { getContainingTrack, getContainingView, getSession, useDebounce, } from '@jbrowse/core/util';
-// locals
-import { getUniqueTagValues } from '../../shared';
-function clone(c) {
-    return JSON.parse(JSON.stringify(c));
-}
+import { Button, DialogActions, DialogContent, MenuItem, TextField, Typography, } from '@mui/material';
+import { observer } from 'mobx-react';
+import { getSnapshot } from 'mobx-state-tree';
+import { getUniqueTags } from '../../shared/getUniqueTags';
+import { defaultFilterFlags, negFlags, posFlags } from '../../shared/util';
 const GroupByTagDialog = observer(function (props) {
     const { model, handleClose } = props;
-    const [tag, setTag] = useState('');
-    const [tagSet, setTagSet] = useState();
+    const [tag, setGroupByTag] = useState('');
+    const [tagSet, setGroupByTagSet] = useState();
     const [loading, setLoading] = useState(false);
     const [error, setError] = useState();
-    const [includeUndefined, setIncludeUndefined] = useState(true);
     const validTag = /^[A-Za-z][A-Za-z0-9]$/.exec(tag);
     const isInvalid = tag.length === 2 && !validTag;
     const debouncedTag = useDebounce(tag, 1000);
+    const [type, setType] = useState('');
     useEffect(() => {
-        // eslint-disable-next-line @typescript-eslint/no-floating-promises
         ;
         (async () => {
             try {
                 if (!isInvalid) {
                     setError(undefined);
                     setLoading(true);
-                    const vals = await getUniqueTagValues({
+                    const vals = await getUniqueTags({
                         self: model,
                         tag: debouncedTag,
                         blocks: getContainingView(model)
                             .staticBlocks,
                     });
-                    setTagSet(vals);
+                    setGroupByTagSet(vals);
                 }
             }
             catch (e) {
@@ -45,55 +41,114 @@ const GroupByTagDialog = observer(function (props) {
             }
         })();
     }, [model, isInvalid, debouncedTag]);
-    return (React.createElement(Dialog, { open: true, onClose: handleClose, title: "Group by tag" },
+    return (React.createElement(Dialog, { open: true, onClose: handleClose, title: "Group by" },
         React.createElement(DialogContent, null,
-            React.createElement(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.createElement(Typography, { color: "textSecondary" }, "Examples: HP for haplotype, RG for read group, etc."),
-            React.createElement(FormControlLabel, { control: React.createElement(Checkbox, { checked: includeUndefined, onChange: () => {
-                        setIncludeUndefined(!includeUndefined);
-                    } }), label: "Make a new subtrack for undefined values of tag as well?" }),
-            React.createElement(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.createElement(ErrorMessage, { error: error })) : loading ? (React.createElement(LoadingEllipses, { title: "Loading unique tags" })) : tagSet ? (React.createElement("div", null,
-                React.createElement("div", null,
-                    "Found unique ",
-                    tag,
-                    " values:"),
-                React.createElement("div", null, tagSet.join(', ')))) : null),
+            React.createElement(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.createElement(TextField, { fullWidth: true, value: type, onChange: event => {
+                    setType(event.target.value);
+                }, label: "Group by...", select: true },
+                React.createElement(MenuItem, { value: "strand" }, "Strand"),
+                React.createElement(MenuItem, { value: "tag" }, "Tag")),
+            type === 'tag' ? (React.createElement(React.Fragment, null,
+                React.createElement(Typography, { color: "textSecondary" }, "Examples: HP for haplotype, RG for read group, etc."),
+                React.createElement(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.createElement(ErrorMessage, { error: error })) : loading ? (React.createElement(LoadingEllipses, { title: "Loading unique tags" })) : tagSet ? (React.createElement("div", null,
+                    React.createElement("div", null,
+                        "Found unique ",
+                        tag,
+                        " values:"),
+                    React.createElement("div", null, tagSet.join(', ')))) : null)) : null),
         React.createElement(DialogActions, null,
             React.createElement(Button, { variant: "contained", color: "primary", type: "submit", disabled: !tagSet, autoFocus: true, onClick: () => {
                     const track = getContainingTrack(model);
-                    const trackConf = clone(getSnapshot(track.configuration));
+                    const trackConf = structuredClone(getSnapshot(track.configuration));
                     const session = getSession(model);
-                    if (tagSet) {
-                        const ret = [...tagSet];
-                        if (includeUndefined) {
-                            ret.push(undefined);
+                    const view = 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: {
+                                                    ...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 = 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: negFlags,
+                                    },
                                 },
-                            });
-                        }
+                                {
+                                    displayId: `${t1}-LinearSNPCoverageDisplay`,
+                                    type: 'LinearSNPCoverageDisplay',
+                                    filterBy: negFlags,
+                                },
+                            ],
+                        });
+                        session.addTrackConf({
+                            ...trackConf,
+                            trackId: t2,
+                            name: `${trackConf.name} (+)`,
+                            displays: [
+                                {
+                                    displayId: `${t2}-LinearAlignmentsDisplay`,
+                                    type: 'LinearAlignmentsDisplay',
+                                    pileupDisplay: {
+                                        displayId: `${t2}-LinearAlignmentsDisplay-LinearPileupDisplay`,
+                                        type: 'LinearPileupDisplay',
+                                        filterBy: posFlags,
+                                    },
+                                },
+                                {
+                                    displayId: `${t2}-LinearSNPCoverageDisplay`,
+                                    type: 'LinearSNPCoverageDisplay',
+                                    filterBy: posFlags,
+                                },
+                            ],
+                        });
+                        view.showTrack(t1);
+                        view.showTrack(t2);
                     }
                     handleClose();
                 } }, "Submit"),

package/esm/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/esm/LinearPileupDisplay/components/LinearPileupDisplayBlurb.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import { observer } from 'mobx-react';
 import { Typography } from '@mui/material';
+import { observer } from 'mobx-react';
 const LinearPileupDisplayBlurb = observer(function ({ model, }) {
     var _a;
     const { sortedBy } = model;

package/esm/LinearPileupDisplay/components/SetFeatureHeightDialog.js

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
-import { observer } from 'mobx-react';
-import { Button, Checkbox, DialogActions, DialogContent, FormControlLabel, TextField, Typography, } from '@mui/material';
 import { Dialog } from '@jbrowse/core/ui';
+import { Button, Checkbox, DialogActions, DialogContent, FormControlLabel, TextField, Typography, } from '@mui/material';
+import { observer } from 'mobx-react';
 const SetFeatureHeightDialog = observer(function (props) {
     const { model, handleClose } = props;
     const { featureHeightSetting, noSpacing: noSpacingSetting } = model;

package/esm/LinearPileupDisplay/components/SetMaxHeightDialog.js

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
-import { observer } from 'mobx-react';
-import { Button, DialogActions, DialogContent, TextField, Typography, } from '@mui/material';
 import { Dialog } from '@jbrowse/core/ui';
+import { Button, DialogActions, DialogContent, TextField, Typography, } from '@mui/material';
+import { observer } from 'mobx-react';
 import { makeStyles } from 'tss-react/mui';
 const useStyles = makeStyles()({
     root: {

package/esm/LinearPileupDisplay/components/SortByTagDialog.js

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
-import { observer } from 'mobx-react';
-import { Button, DialogActions, DialogContent, TextField, Typography, } from '@mui/material';
 import { Dialog } from '@jbrowse/core/ui';
+import { Button, DialogActions, DialogContent, TextField, Typography, } from '@mui/material';
+import { observer } from 'mobx-react';
 const SortByTagDialog = observer(function (props) {
     const { model, handleClose } = props;
     const [tag, setTag] = useState('');
@@ -12,10 +12,12 @@ const SortByTagDialog = observer(function (props) {
             React.createElement(Typography, { color: "textSecondary" }, "Examples: 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': '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.createElement(DialogActions, null,
                 React.createElement(Button, { variant: "contained", color: "primary", type: "submit", autoFocus: true, onClick: () => {
                         model.setSortedBy('tag', tag);

package/esm/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/esm/LinearPileupDisplay/configSchema.js

@@ -1,54 +1,36 @@
 import { ConfigurationSchema } from '@jbrowse/core/configuration';
 import { linearBasicDisplayConfigSchemaFactory } from '@jbrowse/plugin-linear-genome-view';
 import { types } from 'mobx-state-tree';
-/**
- * #config LinearPileupDisplay
- */
-function x() { } // eslint-disable-line @typescript-eslint/no-unused-vars
+import { defaultFilterFlags } from '../shared/util';
+function x() { }
 function configSchemaF(pluginManager) {
     return ConfigurationSchema('LinearPileupDisplay', {
-        /**
-         * #slot
-         */
         defaultRendering: {
             type: 'stringEnum',
             model: types.enumeration('Rendering', ['pileup']),
             defaultValue: 'pileup',
         },
-        /**
-         * #slot
-         */
         renderers: 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: 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: defaultFilterFlags,
         },
     }, {
-        /**
-         * #baseConfiguration
-         */
         baseConfiguration: linearBasicDisplayConfigSchemaFactory(pluginManager),
         explicitlyTyped: true,
     });

package/esm/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/esm/LinearPileupDisplay/index.js

@@ -1,7 +1,7 @@
-import configSchemaFactory from './configSchema';
-import modelFactory from './model';
 import DisplayType from '@jbrowse/core/pluggableElementTypes/DisplayType';
 import { BaseLinearDisplayComponent } from '@jbrowse/plugin-linear-genome-view';
+import configSchemaFactory from './configSchema';
+import modelFactory from './model';
 export default function register(pluginManager) {
     pluginManager.addDisplayType(() => {
         const configSchema = configSchemaFactory(pluginManager);