@jbrowse/plugin-alignments 2.17.0 → 3.0.0

package/esm/LinearPileupDisplay/SharedLinearPileupDisplayMixin.js

@@ -1,129 +1,86 @@
 import { lazy } from 'react';
-import { autorun, observable } from 'mobx';
-import { cast, types, addDisposer, isAlive } from 'mobx-state-tree';
-import copy from 'copy-to-clipboard';
-import { ConfigurationReference, readConfObject, getConf, } from '@jbrowse/core/configuration';
+import { ConfigurationReference, getConf, readConfObject, } from '@jbrowse/core/configuration';
 import SerializableFilterChain from '@jbrowse/core/pluggableElementTypes/renderers/util/serializableFilterChain';
-import { getRpcSessionId } from '@jbrowse/core/util/tracks';
-import { getEnv, getSession, getContainingView, getContainingTrack, isSessionModelWithWidgets, SimpleFeature, } from '@jbrowse/core/util';
-import { BaseLinearDisplay, } from '@jbrowse/plugin-linear-genome-view';
-// icons
 import { ContentCopy as ContentCopyIcon } from '@jbrowse/core/ui/Icons';
-import MenuOpenIcon from '@mui/icons-material/MenuOpen';
+import { SimpleFeature, getContainingTrack, getContainingView, getEnv, getSession, isSessionModelWithWidgets, } from '@jbrowse/core/util';
+import { getRpcSessionId } from '@jbrowse/core/util/tracks';
+import { BaseLinearDisplay } from '@jbrowse/plugin-linear-genome-view';
 import FilterListIcon from '@mui/icons-material/ClearAll';
-// locals
-import LinearPileupDisplayBlurb from './components/LinearPileupDisplayBlurb';
+import MenuOpenIcon from '@mui/icons-material/MenuOpen';
+import copy from 'copy-to-clipboard';
+import { autorun, observable } from 'mobx';
+import { addDisposer, cast, isAlive, types } from 'mobx-state-tree';
 import { createAutorun } from '../util';
+import LinearPileupDisplayBlurb from './components/LinearPileupDisplayBlurb';
 import { getUniqueTags } from '../shared/getUniqueTags';
-import { defaultFilterFlags } from '../shared/util';
-// lazies
 const FilterByTagDialog = lazy(() => import('../shared/components/FilterByTagDialog'));
 const ColorByTagDialog = lazy(() => import('./components/ColorByTagDialog'));
 const SetFeatureHeightDialog = lazy(() => import('./components/SetFeatureHeightDialog'));
 const SetMaxHeightDialog = lazy(() => import('./components/SetMaxHeightDialog'));
-// using a map because it preserves order
 const rendererTypes = new Map([
     ['pileup', 'PileupRenderer'],
     ['svg', 'SvgFeatureRenderer'],
 ]);
