@jbrowse/plugin-linear-comparative-view 2.6.1 → 2.6.3

package/dist/LinearSyntenyView/model.d.ts

@@ -125,12 +125,12 @@ export default function stateModelFactory(pluginManager: PluginManager): import(
         toggleNoTracksActive(): void;
         toggleShowGridlines(): void;
         scrollTo(offsetPx: number): number;
-        zoomTo(bpPerPx: number, offset?: number | undefined, centerAtOffset?: boolean | undefined): number;
+        zoomTo(bpPerPx: number, offset?: number, centerAtOffset?: boolean): number;
         setOffsets(left?: import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView").BpOffset | undefined, right?: import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView").BpOffset | undefined): void;
         setSearchResults(searchResults: import("@jbrowse/core/TextSearch/BaseResults").default[], searchQuery: string, assemblyName?: string | undefined): void;
         setNewView(bpPerPx: number, offsetPx: number): void;
         horizontallyFlip(): void;
-        showTrack(trackId: string, initialSnapshot?: {} | undefined, displayInitialSnapshot?: {} | undefined): any;
+        showTrack(trackId: string, initialSnapshot?: {}, displayInitialSnapshot?: {}): any;
         hideTrack(trackId: string): number;
     } & {
         moveTrack(movingId: string, targetId: string): void;
@@ -161,7 +161,7 @@ export default function stateModelFactory(pluginManager: PluginManager): import(
         setDraggingTrackId(idx?: string | undefined): void;
         setScaleFactor(factor: number): void;
         clearView(): void;
-        exportSvg(opts?: import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView").ExportSvgOptions | undefined): Promise<void>;
+        exportSvg(opts?: import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView").ExportSvgOptions): Promise<void>;
     } & {
         slide: (viewWidths: number) => void;
     } & {
@@ -375,12 +375,12 @@ export default function stateModelFactory(pluginManager: PluginManager): import(
         toggleNoTracksActive(): void;
         toggleShowGridlines(): void;
         scrollTo(offsetPx: number): number;
-        zoomTo(bpPerPx: number, offset?: number | undefined, centerAtOffset?: boolean | undefined): number;
+        zoomTo(bpPerPx: number, offset?: number, centerAtOffset?: boolean): number;
         setOffsets(left?: import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView").BpOffset | undefined, right?: import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView").BpOffset | undefined): void;
         setSearchResults(searchResults: import("@jbrowse/core/TextSearch/BaseResults").default[], searchQuery: string, assemblyName?: string | undefined): void;
         setNewView(bpPerPx: number, offsetPx: number): void;
         horizontallyFlip(): void;
-        showTrack(trackId: string, initialSnapshot?: {} | undefined, displayInitialSnapshot?: {} | undefined): any;
+        showTrack(trackId: string, initialSnapshot?: {}, displayInitialSnapshot?: {}): any;
         hideTrack(trackId: string): number;
     } & {
         moveTrack(movingId: string, targetId: string): void;
@@ -411,7 +411,7 @@ export default function stateModelFactory(pluginManager: PluginManager): import(
         setDraggingTrackId(idx?: string | undefined): void;
         setScaleFactor(factor: number): void;
         clearView(): void;
-        exportSvg(opts?: import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView").ExportSvgOptions | undefined): Promise<void>;
+        exportSvg(opts?: import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView").ExportSvgOptions): Promise<void>;
     } & {
         slide: (viewWidths: number) => void;
     } & {
@@ -563,12 +563,12 @@ export default function stateModelFactory(pluginManager: PluginManager): import(
         toggleNoTracksActive(): void;
         toggleShowGridlines(): void;
         scrollTo(offsetPx: number): number;
-        zoomTo(bpPerPx: number, offset?: number | undefined, centerAtOffset?: boolean | undefined): number;
+        zoomTo(bpPerPx: number, offset?: number, centerAtOffset?: boolean): number;
         setOffsets(left?: import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView").BpOffset | undefined, right?: import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView").BpOffset | undefined): void;
         setSearchResults(searchResults: import("@jbrowse/core/TextSearch/BaseResults").default[], searchQuery: string, assemblyName?: string | undefined): void;
         setNewView(bpPerPx: number, offsetPx: number): void;
         horizontallyFlip(): void;
-        showTrack(trackId: string, initialSnapshot?: {} | undefined, displayInitialSnapshot?: {} | undefined): any;
+        showTrack(trackId: string, initialSnapshot?: {}, displayInitialSnapshot?: {}): any;
         hideTrack(trackId: string): number;
     } & {
         moveTrack(movingId: string, targetId: string): void;
@@ -599,7 +599,7 @@ export default function stateModelFactory(pluginManager: PluginManager): import(
         setDraggingTrackId(idx?: string | undefined): void;
         setScaleFactor(factor: number): void;
         clearView(): void;
-        exportSvg(opts?: import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView").ExportSvgOptions | undefined): Promise<void>;
+        exportSvg(opts?: import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView").ExportSvgOptions): Promise<void>;
     } & {
         slide: (viewWidths: number) => void;
     } & {

package/dist/LinearSyntenyView/model.js

@@ -167,4 +167,3 @@ function stateModelFactory(pluginManager) {
     });
 }
 exports.default = stateModelFactory;
-//# sourceMappingURL=model.js.map

package/dist/LinearSyntenyView/svgcomponents/SVGBackground.js

@@ -5,9 +5,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const material_1 = require("@mui/material");
+const color_1 = __importDefault(require("color"));
 function SVGBackground({ width, height, shift, }) {
     const theme = (0, material_1.useTheme)();
-    return (react_1.default.createElement("rect", { width: width + shift * 2, height: height, fill: theme.palette.background.default }));
+    return (react_1.default.createElement("rect", { width: width + shift * 2, height: height, fill: (0, color_1.default)(theme.palette.background.default).hex() }));
 }
 exports.default = SVGBackground;
-//# sourceMappingURL=SVGBackground.js.map

package/dist/LinearSyntenyView/svgcomponents/SVGLinearSyntenyView.js

@@ -82,4 +82,3 @@ async function renderToSvg(model, opts) {
                     react_1.default.createElement(plugin_linear_genome_view_1.SVGTracks, { textHeight: textHeight, trackLabels: trackLabels, fontSize: fontSize, model: displayResults[1].view, displayResults: displayResults[1].data, offset: offset, trackLabelOffset: trackLabelOffset }))))));
 }
 exports.renderToSvg = renderToSvg;
-//# sourceMappingURL=SVGLinearSyntenyView.js.map

package/dist/SyntenyFeatureDetail/SyntenyFeatureDetail.js

@@ -63,4 +63,3 @@ const BreakpointAlignmentsFeatureDetail = (0, mobx_react_1.observer)(
         react_1.default.createElement(CustomFeatureDetails, { feature: feature2 })));
 });
 exports.default = BreakpointAlignmentsFeatureDetail;
