@jbrowse/plugin-linear-comparative-view 3.5.1 → 3.6.0

package/dist/LinearComparativeDisplay/stateModelFactory.d.ts

@@ -70,6 +70,7 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
     renderInProgress: string | undefined;
     features: Feature[] | undefined;
     message: string | undefined;
+    loadingStatus: string | undefined;
 } & {
     readonly level: number;
     readonly height: number;
@@ -152,6 +153,7 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
             renderInProgress: string | undefined;
             features: Feature[] | undefined;
             message: string | undefined;
+            loadingStatus: string | undefined;
         } & import("mobx-state-tree").IStateTreeNode<import("mobx-state-tree").IModelType<{
             id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
             type: import("mobx-state-tree").ISimpleType<string>;
@@ -221,12 +223,14 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
             renderInProgress: string | undefined;
             features: Feature[] | undefined;
             message: string | undefined;
+            loadingStatus: string | undefined;
         }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
         highResolutionScaling: number;
     };
 } & {
     setLoading(newStopToken: string): void;
     setMessage(messageText: string): void;
+    setLoadingStatus(messageText: string): void;
     setRendered(args?: {
         features: Feature[];
     }): void;

package/dist/LinearComparativeDisplay/stateModelFactory.js

@@ -16,6 +16,7 @@ function stateModelFactory(configSchema) {
         renderInProgress: undefined,
         features: undefined,
         message: undefined,
+        loadingStatus: undefined,
     }))
         .views(self => ({
         get level() {
@@ -45,6 +46,9 @@ function stateModelFactory(configSchema) {
                 self.error = undefined;
                 stopToken = undefined;
             },
+            setLoadingStatus(messageText) {
+                self.loadingStatus = messageText;
+            },
             setRendered(args) {
                 if (!args) {
                     return;
@@ -110,6 +114,7 @@ function renderBlockData(self) {
             rpcManager,
             renderProps: {
                 ...display.renderProps(),
+                model: display,
                 level,
                 view: parent,
                 adapterConfig,
@@ -125,15 +130,17 @@ async function renderBlockEffect(props) {
         return;
     }
     const { rpcManager, renderProps } = props;
-    const { sessionId, adapterConfig, level } = renderProps;
+    const { model, sessionId, adapterConfig, level } = renderProps;
     const view = renderProps.view.views[level];
-    const features = (await rpcManager.call('getFeats', 'CoreGetFeatures', {
-        regions: view.staticBlocks.contentBlocks,
-        sessionId,
-        adapterConfig,
-    }));
     return {
-        features: (0, util_1.dedupe)(features, f => f.id()),
+        features: (0, util_1.dedupe)((await rpcManager.call('getFeats', 'CoreGetFeatures', {
+            regions: view.staticBlocks.contentBlocks,
+            sessionId,
+            adapterConfig,
+            statusCallback: (arg) => {
+                model.setLoadingStatus(arg);
+            },
+        })), f => f.id()),
     };
 }
 exports.default = stateModelFactory;

package/dist/LinearComparativeView/components/Rubberband.d.ts

@@ -1,7 +1,7 @@
 import type { LinearComparativeViewModel } from '../model';
 type LCV = LinearComparativeViewModel;
-declare const LinearComparativeRubberband: ({ model, ControlComponent, }: {
+declare const Rubberband: ({ model, ControlComponent, }: {
     model: LCV;
     ControlComponent?: React.ReactElement;
 }) => import("react/jsx-runtime").JSX.Element;
-export default LinearComparativeRubberband;
+export default Rubberband;

package/dist/LinearComparativeView/components/Rubberband.js

@@ -6,165 +6,27 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const ui_1 = require("@jbrowse/core/ui");
-const util_1 = require("@jbrowse/core/util");
-const material_1 = require("@mui/material");
-const mobx_1 = require("mobx");
 const mobx_react_1 = require("mobx-react");
 const mui_1 = require("tss-react/mui");
+const RubberbandSpan_1 = __importDefault(require("./RubberbandSpan"));
 const VerticalGuide_1 = __importDefault(require("./VerticalGuide"));
-const useStyles = (0, mui_1.makeStyles)()(theme => {
-    return {
-        rubberband: {
-            height: '100%',
-            background: (0, material_1.alpha)(theme.palette.tertiary.main, 0.7),
-            position: 'absolute',
-            zIndex: 900,
-            textAlign: 'center',
-            overflow: 'hidden',
-        },
-        rubberbandControl: {
-            cursor: 'crosshair',
-            width: '100%',
-            minHeight: 8,
-        },
-        rubberbandText: {
-            color: theme.palette.tertiary.contrastText,
-        },
-        popover: {
-            mouseEvents: 'none',
-            cursor: 'crosshair',
-        },
-        paper: {
-            paddingLeft: theme.spacing(1),
-            paddingRight: theme.spacing(1),
-        },
-    };
+const useRangeSelect_1 = require("./useRangeSelect");
+const useStyles = (0, mui_1.makeStyles)()({
+    rubberbandControl: {
+        cursor: 'crosshair',
+        width: '100%',
+        minHeight: 8,
+        position: 'relative',
+        zIndex: 900,
+    },
 });
-const LinearComparativeRubberband = (0, mobx_react_1.observer)(function Rubberband({ model, ControlComponent = (0, jsx_runtime_1.jsx)("div", {}), }) {
-    const [startX, setStartX] = (0, react_1.useState)();
-    const [currentX, setCurrentX] = (0, react_1.useState)();
-    const [anchorPosition, setAnchorPosition] = (0, react_1.useState)();
-    const [guideX, setGuideX] = (0, react_1.useState)();
-    const controlsRef = (0, react_1.useRef)(null);
-    const rubberbandRef = (0, react_1.useRef)(null);
+const Rubberband = (0, mobx_react_1.observer)(function ({ model, ControlComponent = (0, jsx_runtime_1.jsx)("div", {}), }) {
+    const ref = (0, react_1.useRef)(null);
     const { classes } = useStyles();
-    const mouseDragging = startX !== undefined && anchorPosition === undefined;
-    (0, react_1.useEffect)(() => {
-        function computeOffsets(offsetX, view) {
-            if (startX === undefined) {
-                return;
-            }
-            let leftPx = startX;
-            let rightPx = offsetX;
-            if (rightPx < leftPx) {
-                ;
-                [leftPx, rightPx] = [rightPx, leftPx];
-            }
-            const leftOffset = view.pxToBp(leftPx);
-            const rightOffset = view.pxToBp(rightPx);
-            return { leftOffset, rightOffset };
-        }
-        function globalMouseMove(event) {
-            if (controlsRef.current && mouseDragging) {
-                const relativeX = event.clientX - controlsRef.current.getBoundingClientRect().left;
-                setCurrentX(relativeX);
-            }
-        }
-        function globalMouseUp(event) {
-            if (startX !== undefined && controlsRef.current) {
-                const { clientX, clientY } = event;
-                const ref = controlsRef.current;
-                const offsetX = clientX - ref.getBoundingClientRect().left;
-                setAnchorPosition({
-                    offsetX,
-                    clientX,
-                    clientY,
-                });
-                (0, mobx_1.transaction)(() => {
-                    for (const view of model.views) {
-                        const args = computeOffsets(offsetX, view);
-                        if (args) {
-                            const { leftOffset, rightOffset } = args;
-                            view.setOffsets(leftOffset, rightOffset);
-                        }
-                    }
-                });
-                setGuideX(undefined);
-            }
-        }
-        if (mouseDragging) {
-            window.addEventListener('mousemove', globalMouseMove);
-            window.addEventListener('mouseup', globalMouseUp);
-            return () => {
-                window.removeEventListener('mousemove', globalMouseMove);
-                window.removeEventListener('mouseup', globalMouseUp);
-            };
-        }
-        return () => { };
-    }, [startX, mouseDragging, model]);
-    (0, react_1.useEffect)(() => {
-        if (!mouseDragging &&
-            currentX !== undefined &&
-            startX !== undefined &&
-            Math.abs(currentX - startX) <= 3) {
-            handleClose();
-        }
-    }, [mouseDragging, currentX, startX]);
-    function mouseDown(event) {
-        event.preventDefault();
-        event.stopPropagation();
-        const relativeX = event.clientX -
-            event.target.getBoundingClientRect().left;
-        setStartX(relativeX);
-        setCurrentX(relativeX);
-    }
-    function mouseMove(event) {
-        const target = event.target;
-        setGuideX(event.clientX - target.getBoundingClientRect().left);
-    }
-    function mouseOut() {
-        setGuideX(undefined);
-        (0, mobx_1.transaction)(() => {
-            for (const view of model.views) {
-                view.setOffsets(undefined, undefined);
-            }
-        });
-    }
-    function handleClose() {
-        setAnchorPosition(undefined);
-        setStartX(undefined);
-        setCurrentX(undefined);
-    }
-    const open = Boolean(anchorPosition);
-    function handleMenuItemClick(_, callback) {
-        callback();
-        handleClose();
-    }
-    if (startX === undefined) {
-        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [guideX !== undefined ? ((0, jsx_runtime_1.jsx)(VerticalGuide_1.default, { model: model, coordX: guideX })) : null, (0, jsx_runtime_1.jsx)("div", { ref: controlsRef, className: classes.rubberbandControl, onMouseDown: mouseDown, onMouseOut: mouseOut, onMouseMove: mouseMove, children: ControlComponent })] }));
-    }
-    const right = anchorPosition ? anchorPosition.offsetX : currentX || 0;
-    const left = Math.min(right, startX);
-    const width = Math.abs(right - startX);
-    const { views } = model;
-    const leftBpOffset = views.map(view => view.pxToBp(left));
-    const rightBpOffset = views.map(view => view.pxToBp(left + width));
-    const numOfBpSelected = views.map(view => Math.ceil(width * view.bpPerPx));
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [rubberbandRef.current ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.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, children: leftBpOffset.map((l, idx) => ((0, jsx_runtime_1.jsx)(material_1.Typography, { children: (0, util_1.stringify)(l, true) }, [JSON.stringify(l), idx, 'left'].join('-')))) }), (0, jsx_runtime_1.jsx)(material_1.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, children: rightBpOffset.map((l, idx) => ((0, jsx_runtime_1.jsx)(material_1.Typography, { children: (0, util_1.stringify)(l, true) }, [JSON.stringify(l), idx, 'right'].join('-')))) })] })) : null, (0, jsx_runtime_1.jsx)("div", { ref: rubberbandRef, className: classes.rubberband, style: { left, width }, children: (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h6", className: classes.rubberbandText, children: numOfBpSelected.map((n, i) => ((0, jsx_runtime_1.jsx)(material_1.Typography, { children: `${n.toLocaleString('en-US')}bp` }, `${n}_${i}`))) }) }), (0, jsx_runtime_1.jsx)("div", { className: classes.rubberbandControl, ref: controlsRef, onMouseDown: mouseDown, onMouseOut: mouseOut, onMouseMove: mouseMove, children: ControlComponent }), anchorPosition ? ((0, jsx_runtime_1.jsx)(ui_1.Menu, { anchorReference: "anchorPosition", anchorPosition: {
+    const { guideX, rubberbandOn, leftBpOffset, rightBpOffset, numOfBpSelected, width, left, anchorPosition, open, handleMenuItemClick, handleClose, mouseMove, mouseDown, mouseOut, } = (0, useRangeSelect_1.useRangeSelect)(ref, model);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [guideX !== undefined ? ((0, jsx_runtime_1.jsx)(VerticalGuide_1.default, { model: model, coordX: guideX })) : rubberbandOn ? ((0, jsx_runtime_1.jsx)(RubberbandSpan_1.default, { leftBpOffset: leftBpOffset, rightBpOffset: rightBpOffset, numOfBpSelected: numOfBpSelected, width: width, left: left })) : null, anchorPosition ? ((0, jsx_runtime_1.jsx)(ui_1.Menu, { anchorReference: "anchorPosition", anchorPosition: {
                     left: anchorPosition.clientX,
                     top: anchorPosition.clientY,
-                }, onMenuItemClick: handleMenuItemClick, open: open, onClose: handleClose, menuItems: model.rubberBandMenuItems() })) : null] }));
+                }, onMenuItemClick: handleMenuItemClick, open: open, onClose: handleClose, menuItems: model.rubberBandMenuItems() })) : null, (0, jsx_runtime_1.jsx)("div", { "data-testid": "rubberband_controls", className: classes.rubberbandControl, ref: ref, onMouseDown: mouseDown, onMouseMove: mouseMove, onMouseOut: mouseOut, children: ControlComponent })] }));
 });
