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

package/esm/LinearComparativeView/components/Rubberband.js

@@ -1,165 +1,27 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from 'react';
+import { useRef } from 'react';
 import { Menu } from '@jbrowse/core/ui';
-import { stringify } from '@jbrowse/core/util';
-import { Popover, Typography, alpha } from '@mui/material';
-import { transaction } from 'mobx';
 import { observer } from 'mobx-react';
 import { makeStyles } from 'tss-react/mui';
+import RubberbandSpan from './RubberbandSpan';
 import VerticalGuide from './VerticalGuide';
-const useStyles = makeStyles()(theme => {
-    return {
-        rubberband: {
-            height: '100%',
-            background: 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),
-        },
-    };
+import { useRangeSelect } from './useRangeSelect';
+const useStyles = makeStyles()({
+    rubberbandControl: {
+        cursor: 'crosshair',
+        width: '100%',
+        minHeight: 8,
+        position: 'relative',
+        zIndex: 900,
+    },
 });
-const LinearComparativeRubberband = observer(function Rubberband({ model, ControlComponent = _jsx("div", {}), }) {
-    const [startX, setStartX] = useState();
-    const [currentX, setCurrentX] = useState();
-    const [anchorPosition, setAnchorPosition] = useState();
-    const [guideX, setGuideX] = useState();
-    const controlsRef = useRef(null);
-    const rubberbandRef = useRef(null);
+const Rubberband = observer(function ({ model, ControlComponent = _jsx("div", {}), }) {
+    const ref = useRef(null);
     const { classes } = useStyles();
-    const mouseDragging = startX !== undefined && anchorPosition === undefined;
-    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,
-                });
-                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]);
-    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);
-        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 (_jsxs(_Fragment, { children: [guideX !== undefined ? (_jsx(VerticalGuide, { model: model, coordX: guideX })) : null, _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 (_jsxs(_Fragment, { children: [rubberbandRef.current ? (_jsxs(_Fragment, { children: [_jsx(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) => (_jsx(Typography, { children: stringify(l, true) }, [JSON.stringify(l), idx, 'left'].join('-')))) }), _jsx(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) => (_jsx(Typography, { children: stringify(l, true) }, [JSON.stringify(l), idx, 'right'].join('-')))) })] })) : null, _jsx("div", { ref: rubberbandRef, className: classes.rubberband, style: { left, width }, children: _jsx(Typography, { variant: "h6", className: classes.rubberbandText, children: numOfBpSelected.map((n, i) => (_jsx(Typography, { children: `${n.toLocaleString('en-US')}bp` }, `${n}_${i}`))) }) }), _jsx("div", { className: classes.rubberbandControl, ref: controlsRef, onMouseDown: mouseDown, onMouseOut: mouseOut, onMouseMove: mouseMove, children: ControlComponent }), anchorPosition ? (_jsx(Menu, { anchorReference: "anchorPosition", anchorPosition: {
+    const { guideX, rubberbandOn, leftBpOffset, rightBpOffset, numOfBpSelected, width, left, anchorPosition, open, handleMenuItemClick, handleClose, mouseMove, mouseDown, mouseOut, } = useRangeSelect(ref, model);
+    return (_jsxs(_Fragment, { children: [guideX !== undefined ? (_jsx(VerticalGuide, { model: model, coordX: guideX })) : rubberbandOn ? (_jsx(RubberbandSpan, { leftBpOffset: leftBpOffset, rightBpOffset: rightBpOffset, numOfBpSelected: numOfBpSelected, width: width, left: left })) : null, anchorPosition ? (_jsx(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, _jsx("div", { "data-testid": "rubberband_controls", className: classes.rubberbandControl, ref: ref, onMouseDown: mouseDown, onMouseMove: mouseMove, onMouseOut: mouseOut, children: ControlComponent })] }));
 });
-export default LinearComparativeRubberband;
+export default Rubberband;

package/esm/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/esm/LinearComparativeView/components/RubberbandSpan.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { getBpDisplayStr, stringify } from '@jbrowse/core/util';
+import { Typography, alpha } from '@mui/material';
+import { makeStyles } from 'tss-react/mui';
+import RubberbandTooltip from './RubberbandTooltip';
+const useStyles = makeStyles()(theme => {
+    const { tertiary } = theme.palette;
+    const background = alpha(tertiary.light, 0.7);
+    return {
+        rubberband: {
+            height: '100%',
+            background,
+            position: 'absolute',
+            zIndex: 830,
+            textAlign: 'center',
+        },
+        rubberbandText: {
+            color: theme.palette.tertiary.contrastText,
+        },
+    };
+});
+export default function RubberbandSpan({ leftBpOffset, rightBpOffset, numOfBpSelected, left, width, top = 0, sticky = false, }) {
+    const { classes } = useStyles();
+    const [anchorEl, setAnchorEl] = useState(null);
+    return (_jsxs(_Fragment, { children: [anchorEl ? (_jsxs(_Fragment, { children: [_jsx(RubberbandTooltip, { side: "left", anchorEl: anchorEl, text: leftBpOffset.map((l, idx) => (_jsx("div", { children: stringify(l, true) }, `JSON.stringify(l)-${idx}`))) }), _jsx(RubberbandTooltip, { side: "right", anchorEl: anchorEl, text: rightBpOffset.map((l, idx) => (_jsx("div", { children: stringify(l, true) }, `JSON.stringify(l)-${idx}`))) })] })) : null, _jsx("div", { className: classes.rubberband, style: { left, width }, children: numOfBpSelected ? (_jsx(Typography, { ref: el => {
+                        setAnchorEl(el);
+                    }, variant: "h6", className: classes.rubberbandText, style: {
+                        top,
+                        position: sticky ? 'sticky' : undefined,
+                    }, children: numOfBpSelected.map((n, i) => (_jsx("div", { children: getBpDisplayStr(n) }, i))) })) : null })] }));
+}

package/esm/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/esm/LinearComparativeView/components/RubberbandTooltip.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Tooltip } from '@mui/material';
+export default function RubberbandTooltip({ anchorEl, side, text, }) {
+    return (_jsx(Tooltip, { title: text, open: true, placement: side === 'left' ? 'left-start' : 'right-start', slotProps: {
+            popper: {
+                anchorEl,
+                modifiers: [
+                    {
+                        name: 'offset',
+                        options: {
+                            offset: [-30, -10],
+                        },
+                    },
+                ],
+            },
+        }, children: _jsx("span", {}) }));
+}

package/esm/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/esm/LinearComparativeView/components/useRangeSelect.js

@@ -0,0 +1,125 @@
+import { useEffect, useState } from 'react';
+import { transaction } from 'mobx';
+import { getRelativeX } from './util';
+export function useRangeSelect(ref, model) {
+    const [startX, setStartX] = useState();
+    const [currentX, setCurrentX] = useState();
+    const [anchorPosition, setAnchorPosition] = useState();
+    const [guideX, setGuideX] = useState();
+    const mouseDragging = startX !== undefined && anchorPosition === undefined;
+    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 = getRelativeX(event, ref.current);
+                setCurrentX(relativeX);
+            }
+        }
+        function globalMouseUp(event) {
+            if (startX !== undefined && ref.current) {
+                const { clientX, clientY } = event;
+                const offsetX = getRelativeX(event, ref.current);
+                setAnchorPosition({
+                    offsetX,
+                    clientX,
+                    clientY,
+                });
+                const offsets = computeOffsets(offsetX);
+                if (offsets) {
+                    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]);
+    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 = getRelativeX(event, ref.current);
+        setStartX(relativeX);
+        setCurrentX(relativeX);
+    }
+    function mouseMove(event) {
+        setGuideX(getRelativeX(event, ref.current));
+    }
+    function mouseOut() {
+        setGuideX(undefined);
+        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/esm/LinearComparativeView/components/util.d.ts

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

package/esm/LinearComparativeView/components/util.js

@@ -0,0 +1,3 @@
+export function getRelativeX(event, element) {
+    return event.clientX - ((element === null || element === void 0 ? void 0 : element.getBoundingClientRect().left) || 0);
+}

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

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

package/esm/LinearSyntenyDisplay/components/BlockError.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { makeStyles } from 'tss-react/mui';
+const useStyles = makeStyles()({
+    blockError: {
+        background: '#f1f1f1',
+        padding: 10,
+        color: 'red',
+    },
+});
+export default function BlockError({ error }) {
+    const { classes } = useStyles();
+    return _jsx("div", { className: classes.blockError, children: `${error}` });
+}

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

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

package/esm/LinearSyntenyDisplay/components/BlockMessage.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { makeStyles } from 'tss-react/mui';
+const useStyles = 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,
+        },
+    };
+});
+export default function BlockMessage({ messageText }) {
+    const { classes } = useStyles();
+    return _jsx("div", { className: classes.blockMessage, children: messageText });
+}

package/esm/LinearSyntenyDisplay/components/Component.js

@@ -1,60 +1,21 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
-import { LoadingEllipses } from '@jbrowse/core/ui';
 import { observer } from 'mobx-react';
-import { makeStyles } from 'tss-react/mui';
+import BlockError from './BlockError';
+import BlockMessage from './BlockMessage';
 import LinearSyntenyRendering from './LinearSyntenyRendering';
-const useStyles = 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,
-        },
-        blockError: {
-            background: '#f1f1f1',
-            padding: 10,
-            color: 'red',
-        },
-    };
-});
-function LoadingMessage() {
-    const [shown, setShown] = useState(false);
-    const { classes } = useStyles();
-    useEffect(() => {
-        const timeout = setTimeout(() => {
-            setShown(true);
-        }, 300);
-        return () => {
-            clearTimeout(timeout);
-        };
-    });
-    return shown ? (_jsx("div", { className: classes.loading, children: _jsx(LoadingEllipses, {}) })) : null;
-}
-function BlockMessage({ messageText }) {
-    const { classes } = useStyles();
-    return _jsx("div", { className: classes.blockMessage, children: messageText });
-}
-function BlockError({ error }) {
-    const { classes } = useStyles();
-    return _jsx("div", { className: classes.blockError, children: `${error}` });
-}
+import LoadingMessage from './LoadingMessage';
 const ServerSideRenderedBlockContent = observer(function ({ model, }) {
     if (model.error) {
         return _jsx(BlockError, { error: model.error });
     }
-    if (model.message) {
+    else if (model.message) {
         return _jsx(BlockMessage, { messageText: model.message });
     }
-    if (!model.features) {
-        return _jsx(LoadingMessage, {});
+    else if (!model.features) {
+        return _jsx(LoadingMessage, { message: model.loadingStatus });
+    }
+    else {
+        return _jsx(LinearSyntenyRendering, { model: model });
     }
-    return _jsx(LinearSyntenyRendering, { model: model });
 });
 export default ServerSideRenderedBlockContent;

package/esm/LinearSyntenyDisplay/components/LoadingMessage.d.ts

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

package/esm/LinearSyntenyDisplay/components/LoadingMessage.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { LoadingEllipses } from '@jbrowse/core/ui';
+import { makeStyles } from 'tss-react/mui';
+const useStyles = 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',
+        },
+    };
+});
+export default function LoadingMessage({ message }) {
+    const { classes } = useStyles();
+    return (_jsx("div", { className: classes.loading, children: _jsx(LoadingEllipses, { message: message }) }));
+}

package/esm/LinearSyntenyDisplay/model.d.ts

@@ -84,6 +84,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;
@@ -166,6 +167,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>;
@@ -235,12 +237,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;