@jbrowse/plugin-breakpoint-split-view 2.7.1 → 2.8.0

package/dist/BreakpointSplitView/BreakpointSplitView.d.ts

@@ -1,9 +1,10 @@
-import { Feature } from '@jbrowse/core/util';
+import { Feature, Region } from '@jbrowse/core/util';
 import ViewType from '@jbrowse/core/pluggableElementTypes/ViewType';
-import { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view';
-type LGV = LinearGenomeViewModel;
+import { IStateTreeNode } from 'mobx-state-tree';
 export default class BreakpointSplitViewType extends ViewType {
-    snapshotFromBreakendFeature(feature: Feature, view: LGV): {
+    snapshotFromBreakendFeature(feature: Feature, view: {
+        displayedRegions: Region[];
+    } & IStateTreeNode): {
         type: string;
         views: {
             type: string;
@@ -18,6 +19,6 @@ export default class BreakpointSplitViewType extends ViewType {
             offsetPx: number;
         }[];
         displayName: string;
+        featureData: unknown;
     };
 }
-export {};

package/dist/BreakpointSplitView/BreakpointSplitView.js

@@ -24,8 +24,7 @@ class BreakpointSplitViewType extends ViewType_1.default {
         if (!assembly.regions) {
             throw new Error(`assembly ${assemblyName} regions not loaded`);
         }
-        const { getCanonicalRefName } = assembly;
-        const featureRefName = getCanonicalRefName(feature.get('refName'));
+        const featureRefName = assembly.getCanonicalRefName(feature.get('refName'));
         const topRegion = assembly.regions.find(f => f.refName === featureRefName);
         let mateRefName;
         let startMod = 0;
@@ -34,12 +33,12 @@ class BreakpointSplitViewType extends ViewType_1.default {
         if (alt === '<TRA>') {
             const INFO = feature.get('INFO');
             endPos = INFO.END[0] - 1;
-            mateRefName = getCanonicalRefName(INFO.CHR2[0]);
+            mateRefName = assembly.getCanonicalRefName(INFO.CHR2[0]);
         }
         else if (bnd === null || bnd === void 0 ? void 0 : bnd.MatePosition) {
             const matePosition = bnd.MatePosition.split(':');
             endPos = +matePosition[1] - 1;
-            mateRefName = getCanonicalRefName(matePosition[0]);
+            mateRefName = assembly.getCanonicalRefName(matePosition[0]);
             if (bnd.Join === 'left') {
                 startMod = -1;
             }
@@ -50,7 +49,7 @@ class BreakpointSplitViewType extends ViewType_1.default {
         else if (feature.get('mate')) {
             // a generic 'mate' feature
             const mate = feature.get('mate');
-            mateRefName = getCanonicalRefName(mate.refName);
+            mateRefName = assembly.getCanonicalRefName(mate.refName);
             endPos = mate.start;
         }
         if (!mateRefName) {
@@ -85,6 +84,7 @@ class BreakpointSplitViewType extends ViewType_1.default {
                 },
             ],
             displayName: `${feature.get('name') || feature.get('id') || 'breakend'} split detail`,
+            featureData: undefined,
         };
     }
 }

package/dist/BreakpointSplitView/components/BreakpointSplitView.js

@@ -1,36 +1,13 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importStar(require("react"));
+const react_1 = __importDefault(require("react"));
 const mobx_react_1 = require("mobx-react");
 const mobx_state_tree_1 = require("mobx-state-tree");
 const mui_1 = require("tss-react/mui");
-const Overlay_1 = __importDefault(require("./Overlay"));
+const BreakpointSplitViewOverlay_1 = __importDefault(require("./BreakpointSplitViewOverlay"));
 const useStyles = (0, mui_1.makeStyles)()(theme => ({
     viewDivider: {
         background: theme.palette.secondary.main,
@@ -39,50 +16,32 @@ const useStyles = (0, mui_1.makeStyles)()(theme => ({
     container: {
         display: 'grid',
     },
-    overlay: {
-        display: 'flex',
-        width: '100%',
-        gridArea: '1/1',
-        '& path': {
-            cursor: 'crosshair',
-            fill: 'none',
-        },
-    },
     content: {
         gridArea: '1/1',
     },
 }));
-const BreakpointSplitView = (0, mobx_react_1.observer)(function ({ model, }) {
+const BreakpointSplitViewLevels = (0, mobx_react_1.observer)(function ({ model, }) {
     const { classes } = useStyles();
     const { views } = model;
     const { pluginManager } = (0, mobx_state_tree_1.getEnv)(model);
-    const ref = (0, react_1.useRef)(null);
+    return (react_1.default.createElement("div", { className: classes.content },
+        react_1.default.createElement("div", { style: { position: 'relative' } }, views.map((view, idx) => {
+            const { ReactComponent } = pluginManager.getViewType(view.type);
+            const viewComponent = react_1.default.createElement(ReactComponent, { key: view.id, model: view });
+            if (idx === views.length - 1) {
+                return viewComponent;
+            }
+            return [
+                viewComponent,
+                react_1.default.createElement("div", { key: `${view.id}-divider`, className: classes.viewDivider }),
+            ];
+        }))));
+});
+const BreakpointSplitView = (0, mobx_react_1.observer)(function ({ model, }) {
+    const { classes } = useStyles();
     return (react_1.default.createElement("div", null,
         react_1.default.createElement("div", { className: classes.container },
-            react_1.default.createElement("div", { className: classes.content },
-                react_1.default.createElement("div", { style: { position: 'relative' } }, views.map((view, idx) => {
-                    const { ReactComponent } = pluginManager.getViewType(view.type);
-                    const viewComponent = (react_1.default.createElement(ReactComponent, { key: view.id, model: view }));
-                    if (idx === views.length - 1) {
-                        return viewComponent;
-                    }
-                    return [
-                        viewComponent,
-                        react_1.default.createElement("div", { key: `${view.id}-divider`, className: classes.viewDivider }),
-                    ];
-                }))),
-            react_1.default.createElement("div", { className: classes.overlay },
-                react_1.default.createElement("svg", { ref: ref, style: {
-                        width: '100%',
-                        zIndex: 10,
-                        pointerEvents: model.interactToggled ? undefined : 'none',
-                    } }, model.matchedTracks.map(track => (
-                // note: we must pass ref down, because the child component
-                // needs to getBoundingClientRect on the this components SVG,
-                // and we cannot rely on using getBoundingClientRect in this
-                // component to make sure this works because if it gets
-                // shifted around by another element, this will not re-render
-                // necessarily
-                react_1.default.createElement(Overlay_1.default, { parentRef: ref, key: track.configuration.trackId, model: model, trackId: track.configuration.trackId }))))))));
+            react_1.default.createElement(BreakpointSplitViewLevels, { model: model }),
+            react_1.default.createElement(BreakpointSplitViewOverlay_1.default, { model: model }))));
 });
 exports.default = BreakpointSplitView;

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

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

package/dist/BreakpointSplitView/components/BreakpointSplitViewOverlay.js

@@ -0,0 +1,61 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const mui_1 = require("tss-react/mui");
+const Overlay_1 = __importDefault(require("./Overlay"));
+const mobx_react_1 = require("mobx-react");
+const useStyles = (0, mui_1.makeStyles)()({
+    overlay: {
+        display: 'flex',
+        width: '100%',
+        gridArea: '1/1',
+        '& path': {
+            cursor: 'crosshair',
+            fill: 'none',
+        },
+    },
+});
+const BreakpointSplitViewOverlay = (0, mobx_react_1.observer)(function ({ model, }) {
+    const { classes } = useStyles();
+    const { matchedTracks, interactToggled } = model;
+    const ref = (0, react_1.useRef)(null);
+    return (react_1.default.createElement("div", { className: classes.overlay },
+        react_1.default.createElement("svg", { ref: ref, style: {
+                width: '100%',
+                zIndex: 10,
+                pointerEvents: interactToggled ? undefined : 'none',
+            } }, matchedTracks.map(track => (
+        // note: we must pass ref down, because the child component needs to
+        // getBoundingClientRect on the this components SVG, and we cannot
+        // rely on using getBoundingClientRect in this component to make
+        // sure this works because if it gets shifted around by another
+        // element, this will not re-render necessarily
+        react_1.default.createElement(Overlay_1.default, { parentRef: ref, key: track.configuration.trackId, model: model, trackId: track.configuration.trackId }))))));
+});
+exports.default = BreakpointSplitViewOverlay;

package/dist/BreakpointSplitView/model.d.ts

@@ -24,6 +24,9 @@ export interface Breakend {
     MatePosition: string;
 }
 export type LayoutRecord = [number, number, number, number];
+/**
+ * #stateModel BreakpointSplitView
+ */
 export default function stateModelFactory(pluginManager: PluginManager): import("mobx-state-tree").IModelType<{
     id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
     displayName: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
@@ -59,9 +62,9 @@ export default function stateModelFactory(pluginManager: PluginManager): import(
         hideHeaderOverview: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
         hideNoTracksActive: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
         trackSelectorType: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
-        trackLabels: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
         showCenterLine: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
         showCytobandsSetting: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
+        trackLabels: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
         showGridlines: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
     }, {
         width: number;
@@ -84,6 +87,7 @@ export default function stateModelFactory(pluginManager: PluginManager): import(
         leftOffset: import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView").BpOffset | undefined;
         rightOffset: import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView").BpOffset | undefined;
     } & {
+        readonly trackLabelsSetting: any;
         readonly width: number;
         readonly interRegionPaddingWidth: number;
         readonly assemblyNames: string[];
@@ -242,10 +246,32 @@ export default function stateModelFactory(pluginManager: PluginManager): import(
      */
     exportSvg(opts?: ExportSvgOptions): Promise<void>;
 } & {
+    /**
+     * #getter
+     * Find all track ids that match across multiple views
+     */
     readonly matchedTracks: any[];
+    /**
+     * #method
+     * Get tracks with a given trackId across multiple views
+     */
     getMatchedTracks(trackConfigId: string): any[];
+    /**
+     * #method
+     *
+     * Translocation features are handled differently
+     * since they do not have a mate e.g. they are one sided
+     */
     hasTranslocations(trackConfigId: string): Feature | undefined;
+    /**
+     * #method
+     * Get a composite map of featureId-\>feature map for a track across
+     * multiple views
+     */
     getTrackFeatures(trackConfigId: string): Map<string, Feature>;
+    /**
+     * #method
+     */
     getMatchedFeaturesInLayout(trackConfigId: string, features: Feature[][]): {
         feature: Feature;
         layout: LayoutRecord | undefined;
@@ -254,15 +280,39 @@ export default function stateModelFactory(pluginManager: PluginManager): import(
 } & {
     afterAttach(): void;
     onSubviewAction(actionName: string, path: string, args?: unknown[]): void;
+    /**
+     * #action
+     */
     setWidth(newWidth: number): void;
+    /**
+     * #action
+     */
     removeView(view: LGV): void;
+    /**
+     * #action
+     */
     closeView(): void;
+    /**
+     * #action
+     */
     toggleInteract(): void;
+    /**
+     * #action
+     */
     toggleIntraviewLinks(): void;
+    /**
+     * #action
+     */
     toggleLinkViews(): void;
+    /**
+     * #action
+     */
     setMatchedTrackFeatures(obj: Record<string, Feature[][]>): void;
 } & {
     afterAttach(): void;
+    /**
+     * #method
+     */
     menuItems(): ({
         label: string;
         subMenu: import("@jbrowse/core/ui").MenuItem[];

package/dist/BreakpointSplitView/model.js

@@ -59,20 +59,44 @@ async function getBlockFeatures(model, track) {
         regions: view.staticBlocks.contentBlocks,
     })).flat()));
 }
+/**
+ * #stateModel BreakpointSplitView
+ */
 function stateModelFactory(pluginManager) {
     const minHeight = 40;
     const defaultHeight = 400;
-    const model = mobx_state_tree_1.types
-        .model('BreakpointSplitView', {
+    return mobx_state_tree_1.types
+        .compose('BreakpointSplitView', models_1.BaseViewModel, mobx_state_tree_1.types.model({
+        /**
+         * #property
+         */
         type: mobx_state_tree_1.types.literal('BreakpointSplitView'),
+        /**
+         * #property
+         */
         height: mobx_state_tree_1.types.optional(mobx_state_tree_1.types.refinement('viewHeight', mobx_state_tree_1.types.number, (n) => n >= minHeight), defaultHeight),
+        /**
+         * #property
+         */
         trackSelectorType: 'hierarchical',
+        /**
+         * #property
+         */
         showIntraviewLinks: true,
+        /**
+         * #property
+         */
         linkViews: false,
+        /**
+         * #property
+         */
         interactToggled: false,
+        /**
+         * #property
+         */
         views: mobx_state_tree_1.types.array(pluginManager.getViewType('LinearGenomeView')
             .stateModel),
-    })
+    }))
         .volatile(() => ({
         width: 800,
         matchedTrackFeatures: {},
@@ -90,27 +114,43 @@ function stateModelFactory(pluginManager) {
         },
     }))
         .views(self => ({
-        // Find all track ids that match across multiple views
+        /**
+         * #getter
+         * Find all track ids that match across multiple views
+         */
         get matchedTracks() {
             return (0, util_2.intersect)(elt => elt.configuration.trackId, ...self.views.map(view => view.tracks));
         },
-        // Get tracks with a given trackId across multiple views
+        /**
+         * #method
+         * Get tracks with a given trackId across multiple views
+         */
         getMatchedTracks(trackConfigId) {
             return self.views
                 .map(view => view.getTrack(trackConfigId))
                 .filter(f => !!f);
         },
-        // Translocation features are handled differently
-        // since they do not have a mate e.g. they are one sided
+        /**
+         * #method
+         *
+         * Translocation features are handled differently
+         * since they do not have a mate e.g. they are one sided
+         */
         hasTranslocations(trackConfigId) {
             return [...this.getTrackFeatures(trackConfigId).values()].find(f => f.get('type') === 'translocation');
         },
-        // Get a composite map of featureId->feature map for a track across
-        // multiple views
+        /**
+         * #method
+         * Get a composite map of featureId-\>feature map for a track across
+         * multiple views
+         */
         getTrackFeatures(trackConfigId) {
             var _a;
             return new Map((_a = self.matchedTrackFeatures[trackConfigId]) === null || _a === void 0 ? void 0 : _a.flat().map(f => [f.id(), f]));
         },
+        /**
+         * #method
+         */
         getMatchedFeaturesInLayout(trackConfigId, features) {
             // use reverse to search the second track first
             const tracks = this.getMatchedTracks(trackConfigId);
@@ -157,26 +197,47 @@ function stateModelFactory(pluginManager) {
                 }
             });
         },
+        /**
+         * #action
+         */
         setWidth(newWidth) {
             self.width = newWidth;
             self.views.forEach(v => v.setWidth(newWidth));
         },
+        /**
+         * #action
+         */
         removeView(view) {
             self.views.remove(view);
         },
+        /**
+         * #action
+         */
         closeView() {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             (0, mobx_state_tree_1.getParent)(self, 2).removeView(self);
         },
+        /**
+         * #action
+         */
         toggleInteract() {
             self.interactToggled = !self.interactToggled;
         },
+        /**
+         * #action
+         */
         toggleIntraviewLinks() {
             self.showIntraviewLinks = !self.showIntraviewLinks;
         },
+        /**
+         * #action
+         */
         toggleLinkViews() {
             self.linkViews = !self.linkViews;
         },
+        /**
+         * #action
+         */
         setMatchedTrackFeatures(obj) {
             self.matchedTrackFeatures = obj;
         },
@@ -200,6 +261,9 @@ function stateModelFactory(pluginManager) {
                 }
             }));
         },
+        /**
+         * #method
+         */
         menuItems() {
             return [
                 ...self.views
@@ -240,6 +304,5 @@ function stateModelFactory(pluginManager) {
             ];
         },
     }));
-    return mobx_state_tree_1.types.compose(models_1.BaseViewModel, model);
 }
 exports.default = stateModelFactory;

package/esm/BreakpointSplitView/BreakpointSplitView.d.ts

@@ -1,9 +1,10 @@
-import { Feature } from '@jbrowse/core/util';
+import { Feature, Region } from '@jbrowse/core/util';
 import ViewType from '@jbrowse/core/pluggableElementTypes/ViewType';
-import { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view';
-type LGV = LinearGenomeViewModel;
+import { IStateTreeNode } from 'mobx-state-tree';
 export default class BreakpointSplitViewType extends ViewType {
-    snapshotFromBreakendFeature(feature: Feature, view: LGV): {
+    snapshotFromBreakendFeature(feature: Feature, view: {
+        displayedRegions: Region[];
+    } & IStateTreeNode): {
         type: string;
         views: {
             type: string;
@@ -18,6 +19,6 @@ export default class BreakpointSplitViewType extends ViewType {
             offsetPx: number;
         }[];
         displayName: string;
+        featureData: unknown;
     };
 }
-export {};

package/esm/BreakpointSplitView/BreakpointSplitView.js

@@ -19,8 +19,7 @@ export default class BreakpointSplitViewType extends ViewType {
         if (!assembly.regions) {
             throw new Error(`assembly ${assemblyName} regions not loaded`);
         }
-        const { getCanonicalRefName } = assembly;
-        const featureRefName = getCanonicalRefName(feature.get('refName'));
+        const featureRefName = assembly.getCanonicalRefName(feature.get('refName'));
         const topRegion = assembly.regions.find(f => f.refName === featureRefName);
         let mateRefName;
         let startMod = 0;
@@ -29,12 +28,12 @@ export default class BreakpointSplitViewType extends ViewType {
         if (alt === '<TRA>') {
             const INFO = feature.get('INFO');
             endPos = INFO.END[0] - 1;
-            mateRefName = getCanonicalRefName(INFO.CHR2[0]);
+            mateRefName = assembly.getCanonicalRefName(INFO.CHR2[0]);
         }
         else if (bnd === null || bnd === void 0 ? void 0 : bnd.MatePosition) {
             const matePosition = bnd.MatePosition.split(':');
             endPos = +matePosition[1] - 1;
-            mateRefName = getCanonicalRefName(matePosition[0]);
+            mateRefName = assembly.getCanonicalRefName(matePosition[0]);
             if (bnd.Join === 'left') {
                 startMod = -1;
             }
@@ -45,7 +44,7 @@ export default class BreakpointSplitViewType extends ViewType {
         else if (feature.get('mate')) {
             // a generic 'mate' feature
             const mate = feature.get('mate');
-            mateRefName = getCanonicalRefName(mate.refName);
+            mateRefName = assembly.getCanonicalRefName(mate.refName);
             endPos = mate.start;
         }
         if (!mateRefName) {
@@ -80,6 +79,7 @@ export default class BreakpointSplitViewType extends ViewType {
                 },
             ],
             displayName: `${feature.get('name') || feature.get('id') || 'breakend'} split detail`,
+            featureData: undefined,
         };
     }
 }

package/esm/BreakpointSplitView/components/BreakpointSplitView.js

@@ -1,8 +1,8 @@
-import React, { useRef } from 'react';
+import React from 'react';
 import { observer } from 'mobx-react';
 import { getEnv } from 'mobx-state-tree';
 import { makeStyles } from 'tss-react/mui';
-import Overlay from './Overlay';
+import BreakpointSplitViewOverlay from './BreakpointSplitViewOverlay';
 const useStyles = makeStyles()(theme => ({
     viewDivider: {
         background: theme.palette.secondary.main,
@@ -11,50 +11,32 @@ const useStyles = makeStyles()(theme => ({
     container: {
         display: 'grid',
     },
-    overlay: {
-        display: 'flex',
-        width: '100%',
-        gridArea: '1/1',
-        '& path': {
-            cursor: 'crosshair',
-            fill: 'none',
-        },
-    },
     content: {
         gridArea: '1/1',
     },
 }));
-const BreakpointSplitView = observer(function ({ model, }) {
+const BreakpointSplitViewLevels = observer(function ({ model, }) {
     const { classes } = useStyles();
     const { views } = model;
     const { pluginManager } = getEnv(model);
-    const ref = useRef(null);
+    return (React.createElement("div", { className: classes.content },
+        React.createElement("div", { style: { position: 'relative' } }, views.map((view, idx) => {
+            const { ReactComponent } = pluginManager.getViewType(view.type);
+            const viewComponent = React.createElement(ReactComponent, { key: view.id, model: view });
+            if (idx === views.length - 1) {
+                return viewComponent;
+            }
+            return [
+                viewComponent,
+                React.createElement("div", { key: `${view.id}-divider`, className: classes.viewDivider }),
+            ];
+        }))));
+});
+const BreakpointSplitView = observer(function ({ model, }) {
+    const { classes } = useStyles();
     return (React.createElement("div", null,
         React.createElement("div", { className: classes.container },
-            React.createElement("div", { className: classes.content },
-                React.createElement("div", { style: { position: 'relative' } }, views.map((view, idx) => {
-                    const { ReactComponent } = pluginManager.getViewType(view.type);
-                    const viewComponent = (React.createElement(ReactComponent, { key: view.id, model: view }));
-                    if (idx === views.length - 1) {
-                        return viewComponent;
-                    }
-                    return [
-                        viewComponent,
-                        React.createElement("div", { key: `${view.id}-divider`, className: classes.viewDivider }),
-                    ];
-                }))),
-            React.createElement("div", { className: classes.overlay },
-                React.createElement("svg", { ref: ref, style: {
-                        width: '100%',
-                        zIndex: 10,
-                        pointerEvents: model.interactToggled ? undefined : 'none',
-                    } }, model.matchedTracks.map(track => (
-                // note: we must pass ref down, because the child component
-                // needs to getBoundingClientRect on the this components SVG,
-                // and we cannot rely on using getBoundingClientRect in this
-                // component to make sure this works because if it gets
-                // shifted around by another element, this will not re-render
-                // necessarily
-                React.createElement(Overlay, { parentRef: ref, key: track.configuration.trackId, model: model, trackId: track.configuration.trackId }))))))));
+            React.createElement(BreakpointSplitViewLevels, { model: model }),
+            React.createElement(BreakpointSplitViewOverlay, { model: model }))));
 });
 export default BreakpointSplitView;

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

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

package/esm/BreakpointSplitView/components/BreakpointSplitViewOverlay.js

@@ -0,0 +1,33 @@
+import React, { useRef } from 'react';
+import { makeStyles } from 'tss-react/mui';
+import Overlay from './Overlay';
+import { observer } from 'mobx-react';
+const useStyles = makeStyles()({
+    overlay: {
+        display: 'flex',
+        width: '100%',
+        gridArea: '1/1',
+        '& path': {
+            cursor: 'crosshair',
+            fill: 'none',
+        },
+    },
+});
+const BreakpointSplitViewOverlay = observer(function ({ model, }) {
+    const { classes } = useStyles();
+    const { matchedTracks, interactToggled } = model;
+    const ref = useRef(null);
+    return (React.createElement("div", { className: classes.overlay },
+        React.createElement("svg", { ref: ref, style: {
+                width: '100%',
+                zIndex: 10,
+                pointerEvents: interactToggled ? undefined : 'none',
+            } }, matchedTracks.map(track => (
+        // note: we must pass ref down, because the child component needs to
+        // getBoundingClientRect on the this components SVG, and we cannot
+        // rely on using getBoundingClientRect in this component to make
+        // sure this works because if it gets shifted around by another
+        // element, this will not re-render necessarily
+        React.createElement(Overlay, { parentRef: ref, key: track.configuration.trackId, model: model, trackId: track.configuration.trackId }))))));
+});
+export default BreakpointSplitViewOverlay;

package/esm/BreakpointSplitView/model.d.ts

@@ -24,6 +24,9 @@ export interface Breakend {
     MatePosition: string;
 }
 export type LayoutRecord = [number, number, number, number];
+/**
+ * #stateModel BreakpointSplitView
+ */
 export default function stateModelFactory(pluginManager: PluginManager): import("mobx-state-tree").IModelType<{
     id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
     displayName: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
@@ -59,9 +62,9 @@ export default function stateModelFactory(pluginManager: PluginManager): import(
         hideHeaderOverview: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
         hideNoTracksActive: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
         trackSelectorType: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
-        trackLabels: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
         showCenterLine: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
         showCytobandsSetting: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
+        trackLabels: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
         showGridlines: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
     }, {
         width: number;
@@ -84,6 +87,7 @@ export default function stateModelFactory(pluginManager: PluginManager): import(
         leftOffset: import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView").BpOffset | undefined;
         rightOffset: import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView").BpOffset | undefined;
     } & {
+        readonly trackLabelsSetting: any;
         readonly width: number;
         readonly interRegionPaddingWidth: number;
         readonly assemblyNames: string[];
@@ -242,10 +246,32 @@ export default function stateModelFactory(pluginManager: PluginManager): import(
      */
     exportSvg(opts?: ExportSvgOptions): Promise<void>;
 } & {
+    /**
+     * #getter
+     * Find all track ids that match across multiple views
+     */
     readonly matchedTracks: any[];
+    /**
+     * #method
+     * Get tracks with a given trackId across multiple views
+     */
     getMatchedTracks(trackConfigId: string): any[];
+    /**
+     * #method
+     *
+     * Translocation features are handled differently
+     * since they do not have a mate e.g. they are one sided
+     */
     hasTranslocations(trackConfigId: string): Feature | undefined;
+    /**
+     * #method
+     * Get a composite map of featureId-\>feature map for a track across
+     * multiple views
+     */
     getTrackFeatures(trackConfigId: string): Map<string, Feature>;
+    /**
+     * #method
+     */
     getMatchedFeaturesInLayout(trackConfigId: string, features: Feature[][]): {
         feature: Feature;
         layout: LayoutRecord | undefined;
@@ -254,15 +280,39 @@ export default function stateModelFactory(pluginManager: PluginManager): import(
 } & {
     afterAttach(): void;
     onSubviewAction(actionName: string, path: string, args?: unknown[]): void;
+    /**
+     * #action
+     */
     setWidth(newWidth: number): void;
+    /**
+     * #action
+     */
     removeView(view: LGV): void;
+    /**
+     * #action
+     */
     closeView(): void;
+    /**
+     * #action
+     */
     toggleInteract(): void;
+    /**
+     * #action
+     */
     toggleIntraviewLinks(): void;
+    /**
+     * #action
+     */
     toggleLinkViews(): void;
+    /**
+     * #action
+     */
     setMatchedTrackFeatures(obj: Record<string, Feature[][]>): void;
 } & {
     afterAttach(): void;
+    /**
+     * #method
+     */
     menuItems(): ({
         label: string;
         subMenu: import("@jbrowse/core/ui").MenuItem[];

package/esm/BreakpointSplitView/model.js

@@ -31,20 +31,44 @@ async function getBlockFeatures(model, track) {
         regions: view.staticBlocks.contentBlocks,
     })).flat()));
 }
+/**
+ * #stateModel BreakpointSplitView
+ */
 export default function stateModelFactory(pluginManager) {
     const minHeight = 40;
     const defaultHeight = 400;
-    const model = types
-        .model('BreakpointSplitView', {
+    return types
+        .compose('BreakpointSplitView', BaseViewModel, types.model({
+        /**
+         * #property
+         */
         type: types.literal('BreakpointSplitView'),
+        /**
+         * #property
+         */
         height: types.optional(types.refinement('viewHeight', types.number, (n) => n >= minHeight), defaultHeight),
+        /**
+         * #property
+         */
         trackSelectorType: 'hierarchical',
+        /**
+         * #property
+         */
         showIntraviewLinks: true,
+        /**
+         * #property
+         */
         linkViews: false,
+        /**
+         * #property
+         */
         interactToggled: false,
+        /**
+         * #property
+         */
         views: types.array(pluginManager.getViewType('LinearGenomeView')
             .stateModel),
-    })
+    }))
         .volatile(() => ({
         width: 800,
         matchedTrackFeatures: {},
@@ -62,27 +86,43 @@ export default function stateModelFactory(pluginManager) {
         },
     }))
         .views(self => ({
-        // Find all track ids that match across multiple views
+        /**
+         * #getter
+         * Find all track ids that match across multiple views
+         */
         get matchedTracks() {
             return intersect(elt => elt.configuration.trackId, ...self.views.map(view => view.tracks));
         },
-        // Get tracks with a given trackId across multiple views
+        /**
+         * #method
+         * Get tracks with a given trackId across multiple views
+         */
         getMatchedTracks(trackConfigId) {
             return self.views
                 .map(view => view.getTrack(trackConfigId))
                 .filter(f => !!f);
         },
-        // Translocation features are handled differently
-        // since they do not have a mate e.g. they are one sided
+        /**
+         * #method
+         *
+         * Translocation features are handled differently
+         * since they do not have a mate e.g. they are one sided
+         */
         hasTranslocations(trackConfigId) {
             return [...this.getTrackFeatures(trackConfigId).values()].find(f => f.get('type') === 'translocation');
         },
-        // Get a composite map of featureId->feature map for a track across
-        // multiple views
+        /**
+         * #method
+         * Get a composite map of featureId-\>feature map for a track across
+         * multiple views
+         */
         getTrackFeatures(trackConfigId) {
             var _a;
             return new Map((_a = self.matchedTrackFeatures[trackConfigId]) === null || _a === void 0 ? void 0 : _a.flat().map(f => [f.id(), f]));
         },
+        /**
+         * #method
+         */
         getMatchedFeaturesInLayout(trackConfigId, features) {
             // use reverse to search the second track first
             const tracks = this.getMatchedTracks(trackConfigId);
@@ -129,26 +169,47 @@ export default function stateModelFactory(pluginManager) {
                 }
             });
         },
+        /**
+         * #action
+         */
         setWidth(newWidth) {
             self.width = newWidth;
             self.views.forEach(v => v.setWidth(newWidth));
         },
+        /**
+         * #action
+         */
         removeView(view) {
             self.views.remove(view);
         },
+        /**
+         * #action
+         */
         closeView() {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             getParent(self, 2).removeView(self);
         },
+        /**
+         * #action
+         */
         toggleInteract() {
             self.interactToggled = !self.interactToggled;
         },
+        /**
+         * #action
+         */
         toggleIntraviewLinks() {
             self.showIntraviewLinks = !self.showIntraviewLinks;
         },
+        /**
+         * #action
+         */
         toggleLinkViews() {
             self.linkViews = !self.linkViews;
         },
+        /**
+         * #action
+         */
         setMatchedTrackFeatures(obj) {
             self.matchedTrackFeatures = obj;
         },
@@ -172,6 +233,9 @@ export default function stateModelFactory(pluginManager) {
                 }
             }));
         },
+        /**
+         * #method
+         */
         menuItems() {
             return [
                 ...self.views
@@ -212,5 +276,4 @@ export default function stateModelFactory(pluginManager) {
             ];
         },
     }));
-    return types.compose(BaseViewModel, model);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/plugin-breakpoint-split-view",
-  "version": "2.7.1",
+  "version": "2.8.0",
   "description": "JBrowse 2 breakpoint detail split view",
   "keywords": [
     "jbrowse",
@@ -58,5 +58,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "2cda1611eebd12517f2a3cfc1b612face27005d4"
+  "gitHead": "ee8c2bdc8bd4f1a70b1eefda984f04a2830d9ca0"
 }