@jbrowse/plugin-linear-genome-view 4.3.0 → 5.0.0-beta.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/plugin-linear-genome-view",
-  "version": "4.3.0",
+  "version": "5.0.0-beta.2",
   "type": "module",
   "description": "JBrowse 2 linear genome view",
   "keywords": [
@@ -21,37 +21,36 @@
     "esm"
   ],
   "dependencies": {
-    "@jbrowse/mobx-state-tree": "^5.6.0",
-    "@mui/icons-material": "^7.3.11",
-    "@mui/material": "^7.3.11",
-    "@types/file-saver-es": "^2.0.3",
-    "copy-to-clipboard": "^3.3.3",
-    "file-saver-es": "^2.0.5",
-    "mobx": "^6.15.3",
-    "mobx-react": "^9.2.1",
-    "@jbrowse/product-core": "^4.3.0",
-    "@jbrowse/core": "^4.3.0"
+    "@jbrowse/mobx-state-tree": "^6.5.1",
+    "@mui/icons-material": "^9.4.0",
+    "@mui/material": "^9.4.0",
+    "mobx": "^7.0.3",
+    "mobx-react": "^10.0.2",
+    "@jbrowse/core": "^5.0.0-beta.2",
+    "@jbrowse/render-core": "^5.0.0-beta.2",
+    "@jbrowse/display-ui": "^5.0.0-beta.2",
+    "@jbrowse/display-kit": "^5.0.0-beta.2"
   },
   "peerDependencies": {
-    "react": ">=18.0.0",
-    "react-dom": ">=18.0.0"
+    "react": ">=19.0.0",
+    "react-dom": ">=19.0.0"
   },
   "publishConfig": {
     "access": "public"
   },
   "sideEffects": false,
+  "devDependencies": {
+    "@jbrowse/display-test-utils": "^5.0.0-beta.2"
+  },
   "scripts": {
     "prebuild": "pnpm clean",
     "build": "pnpm run /^build:/",
-    "build:esm": "tsc -p tsconfig.build.esm.json",
+    "build:esm": "node ../../node_modules/typescript7/bin/tsc --build tsconfig.build.esm.json",
     "clean": "rimraf esm *.tsbuildinfo",
-    "test": "cd ../..; jest --passWithNoTests plugins/linear-genome-view"
+    "test": "jest --config ../../jest.config.js --passWithNoTests --testPathPatterns plugins/linear-genome-view"
   },
   "types": "esm/index.d.ts",
   "exports": {
-    ".": {
-      "types": "./esm/index.d.ts",
-      "import": "./esm/index.js"
-    }
+    ".": "./esm/index.js"
   }
 }

package/esm/BaseLinearDisplay/SVGLegend.d.ts

@@ -1,6 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

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

package/esm/BaseLinearDisplay/calculateSvgLegendWidth.js

@@ -1,11 +0,0 @@
-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 +0,0 @@
-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.tsx';
-export { default as BlockMsg } from './BlockMsg.tsx';

package/esm/BaseLinearDisplay/components/BaseLinearDisplay.js

@@ -1,53 +0,0 @@
-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 FloatingLegend from "./FloatingLegend.js";
-import LinearBlocks from "./LinearBlocks.js";
-import MenuPage from "./MenuPage.js";
-const useStyles = makeStyles()({
-    display: {
-        position: 'relative',
-        whiteSpace: 'nowrap',
-        textAlign: 'left',
-        width: '100%',
-        minHeight: '100%',
-    },
-});
-const BaseLinearDisplay = observer(function BaseLinearDisplay(props) {
-    const { classes } = useStyles();
-    const ref = useRef(null);
-    const [clientRect, setClientRect] = useState();
-    const [offsetMouseCoord, setOffsetMouseCoord] = useState([0, 0]);
-    const [clientMouseCoord, setClientMouseCoord] = useState([0, 0]);
-    const [contextCoord, setContextCoord] = useState();
-    const { model, children } = props;
-    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) {
-                setContextCoord(undefined);
-            }
-            else if (ref.current) {
-                setContextCoord([event.clientX, event.clientY]);
-            }
-        }, onMouseMove: event => {
-            if (!ref.current) {
-                return;
-            }
-            const rect = ref.current.getBoundingClientRect();
-            const { left, top } = rect;
-            setOffsetMouseCoord([event.clientX - left, event.clientY - top]);
-            setClientMouseCoord([event.clientX, event.clientY]);
-            setClientRect(rect);
-        }, 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.js";
-export { default as BlockMsg } from "./BlockMsg.js";

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

@@ -1,14 +0,0 @@
-import type { BaseBlock } from '@jbrowse/core/util/blockTypes';
-declare const ContentBlock: ({ block, children, }: {
-    block: BaseBlock;
-    children: React.ReactNode;
-}) => import("react/jsx-runtime").JSX.Element;
-declare function ElidedBlock({ width }: {
-    width: number;
-}): import("react/jsx-runtime").JSX.Element;
-declare function InterRegionPaddingBlock({ boundary, width, style, }: {
-    boundary: boolean;
-    width: number;
-    style?: React.CSSProperties;
-}): import("react/jsx-runtime").JSX.Element;
-export { ContentBlock, ElidedBlock, InterRegionPaddingBlock };

package/esm/BaseLinearDisplay/components/Block.js

