@jbrowse/plugin-breakpoint-split-view 3.6.4 → 3.7.0

package/dist/BreakpointSplitView/components/BreakpointSplitView.js

@@ -8,6 +8,7 @@ const util_1 = require("@jbrowse/core/util");
 const mobx_react_1 = require("mobx-react");
 const mui_1 = require("tss-react/mui");
 const BreakpointSplitViewOverlay_1 = __importDefault(require("./BreakpointSplitViewOverlay"));
+const Header_1 = __importDefault(require("./Header"));
 const useStyles = (0, mui_1.makeStyles)()(theme => ({
     viewDivider: {
         background: theme.palette.secondary.main,
@@ -40,6 +41,6 @@ const BreakpointSplitViewLevels = (0, mobx_react_1.observer)(function ({ model,
 });
 const BreakpointSplitView = (0, mobx_react_1.observer)(function ({ model, }) {
     const { classes } = useStyles();
-    return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)("div", { className: classes.container, children: [(0, jsx_runtime_1.jsx)(BreakpointSplitViewLevels, { model: model }), (0, jsx_runtime_1.jsx)(BreakpointSplitViewOverlay_1.default, { model: model })] }) }));
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [model.showHeader ? (0, jsx_runtime_1.jsx)(Header_1.default, { model: model }) : null, (0, jsx_runtime_1.jsxs)("div", { className: classes.container, children: [(0, jsx_runtime_1.jsx)(BreakpointSplitViewLevels, { model: model }), (0, jsx_runtime_1.jsx)(BreakpointSplitViewOverlay_1.default, { model: model })] })] }));
 });
 exports.default = BreakpointSplitView;

package/dist/BreakpointSplitView/components/Header.d.ts

@@ -0,0 +1,5 @@
+import type { BreakpointViewModel } from '../model';
+declare const Header: ({ model }: {
+    model: BreakpointViewModel;
+}) => import("react/jsx-runtime").JSX.Element;
+export default Header;

package/dist/BreakpointSplitView/components/Header.js

@@ -0,0 +1,52 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const CascadingMenuButton_1 = __importDefault(require("@jbrowse/core/ui/CascadingMenuButton"));
+const MoreVert_1 = __importDefault(require("@mui/icons-material/MoreVert"));
+const Search_1 = __importDefault(require("@mui/icons-material/Search"));
+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: {
+        display: 'inline-flex',
+    },
+});
+const Header = (0, mobx_react_1.observer)(function ({ model }) {
+    const { classes } = useStyles();
+    const { views } = model;
+    const [showSearchBoxes, setShowSearchBoxes] = (0, react_1.useState)(views.length <= 3);
+    const [sideBySide, setSideBySide] = (0, react_1.useState)(views.length <= 3);
+    return ((0, jsx_runtime_1.jsxs)(material_1.FormGroup, { row: true, children: [(0, jsx_runtime_1.jsx)(CascadingMenuButton_1.default, { menuItems: model.menuItems(), children: (0, jsx_runtime_1.jsx)(MoreVert_1.default, {}) }), (0, jsx_runtime_1.jsx)(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);
+                        },
+                    },
+                ], children: (0, jsx_runtime_1.jsx)(Search_1.default, {}) }), showSearchBoxes ? ((0, jsx_runtime_1.jsx)("span", { className: sideBySide ? classes.inline : undefined, children: views.map(view => ((0, jsx_runtime_1.jsx)(HeaderSearchBoxes_1.default, { view: view }, view.id))) })) : null] }));
+});
+exports.default = Header;

package/dist/BreakpointSplitView/components/HeaderSearchBoxes.d.ts

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

package/dist/BreakpointSplitView/components/HeaderSearchBoxes.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+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");
+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 { assemblyDisplayNames, coarseTotalBp } = view;
+    return ((0, jsx_runtime_1.jsxs)("span", { className: classes.searchBox, children: [(0, jsx_runtime_1.jsx)(plugin_linear_genome_view_1.SearchBox, { model: view, showHelp: false }), (0, jsx_runtime_1.jsxs)(material_1.Typography, { variant: "body2", color: "textSecondary", className: classes.bp, children: [assemblyDisplayNames.join(','), " ", (0, util_1.getBpDisplayStr)(coarseTotalBp)] })] }));
+});
+exports.default = HeaderSearchBoxes;

package/dist/BreakpointSplitView/model.d.ts