-//# sourceMappingURL=SyntenyFeatureDetail.js.map

package/dist/SyntenyFeatureDetail/index.js

@@ -55,4 +55,3 @@ exports.default = (pluginManager) => {
         ReactComponent: (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./SyntenyFeatureDetail')))),
     }));
 };
-//# sourceMappingURL=index.js.map

package/dist/SyntenyTrack/configSchema.js

@@ -13,4 +13,3 @@ const configSchema = (pluginManager) => (0, configuration_1.ConfigurationSchema)
     baseConfiguration: (0, models_1.createBaseTrackConfig)(pluginManager),
 });
 exports.default = configSchema;
-//# sourceMappingURL=configSchema.js.map

package/dist/SyntenyTrack/index.js

@@ -16,4 +16,3 @@ exports.default = (pm) => {
         });
     });
 };
-//# sourceMappingURL=index.js.map

package/dist/index.js

@@ -44,4 +44,3 @@ class default_1 extends Plugin_1.default {
     }
 }
 exports.default = default_1;
-//# sourceMappingURL=index.js.map

package/dist/util.js

@@ -74,4 +74,3 @@ function interstitialYPos(cond, height) {
     return cond ? 0 : height;
 }
 exports.interstitialYPos = interstitialYPos;
-//# sourceMappingURL=util.js.map

package/esm/LGVSyntenyDisplay/configSchemaF.d.ts

