@jbrowse/plugin-linear-genome-view 3.7.0 → 4.0.1

package/esm/BaseLinearDisplay/SVGLegend.d.ts

@@ -0,0 +1,6 @@
+import type { LegendItem } from './components/FloatingLegend.tsx';
+export default function SVGLegend({ items, width, legendAreaWidth, }: {
+    items: LegendItem[];
+    width: number;
+    legendAreaWidth?: number;
+}): import("react/jsx-runtime").JSX.Element | null;

package/esm/BaseLinearDisplay/SVGLegend.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { measureText } from '@jbrowse/core/util';
+const LEGEND_FONT_SIZE = 10;
+const LEGEND_BOX_SIZE = 12;
+const LEGEND_PADDING = 3;
+export default function SVGLegend({ items, width, legendAreaWidth, }) {
+    if (items.length === 0) {
+        return null;
+    }
+    const itemHeight = LEGEND_BOX_SIZE + 2;
+    const legendHeight = items.length * itemHeight + LEGEND_PADDING * 2;
+    const maxLabelWidth = Math.max(...items.map(item => measureText(item.label, LEGEND_FONT_SIZE)));
+    const legendWidth = LEGEND_BOX_SIZE + 8 + maxLabelWidth + LEGEND_PADDING * 2;
+    const x = legendAreaWidth ? width + 10 : width - legendWidth - 10;
+    const y = 10;
+    return (_jsxs("g", { transform: `translate(${x}, ${y})`, children: [_jsx("rect", { x: 0, y: 0, width: legendWidth, height: legendHeight, fill: "rgba(255,255,255,0.9)", stroke: "#ccc", strokeWidth: 1, rx: 4 }), items.map((item, idx) => (_jsxs("g", { transform: `translate(${LEGEND_PADDING}, ${LEGEND_PADDING + idx * itemHeight})`, children: [item.color ? (_jsx("rect", { x: 0, y: 0, width: LEGEND_BOX_SIZE, height: LEGEND_BOX_SIZE, fill: item.color })) : null, _jsx("text", { x: LEGEND_BOX_SIZE + 6, y: LEGEND_BOX_SIZE - 2, fontSize: LEGEND_FONT_SIZE, fill: "black", children: item.label })] }, `legend-${idx}`)))] }));
+}

package/esm/BaseLinearDisplay/calculateSvgLegendWidth.d.ts

@@ -0,0 +1,2 @@
+import type { LegendItem } from './components/FloatingLegend.tsx';
+export declare function calculateSvgLegendWidth(items: LegendItem[]): number;

package/esm/BaseLinearDisplay/calculateSvgLegendWidth.js

@@ -0,0 +1,11 @@
+import { measureText } from '@jbrowse/core/util';
+const LEGEND_FONT_SIZE = 10;
+const LEGEND_BOX_SIZE = 12;
+const LEGEND_PADDING = 3;
+export function calculateSvgLegendWidth(items) {
+    if (items.length === 0) {
+        return 0;
+    }
+    const maxLabelWidth = Math.max(...items.map(item => measureText(item.label, LEGEND_FONT_SIZE)));
+    return LEGEND_BOX_SIZE + 8 + maxLabelWidth + LEGEND_PADDING * 2 + 20;
+}

package/esm/BaseLinearDisplay/components/BaseLinearDisplay.d.ts

@@ -1,8 +1,8 @@
-import type { BaseLinearDisplayModel } from '../model';
+import type { BaseLinearDisplayModel } from '../model.ts';
 declare const BaseLinearDisplay: (props: {
     model: BaseLinearDisplayModel;
     children?: React.ReactNode;
 }) => import("react/jsx-runtime").JSX.Element;
 export default BaseLinearDisplay;
-export { default as Tooltip } from './Tooltip';
-export { default as BlockMsg } from './BlockMsg';
+export { default as Tooltip } from './Tooltip.tsx';
+export { default as BlockMsg } from './BlockMsg.tsx';

package/esm/BaseLinearDisplay/components/BaseLinearDisplay.js

@@ -1,10 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Suspense, useRef, useState } from 'react';
 import { getConf } from '@jbrowse/core/configuration';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
+import { useTheme } from '@mui/material';
 import { observer } from 'mobx-react';
