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

package/dist/LinearComparativeDisplay/stateModelFactory.js

@@ -1,48 +1,29 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const configuration_1 = require("@jbrowse/core/configuration");
-const mobx_state_tree_1 = require("mobx-state-tree");
+const models_1 = require("@jbrowse/core/pluggableElementTypes/models");
 const util_1 = require("@jbrowse/core/util");
+const stopToken_1 = require("@jbrowse/core/util/stopToken");
 const tracks_1 = require("@jbrowse/core/util/tracks");
-const models_1 = require("@jbrowse/core/pluggableElementTypes/models");
-/**
- * #stateModel LinearComparativeDisplay
- * extends
- * - [BaseDisplay](../basedisplay)
- */
+const mobx_state_tree_1 = require("mobx-state-tree");
 function stateModelFactory(configSchema) {
     return mobx_state_tree_1.types
         .compose('LinearComparativeDisplay', models_1.BaseDisplay, mobx_state_tree_1.types.model({
-        /**
-         * #property
-         */
         type: mobx_state_tree_1.types.literal('LinearComparativeDisplay'),
-        /**
-         * #property
-         */
         configuration: (0, configuration_1.ConfigurationReference)(configSchema),
     }))
-        .volatile(( /* self */) => ({
+        .volatile(() => ({
         renderInProgress: undefined,
         features: undefined,
         message: undefined,
     }))
         .views(self => ({
-        /**
-         * #getter
-         */
         get level() {
             return (0, mobx_state_tree_1.getParent)(self, 4).level;
         },
-        /**
-         * #getter
-         */
         get height() {
             return (0, mobx_state_tree_1.getParent)(self, 4).height;
         },
-        /**
-         * #getter
-         */
         renderProps() {
             return {
                 rpcDriverName: self.rpcDriverName,
@@ -52,33 +33,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;
@@ -103,34 +69,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) {
+                    (0, stopToken_1.stopStopToken)(stopToken);
                 }
-                // the rendering failed for some reason
                 self.message = undefined;
                 self.error = error;
-                renderInProgress = undefined;
+                stopToken = undefined;
             },
         };
     })
         .actions(self => ({
         afterAttach() {
-            (0, util_1.makeAbortableReaction)(
-            // @ts-expect-error
-            self, renderBlockData, renderBlockEffect, {
+            (0, util_1.makeAbortableReaction)(self, renderBlockData, renderBlockEffect, {
                 name: `${self.type} ${self.id} rendering`,
                 delay: 1000,
                 fireImmediately: true,
@@ -141,9 +100,6 @@ function stateModelFactory(configSchema) {
 function renderBlockData(self) {
     const { rpcManager } = (0, util_1.getSession)(self);
     const display = self;
-    // Alternative to readConfObject(config) is below used because
-    // renderProps is something under our control.  Compare to
-    // serverSideRenderedBlock
     (0, configuration_1.readConfObject)(self.configuration);
     const { level, adapterConfig } = self;
     const parent = (0, util_1.getContainingView)(self);

package/dist/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/dist/LinearComparativeView/components/Header.js

@@ -27,14 +27,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importStar(require("react"));
-const mobx_react_1 = require("mobx-react");
-const material_1 = require("@mui/material");
-const mui_1 = require("tss-react/mui");
 const CascadingMenuButton_1 = __importDefault(require("@jbrowse/core/ui/CascadingMenuButton"));
-// icons
+const Icons_1 = require("@jbrowse/core/ui/Icons");
 const MoreVert_1 = __importDefault(require("@mui/icons-material/MoreVert"));
 const Search_1 = __importDefault(require("@mui/icons-material/Search"));
-const Icons_1 = require("@jbrowse/core/ui/Icons");
+const material_1 = require("@mui/material");
+const mobx_react_1 = require("mobx-react");
+const mui_1 = require("tss-react/mui");
 const HeaderSearchBoxes_1 = __importDefault(require("./HeaderSearchBoxes"));
 const useStyles = (0, mui_1.makeStyles)()({
     inline: {

package/dist/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/dist/LinearComparativeView/components/HeaderSearchBoxes.js

@@ -4,12 +4,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
-const mobx_react_1 = require("mobx-react");
+const util_1 = require("@jbrowse/core/util");
+const plugin_linear_genome_view_1 = require("@jbrowse/plugin-linear-genome-view");
 const material_1 = require("@mui/material");
+const mobx_react_1 = require("mobx-react");
 const mui_1 = require("tss-react/mui");
-// jbrowse
-const plugin_linear_genome_view_1 = require("@jbrowse/plugin-linear-genome-view");
-const util_1 = require("@jbrowse/core/util");
 const useStyles = (0, mui_1.makeStyles)()(() => ({
     bp: {
         display: 'flex',

package/dist/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/dist/LinearComparativeView/components/LinearComparativeRenderArea.js

@@ -4,11 +4,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
-const mui_1 = require("tss-react/mui");
-const mobx_react_1 = require("mobx-react");
-const util_1 = require("@jbrowse/core/util");
-const ui_1 = require("@jbrowse/core/ui");
 const configuration_1 = require("@jbrowse/core/configuration");
+const ui_1 = require("@jbrowse/core/ui");
+const util_1 = require("@jbrowse/core/util");
+const mobx_react_1 = require("mobx-react");
+const mui_1 = require("tss-react/mui");
 const useStyles = (0, mui_1.makeStyles)()({
     container: {
         display: 'grid',
@@ -30,19 +30,12 @@ function View({ view }) {
 const LinearComparativeRenderArea = (0, mobx_react_1.observer)(function ({ model, }) {
     const { classes } = useStyles();
     const { views, levels } = model;
-    const RenderList = [
-        react_1.default.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_1.default.createElement(react_1.default.Fragment, { key: view.id },
+    return (react_1.default.createElement("div", { className: classes.container }, views.map((view, i) => (react_1.default.createElement(react_1.default.Fragment, { key: view.id },
+        i > 0 ? (react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement("div", { className: classes.container },
                 react_1.default.createElement(Overlays, { model: model, level: i - 1 })),
-            react_1.default.createElement(ui_1.ResizeHandle, { onDrag: n => level === null || level === void 0 ? void 0 : level.setHeight(level.height + n), className: classes.resizeHandle }),
-            react_1.default.createElement(View, { view: view })));
-    }
-    return react_1.default.createElement("div", { className: classes.container }, RenderList);
+            react_1.default.createElement(ui_1.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_1.default.createElement(View, { view: view }))))));
 });
 const Overlays = (0, mobx_react_1.observer)(function ({ model, level, }) {
     var _a;

package/dist/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/dist/LinearComparativeView/components/LinearComparativeView.js

@@ -4,14 +4,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
-const mui_1 = require("tss-react/mui");
 const mobx_react_1 = require("mobx-react");
-const Rubberband_1 = __importDefault(require("./Rubberband"));
+const mui_1 = require("tss-react/mui");
 const Header_1 = __importDefault(require("./Header"));
 const LinearComparativeRenderArea_1 = __importDefault(require("./LinearComparativeRenderArea"));
+const Rubberband_1 = __importDefault(require("./Rubberband"));
 const useStyles = (0, mui_1.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/dist/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/dist/LinearComparativeView/components/Rubberband.js

@@ -27,11 +27,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importStar(require("react"));
-const mobx_react_1 = require("mobx-react");
+const ui_1 = require("@jbrowse/core/ui");
+const util_1 = require("@jbrowse/core/util");
 const material_1 = require("@mui/material");
+const mobx_1 = require("mobx");
+const mobx_react_1 = require("mobx-react");
 const mui_1 = require("tss-react/mui");
-const util_1 = require("@jbrowse/core/util");
-const ui_1 = require("@jbrowse/core/ui");
 const VerticalGuide_1 = __importDefault(require("./VerticalGuide"));
 const useStyles = (0, mui_1.makeStyles)()(theme => {
     return {
@@ -64,8 +65,6 @@ const useStyles = (0, mui_1.makeStyles)()(theme => {
 const LinearComparativeRubberband = (0, mobx_react_1.observer)(function Rubberband({ model, ControlComponent = react_1.default.createElement("div", null), }) {
     const [startX, setStartX] = (0, react_1.useState)();
     const [currentX, setCurrentX] = (0, react_1.useState)();
-    // clientX and clientY used for anchorPosition for menu
-    // offsetX used for calculations about width of selection
     const [anchorPosition, setAnchorPosition] = (0, react_1.useState)();
     const [guideX, setGuideX] = (0, react_1.useState)();
     const controlsRef = (0, react_1.useRef)(null);
@@ -79,7 +78,6 @@ const LinearComparativeRubberband = (0, mobx_react_1.observer)(function Rubberba
             }
             let leftPx = startX;
             let rightPx = offsetX;
-            // handles clicking and dragging to the left
             if (rightPx < leftPx) {
                 ;
                 [leftPx, rightPx] = [rightPx, leftPx];
@@ -99,19 +97,19 @@ const LinearComparativeRubberband = (0, mobx_react_1.observer)(function Rubberba
                 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);
-                    }
+                (0, mobx_1.transaction)(() => {
+                    model.views.forEach(view => {
+                        const args = computeOffsets(offsetX, view);
+                        if (args) {
+                            const { leftOffset, rightOffset } = args;
+                            view.setOffsets(leftOffset, rightOffset);
+                        }
+                    });
                 });
                 setGuideX(undefined);
             }
@@ -148,8 +146,10 @@ const LinearComparativeRubberband = (0, mobx_react_1.observer)(function Rubberba
     }
     function mouseOut() {
         setGuideX(undefined);
-        model.views.forEach(view => {
-            view.setOffsets(undefined, undefined);
+        (0, mobx_1.transaction)(() => {
+            model.views.forEach(view => {
+                view.setOffsets(undefined, undefined);
+            });
         });
     }
     function handleClose() {
@@ -191,9 +191,7 @@ const LinearComparativeRubberband = (0, mobx_react_1.observer)(function Rubberba
                     horizontal: 'left',
                 }, keepMounted: true, disableRestoreFocus: true }, rightBpOffset.map((l, idx) => (react_1.default.createElement(material_1.Typography, { key: [JSON.stringify(l), idx, 'right'].join('-') }, (0, util_1.stringify)(l, true))))))) : null,
         react_1.default.createElement("div", { ref: rubberbandRef, className: classes.rubberband, style: { left, width } },
-            react_1.default.createElement(material_1.Typography, { variant: "h6", className: classes.rubberbandText }, numOfBpSelected.map((n, i) => (
-            /* biome-ignore lint/suspicious/noArrayIndexKey: */
-            react_1.default.createElement(material_1.Typography, { key: `${n}_${i}` }, `${n.toLocaleString('en-US')}bp`))))),
+            react_1.default.createElement(material_1.Typography, { variant: "h6", className: classes.rubberbandText }, numOfBpSelected.map((n, i) => (react_1.default.createElement(material_1.Typography, { key: `${n}_${i}` }, `${n.toLocaleString('en-US')}bp`))))),
         react_1.default.createElement("div", { className: classes.rubberbandControl, ref: controlsRef, onMouseDown: mouseDown, onMouseOut: mouseOut, onMouseMove: mouseMove }, ControlComponent),
         anchorPosition ? (react_1.default.createElement(ui_1.Menu, { anchorReference: "anchorPosition", anchorPosition: {
                 left: anchorPosition.clientX,

package/dist/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/dist/LinearComparativeView/components/VerticalGuide.js

@@ -4,9 +4,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
+const util_1 = require("@jbrowse/core/util");
 const material_1 = require("@mui/material");
 const mobx_react_1 = require("mobx-react");
-const util_1 = require("@jbrowse/core/util");
 const mui_1 = require("tss-react/mui");
 const useStyles = (0, mui_1.makeStyles)()({
     guide: {

package/dist/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/dist/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;