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

package/esm/LinearComparativeDisplay/stateModelFactory.js

@@ -1,46 +1,27 @@
-import { readConfObject, ConfigurationReference, } from '@jbrowse/core/configuration';
-import { types, getSnapshot, getParent } from 'mobx-state-tree';
+import { ConfigurationReference, readConfObject, } from '@jbrowse/core/configuration';
+import { BaseDisplay } from '@jbrowse/core/pluggableElementTypes/models';
 import { dedupe, getContainingView, getSession, makeAbortableReaction, } from '@jbrowse/core/util';
+import { stopStopToken } from '@jbrowse/core/util/stopToken';
 import { getRpcSessionId } from '@jbrowse/core/util/tracks';
-import { BaseDisplay } from '@jbrowse/core/pluggableElementTypes/models';
-/**
- * #stateModel LinearComparativeDisplay
- * extends
- * - [BaseDisplay](../basedisplay)
- */
+import { getParent, getSnapshot, types } from 'mobx-state-tree';
 function stateModelFactory(configSchema) {
     return types
         .compose('LinearComparativeDisplay', BaseDisplay, types.model({
-        /**
-         * #property
-         */
         type: types.literal('LinearComparativeDisplay'),
-        /**
-         * #property
-         */
         configuration: ConfigurationReference(configSchema),
     }))
-        .volatile(( /* self */) => ({
+        .volatile(() => ({
         renderInProgress: undefined,
         features: undefined,
         message: undefined,
     }))
         .views(self => ({
-        /**
-         * #getter
-         */
         get level() {
             return getParent(self, 4).level;
         },
-        /**
-         * #getter
-         */
         get height() {
             return getParent(self, 4).height;
         },
-        /**
-         * #getter
-         */
         renderProps() {
             return {
                 rpcDriverName: self.rpcDriverName,
@@ -50,33 +31,18 @@ function stateModelFactory(configSchema) {
         },
     }))
         .actions(self => {
-        let renderInProgress;
+        let stopToken;
         return {
-            /**
-             * #action
-             * controlled by a reaction
-             */
-            setLoading(abortController) {
+            setLoading(newStopToken) {
                 self.message = undefined;
                 self.error = undefined;
-                renderInProgress = abortController;
+                stopToken = newStopToken;
             },
-            /**
-             * #action
-             * controlled by a reaction
-             */
             setMessage(messageText) {
-                if (renderInProgress && !renderInProgress.signal.aborted) {
-                    renderInProgress.abort();
-                }
                 self.message = messageText;
                 self.error = undefined;
-                renderInProgress = undefined;
+                stopToken = undefined;
             },
-            /**
-             * #action
-             * controlled by a reaction
-             */
             setRendered(args) {
                 if (!args) {
                     return;
@@ -101,34 +67,27 @@ function stateModelFactory(configSchema) {
                 }
                 self.message = undefined;
                 self.error = undefined;
-                renderInProgress = undefined;
+                stopToken = undefined;
                 if (foundNewFeatureNotInExistingMap ||
                     foundExistingFeatureNotInNewMap ||
                     !self.features) {
                     self.features = features;
                 }
             },
-            /**
-             * #action
-             * controlled by a reaction
-             */
             setError(error) {
                 console.error(error);
-                if (renderInProgress && !renderInProgress.signal.aborted) {
-                    renderInProgress.abort();
+                if (stopToken !== undefined) {
+                    stopStopToken(stopToken);
                 }
-                // the rendering failed for some reason
                 self.message = undefined;
                 self.error = error;
-                renderInProgress = undefined;
+                stopToken = undefined;
             },
         };
     })
         .actions(self => ({
         afterAttach() {
-            makeAbortableReaction(
-            // @ts-expect-error
-            self, renderBlockData, renderBlockEffect, {
+            makeAbortableReaction(self, renderBlockData, renderBlockEffect, {
                 name: `${self.type} ${self.id} rendering`,
                 delay: 1000,
                 fireImmediately: true,
@@ -139,9 +98,6 @@ function stateModelFactory(configSchema) {
 function renderBlockData(self) {
     const { rpcManager } = getSession(self);
     const display = self;
-    // Alternative to readConfObject(config) is below used because
-    // renderProps is something under our control.  Compare to
-    // serverSideRenderedBlock
     readConfObject(self.configuration);
     const { level, adapterConfig } = self;
     const parent = getContainingView(self);

package/esm/LinearComparativeView/components/Header.d.ts

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

package/esm/LinearComparativeView/components/Header.js

@@ -1,12 +1,11 @@
 import React, { useState } from 'react';
-import { observer } from 'mobx-react';
-import { FormGroup } from '@mui/material';
-import { makeStyles } from 'tss-react/mui';
 import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton';
-// icons
+import { TrackSelector as TrackSelectorIcon } from '@jbrowse/core/ui/Icons';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
 import SearchIcon from '@mui/icons-material/Search';
-import { TrackSelector as TrackSelectorIcon } from '@jbrowse/core/ui/Icons';
+import { FormGroup } from '@mui/material';
+import { observer } from 'mobx-react';
+import { makeStyles } from 'tss-react/mui';
 import HeaderSearchBoxes from './HeaderSearchBoxes';
 const useStyles = makeStyles()({
     inline: {

package/esm/LinearComparativeView/components/HeaderSearchBoxes.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view';
+import type { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view';
 declare const HeaderSearchBoxes: ({ view, }: {
     view: LinearGenomeViewModel;
 }) => React.JSX.Element;

package/esm/LinearComparativeView/components/HeaderSearchBoxes.js

@@ -1,10 +1,9 @@
 import React from 'react';
-import { observer } from 'mobx-react';
+import { toLocale } from '@jbrowse/core/util';
+import { SearchBox } from '@jbrowse/plugin-linear-genome-view';
 import { Typography } from '@mui/material';
+import { observer } from 'mobx-react';
 import { makeStyles } from 'tss-react/mui';
-// jbrowse
-import { SearchBox, } from '@jbrowse/plugin-linear-genome-view';
-import { toLocale } from '@jbrowse/core/util';
 const useStyles = makeStyles()(() => ({
     bp: {
         display: 'flex',

package/esm/LinearComparativeView/components/LinearComparativeRenderArea.d.ts

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

package/esm/LinearComparativeView/components/LinearComparativeRenderArea.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import { makeStyles } from 'tss-react/mui';
-import { observer } from 'mobx-react';
-import { getEnv } from '@jbrowse/core/util';
-import { ResizeHandle } from '@jbrowse/core/ui';
 import { getConf } from '@jbrowse/core/configuration';
+import { ResizeHandle } from '@jbrowse/core/ui';
+import { getEnv } from '@jbrowse/core/util';
+import { observer } from 'mobx-react';
+import { makeStyles } from 'tss-react/mui';
 const useStyles = makeStyles()({
     container: {
         display: 'grid',
@@ -25,19 +25,12 @@ function View({ view }) {
 const LinearComparativeRenderArea = observer(function ({ model, }) {
     const { classes } = useStyles();
     const { views, levels } = model;
-    const RenderList = [
-        React.createElement(View, { key: views[0].id, view: views[0] }),
-    ];
-    for (let i = 1; i < views.length; i++) {
-        const view = views[i];
-        const level = levels[i - 1];
-        RenderList.push(React.createElement(React.Fragment, { key: view.id },
+    return (React.createElement("div", { className: classes.container }, views.map((view, i) => (React.createElement(React.Fragment, { key: view.id },
+        i > 0 ? (React.createElement(React.Fragment, null,
             React.createElement("div", { className: classes.container },
                 React.createElement(Overlays, { model: model, level: i - 1 })),
-            React.createElement(ResizeHandle, { onDrag: n => level === null || level === void 0 ? void 0 : level.setHeight(level.height + n), className: classes.resizeHandle }),
-            React.createElement(View, { view: view })));
-    }
-    return React.createElement("div", { className: classes.container }, RenderList);
+            React.createElement(ResizeHandle, { onDrag: n => { var _a, _b; return (_a = levels[i - 1]) === null || _a === void 0 ? void 0 : _a.setHeight((((_b = levels[i - 1]) === null || _b === void 0 ? void 0 : _b.height) || 0) + n); }, className: classes.resizeHandle }))) : null,
+        React.createElement(View, { view: view }))))));
 });
 const Overlays = observer(function ({ model, level, }) {
     var _a;

package/esm/LinearComparativeView/components/LinearComparativeView.d.ts

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

package/esm/LinearComparativeView/components/LinearComparativeView.js

@@ -1,12 +1,10 @@
 import React from 'react';
-import { makeStyles } from 'tss-react/mui';
 import { observer } from 'mobx-react';
-import Rubberband from './Rubberband';
+import { makeStyles } from 'tss-react/mui';
 import Header from './Header';
 import LinearComparativeRenderArea from './LinearComparativeRenderArea';
+import Rubberband from './Rubberband';
 const useStyles = makeStyles()(theme => ({
-    // this helps keep the vertical guide inside the parent view container,
-    // similar style exists in the single LGV's trackscontainer
     rubberbandContainer: {
         position: 'relative',
         overflow: 'hidden',

package/esm/LinearComparativeView/components/Rubberband.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { LinearComparativeViewModel } from '../model';
+import type { LinearComparativeViewModel } from '../model';
 type LCV = LinearComparativeViewModel;
 declare const LinearComparativeRubberband: ({ model, ControlComponent, }: {
     model: LCV;

package/esm/LinearComparativeView/components/Rubberband.js

@@ -1,9 +1,10 @@
-import React, { useRef, useEffect, useState } from 'react';
-import { observer } from 'mobx-react';
+import React, { useEffect, useRef, useState } from 'react';
+import { Menu } from '@jbrowse/core/ui';
+import { stringify } from '@jbrowse/core/util';
 import { Popover, Typography, alpha } from '@mui/material';
+import { transaction } from 'mobx';
+import { observer } from 'mobx-react';
 import { makeStyles } from 'tss-react/mui';
-import { stringify } from '@jbrowse/core/util';
-import { Menu } from '@jbrowse/core/ui';
 import VerticalGuide from './VerticalGuide';
 const useStyles = makeStyles()(theme => {
     return {
@@ -36,8 +37,6 @@ const useStyles = makeStyles()(theme => {
 const LinearComparativeRubberband = observer(function Rubberband({ model, ControlComponent = React.createElement("div", null), }) {
     const [startX, setStartX] = useState();
     const [currentX, setCurrentX] = useState();
-    // clientX and clientY used for anchorPosition for menu
-    // offsetX used for calculations about width of selection
     const [anchorPosition, setAnchorPosition] = useState();
     const [guideX, setGuideX] = useState();
     const controlsRef = useRef(null);
@@ -51,7 +50,6 @@ const LinearComparativeRubberband = observer(function Rubberband({ model, Contro
             }
             let leftPx = startX;
             let rightPx = offsetX;
-            // handles clicking and dragging to the left
             if (rightPx < leftPx) {
                 ;
                 [leftPx, rightPx] = [rightPx, leftPx];
@@ -71,19 +69,19 @@ const LinearComparativeRubberband = observer(function Rubberband({ model, Contro
                 const { clientX, clientY } = event;
                 const ref = controlsRef.current;
                 const offsetX = clientX - ref.getBoundingClientRect().left;
-                // as stated above, store both clientX/Y and offsetX for different
-                // purposes
                 setAnchorPosition({
                     offsetX,
                     clientX,
                     clientY,
                 });
-                model.views.forEach(view => {
-                    const args = computeOffsets(offsetX, view);
-                    if (args) {
-                        const { leftOffset, rightOffset } = args;
-                        view.setOffsets(leftOffset, rightOffset);
-                    }
+                transaction(() => {
+                    model.views.forEach(view => {
+                        const args = computeOffsets(offsetX, view);
+                        if (args) {
+                            const { leftOffset, rightOffset } = args;
+                            view.setOffsets(leftOffset, rightOffset);
+                        }
+                    });
                 });
                 setGuideX(undefined);
             }
@@ -120,8 +118,10 @@ const LinearComparativeRubberband = observer(function Rubberband({ model, Contro
     }
     function mouseOut() {
         setGuideX(undefined);
-        model.views.forEach(view => {
-            view.setOffsets(undefined, undefined);
+        transaction(() => {
+            model.views.forEach(view => {
+                view.setOffsets(undefined, undefined);
+            });
         });
     }
     function handleClose() {
@@ -163,9 +163,7 @@ const LinearComparativeRubberband = observer(function Rubberband({ model, Contro
                     horizontal: 'left',
                 }, keepMounted: true, disableRestoreFocus: true }, rightBpOffset.map((l, idx) => (React.createElement(Typography, { key: [JSON.stringify(l), idx, 'right'].join('-') }, stringify(l, true))))))) : null,
         React.createElement("div", { ref: rubberbandRef, className: classes.rubberband, style: { left, width } },
-            React.createElement(Typography, { variant: "h6", className: classes.rubberbandText }, numOfBpSelected.map((n, i) => (
-            /* biome-ignore lint/suspicious/noArrayIndexKey: */
-            React.createElement(Typography, { key: `${n}_${i}` }, `${n.toLocaleString('en-US')}bp`))))),
+            React.createElement(Typography, { variant: "h6", className: classes.rubberbandText }, numOfBpSelected.map((n, i) => (React.createElement(Typography, { key: `${n}_${i}` }, `${n.toLocaleString('en-US')}bp`))))),
         React.createElement("div", { className: classes.rubberbandControl, ref: controlsRef, onMouseDown: mouseDown, onMouseOut: mouseOut, onMouseMove: mouseMove }, ControlComponent),
         anchorPosition ? (React.createElement(Menu, { anchorReference: "anchorPosition", anchorPosition: {
                 left: anchorPosition.clientX,

package/esm/LinearComparativeView/components/VerticalGuide.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { LinearComparativeViewModel } from '../model';
+import type { LinearComparativeViewModel } from '../model';
 type LCV = LinearComparativeViewModel;
 declare const VerticalGuide: ({ model, coordX, }: {
     model: LCV;

package/esm/LinearComparativeView/components/VerticalGuide.js

@@ -1,7 +1,7 @@
 import React from 'react';
+import { stringify } from '@jbrowse/core/util';
 import { Tooltip, Typography } from '@mui/material';
 import { observer } from 'mobx-react';
-import { stringify } from '@jbrowse/core/util';
 import { makeStyles } from 'tss-react/mui';
 const useStyles = makeStyles()({
     guide: {

package/esm/LinearComparativeView/index.d.ts

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

package/esm/LinearComparativeView/model.d.ts

@@ -1,12 +1,7 @@
-import { Instance, SnapshotIn } from 'mobx-state-tree';
-import { MenuItem } from '@jbrowse/core/ui';
-import PluginManager from '@jbrowse/core/PluginManager';
-import { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view';
-/**
- * #stateModel LinearComparativeView
- * extends
- * - [BaseViewModel](../baseviewmodel)
- */
+import type PluginManager from '@jbrowse/core/PluginManager';
+import type { MenuItem } from '@jbrowse/core/ui';
+import type { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view';
+import type { Instance, SnapshotIn } from 'mobx-state-tree';
 declare function stateModelFactory(pluginManager: PluginManager): import("mobx-state-tree").IModelType<{
     id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
     displayName: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
@@ -82,6 +77,7 @@ declare function stateModelFactory(pluginManager: PluginManager): import("mobx-s
         scaleBarDisplayPrefix(): string | undefined;
         MiniControlsComponent(): React.FC<any>;
         HeaderComponent(): React.FC<any>;
+        readonly assembliesNotFound: string | undefined;
         readonly assemblyErrors: string;
         readonly assembliesInitialized: boolean;
         readonly initialized: boolean;
@@ -261,81 +257,28 @@ declare function stateModelFactory(pluginManager: PluginManager): import("mobx-s
     setWidth(newWidth: number): void;
     setMinimized(flag: boolean): void;
 } & {
-    /**
-     * #volatile
-     */
     width: number | undefined;
 } & {
-    /**
-     * #getter
-     */
     readonly initialized: boolean;
-    /**
-     * #getter
-     */
     readonly refNames: string[][];
-    /**
-     * #getter
-     */
     readonly assemblyNames: string[];
 } & {
     beforeDestroy(): void;
     onSubviewAction(actionName: string, path: string, args?: unknown[]): void;
-    /**
-     * #action
-     */
     setWidth(newWidth: number): void;
-    /**
-     * #action
-     */
     setViews(views: SnapshotIn<LinearGenomeViewModel>[]): void;
-    /**
-     * #action
-     */
     removeView(view: LinearGenomeViewModel): void;
-    /**
-     * #action
-     */
     setLevelHeight(newHeight: number, level?: number): number;
-    /**
-     * #action
-     */
     activateTrackSelector(level: number): import("@jbrowse/core/util").Widget;
-    /**
-     * #action
-     */
     toggleTrack(trackId: string, level?: number): void;
-    /**
-     * #action
-     */
     showTrack(trackId: string, level?: number, initialSnapshot?: {}): void;
-    /**
-     * #action
-     */
     hideTrack(trackId: string, level?: number): void;
-    /**
-     * #action
-     */
     squareView(): void;
-    /**
-     * #action
-     */
     clearView(): void;
 } & {
-    /**
-     * #method
-     * includes a subset of view menu options because the full list is a
-     * little overwhelming. overridden by subclasses
-     */
     headerMenuItems(): MenuItem[];
 } & {
-    /**
-     * #method
-     */
     menuItems(): MenuItem[];
-    /**
-     * #method
-     */
     rubberBandMenuItems(): {
         label: string;
         onClick: () => void;
@@ -417,6 +360,7 @@ declare function stateModelFactory(pluginManager: PluginManager): import("mobx-s
         scaleBarDisplayPrefix(): string | undefined;
         MiniControlsComponent(): React.FC<any>;
         HeaderComponent(): React.FC<any>;
+        readonly assembliesNotFound: string | undefined;
         readonly assemblyErrors: string;
         readonly assembliesInitialized: boolean;
         readonly initialized: boolean;