@jbrowse/plugin-linear-genome-view 3.6.5 → 4.0.0

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

@@ -0,0 +1,4 @@
+declare const MaxHeightReached: import("react").NamedExoticComponent<{
+    top: number;
+}>;
+export default MaxHeightReached;

package/esm/BaseLinearDisplay/components/MaxHeightReachedIndicator.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo } from 'react';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
+const useStyles = makeStyles()({
+    heightOverflowed: {
+        position: 'absolute',
+        color: 'rgb(77,77,77)',
+        borderBottom: '2px solid rgb(77,77,77)',
+        textShadow: 'white 0px 0px 1px',
+        whiteSpace: 'nowrap',
+        width: '100%',
+        fontWeight: 'bold',
+        textAlign: 'center',
+        zIndex: 999,
+        boxSizing: 'border-box',
+    },
+});
+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

@@ -0,0 +1,8 @@
+import type { Coord } from './types.ts';
+import type { BaseLinearDisplayModel } from '../model.ts';
+declare const MenuPage: ({ onClose, contextCoord, model, }: {
+    model: BaseLinearDisplayModel;
+    contextCoord: Coord;
+    onClose: () => void;
+}) => import("react/jsx-runtime").JSX.Element;
+export default MenuPage;

package/esm/BaseLinearDisplay/components/MenuPage.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Menu } from '@jbrowse/core/ui';
+import { observer } from 'mobx-react';
+const MenuPage = observer(function MenuPage({ onClose, contextCoord, model, }) {
+    const items = model.contextMenuItems();
+    return (_jsx(Menu, { open: items.length > 0, onMenuItemClick: (_, callback) => {
+            callback();
+            onClose();
+        }, onClose: () => {
+            onClose();
+            model.setContextMenuFeature(undefined);
+        }, slotProps: {
+            transition: {
+                onExit: () => {
+                    onClose();
+                    model.setContextMenuFeature(undefined);
+                },
+            },
+        }, anchorReference: "anchorPosition", anchorPosition: {
+            top: contextCoord[1],
+            left: contextCoord[0],
+        }, menuItems: items }));
+});
+export default MenuPage;

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