-exports.default = LinearComparativeRubberband;
+exports.default = Rubberband;

package/dist/LinearComparativeView/components/RubberbandSpan.d.ts

@@ -0,0 +1,15 @@
+interface Offset {
+    coord: number;
+    refName?: string;
+    oob?: boolean;
+}
+export default function RubberbandSpan({ leftBpOffset, rightBpOffset, numOfBpSelected, left, width, top, sticky, }: {
+    leftBpOffset: Offset[];
+    rightBpOffset: Offset[];
+    numOfBpSelected?: number[];
+    left: number;
+    width: number;
+    top?: number;
+    sticky?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/LinearComparativeView/components/RubberbandSpan.js

@@ -0,0 +1,38 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = RubberbandSpan;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const util_1 = require("@jbrowse/core/util");
+const material_1 = require("@mui/material");
+const mui_1 = require("tss-react/mui");
+const RubberbandTooltip_1 = __importDefault(require("./RubberbandTooltip"));
+const useStyles = (0, mui_1.makeStyles)()(theme => {
+    const { tertiary } = theme.palette;
+    const background = (0, material_1.alpha)(tertiary.light, 0.7);
+    return {
+        rubberband: {
+            height: '100%',
+            background,
+            position: 'absolute',
+            zIndex: 830,
+            textAlign: 'center',
+        },
+        rubberbandText: {
+            color: theme.palette.tertiary.contrastText,
+        },
+    };
+});
+function RubberbandSpan({ leftBpOffset, rightBpOffset, numOfBpSelected, left, width, top = 0, sticky = false, }) {
+    const { classes } = useStyles();
+    const [anchorEl, setAnchorEl] = (0, react_1.useState)(null);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [anchorEl ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(RubberbandTooltip_1.default, { side: "left", anchorEl: anchorEl, text: leftBpOffset.map((l, idx) => ((0, jsx_runtime_1.jsx)("div", { children: (0, util_1.stringify)(l, true) }, `JSON.stringify(l)-${idx}`))) }), (0, jsx_runtime_1.jsx)(RubberbandTooltip_1.default, { side: "right", anchorEl: anchorEl, text: rightBpOffset.map((l, idx) => ((0, jsx_runtime_1.jsx)("div", { children: (0, util_1.stringify)(l, true) }, `JSON.stringify(l)-${idx}`))) })] })) : null, (0, jsx_runtime_1.jsx)("div", { className: classes.rubberband, style: { left, width }, children: numOfBpSelected ? ((0, jsx_runtime_1.jsx)(material_1.Typography, { ref: el => {
+                        setAnchorEl(el);
+                    }, variant: "h6", className: classes.rubberbandText, style: {
+                        top,
+                        position: sticky ? 'sticky' : undefined,
+                    }, children: numOfBpSelected.map((n, i) => ((0, jsx_runtime_1.jsx)("div", { children: (0, util_1.getBpDisplayStr)(n) }, i))) })) : null })] }));
+}

