@jbrowse/plugin-linear-comparative-view 2.15.3 → 2.16.0

package/dist/index.js

@@ -11,6 +11,7 @@ const LinearComparativeView_1 = __importDefault(require("./LinearComparativeView
 const LinearSyntenyDisplay_1 = __importDefault(require("./LinearSyntenyDisplay"));
 const LGVSyntenyDisplay_1 = __importDefault(require("./LGVSyntenyDisplay"));
 const LinearSyntenyView_1 = __importDefault(require("./LinearSyntenyView"));
+const LinearSyntenyViewHelper_1 = __importDefault(require("./LinearSyntenyViewHelper"));
 const LaunchLinearSyntenyView_1 = __importDefault(require("./LaunchLinearSyntenyView"));
 const SyntenyTrack_1 = __importDefault(require("./SyntenyTrack"));
 const LinearReadVsRef_1 = __importDefault(require("./LinearReadVsRef"));
@@ -20,6 +21,7 @@ class LinearComparativeViewPlugin extends Plugin_1.default {
         this.name = 'LinearComparativeViewPlugin';
     }
     install(pluginManager) {
+        (0, LinearSyntenyViewHelper_1.default)(pluginManager);
         (0, LinearComparativeView_1.default)(pluginManager);
         (0, LinearSyntenyView_1.default)(pluginManager);
         (0, LinearComparativeDisplay_1.default)(pluginManager);

package/esm/LaunchLinearSyntenyView.js

@@ -1,4 +1,8 @@
+import { notEmpty } from '@jbrowse/core/util';
 import { when } from 'mobx';
+function makeMultiDimArray(str) {
+    return Array.isArray(str[0]) ? str : [str];
+}
 export default function LaunchLinearSyntenyView(pluginManager) {
     pluginManager.addToExtensionPoint('LaunchView-LinearSyntenyView', 
     // @ts-expect-error
@@ -21,7 +25,7 @@ export default function LaunchLinearSyntenyView(pluginManager) {
                 };
             })));
             await Promise.all(model.views.map(view => when(() => view.initialized)));
-            const idsNotFound = [];
+            let idsNotFound = [];
             await Promise.all(views.map(async (data, idx) => {
                 const view = model.views[idx];
                 const { assembly, loc, tracks = [] } = data;
@@ -30,14 +34,23 @@ export default function LaunchLinearSyntenyView(pluginManager) {
                     throw new Error(`Assembly ${data.assembly} failed to load`);
                 }
                 await view.navToSearchString({ input: loc, assembly: asm });
-                tracks.forEach(track => {
-                    tryTrack(view, track, idsNotFound);
-                });
+                idsNotFound = [
+                    ...idsNotFound,
+                    ...tracks.map(trackId => tryTrackLGV({
+                        model: view,
+                        trackId,
+                    })),
+                ];
             }));
-            tracks.forEach(track => {
-                tryTrack(model, track, idsNotFound);
-            });
-            if (idsNotFound.length) {
+            idsNotFound = [
+                ...idsNotFound,
+                ...makeMultiDimArray(tracks).flatMap((trackSet, level) => trackSet.map(trackId => tryTrackSynteny({
+                    model,
+                    trackId,
+                    level,
+                }))),
+            ];
+            if (idsNotFound.filter(notEmpty).length) {
                 throw new Error(`Could not resolve identifiers: ${idsNotFound.join(',')}`);
             }
         }
@@ -47,16 +60,33 @@ export default function LaunchLinearSyntenyView(pluginManager) {
         }
     });
 }