-/**
- * #stateModel SharedLinearPileupDisplayMixin
- * #category display
- * extends `BaseLinearDisplay`
- */
 export function SharedLinearPileupDisplayMixin(configSchema) {
     return types
         .compose(BaseLinearDisplay, types.model({
-        /**
-         * #property
-         */
         configuration: ConfigurationReference(configSchema),
-        /**
-         * #property
-         */
         featureHeight: types.maybe(types.number),
-        /**
-         * #property
-         */
         noSpacing: types.maybe(types.boolean),
-        /**
-         * #property
-         */
         fadeLikelihood: types.maybe(types.boolean),
-        /**
-         * #property
-         */
         trackMaxHeight: types.maybe(types.number),
-        /**
-         * #property
-         */
-        colorBy: types.frozen(),
-        /**
-         * #property
-         */
-        filterBy: types.optional(types.frozen(), defaultFilterFlags),
-        /**
-         * #property
-         */
+        colorBySetting: types.frozen(),
+        filterBySetting: types.frozen(),
         jexlFilters: types.optional(types.array(types.string), []),
+        hideSmallIndelsSetting: types.maybe(types.boolean),
     }))
         .volatile(() => ({
         colorTagMap: observable.map({}),
         featureUnderMouseVolatile: undefined,
         tagsReady: false,
+    }))
+        .views(self => ({
+        get colorBy() {
+            var _a;
+            return (_a = self.colorBySetting) !== null && _a !== void 0 ? _a : getConf(self, 'colorBy');
+        },
+        get filterBy() {
+            var _a;
+            return (_a = self.filterBySetting) !== null && _a !== void 0 ? _a : getConf(self, 'filterBy');
+        },
     }))
         .views(self => ({
         get autorunReady() {
             const view = getContainingView(self);
-            return (view.initialized &&
-                self.featureDensityStatsReady &&
-                !self.regionTooLarge);
+            return view.initialized && self.statsReadyAndRegionNotTooLarge;
+        },
+        get hideSmallIndels() {
+            return self.hideSmallIndelsSetting;
         },
     }))
         .actions(self => ({
-        /**
-         * #action
-         */
         setTagsReady(flag) {
             self.tagsReady = flag;
         },
-        /**
-         * #action
-         */
         setMaxHeight(n) {
             self.trackMaxHeight = n;
         },
-        /**
-         * #action
-         */
         setFeatureHeight(n) {
             self.featureHeight = n;
         },
-        /**
-         * #action
-         */
         setNoSpacing(flag) {
             self.noSpacing = flag;
         },
-        /**
-         * #action
-         */
         setColorScheme(colorScheme) {
             self.colorTagMap = observable.map({});
-            self.colorBy = {
+            self.colorBySetting = {
                 ...colorScheme,
             };
             if (colorScheme.tag) {
                 self.tagsReady = false;
             }
         },
-        /**
-         * #action
-         */
         updateColorTagMap(uniqueTag) {
-            // pale color scheme
-            // https://cran.r-project.org/web/packages/khroma/vignettes/tol.html
-            // e.g. "tol_light"
             const colorPalette = [
                 '#BBCCEE',
                 'pink',
@@ -143,15 +100,9 @@ export function SharedLinearPileupDisplayMixin(configSchema) {
                 }
             });
         },
-        /**
-         * #action
-         */
         setFeatureUnderMouse(feat) {
             self.featureUnderMouseVolatile = feat;
         },
-        /**
-         * #action
-         */
         selectFeature(feature) {
             const session = getSession(self);
             if (isSessionModelWithWidgets(session)) {
@@ -164,82 +115,53 @@ export function SharedLinearPileupDisplayMixin(configSchema) {
             }
             session.setSelection(feature);
         },
-        /**
-         * #action
-         * uses copy-to-clipboard and generates notification
-         */
         copyFeatureToClipboard(feature) {
             const { uniqueId, ...rest } = feature.toJSON();
             const session = getSession(self);
             copy(JSON.stringify(rest, null, 4));
             session.notify('Copied to clipboard', 'success');
         },
-        /**
-         * #action
-         */
         setConfig(conf) {
             self.configuration = conf;
         },
-        /**
-         * #action
-         */
         setFilterBy(filter) {
-            self.filterBy = {
+            self.filterBySetting = {
                 ...filter,
             };
         },
-        /**
-         * #action
-         */
         setJexlFilters(filters) {
             self.jexlFilters = cast(filters);
         },
+        setHideSmallIndels(arg) {
+            self.hideSmallIndelsSetting = arg;
+        },
     }))
         .views(self => ({
-        /**
-         * #getter
-         */
         get rendererConfig() {
-            const { featureHeight, noSpacing, trackMaxHeight, rendererTypeName } = self;
+            const { featureHeight: height, noSpacing, hideSmallIndels, trackMaxHeight: maxHeight, rendererTypeName, } = self;
             const configBlob = getConf(self, ['renderers', rendererTypeName]) || {};
             return self.rendererType.configSchema.create({
                 ...configBlob,
-                ...(featureHeight !== undefined ? { height: featureHeight } : {}),
+                ...(hideSmallIndels !== undefined ? { hideSmallIndels } : {}),
+                ...(height !== undefined ? { height } : {}),
                 ...(noSpacing !== undefined ? { noSpacing } : {}),
-                ...(trackMaxHeight !== undefined
-                    ? { maxHeight: trackMaxHeight }
-                    : {}),
+                ...(maxHeight !== undefined ? { maxHeight } : {}),
             }, getEnv(self));
         },
     }))
         .views(self => ({
-        /**
-         * #getter
-         */
         get maxHeight() {
             return readConfObject(self.rendererConfig, 'maxHeight');
         },
-        /**
-         * #getter
-         */
         get featureHeightSetting() {
             return readConfObject(self.rendererConfig, 'height');
         },
-        /**
-         * #getter
-         */
         get featureUnderMouse() {
             return self.featureUnderMouseVolatile;
         },
-        /**
-         * #getter
-         */
         renderReady() {
             return self.tagsReady;
         },
-        /**
-         * #getter
-         */
         get filters() {
             return new SerializableFilterChain({ filters: self.jexlFilters });
         },
@@ -247,9 +169,6 @@ export function SharedLinearPileupDisplayMixin(configSchema) {
         .views(self => {
         const { trackMenuItems: superTrackMenuItems, renderProps: superRenderProps, } = self;
         return {
-            /**
-             * #getter
-             */
             get rendererTypeName() {
                 const viewName = getConf(self, 'defaultRendering');
                 const rendererType = rendererTypes.get(viewName);
@@ -258,9 +177,6 @@ export function SharedLinearPileupDisplayMixin(configSchema) {
                 }
                 return rendererType;
             },
-            /**
-             * #method
-             */
             contextMenuItems() {
                 const feat = self.contextMenuFeature;
                 return feat
@@ -283,15 +199,9 @@ export function SharedLinearPileupDisplayMixin(configSchema) {
                     ]
                     : [];
             },
-            /**
-             * #getter
-             */
             get DisplayBlurb() {
                 return LinearPileupDisplayBlurb;
             },
-            /**
-             * #method
-             */
             renderPropsPre() {
                 const { colorTagMap, colorBy, filterBy, rpcDriverName } = self;
                 const superProps = superRenderProps();
@@ -334,7 +244,6 @@ export function SharedLinearPileupDisplayMixin(configSchema) {
                     onClick() {
                         self.clearFeatureSelection();
                     },
-                    // similar to click but opens a menu with further options
                     async onFeatureContextMenu(_, featureId) {
                         const session = getSession(self);
                         const { rpcManager } = session;
@@ -363,9 +272,6 @@ export function SharedLinearPileupDisplayMixin(configSchema) {
                     },
                 };
             },
-            /**
-             * #method
-             */
             colorSchemeSubMenuItems() {
                 return [
                     {
@@ -430,9 +336,6 @@ export function SharedLinearPileupDisplayMixin(configSchema) {
                     },
                 ];
             },
-            /**
-             * #method
-             */
             trackMenuItems() {
                 return [
                     ...superTrackMenuItems(),
@@ -468,6 +371,15 @@ export function SharedLinearPileupDisplayMixin(configSchema) {
                             },
                         ],
                     },
+                    {
+                        label: 'Hide small indels (<10bp)',
+                        priority: -1,
+                        type: 'checkbox',
+                        checked: self.hideSmallIndels,
+                        onClick: () => {
+                            self.setHideSmallIndels(!self.hideSmallIndels);
+                        },
+                    },
                     {
                         label: 'Set max height...',
                         priority: -1,
@@ -527,9 +439,6 @@ export function SharedLinearPileupDisplayMixin(configSchema) {
                     self.setTagsReady(true);
                 }
             }, { delay: 1000 });
-            // autorun synchronizes featureUnderMouse with featureIdUnderMouse
-            // asynchronously. this is needed due to how we do not serialize all
-            // features from the BAM/CRAM over the rpc
             addDisposer(self, autorun(async () => {
                 var _a;
                 const session = getSession(self);
@@ -548,10 +457,6 @@ export function SharedLinearPileupDisplayMixin(configSchema) {
                                 layoutId: view.id,
                                 rendererType: 'PileupRenderer',
                             }));
-                            // check featureIdUnderMouse is still the same as the
-                            // feature.id that was returned e.g. that the user hasn't
-                            // moused over to a new position during the async operation
-                            // above
                             if (isAlive(self) &&
                                 feature &&
                                 self.featureIdUnderMouse === feature.uniqueId) {
@@ -566,5 +471,16 @@ export function SharedLinearPileupDisplayMixin(configSchema) {
                 }
             }));
         },
-    }));
+    }))
+        .preProcessSnapshot(snap => {
+        if (snap) {
+            const { colorBy, colorBySetting, filterBySetting, filterBy, ...rest } = snap;
+            return {
+                ...rest,
+                filterBySetting: filterBySetting || filterBy,
+                colorBySetting: colorBySetting || colorBy,
+            };
+        }
+        return snap;
+    });
 }

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

@@ -1,4 +1,3 @@
-import React from 'react';
 interface Tag {
     type: string;
     tag: string;
@@ -8,5 +7,5 @@ declare const ColorByTagDialog: ({ model, handleClose, }: {
         setColorScheme: (arg: Tag) => void;
     };
     handleClose: () => void;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default ColorByTagDialog;

package/esm/LinearPileupDisplay/components/ColorByTagDialog.js

@@ -1,24 +1,18 @@
-import React, { useState } from 'react';
-import { observer } from 'mobx-react';
-import { Button, DialogContent, DialogActions, TextField, Typography, } from '@mui/material';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
 import { Dialog } from '@jbrowse/core/ui';
+import { Button, DialogActions, DialogContent, TextField, Typography, } from '@mui/material';
+import { observer } from 'mobx-react';
 const ColorByTagDialog = observer(function ({ model, handleClose, }) {
     const [tag, setTag] = useState('');
     const validTag = /^[A-Za-z][A-Za-z0-9]$/.exec(tag);
-    return (React.createElement(Dialog, { open: true, onClose: handleClose, title: "Color by tag" },
-        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", error: tag.length === 2 && !validTag, helperText: tag.length === 2 && !validTag ? 'Not a valid tag' : '', autoComplete: "off", slotProps: {
-                    htmlInput: { maxLength: 2 },
-                } }),
-            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")))));
+    return (_jsx(Dialog, { open: true, onClose: handleClose, title: "Color by tag", children: _jsxs(DialogContent, { style: { overflowX: 'hidden' }, children: [_jsx(Typography, { children: "Enter tag to color by: " }), _jsx(Typography, { color: "textSecondary", children: "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." }), _jsx(TextField, { value: tag, onChange: event => {
+                        setTag(event.target.value);
+                    }, placeholder: "Enter tag name", error: tag.length === 2 && !validTag, helperText: tag.length === 2 && !validTag ? 'Not a valid tag' : '', autoComplete: "off", slotProps: {
+                        htmlInput: { maxLength: 2 },
+                    } }), _jsxs(DialogActions, { children: [_jsx(Button, { variant: "contained", color: "primary", onClick: () => {
+                                model.setColorScheme({ type: 'tag', tag });
+                                handleClose();
+                            }, disabled: !validTag, children: "Submit" }), _jsx(Button, { variant: "contained", color: "secondary", onClick: handleClose, children: "Cancel" })] })] }) }));
 });
 export default ColorByTagDialog;

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

@@ -1,11 +1,10 @@
-import React from 'react';
-import { IAnyStateTreeNode } from 'mobx-state-tree';
-import { AnyConfigurationModel } from '@jbrowse/core/configuration';
+import type { AnyConfigurationModel } from '@jbrowse/core/configuration';
+import type { IAnyStateTreeNode } from 'mobx-state-tree';
 declare const GroupByTagDialog: (props: {
     model: {
         adapterConfig: AnyConfigurationModel;
         configuration: AnyConfigurationModel;
     } & IAnyStateTreeNode;
     handleClose: () => void;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default GroupByTagDialog;

package/esm/LinearPileupDisplay/components/GroupByDialog.js

@@ -1,26 +1,23 @@
-import React, { useEffect, useState } from 'react';
-import { observer } from 'mobx-react';
-import { Button, Checkbox, DialogActions, DialogContent, FormControlLabel, TextField, Typography, } from '@mui/material';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
 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 { 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';
-function clone(c) {
-    return JSON.parse(JSON.stringify(c));
-}
+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 {
@@ -33,7 +30,7 @@ const GroupByTagDialog = observer(function (props) {
                         blocks: getContainingView(model)
                             .staticBlocks,
                     });
-                    setTagSet(vals);
+                    setGroupByTagSet(vals);
                 }
             }
             catch (e) {
@@ -45,62 +42,102 @@ const GroupByTagDialog = observer(function (props) {
             }
         })();
     }, [model, isInvalid, debouncedTag]);
-    return (React.createElement(Dialog, { open: true, onClose: handleClose, title: "Group by tag" },
-        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", 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),
-        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 session = getSession(model);
-                    if (tagSet) {
-                        const ret = [...tagSet];
-                        if (includeUndefined) {
-                            ret.push(undefined);
-                        }
-                        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,
-                            });
+    return (_jsxs(Dialog, { open: true, onClose: handleClose, title: "Group by", children: [_jsxs(DialogContent, { children: [_jsx(Typography, { children: "NOTE: this will create new session tracks with the \"filter by\" set to the values chosen here rather than affecting the current track state" }), _jsxs(TextField, { fullWidth: true, value: type, onChange: event => {
+                            setType(event.target.value);
+                        }, label: "Group by...", select: true, children: [_jsx(MenuItem, { value: "strand", children: "Strand" }), _jsx(MenuItem, { value: "tag", children: "Tag" })] }), type === 'tag' ? (_jsxs(_Fragment, { children: [_jsx(Typography, { color: "textSecondary", children: "Examples: HP for haplotype, RG for read group, etc." }), _jsx(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 ? (_jsx(ErrorMessage, { error: error })) : loading ? (_jsx(LoadingEllipses, { title: "Loading unique tags" })) : tagSet ? (_jsxs("div", { children: [_jsxs("div", { children: ["Found unique ", tag, " values:"] }), _jsx("div", { children: tagSet.join(', ') })] })) : null] })) : null] }), _jsxs(DialogActions, { children: [_jsx(Button, { variant: "contained", color: "primary", type: "submit", disabled: !tagSet, autoFocus: true, onClick: () => {
+                            const track = getContainingTrack(model);
+                            const trackConf = structuredClone(getSnapshot(track.configuration));
+                            const session = getSession(model);
                             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,
-                                },
-                            });
-                        }
-                    }
-                    handleClose();
-                } }, "Submit"),
-            React.createElement(Button, { variant: "contained", color: "secondary", onClick: () => {
-                    handleClose();
-                } }, "Cancel"))));
+                            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} (${tag}:${tagValue})`,
+                                            displays: [
+                                                {
+                                                    displayId: `${t1}-LinearAlignmentsDisplay`,
+                                                    type: 'LinearAlignmentsDisplay',
+                                                    pileupDisplay: {
+                                                        displayId: `${t1}-LinearAlignmentsDisplay-LinearPileupDisplay`,
+                                                        type: 'LinearPileupDisplay',
+                                                        filterBy: {
+                                                            ...defaultFilterFlags,
+                                                            tagFilter: {
+                                                                tag,
+                                                                value: tagValue,
+                                                            },
+                                                        },
+                                                    },
+                                                },
+                                            ],
+                                        });
+                                        view.showTrack(t1);
+                                    }
+                                }
+                            }
+                            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();
+                        }, children: "Submit" }), _jsx(Button, { variant: "contained", color: "secondary", onClick: () => {
+                            handleClose();
+                        }, children: "Cancel" })] })] }));
 });
 export default GroupByTagDialog;