package/dist/LinearComparativeView/components/RubberbandTooltip.d.ts

@@ -0,0 +1,5 @@
+export default function RubberbandTooltip({ anchorEl, side, text, }: {
+    anchorEl: HTMLSpanElement;
+    side: string;
+    text: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/LinearComparativeView/components/RubberbandTooltip.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = RubberbandTooltip;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+function RubberbandTooltip({ anchorEl, side, text, }) {
+    return ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: text, open: true, placement: side === 'left' ? 'left-start' : 'right-start', slotProps: {
+            popper: {
+                anchorEl,
+                modifiers: [
+                    {
+                        name: 'offset',
+                        options: {
+                            offset: [-30, -10],
+                        },
+                    },
+                ],
+            },
+        }, children: (0, jsx_runtime_1.jsx)("span", {}) }));
+}

package/dist/LinearComparativeView/components/useRangeSelect.d.ts

@@ -0,0 +1,59 @@
+import type React from 'react';
+import type { LinearComparativeViewModel } from '../model';
+interface AnchorPosition {
+    offsetX: number;
+    clientX: number;
+    clientY: number;
+}
+export declare function useRangeSelect(ref: React.RefObject<HTMLDivElement | null>, model: LinearComparativeViewModel): {
+    open: boolean;
+    guideX: number | undefined;
+    mouseDown: (event: React.MouseEvent<HTMLDivElement>) => void;
+    mouseMove: (event: React.MouseEvent<HTMLDivElement>) => void;
+    mouseOut: () => void;
+    handleMenuItemClick: (_: unknown, callback: () => void) => void;
+    rubberbandOn?: undefined;
+    handleClose?: undefined;
+    leftBpOffset?: undefined;
+    rightBpOffset?: undefined;
+    anchorPosition?: undefined;
+    numOfBpSelected?: undefined;
+    width?: undefined;
+    left?: undefined;
+} | {
+    open: boolean;
+    rubberbandOn: boolean;
+    mouseDown: (event: React.MouseEvent<HTMLDivElement>) => void;
+    mouseMove: (event: React.MouseEvent<HTMLDivElement>) => void;
+    mouseOut: () => void;
+    handleClose: () => void;
+    handleMenuItemClick: (_: unknown, callback: () => void) => void;
+    leftBpOffset: {
+        coord: number;
+        index: number;
+        refName: string;
+        oob: boolean;
+        assemblyName: string;
+        offset: number;
+        start: number;
+        end: number;
+        reversed?: boolean;
+    }[];
+    rightBpOffset: {
+        coord: number;
+        index: number;
+        refName: string;
+        oob: boolean;
+        assemblyName: string;
+        offset: number;
+        start: number;
+        end: number;
+        reversed?: boolean;
+    }[];
+    anchorPosition: AnchorPosition | undefined;
+    numOfBpSelected: number[];
+    width: number;
+    left: number;
+    guideX?: undefined;
+};
+export {};