@@ -1,45 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { makeStyles } from '@jbrowse/core/util/tss-react';
-import { observer } from 'mobx-react';
-const useStyles = makeStyles()(theme => ({
-    contentBlock: {
-        position: 'relative',
-        minHeight: '100%',
-        boxSizing: 'border-box',
-        whiteSpace: 'nowrap',
-        overflow: 'hidden',
-    },
-    elidedBlock: {
-        minHeight: '100%',
-        boxSizing: 'border-box',
-        backgroundColor: '#999',
-        backgroundImage: 'repeating-linear-gradient(90deg, transparent, transparent 1px, rgba(255,255,255,.5) 1px, rgba(255,255,255,.5) 3px)',
-    },
-    interRegionPaddingBlock: {
-        minHeight: '100%',
-        backgroundColor: theme.palette.text.disabled,
-    },
-    boundaryPaddingBlock: {
-        minHeight: '100%',
-        backgroundColor: theme.palette.action.disabledBackground,
-    },
-}));
-const ContentBlock = observer(function ContentBlock({ block, children, }) {
-    const { classes } = useStyles();
-    const { widthPx } = block;
-    return (_jsx("div", { style: { width: widthPx }, className: classes.contentBlock, children: children }));
-});
-function ElidedBlock({ width }) {
-    const { classes } = useStyles();
-    return _jsx("div", { className: classes.elidedBlock, style: { width } });
-}
-function InterRegionPaddingBlock({ boundary, width, style = {}, }) {
-    const { classes } = useStyles();
-    return (_jsx("div", { style: {
-            ...style,
-            width,
-        }, className: boundary
-            ? classes.boundaryPaddingBlock
-            : classes.interRegionPaddingBlock }));
-}
-export { ContentBlock, ElidedBlock, InterRegionPaddingBlock };

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

@@ -1,7 +0,0 @@
-declare const BlockErrorMessage: ({ model, }: {
-    model: {
-        error?: unknown;
-        reload: () => void;
-    };
-}) => import("react/jsx-runtime").JSX.Element;
-export default BlockErrorMessage;

package/esm/BaseLinearDisplay/components/BlockErrorMessage.js

@@ -1,22 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import ErrorMessageStackTraceDialog from '@jbrowse/core/ui/ErrorMessageStackTraceDialog';
-import { getSession } from '@jbrowse/core/util';
-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.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: () => {
-                            getSession(model).queueDialog(onClose => [
-                                ErrorMessageStackTraceDialog,
-                                {
-                                    onClose,
-                                    error: model.error,
-                                },
-                            ]);
-                        }, children: _jsx(ReportIcon, {}) }) })] }) }));
-});
-export default BlockErrorMessage;

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

@@ -1,6 +0,0 @@
-import type { AlertColor } from '@mui/material';
-export default function BlockMsg({ message, severity, action, }: {
-    message: string;
-    severity?: AlertColor;
-    action?: React.ReactNode;
-}): import("react/jsx-runtime").JSX.Element;

package/esm/BaseLinearDisplay/components/BlockMsg.js

@@ -1,26 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { makeStyles } from '@jbrowse/core/util/tss-react';
-import { Alert, Tooltip } from '@mui/material';
-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();
-    return (_jsx(Alert, { severity: severity, action: action, classes: {
-            message: classes.ellipses,
-        }, onMouseDown: event => {
-            event.stopPropagation();
-        }, onClick: event => {
-            event.stopPropagation();
-        }, children: _jsx(Tooltip, { title: message, children: _jsx("div", { className: classes.content, children: message }) }) }));
-}

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

@@ -1,9 +0,0 @@
-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

@@ -1,42 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

@@ -1,40 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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

@@ -1,45 +0,0 @@
-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

@@ -1,5 +0,0 @@
-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

@@ -1,75 +0,0 @@
-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 { 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,
-    },
-});
-function FloatingLabel({ text, color, isOverlay, featureLeftPx, featureRightPx, featureId, subfeatureId, labelWidth, y, offsetPx, tooltip, labelClass, overlayClass, }) {
-    const x = calculateFloatingLabelPosition(featureLeftPx, featureRightPx, labelWidth, offsetPx);
-    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 labels = [];
-    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;
-            labels.push(_jsx(FloatingLabel, { text: text, color: color, isOverlay: isOverlay ?? false, featureLeftPx: leftPx, featureRightPx: featureRightPx, featureId: featureId, subfeatureId: subfeatureId, labelWidth: labelWidth, y: y, offsetPx: offsetPx, tooltip: tooltip, labelClass: classes.label, overlayClass: classes.overlay }, labelKey));
-        }
-    }
-    return (_jsx("div", { className: classes.container, 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: labels }));
-});
-export default FloatingLabels;

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

@@ -1,8 +0,0 @@
-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

@@ -1,43 +0,0 @@
-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,5 +0,0 @@
-import type { BaseLinearDisplayModel } from '../model.ts';
-declare const LinearBlocks: ({ model, }: {
-    model: BaseLinearDisplayModel;
-}) => import("react/jsx-runtime").JSX.Element;
-export default LinearBlocks;

package/esm/BaseLinearDisplay/components/LinearBlocks.js

@@ -1,23 +0,0 @@
-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 RenderedBlocks from "./RenderedBlocks.js";
-const useStyles = makeStyles()({
-    linearBlocks: {
-        whiteSpace: 'nowrap',
-        textAlign: 'left',
-        position: 'absolute',
-        minHeight: '100%',
-        display: 'flex',
-    },
-});
-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,
-        }, children: _jsx(RenderedBlocks, { model: model }) }));
-});
-export default LinearBlocks;