-function tryTrack(model, trackId, idsNotFound) {
+function tryTrackLGV({ model, trackId, }) {
     try {
         model.showTrack(trackId);
     }
     catch (e) {
-        if (/Could not resolve identifier/.exec(`${e}`)) {
-            idsNotFound.push(trackId);
+        if (/Could not resolve identifier/.exec(`${e}`) ||
+            /track not found/.exec(`${e}`)) {
+            return trackId;
+        }
+        else {
+            throw e;
+        }
+    }
+    return undefined;
+}
+function tryTrackSynteny({ model, trackId, level, }) {
+    try {
+        model.showTrack(trackId, level);
+    }
+    catch (e) {
+        if (/Could not resolve identifier/.exec(`${e}`) ||
+            /track not found/.exec(`${e}`)) {
+            return trackId;
         }
         else {
             throw e;
         }
     }
+    return undefined;
 }

package/esm/LinearComparativeDisplay/stateModelFactory.d.ts

@@ -11,9 +11,14 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
     type: import("mobx-state-tree").ISimpleType<string>;
     rpcDriverName: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
 } & {
+    /**
+     * #property
+     */
     type: import("mobx-state-tree").ISimpleType<"LinearComparativeDisplay">;
+    /**
+     * #property
+     */
     configuration: AnyConfigurationSchemaType;
-    height: import("mobx-state-tree").IType<number | undefined, number, number>;
 }, {
     rendererTypeName: string;
     error: unknown;
@@ -24,9 +29,7 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
             id: string;
             type: string;
             rpcDriverName: string | undefined;
-        } & import("mobx-state-tree/dist/internal" /**
-         * #property
-         */).NonEmptyObject & {
+        } & import("mobx-state-tree/dist/internal").NonEmptyObject & {
             rendererTypeName: string;
             error: unknown;
             message: string | undefined;
@@ -99,7 +102,6 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
                     } & import("mobx-state-tree/dist/internal").NonEmptyObject & any & import("mobx-state-tree").IStateTreeNode<AnyConfigurationSchemaType>);
                 } & import("mobx-state-tree").IStateTreeNode<AnyConfigurationSchemaType>);
             } & import("mobx-state-tree").IStateTreeNode<AnyConfigurationSchemaType>;
