@jbrowse/plugin-breakpoint-split-view 2.16.1 → 2.18.0

package/dist/BreakpointAlignmentsFeatureDetail/BreakpointAlignmentsFeatureDetail.d.ts

@@ -1,7 +1,11 @@
 import React from 'react';
+import type { SimpleFeatureSerialized } from '@jbrowse/core/util';
 declare const BreakpointAlignmentsFeatureDetail: ({ model, }: {
     model: {
-        featureData: Record<string, unknown>;
+        featureData: {
+            feature1: SimpleFeatureSerialized;
+            feature2: SimpleFeatureSerialized;
+        };
     };
 }) => React.JSX.Element;
 export default BreakpointAlignmentsFeatureDetail;

package/dist/BreakpointAlignmentsFeatureDetail/BreakpointAlignmentsFeatureDetail.js

@@ -4,12 +4,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
+const BaseFeatureDetail_1 = require("@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail");
 const material_1 = require("@mui/material");
 const mobx_react_1 = require("mobx-react");
-const BaseFeatureDetail_1 = require("@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail");
 const BreakpointAlignmentsFeatureDetail = (0, mobx_react_1.observer)(function ({ model, }) {
-    const { feature1, feature2 } = JSON.parse(JSON.stringify(model.featureData));
-    return (react_1.default.createElement(material_1.Paper, { "data-testid": "alignment-side-drawer" },
+    const { featureData } = model;
+    const { feature1, feature2 } = structuredClone(featureData);
+    return (react_1.default.createElement(material_1.Paper, null,
         react_1.default.createElement(BaseFeatureDetail_1.BaseCoreDetails, { title: "Feature 1", feature: feature1 }),
         react_1.default.createElement(BaseFeatureDetail_1.BaseCoreDetails, { title: "Feature 2", feature: feature2 }),
         react_1.default.createElement(BaseFeatureDetail_1.BaseAttributes, { title: "Feature 1 attributes", feature: feature1 }),

package/dist/BreakpointAlignmentsFeatureDetail/index.d.ts

@@ -1,2 +1,2 @@
-import PluginManager from '@jbrowse/core/PluginManager';
+import type PluginManager from '@jbrowse/core/PluginManager';
 export default function BreakpointAlignmentsFeatureDetailF(pluginManager: PluginManager): void;

package/dist/BreakpointAlignmentsFeatureDetail/index.js

@@ -26,9 +26,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = BreakpointAlignmentsFeatureDetailF;
 const react_1 = require("react");
 const configuration_1 = require("@jbrowse/core/configuration");
+const pluggableElementTypes_1 = require("@jbrowse/core/pluggableElementTypes");
 const mst_1 = require("@jbrowse/core/util/types/mst");
 const mobx_state_tree_1 = require("mobx-state-tree");
-const pluggableElementTypes_1 = require("@jbrowse/core/pluggableElementTypes");
 const configSchema = (0, configuration_1.ConfigurationSchema)('BreakpointAlignmentsWidget', {});
 const stateModel = mobx_state_tree_1.types
     .model('BreakpointAlignmentsWidget', {

package/dist/BreakpointSplitView/BreakpointSplitView.d.ts

@@ -1,52 +1,34 @@
-import { Feature, Region } from '@jbrowse/core/util';
 import ViewType from '@jbrowse/core/pluggableElementTypes/ViewType';
-import { IStateTreeNode } from 'mobx-state-tree';
-import { Assembly } from '@jbrowse/core/assemblyManager/assembly';
+import { type AbstractSessionModel, type Feature } from '@jbrowse/core/util';
+import type { Assembly } from '@jbrowse/core/assemblyManager/assembly';
 export default class BreakpointSplitViewType extends ViewType {
     getBreakendCoveringRegions({ feature, assembly, }: {
         feature: Feature;
         assembly: Assembly;
     }): {
         pos: number;
-        refName: string | undefined;
-        mateRefName: string | undefined;
-        matePos: number;
+        refName: string;
+        mateRefName: string;
+        matePos: any;
     };
-    singleLevelSnapshotFromBreakendFeature(feature: Feature, view: {
-        displayedRegions: Region[];
-    } & IStateTreeNode): {
-        type: string;
-        views: {
-            type: string;
-            displayedRegions: {
-                start: number;
-                end: number;
-                refName: string;
-                assemblyName: string;
-            }[];
-            hideHeader: boolean;
-            bpPerPx: number;
-            offsetPx: number;
-        }[];
-        displayName: string;
-        featureData: unknown;
-    };
-    snapshotFromBreakendFeature(feature: Feature, view: {
-        displayedRegions: Region[];
-    } & IStateTreeNode): {
-        type: string;
-        views: {
+    singleLevelSnapshotFromBreakendFeature({ feature, session, assemblyName, }: {
+        feature: Feature;
+        session: AbstractSessionModel;
+        assemblyName: string;
+    }): {
+        coverage: {
+            pos: number;
+            refName: string;
+            mateRefName: string;
+            matePos: any;
+        };
+        snap: {
             type: string;
-            displayedRegions: {
-                start: number;
-                end: number;
-                refName: string;
-                assemblyName: string;
+            views: {
+                type: string;
+                displayedRegions: import("@jbrowse/core/assemblyManager/assembly").BasicRegion[];
             }[];
-            hideHeader: boolean;
-            bpPerPx: number;
-            offsetPx: number;
-        }[];
-        displayName: string;
+            displayName: string;
+        };
     };
 }

package/dist/BreakpointSplitView/BreakpointSplitView.js

@@ -3,9 +3,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const util_1 = require("@jbrowse/core/util");
-const ViewType_1 = __importDefault(require("@jbrowse/core/pluggableElementTypes/ViewType"));
 const vcf_1 = require("@gmod/vcf");
+const ViewType_1 = __importDefault(require("@jbrowse/core/pluggableElementTypes/ViewType"));
+const util_1 = require("@jbrowse/core/util");
 class BreakpointSplitViewType extends ViewType_1.default {
     getBreakendCoveringRegions({ feature, assembly, }) {
         var _a;
@@ -13,81 +13,44 @@ class BreakpointSplitViewType extends ViewType_1.default {
         const bnd = alt ? (0, vcf_1.parseBreakend)(alt) : undefined;
         const startPos = feature.get('start');
         const refName = feature.get('refName');
-        let endPos;
-        let mateRefName;
-        // a VCF breakend feature
+        const f = (ref) => assembly.getCanonicalRefName(ref) || ref;
         if (alt === '<TRA>') {
             const INFO = feature.get('INFO');
-            endPos = INFO.END[0] - 1;
-            mateRefName = INFO.CHR2[0];
+            return {
+                pos: startPos,
+                refName: f(refName),
+                mateRefName: f(INFO.CHR2[0]),
+                matePos: INFO.END[0] - 1,
+            };
         }
         else if (bnd === null || bnd === void 0 ? void 0 : bnd.MatePosition) {
             const matePosition = bnd.MatePosition.split(':');
-            endPos = +matePosition[1] - 1;
-            mateRefName = matePosition[0];
+            return {
+                pos: startPos,
+                refName: f(refName),
+                mateRefName: f(matePosition[0]),
+                matePos: +matePosition[1] - 1,
+            };
         }
         else if (feature.get('mate')) {
-            // a generic 'mate' feature
             const mate = feature.get('mate');
-            mateRefName = mate.refName;
-            endPos = mate.start;
+            return {
+                pos: startPos,
+                refName: f(refName),
+                mateRefName: f(mate.refName),
+                matePos: mate.start,
+            };
         }
         else {
-            endPos = startPos + 1;
-        }
-        if (!mateRefName) {
-            throw new Error(`unable to resolve mate refName ${mateRefName} in reference genome`);
+            return {
+                pos: startPos,
+                refName: f(refName),
+                mateRefName: f(refName),
+                matePos: feature.get('end'),
+            };
         }
-        return {
-            pos: startPos,
-            refName: assembly.getCanonicalRefName(refName),
-            mateRefName: assembly.getCanonicalRefName(mateRefName),
-            matePos: endPos,
-        };
-    }
-    singleLevelSnapshotFromBreakendFeature(feature, view) {
-        const session = (0, util_1.getSession)(view);
-        const bpPerPx = 10;
-        const { assemblyName } = view.displayedRegions[0];
-        const { assemblyManager } = session;
-        const assembly = assemblyManager.get(assemblyName);
-        if (!assembly) {
-            throw new Error(`assembly ${assemblyName} not found`);
-        }
-        if (!assembly.regions) {
-            throw new Error(`assembly ${assemblyName} regions not loaded`);
-        }
-        const { refName, pos: startPos, mateRefName, matePos: endPos, } = this.getBreakendCoveringRegions({
-            feature,
-            assembly,
-        });
-        const topRegion = assembly.regions.find(f => f.refName === refName);
-        const bottomRegion = assembly.regions.find(f => f.refName === mateRefName);
-        const topMarkedRegion = [{ ...topRegion }, { ...topRegion }];
-        const bottomMarkedRegion = [{ ...bottomRegion }, { ...bottomRegion }];
-        topMarkedRegion[0].end = startPos;
-        topMarkedRegion[1].start = startPos;
-        bottomMarkedRegion[0].end = endPos;
-        bottomMarkedRegion[1].start = endPos;
-        return {
-            type: 'BreakpointSplitView',
-            views: [
-                {
-                    type: 'LinearGenomeView',
-                    displayedRegions: topMarkedRegion,
-                    hideHeader: true,
-                    bpPerPx,
-                    offsetPx: (topRegion.start + feature.get('start')) / bpPerPx,
-                },
-            ],
-            displayName: `${feature.get('name') || feature.get('id') || 'breakend'} split detail`,
-            featureData: undefined,
-        };
     }
-    snapshotFromBreakendFeature(feature, view) {
-        const session = (0, util_1.getSession)(view);
-        const bpPerPx = 10;
-        const { assemblyName } = view.displayedRegions[0];
+    singleLevelSnapshotFromBreakendFeature({ feature, session, assemblyName, }) {
         const { assemblyManager } = session;
         const assembly = assemblyManager.get(assemblyName);
         if (!assembly) {
@@ -96,37 +59,25 @@ class BreakpointSplitViewType extends ViewType_1.default {
         if (!assembly.regions) {
             throw new Error(`assembly ${assemblyName} regions not loaded`);
         }
-        const { refName, pos: startPos, mateRefName, matePos: endPos, } = this.getBreakendCoveringRegions({
+        const coverage = this.getBreakendCoveringRegions({
             feature,
             assembly,
         });
+        const { refName, mateRefName } = coverage;
         const topRegion = assembly.regions.find(f => f.refName === refName);
         const bottomRegion = assembly.regions.find(f => f.refName === mateRefName);
-        const topMarkedRegion = [{ ...topRegion }, { ...topRegion }];
-        const bottomMarkedRegion = [{ ...bottomRegion }, { ...bottomRegion }];
-        topMarkedRegion[0].end = startPos;
-        topMarkedRegion[1].start = startPos;
-        bottomMarkedRegion[0].end = endPos;
-        bottomMarkedRegion[1].start = endPos;
         return {
-            type: 'BreakpointSplitView',
-            views: [
-                {
-                    type: 'LinearGenomeView',
-                    displayedRegions: topMarkedRegion,
-                    hideHeader: true,
-                    bpPerPx,
-                    offsetPx: (topRegion.start + feature.get('start')) / bpPerPx,
-                },
-                {
-                    type: 'LinearGenomeView',
-                    displayedRegions: bottomMarkedRegion,
-                    hideHeader: true,
-                    bpPerPx,
-                    offsetPx: (bottomRegion.start + endPos) / bpPerPx,
-                },
-            ],
-            displayName: `${feature.get('name') || feature.get('id') || 'breakend'} split detail`,
+            coverage,
+            snap: {
+                type: 'BreakpointSplitView',
+                views: [
+                    {
+                        type: 'LinearGenomeView',
+                        displayedRegions: (0, util_1.gatherOverlaps)([topRegion, bottomRegion]),
+                    },
+                ],
+                displayName: `${feature.get('name') || feature.get('id') || 'breakend'} split detail`,
+            },
         };
     }
 }

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { BreakpointViewModel } from '../model';
+import type { BreakpointViewModel } from '../model';
 declare const AlignmentConnections: ({ model, trackId, parentRef, getTrackYPosOverride, }: {
     model: BreakpointViewModel;
     trackId: string;

package/dist/BreakpointSplitView/components/AlignmentConnections.js

@@ -24,11 +24,10 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importStar(require("react"));
+const util_1 = require("@jbrowse/core/util");
+const material_1 = require("@mui/material");
 const mobx_react_1 = require("mobx-react");
 const mobx_state_tree_1 = require("mobx-state-tree");
-const material_1 = require("@mui/material");
-const util_1 = require("@jbrowse/core/util");
-// locals
 const util_2 = require("./util");
 const util_3 = require("../util");
 const getOrientationColor_1 = require("./getOrientationColor");
@@ -49,9 +48,9 @@ const AlignmentConnections = (0, mobx_react_1.observer)(function ({ model, track
             ? (0, util_2.getBadlyPairedAlignments)(allFeatures)
             : (0, util_2.getMatchedAlignmentFeatures)(allFeatures));
         if (!hasPaired) {
-            layoutMatches.forEach(m => {
-                m.sort((a, b) => a.feature.get('clipPos') - b.feature.get('clipPos'));
-            });
+            for (const m of layoutMatches) {
+                m.sort((a, b) => a.clipPos - b.clipPos);
+            }
         }
         return layoutMatches;
     }, [allFeatures, trackId, hasPaired, model]);
@@ -63,8 +62,6 @@ const AlignmentConnections = (0, mobx_react_1.observer)(function ({ model, track
     }
     return assembly ? (react_1.default.createElement("g", { fill: "none", "data-testid": layoutMatches.length ? `${trackId}-loaded` : trackId }, layoutMatches.map(chunk => {
         const ret = [];
-        // we follow a path in the list of chunks, not from top to bottom, just in series
-        // following x1,y1 -> x2,y2
         for (let i = 0; i < chunk.length - 1; i++) {
             const { layout: c1, feature: f1, level: level1 } = chunk[i];
             const { layout: c2, feature: f2, level: level2 } = chunk[i + 1];
@@ -72,7 +69,6 @@ const AlignmentConnections = (0, mobx_react_1.observer)(function ({ model, track
                 console.warn('received null layout for a overlay feature');
                 return null;
             }
-            // disable rendering connections in a single row
             if (!showIntraviewLinks && level1 === level2) {
                 return null;
             }
@@ -121,24 +117,19 @@ const AlignmentConnections = (0, mobx_react_1.observer)(function ({ model, track
                 : 0;
             const pf1 = hasPaired ? -1 : 1;
             const y0 = (0, util_3.heightFromSpecificLevel)(views, trackId, level1, getTrackYPosOverride);
-            // possible todo: use totalCurveHeight to possibly make alternative
-            // squiggle if the S is too small
             const path = [
                 'M',
                 x1,
                 y1,
                 'C',
-                // first bezier x,y
                 x1 + 200 * f1.get('strand') * rf1,
                 abnormalSpecialRenderFlag
                     ? Math.min(y0 - yOffset + trackHeight, y1 + trackHeight)
                     : y1,
-                // second bezier x,y
                 x2 - 200 * f2.get('strand') * rf2 * pf1,
                 abnormalSpecialRenderFlag
                     ? Math.min(y0 - yOffset + trackHeight, y2 + trackHeight)
                     : y2,
-                // third bezier x,y
                 x2,
                 y2,
             ].join(' ');

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { BreakpointViewModel } from '../model';
+import type { BreakpointViewModel } from '../model';
 declare const Breakends: ({ model, trackId, parentRef: ref, getTrackYPosOverride, }: {
     model: BreakpointViewModel;
     trackId: string;

package/dist/BreakpointSplitView/components/Breakends.js

@@ -27,7 +27,6 @@ const react_1 = __importStar(require("react"));
 const util_1 = require("@jbrowse/core/util");
 const mobx_react_1 = require("mobx-react");
 const mobx_state_tree_1 = require("mobx-state-tree");
-// locals
 const util_2 = require("./util");
 const util_3 = require("../util");
 const [LEFT] = [0, 1, 2, 3];
@@ -51,8 +50,6 @@ const Breakends = (0, mobx_react_1.observer)(function ({ model, trackId, parentR
     }
     return (react_1.default.createElement("g", { stroke: "green", strokeWidth: 5, fill: "none", "data-testid": layoutMatches.length ? `${trackId}-loaded` : trackId }, layoutMatches.map(chunk => {
         const ret = [];
-        // we follow a path in the list of chunks, not from top to bottom, just
-        // in series following x1,y1 -> x2,y2
         for (let i = 0; i < chunk.length - 1; i += 1) {
             const { layout: c1, feature: f1, level: level1 } = chunk[i];
             const { layout: c2, feature: f2, level: level2 } = chunk[i + 1];
@@ -82,19 +79,19 @@ const Breakends = (0, mobx_react_1.observer)(function ({ model, trackId, parentR
             }
             else {
                 const path = [
-                    'M', // move to
+                    'M',
                     x1 -
                         20 *
                             (relevantAlt.Join === 'left' ? -1 : 1) *
                             (reversed1 ? -1 : 1),
                     y1,
-                    'L', // line to
+                    'L',
                     x1,
                     y1,
-                    'L', // line to
+                    'L',
                     x2,
                     y2,
-                    'L', // line to
+                    'L',
                     x2 -
                         20 *
                             (relevantAlt.MateDirection === 'left' ? 1 : -1) *

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { BreakpointViewModel } from '../model';
+import type { BreakpointViewModel } from '../model';
 declare const BreakpointSplitView: ({ model, }: {
     model: BreakpointViewModel;
 }) => React.JSX.Element;

package/dist/BreakpointSplitView/components/BreakpointSplitView.js

@@ -4,8 +4,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
-const mobx_react_1 = require("mobx-react");
 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 useStyles = (0, mui_1.makeStyles)()(theme => ({

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

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

package/dist/BreakpointSplitView/components/BreakpointSplitViewOverlay.js

@@ -27,9 +27,9 @@ 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 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',
@@ -50,13 +50,6 @@ const BreakpointSplitViewOverlay = (0, mobx_react_1.observer)(function ({ model,
                 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 }))))));
+            } }, matchedTracks.map(track => (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/components/ExportSvgDialog.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ExportSvgOptions } from '../model';
+import type { ExportSvgOptions } from '../model';
 export default function ExportSvgDialog({ model, handleClose, }: {
     model: {
         exportSvg(opts: ExportSvgOptions): Promise<void>;

package/dist/BreakpointSplitView/components/ExportSvgDialog.js

@@ -25,9 +25,9 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = ExportSvgDialog;
 const react_1 = __importStar(require("react"));
-const material_1 = require("@mui/material");
 const ui_1 = require("@jbrowse/core/ui");
 const util_1 = require("@jbrowse/core/util");
+const material_1 = require("@mui/material");
 function LoadingMessage() {
     return (react_1.default.createElement("div", null,
         react_1.default.createElement(material_1.CircularProgress, { size: 20, style: { marginRight: 20 } }),
@@ -65,9 +65,7 @@ function ExportSvgDialog({ model, handleClose, }) {
             react_1.default.createElement("br", null),
             session.allThemes ? (react_1.default.createElement(TextField2, { select: true, label: "Theme", variant: "outlined", value: themeName, onChange: event => {
                     setThemeName(event.target.value);
-                } }, Object.entries(session.allThemes()).map(([key, val]) => (react_1.default.createElement(material_1.MenuItem, { key: key, value: key }, 
-            // @ts-expect-error
-            val.name || '(Unknown name)'))))) : null,
+                } }, Object.entries(session.allThemes()).map(([key, val]) => (react_1.default.createElement(material_1.MenuItem, { key: key, value: key }, val.name || '(Unknown name)'))))) : null,
             offscreenCanvas ? (react_1.default.createElement(material_1.FormControlLabel, { control: react_1.default.createElement(material_1.Checkbox, { checked: rasterizeLayers, onChange: () => {
                         setRasterizeLayers(val => !val);
                     } }), label: "Rasterize canvas based tracks? File may be much larger if this is turned off" })) : (react_1.default.createElement(material_1.Typography, null, "Note: rasterizing layers not yet supported in this browser, so SVG size may be large"))),

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { BreakpointViewModel } from '../model';
+import type { BreakpointViewModel } from '../model';
 declare const Overlay: (props: {
     parentRef: React.RefObject<SVGSVGElement>;
     model: BreakpointViewModel;

package/dist/BreakpointSplitView/components/Overlay.js

@@ -7,17 +7,15 @@ const react_1 = __importDefault(require("react"));
 const mobx_react_1 = require("mobx-react");
 const AlignmentConnections_1 = __importDefault(require("./AlignmentConnections"));
 const Breakends_1 = __importDefault(require("./Breakends"));
-const Translocations_1 = __importDefault(require("./Translocations"));
 const PairedFeatures_1 = __importDefault(require("./PairedFeatures"));
+const Translocations_1 = __importDefault(require("./Translocations"));
 const Overlay = (0, mobx_react_1.observer)(function (props) {
     var _a, _b;
     const { model, trackId } = props;
     const tracks = model.getMatchedTracks(trackId);
-    // curvy line type arcs
     if (((_a = tracks[0]) === null || _a === void 0 ? void 0 : _a.type) === 'AlignmentsTrack') {
         return react_1.default.createElement(AlignmentConnections_1.default, { ...props });
     }
-    // translocation type arcs
     else if (((_b = tracks[0]) === null || _b === void 0 ? void 0 : _b.type) === 'VariantTrack') {
         return model.hasTranslocations(trackId) ? (react_1.default.createElement(Translocations_1.default, { ...props })) : model.hasPairedFeatures(trackId) ? (react_1.default.createElement(PairedFeatures_1.default, { ...props })) : (react_1.default.createElement(Breakends_1.default, { ...props }));
     }

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { BreakpointViewModel } from '../model';
+import type { BreakpointViewModel } from '../model';
 declare const PairedFeatures: ({ model, trackId, parentRef: ref, getTrackYPosOverride, }: {
     model: BreakpointViewModel;
     trackId: string;

package/dist/BreakpointSplitView/components/PairedFeatures.js

@@ -27,7 +27,6 @@ const react_1 = __importStar(require("react"));
 const util_1 = require("@jbrowse/core/util");
 const mobx_react_1 = require("mobx-react");
 const mobx_state_tree_1 = require("mobx-state-tree");
-// locals
 const util_2 = require("./util");
 const util_3 = require("../util");
 const [LEFT] = [0, 1, 2, 3];
@@ -51,8 +50,6 @@ const PairedFeatures = (0, mobx_react_1.observer)(function ({ model, trackId, pa
     }
     return (react_1.default.createElement("g", { stroke: "green", strokeWidth: 5, fill: "none", "data-testid": layoutMatches.length ? `${trackId}-loaded` : trackId }, layoutMatches.map(chunk => {
         const ret = [];
-        // we follow a path in the list of chunks, not from top to bottom, just
-        // in series following x1,y1 -> x2,y2
         for (let i = 0; i < chunk.length - 1; i += 1) {
             const { layout: c1, feature: f1, level: level1 } = chunk[i];
             const { layout: c2, feature: f2, level: level2 } = chunk[i + 1];
@@ -75,10 +72,10 @@ const PairedFeatures = (0, mobx_react_1.observer)(function ({ model, trackId, pa
             const y2 = (0, util_3.yPos)(trackId, level2, views, tracks, c2, getTrackYPosOverride) -
                 yoff;
             const path = [
-                'M', // move to
+                'M',
                 x1,
                 y1,
-                'L', // line to
+                'L',
                 x2,
                 y2,
             ].join(' ');

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { BreakpointViewModel } from '../model';
+import type { BreakpointViewModel } from '../model';
 declare const Translocations: ({ model, trackId, parentRef: ref, getTrackYPosOverride, }: {
     model: BreakpointViewModel;
     trackId: string;

package/dist/BreakpointSplitView/components/Translocations.js

@@ -27,7 +27,6 @@ const react_1 = __importStar(require("react"));
 const util_1 = require("@jbrowse/core/util");
 const mobx_react_1 = require("mobx-react");
 const mobx_state_tree_1 = require("mobx-state-tree");
-// locals
 const util_2 = require("./util");
 const util_3 = require("../util");
 const [LEFT] = [0, 1, 2, 3];
@@ -60,17 +59,11 @@ const Translocations = (0, mobx_react_1.observer)(function ({ model, trackId, pa
         const rect = ref.current.getBoundingClientRect();
         yOffset = rect.top;
     }
-    // we hardcode the TRA to go to the "other view" and if there is none, we
-    // just return null here note: would need to do processing of the INFO
-    // CHR2/END and see which view could contain those coordinates to really do
-    // it properly
     if (views.length < 2) {
         return null;
     }
     return (react_1.default.createElement("g", { fill: "none", stroke: "green", strokeWidth: 5, "data-testid": layoutMatches.length ? `${trackId}-loaded` : trackId }, layoutMatches.map(chunk => {
         var _a, _b;
-        // we follow a path in the list of chunks, not from top to bottom,
-        // just in series following x1,y1 -> x2,y2
         const ret = [];
         for (const { layout: c1, feature: f1, level: level1 } of chunk) {
             const level2 = level1 === 0 ? 1 : 0;
@@ -81,7 +74,7 @@ const Translocations = (0, mobx_react_1.observer)(function ({ model, trackId, pa
             const info = f1.get('INFO');
             const chr2 = info.CHR2[0];
             const end2 = info.END[0];
-            const res = (_b = (_a = info.STRANDS) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.split(''); // not all files have STRANDS
+            const res = (_b = (_a = info.STRANDS) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.split('');
             const [myDirection, mateDirection] = res !== null && res !== void 0 ? res : ['.', '.'];
             const r = (0, util_3.getPxFromCoordinate)(views[level2], chr2, end2);
             if (r) {
@@ -96,16 +89,16 @@ const Translocations = (0, mobx_react_1.observer)(function ({ model, trackId, pa
                 const y2 = (0, util_3.yPos)(trackId, level2, views, tracks, c2, getTrackYPosOverride) -
                     yOffset;
                 const path = [
-                    'M', // move to
+                    'M',
                     x1 - 20 * str(myDirection) * (reversed1 ? -1 : 1),
                     y1,
-                    'L', // line to
+                    'L',
                     x1,
                     y1,
-                    'L', // line to as const
+                    'L',
                     x2,
                     y2,
-                    'L', // line to
+                    'L',
                     x2 - 20 * str(mateDirection) * (reversed2 ? -1 : 1),
                     y2,
                 ].join(' ');