@@ -0,0 +1,19 @@
+import React from 'react';
+import type { LegendItem } from '../model.ts';
+export interface NonBlockCanvasDisplayModel {
+    error?: unknown;
+    regionTooLarge?: boolean;
+    reload: () => void;
+    regionCannotBeRendered: () => React.ReactElement | null;
+    drawn: boolean;
+    loading: boolean;
+    lastDrawnOffsetPx?: number;
+    statusMessage?: string;
+    showLegend?: boolean;
+    legendItems?: () => LegendItem[];
+}
+declare const NonBlockCanvasDisplayComponent: ({ model, children, }: {
+    model: NonBlockCanvasDisplayModel;
+    children?: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element | null;
+export default NonBlockCanvasDisplayComponent;

package/esm/BaseLinearDisplay/components/NonBlockCanvasDisplayComponent.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { LoadingEllipses } from '@jbrowse/core/ui';
+import { getContainingView } from '@jbrowse/core/util';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
+import { observer } from 'mobx-react';
+import BlockErrorMessage from "./BlockErrorMessage.js";
+import FloatingLegend from "./FloatingLegend.js";
+const useStyles = makeStyles()({
+    loading: {
+        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',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        zIndex: 1,
+    },
+    loadingMessage: {
+        zIndex: 2,
+        pointerEvents: 'none',
+    },
+});
+const NonBlockCanvasDisplayComponent = observer(function NonBlockCanvasDisplayComponent({ model, children, }) {
+    const { error, regionTooLarge } = model;
+    return error ? (_jsx(BlockErrorMessage, { model: model })) : regionTooLarge ? (model.regionCannotBeRendered()) : (_jsx(DataDisplay, { model: model, children: children }));
+});
+const DataDisplay = observer(function DataDisplay({ model, children, }) {
+    const { drawn, loading, showLegend, legendItems } = model;
+    const view = getContainingView(model);
+    const items = legendItems?.() ?? [];
+    const calculatedLeft = (model.lastDrawnOffsetPx ?? 0) - view.offsetPx;
+    return (_jsxs("div", { "data-testid": `drawn-${drawn}`, children: [_jsx("div", { style: {
+                    position: 'absolute',
+                    left: calculatedLeft,
+                }, children: children }), showLegend && items.length > 0 ? _jsx(FloatingLegend, { items: items }) : null, calculatedLeft !== 0 || loading ? _jsx(LoadingBar, { model: model }) : null] }));
+});
+const LoadingBar = observer(function LoadingBar({ model, }) {
+    const { classes } = useStyles();
+    const { statusMessage } = model;
+    return (_jsx("div", { className: classes.loading, children: _jsx("div", { className: classes.loadingMessage, children: _jsx(LoadingEllipses, { message: statusMessage }) }) }));
+});
+export default NonBlockCanvasDisplayComponent;

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

@@ -0,0 +1,12 @@
+import type { BlockModel } from '../models/serverSideRenderedBlock.ts';
+import type { BlockSet } from '@jbrowse/core/util/blockTypes';
+declare const RenderedBlocks: ({ model, }: {
+    model: {
+        id: string;
+        blockDefinitions: BlockSet;
+        blockState: {
+            get: (key: string) => BlockModel | undefined;
+        };
+    };
+}) => import("react/jsx-runtime").JSX.Element[];
+export default RenderedBlocks;

package/esm/BaseLinearDisplay/components/RenderedBlocks.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { observer } from 'mobx-react';
+import { ContentBlock as ContentBlockComponent, ElidedBlock as ElidedBlockComponent, InterRegionPaddingBlock as InterRegionPaddingBlockComponent, } from "./Block.js";
+import MaxHeightReached from "./MaxHeightReachedIndicator.js";
+const RenderedBlocks = observer(function RenderedBlocks({ model, }) {
+    const { blockDefinitions, blockState } = model;
+    return blockDefinitions.map(block => {
+        const key = `${model.id}-${block.key}`;
+        if (block.type === 'ContentBlock') {
+            const state = blockState.get(block.key);
+            return (_jsxs(ContentBlockComponent, { block: block, children: [state?.ReactComponent ? (_jsx(state.ReactComponent, { model: state })) : null, state?.maxHeightReached ? (_jsx(MaxHeightReached, { top: state.layout.getTotalHeight() - 16 })) : null] }, key));
+        }
+        else if (block.type === 'ElidedBlock') {
+            return _jsx(ElidedBlockComponent, { width: block.widthPx }, key);
+        }
+        else if (block.type === 'InterRegionPaddingBlock') {
+            return (_jsx(InterRegionPaddingBlockComponent, { width: block.widthPx, style: { background: 'none' }, boundary: block.variant === 'boundary' }, key));
+        }
+        throw new Error(`invalid block type ${JSON.stringify(block)}`);
+    });
+});
+export default RenderedBlocks;

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

@@ -2,10 +2,10 @@ declare const ServerSideRenderedBlockContent: ({ model, }: {
     model: {
         error?: unknown;
         reload: () => void;
-        message: React.ReactNode;
-        filled?: boolean;
-        status?: string;
+        message?: React.ReactNode;
+        statusMessage?: string;
         reactElement?: React.ReactElement;
+        isRenderingPending?: boolean;
     };
-}) => import("react/jsx-runtime").JSX.Element | undefined;
+}) => import("react/jsx-runtime").JSX.Element;
 export default ServerSideRenderedBlockContent;

package/esm/BaseLinearDisplay/components/ServerSideRenderedBlockContent.js

@@ -1,21 +1,18 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Suspense, isValidElement, lazy } from 'react';
 import { observer } from 'mobx-react';
