@jbrowse/plugin-alignments 2.6.2 → 2.7.0

package/dist/LinearPileupDisplay/SharedLinearPileupDisplayMixin.js

@@ -0,0 +1,547 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SharedLinearPileupDisplayMixin = void 0;
+const react_1 = require("react");
+const mobx_1 = require("mobx");
+const mobx_state_tree_1 = require("mobx-state-tree");
+const copy_to_clipboard_1 = __importDefault(require("copy-to-clipboard"));
+const configuration_1 = require("@jbrowse/core/configuration");
+const serializableFilterChain_1 = __importDefault(require("@jbrowse/core/pluggableElementTypes/renderers/util/serializableFilterChain"));
+const tracks_1 = require("@jbrowse/core/util/tracks");
+const util_1 = require("@jbrowse/core/util");
+const plugin_linear_genome_view_1 = require("@jbrowse/plugin-linear-genome-view");
+// icons
+const Icons_1 = require("@jbrowse/core/ui/Icons");
+const MenuOpen_1 = __importDefault(require("@mui/icons-material/MenuOpen"));
+const ClearAll_1 = __importDefault(require("@mui/icons-material/ClearAll"));
+// locals
+const LinearPileupDisplayBlurb_1 = __importDefault(require("./components/LinearPileupDisplayBlurb"));
+const shared_1 = require("../shared");
+const util_2 = require("../util");
+const color_1 = require("../shared/color");
+// async
+const FilterByTagDlg = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('../shared/FilterByTag'))));
+const ColorByTagDlg = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./components/ColorByTag'))));
+const SetFeatureHeightDlg = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./components/SetFeatureHeight'))));
+const SetMaxHeightDlg = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./components/SetMaxHeight'))));
+// using a map because it preserves order
+const rendererTypes = new Map([
+    ['pileup', 'PileupRenderer'],
+    ['svg', 'SvgFeatureRenderer'],
+]);
+/**
+ * #stateModel SharedLinearPileupDisplayMixin
+ * #category display
+ * extends `BaseLinearDisplay`
+ */
+function SharedLinearPileupDisplayMixin(configSchema) {
+    return mobx_state_tree_1.types
+        .compose(plugin_linear_genome_view_1.BaseLinearDisplay, mobx_state_tree_1.types.model({
+        /**
+         * #property
+         */
+        configuration: (0, configuration_1.ConfigurationReference)(configSchema),
+        /**
+         * #property
+         */
+        featureHeight: mobx_state_tree_1.types.maybe(mobx_state_tree_1.types.number),
+        /**
+         * #property
+         */
+        noSpacing: mobx_state_tree_1.types.maybe(mobx_state_tree_1.types.boolean),
+        /**
+         * #property
+         */
+        fadeLikelihood: mobx_state_tree_1.types.maybe(mobx_state_tree_1.types.boolean),
+        /**
+         * #property
+         */
+        trackMaxHeight: mobx_state_tree_1.types.maybe(mobx_state_tree_1.types.number),
+        /**
+         * #property
+         */
+        colorBy: color_1.ColorByModel,
+        /**
+         * #property
+         */
+        filterBy: mobx_state_tree_1.types.optional(shared_1.FilterModel, {}),
+        /**
+         * #property
+         */
+        jexlFilters: mobx_state_tree_1.types.optional(mobx_state_tree_1.types.array(mobx_state_tree_1.types.string), []),
+    }))
+        .volatile(() => ({
+        colorTagMap: mobx_1.observable.map({}),
+        featureUnderMouseVolatile: undefined,
+        tagsReady: false,
+    }))
+        .views(self => ({
+        get autorunReady() {
+            const view = (0, util_1.getContainingView)(self);
+            return (view.initialized &&
+                self.featureDensityStatsReady &&
+                !self.regionTooLarge);
+        },
+    }))
+        .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 = mobx_1.observable.map({}); // clear existing mapping
+            self.colorBy = (0, mobx_state_tree_1.cast)(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',
+                '#CCDDAA',
+                '#EEEEBB',
+                '#FFCCCC',
+                'lightblue',
+                'lightgreen',
+                'tan',
+                '#CCEEFF',
+                'lightsalmon',
+            ];
+            uniqueTag.forEach(value => {
+                if (!self.colorTagMap.has(value)) {
+                    const totalKeys = [...self.colorTagMap.keys()].length;
+                    self.colorTagMap.set(value, colorPalette[totalKeys]);
+                }
+            });
+        },
+        /**
+         * #action
+         */
+        setFeatureUnderMouse(feat) {
+            self.featureUnderMouseVolatile = feat;
+        },
+        /**
+         * #action
+         */
+        selectFeature(feature) {
+            const session = (0, util_1.getSession)(self);
+            if ((0, util_1.isSessionModelWithWidgets)(session)) {
+                const featureWidget = session.addWidget('AlignmentsFeatureWidget', 'alignmentFeature', { featureData: feature.toJSON(), view: (0, util_1.getContainingView)(self) });
+                session.showWidget(featureWidget);
+            }
+            session.setSelection(feature);
+        },
+        /**
+         * #action
+         * uses copy-to-clipboard and generates notification
+         */
+        copyFeatureToClipboard(feature) {
+            const { uniqueId, ...rest } = feature.toJSON();
+            const session = (0, util_1.getSession)(self);
+            (0, copy_to_clipboard_1.default)(JSON.stringify(rest, null, 4));
+            session.notify('Copied to clipboard', 'success');
+        },
+        /**
+         * #action
+         */
+        setConfig(conf) {
+            self.configuration = conf;
+        },
+        /**
+         * #action
+         */
+        setFilterBy(filter) {
+            self.filterBy = (0, mobx_state_tree_1.cast)(filter);
+        },
+        /**
+         * #action
+         */
+        setJexlFilters(filters) {
+            self.jexlFilters = (0, mobx_state_tree_1.cast)(filters);
+        },
+    }))
+        .views(self => ({
+        /**
+         * #getter
+         */
+        get rendererConfig() {
+            const { featureHeight, noSpacing, trackMaxHeight, rendererTypeName } = self;
+            const configBlob = (0, configuration_1.getConf)(self, ['renderers', rendererTypeName]) || {};
+            return self.rendererType.configSchema.create({
+                ...configBlob,
+                ...(featureHeight !== undefined ? { height: featureHeight } : {}),
+                ...(noSpacing !== undefined ? { noSpacing } : {}),
+                ...(trackMaxHeight !== undefined
+                    ? { maxHeight: trackMaxHeight }
+                    : {}),
+            }, (0, util_1.getEnv)(self));
+        },
+    }))
+        .views(self => ({
+        /**
+         * #getter
+         */
+        get maxHeight() {
+            return (0, configuration_1.readConfObject)(self.rendererConfig, 'maxHeight');
+        },
+        /**
+         * #getter
+         */
+        get featureHeightSetting() {
+            return (0, configuration_1.readConfObject)(self.rendererConfig, 'height');
+        },
+        /**
+         * #getter
+         */
+        get featureUnderMouse() {
+            return self.featureUnderMouseVolatile;
+        },
+        /**
+         * #getter
+         */
+        renderReady() {
+            return self.tagsReady;
+        },
+        /**
+         * #getter
+         */
+        get filters() {
+            return new serializableFilterChain_1.default({ filters: self.jexlFilters });
+        },
+    }))
+        .views(self => {
+        const { trackMenuItems: superTrackMenuItems, renderProps: superRenderProps, } = self;
+        return {
+            /**
+             * #getter
+             */
+            get rendererTypeName() {
+                const viewName = (0, configuration_1.getConf)(self, 'defaultRendering');
+                const rendererType = rendererTypes.get(viewName);
+                if (!rendererType) {
+                    throw new Error(`unknown alignments view name ${viewName}`);
+                }
+                return rendererType;
+            },
+            /**
+             * #method
+             */
+            contextMenuItems() {
+                const feat = self.contextMenuFeature;
+                return feat
+                    ? [
+                        {
+                            label: 'Open feature details',
+                            icon: MenuOpen_1.default,
+                            onClick: () => {
+                                self.clearFeatureSelection();
+                                if (feat) {
+                                    self.selectFeature(feat);
+                                }
+                            },
+                        },
+                        {
+                            label: 'Copy info to clipboard',
+                            icon: Icons_1.ContentCopy,
+                            onClick: () => {
+                                if (feat) {
+                                    self.copyFeatureToClipboard(feat);
+                                }
+                            },
+                        },
+                    ]
+                    : [];
+            },
+            /**
+             * #getter
+             */
+            get DisplayBlurb() {
+                return LinearPileupDisplayBlurb_1.default;
+            },
+            /**
+             * #method
+             */
+            renderPropsPre() {
+                const { colorTagMap, colorBy, filterBy, rpcDriverName } = self;
+                const superProps = superRenderProps();
+                return {
+                    ...superProps,
+                    notReady: superProps.notReady || !self.renderReady(),
+                    rpcDriverName,
+                    displayModel: self,
+                    colorBy: colorBy ? (0, mobx_state_tree_1.getSnapshot)(colorBy) : undefined,
+                    filterBy: JSON.parse(JSON.stringify(filterBy)),
+                    filters: self.filters,
+                    colorTagMap: Object.fromEntries(colorTagMap.toJSON()),
+                    config: self.rendererConfig,
+                    async onFeatureClick(_, featureId) {
+                        const session = (0, util_1.getSession)(self);
+                        const { rpcManager } = session;
+                        try {
+                            const f = featureId || self.featureIdUnderMouse;
+                            if (!f) {
+                                self.clearFeatureSelection();
+                            }
+                            else {
+                                const sessionId = (0, tracks_1.getRpcSessionId)(self);
+                                const { feature } = (await rpcManager.call(sessionId, 'CoreGetFeatureDetails', {
+                                    featureId: f,
+                                    sessionId,
+                                    layoutId: (0, util_1.getContainingView)(self).id,
+                                    rendererType: 'PileupRenderer',
+                                }));
+                                if (feature) {
+                                    self.selectFeature(new util_1.SimpleFeature(feature));
+                                }
+                            }
+                        }
+                        catch (e) {
+                            console.error(e);
+                            session.notify(`${e}`);
+                        }
+                    },
+                    onClick() {
+                        self.clearFeatureSelection();
+                    },
+                    // similar to click but opens a menu with further options
+                    async onFeatureContextMenu(_, featureId) {
+                        const session = (0, util_1.getSession)(self);
+                        const { rpcManager } = session;
+                        try {
+                            const f = featureId || self.featureIdUnderMouse;
+                            if (!f) {
+                                self.clearFeatureSelection();
+                            }
+                            else {
+                                const sessionId = (0, tracks_1.getRpcSessionId)(self);
+                                const { feature } = (await rpcManager.call(sessionId, 'CoreGetFeatureDetails', {
+                                    featureId: f,
+                                    sessionId,
+                                    layoutId: (0, util_1.getContainingView)(self).id,
+                                    rendererType: 'PileupRenderer',
+                                }));
+                                if (feature) {
+                                    self.setContextMenuFeature(new util_1.SimpleFeature(feature));
+                                }
+                            }
+                        }
+                        catch (e) {
+                            console.error(e);
+                            session.notify(`${e}`);
+                        }
+                    },
+                };
+            },
+            /**
+             * #method
+             */
+            colorSchemeSubMenuItems() {
+                return [
+                    {
+                        label: 'Normal',
+                        onClick: () => self.setColorScheme({ type: 'normal' }),
+                    },
+                    {
+                        label: 'Mapping quality',
+                        onClick: () => self.setColorScheme({ type: 'mappingQuality' }),
+                    },
+                    {
+                        label: 'Strand',
+                        onClick: () => self.setColorScheme({ type: 'strand' }),
+                    },
+                    {
+                        label: 'Per-base quality',
+                        onClick: () => self.setColorScheme({ type: 'perBaseQuality' }),
+                    },
+                    {
+                        label: 'Per-base lettering',
+                        onClick: () => self.setColorScheme({ type: 'perBaseLettering' }),
+                    },
+                    {
+                        label: 'First-of-pair strand',
+                        onClick: () => self.setColorScheme({ type: 'stranded' }),
+                    },
+                    {
+                        label: 'Color by tag...',
+                        onClick: () => {
+                            (0, util_1.getSession)(self).queueDialog(doneCallback => [
+                                ColorByTagDlg,
+                                { model: self, handleClose: doneCallback },
+                            ]);
+                        },
+                    },
+                ];
+            },
+            /**
+             * #method
+             */
+            trackMenuItems() {
+                return [
+                    ...superTrackMenuItems(),
+                    {
+                        label: 'Filter by',
+                        icon: ClearAll_1.default,
+                        onClick: () => {
+                            (0, util_1.getSession)(self).queueDialog(doneCallback => [
+                                FilterByTagDlg,
+                                { model: self, handleClose: doneCallback },
+                            ]);
+                        },
+                    },
+                    {
+                        label: 'Set feature height',
+                        subMenu: [
+                            {
+                                label: 'Normal',
+                                onClick: () => {
+                                    self.setFeatureHeight(7);
+                                    self.setNoSpacing(false);
+                                },
+                            },
+                            {
+                                label: 'Compact',
+                                onClick: () => {
+                                    self.setFeatureHeight(2);
+                                    self.setNoSpacing(true);
+                                },
+                            },
+                            {
+                                label: 'Manually set height',
+                                onClick: () => {
+                                    (0, util_1.getSession)(self).queueDialog(doneCallback => [
+                                        SetFeatureHeightDlg,
+                                        { model: self, handleClose: doneCallback },
+                                    ]);
+                                },
+                            },
+                        ],
+                    },
+                    {
+                        label: 'Set max height...',
+                        onClick: () => {
+                            (0, util_1.getSession)(self).queueDialog(doneCallback => [
+                                SetMaxHeightDlg,
+                                { model: self, handleClose: doneCallback },
+                            ]);
+                        },
+                    },
+                ];
+            },
+        };
+    })
+        .views(self => ({
+        renderProps() {
+            return self.renderPropsPre();
+        },
+    }))
+        .actions(self => ({
+        afterAttach() {
+            (0, util_2.createAutorun)(self, async () => {
+                const view = (0, util_1.getContainingView)(self);
+                if (!self.autorunReady) {
+                    return;
+                }
+                const { colorBy, tagsReady } = self;
+                const { staticBlocks } = view;
+                if ((colorBy === null || colorBy === void 0 ? void 0 : colorBy.tag) && !tagsReady) {
+                    const vals = await (0, shared_1.getUniqueTagValues)(self, colorBy, staticBlocks);
+                    self.updateColorTagMap(vals);
+                }
+                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
+            (0, mobx_state_tree_1.addDisposer)(self, (0, mobx_1.autorun)(async () => {
+                var _a;
+                const session = (0, util_1.getSession)(self);
+                try {
+                    const featureId = self.featureIdUnderMouse;
+                    if (((_a = self.featureUnderMouse) === null || _a === void 0 ? void 0 : _a.id()) !== featureId) {
+                        if (!featureId) {
+                            self.setFeatureUnderMouse(undefined);
+                        }
+                        else {
+                            const sessionId = (0, tracks_1.getRpcSessionId)(self);
+                            const view = (0, util_1.getContainingView)(self);
+                            const { feature } = (await session.rpcManager.call(sessionId, 'CoreGetFeatureDetails', {
+                                featureId,
+                                sessionId,
+                                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 (self.featureIdUnderMouse === feature.uniqueId) {
+                                self.setFeatureUnderMouse(new util_1.SimpleFeature(feature));
+                            }
+                        }
+                    }
+                }
+                catch (e) {
+                    console.error(e);
+                    session.notify(`${e}`, 'error');
+                }
+            }));
+        },
+    }));
+}
+exports.SharedLinearPileupDisplayMixin = SharedLinearPileupDisplayMixin;

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ObservableMap } from 'mobx';
-declare function ColorByTagDlg(props: {
+declare const ColorByModificationsDialog: ({ model, handleClose, }: {
     model: {
         setColorScheme: (arg: {
             type: string;
@@ -8,9 +8,8 @@ declare function ColorByTagDlg(props: {
         modificationTagMap: ObservableMap<string, string>;
         colorBy?: {
             type: string;
-        };
+        } | undefined;
     };
     handleClose: () => void;
-}): React.JSX.Element;
-declare const _default: typeof ColorByTagDlg;
-export default _default;
+}) => React.JSX.Element;
+export default ColorByModificationsDialog;

package/dist/LinearPileupDisplay/components/ColorByModifications.js

@@ -8,8 +8,7 @@ const mobx_react_1 = require("mobx-react");
 const material_1 = require("@mui/material");
 const ui_1 = require("@jbrowse/core/ui");
 const ModificationsTable_1 = __importDefault(require("./ModificationsTable"));
-function ColorByTagDlg(props) {
-    const { model, handleClose } = props;
+const ColorByModificationsDialog = (0, mobx_react_1.observer)(function ({ model, handleClose, }) {
     const { colorBy, modificationTagMap } = model;
     const modifications = [...modificationTagMap.entries()];
     return (react_1.default.createElement(ui_1.Dialog, { open: true, onClose: handleClose, title: "Color by modifications" },
@@ -36,5 +35,5 @@ function ColorByTagDlg(props) {
                         handleClose();
                     } }, "Methylation"),
                 react_1.default.createElement(material_1.Button, { variant: "contained", color: "secondary", onClick: () => handleClose() }, "Cancel")))));
-}
-exports.default = (0, mobx_react_1.observer)(ColorByTagDlg);
+});
+exports.default = ColorByModificationsDialog;

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

@@ -1,9 +1,11 @@
 import React from 'react';
-declare function ColorByTagDlg(props: {
+declare const ColorByTagDialog: ({ model, handleClose, }: {
     model: {
-        setColorScheme: Function;
+        setColorScheme: (arg: {
+            type: string;
+            tag: string;
+        }) => void;
     };
     handleClose: () => void;
-}): React.JSX.Element;
-declare const _default: typeof ColorByTagDlg;
-export default _default;
+}) => React.JSX.Element;
+export default ColorByTagDialog;

package/dist/LinearPileupDisplay/components/ColorByTag.js

@@ -27,22 +27,19 @@ 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");
-function ColorByTagDlg(props) {
-    const { model, handleClose } = props;
+const ColorByTagDialog = (0, mobx_react_1.observer)(function ({ model, handleClose, }) {
     const [tag, setTag] = (0, react_1.useState)('');
     const validTag = tag.match(/^[A-Za-z][A-Za-z0-9]$/);
     return (react_1.default.createElement(ui_1.Dialog, { open: true, onClose: handleClose, title: "Color by tag" },
         react_1.default.createElement(material_1.DialogContent, { style: { overflowX: 'hidden' } },
             react_1.default.createElement(material_1.Typography, null, "Enter tag to color by: "),
             react_1.default.createElement(material_1.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_1.default.createElement(material_1.TextField, { value: tag, onChange: event => setTag(event.target.value), placeholder: "Enter tag name", inputProps: {
-                    maxLength: 2,
-                }, error: tag.length === 2 && !validTag, helperText: tag.length === 2 && !validTag ? 'Not a valid tag' : '', autoComplete: "off" }),
+            react_1.default.createElement(material_1.TextField, { value: tag, onChange: event => setTag(event.target.value), placeholder: "Enter tag name", inputProps: { maxLength: 2 }, error: tag.length === 2 && !validTag, helperText: tag.length === 2 && !validTag ? 'Not a valid tag' : '', autoComplete: "off" }),
             react_1.default.createElement(material_1.DialogActions, null,
                 react_1.default.createElement(material_1.Button, { variant: "contained", color: "primary", onClick: () => {
                         model.setColorScheme({ type: 'tag', tag });
                         handleClose();
                     }, disabled: !validTag }, "Submit"),
                 react_1.default.createElement(material_1.Button, { variant: "contained", color: "secondary", onClick: handleClose }, "Cancel")))));
-}
-exports.default = (0, mobx_react_1.observer)(ColorByTagDlg);
+});
+exports.default = ColorByTagDialog;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-export interface LinearPileupDisplayBlurbProps {
+declare const LinearPileupDisplayBlurb: ({ model, }: {
     model: {
         sortedBy?: {
             pos: number;
@@ -8,6 +8,5 @@ export interface LinearPileupDisplayBlurbProps {
             tag?: string;
         };
     };
-}
-declare const _default: (props: LinearPileupDisplayBlurbProps) => React.JSX.Element | null;
-export default _default;
+}) => React.JSX.Element | null;
+export default LinearPileupDisplayBlurb;

package/dist/LinearPileupDisplay/components/LinearPileupDisplayBlurb.js

@@ -6,12 +6,12 @@ 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");
-exports.default = (0, mobx_react_1.observer)(function LinearPileupDisplayBlurb(props) {
+const LinearPileupDisplayBlurb = (0, mobx_react_1.observer)(function ({ model, }) {
     var _a;
-    const { model } = props;
     const { sortedBy } = model;
     return sortedBy ? (react_1.default.createElement("div", { "data-testid": `blurb-${sortedBy}` },
         react_1.default.createElement(material_1.Typography, { color: "secondary", variant: "caption" }, sortedBy
             ? `Sorted by ${(_a = sortedBy.tag) !== null && _a !== void 0 ? _a : sortedBy.type} at ${sortedBy.refName}:${sortedBy.pos}`
             : null))) : null;
 });
+exports.default = LinearPileupDisplayBlurb;

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

@@ -1,12 +1,11 @@
 import React from 'react';
-declare function SetFeatureHeightDlg(props: {
+declare const SetFeatureHeightDialog: (props: {
     model: {
         setFeatureHeight: (arg?: number) => void;
         setNoSpacing: (arg?: boolean) => void;
         featureHeightSetting: number;
-        noSpacing?: boolean;
+        noSpacing?: boolean | undefined;
     };
     handleClose: () => void;
-}): React.JSX.Element;
-declare const _default: typeof SetFeatureHeightDlg;
-export default _default;
+}) => React.JSX.Element;
+export default SetFeatureHeightDialog;