-import { makeStyles } from 'tss-react/mui';
-import LinearBlocks from './LinearBlocks';
-import MenuPage from './MenuPage';
+import FloatingLegend from "./FloatingLegend.js";
+import LinearBlocks from "./LinearBlocks.js";
+import MenuPage from "./MenuPage.js";
 const useStyles = makeStyles()({
     display: {
         position: 'relative',
@@ -14,7 +16,7 @@ const useStyles = makeStyles()({
         minHeight: '100%',
     },
 });
-const BaseLinearDisplay = observer(function (props) {
+const BaseLinearDisplay = observer(function BaseLinearDisplay(props) {
     const { classes } = useStyles();
     const ref = useRef(null);
     const [clientRect, setClientRect] = useState();
@@ -22,7 +24,9 @@ const BaseLinearDisplay = observer(function (props) {
     const [clientMouseCoord, setClientMouseCoord] = useState([0, 0]);
     const [contextCoord, setContextCoord] = useState();
     const { model, children } = props;
-    const { TooltipComponent, DisplayMessageComponent, height } = model;
+    const { TooltipComponent, DisplayMessageComponent, height, showLegend, showTooltipsEnabled, } = model;
+    const theme = useTheme();
+    const legendItems = model.legendItems(theme);
     return (_jsxs("div", { ref: ref, "data-testid": `display-${getConf(model, 'displayId')}`, className: classes.display, onContextMenu: event => {
             event.preventDefault();
             if (contextCoord) {
@@ -40,10 +44,10 @@ const BaseLinearDisplay = observer(function (props) {
             setOffsetMouseCoord([event.clientX - left, event.clientY - top]);
             setClientMouseCoord([event.clientX, event.clientY]);
             setClientRect(rect);
-        }, children: [DisplayMessageComponent ? (_jsx(DisplayMessageComponent, { model: model })) : (_jsx(LinearBlocks, { ...props })), children, _jsx(Suspense, { fallback: null, children: _jsx(TooltipComponent, { model: model, height: height, offsetMouseCoord: offsetMouseCoord, clientMouseCoord: clientMouseCoord, clientRect: clientRect, mouseCoord: offsetMouseCoord }) }), contextCoord ? (_jsx(MenuPage, { contextCoord: contextCoord, model: model, onClose: () => {
+        }, children: [DisplayMessageComponent ? (_jsx(DisplayMessageComponent, { model: model })) : (_jsx(LinearBlocks, { ...props })), children, showLegend && legendItems.length > 0 ? (_jsx(FloatingLegend, { items: legendItems })) : null, showTooltipsEnabled ? (_jsx(Suspense, { fallback: null, children: _jsx(TooltipComponent, { model: model, height: height, offsetMouseCoord: offsetMouseCoord, clientMouseCoord: clientMouseCoord, clientRect: clientRect, mouseCoord: offsetMouseCoord }) })) : null, contextCoord ? (_jsx(MenuPage, { contextCoord: contextCoord, model: model, onClose: () => {
                     setContextCoord(undefined);
                 } })) : null] }));
 });
 export default BaseLinearDisplay;
-export { default as Tooltip } from './Tooltip';
-export { default as BlockMsg } from './BlockMsg';
+export { default as Tooltip } from "./Tooltip.js";
+export { default as BlockMsg } from "./BlockMsg.js";

package/esm/BaseLinearDisplay/components/Block.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { makeStyles } from '@jbrowse/core/util/tss-react';
 import { observer } from 'mobx-react';
-import { makeStyles } from 'tss-react/mui';
 const useStyles = makeStyles()(theme => ({
     contentBlock: {
         position: 'relative',
@@ -24,7 +24,7 @@ const useStyles = makeStyles()(theme => ({
         backgroundColor: theme.palette.action.disabledBackground,
     },
 }));
-const ContentBlock = observer(function ({ block, children, }) {
+const ContentBlock = observer(function ContentBlock({ block, children, }) {
     const { classes } = useStyles();
     const { widthPx } = block;
     return (_jsx("div", { style: { width: widthPx }, className: classes.contentBlock, children: children }));

package/esm/BaseLinearDisplay/components/BlockErrorMessage.js

@@ -5,8 +5,8 @@ import RefreshIcon from '@mui/icons-material/Refresh';
 import ReportIcon from '@mui/icons-material/Report';
 import { IconButton, Tooltip } from '@mui/material';
 import { observer } from 'mobx-react';
-import BlockMsg from './BlockMsg';
-const BlockErrorMessage = observer(function ({ model, }) {
+import BlockMsg from "./BlockMsg.js";
+const BlockErrorMessage = observer(function BlockErrorMessage({ model, }) {
     return (_jsx(BlockMsg, { message: `${model.error}`, severity: "error", action: _jsxs(_Fragment, { children: [_jsx(Tooltip, { title: "Reload track", children: _jsx(IconButton, { "data-testid": "reload_button", onClick: () => {
                             model.reload();
                         }, children: _jsx(RefreshIcon, {}) }) }), _jsx(Tooltip, { title: "Show stack trace", children: _jsx(IconButton, { onClick: () => {

package/esm/BaseLinearDisplay/components/BlockMsg.js

@@ -1,11 +1,18 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { makeStyles } from '@jbrowse/core/util/tss-react';
 import { Alert, Tooltip } from '@mui/material';
-import { makeStyles } from 'tss-react/mui';
 const useStyles = makeStyles()({
     ellipses: {
         textOverflow: 'ellipsis',
         overflow: 'hidden',
     },
+    content: {
+        textOverflow: 'ellipsis',
+        overflow: 'hidden',
+        whiteSpace: 'nowrap',
+        maxWidth: '80%',
+        textAlign: 'center',
+    },
 });
 export default function BlockMsg({ message, severity, action, }) {
     const { classes } = useStyles();
@@ -15,5 +22,5 @@ export default function BlockMsg({ message, severity, action, }) {
             event.stopPropagation();
         }, onClick: event => {
             event.stopPropagation();
-        }, children: _jsx(Tooltip, { title: message, children: _jsx("div", { children: message }) }) }));
+        }, children: _jsx(Tooltip, { title: message, children: _jsx("div", { className: classes.content, children: message }) }) }));
 }

package/esm/BaseLinearDisplay/components/CollapseIntronsDialog/CollapseIntronsDialog.d.ts

@@ -0,0 +1,9 @@
+import type { LinearGenomeViewModel } from '../../../LinearGenomeView/index.ts';
+import type { Assembly } from '@jbrowse/core/assemblyManager/assembly';
+import type { Feature } from '@jbrowse/core/util';
+export default function CollapseIntronsDialog({ view, transcripts, assembly, handleClose, }: {
+    view: LinearGenomeViewModel;
+    transcripts: Feature[];
+    assembly: Assembly;
+    handleClose: () => void;
+}): import("react/jsx-runtime").JSX.Element;

package/esm/BaseLinearDisplay/components/CollapseIntronsDialog/CollapseIntronsDialog.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Dialog } from '@jbrowse/core/ui';
+import { getSession } from '@jbrowse/core/util';
+import { Button, DialogActions, DialogContent, DialogContentText, TextField, } from '@mui/material';
+import TranscriptTable from "./TranscriptTable.js";
+import { collapseIntrons } from "./util.js";
+export default function CollapseIntronsDialog({ view, transcripts, assembly, handleClose, }) {
+    const [showAll, setShowAll] = useState(false);
+    const [windowSize, setWindowSize] = useState('100');
+    const windowSizeNum = +windowSize;
+    const validWindowSize = !Number.isNaN(windowSizeNum) && windowSizeNum >= 0;
+    return (_jsxs(Dialog, { open: true, maxWidth: "md", onClose: handleClose, title: "Select transcript to collapse", children: [_jsxs(DialogContent, { children: [_jsxs(DialogContentText, { component: "div", children: [_jsx("p", { children: "Select the 'window size' which will be the extra space surrounding splice boundary to include. 10bp will only include a small 10bp region around splice boundary" }), _jsx("p", { children: "By default the union of exons from all transcripts will be used to create the collapsed intron view, but you can optionally use the exons of only a specific transcript by clicking \"Show all transcripts\" and then \"Select\"" })] }), _jsx(TextField, { label: "Number of bp around splice site to include", value: windowSize, onChange: event => {
+                            setWindowSize(event.target.value);
+                        }, error: windowSize !== '' && !validWindowSize, helperText: windowSize !== '' && !validWindowSize
+                            ? 'Must be a non-negative number'
+                            : '', type: "number", slotProps: {
+                            htmlInput: {
+                                min: 0,
+                                step: 10,
+                            },
+                        }, style: { marginBottom: 16, width: 250 } }), _jsxs(Button, { style: { float: 'right' }, onClick: () => {
+                            setShowAll(s => !s);
+                        }, children: [!showAll ? 'Show' : 'Hide', " all transcripts (", transcripts.length, ")"] }), showAll ? (_jsx(TranscriptTable, { transcripts: transcripts, view: view, assembly: assembly, padding: windowSizeNum, validPadding: validWindowSize, handleClose: handleClose })) : null] }), _jsxs(DialogActions, { children: [_jsx(Button, { size: "small", variant: "contained", color: "primary", disabled: !validWindowSize, onClick: () => {
+                            ;
+                            (async () => {
+                                try {
+                                    await collapseIntrons({
+                                        view,
+                                        transcripts,
+                                        assembly,
+                                        padding: windowSizeNum,
+                                    });
+                                    handleClose();
+                                }
+                                catch (e) {
+                                    getSession(view).notifyError(`${e}`, e);
+                                    console.error(e);
+                                }
+                            })();
+                        }, children: "Submit" }), _jsx(Button, { onClick: handleClose, variant: "contained", color: "secondary", children: "Cancel" })] })] }));
+}

package/esm/BaseLinearDisplay/components/CollapseIntronsDialog/TranscriptTable.d.ts

@@ -0,0 +1,11 @@
+import type { LinearGenomeViewModel } from '../../../LinearGenomeView/index.ts';
+import type { Assembly } from '@jbrowse/core/assemblyManager/assembly';
+import type { Feature } from '@jbrowse/core/util';
+export default function TranscriptTable({ transcripts, view, assembly, padding, validPadding, handleClose, }: {
+    transcripts: Feature[];
+    view: LinearGenomeViewModel;
+    assembly: Assembly;
+    padding: number;
+    validPadding: boolean;
+    handleClose: () => void;
+}): import("react/jsx-runtime").JSX.Element;

package/esm/BaseLinearDisplay/components/CollapseIntronsDialog/TranscriptTable.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getSession, toLocale } from '@jbrowse/core/util';
+import { Box, Button, Table, TableBody, TableCell, TableHead, TableRow, } from '@mui/material';
+import { collapseIntrons, getExonsAndCDS } from "./util.js";
+export default function TranscriptTable({ transcripts, view, assembly, padding, validPadding, handleClose, }) {
+    const sorted = [...transcripts].sort((a, b) => {
+        const lenA = a.get('end') - a.get('start');
+        const lenB = b.get('end') - b.get('start');
+        return lenB - lenA;
+    });
+    return (_jsx(Box, { sx: { maxHeight: 600, overflow: 'auto' }, children: _jsxs(Table, { size: "small", stickyHeader: true, children: [_jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx(TableCell, { children: "Name/ID" }), _jsx(TableCell, { children: "Type" }), _jsx(TableCell, { align: "right", children: "Length" }), _jsx(TableCell, { align: "right", children: "Exons" }), _jsx(TableCell, { align: "right", children: "CDS" }), _jsx(TableCell, {})] }) }), _jsx(TableBody, { children: sorted.map((transcript, idx) => {
+                        const start = transcript.get('start');
+                        const end = transcript.get('end');
+                        const name = transcript.get('name') ||
+                            transcript.get('id') ||
+                            `Transcript ${idx + 1}`;
+                        const type = transcript.get('type') || 'transcript';
+                        const exonsAndCDS = getExonsAndCDS([transcript]);
+                        const exonCount = exonsAndCDS.filter(f => f.get('type') === 'exon').length;
+                        const cdsCount = exonsAndCDS.length - exonCount;
+                        return (_jsxs(TableRow, { children: [_jsx(TableCell, { children: name }), _jsx(TableCell, { children: type }), _jsxs(TableCell, { align: "right", children: [toLocale(end - start), " bp"] }), _jsx(TableCell, { align: "right", children: exonCount }), _jsx(TableCell, { align: "right", children: cdsCount }), _jsx(TableCell, { align: "right", children: _jsx(Button, { size: "small", variant: "contained", color: "primary", disabled: !validPadding, onClick: () => {
+                                            ;
+                                            (async () => {
+                                                try {
+                                                    await collapseIntrons({
+                                                        view,
+                                                        transcripts: [transcript],
+                                                        assembly,
+                                                        padding,
+                                                    });
+                                                    handleClose();
+                                                }
+                                                catch (e) {
+                                                    getSession(view).notifyError(`${e}`, e);
+                                                    console.error(e);
+                                                }
+                                            })();
+                                        }, children: "Select" }) })] }, transcript.id()));
+                    }) })] }) }));
+}

package/esm/BaseLinearDisplay/components/CollapseIntronsDialog/util.d.ts

@@ -0,0 +1,19 @@
+import type { LinearGenomeViewModel } from '../../../LinearGenomeView/index.ts';
+import type { Assembly } from '@jbrowse/core/assemblyManager/assembly';
+import type { Feature } from '@jbrowse/core/util';
+export declare function getExonsAndCDS(transcripts: Feature[]): Feature[];
+interface ViewState {
+    bpPerPx: number;
+    offsetPx: number;
+}
+export declare function calculateInitialViewState(regions: {
+    start: number;
+    end: number;
+}[], viewWidth: number): ViewState;
+export declare function collapseIntrons({ view, transcripts, assembly, padding, }: {
+    view: LinearGenomeViewModel;
+    transcripts: Feature[];
+    assembly: Assembly;
+    padding: number;
+}): Promise<void>;
+export {};

package/esm/BaseLinearDisplay/components/CollapseIntronsDialog/util.js

@@ -0,0 +1,45 @@
+import { getSession, mergeIntervals } from '@jbrowse/core/util';
+import { getSnapshot } from '@jbrowse/mobx-state-tree';
+import { when } from 'mobx';
+export function getExonsAndCDS(transcripts) {
+    return transcripts.flatMap(transcript => transcript
+        .get('subfeatures')
+        ?.filter(f => f.get('type') === 'exon' || f.get('type') === 'CDS') ??
+        []);
+}
+export function calculateInitialViewState(regions, viewWidth) {
+    const totalBp = regions.reduce((sum, r) => sum + (r.end - r.start), 0);
+    const bpPerPx = totalBp / (viewWidth * 0.9);
+    const numPaddings = Math.max(0, regions.length - 1);
+    const interRegionPaddingWidth = 2;
+    const totalPaddingPx = numPaddings * interRegionPaddingWidth;
+    const totalContentPx = totalBp / bpPerPx + totalPaddingPx;
+    const centerPx = totalContentPx / 2;
+    const offsetPx = Math.round(centerPx - viewWidth / 2);
+    return { bpPerPx, offsetPx };
+}
+export async function collapseIntrons({ view, transcripts, assembly, padding, }) {
+    const r0 = transcripts[0]?.get('refName');
+    if (!r0) {
+        return;
+    }
+    const refName = assembly.getCanonicalRefName2(r0);
+    const subs = getExonsAndCDS(transcripts);
+    const snapshot = getSnapshot(view);
+    const { id, offsetPx, bpPerPx, ...rest } = snapshot;
+    const mergedRegions = mergeIntervals(subs.map(f => ({
+        refName,
+        start: f.get('start') - padding,
+        end: f.get('end') + padding,
+        assemblyName: view.assemblyNames[0],
+    })), padding);
+    const initialState = calculateInitialViewState(mergedRegions, view.width);
+    const newView = getSession(view).addView('LinearGenomeView', {
+        ...rest,
+        tracks: rest.tracks.map(({ id, ...r }) => r),
+        displayedRegions: mergedRegions,
+        bpPerPx: initialState.bpPerPx,
+        offsetPx: initialState.offsetPx,
+    });
+    await when(() => newView.initialized);
+}

package/esm/BaseLinearDisplay/components/FloatingLabels.d.ts

@@ -0,0 +1,5 @@
+import type { FeatureTrackModel } from '../../LinearBasicDisplay/model.ts';
+declare const FloatingLabels: ({ model, }: {
+    model: FeatureTrackModel;
+}) => import("react/jsx-runtime").JSX.Element;
+export default FloatingLabels;

package/esm/BaseLinearDisplay/components/FloatingLabels.js

@@ -0,0 +1,89 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo } from 'react';
+import { getContainingView } from '@jbrowse/core/util';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
+import { observer } from 'mobx-react';
+import { calculateFloatingLabelPosition } from "./util.js";
+const useStyles = makeStyles()({
+    container: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        width: '100%',
+        height: '100%',
+        pointerEvents: 'none',
+        zIndex: 5,
+    },
+    label: {
+        position: 'absolute',
+        fontSize: 11,
+        cursor: 'default',
+        pointerEvents: 'auto',
+    },
+    overlay: {
+        backgroundColor: 'rgba(255, 255, 255, 0.8)',
+        lineHeight: 1,
+    },
+});
+const FixedLabel = memo(function FixedLabel({ text, color, isOverlay, featureLeftPx, featureId, subfeatureId, y, tooltip, labelClass, overlayClass, }) {
+    return (_jsx("div", { "data-feature-id": featureId, "data-subfeature-id": subfeatureId, "data-tooltip": tooltip, className: isOverlay ? `${labelClass} ${overlayClass}` : labelClass, style: {
+            color,
+            transform: `translate(calc(${featureLeftPx}px - var(--offset-px)), ${y}px)`,
+        }, children: text }));
+});
+function FloatingLabel({ text, color, isOverlay, featureLeftPx, featureRightPx, featureId, subfeatureId, labelWidth, y, offsetPx, viewportLeft, tooltip, labelClass, overlayClass, }) {
+    const x = calculateFloatingLabelPosition(featureLeftPx, featureRightPx, labelWidth, offsetPx, viewportLeft);
+    return (_jsx("div", { "data-feature-id": featureId, "data-subfeature-id": subfeatureId, "data-tooltip": tooltip, className: isOverlay ? `${labelClass} ${overlayClass}` : labelClass, style: { color, transform: `translate(${x}px,${y}px)` }, children: text }));
+}
+const FloatingLabels = observer(function FloatingLabels({ model, }) {
+    const { classes } = useStyles();
+    const view = getContainingView(model);
+    const { offsetPx } = view;
+    const featureLabels = model.floatingLabelData;
+    const { onFeatureClick, onFeatureContextMenu, onMouseMove } = model.renderingProps();
+    const fixedLabels = [];
+    const floatingLabels = [];
+    const viewportLeft = Math.max(0, offsetPx);
+    for (const [key, { leftPx, topPx, totalFeatureHeight, floatingLabels: labelData, featureWidth, },] of featureLabels.entries()) {
+        const featureVisualBottom = topPx + totalFeatureHeight;
+        const featureRightPx = leftPx + featureWidth;
+        for (let i = 0, l = labelData.length; i < l; i++) {
+            const floatingLabel = labelData[i];
+            const { text, relativeY, color, isOverlay, textWidth: labelWidth, parentFeatureId, subfeatureId, tooltip, } = floatingLabel;
+            const y = featureVisualBottom + relativeY;
+            const labelKey = `${key}-${i}`;
+            const featureId = parentFeatureId ?? key;
+            if (labelWidth > featureWidth) {
+                fixedLabels.push(_jsx(FixedLabel, { text: text, color: color, isOverlay: isOverlay ?? false, featureLeftPx: leftPx, featureId: featureId, subfeatureId: subfeatureId, y: y, tooltip: tooltip, labelClass: classes.label, overlayClass: classes.overlay }, labelKey));
+            }
+            else {
+                floatingLabels.push(_jsx(FloatingLabel, { text: text, color: color, isOverlay: isOverlay ?? false, featureLeftPx: leftPx, featureRightPx: featureRightPx, featureId: featureId, subfeatureId: subfeatureId, labelWidth: labelWidth, y: y, offsetPx: offsetPx, viewportLeft: viewportLeft, tooltip: tooltip, labelClass: classes.label, overlayClass: classes.overlay }, labelKey));
+            }
+        }
+    }
+    return (_jsxs("div", { className: classes.container, style: { '--offset-px': `${offsetPx}px` }, onClick: e => {
+            const target = e.target;
+            const subfeatureId = target.dataset.subfeatureId;
+            const featureId = subfeatureId ?? target.dataset.featureId;
+            if (featureId) {
+                onFeatureClick?.(e, featureId);
+            }
+        }, onContextMenu: e => {
+            const target = e.target;
+            const subfeatureId = target.dataset.subfeatureId;
+            const featureId = subfeatureId ?? target.dataset.featureId;
+            if (featureId) {
+                onFeatureContextMenu?.(e, featureId);
+            }
+        }, onMouseOver: e => {
+            const target = e.target;
+            const featureId = target.dataset.featureId;
+            if (featureId) {
+                const tooltip = target.dataset.tooltip;
+                const subfeatureId = target.dataset.subfeatureId;
+                onMouseMove?.(e, featureId, tooltip);
+                model.setSubfeatureIdUnderMouse(subfeatureId);
+            }
+        }, children: [fixedLabels, floatingLabels] }));
+});
+export default FloatingLabels;

package/esm/BaseLinearDisplay/components/FloatingLegend.d.ts

@@ -0,0 +1,8 @@
+export interface LegendItem {
+    color?: string;
+    label: string;
+}
+declare const FloatingLegend: ({ items, }: {
+    items: LegendItem[];
+}) => import("react/jsx-runtime").JSX.Element | null;
+export default FloatingLegend;

package/esm/BaseLinearDisplay/components/FloatingLegend.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { makeStyles } from '@jbrowse/core/util/tss-react';
+import { observer } from 'mobx-react';
+const useStyles = makeStyles()(theme => ({
+    legend: {
+        position: 'absolute',
+        right: 10,
+        top: 10,
+        background: theme.palette.background.paper,
+        padding: 3,
+        fontSize: 10,
+        pointerEvents: 'none',
+        zIndex: 100,
+        maxWidth: 200,
+    },
+    item: {
+        display: 'flex',
+        alignItems: 'center',
+        marginBottom: 1,
+        '&:last-child': {
+            marginBottom: 0,
+        },
+    },
+    colorBox: {
+        width: 12,
+        height: 12,
+        marginRight: 6,
+        flexShrink: 0,
+    },
+    label: {
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+    },
+}));
+const FloatingLegend = observer(function FloatingLegend({ items, }) {
+    const { classes } = useStyles();
+    if (items.length === 0) {
+        return null;
+    }
+    return (_jsx("div", { className: classes.legend, children: items.map((item, idx) => (_jsxs("div", { className: classes.item, children: [_jsx("div", { className: classes.colorBox, style: { backgroundColor: item.color } }), _jsx("span", { className: classes.label, children: item.label })] }, `${item.label}-${idx}`))) }));
+});
+export default FloatingLegend;

package/esm/BaseLinearDisplay/components/LinearBlocks.d.ts

@@ -1,4 +1,4 @@
-import type { BaseLinearDisplayModel } from '../model';
+import type { BaseLinearDisplayModel } from '../model.ts';
 declare const LinearBlocks: ({ model, }: {
     model: BaseLinearDisplayModel;
 }) => import("react/jsx-runtime").JSX.Element;

package/esm/BaseLinearDisplay/components/LinearBlocks.js

@@ -1,8 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { getContainingView } from '@jbrowse/core/util';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
 import { observer } from 'mobx-react';
-import { makeStyles } from 'tss-react/mui';
-import RenderedBlocks from './RenderedBlocks';
+import RenderedBlocks from "./RenderedBlocks.js";
 const useStyles = makeStyles()({
     linearBlocks: {
         whiteSpace: 'nowrap',
@@ -12,12 +11,11 @@ const useStyles = makeStyles()({
         display: 'flex',
     },
 });
-const LinearBlocks = observer(function ({ model, }) {
+const LinearBlocks = observer(function LinearBlocks({ model, }) {
     const { classes } = useStyles();
     const { blockDefinitions } = model;
-    const viewModel = getContainingView(model);
     return (_jsx("div", { className: classes.linearBlocks, style: {
-            left: blockDefinitions.offsetPx - viewModel.offsetPx,
+            left: `calc(${blockDefinitions.offsetPx}px - var(--offset-px))`,
         }, children: _jsx(RenderedBlocks, { model: model }) }));
 });
 export default LinearBlocks;

package/esm/BaseLinearDisplay/components/LoadingOverlay.d.ts

@@ -0,0 +1,4 @@
+export default function LoadingOverlay({ statusMessage, children, }: {
+    statusMessage?: string;
+    children?: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/esm/BaseLinearDisplay/components/LoadingOverlay.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx, keyframes, makeStyles } from '@jbrowse/core/util/tss-react';
+const useStyles = makeStyles()({
+    container: {
+        position: 'relative',
+        width: '100%',
+        height: '100%',
+        minHeight: 20,
+    },
+    overlay: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        backgroundColor: 'rgba(255, 255, 255, 0.15)',
+        backgroundImage: 'repeating-linear-gradient(45deg, transparent, transparent 8px, rgba(0, 0, 0, 0.05) 8px, rgba(0, 0, 0, 0.05) 16px)',
+        pointerEvents: 'none',
+        zIndex: 1,
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        opacity: 0,
+    },
+    visible: {
+        opacity: 1,
+    },
+    dots: {
+        fontSize: '0.8rem',
+        fontWeight: 300,
+        '&::after': {
+            display: 'inline-block',
+            content: '""',
+            width: '1em',
+            textAlign: 'left',
+            animation: `${keyframes `
+        0% { content: ''; }
+        25% { content: '.'; }
+        50% { content: '..'; }
+        75% { content: '...'; }
+      `} 1.2s infinite ease-in-out`,
+        },
+    },
+});
+export default function LoadingOverlay({ statusMessage, children, }) {
+    const { classes } = useStyles();
+    const isLoading = !!statusMessage;
+    return (_jsxs("div", { className: classes.container, children: [children, _jsx("span", { className: cx(classes.overlay, isLoading && classes.visible), "data-testid": isLoading ? 'loading-overlay' : undefined, children: _jsx("span", { className: classes.dots, children: statusMessage || 'Loading' }) })] }));
+}

package/esm/BaseLinearDisplay/components/MaxHeightReachedIndicator.d.ts

@@ -1,3 +1,4 @@
-export default function MaxHeightReached({ top }: {
+declare const MaxHeightReached: import("react").NamedExoticComponent<{
     top: number;
-}): import("react/jsx-runtime").JSX.Element;
+}>;
+export default MaxHeightReached;

package/esm/BaseLinearDisplay/components/MaxHeightReachedIndicator.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { makeStyles } from 'tss-react/mui';
+import { memo } from 'react';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
 const useStyles = makeStyles()({
     heightOverflowed: {
         position: 'absolute',
@@ -14,11 +15,12 @@ const useStyles = makeStyles()({
         boxSizing: 'border-box',
     },
 });
-export default function MaxHeightReached({ top }) {
+const MaxHeightReached = memo(function MaxHeightReached({ top, }) {
     const { classes } = useStyles();
     return (_jsx("div", { className: classes.heightOverflowed, style: {
             top,
             pointerEvents: 'none',
             height: 16,
         }, children: "Max height reached" }));
-}
+});
+export default MaxHeightReached;

package/esm/BaseLinearDisplay/components/MenuPage.d.ts

@@ -1,5 +1,5 @@
-import type { Coord } from './types';
-import type { BaseLinearDisplayModel } from '../model';
+import type { Coord } from './types.ts';
+import type { BaseLinearDisplayModel } from '../model.ts';
 declare const MenuPage: ({ onClose, contextCoord, model, }: {
     model: BaseLinearDisplayModel;
     contextCoord: Coord;

package/esm/BaseLinearDisplay/components/MenuPage.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Menu } from '@jbrowse/core/ui';
 import { observer } from 'mobx-react';
-const MenuPage = observer(function ({ onClose, contextCoord, model, }) {
+const MenuPage = observer(function MenuPage({ onClose, contextCoord, model, }) {
     const items = model.contextMenuItems();
     return (_jsx(Menu, { open: items.length > 0, onMenuItemClick: (_, callback) => {
             callback();