@@ -13,6 +13,7 @@ export default function stateModelFactory(pluginManager: PluginManager): import(
     showIntraviewLinks: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
     linkViews: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
     interactiveOverlay: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    showHeader: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
     views: import("mobx-state-tree").IArrayType<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>>;
@@ -64,8 +65,8 @@ export default function stateModelFactory(pluginManager: PluginManager): import(
         readonly interRegionPaddingWidth: number;
         readonly assemblyNames: string[];
         readonly assemblyDisplayNames: string[];
-        readonly isTopLevelView: import("@jbrowse/core/util").AbstractViewModel | undefined;
-        readonly stickyViewHeaders: boolean | undefined;
+        readonly isTopLevelView: boolean;
+        readonly stickyViewHeaders: boolean;
         readonly rubberbandTop: number;
         readonly pinnedTracksTop: number;
     } & {
@@ -301,6 +302,7 @@ export default function stateModelFactory(pluginManager: PluginManager): import(
     setInteractiveOverlay(arg: boolean): void;
     setShowIntraviewLinks(arg: boolean): void;
     setLinkViews(arg: boolean): void;
+    setShowHeader(arg: boolean): void;
     setMatchedTrackFeatures(obj: Record<string, Feature[][]>): void;
     reverseViewOrder(): void;
 } & {

package/dist/BreakpointSplitView/model.js

@@ -58,6 +58,7 @@ function stateModelFactory(pluginManager) {
         showIntraviewLinks: true,
         linkViews: false,
         interactiveOverlay: true,
+        showHeader: false,
         views: mobx_state_tree_1.types.array(pluginManager.getViewType('LinearGenomeView')
             .stateModel),
     }))
@@ -154,6 +155,9 @@ function stateModelFactory(pluginManager) {
         setLinkViews(arg) {
             self.linkViews = arg;
         },
+        setShowHeader(arg) {
+            self.showHeader = arg;
+        },
         setMatchedTrackFeatures(obj) {
             self.matchedTrackFeatures = obj;
         },
@@ -200,6 +204,14 @@ function stateModelFactory(pluginManager) {
                         },
                     ]
                     : []),
+                {
+                    label: 'Show header',
+                    type: 'checkbox',
+                    checked: self.showHeader,
+                    onClick: () => {
+                        self.setShowHeader(!self.showHeader);
+                    },
+                },
                 {
                     label: 'Show intra-view links',
                     type: 'checkbox',

package/esm/BreakpointSplitView/components/BreakpointSplitView.js

@@ -3,6 +3,7 @@ import { getEnv } from '@jbrowse/core/util';
 import { observer } from 'mobx-react';
 import { makeStyles } from 'tss-react/mui';
 import BreakpointSplitViewOverlay from './BreakpointSplitViewOverlay';
+import Header from './Header';
 const useStyles = makeStyles()(theme => ({
     viewDivider: {
         background: theme.palette.secondary.main,
@@ -35,6 +36,6 @@ const BreakpointSplitViewLevels = observer(function ({ model, }) {
 });
 const BreakpointSplitView = observer(function ({ model, }) {
     const { classes } = useStyles();
-    return (_jsx("div", { children: _jsxs("div", { className: classes.container, children: [_jsx(BreakpointSplitViewLevels, { model: model }), _jsx(BreakpointSplitViewOverlay, { model: model })] }) }));
+    return (_jsxs("div", { children: [model.showHeader ? _jsx(Header, { model: model }) : null, _jsxs("div", { className: classes.container, children: [_jsx(BreakpointSplitViewLevels, { model: model }), _jsx(BreakpointSplitViewOverlay, { model: model })] })] }));
 });
 export default BreakpointSplitView;

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

@@ -0,0 +1,5 @@
+import type { BreakpointViewModel } from '../model';
+declare const Header: ({ model }: {
+    model: BreakpointViewModel;
+}) => import("react/jsx-runtime").JSX.Element;
+export default Header;

package/esm/BreakpointSplitView/components/Header.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton';
+import MoreVertIcon from '@mui/icons-material/MoreVert';
+import SearchIcon from '@mui/icons-material/Search';
+import { FormGroup } from '@mui/material';
+import { observer } from 'mobx-react';
+import { makeStyles } from 'tss-react/mui';
+import HeaderSearchBoxes from './HeaderSearchBoxes';
+const useStyles = makeStyles()({
+    inline: {
+        display: 'inline-flex',
+    },
+});
+const Header = observer(function ({ model }) {
+    const { classes } = useStyles();
+    const { views } = model;
+    const [showSearchBoxes, setShowSearchBoxes] = useState(views.length <= 3);
+    const [sideBySide, setSideBySide] = useState(views.length <= 3);
+    return (_jsxs(FormGroup, { row: true, children: [_jsx(CascadingMenuButton, { menuItems: model.menuItems(), children: _jsx(MoreVertIcon, {}) }), _jsx(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);
+                        },
+                    },
+                ], children: _jsx(SearchIcon, {}) }), showSearchBoxes ? (_jsx("span", { className: sideBySide ? classes.inline : undefined, children: views.map(view => (_jsx(HeaderSearchBoxes, { view: view }, view.id))) })) : null] }));
+});
+export default Header;

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

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

