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

package/esm/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/esm/BreakpointSplitView/BreakpointSplitView.js

@@ -1,6 +1,6 @@
-import { getSession } from '@jbrowse/core/util';
-import ViewType from '@jbrowse/core/pluggableElementTypes/ViewType';
 import { parseBreakend } from '@gmod/vcf';
+import ViewType from '@jbrowse/core/pluggableElementTypes/ViewType';
+import { gatherOverlaps, } from '@jbrowse/core/util';
 export default class BreakpointSplitViewType extends ViewType {
     getBreakendCoveringRegions({ feature, assembly, }) {
         var _a;
@@ -8,81 +8,44 @@ export default class BreakpointSplitViewType extends ViewType {
         const bnd = alt ? 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: assembly.getCanonicalRefName(refName),
-            mateRefName: assembly.getCanonicalRefName(mateRefName),
-            matePos: endPos,
-        };
-    }
-    singleLevelSnapshotFromBreakendFeature(feature, view) {
-        const session = 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`);
+            return {
+                pos: startPos,
+                refName: f(refName),
+                mateRefName: f(refName),
+                matePos: feature.get('end'),
+            };
         }
-        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 = getSession(view);
-        const bpPerPx = 10;
-        const { assemblyName } = view.displayedRegions[0];
+    singleLevelSnapshotFromBreakendFeature({ feature, session, assemblyName, }) {
         const { assemblyManager } = session;
         const assembly = assemblyManager.get(assemblyName);
         if (!assembly) {
@@ -91,37 +54,25 @@ export default class BreakpointSplitViewType extends ViewType {
         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: gatherOverlaps([topRegion, bottomRegion]),
+                    },
+                ],
+                displayName: `${feature.get('name') || feature.get('id') || 'breakend'} split detail`,
+            },
         };
     }
 }

package/esm/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/esm/BreakpointSplitView/components/AlignmentConnections.js

@@ -1,11 +1,10 @@
 import React, { useMemo, useState } from 'react';
+import { getSession, getStrokeProps } from '@jbrowse/core/util';
+import { useTheme } from '@mui/material';
 import { observer } from 'mobx-react';
 import { getSnapshot } from 'mobx-state-tree';
-import { useTheme } from '@mui/material';
-import { getSession, getStrokeProps } from '@jbrowse/core/util';
-// locals
 import { getBadlyPairedAlignments, getMatchedAlignmentFeatures, hasPairedReads, } from './util';
-import { yPos, useNextFrame, getPxFromCoordinate, heightFromSpecificLevel, } from '../util';
+import { getPxFromCoordinate, heightFromSpecificLevel, useNextFrame, yPos, } from '../util';
 import { getLongReadOrientationAbnormal, getLongReadOrientationColorOrDefault, getPairedOrientationColor, isAbnormalOrientation, } from './getOrientationColor';
 const [LEFT, , RIGHT] = [0, 1, 2, 3];
 const AlignmentConnections = observer(function ({ model, trackId, parentRef, getTrackYPosOverride, }) {
@@ -24,9 +23,9 @@ const AlignmentConnections = observer(function ({ model, trackId, parentRef, get
             ? getBadlyPairedAlignments(allFeatures)
             : 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]);
@@ -38,8 +37,6 @@ const AlignmentConnections = observer(function ({ model, trackId, parentRef, get
     }
     return assembly ? (React.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];
@@ -47,7 +44,6 @@ const AlignmentConnections = observer(function ({ model, trackId, parentRef, get
                 console.warn('received null layout for a overlay feature');
                 return null;
             }
-            // disable rendering connections in a single row
             if (!showIntraviewLinks && level1 === level2) {
                 return null;
             }
@@ -96,24 +92,19 @@ const AlignmentConnections = observer(function ({ model, trackId, parentRef, get
                 : 0;
             const pf1 = hasPaired ? -1 : 1;
             const y0 = 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/esm/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/esm/BreakpointSplitView/components/Breakends.js

@@ -1,10 +1,9 @@
-import React, { useState, useMemo } from 'react';
+import React, { useMemo, useState } from 'react';
 import { getSession } from '@jbrowse/core/util';
 import { observer } from 'mobx-react';
 import { getSnapshot } from 'mobx-state-tree';
-// locals
 import { findMatchingAlt, getMatchedBreakendFeatures } from './util';
-import { yPos, getPxFromCoordinate, useNextFrame } from '../util';
+import { getPxFromCoordinate, useNextFrame, yPos } from '../util';
 const [LEFT] = [0, 1, 2, 3];
 const Breakends = observer(function ({ model, trackId, parentRef: ref, getTrackYPosOverride, }) {
     const { views } = model;
@@ -26,8 +25,6 @@ const Breakends = observer(function ({ model, trackId, parentRef: ref, getTrackY
     }
     return (React.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];
@@ -57,19 +54,19 @@ const Breakends = observer(function ({ model, trackId, parentRef: ref, getTrackY
             }
             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/esm/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/esm/BreakpointSplitView/components/BreakpointSplitView.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import { observer } from 'mobx-react';
 import { getEnv } from '@jbrowse/core/util';
+import { observer } from 'mobx-react';
 import { makeStyles } from 'tss-react/mui';
 import BreakpointSplitViewOverlay from './BreakpointSplitViewOverlay';
 const useStyles = makeStyles()(theme => ({

package/esm/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/esm/BreakpointSplitView/components/BreakpointSplitViewOverlay.js

@@ -1,7 +1,7 @@
 import React, { useRef } from 'react';
+import { observer } from 'mobx-react';
 import { makeStyles } from 'tss-react/mui';
 import Overlay from './Overlay';
-import { observer } from 'mobx-react';
 const useStyles = makeStyles()({
     overlay: {
         display: 'flex',
@@ -22,13 +22,6 @@ const BreakpointSplitViewOverlay = 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.createElement(Overlay, { parentRef: ref, key: track.configuration.trackId, model: model, trackId: track.configuration.trackId }))))));
+            } }, matchedTracks.map(track => (React.createElement(Overlay, { parentRef: ref, key: track.configuration.trackId, model: model, trackId: track.configuration.trackId }))))));
 });
 export default BreakpointSplitViewOverlay;

package/esm/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/esm/BreakpointSplitView/components/ExportSvgDialog.js

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
-import { Button, Checkbox, CircularProgress, DialogActions, DialogContent, FormControlLabel, MenuItem, TextField, Typography, } from '@mui/material';
 import { Dialog, ErrorMessage } from '@jbrowse/core/ui';
 import { getSession, useLocalStorage } from '@jbrowse/core/util';
+import { Button, Checkbox, CircularProgress, DialogActions, DialogContent, FormControlLabel, MenuItem, TextField, Typography, } from '@mui/material';
 function LoadingMessage() {
     return (React.createElement("div", null,
         React.createElement(CircularProgress, { size: 20, style: { marginRight: 20 } }),
@@ -39,9 +39,7 @@ export default function ExportSvgDialog({ model, handleClose, }) {
             React.createElement("br", null),
             session.allThemes ? (React.createElement(TextField2, { select: true, label: "Theme", variant: "outlined", value: themeName, onChange: event => {
                     setThemeName(event.target.value);
-                } }, Object.entries(session.allThemes()).map(([key, val]) => (React.createElement(MenuItem, { key: key, value: key }, 
-            // @ts-expect-error
-            val.name || '(Unknown name)'))))) : null,
+                } }, Object.entries(session.allThemes()).map(([key, val]) => (React.createElement(MenuItem, { key: key, value: key }, val.name || '(Unknown name)'))))) : null,
             offscreenCanvas ? (React.createElement(FormControlLabel, { control: React.createElement(Checkbox, { checked: rasterizeLayers, onChange: () => {
                         setRasterizeLayers(val => !val);
                     } }), label: "Rasterize canvas based tracks? File may be much larger if this is turned off" })) : (React.createElement(Typography, null, "Note: rasterizing layers not yet supported in this browser, so SVG size may be large"))),

package/esm/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/esm/BreakpointSplitView/components/Overlay.js

@@ -2,17 +2,15 @@ import React from 'react';
 import { observer } from 'mobx-react';
 import AlignmentConnections from './AlignmentConnections';
 import Breakends from './Breakends';
-import Translocations from './Translocations';
 import PairedFeatures from './PairedFeatures';
+import Translocations from './Translocations';
 const Overlay = 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.createElement(AlignmentConnections, { ...props });
     }
-    // translocation type arcs
     else if (((_b = tracks[0]) === null || _b === void 0 ? void 0 : _b.type) === 'VariantTrack') {
         return model.hasTranslocations(trackId) ? (React.createElement(Translocations, { ...props })) : model.hasPairedFeatures(trackId) ? (React.createElement(PairedFeatures, { ...props })) : (React.createElement(Breakends, { ...props }));
     }

package/esm/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/esm/BreakpointSplitView/components/PairedFeatures.js

@@ -1,10 +1,9 @@
-import React, { useState, useMemo } from 'react';
+import React, { useMemo, useState } from 'react';
 import { getSession } from '@jbrowse/core/util';
 import { observer } from 'mobx-react';
 import { getSnapshot } from 'mobx-state-tree';
-// locals
 import { getMatchedPairedFeatures } from './util';
-import { yPos, getPxFromCoordinate, useNextFrame } from '../util';
+import { getPxFromCoordinate, useNextFrame, yPos } from '../util';
 const [LEFT] = [0, 1, 2, 3];
 const PairedFeatures = observer(function ({ model, trackId, parentRef: ref, getTrackYPosOverride, }) {
     const { views } = model;
@@ -26,8 +25,6 @@ const PairedFeatures = observer(function ({ model, trackId, parentRef: ref, getT
     }
     return (React.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];
@@ -50,10 +47,10 @@ const PairedFeatures = observer(function ({ model, trackId, parentRef: ref, getT
             const y2 = yPos(trackId, level2, views, tracks, c2, getTrackYPosOverride) -
                 yoff;
             const path = [
-                'M', // move to
+                'M',
                 x1,
                 y1,
-                'L', // line to
+                'L',
                 x2,
                 y2,
             ].join(' ');

package/esm/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/esm/BreakpointSplitView/components/Translocations.js

@@ -1,10 +1,9 @@
-import React, { useState, useMemo } from 'react';
+import React, { useMemo, useState } from 'react';
 import { getSession } from '@jbrowse/core/util';
 import { observer } from 'mobx-react';
 import { getSnapshot } from 'mobx-state-tree';
-// locals
 import { getMatchedTranslocationFeatures } from './util';
-import { yPos, getPxFromCoordinate, useNextFrame } from '../util';
+import { getPxFromCoordinate, useNextFrame, yPos } from '../util';
 const [LEFT] = [0, 1, 2, 3];
 function str(s) {
     if (s === '+') {
@@ -35,17 +34,11 @@ const Translocations = observer(function ({ model, trackId, parentRef: ref, getT
         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.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;
@@ -56,7 +49,7 @@ const Translocations = observer(function ({ model, trackId, parentRef: ref, getT
             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 = getPxFromCoordinate(views[level2], chr2, end2);
             if (r) {
@@ -71,16 +64,16 @@ const Translocations = observer(function ({ model, trackId, parentRef: ref, getT
                 const y2 = 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(' ');

package/esm/BreakpointSplitView/components/getOrientationColor.js

@@ -1,6 +1,4 @@
 import { alpha } from '@mui/material';
-// orientation definitions from igv.js, see also
-// https://software.broadinstitute.org/software/igv/interpreting_pair_orientations
 export const orientationTypes = {
     fr: {
         F1R2: 'LR',
@@ -39,12 +37,6 @@ export const pairMap = {
     RR: 'color_pair_rr',
     RL: 'color_pair_rl',
 };
-// manually calculated by running
-// const color = require('color')
-// Object.fromEntries(Object.entries(fillColor).map(([key,val])=>{
-//   return [key, color(val).darken('0.3').hex()]
-// }))
-// this avoids (expensive) use of Color module at runtime
 export const strokeColor = {
     color_fwd_strand_not_proper: alpha('#CA6767', 0.8),
     color_rev_strand_not_proper: alpha('#7272AA', 0.8),

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

@@ -1,4 +1,4 @@
-import { Feature } from '@jbrowse/core/util';
+import type { Feature } from '@jbrowse/core/util';
 export declare function getBadlyPairedAlignments(features: Map<string, Feature>): Feature[][];
 export declare function getMatchedAlignmentFeatures(features: Map<string, Feature>): Feature[][];
 export declare function hasPairedReads(features: Map<string, Feature>): boolean;