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

package/dist/LaunchLinearSyntenyView.js

@@ -1,7 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = LaunchLinearSyntenyView;
+const util_1 = require("@jbrowse/core/util");
 const mobx_1 = require("mobx");
+function makeMultiDimArray(str) {
+    return Array.isArray(str[0]) ? str : [str];
+}
 function LaunchLinearSyntenyView(pluginManager) {
     pluginManager.addToExtensionPoint('LaunchView-LinearSyntenyView', 
     // @ts-expect-error
@@ -24,7 +28,7 @@ function LaunchLinearSyntenyView(pluginManager) {
                 };
             })));
             await Promise.all(model.views.map(view => (0, mobx_1.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;
@@ -33,14 +37,23 @@ 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(util_1.notEmpty).length) {
                 throw new Error(`Could not resolve identifiers: ${idsNotFound.join(',')}`);
             }
         }
@@ -50,16 +63,33 @@ 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/dist/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/dist/LinearComparativeDisplay/stateModelFactory.js

@@ -21,10 +21,6 @@ function stateModelFactory(configSchema) {
          * #property
          */
         configuration: (0, configuration_1.ConfigurationReference)(configSchema),
-        /**
-         * #property
-         */
-        height: 100,
     }))
         .volatile(( /* self */) => ({
         renderInProgress: undefined,
@@ -133,8 +129,9 @@ 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
+    // Alternative to readConfObject(config) is below used because
+    // renderProps is something under our control.  Compare to
+    // serverSideRenderedBlock
     (0, configuration_1.readConfObject)(self.configuration);
     const { adapterConfig } = self;
     const parent = (0, util_1.getContainingView)(self);
@@ -145,6 +142,8 @@ function renderBlockData(self) {
             rpcManager,
             renderProps: {
                 ...display.renderProps(),
+                // @ts-expect-error
+                level: (0, mobx_state_tree_1.getParent)(self, 4).level,
                 view: parent,
                 adapterConfig,
                 sessionId,
@@ -159,10 +158,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/dist/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/dist/LinearComparativeView/components/Header.js

@@ -27,76 +27,86 @@ 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 plugin_linear_genome_view_1 = require("@jbrowse/plugin-linear-genome-view");
-const mobx_react_1 = require("mobx-react");
-const ui_1 = require("@jbrowse/core/ui");
+const CascadingMenuButton_1 = __importDefault(require("@jbrowse/core/ui/CascadingMenuButton"));
 // 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 CascadingMenuButton_1 = __importDefault(require("@jbrowse/core/ui/CascadingMenuButton"));
-const useStyles = (0, mui_1.makeStyles)()(() => ({
-    headerBar: {
-        gridArea: '1/1/auto/span 2',
-        display: 'flex',
-    },
-    spacer: {
-        flexGrow: 1,
+const HeaderSearchBoxes_1 = __importDefault(require("./HeaderSearchBoxes"));
+const useStyles = (0, mui_1.makeStyles)()({
+    inline: {
+        display: 'inline-flex',
     },
-    iconButton: {
-        margin: 5,
-    },
-    bp: {
-        display: 'flex',
-        alignItems: 'center',
-        marginLeft: 10,
-    },
-    searchContainer: {
-        marginLeft: 5,
-    },
-    searchBox: {
-        display: 'flex',
-    },
-}));
-const TrackSelector = (0, mobx_react_1.observer)(({ model }) => {
-    return (react_1.default.createElement(CascadingMenuButton_1.default, { menuItems: [
-            {
-                label: 'Synteny track selector',
-                onClick: () => model.activateTrackSelector(),
-            },
-            ...model.views.map((view, idx) => ({
-                label: `View ${idx + 1} track selector`,
-                onClick: () => view.activateTrackSelector(),
-            })),
-        ] },
-        react_1.default.createElement(Icons_1.TrackSelector, null)));
 });
-const Header = (0, mobx_react_1.observer)(function ({ model }) {
+const Header = (0, mobx_react_1.observer)(function ({ model, }) {
     const { classes } = useStyles();
-    const [menuAnchorEl, setMenuAnchorEl] = (0, react_1.useState)();
-    const anyShowHeaders = model.views.some(view => !view.hideHeader);
-    return (react_1.default.createElement("div", { className: classes.headerBar },
-        react_1.default.createElement(TrackSelector, { model: model }),
-        react_1.default.createElement(material_1.IconButton, { onClick: event => {
-                setMenuAnchorEl(event.currentTarget);
-            }, className: classes.iconButton },
+    const { views } = model;
+    const [showSearchBoxes, setShowSearchBoxes] = (0, react_1.useState)(views.length <= 3);
+    const [sideBySide, setSideBySide] = (0, react_1.useState)(views.length <= 3);
+    return (react_1.default.createElement(material_1.FormGroup, { row: true },
+        react_1.default.createElement(CascadingMenuButton_1.default, { 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_1.default.createElement(Icons_1.TrackSelector, null)),
+        react_1.default.createElement(CascadingMenuButton_1.default, { menuItems: [
+                {
+                    label: 'Row view menus',
+                    type: 'subMenu',
+                    subMenu: views.map((view, idx) => ({
+                        label: `View ${idx + 1} Menu`,
+                        subMenu: view.menuItems(),
+                    })),
+                },
+                ...model.headerMenuItems(),
+            ] },
             react_1.default.createElement(MoreVert_1.default, null)),
-        !anyShowHeaders
-            ? model.views.map(view => (react_1.default.createElement("div", { key: view.id, className: classes.searchBox },
-                react_1.default.createElement("div", { className: classes.searchContainer },
-                    react_1.default.createElement(plugin_linear_genome_view_1.SearchBox, { model: view, showHelp: false })),
-                react_1.default.createElement("div", { className: classes.bp },
-                    react_1.default.createElement(material_1.Typography, { variant: "body2", color: "textSecondary", className: classes.bp },
-                        Math.round(view.coarseTotalBp).toLocaleString('en-US'),
-                        " bp")))))
-            : null,
-        react_1.default.createElement("div", { className: classes.spacer }),
-        menuAnchorEl ? (react_1.default.createElement(ui_1.Menu, { anchorEl: menuAnchorEl, open: true, onMenuItemClick: (_event, callback) => {
-                callback();
-                setMenuAnchorEl(undefined);
-            }, menuItems: model.headerMenuItems(), onClose: () => {
-                setMenuAnchorEl(undefined);
-            } })) : null));
+        react_1.default.createElement(CascadingMenuButton_1.default, { 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_1.default.createElement(Search_1.default, null)),
+        showSearchBoxes ? (react_1.default.createElement("span", { className: sideBySide ? classes.inline : undefined }, views.map(view => (react_1.default.createElement(HeaderSearchBoxes_1.default, { key: view.id, view: view }))))) : null));
 });
 exports.default = Header;

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

@@ -0,0 +1,34 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const mobx_react_1 = require("mobx-react");
+const material_1 = require("@mui/material");
+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',
+        alignItems: 'center',
+        marginLeft: 10,
+    },
+    searchBox: {
+        display: 'flex',
+    },
+}));
+const HeaderSearchBoxes = (0, mobx_react_1.observer)(function ({ view, }) {
+    const { classes } = useStyles();
+    const { assemblyNames, coarseTotalBp } = view;
+    return (react_1.default.createElement("span", { className: classes.searchBox },
+        react_1.default.createElement(plugin_linear_genome_view_1.SearchBox, { model: view, showHelp: false }),
+        react_1.default.createElement(material_1.Typography, { variant: "body2", color: "textSecondary", className: classes.bp },
+            assemblyNames.join(','),
+            " ",
+            (0, util_1.toLocale)(Math.round(coarseTotalBp)),
+            " bp")));
+});
+exports.default = HeaderSearchBoxes;

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

@@ -0,0 +1,61 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": 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 useStyles = (0, mui_1.makeStyles)()({
+    container: {
+        display: 'grid',
+    },
+    overlay: {
+        zIndex: 100,
+        gridArea: '1/1',
+    },
+    resizeHandle: {
+        height: 4,
+        background: '#ccc',
+    },
+});
+function View({ view }) {
+    const { pluginManager } = (0, util_1.getEnv)(view);
+    const { ReactComponent } = pluginManager.getViewType(view.type);
+    return react_1.default.createElement(ReactComponent, { model: 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 },
+            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);
+});
+const Overlays = (0, mobx_react_1.observer)(function ({ model, level, }) {
+    var _a;
+    const { classes } = useStyles();
+    return (react_1.default.createElement(react_1.default.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 = (0, configuration_1.getConf)(track, 'trackId');
+        return RenderingComponent ? (react_1.default.createElement("div", { className: classes.overlay, key: trackId, style: {
+                height: display.height,
+                overflow: 'hidden',
+            } },
+            react_1.default.createElement(RenderingComponent, { model: display }))) : null;
+    })));
+});
+exports.default = LinearComparativeRenderArea;

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

@@ -6,29 +6,10 @@ 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 configuration_1 = require("@jbrowse/core/configuration");
-const util_1 = require("@jbrowse/core/util");
-const ui_1 = require("@jbrowse/core/ui");
 const Rubberband_1 = __importDefault(require("./Rubberband"));
 const Header_1 = __importDefault(require("./Header"));
+const LinearComparativeRenderArea_1 = __importDefault(require("./LinearComparativeRenderArea"));
 const useStyles = (0, mui_1.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: {
@@ -44,56 +25,11 @@ const useStyles = (0, mui_1.makeStyles)()(theme => ({
         },
     },
 }));
-const Overlays = (0, mobx_react_1.observer)(({ model }) => {
+const LinearComparativeView = (0, mobx_react_1.observer)(function ({ model, }) {
     const { classes } = useStyles();
-    return (react_1.default.createElement(react_1.default.Fragment, null, model.tracks.map(track => {
-        const [display] = track.displays;
-        const { RenderingComponent } = display;
-        const trackId = (0, configuration_1.getConf)(track, 'trackId');
-        return RenderingComponent ? (react_1.default.createElement("div", { className: classes.overlay, key: trackId, style: {
-                height: model.middleComparativeHeight,
-                overflow: 'hidden',
-            } },
-            react_1.default.createElement(RenderingComponent, { model: display }))) : null;
-    })));
-});
-// The comparative is in the middle of the views
-const MiddleComparativeView = (0, mobx_react_1.observer)(({ model }) => {
-    const { classes } = useStyles();
-    const { views } = model;
-    const { pluginManager } = (0, util_1.getEnv)(model);
-    const { ReactComponent } = pluginManager.getViewType(views[0].type);
     return (react_1.default.createElement("div", { className: classes.rubberbandContainer },
         react_1.default.createElement(Header_1.default, { model: model }),
         react_1.default.createElement(Rubberband_1.default, { model: model, ControlComponent: react_1.default.createElement("div", { className: classes.rubberbandDiv }) }),
-        react_1.default.createElement("div", { className: classes.container },
-            react_1.default.createElement(ReactComponent, { model: views[0] }),
-            react_1.default.createElement("div", { className: classes.grid },
-                react_1.default.createElement(Overlays, { model: model })),
-            react_1.default.createElement(ui_1.ResizeHandle, { onDrag: n => model.setMiddleComparativeHeight(model.middleComparativeHeight + n), style: {
-                    height: 4,
-                    background: '#ccc',
-                } }),
-            react_1.default.createElement(ReactComponent, { model: views[1] }))));
-});
-const OverlayComparativeView = (0, mobx_react_1.observer)(({ model }) => {
-    const { classes } = useStyles();
-    const { views } = model;
-    const { pluginManager } = (0, util_1.getEnv)(model);
-    return (react_1.default.createElement("div", { className: classes.rubberbandContainer },
-        react_1.default.createElement(Header_1.default, { model: model }),
-        react_1.default.createElement(Rubberband_1.default, { model: model, ControlComponent: react_1.default.createElement("div", { className: classes.rubberbandDiv }) }),
-        react_1.default.createElement("div", { className: classes.container },
-            react_1.default.createElement("div", { className: classes.content },
-                react_1.default.createElement("div", { className: classes.relative }, views.map(view => {
-                    const { ReactComponent } = pluginManager.getViewType(view.type);
-                    return react_1.default.createElement(ReactComponent, { key: view.id, model: view });
-                })),
-                react_1.default.createElement(Overlays, { model: model })))));
-});
-const LinearComparativeView = (0, mobx_react_1.observer)(function (props) {
-    const { model } = props;
-    const middle = model.tracks.some(({ displays }) => displays.some((d) => (0, configuration_1.getConf)(d, 'middle')));
-    return middle ? (react_1.default.createElement(MiddleComparativeView, { ...props })) : (react_1.default.createElement(OverlayComparativeView, { ...props }));
+        react_1.default.createElement(LinearComparativeRenderArea_1.default, { model: model })));
 });
 exports.default = LinearComparativeView;

package/dist/LinearComparativeView/components/Rubberband.js

@@ -168,7 +168,7 @@ const LinearComparativeRubberband = (0, mobx_react_1.observer)(function Rubberba
             react_1.default.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/dist/LinearComparativeView/index.js

@@ -34,6 +34,9 @@ function LinearComparativeViewF(pluginManager) {
     pluginManager.addViewType(() => {
         return new ViewType_1.default({
             name: 'LinearComparativeView',
+            viewMetadata: {
+                hiddenFromGUI: true,
+            },
             displayName: 'Linear comparative view',
             stateModel: (0, model_1.default)(pluginManager),
             ReactComponent: (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./components/LinearComparativeView')))),