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

package/esm/LinearComparativeView/model.js

@@ -2,13 +2,12 @@ import { lazy } from 'react';
 import BaseViewModel from '@jbrowse/core/pluggableElementTypes/models/BaseViewModel';
 import { avg, getSession, isSessionModelWithWidgets } from '@jbrowse/core/util';
 import { ElementId } from '@jbrowse/core/util/types/mst';
+import { addDisposer, addMiddleware, cast, getPath, types, } from '@jbrowse/mobx-state-tree';
 import FolderOpenIcon from '@mui/icons-material/FolderOpen';
 import { autorun } from 'mobx';
-import { addDisposer, cast, getPath, onAction, types } from 'mobx-state-tree';
 const ReturnToImportFormDialog = lazy(() => import('@jbrowse/core/ui/ReturnToImportFormDialog'));
 function stateModelFactory(pluginManager) {
-    var _a;
-    const LinearSyntenyViewHelper = (_a = pluginManager.getViewType('LinearSyntenyViewHelper')) === null || _a === void 0 ? void 0 : _a.stateModel;
+    const LinearSyntenyViewHelper = pluginManager.getViewType('LinearSyntenyViewHelper')?.stateModel;
     return types
         .compose('LinearComparativeView', BaseViewModel, types.model({
         id: ElementId,
@@ -25,6 +24,7 @@ function stateModelFactory(pluginManager) {
     }))
         .volatile(() => ({
         width: undefined,
+        isLoading: false,
     }))
         .views(self => ({
         get initialized() {
@@ -40,41 +40,49 @@ function stateModelFactory(pluginManager) {
         get assemblyNames() {
             return [...new Set(self.views.flatMap(v => v.assemblyNames))];
         },
+        get loadingMessage() {
+            return this.showLoading ? 'Loading' : undefined;
+        },
+        get showLoading() {
+            return self.isLoading || (!this.initialized && self.views.length > 0);
+        },
     }))
         .actions(self => ({
         afterAttach() {
-            const actions = new Set([
-                'horizontalScroll',
-                'zoomTo',
-                'setScaleFactor',
-            ]);
-            addDisposer(self, onAction(self, param => {
-                if (self.linkViews) {
-                    const { name, path, args } = param;
-                    if (actions.has(name) && path) {
-                        this.onSubviewAction(name, path, args);
+            addDisposer(self, addMiddleware(self, (rawCall, next) => {
+                if (rawCall.type === 'action' && rawCall.id === rawCall.rootId) {
+                    const syncActions = [
+                        'horizontalScroll',
+                        'zoomTo',
+                        'setScaleFactor',
+                    ];
+                    if (self.linkViews && syncActions.includes(rawCall.name)) {
+                        const sourcePath = getPath(rawCall.context);
+                        next(rawCall);
+                        for (const view of self.views) {
+                            const viewPath = getPath(view);
+                            if (viewPath !== sourcePath) {
+                                view[rawCall.name](rawCall.args[0]);
+                            }
+                        }
+                        return;
                     }
                 }
+                next(rawCall);
             }));
         },
         beforeDestroy() {
-            var _a;
             const session = getSession(self);
             for (const name of self.assemblyNames) {
-                (_a = session.removeTemporaryAssembly) === null || _a === void 0 ? void 0 : _a.call(session, name);
-            }
-        },
-        onSubviewAction(actionName, path, args) {
-            for (const view of self.views) {
-                const ret = getPath(view);
-                if (!ret.endsWith(path)) {
-                    view[actionName](args === null || args === void 0 ? void 0 : args[0]);
-                }
+                session.removeTemporaryAssembly?.(name);
             }
         },
         setWidth(newWidth) {
             self.width = newWidth;
         },
+        setIsLoading(arg) {
+            self.isLoading = arg;
+        },
         setViews(views) {
             self.views = cast(views);
             const levels = [];
@@ -111,8 +119,7 @@ function stateModelFactory(pluginManager) {
             throw new Error(`invalid track selector type ${self.trackSelectorType}`);
         },
         toggleTrack(trackId, level = 0) {
-            var _a;
-            (_a = self.levels[level]) === null || _a === void 0 ? void 0 : _a.toggleTrack(trackId);
+            self.levels[level]?.toggleTrack(trackId);
         },
         showTrack(trackId, level = 0, initialSnapshot = {}) {
             if (!self.levels[level]) {
@@ -121,8 +128,7 @@ function stateModelFactory(pluginManager) {
             self.levels[level].showTrack(trackId, initialSnapshot);
         },
         hideTrack(trackId, level = 0) {
-            var _a;
-            (_a = self.levels[level]) === null || _a === void 0 ? void 0 : _a.hideTrack(trackId);
+            self.levels[level]?.hideTrack(trackId);
         },
         squareView() {
             const average = avg(self.views.map(v => v.bpPerPx));
@@ -180,13 +186,13 @@ function stateModelFactory(pluginManager) {
     }))
         .actions(self => ({
         afterAttach() {
-            addDisposer(self, autorun(() => {
+            addDisposer(self, autorun(function comparativeViewWidthAutorun() {
                 if (self.width) {
                     for (const view of self.views) {
                         view.setWidth(self.width);
                     }
                 }
-            }));
+            }, { name: 'ComparativeViewWidth' }));
         },
     }))
         .preProcessSnapshot(snap => {
@@ -195,6 +201,21 @@ function stateModelFactory(pluginManager) {
             ...rest,
             levels,
         };
+    })
+        .postProcessSnapshot(snap => {
+        if (!snap) {
+            return snap;
+        }
+        const { trackSelectorType, showIntraviewLinks, linkViews, interactiveOverlay, showDynamicControls, viewTrackConfigs, ...rest } = snap;
+        return {
+            ...rest,
+            ...(trackSelectorType !== 'hierarchical' ? { trackSelectorType } : {}),
+            ...(!showIntraviewLinks ? { showIntraviewLinks } : {}),
+            ...(linkViews ? { linkViews } : {}),
+            ...(interactiveOverlay ? { interactiveOverlay } : {}),
+            ...(!showDynamicControls ? { showDynamicControls } : {}),
+            ...(viewTrackConfigs.length ? { viewTrackConfigs } : {}),
+        };
     });
 }
 export default stateModelFactory;

package/esm/LinearReadVsRef/LinearReadVsRef.js

@@ -4,9 +4,9 @@ import { getConf } from '@jbrowse/core/configuration';
 import { Dialog } from '@jbrowse/core/ui';
 import { gatherOverlaps, getContainingView, getSession, } from '@jbrowse/core/util';
 import { getRpcSessionId } from '@jbrowse/core/util/tracks';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
 import { MismatchParser } from '@jbrowse/plugin-alignments';
 import { Button, CircularProgress, DialogActions, DialogContent, TextField, Typography, } from '@mui/material';
-import { makeStyles } from 'tss-react/mui';
 const { featurizeSA, getClip, getLength, getLengthSansClipping, getTag } = MismatchParser;
 const useStyles = makeStyles()({
     root: {
@@ -63,7 +63,6 @@ export default function ReadVsRefDialog({ track, feature: preFeature, handleClos
         })();
     }, [preFeature, track]);
     function onSubmit() {
-        var _a;
         try {
             if (!primaryFeature) {
                 return;
@@ -76,7 +75,7 @@ export default function ReadVsRefDialog({ track, feature: preFeature, handleClos
             const origStrand = feature.get('strand');
             const SA = getTag(feature, 'SA') || '';
             const readName = feature.get('name');
-            const clipPos = getClip(cigar, 1);
+            const clipLengthAtStartOfRead = getClip(cigar, 1);
             const readAssembly = `${readName}_assembly_${Date.now()}`;
             const [trackAssembly] = getConf(track, 'assemblyNames');
             const assemblyNames = [trackAssembly, readAssembly];
@@ -89,12 +88,12 @@ export default function ReadVsRefDialog({ track, feature: preFeature, handleClos
             }
             const suppAlns = featurizeSA(SA, feature.id(), origStrand, readName, true);
             const feat = feature.toJSON();
-            feat.clipPos = clipPos;
+            feat.clipLengthAtStartOfRead = clipLengthAtStartOfRead;
             feat.strand = 1;
             feat.mate = {
                 refName: readName,
-                start: clipPos,
-                end: clipPos + getLengthSansClipping(cigar),
+                start: clipLengthAtStartOfRead,
+                end: clipLengthAtStartOfRead + getLengthSansClipping(cigar),
             };
             const totalLength = flags & 2048 ? getLength(suppAlns[0].CIGAR) : getLength(cigar);
             const features = [feat, ...suppAlns];
@@ -104,7 +103,7 @@ export default function ReadVsRefDialog({ track, feature: preFeature, handleClos
                 f.mate.syntenyId = idx;
                 f.mate.uniqueId = `${f.uniqueId}_mate`;
             }
-            features.sort((a, b) => a.clipPos - b.clipPos);
+            features.sort((a, b) => a.clipLengthAtStartOfRead - b.clipLengthAtStartOfRead);
             const featSeq = feature.get('seq');
             const configFeatureStore = [...features, ...features.map(f => f.mate)];
             const expand = 2 * windowSize;
@@ -117,7 +116,7 @@ export default function ReadVsRefDialog({ track, feature: preFeature, handleClos
                 end: f.end + windowSize,
                 assemblyName: trackAssembly,
             })));
-            (_a = session.addTemporaryAssembly) === null || _a === void 0 ? void 0 : _a.call(session, {
+            session.addTemporaryAssembly?.({
                 name: readAssembly,
                 sequence: {
                     type: 'ReferenceSequenceTrack',
@@ -161,7 +160,7 @@ export default function ReadVsRefDialog({ track, feature: preFeature, handleClos
                                         showReverse: true,
                                         showTranslation: false,
                                         height: 35,
-                                        configuration: `${seqTrackId}-LinearReferenceSequenceDisplay`,
+                                        configuration: `${sequenceTrackConf.trackId}-LinearReferenceSequenceDisplay`,
                                     },
                                 ],
                             },

package/esm/LinearReadVsRef/index.js

@@ -1,7 +1,7 @@
 import { lazy } from 'react';
 import { getContainingTrack, getSession } from '@jbrowse/core/util';
 import AddIcon from '@mui/icons-material/Add';
-const ReadVsRefDialog = lazy(() => import('./LinearReadVsRef'));
+const ReadVsRefDialog = lazy(() => import("./LinearReadVsRef.js"));
 function isDisplay(elt) {
     return elt.name === 'LinearPileupDisplay';
 }

package/esm/LinearSyntenyDisplay/afterAttach.d.ts

@@ -1,2 +1,2 @@
-import type { LinearSyntenyDisplayModel } from './model';
+import type { LinearSyntenyDisplayModel } from './model.ts';
 export declare function doAfterAttach(self: LinearSyntenyDisplayModel): void;

package/esm/LinearSyntenyDisplay/afterAttach.js

@@ -1,19 +1,18 @@
 import { getContainingView, getSession } from '@jbrowse/core/util';
 import { bpToPx } from '@jbrowse/core/util/Base1DUtils';
+import { addDisposer, getSnapshot } from '@jbrowse/mobx-state-tree';
 import { MismatchParser } from '@jbrowse/plugin-alignments';
 import { autorun, reaction } from 'mobx';
-import { addDisposer, getSnapshot } from 'mobx-state-tree';
-import { drawCigarClickMap, drawMouseoverClickMap, drawRef, } from './drawSynteny';
+import { drawCigarClickMap, drawMouseoverClickMap, drawRef, } from "./drawSynteny.js";
 export function doAfterAttach(self) {
-    addDisposer(self, autorun(() => {
-        var _a, _b;
+    addDisposer(self, autorun(function syntenyDrawAutorun() {
         const view = getContainingView(self);
         if (!view.initialized ||
             !view.views.every(a => a.displayedRegions.length > 0 && a.initialized)) {
             return;
         }
-        const ctx1 = (_a = self.mainCanvas) === null || _a === void 0 ? void 0 : _a.getContext('2d');
-        const ctx3 = (_b = self.cigarClickMapCanvas) === null || _b === void 0 ? void 0 : _b.getContext('2d');
+        const ctx1 = self.mainCanvas?.getContext('2d');
+        const ctx3 = self.cigarClickMapCanvas?.getContext('2d');
         if (!ctx1 || !ctx3) {
             return;
         }
@@ -23,8 +22,8 @@ export function doAfterAttach(self) {
         ctx1.clearRect(0, 0, width, height);
         drawRef(self, ctx1);
         drawCigarClickMap(self, ctx3);
-    }));
-    addDisposer(self, autorun(() => {
+    }, { name: 'SyntenyDraw' }));
+    addDisposer(self, autorun(function syntenyMouseoverAutorun() {
         const view = getContainingView(self);
         if (!view.initialized ||
             !view.views.every(a => a.displayedRegions.length > 0 && a.initialized)) {
@@ -32,7 +31,7 @@ export function doAfterAttach(self) {
         }
         const { clickId, mouseoverId } = self;
         drawMouseoverClickMap(self);
-    }));
+    }, { name: 'SyntenyMouseover' }));
     addDisposer(self, reaction(() => {
         const view = getContainingView(self);
         return {
@@ -72,8 +71,8 @@ export function doAfterAttach(self) {
             const a2 = assemblyManager.get(mate.assemblyName);
             const r1 = f.get('refName');
             const r2 = mate.refName;
-            const ref1 = (a1 === null || a1 === void 0 ? void 0 : a1.getCanonicalRefName(r1)) || r1;
-            const ref2 = (a2 === null || a2 === void 0 ? void 0 : a2.getCanonicalRefName(r2)) || r2;
+            const ref1 = a1?.getCanonicalRefName(r1) || r1;
+            const ref2 = a2?.getCanonicalRefName(r2) || r2;
             const v1 = viewSnaps[level];
             const v2 = viewSnaps[level + 1];
             const p11 = bpToPx({ self: v1, refName: ref1, coord: f1s });

package/esm/LinearSyntenyDisplay/components/BlockError.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { makeStyles } from 'tss-react/mui';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
 const useStyles = makeStyles()({
     blockError: {
         background: '#f1f1f1',

package/esm/LinearSyntenyDisplay/components/BlockMessage.js

@@ -1,19 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { makeStyles } from 'tss-react/mui';
-const useStyles = makeStyles()(theme => {
-    const bg = theme.palette.action.disabledBackground;
-    return {
-        loading: {
-            paddingLeft: '0.6em',
-            backgroundColor: theme.palette.background.default,
-            backgroundImage: `repeating-linear-gradient(45deg, transparent, transparent 5px, ${bg} 5px, ${bg} 10px)`,
-            textAlign: 'center',
-        },
-        blockMessage: {
-            background: '#f1f1f1',
-            padding: 10,
-        },
-    };
+import { makeStyles } from '@jbrowse/core/util/tss-react';
+const useStyles = makeStyles()({
+    blockMessage: {
+        background: '#f1f1f1',
+        padding: 10,
+    },
 });
 export default function BlockMessage({ messageText }) {
     const { classes } = useStyles();

package/esm/LinearSyntenyDisplay/components/Component.d.ts

@@ -1,4 +1,4 @@
-import type { LinearSyntenyDisplayModel } from '../model';
+import type { LinearSyntenyDisplayModel } from '../model.ts';
 declare const ServerSideRenderedBlockContent: ({ model, }: {
     model: LinearSyntenyDisplayModel;
 }) => import("react/jsx-runtime").JSX.Element;

package/esm/LinearSyntenyDisplay/components/Component.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { observer } from 'mobx-react';
-import BlockError from './BlockError';
-import BlockMessage from './BlockMessage';
-import LinearSyntenyRendering from './LinearSyntenyRendering';
-import LoadingMessage from './LoadingMessage';
-const ServerSideRenderedBlockContent = observer(function ({ model, }) {
+import BlockError from "./BlockError.js";
+import BlockMessage from "./BlockMessage.js";
+import LinearSyntenyRendering from "./LinearSyntenyRendering.js";
+import LoadingMessage from "./LoadingMessage.js";
+const ServerSideRenderedBlockContent = observer(function ServerSideRenderedBlockContent({ model, }) {
     if (model.error) {
         return _jsx(BlockError, { error: model.error });
     }

package/esm/LinearSyntenyDisplay/components/LinearSyntenyRendering.d.ts

@@ -1,4 +1,4 @@
-import type { LinearSyntenyDisplayModel } from '../model';
+import type { LinearSyntenyDisplayModel } from '../model.ts';
 declare const LinearSyntenyRendering: ({ model, }: {
     model: LinearSyntenyDisplayModel;
 }) => import("react/jsx-runtime").JSX.Element;

package/esm/LinearSyntenyDisplay/components/LinearSyntenyRendering.js

@@ -1,13 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { lazy, useCallback, useEffect, useRef, useState } from 'react';
 import { getContainingView } from '@jbrowse/core/util';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
 import { transaction } from 'mobx';
 import { observer } from 'mobx-react';
-import { makeStyles } from 'tss-react/mui';
-import { MAX_COLOR_RANGE, getId } from '../drawSynteny';
-import SyntenyContextMenu from './SyntenyContextMenu';
-import { getTooltip, onSynClick, onSynContextClick } from './util';
-const SyntenyTooltip = lazy(() => import('./SyntenyTooltip'));
+import { MAX_COLOR_RANGE, getId } from "../drawSynteny.js";
+import SyntenyContextMenu from "./SyntenyContextMenu.js";
+import { getTooltip, onSynClick, onSynContextClick } from "./util.js";
+const SyntenyTooltip = lazy(() => import("./SyntenyTooltip.js"));
 const useStyles = makeStyles()({
     pix: {
         imageRendering: 'pixelated',
@@ -26,7 +26,7 @@ const useStyles = makeStyles()({
         position: 'absolute',
     },
 });
-const LinearSyntenyRendering = observer(function ({ model, }) {
+const LinearSyntenyRendering = observer(function LinearSyntenyRendering({ model, }) {
     const { classes } = useStyles();
     const { mouseoverId, height } = model;
     const xOffset = useRef(0);
@@ -50,7 +50,6 @@ const LinearSyntenyRendering = observer(function ({ model, }) {
         mainSyntenyCanvasRefp.current = ref;
     }, [model, height, width]);
     useEffect(() => {
-        var _a;
         function onWheel(event) {
             event.preventDefault();
             if (event.ctrlKey) {
@@ -62,13 +61,12 @@ const LinearSyntenyRendering = observer(function ({ model, }) {
                     clearTimeout(timeout.current);
                 }
                 timeout.current = setTimeout(() => {
-                    var _a;
                     for (const v of view.views) {
                         v.setScaleFactor(1);
                         v.zoomTo(delta.current > 0
                             ? v.bpPerPx * (1 + delta.current)
                             : v.bpPerPx / (1 - delta.current), event.clientX -
-                            (((_a = mainSyntenyCanvasRefp.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().left) ||
+                            (mainSyntenyCanvasRefp.current?.getBoundingClientRect().left ||
                                 0));
                     }
                     delta.current = 0;
@@ -92,10 +90,9 @@ const LinearSyntenyRendering = observer(function ({ model, }) {
                 }
             }
         }
-        (_a = mainSyntenyCanvasRefp.current) === null || _a === void 0 ? void 0 : _a.addEventListener('wheel', onWheel);
+        mainSyntenyCanvasRefp.current?.addEventListener('wheel', onWheel);
         return () => {
-            var _a;
-            (_a = mainSyntenyCanvasRefp.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('wheel', onWheel);
+            mainSyntenyCanvasRefp.current?.removeEventListener('wheel', onWheel);
         };
     }, [model, height, width]);
     const clickMapCanvasRef = useCallback((ref) => {
@@ -105,7 +102,6 @@ const LinearSyntenyRendering = observer(function ({ model, }) {
         model.setCigarClickMapCanvasRef(ref);
     }, [model, height, width]);
     return (_jsxs("div", { className: classes.rel, children: [_jsx("canvas", { ref: mouseoverDetectionCanvasRef, width: width, height: height, className: classes.mouseoverCanvas }), _jsx("canvas", { ref: mainSyntenyCanvasRef, onMouseMove: event => {
-                    var _a;
                     if (mouseCurrDownX !== undefined) {
                         xOffset.current += mouseCurrDownX - event.clientX;
                         setMouseCurrDownX(event.clientX);
@@ -143,7 +139,7 @@ const LinearSyntenyRendering = observer(function ({ model, }) {
                         const [r2, g2, b2] = ctx2.getImageData(x, y, 1, 1).data;
                         const unitMultiplier = Math.floor(MAX_COLOR_RANGE / model.numFeats);
                         const id = getId(r1, g1, b1, unitMultiplier);
-                        model.setMouseoverId((_a = model.featPositions[id]) === null || _a === void 0 ? void 0 : _a.f.id());
+                        model.setMouseoverId(model.featPositions[id]?.f.id());
                         if (id === -1) {
                             setTooltip('');
                         }

package/esm/LinearSyntenyDisplay/components/LoadingMessage.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { LoadingEllipses } from '@jbrowse/core/ui';
-import { makeStyles } from 'tss-react/mui';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
 const useStyles = makeStyles()(theme => {
     const bg = theme.palette.action.disabledBackground;
     return {

package/esm/LinearSyntenyDisplay/components/SyntenyContextMenu.d.ts

@@ -1,4 +1,4 @@
-import type { LinearSyntenyDisplayModel } from '../model';
+import type { LinearSyntenyDisplayModel } from '../model.ts';
 import type { Feature } from '@jbrowse/core/util';
 interface ClickCoord {
     clientX: number;

package/esm/LinearSyntenyDisplay/components/SyntenyContextMenu.js

@@ -1,30 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Menu } from '@jbrowse/core/ui';
-import { getContainingView, getSession } from '@jbrowse/core/util';
+import { getContainingView } from '@jbrowse/core/util';
 export default function SyntenyContextMenu({ model, onClose, anchorEl, }) {
     const view = getContainingView(model);
     const { clientX, clientY, feature } = anchorEl;
-    return (_jsx(Menu, { onMenuItemClick: (event, callback) => {
-            callback(event);
+    return (_jsx(Menu, { onMenuItemClick: (_, callback) => {
+            callback();
             onClose();
-        }, anchorEl: {
-            nodeType: 1,
-            getBoundingClientRect: () => {
-                const x = clientX;
-                const y = clientY;
-                return {
-                    top: y,
-                    left: x,
-                    bottom: y,
-                    right: x,
-                    width: 0,
-                    height: 0,
-                    x,
-                    y,
-                    toJSON() { },
-                };
-            },
-        }, onClose: onClose, open: Boolean(anchorEl), menuItems: [
+        }, anchorReference: "anchorPosition", anchorPosition: { top: clientY, left: clientX }, onClose: onClose, open: Boolean(anchorEl), menuItems: [
             {
                 label: 'Center on feature',
                 onClick: () => {
@@ -35,18 +18,10 @@ export default function SyntenyContextMenu({ model, onClose, anchorEl, }) {
                     const mate = f.get('mate');
                     const l1 = view.views[model.level];
                     const l2 = view.views[model.level + 1];
-                    const l1asm = l1.assemblyNames[0];
-                    const l2asm = l2.assemblyNames[0];
-                    l1.navToLocString(`${refName}:${start}-${end}`).catch((e) => {
-                        const err = `${l1asm}:${e}`;
-                        console.error(l1asm, err);
-                        getSession(model).notifyError(err, e);
-                    });
-                    l2.navToLocString(`${mate.refName}:${mate.start}-${mate.end}`).catch((e) => {
-                        const err = `${l2asm}:${e}`;
-                        console.error(l2asm, err);
-                        getSession(model).notifyError(err, e);
-                    });
+                    const center1 = (start + end) / 2;
+                    const center2 = (mate.start + mate.end) / 2;
+                    l1.centerAt(center1, refName);
+                    l2.centerAt(center2, mate.refName);
                 },
             },
         ] }));

package/esm/LinearSyntenyDisplay/components/SyntenyTooltip.d.ts

@@ -1,4 +1,4 @@
-declare const SyntenyTooltip: ({ title }: {
+declare const SyntenyTooltip: ({ title, }: {
     title: string;
 }) => import("react/jsx-runtime").JSX.Element | null;
 export default SyntenyTooltip;

package/esm/LinearSyntenyDisplay/components/SyntenyTooltip.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { SanitizedHTML } from '@jbrowse/core/ui';
 import BaseTooltip from '@jbrowse/core/ui/BaseTooltip';
 import { observer } from 'mobx-react';
-const SyntenyTooltip = observer(function ({ title }) {
+const SyntenyTooltip = observer(function SyntenyTooltip({ title, }) {
     return title ? (_jsx(BaseTooltip, { children: _jsx(SanitizedHTML, { html: title }) })) : null;
 });
 export default SyntenyTooltip;

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

@@ -1,5 +1,5 @@
 import type React from 'react';
-import type { LinearSyntenyDisplayModel } from '../model';
+import type { LinearSyntenyDisplayModel } from '../model.ts';
 import type { Feature } from '@jbrowse/core/util';
 interface Pos {
     offsetPx: number;
@@ -35,7 +35,7 @@ export declare function draw(ctx: CanvasRenderingContext2D, x1: number, x2: numb
 export declare function drawLocationMarkers(ctx: CanvasRenderingContext2D, x1: number, x2: number, y1: number, x3: number, x4: number, y2: number, mid: number, bpPerPx1: number, bpPerPx2: number, drawCurves?: boolean): void;
 export declare function drawBox(ctx: CanvasRenderingContext2D, x1: number, x2: number, y1: number, x3: number, x4: number, y2: number): void;
 export declare function drawBezierBox(ctx: CanvasRenderingContext2D, x1: number, x2: number, y1: number, x3: number, x4: number, y2: number, mid: number): void;
-export declare function onSynClick(event: React.MouseEvent, model: LinearSyntenyDisplayModel): import("../model").FeatPos | undefined;
+export declare function onSynClick(event: React.MouseEvent, model: LinearSyntenyDisplayModel): import("../model.ts").FeatPos | undefined;
 export declare function onSynContextClick(event: React.MouseEvent, model: LinearSyntenyDisplayModel, setAnchorEl: (arg: ClickCoord) => void): void;
 export declare function getTooltip({ feature, cigarOp, cigarOpLen, }: {
     feature: Feature;

package/esm/LinearSyntenyDisplay/components/util.js

@@ -1,5 +1,5 @@
 import { assembleLocString, doesIntersect2, getContainingTrack, getContainingView, getSession, isSessionModelWithWidgets, toLocale, } from '@jbrowse/core/util';
-import { MAX_COLOR_RANGE, getId } from '../drawSynteny';
+import { MAX_COLOR_RANGE, getId } from "../drawSynteny.js";
 export function drawMatchSimple({ feature, ctx, offsets, level, cb, height, drawCurves, oobLimit, viewWidth, hideTiny, }) {
     const { p11, p12, p21, p22 } = feature;
     const x11 = p11.offsetPx - offsets[level];
@@ -177,8 +177,8 @@ export function getTooltip({ feature, cigarOp, cigarOpLen, }) {
         `Loc1: ${assembleLocString(f1)}`,
         `Loc2: ${assembleLocString(f2)}`,
         `Inverted: ${f1.strand === -1}`,
-        `Query len: ${l1.toLocaleString('en-US')}`,
-        `Target len: ${l2.toLocaleString('en-US')}`,
+        `Query len: ${toLocale(l1)}`,
+        `Target len: ${toLocale(l2)}`,
         identity ? `Identity: ${identity.toPrecision(2)}` : '',
         cigarOp ? `CIGAR operator: ${toLocale(+cigarOpLen)}${cigarOp}` : '',
         n1 ? `Name 1: ${n1}` : '',

package/esm/LinearSyntenyDisplay/configSchemaF.d.ts

@@ -1,5 +1,5 @@
 import type PluginManager from '@jbrowse/core/PluginManager';
-declare function configSchemaFactory(pluginManager: PluginManager): import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
+declare function configSchemaFactory(pluginManager: PluginManager): import("node_modules/@jbrowse/core/src/configuration/configurationSchema.ts").ConfigurationSchemaType<{
     trackIds: {
         type: string;
         defaultValue: never[];
@@ -8,5 +8,5 @@ declare function configSchemaFactory(pluginManager: PluginManager): import("@jbr
         type: string;
         defaultValue: boolean;
     };
-}, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{}, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, "displayId">>, undefined>>;
+}, import("node_modules/@jbrowse/core/src/configuration/configurationSchema.ts").ConfigurationSchemaOptions<import("node_modules/@jbrowse/core/src/configuration/configurationSchema.ts").ConfigurationSchemaType<{}, import("node_modules/@jbrowse/core/src/configuration/configurationSchema.ts").ConfigurationSchemaOptions<undefined, "displayId">>, undefined>>;
 export default configSchemaFactory;

package/esm/LinearSyntenyDisplay/configSchemaF.js

@@ -1,5 +1,5 @@
 import { ConfigurationSchema } from '@jbrowse/core/configuration';
-import baseConfigFactory from '../LinearComparativeDisplay/configSchemaF';
+import baseConfigFactory from "../LinearComparativeDisplay/configSchemaF.js";
 function configSchemaFactory(pluginManager) {
     return ConfigurationSchema('LinearSyntenyDisplay', {
         trackIds: {

package/esm/LinearSyntenyDisplay/drawMouseoverClickMap.d.ts

@@ -0,0 +1,2 @@
+import type { LinearSyntenyDisplayModel } from './model.ts';
+export declare function drawMouseoverClickMap(model: LinearSyntenyDisplayModel): void;

package/esm/LinearSyntenyDisplay/drawMouseoverClickMap.js

@@ -0,0 +1,53 @@
+import { getContainingView } from '@jbrowse/core/util';
+import { drawMatchSimple } from "./components/util.js";
+const oobLimit = 1600;
+const fillCallback = (ctx) => {
+    ctx.fill();
+};
+const strokeCallback = (ctx) => {
+    ctx.stroke();
+};
+export function drawMouseoverClickMap(model) {
+    const { level, clickId, mouseoverId } = model;
+    const view = getContainingView(model);
+    const drawCurves = view.drawCurves;
+    const height = model.height;
+    const width = view.width;
+    const ctx = model.mouseoverCanvas?.getContext('2d');
+    const offsets = view.views.map(v => v.offsetPx);
+    if (!ctx) {
+        return;
+    }
+    ctx.resetTransform();
+    ctx.clearRect(0, 0, width, height);
+    ctx.strokeStyle = 'rgba(0, 0, 0, 0.9)';
+    ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
+    const feature1 = model.featMap[mouseoverId || ''];
+    if (feature1) {
+        drawMatchSimple({
+            cb: fillCallback,
+            feature: feature1,
+            level,
+            ctx,
+            oobLimit,
+            viewWidth: width,
+            drawCurves,
+            offsets,
+            height,
+        });
+    }
+    const feature2 = model.featMap[clickId || ''];
+    if (feature2) {
+        drawMatchSimple({
+            cb: strokeCallback,
+            feature: feature2,
+            ctx,
+            level,
+            oobLimit,
+            viewWidth: width,
+            drawCurves,
+            offsets,
+            height,
+        });
+    }
+}