@jbrowse/plugin-hic 3.6.5 → 4.0.0

package/esm/LinearHicDisplay/afterAttach.js

@@ -0,0 +1,111 @@
+import { getContainingView, getRpcSessionId, getSession, isAbortException, } from '@jbrowse/core/util';
+import { createStopToken, stopStopToken } from '@jbrowse/core/util/stopToken';
+import { addDisposer, isAlive } from '@jbrowse/mobx-state-tree';
+import { drawCanvasImageData } from '@jbrowse/plugin-linear-genome-view';
+import { autorun, untracked } from 'mobx';
+export function doAfterAttach(self) {
+    ;
+    (async () => {
+        try {
+            const { rpcManager } = getSession(self);
+            const rpcSessionId = getRpcSessionId(self);
+            const { norms } = (await rpcManager.call(rpcSessionId, 'CoreGetInfo', {
+                adapterConfig: self.adapterConfig,
+            }));
+            if (isAlive(self) && norms) {
+                self.setAvailableNormalizations(norms);
+            }
+        }
+        catch (e) {
+            console.error(e);
+            if (isAlive(self)) {
+                getSession(self).notifyError(`${e}`, e);
+            }
+        }
+    })();
+    const performRender = async () => {
+        const view = getContainingView(self);
+        const { bpPerPx, dynamicBlocks } = view;
+        const regions = dynamicBlocks.contentBlocks;
+        if (!regions.length) {
+            return;
+        }
+        const { adapterConfig } = self;
+        const renderProps = self.renderProps();
+        try {
+            const session = getSession(self);
+            const { rpcManager } = session;
+            const rpcSessionId = getRpcSessionId(self);
+            const previousToken = untracked(() => self.renderingStopToken);
+            if (previousToken) {
+                stopStopToken(previousToken);
+            }
+            const stopToken = createStopToken();
+            self.setRenderingStopToken(stopToken);
+            self.setLoading(true);
+            const result = (await rpcManager.call(rpcSessionId, 'CoreRender', {
+                sessionId: rpcSessionId,
+                rendererType: 'HicRenderer',
+                regions: [...regions],
+                adapterConfig,
+                bpPerPx,
+                stopToken,
+                ...renderProps,
+            }, {
+                statusCallback: (msg) => {
+                    if (isAlive(self)) {
+                        self.setStatusMessage(msg);
+                    }
+                },
+            }));
+            if (result.imageData) {
+                self.setRenderingImageData(result.imageData);
+                self.setLastDrawnOffsetPx(view.offsetPx);
+            }
+            self.setFlatbushData(result.flatbush, result.items ?? [], result.maxScore ?? 0, result.yScalar ?? 1);
+        }
+        catch (error) {
+            if (!isAbortException(error)) {
+                if (isAlive(self)) {
+                    self.setError(error);
+                }
+            }
+        }
+        finally {
+            if (isAlive(self)) {
+                self.setRenderingStopToken(undefined);
+                self.setLoading(false);
+            }
+        }
+    };
+    addDisposer(self, autorun(() => {
+        const view = getContainingView(self);
+        if (!view.initialized) {
+            return;
+        }
+        const { dynamicBlocks } = view;
+        const regions = dynamicBlocks.contentBlocks;
+        self.resolution;
+        self.useLogScale;
+        self.colorScheme;
+        self.activeNormalization;
+        self.mode;
+        self.height;
+        if (untracked(() => self.error) || !regions.length) {
+            return;
+        }
+        performRender();
+    }, {
+        delay: 1000,
+        name: 'LinearHicDisplayRender',
+    }));
+    addDisposer(self, autorun(() => {
+        const view = getContainingView(self);
+        if (!view.initialized) {
+            return;
+        }
+        drawCanvasImageData(self.ref, self.renderingImageData);
+    }, {
+        name: 'LinearHicDisplayCanvas',
+    }));
+}

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