-            height: number;
         } & import("mobx-state-tree/dist/internal").NonEmptyObject & {
             rendererTypeName: string;
             error: unknown;
@@ -110,9 +112,7 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
                     id: string;
                     type: string;
                     rpcDriverName: string | undefined;
-                } & import("mobx-state-tree/dist/internal" /**
-                 * #property
-                 */).NonEmptyObject & {
+                } & import("mobx-state-tree/dist/internal").NonEmptyObject & {
                     rendererTypeName: string;
                     error: unknown;
                     message: string | undefined;
@@ -169,9 +169,14 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
             type: import("mobx-state-tree").ISimpleType<string>;
             rpcDriverName: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
         } & {
+            /**
+             * #property
+             */
             type: import("mobx-state-tree").ISimpleType<"LinearComparativeDisplay">;
+            /**
+             * #property
+             */
             configuration: AnyConfigurationSchemaType;
-            height: import("mobx-state-tree").IType<number | undefined, number, number>;
         }, {
             rendererTypeName: string;
             error: unknown;

package/esm/LinearComparativeDisplay/stateModelFactory.js

@@ -1,5 +1,5 @@
 import { readConfObject, ConfigurationReference, } from '@jbrowse/core/configuration';
-import { types, getSnapshot } from 'mobx-state-tree';
+import { types, getSnapshot, getParent } from 'mobx-state-tree';
 import { dedupe, getContainingView, getSession, makeAbortableReaction, } from '@jbrowse/core/util';
 import { getRpcSessionId } from '@jbrowse/core/util/tracks';
 import { BaseDisplay } from '@jbrowse/core/pluggableElementTypes/models';
@@ -19,10 +19,6 @@ function stateModelFactory(configSchema) {
          * #property
          */
         configuration: ConfigurationReference(configSchema),
-        /**
-         * #property
-         */
-        height: 100,
     }))
         .volatile(( /* self */) => ({
         renderInProgress: undefined,
@@ -131,8 +127,9 @@ 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
+    // Alternative to readConfObject(config) is below used because
+    // renderProps is something under our control.  Compare to
+    // serverSideRenderedBlock
     readConfObject(self.configuration);
     const { adapterConfig } = self;
     const parent = getContainingView(self);
@@ -143,6 +140,8 @@ function renderBlockData(self) {
             rpcManager,
             renderProps: {
                 ...display.renderProps(),
+                // @ts-expect-error
+                level: getParent(self, 4).level,
                 view: parent,
                 adapterConfig,
                 sessionId,
@@ -157,10 +156,10 @@ async function renderBlockEffect(props) {
         return;
     }
     const { rpcManager, renderProps } = props;
-    const { adapterConfig } = renderProps;
-    const view0 = renderProps.view.views[0];
+    const { adapterConfig, level } = renderProps;
+    const view = renderProps.view.views[level];
     const features = (await rpcManager.call('getFeats', 'CoreGetFeatures', {
-        regions: view0.staticBlocks.contentBlocks,
+        regions: view.staticBlocks.contentBlocks,
         sessionId: 'getFeats',
         adapterConfig,
     }));

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

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

package/esm/LinearComparativeView/components/Header.js

@@ -1,74 +1,84 @@
 import React, { useState } from 'react';
-import { IconButton, Typography } from '@mui/material';
-import { makeStyles } from 'tss-react/mui';
-import { SearchBox } from '@jbrowse/plugin-linear-genome-view';
 import { observer } from 'mobx-react';
-import { Menu } from '@jbrowse/core/ui';
+import { FormGroup } from '@mui/material';
+import { makeStyles } from 'tss-react/mui';
+import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton';
 // 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 CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton';
-const useStyles = makeStyles()(() => ({
-    headerBar: {
-        gridArea: '1/1/auto/span 2',
-        display: 'flex',
-    },
-    spacer: {
-        flexGrow: 1,
-    },
-    iconButton: {
-        margin: 5,
-    },
-    bp: {
-        display: 'flex',
-        alignItems: 'center',
-        marginLeft: 10,
-    },
-    searchContainer: {
-        marginLeft: 5,
-    },
-    searchBox: {
-        display: 'flex',
+import HeaderSearchBoxes from './HeaderSearchBoxes';
+const useStyles = makeStyles()({
+    inline: {
+        display: 'inline-flex',
     },
-}));
-const TrackSelector = observer(({ model }) => {
-    return (React.createElement(CascadingMenuButton, { menuItems: [
-            {
-                label: 'Synteny track selector',
-                onClick: () => model.activateTrackSelector(),
-            },
-            ...model.views.map((view, idx) => ({
-                label: `View ${idx + 1} track selector`,
-                onClick: () => view.activateTrackSelector(),
-            })),
-        ] },
-        React.createElement(TrackSelectorIcon, null)));
 });
-const Header = observer(function ({ model }) {
+const Header = observer(function ({ model, }) {
     const { classes } = useStyles();
-    const [menuAnchorEl, setMenuAnchorEl] = useState();
-    const anyShowHeaders = model.views.some(view => !view.hideHeader);
-    return (React.createElement("div", { className: classes.headerBar },
-        React.createElement(TrackSelector, { model: model }),
-        React.createElement(IconButton, { onClick: event => {
-                setMenuAnchorEl(event.currentTarget);
-            }, className: classes.iconButton },
+    const { views } = model;
+    const [showSearchBoxes, setShowSearchBoxes] = useState(views.length <= 3);
+    const [sideBySide, setSideBySide] = useState(views.length <= 3);
+    return (React.createElement(FormGroup, { row: true },
+        React.createElement(CascadingMenuButton, { menuItems: [
+                {
+                    label: 'Synteny track selectors',
+                    type: 'subMenu',
+                    subMenu: views.slice(0, -1).map((_, idx) => ({
+                        label: `Row ${idx + 1}->${idx + 2} (${views[idx].assemblyNames.join(',')}->${views[idx + 1].assemblyNames.join(',')})`,
+                        onClick: () => {
+                            model.activateTrackSelector(idx);
+                        },
+                    })),
+                },
+                {
+                    label: 'Row track selectors',
+                    type: 'subMenu',
+                    subMenu: views.map((view, idx) => ({
+                        label: `Row ${idx + 1} track selector (${view.assemblyNames.join(',')})`,
+                        onClick: () => view.activateTrackSelector(),
+                    })),
+                },
+            ] },
+            React.createElement(TrackSelectorIcon, null)),
+        React.createElement(CascadingMenuButton, { menuItems: [
+                {
+                    label: 'Row view menus',
+                    type: 'subMenu',
+                    subMenu: views.map((view, idx) => ({
+                        label: `View ${idx + 1} Menu`,
+                        subMenu: view.menuItems(),
+                    })),
+                },
+                ...model.headerMenuItems(),
+            ] },
             React.createElement(MoreVertIcon, null)),
-        !anyShowHeaders
-            ? model.views.map(view => (React.createElement("div", { key: view.id, className: classes.searchBox },
-                React.createElement("div", { className: classes.searchContainer },
-                    React.createElement(SearchBox, { model: view, showHelp: false })),
-                React.createElement("div", { className: classes.bp },
-                    React.createElement(Typography, { variant: "body2", color: "textSecondary", className: classes.bp },
-                        Math.round(view.coarseTotalBp).toLocaleString('en-US'),
-                        " bp")))))
-            : null,
-        React.createElement("div", { className: classes.spacer }),
-        menuAnchorEl ? (React.createElement(Menu, { anchorEl: menuAnchorEl, open: true, onMenuItemClick: (_event, callback) => {
-                callback();
-                setMenuAnchorEl(undefined);
-            }, menuItems: model.headerMenuItems(), onClose: () => {
-                setMenuAnchorEl(undefined);
-            } })) : null));
+        React.createElement(CascadingMenuButton, { menuItems: [
+                {
+                    label: 'Show search boxes',
+                    type: 'checkbox',
+                    checked: showSearchBoxes,
+                    onClick: () => {
+                        setShowSearchBoxes(!showSearchBoxes);
+                    },
+                },
+                {
+                    label: 'Orientation - Side-by-side',
+                    type: 'radio',
+                    checked: sideBySide,
+                    onClick: () => {
+                        setSideBySide(!sideBySide);
+                    },
+                },
+                {
+                    label: 'Orientation - Vertical',
+                    type: 'radio',
+                    checked: !sideBySide,
+                    onClick: () => {
+                        setSideBySide(!sideBySide);
+                    },
+                },
+            ] },
+            React.createElement(SearchIcon, null)),
+        showSearchBoxes ? (React.createElement("span", { className: sideBySide ? classes.inline : undefined }, views.map(view => (React.createElement(HeaderSearchBoxes, { key: view.id, view: view }))))) : null));
 });
 export default Header;

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

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

package/esm/LinearComparativeView/components/HeaderSearchBoxes.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import { observer } from 'mobx-react';
+import { Typography } from '@mui/material';
+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',
+        alignItems: 'center',
+        marginLeft: 10,
+    },
+    searchBox: {
+        display: 'flex',
+    },
+}));
+const HeaderSearchBoxes = observer(function ({ view, }) {
+    const { classes } = useStyles();
+    const { assemblyNames, coarseTotalBp } = view;
+    return (React.createElement("span", { className: classes.searchBox },
+        React.createElement(SearchBox, { model: view, showHelp: false }),
+        React.createElement(Typography, { variant: "body2", color: "textSecondary", className: classes.bp },
+            assemblyNames.join(','),
+            " ",
+            toLocale(Math.round(coarseTotalBp)),
+            " bp")));
+});
+export default HeaderSearchBoxes;

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

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

package/esm/LinearComparativeView/components/LinearComparativeRenderArea.js

@@ -0,0 +1,56 @@
+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';
+const useStyles = makeStyles()({
+    container: {
+        display: 'grid',
+    },
+    overlay: {
+        zIndex: 100,
+        gridArea: '1/1',
+    },
+    resizeHandle: {
+        height: 4,
+        background: '#ccc',
+    },
+});
+function View({ view }) {
+    const { pluginManager } = getEnv(view);
+    const { ReactComponent } = pluginManager.getViewType(view.type);
+    return React.createElement(ReactComponent, { model: 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 },
+            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);
+});
+const Overlays = observer(function ({ model, level, }) {
+    var _a;
+    const { classes } = useStyles();
+    return (React.createElement(React.Fragment, null, (_a = model.levels[level]) === null || _a === void 0 ? void 0 : _a.tracks.map(track => {
+        const [display] = track.displays;
+        const { RenderingComponent } = display;
+        const trackId = getConf(track, 'trackId');
+        return RenderingComponent ? (React.createElement("div", { className: classes.overlay, key: trackId, style: {
+                height: display.height,
+                overflow: 'hidden',
+            } },
+            React.createElement(RenderingComponent, { model: display }))) : null;
+    })));
+});
+export default LinearComparativeRenderArea;

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

@@ -1,8 +1,6 @@
 import React from 'react';
 import { LinearComparativeViewModel } from '../model';
-type LCV = LinearComparativeViewModel;
-declare const LinearComparativeView: (props: {
-    ExtraButtons?: React.ReactNode;
-    model: LCV;
+declare const LinearComparativeView: ({ model, }: {
+    model: LinearComparativeViewModel;
 }) => React.JSX.Element;
 export default LinearComparativeView;

package/esm/LinearComparativeView/components/LinearComparativeView.js

@@ -1,29 +1,10 @@
 import React from 'react';
 import { makeStyles } from 'tss-react/mui';
 import { observer } from 'mobx-react';
-import { getConf } from '@jbrowse/core/configuration';
-import { getEnv } from '@jbrowse/core/util';
-import { ResizeHandle } from '@jbrowse/core/ui';
 import Rubberband from './Rubberband';
 import Header from './Header';
+import LinearComparativeRenderArea from './LinearComparativeRenderArea';
 const useStyles = makeStyles()(theme => ({
-    container: {
-        display: 'grid',
-    },
-    overlay: {
-        zIndex: 100,
-        gridArea: '1/1',
-    },
-    content: {
-        gridArea: '1/1',
-        position: 'relative',
-    },
-    grid: {
-        display: 'grid',
-    },
-    relative: {
-        position: 'relative',
-    },
     // this helps keep the vertical guide inside the parent view container,
     // similar style exists in the single LGV's trackscontainer
     rubberbandContainer: {
@@ -39,56 +20,11 @@ const useStyles = makeStyles()(theme => ({
         },
     },
 }));
-const Overlays = observer(({ model }) => {
+const LinearComparativeView = observer(function ({ model, }) {
     const { classes } = useStyles();
-    return (React.createElement(React.Fragment, null, model.tracks.map(track => {
-        const [display] = track.displays;
-        const { RenderingComponent } = display;
-        const trackId = getConf(track, 'trackId');
-        return RenderingComponent ? (React.createElement("div", { className: classes.overlay, key: trackId, style: {
-                height: model.middleComparativeHeight,
-                overflow: 'hidden',
-            } },
-            React.createElement(RenderingComponent, { model: display }))) : null;
-    })));
-});
-// The comparative is in the middle of the views
-const MiddleComparativeView = observer(({ model }) => {
-    const { classes } = useStyles();
-    const { views } = model;
-    const { pluginManager } = getEnv(model);
-    const { ReactComponent } = pluginManager.getViewType(views[0].type);
     return (React.createElement("div", { className: classes.rubberbandContainer },
         React.createElement(Header, { model: model }),
         React.createElement(Rubberband, { model: model, ControlComponent: React.createElement("div", { className: classes.rubberbandDiv }) }),
-        React.createElement("div", { className: classes.container },
-            React.createElement(ReactComponent, { model: views[0] }),
-            React.createElement("div", { className: classes.grid },
-                React.createElement(Overlays, { model: model })),
-            React.createElement(ResizeHandle, { onDrag: n => model.setMiddleComparativeHeight(model.middleComparativeHeight + n), style: {
-                    height: 4,
-                    background: '#ccc',
-                } }),
-            React.createElement(ReactComponent, { model: views[1] }))));
-});
-const OverlayComparativeView = observer(({ model }) => {
-    const { classes } = useStyles();
-    const { views } = model;
-    const { pluginManager } = getEnv(model);
-    return (React.createElement("div", { className: classes.rubberbandContainer },
-        React.createElement(Header, { model: model }),
-        React.createElement(Rubberband, { model: model, ControlComponent: React.createElement("div", { className: classes.rubberbandDiv }) }),
-        React.createElement("div", { className: classes.container },
-            React.createElement("div", { className: classes.content },
-                React.createElement("div", { className: classes.relative }, views.map(view => {
-                    const { ReactComponent } = pluginManager.getViewType(view.type);
-                    return React.createElement(ReactComponent, { key: view.id, model: view });
-                })),
-                React.createElement(Overlays, { model: model })))));
-});
-const LinearComparativeView = observer(function (props) {
-    const { model } = props;
-    const middle = model.tracks.some(({ displays }) => displays.some((d) => getConf(d, 'middle')));
-    return middle ? (React.createElement(MiddleComparativeView, { ...props })) : (React.createElement(OverlayComparativeView, { ...props }));
+        React.createElement(LinearComparativeRenderArea, { model: model })));
 });
 export default LinearComparativeView;

package/esm/LinearComparativeView/components/Rubberband.js

@@ -140,7 +140,7 @@ const LinearComparativeRubberband = observer(function Rubberband({ model, Contro
             React.createElement("div", { ref: controlsRef, className: classes.rubberbandControl, onMouseDown: mouseDown, onMouseOut: mouseOut, onMouseMove: mouseMove }, ControlComponent)));
     }
     const right = anchorPosition ? anchorPosition.offsetX : currentX || 0;
-    const left = right < startX ? right : startX;
+    const left = Math.min(right, startX);
     const width = Math.abs(right - startX);
     const { views } = model;
     const leftBpOffset = views.map(view => view.pxToBp(left));

package/esm/LinearComparativeView/index.js

@@ -5,6 +5,9 @@ export default function LinearComparativeViewF(pluginManager) {
     pluginManager.addViewType(() => {
         return new ViewType({
             name: 'LinearComparativeView',
+            viewMetadata: {
+                hiddenFromGUI: true,
+            },
             displayName: 'Linear comparative view',
             stateModel: modelFactory(pluginManager),
             ReactComponent: lazy(() => import('./components/LinearComparativeView')),