-import BlockLoadingMessage from './BlockLoadingMessage';
-import BlockMsg from './BlockMsg';
-const BlockErrorMessage = lazy(() => import('./BlockErrorMessage'));
-const ServerSideRenderedBlockContent = observer(function ({ model, }) {
+import BlockMsg from "./BlockMsg.js";
+import LoadingOverlay from "./LoadingOverlay.js";
+const BlockErrorMessage = lazy(() => import("./BlockErrorMessage.js"));
+const ServerSideRenderedBlockContent = observer(function ServerSideRenderedBlockContent({ model, }) {
     if (model.error) {
         return (_jsx(Suspense, { fallback: null, children: _jsx(BlockErrorMessage, { model: model }) }));
     }
     else if (model.message) {
         return isValidElement(model.message) ? (model.message) : (_jsx(BlockMsg, { message: `${model.message}`, severity: "info" }));
     }
-    else if (!model.filled) {
-        return _jsx(BlockLoadingMessage, { model: model });
-    }
     else {
-        return model.reactElement;
+        return (_jsx(LoadingOverlay, { statusMessage: model.statusMessage, children: model.reactElement }));
     }
 });
 export default ServerSideRenderedBlockContent;

package/esm/BaseLinearDisplay/components/TooLargeMessage.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { isAlive } from '@jbrowse/mobx-state-tree';
 import { Button } from '@mui/material';
 import { observer } from 'mobx-react';
-import { isAlive } from 'mobx-state-tree';
-import BlockMsg from '../components/BlockMsg';
-const TooLargeMessage = observer(function ({ model, }) {
+import BlockMsg from "../components/BlockMsg.js";
+const TooLargeMessage = observer(function TooLargeMessage({ model, }) {
     const { regionTooLargeReason } = model;
     return (_jsx(BlockMsg, { severity: "warning", action: _jsx(Button, { onClick: () => {
                 if (isAlive(model)) {

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

@@ -4,6 +4,8 @@ type Coord = [number, number];
 declare const Tooltip: ({ model, clientMouseCoord, }: {
     model: {
         featureUnderMouse: Feature | undefined;
+        featureIdUnderMouse: string | undefined;
+        mouseoverExtraInformation: string | undefined;
         configuration: AnyConfigurationModel;
     };
     clientMouseCoord: Coord;

package/esm/BaseLinearDisplay/components/Tooltip.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef, isValidElement } from 'react';
+import { forwardRef, isValidElement, useMemo } from 'react';
 import { getConf } from '@jbrowse/core/configuration';
 import { SanitizedHTML } from '@jbrowse/core/ui';
 import BaseTooltip from '@jbrowse/core/ui/BaseTooltip';
@@ -7,13 +7,16 @@ import { observer } from 'mobx-react';
 const TooltipContents = forwardRef(function TooltipContents2({ message }, ref) {
     return (_jsx("div", { ref: ref, children: isValidElement(message) ? (message) : message ? (_jsx(SanitizedHTML, { html: String(message) })) : null }));
 });
-const Tooltip = observer(function ({ model, clientMouseCoord, }) {
-    const { featureUnderMouse } = model;
+const Tooltip = observer(function Tooltip({ model, clientMouseCoord, }) {
+    const { featureUnderMouse, featureIdUnderMouse, mouseoverExtraInformation } = model;
     const x = clientMouseCoord[0] + 15;
     const y = clientMouseCoord[1];
-    const contents = featureUnderMouse
-        ? getConf(model, 'mouseover', { feature: featureUnderMouse })
-        : undefined;
-    return featureUnderMouse && contents ? (_jsx(BaseTooltip, { clientPoint: { x, y }, children: _jsx(TooltipContents, { message: contents }) })) : null;
+    const contents = useMemo(() => featureUnderMouse || mouseoverExtraInformation
+        ? getConf(model, 'mouseover', {
+            feature: featureUnderMouse,
+            mouseoverExtraInformation,
+        })
+        : undefined, [featureUnderMouse, model, mouseoverExtraInformation]);
+    return featureIdUnderMouse && contents ? (_jsx(BaseTooltip, { clientPoint: { x, y }, children: _jsx(TooltipContents, { message: contents }) })) : null;
 });
 export default Tooltip;

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

@@ -0,0 +1 @@
+export type Coord = [number, number];

package/esm/BaseLinearDisplay/components/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,21 @@
+import type { LinearGenomeViewModel } from '../../LinearGenomeView/index.ts';
+import type { FloatingLabelData, LayoutRecord } from '../types.ts';
+import type { Assembly } from '@jbrowse/core/assemblyManager/assembly';
+export interface FeatureLabelData {
+    leftPx: number;
+    rightPx: number;
+    topPx: number;
+    totalFeatureHeight: number;
+    floatingLabels: FloatingLabelData[];
+    featureWidth: number;
+    totalLayoutWidth: number;
+}
+export declare function deduplicateFeatureLabels(layoutFeatures: {
+    entries(): IterableIterator<readonly [string, LayoutRecord | undefined]>;
+}, view: LinearGenomeViewModel, assembly: Assembly | undefined, bpPerPx: number): Map<string, FeatureLabelData>;
+export declare function getViewportLeftEdge(offsetPx: number): number;
+export declare function clampToViewport(featureLeftPx: number, featureRightPx: number, offsetPx: number): {
+    leftPx: number;
+    rightPx: number;
+};
+export declare function calculateFloatingLabelPosition(featureLeftPx: number, featureRightPx: number, labelWidth: number, offsetPx: number, viewportLeft: number): number;

package/esm/BaseLinearDisplay/components/util.js

@@ -0,0 +1,116 @@
+import { clamp } from '@jbrowse/core/util';
+function calculateFeaturePixelPositions(view, assembly, refName, left, right, bpPerPx) {
+    const canonicalRefName = assembly?.getCanonicalRefName(refName) || refName;
+    const leftBpPx = view.bpToPx({
+        refName: canonicalRefName,
+        coord: left,
+    })?.offsetPx;
+    const rightBpPx = view.bpToPx({
+        refName: canonicalRefName,
+        coord: right,
+    })?.offsetPx;
+    if (leftBpPx !== undefined) {
+        const rightEstimate = rightBpPx !== undefined ? rightBpPx : leftBpPx + (right - left) / bpPerPx;
+        return {
+            leftPx: Math.min(leftBpPx, rightEstimate),
+            rightPx: Math.max(leftBpPx, rightEstimate),
+        };
+    }
+    else if (rightBpPx !== undefined) {
+        const leftEstimate = rightBpPx - (right - left) / bpPerPx;
+        return {
+            leftPx: Math.min(leftEstimate, rightBpPx),
+            rightPx: Math.max(leftEstimate, rightBpPx),
+        };
+    }
+    return undefined;
+}
+function calculateMultiRegionPositions(view, assembly, refName, left, right) {
+    const canonicalRefName = assembly?.getCanonicalRefName(refName) || refName;
+    const visibleRegions = view.displayedRegions.filter(r => r.refName === canonicalRefName && r.start < right && r.end > left);
+    if (visibleRegions.length === 0) {
+        return undefined;
+    }
+    let minLeftPx = Infinity;
+    let maxRightPx = -Infinity;
+    for (const region of visibleRegions) {
+        const regionStart = Math.max(left, region.start);
+        const regionEnd = Math.min(right, region.end);
+        const startPx = view.bpToPx({
+            refName: canonicalRefName,
+            coord: regionStart,
+        })?.offsetPx;
+        const endPx = view.bpToPx({
+            refName: canonicalRefName,
+            coord: regionEnd,
+        })?.offsetPx;
+        if (startPx !== undefined && endPx !== undefined) {
+            minLeftPx = Math.min(minLeftPx, startPx, endPx);
+            maxRightPx = Math.max(maxRightPx, startPx, endPx);
+        }
+    }
+    if (minLeftPx === Infinity || maxRightPx === -Infinity) {
+        return undefined;
+    }
+    return { leftPx: minLeftPx, rightPx: maxRightPx };
+}
+function getFeaturePositions(view, assembly, refName, left, right, bpPerPx) {
+    return (calculateFeaturePixelPositions(view, assembly, refName, left, right, bpPerPx) || calculateMultiRegionPositions(view, assembly, refName, left, right));
+}
+export function deduplicateFeatureLabels(layoutFeatures, view, assembly, bpPerPx) {
+    const featureLabels = new Map();
+    for (const [key, val] of layoutFeatures.entries()) {
+        if (!val?.[4]) {
+            continue;
+        }
+        const [, topPx, , , feature] = val;
+        const { refName, floatingLabels, totalFeatureHeight, actualTopPx, featureWidth, totalLayoutWidth, featureStartBp, featureEndBp, } = feature;
+        const effectiveTopPx = actualTopPx ?? topPx;
+        if (!floatingLabels ||
+            floatingLabels.length === 0 ||
+            !totalFeatureHeight ||
+            featureWidth === undefined ||
+            totalLayoutWidth === undefined ||
+            featureStartBp === undefined ||
+            featureEndBp === undefined) {
+            continue;
+        }
+        const positions = getFeaturePositions(view, assembly, refName, featureStartBp, featureEndBp, bpPerPx);
+        if (!positions) {
+            continue;
+        }
+        const existing = featureLabels.get(key);
+        if (!existing || positions.leftPx < existing.leftPx) {
+            featureLabels.set(key, {
+                leftPx: positions.leftPx,
+                rightPx: positions.rightPx,
+                topPx: effectiveTopPx,
+                totalFeatureHeight,
+                floatingLabels,
+                featureWidth,
+                totalLayoutWidth,
+            });
+        }
+    }
+    return featureLabels;
+}
+export function getViewportLeftEdge(offsetPx) {
+    return Math.max(0, offsetPx);
+}
+export function clampToViewport(featureLeftPx, featureRightPx, offsetPx) {
+    const viewportLeft = getViewportLeftEdge(offsetPx);
+    return {
+        leftPx: Math.max(featureLeftPx, viewportLeft),
+        rightPx: Math.max(featureRightPx, viewportLeft),
+    };
+}
+export function calculateFloatingLabelPosition(featureLeftPx, featureRightPx, labelWidth, offsetPx, viewportLeft) {
+    const featureWidth = featureRightPx - featureLeftPx;
+    if (labelWidth > featureWidth) {
+        return featureLeftPx - offsetPx;
+    }
+    const leftPx = Math.max(featureLeftPx, viewportLeft);
+    const naturalX = leftPx - offsetPx;
+    const maxX = featureRightPx - offsetPx - labelWidth;
+    return clamp(naturalX, 0, maxX);
+}

package/esm/BaseLinearDisplay/index.d.ts

@@ -1,8 +1,17 @@
-export { default as baseLinearDisplayConfigSchema } from './models/configSchema';
-export type { BlockModel } from './models/serverSideRenderedBlock';
-export { BaseLinearDisplay } from './models/BaseLinearDisplayModel';
-export type { BaseLinearDisplayModel, BaseLinearDisplayStateModel, ExportSvgDisplayOptions, } from './models/BaseLinearDisplayModel';
-export { BlockMsg, Tooltip, default as BaseLinearDisplayComponent, } from './components/BaseLinearDisplay';
-export { default as TrackHeightMixin } from './models/TrackHeightMixin';
-export { default as FeatureDensityMixin } from './models/FeatureDensityMixin';
-export { default as TooLargeMessage } from './components/TooLargeMessage';
+export { default as baseLinearDisplayConfigSchema } from './models/configSchema.ts';
+export type { BlockModel } from './models/serverSideRenderedBlock.ts';
+export { BaseLinearDisplay } from './model.ts';
+export type { BaseLinearDisplayModel, BaseLinearDisplayStateModel, LegendItem, } from './model.ts';
+export type { ExportSvgDisplayOptions, FloatingLabelData, LayoutFeatureMetadata, } from './types.ts';
+export { createSubfeatureLabelMetadata } from './types.ts';
+export { BlockMsg, Tooltip, default as BaseLinearDisplayComponent, } from './components/BaseLinearDisplay.tsx';
+export { default as TrackHeightMixin } from './models/TrackHeightMixin.tsx';
+export { default as FeatureDensityMixin } from './models/FeatureDensityMixin.tsx';
+export { type NonBlockCanvasDisplayMixinType, default as NonBlockCanvasDisplayMixin, } from './models/NonBlockCanvasDisplayMixin.tsx';
+export { drawCanvasImageData } from './util.ts';
+export { default as TooLargeMessage } from './components/TooLargeMessage.tsx';
+export { default as FloatingLegend } from './components/FloatingLegend.tsx';
+export { default as NonBlockCanvasDisplayComponent } from './components/NonBlockCanvasDisplayComponent.tsx';
+export type { NonBlockCanvasDisplayModel } from './components/NonBlockCanvasDisplayComponent.tsx';
+export { default as SVGLegend } from './SVGLegend.tsx';
+export { calculateSvgLegendWidth } from './calculateSvgLegendWidth.ts';

package/esm/BaseLinearDisplay/index.js

@@ -1,6 +1,13 @@
-export { default as baseLinearDisplayConfigSchema } from './models/configSchema';
-export { BaseLinearDisplay } from './models/BaseLinearDisplayModel';
-export { BlockMsg, Tooltip, default as BaseLinearDisplayComponent, } from './components/BaseLinearDisplay';
-export { default as TrackHeightMixin } from './models/TrackHeightMixin';
-export { default as FeatureDensityMixin } from './models/FeatureDensityMixin';
-export { default as TooLargeMessage } from './components/TooLargeMessage';
+export { default as baseLinearDisplayConfigSchema } from "./models/configSchema.js";
+export { BaseLinearDisplay } from "./model.js";
+export { createSubfeatureLabelMetadata } from "./types.js";
+export { BlockMsg, Tooltip, default as BaseLinearDisplayComponent, } from "./components/BaseLinearDisplay.js";
+export { default as TrackHeightMixin } from "./models/TrackHeightMixin.js";
+export { default as FeatureDensityMixin } from "./models/FeatureDensityMixin.js";
+export { default as NonBlockCanvasDisplayMixin, } from "./models/NonBlockCanvasDisplayMixin.js";
+export { drawCanvasImageData } from "./util.js";
+export { default as TooLargeMessage } from "./components/TooLargeMessage.js";
+export { default as FloatingLegend } from "./components/FloatingLegend.js";
+export { default as NonBlockCanvasDisplayComponent } from "./components/NonBlockCanvasDisplayComponent.js";
+export { default as SVGLegend } from "./SVGLegend.js";
+export { calculateSvgLegendWidth } from "./calculateSvgLegendWidth.js";