package/esm/BreakpointSplitView/components/HeaderSearchBoxes.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getBpDisplayStr } from '@jbrowse/core/util';
+import { SearchBox } from '@jbrowse/plugin-linear-genome-view';
+import { Typography } from '@mui/material';
+import { observer } from 'mobx-react';
+import { makeStyles } from 'tss-react/mui';
+const useStyles = makeStyles()(() => ({
+    bp: {
+        display: 'flex',
+        alignItems: 'center',
+        marginLeft: 10,
+    },
+    searchBox: {
+        display: 'flex',
+    },
+}));
+const HeaderSearchBoxes = observer(function ({ view, }) {
+    const { classes } = useStyles();
+    const { assemblyDisplayNames, coarseTotalBp } = view;
+    return (_jsxs("span", { className: classes.searchBox, children: [_jsx(SearchBox, { model: view, showHelp: false }), _jsxs(Typography, { variant: "body2", color: "textSecondary", className: classes.bp, children: [assemblyDisplayNames.join(','), " ", getBpDisplayStr(coarseTotalBp)] })] }));
+});
+export default HeaderSearchBoxes;

package/esm/BreakpointSplitView/model.d.ts

@@ -13,6 +13,7 @@ export default function stateModelFactory(pluginManager: PluginManager): import(
     showIntraviewLinks: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
     linkViews: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
     interactiveOverlay: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    showHeader: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
     views: import("mobx-state-tree").IArrayType<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>>;
@@ -64,8 +65,8 @@ export default function stateModelFactory(pluginManager: PluginManager): import(
         readonly interRegionPaddingWidth: number;
         readonly assemblyNames: string[];
         readonly assemblyDisplayNames: string[];
-        readonly isTopLevelView: import("@jbrowse/core/util").AbstractViewModel | undefined;
-        readonly stickyViewHeaders: boolean | undefined;
+        readonly isTopLevelView: boolean;
+        readonly stickyViewHeaders: boolean;
         readonly rubberbandTop: number;
         readonly pinnedTracksTop: number;
     } & {
@@ -301,6 +302,7 @@ export default function stateModelFactory(pluginManager: PluginManager): import(
     setInteractiveOverlay(arg: boolean): void;
     setShowIntraviewLinks(arg: boolean): void;
     setLinkViews(arg: boolean): void;
+    setShowHeader(arg: boolean): void;
     setMatchedTrackFeatures(obj: Record<string, Feature[][]>): void;
     reverseViewOrder(): void;
 } & {

package/esm/BreakpointSplitView/model.js

@@ -19,6 +19,7 @@ export default function stateModelFactory(pluginManager) {
         showIntraviewLinks: true,
         linkViews: false,
         interactiveOverlay: true,
+        showHeader: false,
         views: types.array(pluginManager.getViewType('LinearGenomeView')
             .stateModel),
     }))
@@ -115,6 +116,9 @@ export default function stateModelFactory(pluginManager) {
         setLinkViews(arg) {
             self.linkViews = arg;
         },
+        setShowHeader(arg) {
+            self.showHeader = arg;
+        },
         setMatchedTrackFeatures(obj) {
             self.matchedTrackFeatures = obj;
         },
@@ -161,6 +165,14 @@ export default function stateModelFactory(pluginManager) {
                         },
                     ]
                     : []),
+                {
+                    label: 'Show header',
+                    type: 'checkbox',
+                    checked: self.showHeader,
+                    onClick: () => {
+                        self.setShowHeader(!self.showHeader);
+                    },
+                },
                 {
                     label: 'Show intra-view links',
                     type: 'checkbox',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/plugin-breakpoint-split-view",
-  "version": "3.6.4",
+  "version": "3.7.0",
   "description": "JBrowse 2 breakpoint detail split view",
   "keywords": [
     "jbrowse",
@@ -37,8 +37,8 @@
   },
   "dependencies": {
     "@gmod/vcf": "^6.0.8",
-    "@jbrowse/core": "^3.6.4",
-    "@jbrowse/plugin-linear-genome-view": "^3.6.4",
+    "@jbrowse/core": "^3.7.0",
+    "@jbrowse/plugin-linear-genome-view": "^3.7.0",
     "@mui/icons-material": "^7.0.0",
     "@mui/material": "^7.0.0",
     "@types/file-saver": "^2.0.1",
@@ -58,5 +58,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "3db8e50ce2bd9c081efbf6c2e7ae5f342380a25a"
+  "gitHead": "85bdd0d58286b7adbfd408146b15847676317635"
 }