@jbrowse/plugin-hic 4.0.4 → 4.1.1

package/esm/LinearHicDisplay/afterAttach.js

@@ -46,6 +46,7 @@ export function doAfterAttach(self) {
             const stopToken = createStopToken();
             self.setRenderingStopToken(stopToken);
             self.setLoading(true);
+            self.setCanvasDrawn(false);
             const result = (await rpcManager.call(rpcSessionId, 'CoreRender', {
                 sessionId: rpcSessionId,
                 rendererType: 'HicRenderer',
@@ -64,11 +65,13 @@ export function doAfterAttach(self) {
             if (result.imageData) {
                 self.setRenderingImageData(result.imageData);
                 self.setLastDrawnOffsetPx(view.offsetPx);
+                self.setLastDrawnBpPerPx(view.bpPerPx);
             }
             self.setFlatbushData(result.flatbush, result.items ?? [], result.maxScore ?? 0, result.yScalar ?? 1);
         }
         catch (error) {
             if (!isAbortException(error)) {
+                console.error(error);
                 if (isAlive(self)) {
                     self.setError(error);
                 }
@@ -113,7 +116,10 @@ export function doAfterAttach(self) {
         if (!view.initialized) {
             return;
         }
-        drawCanvasImageData(self.ref, self.renderingImageData);
+        const success = drawCanvasImageData(self.ref, self.renderingImageData);
+        if (isAlive(self)) {
+            self.setCanvasDrawn(success);
+        }
     }, {
         name: 'LinearHicDisplayCanvas',
     }));

package/esm/LinearHicDisplay/components/BaseDisplayComponent.d.ts

@@ -1,2 +1,15 @@
-export { NonBlockCanvasDisplayComponent as default } from '@jbrowse/plugin-linear-genome-view';
-export type { NonBlockCanvasDisplayModel } from '@jbrowse/plugin-linear-genome-view';
+import React from 'react';
+export interface HicDisplayModel {
+    error?: unknown;
+    regionTooLarge?: boolean;
+    reload: () => void;
+    regionCannotBeRendered: () => React.ReactElement | null;
+    drawn: boolean;
+    loading: boolean;
+    statusMessage?: string;
+}
+declare const HicBaseDisplayComponent: ({ model, children, }: {
+    model: HicDisplayModel;
+    children?: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element | null;
+export default HicBaseDisplayComponent;

package/esm/LinearHicDisplay/components/BaseDisplayComponent.js

@@ -1 +1,39 @@
-export { NonBlockCanvasDisplayComponent as default } from '@jbrowse/plugin-linear-genome-view';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { ErrorMessage, LoadingEllipses } from '@jbrowse/core/ui';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
+import { observer } from 'mobx-react';
+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 HicBaseDisplayComponent = observer(function HicBaseDisplayComponent({ model, children, }) {
+    const { error, regionTooLarge } = model;
+    return error ? (_jsx(ErrorMessage, { error: error })) : regionTooLarge ? (model.regionCannotBeRendered()) : (_jsx(DataDisplay, { model: model, children: children }));
+});
+const DataDisplay = observer(function DataDisplay({ model, children, }) {
+    const { drawn, loading } = model;
+    return (_jsxs("div", { "data-testid": `drawn-${drawn}`, children: [children, 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 HicBaseDisplayComponent;

package/esm/LinearHicDisplay/components/ReactComponent.js

@@ -30,11 +30,14 @@ function screenToUnrotated(screenX, screenY, yScalar) {
 const HicCanvas = observer(function HicCanvas({ model, }) {
     const view = getContainingView(model);
     const width = Math.round(view.dynamicBlocks.totalWidthPx);
-    const { height, drawn, loading, flatbush, flatbushItems, yScalar, showLegend, maxScore, colorScheme, useLogScale, } = model;
+    const { height, fullyDrawn, flatbush, flatbushItems, yScalar, showLegend, maxScore, colorScheme, useLogScale, lastDrawnOffsetPx, } = model;
     const containerRef = useRef(null);
     const [hoveredItem, setHoveredItem] = useState();
     const [mousePosition, setMousePosition] = useState();
     const [localMousePos, setLocalMousePos] = useState();
+    const canvasOffset = view.offsetPx >= 0
+        ? (lastDrawnOffsetPx ?? 0) - view.offsetPx
+        : Math.max(0, -view.offsetPx);
     const flatbushIndex = useMemo(() => (flatbush ? Flatbush.from(flatbush) : null), [flatbush]);
     const cb = useCallback((ref) => {
         model.setRef(ref);
@@ -46,7 +49,8 @@ const HicCanvas = observer(function HicCanvas({ model, }) {
             return;
         }
         const rect = containerRef.current.getBoundingClientRect();
-        const screenX = event.clientX - rect.left;
+        const mouseCanvasOffset = canvasOffset;
+        const screenX = event.clientX - rect.left - mouseCanvasOffset;
         const screenY = event.clientY - rect.top;
         setMousePosition({ x: event.clientX, y: event.clientY });
         setLocalMousePos({ x: screenX, y: screenY });
@@ -59,7 +63,7 @@ const HicCanvas = observer(function HicCanvas({ model, }) {
         else {
             setHoveredItem(undefined);
         }
-    }, [flatbushIndex, flatbushItems, yScalar]);
+    }, [flatbushIndex, flatbushItems, yScalar, canvasOffset]);
     const onMouseLeave = useCallback(() => {
         setHoveredItem(undefined);
         setMousePosition(undefined);
@@ -70,12 +74,13 @@ const HicCanvas = observer(function HicCanvas({ model, }) {
             position: 'relative',
             width,
             height,
-        }, onMouseMove: onMouseMove, onMouseLeave: onMouseLeave, children: [_jsx("canvas", { "data-testid": `hic_canvas${drawn && !loading ? '_done' : ''}`, ref: cb, style: {
+            overflow: 'hidden',
+        }, onMouseMove: onMouseMove, onMouseLeave: onMouseLeave, children: [_jsx("canvas", { "data-testid": `hic_canvas${fullyDrawn ? '_done' : ''}`, ref: cb, style: {
                     width,
                     height,
                     position: 'absolute',
-                    left: 0,
-                }, width: width * 2, height: height * 2 }), hoveredItem && localMousePos ? (_jsx(Crosshairs, { x: localMousePos.x, y: localMousePos.y, yScalar: yScalar, left: 0, width: width, height: height })) : null, hoveredItem && mousePosition ? (_jsx(HicTooltip, { item: hoveredItem, x: mousePosition.x, y: mousePosition.y })) : null, showLegend && maxScore > 0 ? (_jsx(HicColorLegend, { maxScore: maxScore, colorScheme: colorScheme, useLogScale: useLogScale })) : null] }));
+                    left: canvasOffset,
+                }, width: width * 2, height: height * 2 }), hoveredItem && localMousePos ? (_jsx(Crosshairs, { x: localMousePos.x, y: localMousePos.y, yScalar: yScalar, left: canvasOffset, width: width, height: height })) : null, hoveredItem && mousePosition ? (_jsx(HicTooltip, { item: hoveredItem, x: mousePosition.x, y: mousePosition.y })) : null, showLegend && maxScore > 0 ? (_jsx(HicColorLegend, { maxScore: maxScore, colorScheme: colorScheme, useLogScale: useLogScale })) : null] }));
 });
 const LinearHicReactComponent = observer(function LinearHicReactComponent({ model, }) {
     return (_jsx(BaseDisplayComponent, { model: model, children: _jsx(HicCanvas, { model: model }) }));

package/esm/LinearHicDisplay/model.d.ts

@@ -231,19 +231,24 @@ export default function stateModelFactory(configSchema: AnyConfigurationSchemaTy
 } & {
     loading: boolean;
     lastDrawnOffsetPx: number | undefined;
+    lastDrawnBpPerPx: number | undefined;
     ref: HTMLCanvasElement | null;
     renderingImageData: ImageBitmap | undefined;
     renderingStopToken: import("@jbrowse/core/util").StopToken | undefined;
     statusMessage: string | undefined;
+    canvasDrawn: boolean;
 } & {
     readonly drawn: boolean;
+    readonly fullyDrawn: boolean;
 } & {
     setLastDrawnOffsetPx(n: number): void;
+    setLastDrawnBpPerPx(n: number): void;
     setLoading(f: boolean): void;
     setRef(ref: HTMLCanvasElement | null): void;
     setRenderingImageData(imageData: ImageBitmap | undefined): void;
     setRenderingStopToken(token?: import("@jbrowse/core/util").StopToken): void;
     setStatusMessage(msg?: string): void;
+    setCanvasDrawn(drawn: boolean): void;
 } & {
     beforeDestroy(): void;
 } & {

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@jbrowse/plugin-hic",
-  "version": "4.0.4",
+  "version": "4.1.1",
+  "type": "module",
   "description": "JBrowse 2 hic adapters, tracks, etc.",
   "keywords": [
     "jbrowse",
@@ -21,14 +22,14 @@
   ],
   "dependencies": {
     "@jbrowse/mobx-state-tree": "^5.5.0",
-    "@mui/x-charts-vendor": "^8.25.0",
+    "@mui/x-charts-vendor": "^8.26.0",
     "generic-filehandle2": "^2.0.18",
     "hic-straw": "^2.1.4",
     "mobx": "^6.15.0",
     "mobx-react": "^9.2.1",
     "rxjs": "^7.8.2",
-    "@jbrowse/core": "^4.0.4",
-    "@jbrowse/plugin-linear-genome-view": "^4.0.4"
+    "@jbrowse/plugin-linear-genome-view": "^4.1.1",
+    "@jbrowse/core": "^4.1.1"
   },
   "peerDependencies": {
     "react": ">=18.0.0"