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

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

@@ -1,9 +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: any;
+        blockState: {
+            get: (key: string) => BlockModel | undefined;
+        };
     };
 }) => import("react/jsx-runtime").JSX.Element[];
 export default RenderedBlocks;

package/esm/BaseLinearDisplay/components/RenderedBlocks.js

@@ -1,14 +1,14 @@
 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';
-import MaxHeightReached from './MaxHeightReachedIndicator';
-const RenderedBlocks = observer(function ({ model, }) {
+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 === null || state === void 0 ? void 0 : state.ReactComponent) ? (_jsx(state.ReactComponent, { model: state })) : null, (state === null || state === void 0 ? void 0 : state.maxHeightReached) ? (_jsx(MaxHeightReached, { top: state.layout.getTotalHeight() - 16 })) : null] }, 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);

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,7 @@ type Coord = [number, number];
 declare const Tooltip: ({ model, clientMouseCoord, }: {
     model: {
         featureUnderMouse: Feature | undefined;
+        featureIdUnderMouse: string | undefined;
         mouseoverExtraInformation: string | undefined;
         configuration: AnyConfigurationModel;
     };

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,16 +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, mouseoverExtraInformation } = 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
+    const contents = useMemo(() => featureUnderMouse || mouseoverExtraInformation
         ? getConf(model, 'mouseover', {
             feature: featureUnderMouse,
             mouseoverExtraInformation,
         })
-        : undefined;
-    return featureUnderMouse && contents ? (_jsx(BaseTooltip, { clientPoint: { x, y }, children: _jsx(TooltipContents, { message: contents }) })) : null;
+        : 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/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 './model';
-export type { BaseLinearDisplayModel, BaseLinearDisplayStateModel, ExportSvgDisplayOptions, } from './model';
-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 './model';
-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";