package/dist/LinearComparativeView/components/useRangeSelect.js

@@ -0,0 +1,128 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useRangeSelect = useRangeSelect;
+const react_1 = require("react");
+const mobx_1 = require("mobx");
+const util_1 = require("./util");
+function useRangeSelect(ref, model) {
+    const [startX, setStartX] = (0, react_1.useState)();
+    const [currentX, setCurrentX] = (0, react_1.useState)();
+    const [anchorPosition, setAnchorPosition] = (0, react_1.useState)();
+    const [guideX, setGuideX] = (0, react_1.useState)();
+    const mouseDragging = startX !== undefined && anchorPosition === undefined;
+    (0, react_1.useEffect)(() => {
+        function computeOffsets(offsetX) {
+            if (startX === undefined) {
+                return;
+            }
+            const leftPx = Math.min(startX, offsetX);
+            const rightPx = Math.max(startX, offsetX);
+            return model.views.map(view => ({
+                leftOffset: view.pxToBp(leftPx),
+                rightOffset: view.pxToBp(rightPx),
+            }));
+        }
+        function globalMouseMove(event) {
+            if (ref.current && mouseDragging) {
+                const relativeX = (0, util_1.getRelativeX)(event, ref.current);
+                setCurrentX(relativeX);
+            }
+        }
+        function globalMouseUp(event) {
+            if (startX !== undefined && ref.current) {
+                const { clientX, clientY } = event;
+                const offsetX = (0, util_1.getRelativeX)(event, ref.current);
+                setAnchorPosition({
+                    offsetX,
+                    clientX,
+                    clientY,
+                });
+                const offsets = computeOffsets(offsetX);
+                if (offsets) {
+                    (0, mobx_1.transaction)(() => {
+                        for (const [idx, elt] of offsets.entries()) {
+                            model.views[idx].setOffsets(elt.leftOffset, elt.rightOffset);
+                        }
+                    });
+                }
+                setGuideX(undefined);
+            }
+        }
+        if (mouseDragging) {
+            window.addEventListener('mousemove', globalMouseMove);
+            window.addEventListener('mouseup', globalMouseUp);
+            return () => {
+                window.removeEventListener('mousemove', globalMouseMove);
+                window.removeEventListener('mouseup', globalMouseUp);
+            };
+        }
+        return () => { };
+    }, [startX, mouseDragging, model, ref]);
+    (0, react_1.useEffect)(() => {
+        if (!mouseDragging &&
+            currentX !== undefined &&
+            startX !== undefined &&
+            Math.abs(currentX - startX) <= 3) {
+            handleClose();
+        }
+    }, [mouseDragging, currentX, startX]);
+    function mouseDown(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        const relativeX = (0, util_1.getRelativeX)(event, ref.current);
+        setStartX(relativeX);
+        setCurrentX(relativeX);
+    }
+    function mouseMove(event) {
+        setGuideX((0, util_1.getRelativeX)(event, ref.current));
+    }
+    function mouseOut() {
+        setGuideX(undefined);
+        (0, mobx_1.transaction)(() => {
+            for (const view of model.views) {
+                view.setOffsets(undefined, undefined);
+            }
+        });
+    }
+    function handleClose() {
+        setAnchorPosition(undefined);
+        setStartX(undefined);
+        setCurrentX(undefined);
+    }
+    function handleMenuItemClick(_, callback) {
+        callback();
+        handleClose();
+    }
+    const open = Boolean(anchorPosition);
+    if (startX === undefined) {
+        return {
+            open,
+            guideX,
+            mouseDown,
+            mouseMove,
+            mouseOut,
+            handleMenuItemClick,
+        };
+    }
+    const right = anchorPosition ? anchorPosition.offsetX : currentX || 0;
+    const left = Math.min(right, startX);
+    const width = Math.abs(right - startX);
+    const leftBpOffset = model.views.map(view => view.pxToBp(left));
+    const rightBpOffset = model.views.map(view => view.pxToBp(left + width));
+    const numOfBpSelected = model.views.map(view => Math.ceil(width * view.bpPerPx));
+    return {
+        open,
+        rubberbandOn: true,
+        mouseDown,
+        mouseMove,
+        mouseOut,
+        handleClose,
+        handleMenuItemClick,
+        leftBpOffset,
+        rightBpOffset,
+        anchorPosition,
+        numOfBpSelected,
+        width,
+        left,
+    };
+}

