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

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')))),