@@ -0,0 +1,2 @@
+export { NonBlockCanvasDisplayComponent as default } from '@jbrowse/plugin-linear-genome-view';
+export type { NonBlockCanvasDisplayModel } from '@jbrowse/plugin-linear-genome-view';

package/esm/LinearHicDisplay/components/BaseDisplayComponent.js

@@ -0,0 +1 @@
+export { NonBlockCanvasDisplayComponent as default } from '@jbrowse/plugin-linear-genome-view';

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

@@ -0,0 +1,7 @@
+export default function HicSVGColorLegend({ maxScore, colorScheme, useLogScale, width, legendAreaWidth, }: {
+    maxScore: number;
+    colorScheme?: string;
+    useLogScale?: boolean;
+    width: number;
+    legendAreaWidth?: number;
+}): import("react/jsx-runtime").JSX.Element;

package/esm/LinearHicDisplay/components/HicSVGColorLegend.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { toLocale } from '@jbrowse/core/util';
+import { scaleLinear, scaleLog } from '@mui/x-charts-vendor/d3-scale';
+const colorStops = {
+    juicebox: [
+        { offset: '0%', color: 'rgba(0,0,0,0)' },
+        { offset: '100%', color: 'red' },
+    ],
+    fall: [
+        { offset: '0%', color: 'rgb(255,255,255)' },
+        { offset: '10%', color: 'rgb(255,255,204)' },
+        { offset: '20%', color: 'rgb(255,237,160)' },
+        { offset: '30%', color: 'rgb(254,217,118)' },
+        { offset: '40%', color: 'rgb(254,178,76)' },
+        { offset: '50%', color: 'rgb(253,141,60)' },
+        { offset: '60%', color: 'rgb(252,78,42)' },
+        { offset: '70%', color: 'rgb(227,26,28)' },
+        { offset: '80%', color: 'rgb(189,0,38)' },
+        { offset: '90%', color: 'rgb(128,0,38)' },
+        { offset: '100%', color: 'rgb(0,0,0)' },
+    ],
+    viridis: [
+        { offset: '0%', color: '#440154' },
+        { offset: '11%', color: '#482878' },
+        { offset: '22%', color: '#3e4a89' },
+        { offset: '33%', color: '#31688e' },
+        { offset: '44%', color: '#26828e' },
+        { offset: '55%', color: '#1f9e89' },
+        { offset: '66%', color: '#35b779' },
+        { offset: '77%', color: '#6ece58' },
+        { offset: '88%', color: '#b5de2b' },
+        { offset: '100%', color: '#fde725' },
+    ],
+};
+function getNiceScale(maxScore, useLogScale) {
+    if (useLogScale) {
+        const scale = scaleLog().base(2).domain([1, maxScore]).nice();
+        const [min, max] = scale.domain();
+        return { min, max };
+    }
+    const scale = scaleLinear().domain([0, maxScore]).nice();
+    const [min, max] = scale.domain();
+    return { min, max };
+}
+export default function HicSVGColorLegend({ maxScore, colorScheme = 'juicebox', useLogScale, width, legendAreaWidth, }) {
+    const gradientId = `hic-gradient-${colorScheme}`;
+    const stops = colorStops[colorScheme] || colorStops.juicebox;
+    const { min, max } = getNiceScale(maxScore, useLogScale);
+    const minLabel = min !== undefined ? toLocale(min) : '';
+    const maxLabel = `${max !== undefined ? toLocale(max) : ''}${useLogScale ? ' (log)' : ''}`;
+    const legendWidth = 120;
+    const legendHeight = 40;
+    const barWidth = 100;
+    const barHeight = 12;
+    const padding = 8;
+    const fontSize = 10;
+    const x = legendAreaWidth ? width + 10 : width - legendWidth - 10;
+    const y = 10;
+    return (_jsxs("g", { transform: `translate(${x}, ${y})`, children: [_jsx("defs", { children: _jsx("linearGradient", { id: gradientId, x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: stops.map((stop, idx) => (_jsx("stop", { offset: stop.offset, style: { stopColor: stop.color, stopOpacity: 1 } }, idx))) }) }), _jsx("rect", { x: 0, y: 0, width: legendWidth, height: legendHeight, fill: "rgba(255,255,255,0.9)", stroke: "#ccc", strokeWidth: 1, rx: 4 }), _jsx("rect", { x: padding, y: padding, width: barWidth, height: barHeight, fill: `url(#${gradientId})`, rx: 2 }), _jsx("text", { x: padding, y: padding + barHeight + fontSize + 2, fontSize: fontSize, fill: "black", children: minLabel }), _jsx("text", { x: padding + barWidth, y: padding + barHeight + fontSize + 2, fontSize: fontSize, fill: "black", textAnchor: "end", children: maxLabel })] }));
+}

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

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

