@jbrowse/plugin-linear-comparative-view 2.16.1 → 2.18.0

package/esm/LinearComparativeView/model.js

@@ -1,97 +1,45 @@
 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, 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
-         */
         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
         beforeDestroy() {
             var _a;
             const session = getSession(self);
@@ -103,40 +51,24 @@ 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
-         */
         activateTrackSelector(level) {
             if (self.trackSelectorType === 'hierarchical') {
                 const session = getSession(self);
@@ -150,32 +82,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 +106,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 +134,6 @@ function stateModelFactory(pluginManager) {
                 },
             ];
         },
-        /**
-         * #method
-         */
         rubberBandMenuItems() {
             return [
                 {
@@ -256,8 +162,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,5 +1,5 @@
 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;

package/esm/LinearReadVsRef/LinearReadVsRef.js

@@ -1,12 +1,11 @@
 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 { 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 +14,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 +81,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 +95,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 +105,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 +130,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()}`,
                             },

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,8 +1,8 @@
-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(() => {
@@ -29,17 +29,10 @@ export function doAfterAttach(self) {
         }
         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,

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

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

package/esm/LinearSyntenyDisplay/components/Component.js

@@ -1,8 +1,7 @@
 import React, { useEffect, useState } from 'react';
-import { makeStyles } from 'tss-react/mui';
-import { observer } from 'mobx-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 +24,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(() => {

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

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

package/esm/LinearSyntenyDisplay/components/LinearSyntenyRendering.js

@@ -1,9 +1,9 @@
-import React, { useState, useCallback, useRef, lazy, useEffect } from 'react';
-import { observer } from 'mobx-react';
+import React, { lazy, useCallback, useEffect, useRef, useState } from 'react';
 import { getContainingView } from '@jbrowse/core/util';
 import { transaction } from 'mobx';
+import { observer } from 'mobx-react';
 import { makeStyles } from 'tss-react/mui';
-import { getId, MAX_COLOR_RANGE } from '../drawSynteny';
+import { MAX_COLOR_RANGE, getId } from '../drawSynteny';
 import SyntenyContextMenu from './SyntenyContextMenu';
 import { getTooltip, onSynClick, onSynContextClick } from './util';
 const SyntenyTooltip = lazy(() => import('./SyntenyTooltip'));
@@ -18,7 +18,6 @@ const useStyles = makeStyles()({
         position: 'relative',
     },
     mouseoverCanvas: {
-        imageRendering: 'pixelated',
         position: 'absolute',
         pointEvents: 'none',
     },
@@ -42,22 +41,13 @@ const LinearSyntenyRendering = observer(function ({ model, }) {
     const [mouseInitialDownX, setMouseInitialDownX] = useState();
     const [currY, setCurrY] = useState();
     const mainSyntenyCanvasRefp = useRef();
-    // these useCallbacks avoid new refs from being created on any mouseover,
-    // etc.
-    // biome-ignore lint/correctness/useExhaustiveDependencies:
     const mouseoverDetectionCanvasRef = useCallback((ref) => {
         model.setMouseoverCanvasRef(ref);
-    }, 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [model, height, width]);
-    // biome-ignore lint/correctness/useExhaustiveDependencies:
+    }, [model, height, width]);
     const mainSyntenyCanvasRef = useCallback((ref) => {
         model.setMainCanvasRef(ref);
-        mainSyntenyCanvasRefp.current = ref; // this ref is additionally used in useEffect below
-    }, 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [model, height, width]);
-    // biome-ignore lint/correctness/useExhaustiveDependencies:
+        mainSyntenyCanvasRefp.current = ref;
+    }, [model, height, width]);
     useEffect(() => {
         var _a;
         function onWheel(event) {
@@ -106,20 +96,13 @@ const LinearSyntenyRendering = observer(function ({ model, }) {
             var _a;
             (_a = mainSyntenyCanvasRefp.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('wheel', onWheel);
         };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [model, height, width]);
-    // biome-ignore lint/correctness/useExhaustiveDependencies:
     const clickMapCanvasRef = useCallback((ref) => {
         model.setClickMapCanvasRef(ref);
-    }, 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [model, height, width]);
-    // biome-ignore lint/correctness/useExhaustiveDependencies:
+    }, [model, height, width]);
     const cigarClickMapCanvasRef = useCallback((ref) => {
         model.setCigarClickMapCanvasRef(ref);
-    }, 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [model, height, width]);
+    }, [model, height, width]);
     return (React.createElement("div", { className: classes.rel },
         React.createElement("canvas", { ref: mouseoverDetectionCanvasRef, width: width, height: height, className: classes.mouseoverCanvas }),
         React.createElement("canvas", { ref: mainSyntenyCanvasRef, onMouseMove: event => {

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

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

package/esm/LinearSyntenyDisplay/components/SyntenyContextMenu.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import { getContainingView, getSession } from '@jbrowse/core/util';
 import { Menu } from '@jbrowse/core/ui';
+import { getContainingView, getSession } from '@jbrowse/core/util';
 export default function SyntenyContextMenu({ model, onClose, anchorEl, }) {
     const view = getContainingView(model);
     const { clientX, clientY, feature } = anchorEl;

package/esm/LinearSyntenyDisplay/components/SyntenyTooltip.js

@@ -1,7 +1,7 @@
 import React from 'react';
-import { observer } from 'mobx-react';
 import { SanitizedHTML } from '@jbrowse/core/ui';
 import BaseTooltip from '@jbrowse/core/ui/BaseTooltip';
+import { observer } from 'mobx-react';
 const SyntenyTooltip = observer(function ({ title }) {
     return title ? (React.createElement(BaseTooltip, null,
         React.createElement(SanitizedHTML, { html: title }))) : null;

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

@@ -1,6 +1,6 @@
-import React from 'react';
-import { Feature } from '@jbrowse/core/util';
-import { LinearSyntenyDisplayModel } from '../model';
+import type React from 'react';
+import type { LinearSyntenyDisplayModel } from '../model';
+import type { Feature } from '@jbrowse/core/util';
 interface Pos {
     offsetPx: number;
 }

package/esm/LinearSyntenyDisplay/components/util.js

@@ -1,6 +1,5 @@
-import { assembleLocString, doesIntersect2, getSession, isSessionModelWithWidgets, getContainingTrack, getContainingView, } from '@jbrowse/core/util';
-// locals
-import { getId, MAX_COLOR_RANGE } from '../drawSynteny';
+import { assembleLocString, doesIntersect2, getContainingTrack, getContainingView, getSession, isSessionModelWithWidgets, } from '@jbrowse/core/util';
+import { MAX_COLOR_RANGE, getId } from '../drawSynteny';
 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];
@@ -17,11 +16,7 @@ export function drawMatchSimple({ feature, ctx, offsets, level, cb, height, draw
     if (!doesIntersect2(minX, maxX, -oobLimit, viewWidth + oobLimit)) {
         return;
     }
-    // drawing a line if the results are thin: drawing a line results in much
-    // less pixellation than filling in a thin polygon
     if (l1 <= 1 && l2 <= 1) {
-        // hideTiny can be used to avoid drawing mouseover for thin lines in this
-        // case
         if (!hideTiny) {
             ctx.beginPath();
             ctx.moveTo(x11, y1);
@@ -58,9 +53,6 @@ export function drawBox(ctx, x1, x2, y1, x3, x4, y2) {
 export function drawBezierBox(ctx, x1, x2, y1, x3, x4, y2, mid) {
     const len1 = Math.abs(x1 - x2);
     const len2 = Math.abs(x1 - x2);
-    // heuristic to not draw hourglass inversions with bezier curves when they
-    // are thin and far apart because it results in areas that are not drawn well
-    // demo https://codesandbox.io/s/fast-glitter-q3b1or?file=/src/index.js
     if (len1 < 5 && len2 < 5 && x2 < x1 && Math.abs(x1 - x3) > 100) {
         const tmp = x1;
         x1 = x2;
@@ -134,7 +126,6 @@ export function onSynContextClick(event, model, setAnchorEl) {
     }
 }
 export function getTooltip({ feature, cigarOp, cigarOpLen, }) {
-    // @ts-expect-error
     const f1 = feature.toJSON();
     const f2 = f1.mate;
     const l1 = f1.end - f1.start;

package/esm/LinearSyntenyDisplay/configSchemaF.d.ts

@@ -1,20 +1,9 @@
-import PluginManager from '@jbrowse/core/PluginManager';
-/**
- * #config LinearSyntenyDisplay
- */
+import type PluginManager from '@jbrowse/core/PluginManager';
 declare function configSchemaFactory(pluginManager: PluginManager): import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
-    /**
-     * #slot
-     * currently unused
-     */
     trackIds: {
         type: string;
         defaultValue: never[];
     };
-    /**
-     * #slot
-     * currently unused
-     */
     middle: {
         type: string;
         defaultValue: boolean;

package/esm/LinearSyntenyDisplay/configSchemaF.js

@@ -1,28 +1,13 @@
 import { ConfigurationSchema } from '@jbrowse/core/configuration';
 import baseConfigFactory from '../LinearComparativeDisplay/configSchemaF';
-/**
- * #config LinearSyntenyDisplay
- */
 function configSchemaFactory(pluginManager) {
     return ConfigurationSchema('LinearSyntenyDisplay', {
-        /**
-         * #slot
-         * currently unused
-         */
         trackIds: {
             type: 'stringArray',
             defaultValue: [],
         },
-        /**
-         * #slot
-         * currently unused
-         */
         middle: { type: 'boolean', defaultValue: true },
     }, {
-        /**
-         * #baseConfiguration
-         * this refers to the LinearComparativeDisplay
-         */
         baseConfiguration: baseConfigFactory(pluginManager),
         explicitlyTyped: true,
     });

package/esm/LinearSyntenyDisplay/drawSynteny.d.ts

@@ -1,4 +1,4 @@
-import { LinearSyntenyDisplayModel } from './model';
+import type { LinearSyntenyDisplayModel } from './model';
 export declare const MAX_COLOR_RANGE: number;
 export declare function getId(r: number, g: number, b: number, unitMultiplier: number): number;
 export declare function drawRef(model: LinearSyntenyDisplayModel, ctx1: CanvasRenderingContext2D, ctx3?: CanvasRenderingContext2D): void;