@@ -6,9 +6,7 @@ declare function configSchemaF(pluginManager: PluginManager): import("@jbrowse/c
     defaultRendering: {
         type: string;
         model: import("mobx-state-tree").ISimpleType<string>;
-        defaultValue: string; /**
-         * #baseConfiguration
-         */
+        defaultValue: string;
     };
     renderers: import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
         PileupRenderer: import("@jbrowse/core/configuration").AnyConfigurationSchemaType;

package/esm/LGVSyntenyDisplay/configSchemaF.js

@@ -13,4 +13,3 @@ function configSchemaF(pluginManager) {
     });
 }
 export default configSchemaF;
-//# sourceMappingURL=configSchemaF.js.map

package/esm/LGVSyntenyDisplay/index.js

@@ -16,4 +16,3 @@ export default (pluginManager) => {
         });
     });
 };
-//# sourceMappingURL=index.js.map

package/esm/LGVSyntenyDisplay/model.d.ts

@@ -86,21 +86,11 @@ declare function stateModelFactory(schema: AnyConfigurationSchemaType): import("
         };
     }, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, "displayId">>;
 } & {
-    type: import("mobx-state-tree").ISimpleType<"LinearPileupDisplay">;
     configuration: AnyConfigurationSchemaType;
-    showSoftClipping: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
     featureHeight: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<number>>;
     noSpacing: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<boolean>>;
     fadeLikelihood: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<boolean>>;
     trackMaxHeight: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<number>>;
-    mismatchAlpha: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<boolean>>;
-    sortedBy: import("mobx-state-tree").IMaybe<import("mobx-state-tree").IModelType<{
-        type: import("mobx-state-tree").ISimpleType<string>;
-        pos: import("mobx-state-tree").ISimpleType<number>;
-        tag: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
-        refName: import("mobx-state-tree").ISimpleType<string>;
-        assemblyName: import("mobx-state-tree").ISimpleType<string>;
-    }, {}, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
     colorBy: import("mobx-state-tree").IMaybe<import("mobx-state-tree").IModelType<{
         type: import("mobx-state-tree").ISimpleType<string>;
         tag: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
@@ -219,7 +209,7 @@ declare function stateModelFactory(schema: AnyConfigurationSchemaType): import("
     featureIdUnderMouse: string | undefined;
     contextMenuFeature: Feature | undefined;
 } & {
-    readonly blockType: "staticBlocks" | "dynamicBlocks";
+    readonly blockType: "dynamicBlocks" | "staticBlocks";
     readonly blockDefinitions: import("@jbrowse/core/util/blockTypes").BlockSet;
 } & {
     readonly renderDelay: number;
@@ -250,43 +240,30 @@ declare function stateModelFactory(schema: AnyConfigurationSchemaType): import("
     afterAttach(): void;
 } & {
     colorTagMap: import("mobx").ObservableMap<string, string>;
-    modificationTagMap: import("mobx").ObservableMap<string, string>;
     featureUnderMouseVolatile: Feature | undefined;
-    currSortBpPerPx: number;
-    modificationsReady: boolean;
-    sortReady: boolean;
     tagsReady: boolean;
 } & {
     readonly autorunReady: boolean;
 } & {
-    setModificationsReady(flag: boolean): void;
     setTagsReady(flag: boolean): void;
-    setSortReady(flag: boolean): void;
-    setCurrSortBpPerPx(n: number): void;
     setMaxHeight(n: number): void;
     setFeatureHeight(n?: number | undefined): void;
     setNoSpacing(flag?: boolean | undefined): void;
     setColorScheme(colorScheme: {
         type: string;
         tag?: string | undefined;
+        extra?: import("@jbrowse/plugin-alignments/src/shared/color").ExtraColorBy | undefined;
     }): void;
-    updateModificationColorMap(uniqueModifications: string[]): void;
     updateColorTagMap(uniqueTag: string[]): void;
     setFeatureUnderMouse(feat?: Feature | undefined): void;
     selectFeature(feature: Feature): void;
-    clearSelected(): void;
     copyFeatureToClipboard(feature: Feature): void;
-    toggleSoftClipping(): void;
-    toggleMismatchAlpha(): void;
     setConfig(conf: {
         [x: string]: any;
     } & import("mobx-state-tree/dist/internal").NonEmptyObject & {
         setSubschema(slotName: string, data: unknown): any;
     } & import("mobx-state-tree").IStateTreeNode<AnyConfigurationSchemaType>): void;
-    setSortedBy(type: string, tag?: string | undefined): void;
-    setFilterBy(filter: import("@jbrowse/plugin-alignments/src/LinearPileupDisplay/model").Filter): void;
-} & {
-    reload(): void;
+    setFilterBy(filter: import("@jbrowse/plugin-alignments/src/LinearPileupDisplay/SharedLinearPileupDisplayMixin").Filter): void;
 } & {
     readonly rendererConfig: {
         [x: string]: any;
@@ -296,9 +273,8 @@ declare function stateModelFactory(schema: AnyConfigurationSchemaType): import("
 } & {
     readonly maxHeight: any;
     readonly featureHeightSetting: any;
-    readonly mismatchAlphaSetting: any;
     readonly featureUnderMouse: Feature | undefined;
-    readonly renderReady: boolean;
+    renderReady(): boolean;
 } & {
     readonly rendererTypeName: string;
     contextMenuItems(): ({
@@ -314,66 +290,31 @@ declare function stateModelFactory(schema: AnyConfigurationSchemaType): import("
     })[];
     readonly DisplayBlurb: (props: import("@jbrowse/plugin-alignments/src/LinearPileupDisplay/components/LinearPileupDisplayBlurb").LinearPileupDisplayBlurbProps) => import("react").JSX.Element | null;
     renderPropsPre(): any;
-    renderProps(): any;
-    trackMenuItems(): (import("@jbrowse/core/ui").MenuDivider | import("@jbrowse/core/ui").MenuSubHeader | import("@jbrowse/core/ui").NormalMenuItem | import("@jbrowse/core/ui").CheckboxMenuItem | import("@jbrowse/core/ui").RadioMenuItem | import("@jbrowse/core/ui").SubMenuItem | {
+    colorSchemeSubMenuItems(): {
         label: string;
-        icon: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
-            muiName: string;
-        };
-        type: string;
-        checked: boolean;
         onClick: () => void;
-        disabled?: undefined;
-        subMenu?: undefined;
-    } | {
-        label: string;
-        icon: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
-            muiName: string;
-        };
-        disabled: boolean;
-        subMenu: {
-            label: string;
-            onClick: () => void;
-        }[];
-        type?: undefined;
-        checked?: undefined;
-        onClick?: undefined;
-    } | {
-        label: string;
-        icon: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
-            muiName: string;
-        };
-        subMenu: {
-            label: string;
-            onClick: () => void;
-        }[];
-        type?: undefined;
-        checked?: undefined;
-        onClick?: undefined;
-        disabled?: undefined;
-    } | {
+    }[];
+    trackMenuItems(): (import("@jbrowse/core/ui").MenuDivider | import("@jbrowse/core/ui").MenuSubHeader | import("@jbrowse/core/ui").NormalMenuItem | import("@jbrowse/core/ui").CheckboxMenuItem | import("@jbrowse/core/ui").RadioMenuItem | import("@jbrowse/core/ui").SubMenuItem | {
         label: string;
         icon: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
             muiName: string;
         };
         onClick: () => void;
-        type?: undefined;
-        checked?: undefined;
-        disabled?: undefined;
-        subMenu?: undefined;
-    } | {
-        label: string;
-        type: string;
-        checked: any;
-        onClick: () => void;
-        icon?: undefined;
-        disabled?: undefined;
-        subMenu?: undefined;
     })[];
+} & {
+    renderProps(): any;
 } & {
     afterAttach(): void;
 } & {
     contextMenuItems(): import("@jbrowse/core/ui").MenuItem[];
+} & {
+    trackMenuItems(): (import("@jbrowse/core/ui").MenuDivider | import("@jbrowse/core/ui").MenuSubHeader | import("@jbrowse/core/ui").NormalMenuItem | import("@jbrowse/core/ui").CheckboxMenuItem | import("@jbrowse/core/ui").RadioMenuItem | import("@jbrowse/core/ui").SubMenuItem | {
+        label: string;
+        subMenu: {
+            label: string;
+            onClick: () => void;
+        }[];
+    })[];
 } & {
     afterCreate(): void;
 }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>;

package/esm/LGVSyntenyDisplay/model.js

@@ -1,6 +1,6 @@
 import { ConfigurationReference, } from '@jbrowse/core/configuration';
 import { getSession, getContainingTrack, getContainingView, } from '@jbrowse/core/util';
-import { MismatchParser, linearPileupDisplayStateModelFactory, } from '@jbrowse/plugin-alignments';
+import { MismatchParser, SharedLinearPileupDisplayMixin, } from '@jbrowse/plugin-alignments';
 import { types } from 'mobx-state-tree';
 import { when } from 'mobx';
 const { parseCigar } = MismatchParser;
@@ -112,7 +112,7 @@ async function navToSynteny(feature, self) {
  */
 function stateModelFactory(schema) {
     return types
-        .compose('LGVSyntenyDisplay', linearPileupDisplayStateModelFactory(schema), types.model({
+        .compose('LGVSyntenyDisplay', SharedLinearPileupDisplayMixin(schema), types.model({
         /**
          * #property
          */
@@ -140,13 +140,31 @@ function stateModelFactory(schema) {
                 ];
             },
         };
+    })
+        .views(self => {
+        const { trackMenuItems: superTrackMenuItems, colorSchemeSubMenuItems: superColorSchemeSubMenuItems, } = self;
+        return {
+            trackMenuItems() {
+                return [
+                    ...superTrackMenuItems(),
+                    {
+                        label: 'Color scheme',
+                        subMenu: [...superColorSchemeSubMenuItems()],
+                    },
+                ];
+            },
+        };
     })
         .actions(self => ({
         afterCreate() {
-            // use color by strand to help indicate inversions better
-            self.setColorScheme({ type: 'strand' });
+            // use color by stand to help indicate inversions better on first load, otherwise use selected orientation
+            if (self.colorBy) {
+                self.setColorScheme({ ...self.colorBy });
+            }
+            else {
+                self.setColorScheme({ type: 'strand' });
+            }
         },
     }));
 }
 export default stateModelFactory;
-//# sourceMappingURL=model.js.map

package/esm/LaunchLinearSyntenyView.js

@@ -52,4 +52,3 @@ function tryTrack(model, trackId, idsNotFound) {
         }
     }
 }
-//# sourceMappingURL=LaunchLinearSyntenyView.js.map

package/esm/LinearComparativeDisplay/configSchemaF.js

@@ -13,4 +13,3 @@ function configSchemaFactory(pluginManager) {
     });
 }
 export default configSchemaFactory;
-//# sourceMappingURL=configSchemaF.js.map

package/esm/LinearComparativeDisplay/index.js

@@ -16,4 +16,3 @@ export default (pluginManager) => {
         });
     });
 };