package/dist/LinearComparativeView/components/util.d.ts

@@ -0,0 +1,4 @@
+export declare function getRelativeX(event: {
+    clientX: number;
+    target: EventTarget | null;
+}, element: HTMLElement | null): number;

package/dist/LinearComparativeView/components/util.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getRelativeX = getRelativeX;
+function getRelativeX(event, element) {
+    return event.clientX - ((element === null || element === void 0 ? void 0 : element.getBoundingClientRect().left) || 0);
+}

package/dist/LinearSyntenyDisplay/components/BlockError.d.ts

@@ -0,0 +1,3 @@
+export default function BlockError({ error }: {
+    error: unknown;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/LinearSyntenyDisplay/components/BlockError.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = BlockError;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const mui_1 = require("tss-react/mui");
+const useStyles = (0, mui_1.makeStyles)()({
+    blockError: {
+        background: '#f1f1f1',
+        padding: 10,
+        color: 'red',
+    },
+});
+function BlockError({ error }) {
+    const { classes } = useStyles();
+    return (0, jsx_runtime_1.jsx)("div", { className: classes.blockError, children: `${error}` });
+}

package/dist/LinearSyntenyDisplay/components/BlockMessage.d.ts

@@ -0,0 +1,3 @@
+export default function BlockMessage({ messageText }: {
+    messageText: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/LinearSyntenyDisplay/components/BlockMessage.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = BlockMessage;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const mui_1 = require("tss-react/mui");
+const useStyles = (0, mui_1.makeStyles)()(theme => {
+    const bg = theme.palette.action.disabledBackground;
+    return {
+        loading: {
+            paddingLeft: '0.6em',
+            backgroundColor: theme.palette.background.default,
+            backgroundImage: `repeating-linear-gradient(45deg, transparent, transparent 5px, ${bg} 5px, ${bg} 10px)`,
+            textAlign: 'center',
+        },
+        blockMessage: {
+            background: '#f1f1f1',
+            padding: 10,
+        },
+    };
+});
+function BlockMessage({ messageText }) {
+    const { classes } = useStyles();
+    return (0, jsx_runtime_1.jsx)("div", { className: classes.blockMessage, children: messageText });
+}