@jbrowse/plugin-linear-comparative-view 2.17.0 → 3.0.0

package/esm/LinearComparativeView/model.js

@@ -1,97 +1,61 @@
 import { lazy } from 'react';
-import { addDisposer, cast, getPath, types, } from 'mobx-state-tree';
-import { autorun } from 'mobx';
-// jbrowse
 import BaseViewModel from '@jbrowse/core/pluggableElementTypes/models/BaseViewModel';
-import { getSession, isSessionModelWithWidgets, avg } from '@jbrowse/core/util';
+import { avg, getSession, isSessionModelWithWidgets } from '@jbrowse/core/util';
 import { ElementId } from '@jbrowse/core/util/types/mst';
-// icons
 import FolderOpenIcon from '@mui/icons-material/FolderOpen';
-// lazies
+import { autorun } from 'mobx';
+import { addDisposer, cast, getPath, onAction, types } from 'mobx-state-tree';
 const ReturnToImportFormDialog = lazy(() => import('@jbrowse/core/ui/ReturnToImportFormDialog'));
-/**
- * #stateModel LinearComparativeView
- * extends
- * - [BaseViewModel](../baseviewmodel)
- */
 function stateModelFactory(pluginManager) {
     var _a;
     const LinearSyntenyViewHelper = (_a = pluginManager.getViewType('LinearSyntenyViewHelper')) === null || _a === void 0 ? void 0 : _a.stateModel;
     return types
         .compose('LinearComparativeView', BaseViewModel, types.model({
-        /**
-         * #property
-         */
         id: ElementId,
-        /**
-         * #property
-         */
         type: types.literal('LinearComparativeView'),
-        /**
-         * #property
-         */
         trackSelectorType: 'hierarchical',
-        /**
-         * #property
-         */
         showIntraviewLinks: true,
-        /**
-         * #property
-         */
-        interactToggled: false,
-        /**
-         * #property
-         */
+        linkViews: false,
+        interactiveOverlay: false,
         levels: types.array(LinearSyntenyViewHelper),
-        /**
-         * #property
-         * currently this is limited to an array of two
-         */
         views: types.array(pluginManager.getViewType('LinearGenomeView')
             .stateModel),
-        /**
-         * #property
-         * this represents tracks specific to this view specifically used for
-         * read vs ref dotplots where this track would not really apply
-         * elsewhere
-         */
         viewTrackConfigs: types.array(pluginManager.pluggableConfigSchemaType('track')),
     }))
         .volatile(() => ({
-        /**
-         * #volatile
-         */
         width: undefined,
     }))
         .views(self => ({
-        /**
-         * #getter
-         */
         get initialized() {
-            return (
-            // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-            self.width !== undefined &&
+            return (self.width !== undefined &&
                 self.views.length > 0 &&
                 self.views.every(view => view.initialized));
         },
-        /**
-         * #getter
-         */
         get refNames() {
             return self.views.map(v => [
                 ...new Set(v.staticBlocks.map(m => m.refName)),
             ]);
         },
-        /**
-         * #getter
-         */
         get assemblyNames() {
             return [...new Set(self.views.flatMap(v => v.assemblyNames))];
         },
     }))
         .actions(self => ({
-        // automatically removes session assemblies associated with this view
-        // e.g. read vs ref
+        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);
+                    }
+                }
+            }));
+        },
         beforeDestroy() {
             var _a;
             const session = getSession(self);
@@ -103,40 +67,27 @@ function stateModelFactory(pluginManager) {
             self.views.forEach(view => {
                 const ret = getPath(view);
                 if (!ret.endsWith(path)) {
-                    // @ts-expect-error
                     view[actionName](args === null || args === void 0 ? void 0 : args[0]);
                 }
             });
         },
-        /**
-         * #action
-         */
         setWidth(newWidth) {
             self.width = newWidth;
         },
-        /**
-         * #action
-         */
         setViews(views) {
             self.views = cast(views);
         },
-        /**
-         * #action
-         */
         removeView(view) {
             self.views.remove(view);
         },
-        /**
-         * #action
-         */
         setLevelHeight(newHeight, level = 0) {
             const l = self.levels[level];
             l.setHeight(newHeight);
             return l.height;
         },
-        /**
-         * #action
-         */
+        setLinkViews(arg) {
+            self.linkViews = arg;
+        },
         activateTrackSelector(level) {
             if (self.trackSelectorType === 'hierarchical') {
                 const session = getSession(self);
@@ -150,32 +101,20 @@ function stateModelFactory(pluginManager) {
             }
             throw new Error(`invalid track selector type ${self.trackSelectorType}`);
         },
-        /**
-         * #action
-         */
         toggleTrack(trackId, level = 0) {
             var _a;
             (_a = self.levels[level]) === null || _a === void 0 ? void 0 : _a.toggleTrack(trackId);
         },
-        /**
-         * #action
-         */
         showTrack(trackId, level = 0, initialSnapshot = {}) {
             if (!self.levels[level]) {
                 self.levels[level] = cast({ level });
             }
             self.levels[level].showTrack(trackId, initialSnapshot);
         },
-        /**
-         * #action
-         */
         hideTrack(trackId, level = 0) {
             var _a;
             (_a = self.levels[level]) === null || _a === void 0 ? void 0 : _a.hideTrack(trackId);
         },
-        /**
-         * #action
-         */
         squareView() {
             const average = avg(self.views.map(v => v.bpPerPx));
             for (const view of self.views) {
@@ -186,28 +125,17 @@ function stateModelFactory(pluginManager) {
                 }
             }
         },
-        /**
-         * #action
-         */
         clearView() {
             self.views = cast([]);
             self.levels = cast([]);
         },
     }))
         .views(() => ({
-        /**
-         * #method
-         * includes a subset of view menu options because the full list is a
-         * little overwhelming. overridden by subclasses
-         */
         headerMenuItems() {
             return [];
         },
     }))
         .views(self => ({
-        /**
-         * #method
-         */
         menuItems() {
             return [
                 {
@@ -225,9 +153,6 @@ function stateModelFactory(pluginManager) {
                 },
             ];
         },
-        /**
-         * #method
-         */
         rubberBandMenuItems() {
             return [
                 {
@@ -256,8 +181,6 @@ function stateModelFactory(pluginManager) {
         },
     }))
         .preProcessSnapshot(snap => {
-        // @ts-expect-error
-        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
         const { tracks, levels = [{ tracks, level: 0 }], ...rest } = snap || {};
         return {
             ...rest,

package/esm/LinearReadVsRef/LinearReadVsRef.d.ts

@@ -1,7 +1,6 @@
-import React from 'react';
-import { Feature } from '@jbrowse/core/util';
+import type { Feature } from '@jbrowse/core/util';
 export default function ReadVsRefDialog({ track, feature: preFeature, handleClose, }: {
     feature: Feature;
     handleClose: () => void;
     track: any;
-}): React.JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;

package/esm/LinearReadVsRef/LinearReadVsRef.js

@@ -1,12 +1,12 @@
-import React, { useEffect, useState } from 'react';
-import { Button, CircularProgress, DialogActions, DialogContent, TextField, Typography, } from '@mui/material';
-import { Dialog } from '@jbrowse/core/ui';
-import { makeStyles } from 'tss-react/mui';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
 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 { getSession, getContainingView, gatherOverlaps, } from '@jbrowse/core/util';
-// locals
 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: {
@@ -15,16 +15,11 @@ const useStyles = makeStyles()({
 });
 export default function ReadVsRefDialog({ track, feature: preFeature, handleClose, }) {
     const { classes } = useStyles();
-    // window size stored as string, because it corresponds to a textfield which
-    // is parsed as number on submit
     const [windowSizeText, setWindowSize] = useState('0');
     const [error, setError] = useState();
     const [primaryFeature, setPrimaryFeature] = useState();
     const windowSize = +windowSizeText;
-    // we need to fetch the primary alignment if the selected feature is 2048.
-    // this should be the first in the list of the SA tag
     useEffect(() => {
-        // eslint-disable-next-line @typescript-eslint/no-floating-promises
         ;
         (async () => {
             setError(undefined);
@@ -87,9 +82,6 @@ export default function ReadVsRefDialog({ track, feature: preFeature, handleClos
             const assemblyNames = [trackAssembly, readAssembly];
             const trackId = `track-${Date.now()}`;
             const trackName = `${readName}_vs_${trackAssembly}`;
-            // get the canonical refname for the read because if the
-            // read.get('refName') is chr1 and the actual fasta refName is 1 then no
-            // tracks can be opened on the top panel of the linear read vs ref
             const { assemblyManager } = session;
             const assembly = assemblyManager.get(trackAssembly);
             if (!assembly) {
@@ -104,9 +96,6 @@ export default function ReadVsRefDialog({ track, feature: preFeature, handleClos
                 start: clipPos,
                 end: clipPos + getLengthSansClipping(cigar),
             };
-            // if secondary alignment or supplementary, calculate length from SA[0]'s
-            // CIGAR which is the primary alignments. otherwise it is the primary
-            // alignment just use seq.length if primary alignment
             const totalLength = flags & 2048 ? getLength(suppAlns[0].CIGAR) : getLength(cigar);
             const features = [feat, ...suppAlns];
             features.forEach((f, idx) => {
@@ -117,8 +106,6 @@ export default function ReadVsRefDialog({ track, feature: preFeature, handleClos
             });
             features.sort((a, b) => a.clipPos - b.clipPos);
             const featSeq = feature.get('seq');
-            // the config feature store includes synthetic mate features
-            // mapped to the read assembly
             const configFeatureStore = [...features, ...features.map(f => f.mate)];
             const expand = 2 * windowSize;
             const refLen = features.reduce((a, f) => a + f.end - f.start + expand, 0);
@@ -144,7 +131,7 @@ export default function ReadVsRefDialog({ track, feature: preFeature, handleClos
                             {
                                 start: 0,
                                 end: totalLength,
-                                seq: featSeq || '', // can be empty if user clicks secondary read
+                                seq: featSeq || '',
                                 refName: readName,
                                 uniqueId: `${Math.random()}`,
                             },
@@ -245,16 +232,7 @@ export default function ReadVsRefDialog({ track, feature: preFeature, handleClos
             setError(e);
         }
     }
-    return (React.createElement(Dialog, { open: true, onClose: handleClose, title: "Set window size" },
-        React.createElement(DialogContent, null, error ? (React.createElement(Typography, { color: "error" }, `${error}`)) : !primaryFeature ? (React.createElement("div", null,
-            React.createElement(Typography, null, "To accurately perform comparison we are fetching the primary alignment. Loading primary feature..."),
-            React.createElement(CircularProgress, null))) : (React.createElement("div", { className: classes.root },
-            primaryFeature.get('flags') & 256 ? (React.createElement(Typography, { style: { color: 'orange' } }, "Note: You selected a secondary alignment (which generally does not have SA tags or SEQ fields) so do a full reconstruction of the alignment")) : null,
-            React.createElement(Typography, null, "Show an extra window size around each part of the split alignment. Using a larger value can allow you to see more genomic context."),
-            React.createElement(TextField, { value: windowSize, onChange: event => {
-                    setWindowSize(event.target.value);
-                }, label: "Set window size" })))),
-        React.createElement(DialogActions, null,
-            React.createElement(Button, { variant: "contained", color: "secondary", onClick: handleClose }, "Cancel"),
-            React.createElement(Button, { disabled: !primaryFeature, variant: "contained", color: "primary", onClick: onSubmit }, "Submit"))));
+    return (_jsxs(Dialog, { open: true, onClose: handleClose, title: "Set window size", children: [_jsx(DialogContent, { children: error ? (_jsx(Typography, { color: "error", children: `${error}` })) : !primaryFeature ? (_jsxs("div", { children: [_jsx(Typography, { children: "To accurately perform comparison we are fetching the primary alignment. Loading primary feature..." }), _jsx(CircularProgress, {})] })) : (_jsxs("div", { className: classes.root, children: [primaryFeature.get('flags') & 256 ? (_jsx(Typography, { style: { color: 'orange' }, children: "Note: You selected a secondary alignment (which generally does not have SA tags or SEQ fields) so do a full reconstruction of the alignment" })) : null, _jsx(Typography, { children: "Show an extra window size around each part of the split alignment. Using a larger value can allow you to see more genomic context." }), _jsx(TextField, { value: windowSize, onChange: event => {
+                                setWindowSize(event.target.value);
+                            }, label: "Set window size" })] })) }), _jsxs(DialogActions, { children: [_jsx(Button, { variant: "contained", color: "secondary", onClick: handleClose, children: "Cancel" }), _jsx(Button, { disabled: !primaryFeature, variant: "contained", color: "primary", onClick: onSubmit, children: "Submit" })] })] }));
 }

package/esm/LinearReadVsRef/index.d.ts

@@ -1,2 +1,2 @@
-import PluginManager from '@jbrowse/core/PluginManager';
+import type PluginManager from '@jbrowse/core/PluginManager';
 export default function LinearReadVsRefMenuItemF(pm: PluginManager): void;

package/esm/LinearReadVsRef/index.js

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

package/esm/LinearSyntenyDisplay/afterAttach.d.ts

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

package/esm/LinearSyntenyDisplay/afterAttach.js

@@ -1,14 +1,15 @@
-import { reaction, autorun } from 'mobx';
-import { addDisposer, getSnapshot } from 'mobx-state-tree';
 import { getContainingView, getSession } from '@jbrowse/core/util';
 import { bpToPx } from '@jbrowse/core/util/Base1DUtils';
 import { MismatchParser } from '@jbrowse/plugin-alignments';
+import { autorun, reaction } from 'mobx';
+import { addDisposer, getSnapshot } from 'mobx-state-tree';
 import { drawMouseoverSynteny, drawRef } from './drawSynteny';
 export function doAfterAttach(self) {
     addDisposer(self, autorun(() => {
         var _a, _b;
         const view = getContainingView(self);
-        if (!view.initialized) {
+        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');
@@ -24,25 +25,20 @@ export function doAfterAttach(self) {
     }));
     addDisposer(self, autorun(() => {
         const view = getContainingView(self);
-        if (!view.initialized) {
+        if (!view.initialized ||
+            !view.views.every(a => a.displayedRegions.length > 0 && a.initialized)) {
             return;
         }
         drawMouseoverSynteny(self);
     }));
-    // this attempts to reduce recalculation of feature positions drawn by
-    // the synteny view
-    //
-    // uses a reaction to say "we know the positions don't change in any
-    // relevant way unless bpPerPx changes or displayedRegions changes"
     addDisposer(self, reaction(() => {
         const view = getContainingView(self);
         return {
             bpPerPx: view.views.map(v => v.bpPerPx),
-            // stringifying 'deeply' accesses the displayed regions, see
-            // issue #3456
             displayedRegions: JSON.stringify(view.views.map(v => v.displayedRegions)),
             features: self.features,
-            initialized: view.initialized,
+            initialized: view.initialized &&
+                view.views.every(a => a.displayedRegions.length > 0 && a.initialized),
         };
     }, ({ initialized }) => {
         if (!initialized) {

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

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

package/esm/LinearSyntenyDisplay/components/Component.js

@@ -1,8 +1,8 @@
-import React, { useEffect, useState } from 'react';
-import { makeStyles } from 'tss-react/mui';
-import { observer } from 'mobx-react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
 import { LoadingEllipses } from '@jbrowse/core/ui';
-// locals
+import { observer } from 'mobx-react';
+import { makeStyles } from 'tss-react/mui';
 import LinearSyntenyRendering from './LinearSyntenyRendering';
 const useStyles = makeStyles()(theme => {
     const bg = theme.palette.action.disabledBackground;
@@ -25,7 +25,6 @@ const useStyles = makeStyles()(theme => {
     };
 });
 function LoadingMessage() {
-    // only show the loading message after 300ms to prevent excessive flickering
     const [shown, setShown] = useState(false);
     const { classes } = useStyles();
     useEffect(() => {
@@ -36,27 +35,26 @@ function LoadingMessage() {
             clearTimeout(timeout);
         };
     });
-    return shown ? (React.createElement("div", { className: classes.loading },
-        React.createElement(LoadingEllipses, null))) : null;
+    return shown ? (_jsx("div", { className: classes.loading, children: _jsx(LoadingEllipses, {}) })) : null;
 }
 function BlockMessage({ messageText }) {
     const { classes } = useStyles();
-    return React.createElement("div", { className: classes.blockMessage }, messageText);
+    return _jsx("div", { className: classes.blockMessage, children: messageText });
 }
 function BlockError({ error }) {
     const { classes } = useStyles();
-    return React.createElement("div", { className: classes.blockError }, `${error}`);
+    return _jsx("div", { className: classes.blockError, children: `${error}` });
 }
 const ServerSideRenderedBlockContent = observer(function ({ model, }) {
     if (model.error) {
-        return React.createElement(BlockError, { error: model.error });
+        return _jsx(BlockError, { error: model.error });
     }
     if (model.message) {
-        return React.createElement(BlockMessage, { messageText: model.message });
+        return _jsx(BlockMessage, { messageText: model.message });
     }
     if (!model.features) {
-        return React.createElement(LoadingMessage, null);
+        return _jsx(LoadingMessage, {});
     }
-    return React.createElement(LinearSyntenyRendering, { model: model });
+    return _jsx(LinearSyntenyRendering, { model: model });
 });
 export default ServerSideRenderedBlockContent;

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

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