package/esm/LinearHicDisplay/components/ReactComponent.js

@@ -0,0 +1,83 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useMemo, useRef, useState } from 'react';
+import BaseTooltip from '@jbrowse/core/ui/BaseTooltip';
+import { getContainingView, reducePrecision } from '@jbrowse/core/util';
+import Flatbush from '@jbrowse/core/util/flatbush';
+import { observer } from 'mobx-react';
+import BaseDisplayComponent from "./BaseDisplayComponent.js";
+import HicColorLegend from "../../HicRenderer/components/HicColorLegend.js";
+const SQRT2 = Math.sqrt(2);
+function HicTooltip({ item, x, y, }) {
+    return (_jsx(BaseTooltip, { clientPoint: { x: x + 15, y }, children: _jsxs("div", { children: ["Score: ", reducePrecision(item.counts)] }) }));
+}
+function Crosshairs({ x, y, yScalar, left, width, height, }) {
+    const dx = y / yScalar;
+    return (_jsx("svg", { style: {
+            position: 'absolute',
+            left,
+            top: 0,
+            width,
+            height,
+            pointerEvents: 'none',
+        }, children: _jsx("g", { stroke: "#000", strokeWidth: "1", fill: "none", children: _jsx("path", { d: `M ${x - dx} 0 L ${x} ${y} L ${x + dx} 0` }) }) }));
+}
+function screenToUnrotated(screenX, screenY, yScalar) {
+    const scaledY = screenY / yScalar;
+    const x = (screenX - scaledY) / SQRT2;
+    const y = (screenX + scaledY) / SQRT2;
+    return { x, y };
+}
+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 containerRef = useRef(null);
+    const [hoveredItem, setHoveredItem] = useState();
+    const [mousePosition, setMousePosition] = useState();
+    const [localMousePos, setLocalMousePos] = useState();
+    const flatbushIndex = useMemo(() => (flatbush ? Flatbush.from(flatbush) : null), [flatbush]);
+    const cb = useCallback((ref) => {
+        model.setRef(ref);
+    }, [model, width, height]);
+    const onMouseMove = useCallback((event) => {
+        if (!containerRef.current || !flatbushIndex || !flatbushItems.length) {
+            setHoveredItem(undefined);
+            setMousePosition(undefined);
+            return;
+        }
+        const rect = containerRef.current.getBoundingClientRect();
+        const screenX = event.clientX - rect.left;
+        const screenY = event.clientY - rect.top;
+        setMousePosition({ x: event.clientX, y: event.clientY });
+        setLocalMousePos({ x: screenX, y: screenY });
+        const { x, y } = screenToUnrotated(screenX, screenY, yScalar);
+        const results = flatbushIndex.search(x - 1, y - 1, x + 1, y + 1);
+        if (results.length > 0) {
+            const item = flatbushItems[results[0]];
+            setHoveredItem(item);
+        }
+        else {
+            setHoveredItem(undefined);
+        }
+    }, [flatbushIndex, flatbushItems, yScalar]);
+    const onMouseLeave = useCallback(() => {
+        setHoveredItem(undefined);
+        setMousePosition(undefined);
+        setLocalMousePos(undefined);
+    }, []);
+    return (_jsxs("div", { ref: containerRef, style: {
+            cursor: hoveredItem && mousePosition ? 'crosshair' : undefined,
+            position: 'relative',
+            width,
+            height,
+        }, onMouseMove: onMouseMove, onMouseLeave: onMouseLeave, children: [_jsx("canvas", { "data-testid": `hic_canvas${drawn && !loading ? '_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] }));
+});
+const LinearHicReactComponent = observer(function LinearHicReactComponent({ model, }) {
+    return (_jsx(BaseDisplayComponent, { model: model, children: _jsx(HicCanvas, { model: model }) }));
+});
+export default LinearHicReactComponent;

package/esm/LinearHicDisplay/configSchema.d.ts

@@ -1,8 +1,13 @@
 import type PluginManager from '@jbrowse/core/PluginManager';
-import type { Instance } from 'mobx-state-tree';
-declare const HicTrackConfigFactory: (pluginManager: PluginManager) => import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
+import type { Instance } from '@jbrowse/mobx-state-tree';
+declare const HicTrackConfigFactory: (pluginManager: PluginManager) => import("node_modules/@jbrowse/core/src/configuration/configurationSchema").ConfigurationSchemaType<{
     renderer: import("@jbrowse/core/configuration").AnyConfigurationSchemaType;
-}, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
+    height: {
+        type: string;
+        defaultValue: number;
+        description: string;
+    };
+}, import("node_modules/@jbrowse/core/src/configuration/configurationSchema").ConfigurationSchemaOptions<import("node_modules/@jbrowse/core/src/configuration/configurationSchema").ConfigurationSchemaType<{
     maxFeatureScreenDensity: {
         type: string;
         description: string;
@@ -29,7 +34,7 @@ declare const HicTrackConfigFactory: (pluginManager: PluginManager) => import("@
         description: string;
         defaultValue: never[];
     };
-}, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, "displayId">>, undefined>>;
+}, import("node_modules/@jbrowse/core/src/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, "displayId">>, undefined>>;
 export type HicTrackConfigModel = ReturnType<typeof HicTrackConfigFactory>;
 export type HicTrackConfig = Instance<HicTrackConfigModel>;
 export default HicTrackConfigFactory;

package/esm/LinearHicDisplay/configSchema.js

@@ -4,6 +4,11 @@ function x() { }
 const HicTrackConfigFactory = (pluginManager) => {
     return ConfigurationSchema('LinearHicDisplay', {
         renderer: pluginManager.getRendererType('HicRenderer').configSchema,
+        height: {
+            type: 'number',
+            defaultValue: 300,
+            description: 'default height for the Hi-C track',
+        },
     }, {
         baseConfiguration: baseLinearDisplayConfigSchema,
         explicitlyTyped: true,

package/esm/LinearHicDisplay/index.js

@@ -1,7 +1,7 @@
+import { lazy } from 'react';
 import { DisplayType } from '@jbrowse/core/pluggableElementTypes';
-import { BaseLinearDisplayComponent } from '@jbrowse/plugin-linear-genome-view';
-import configSchemaFactory from './configSchema';
-import stateModelFactory from './model';
+import configSchemaFactory from "./configSchema.js";
+import stateModelFactory from "./model.js";
 export default function LinearHicDisplayF(pluginManager) {
     pluginManager.addDisplayType(() => {
         const configSchema = configSchemaFactory(pluginManager);
@@ -12,7 +12,7 @@ export default function LinearHicDisplayF(pluginManager) {
             stateModel: stateModelFactory(configSchema),
             trackType: 'HicTrack',
             viewType: 'LinearGenomeView',
-            ReactComponent: BaseLinearDisplayComponent,
+            ReactComponent: lazy(() => import("./components/ReactComponent.js")),
         });
     });
 }