-//# sourceMappingURL=index.js.map

package/esm/LinearComparativeDisplay/stateModelFactory.js

@@ -167,4 +167,3 @@ async function renderBlockEffect(props) {
     };
 }
 export default stateModelFactory;
-//# sourceMappingURL=stateModelFactory.js.map

package/esm/LinearComparativeView/components/Header.js

@@ -7,6 +7,7 @@ import { Menu } from '@jbrowse/core/ui';
 // icons
 import MoreVertIcon from '@mui/icons-material/MoreVert';
 import { TrackSelector as TrackSelectorIcon } from '@jbrowse/core/ui/Icons';
+import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton';
 const useStyles = makeStyles()(() => ({
     headerBar: {
         gridArea: '1/1/auto/span 2',
@@ -31,7 +32,16 @@ const useStyles = makeStyles()(() => ({
     },
 }));
 const TrackSelector = observer(({ model }) => {
-    return (React.createElement(IconButton, { onClick: model.activateTrackSelector, title: "Open track selector" },
+    return (React.createElement(CascadingMenuButton, { menuItems: [
+            {
+                label: 'Synteny track selector',
+                onClick: () => model.activateTrackSelector(),
+            },
+            ...model.views.map((view, idx) => ({
+                label: `View ${idx + 1} track selector`,
+                onClick: () => view.activateTrackSelector(),
+            })),
+        ] },
         React.createElement(TrackSelectorIcon, null)));
 });
 const Header = observer(function ({ model }) {
@@ -58,4 +68,3 @@ const Header = observer(function ({ model }) {
             }, menuItems: model.headerMenuItems(), onClose: () => setMenuAnchorEl(undefined) })) : null));
 });
 export default Header;
-//# sourceMappingURL=Header.js.map

package/esm/LinearComparativeView/components/LinearComparativeView.js

@@ -91,4 +91,3 @@ export default observer(function (props) {
     const middle = model.tracks.some(({ displays }) => displays.some((d) => getConf(d, 'middle')));
     return middle ? (React.createElement(MiddleComparativeView, { ...props })) : (React.createElement(OverlayComparativeView, { ...props }));
 });
-//# sourceMappingURL=LinearComparativeView.js.map

package/esm/LinearComparativeView/components/Rubberband.js

@@ -1,9 +1,10 @@
 import React, { useRef, useEffect, useState } from 'react';
 import { observer } from 'mobx-react';
-import { Popover, Tooltip, Typography, alpha } from '@mui/material';
+import { Popover, Typography, alpha } from '@mui/material';
 import { makeStyles } from 'tss-react/mui';
 import { stringify } from '@jbrowse/core/util';
 import { Menu } from '@jbrowse/core/ui';
+import VerticalGuide from './VerticalGuide';
 const useStyles = makeStyles()(theme => {
     const { tertiary, primary } = theme.palette;
     const background = tertiary
@@ -34,28 +35,8 @@ const useStyles = makeStyles()(theme => {
             paddingLeft: theme.spacing(1),
             paddingRight: theme.spacing(1),
         },
-        guide: {
-            pointerEvents: 'none',
-            height: '100%',
-            width: 1,
-            position: 'absolute',
-            zIndex: 10,
-        },
-        sm: {
-            fontSize: 10,
-        },
     };
 });
-const VerticalGuide = observer(({ model, coordX }) => {
-    const { classes } = useStyles();
-    return (React.createElement(Tooltip, { open: true, placement: "top", title: model.views
-            .map(view => view.pxToBp(coordX))
-            .map(elt => (React.createElement(Typography, { className: classes.sm, key: JSON.stringify(elt) }, stringify(elt)))), arrow: true },
-        React.createElement("div", { className: classes.guide, style: {
-                left: coordX,
-                background: 'red',
-            } })));
-});
 function Rubberband({ model, ControlComponent = React.createElement("div", null), }) {
     const [startX, setStartX] = useState();
     const [currentX, setCurrentX] = useState();
@@ -158,9 +139,8 @@ function Rubberband({ model, ControlComponent = React.createElement("div", null)
     if (startX === undefined) {
         return (React.createElement(React.Fragment, null,
             guideX !== undefined ? (React.createElement(VerticalGuide, { model: model, coordX: guideX })) : null,
-            React.createElement("div", { "data-testid": "rubberband_controls", className: classes.rubberbandControl, role: "presentation", ref: controlsRef, onMouseDown: mouseDown, onMouseOut: mouseOut, onMouseMove: mouseMove }, ControlComponent)));
+            React.createElement("div", { ref: controlsRef, className: classes.rubberbandControl, onMouseDown: mouseDown, onMouseOut: mouseOut, onMouseMove: mouseMove }, ControlComponent)));
     }
-    /* Calculating Pixels for Mouse Dragging */
     const right = anchorPosition ? anchorPosition.offsetX : currentX || 0;
     const left = right < startX ? right : startX;
     const width = Math.abs(right - startX);
@@ -170,31 +150,26 @@ function Rubberband({ model, ControlComponent = React.createElement("div", null)
     const numOfBpSelected = views.map(view => Math.ceil(width * view.bpPerPx));
     return (React.createElement(React.Fragment, null,
         rubberbandRef.current ? (React.createElement(React.Fragment, null,
-            React.createElement(Popover, { className: classes.popover, classes: {
-                    paper: classes.paper,
-                }, open: true, anchorEl: rubberbandRef.current, anchorOrigin: {
+            React.createElement(Popover, { className: classes.popover, classes: { paper: classes.paper }, open: true, anchorEl: rubberbandRef.current, anchorOrigin: {
                     vertical: 'top',
                     horizontal: 'left',
                 }, transformOrigin: {
                     vertical: 'bottom',
                     horizontal: 'right',
-                }, keepMounted: true, disableRestoreFocus: true }, leftBpOffset.map(l => (React.createElement(Typography, { key: JSON.stringify(l) }, stringify(l))))),
-            React.createElement(Popover, { className: classes.popover, classes: {
-                    paper: classes.paper,
-                }, open: true, anchorEl: rubberbandRef.current, anchorOrigin: {
+                }, keepMounted: true, disableRestoreFocus: true }, leftBpOffset.map((l, idx) => (React.createElement(Typography, { key: [JSON.stringify(l), idx, 'left'].join('-') }, stringify(l, true))))),
+            React.createElement(Popover, { className: classes.popover, classes: { paper: classes.paper }, open: true, anchorEl: rubberbandRef.current, anchorOrigin: {
                     vertical: 'top',
                     horizontal: 'right',
                 }, transformOrigin: {
                     vertical: 'bottom',
                     horizontal: 'left',
-                }, keepMounted: true, disableRestoreFocus: true }, rightBpOffset.map(l => (React.createElement(Typography, { key: JSON.stringify(l) }, stringify(l))))))) : null,
+                }, keepMounted: true, disableRestoreFocus: true }, rightBpOffset.map((l, idx) => (React.createElement(Typography, { key: [JSON.stringify(l), idx, 'right'].join('-') }, stringify(l, true))))))) : null,
         React.createElement("div", { ref: rubberbandRef, className: classes.rubberband, style: { left, width } },
             React.createElement(Typography, { variant: "h6", className: classes.rubberbandText }, numOfBpSelected.map((n, i) => (React.createElement(Typography, { key: `${n}_${i}` }, `${n.toLocaleString('en-US')}bp`))))),
-        React.createElement("div", { "data-testid": "rubberband_controls", className: classes.rubberbandControl, role: "presentation", ref: controlsRef, onMouseDown: mouseDown, onMouseOut: mouseOut, onMouseMove: mouseMove }, ControlComponent),
+        React.createElement("div", { className: classes.rubberbandControl, ref: controlsRef, onMouseDown: mouseDown, onMouseOut: mouseOut, onMouseMove: mouseMove }, ControlComponent),
         anchorPosition ? (React.createElement(Menu, { anchorReference: "anchorPosition", anchorPosition: {
                 left: anchorPosition.clientX,
                 top: anchorPosition.clientY,
             }, onMenuItemClick: handleMenuItemClick, open: open, onClose: handleClose, menuItems: model.rubberBandMenuItems() })) : null));
 }
 export default observer(Rubberband);
-//# sourceMappingURL=Rubberband.js.map

package/esm/LinearComparativeView/components/VerticalGuide.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { LinearComparativeViewModel } from '../model';
+type LCV = LinearComparativeViewModel;
+declare const VerticalGuide: ({ model, coordX, }: {
+    model: LCV;
+    coordX: number;
+}) => React.JSX.Element;
+export default VerticalGuide;

package/esm/LinearComparativeView/components/VerticalGuide.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Tooltip, Typography } from '@mui/material';
+import { observer } from 'mobx-react';
+import { stringify } from '@jbrowse/core/util';
+import { makeStyles } from 'tss-react/mui';
+const useStyles = makeStyles()({
+    guide: {
+        pointerEvents: 'none',
+        height: '100%',
+        width: 1,
+        position: 'absolute',
+        zIndex: 10,
+    },
+    sm: {
+        fontSize: 10,
+    },
+});
+const VerticalGuide = observer(function ({ model, coordX, }) {
+    const { classes } = useStyles();
+    return (React.createElement(Tooltip, { open: true, placement: "top", title: model.views
+            .map(view => view.pxToBp(coordX))
+            .map((elt, idx) => (React.createElement(Typography, { className: classes.sm, key: [JSON.stringify(elt), idx].join('-') }, stringify(elt, true)))), arrow: true },
+        React.createElement("div", { className: classes.guide, style: {
+                left: coordX,
+                background: 'red',
+            } })));
+});
+export default VerticalGuide;

package/esm/LinearComparativeView/index.js

@@ -11,4 +11,3 @@ export default (pluginManager) => {
         });
     });
 };
-//# sourceMappingURL=index.js.map