@jbrowse/plugin-alignments 3.7.0 → 4.0.1

package/esm/LinearReadCloudDisplay/model.js

@@ -2,44 +2,88 @@ import { lazy } from 'react';
 import { ConfigurationReference, getConf } from '@jbrowse/core/configuration';
 import { BaseDisplay } from '@jbrowse/core/pluggableElementTypes';
 import { getContainingTrack, getContainingView, getSession, isSessionModelWithWidgets, } from '@jbrowse/core/util';
+import { types } from '@jbrowse/mobx-state-tree';
 import { FeatureDensityMixin, TrackHeightMixin, } from '@jbrowse/plugin-linear-genome-view';
-import { types } from 'mobx-state-tree';
-import { LinearReadDisplayBaseMixin } from '../shared/LinearReadDisplayBaseMixin';
-import { LinearReadDisplayWithLayoutMixin } from '../shared/LinearReadDisplayWithLayoutMixin';
-import { LinearReadDisplayWithPairFiltersMixin } from '../shared/LinearReadDisplayWithPairFiltersMixin';
-import { chainToSimpleFeature } from '../shared/chainToSimpleFeature';
-import { getColorSchemeMenuItem, getFilterByMenuItem, } from '../shared/menuItems';
-const SetFeatureHeightDialog = lazy(() => import('./components/SetFeatureHeightDialog'));
+import VisibilityIcon from '@mui/icons-material/Visibility';
+import { chainToSimpleFeature } from "../LinearReadArcsDisplay/chainToSimpleFeature.js";
+import { calculateCloudTicks } from "../RenderLinearReadCloudDisplayRPC/drawFeatsCloud.js";
+import { LinearReadDisplayBaseMixin } from "../shared/LinearReadDisplayBaseMixin.js";
+import { LinearReadDisplayWithLayoutMixin } from "../shared/LinearReadDisplayWithLayoutMixin.js";
+import { LinearReadDisplayWithPairFiltersMixin } from "../shared/LinearReadDisplayWithPairFiltersMixin.js";
+import { SharedModificationsMixin } from "../shared/SharedModificationsMixin.js";
+import { calculateSvgLegendWidth, getReadDisplayLegendItems, } from "../shared/legendUtils.js";
+import { getColorSchemeMenuItem, getEditFiltersMenuItem, getMismatchDisplayMenuItem, } from "../shared/menuItems.js";
+const SetFeatureHeightDialog = lazy(() => import("./components/SetFeatureHeightDialog.js"));
 function stateModelFactory(configSchema) {
     return types
-        .compose('LinearReadCloudDisplay', BaseDisplay, TrackHeightMixin(), FeatureDensityMixin(), LinearReadDisplayBaseMixin(), LinearReadDisplayWithLayoutMixin(), LinearReadDisplayWithPairFiltersMixin(), types.model({
+        .compose('LinearReadCloudDisplay', BaseDisplay, TrackHeightMixin(), FeatureDensityMixin(), LinearReadDisplayBaseMixin(), LinearReadDisplayWithLayoutMixin(), LinearReadDisplayWithPairFiltersMixin(), SharedModificationsMixin(), types.model({
         type: types.literal('LinearReadCloudDisplay'),
         configuration: ConfigurationReference(configSchema),
         drawCloud: false,
         noSpacing: types.maybe(types.boolean),
         trackMaxHeight: types.maybe(types.number),
+        hideSmallIndelsSetting: types.maybe(types.boolean),
+        hideMismatchesSetting: types.maybe(types.boolean),
+        hideLargeIndelsSetting: types.maybe(types.boolean),
+        showLegend: types.maybe(types.boolean),
+        showYScalebar: types.optional(types.boolean, true),
+        showOutline: types.optional(types.boolean, true),
     }))
         .volatile(() => ({
         layoutHeight: 0,
+        selectedFeatureId: undefined,
+        cloudMaxDistance: undefined,
     }))
         .views(self => ({
         get colorBy() {
-            var _a;
-            return (_a = self.colorBySetting) !== null && _a !== void 0 ? _a : getConf(self, 'colorBy');
+            return self.colorBySetting ?? getConf(self, 'colorBy');
         },
         get filterBy() {
-            var _a;
-            return (_a = self.filterBySetting) !== null && _a !== void 0 ? _a : getConf(self, 'filterBy');
-        },
-        get featureHeightSetting() {
-            var _a;
-            return (_a = self.featureHeight) !== null && _a !== void 0 ? _a : getConf(self, 'featureHeight');
+            return self.filterBySetting ?? getConf(self, 'filterBy');
         },
     }))
         .actions(self => ({
         reload() {
             self.error = undefined;
         },
+    }))
+        .views(self => ({
+        get dataTestId() {
+            return self.drawCloud ? 'cloud-canvas' : 'stack-canvas';
+        },
+        get featureHeightSetting() {
+            return self.featureHeight ?? getConf(self, 'featureHeight');
+        },
+        get hideSmallIndels() {
+            return self.hideSmallIndelsSetting ?? getConf(self, 'hideSmallIndels');
+        },
+        get hideMismatches() {
+            return self.hideMismatchesSetting ?? getConf(self, 'hideMismatches');
+        },
+        get hideLargeIndels() {
+            return self.hideLargeIndelsSetting ?? getConf(self, 'hideLargeIndels');
+        },
+    }))
+        .views(self => ({
+        get modificationThreshold() {
+            return self.colorBy?.modifications?.threshold ?? 10;
+        },
+        get cloudDomain() {
+            if (self.cloudMaxDistance === undefined) {
+                return undefined;
+            }
+            return [1, self.cloudMaxDistance];
+        },
+    }))
+        .views(self => ({
+        get cloudTicks() {
+            if (!self.drawCloud || !self.cloudDomain || !self.showYScalebar) {
+                return undefined;
+            }
+            return calculateCloudTicks(self.cloudDomain, self.height);
+        },
+    }))
+        .actions(self => ({
         setNoSpacing(flag) {
             self.noSpacing = flag;
         },
@@ -49,11 +93,24 @@ function stateModelFactory(configSchema) {
         setLayoutHeight(n) {
             self.layoutHeight = n;
         },
+        setCloudMaxDistance(maxDistance) {
+            const EPSILON = 0.000001;
+            if (self.cloudMaxDistance === undefined ||
+                Math.abs(self.cloudMaxDistance - maxDistance) > EPSILON) {
+                self.cloudMaxDistance = maxDistance;
+            }
+        },
+        setShowYScalebar(show) {
+            self.showYScalebar = show;
+        },
+        setShowOutline(show) {
+            self.showOutline = show;
+        },
         selectFeature(chain) {
             const session = getSession(self);
             const syntheticFeature = chainToSimpleFeature(chain);
             if (isSessionModelWithWidgets(session)) {
-                const featureWidget = session.addWidget('AlignmentsFeatureWidget', 'alignmentFeature', {
+                const featureWidget = session.addWidget('BaseFeatureWidget', 'baseFeature', {
                     featureData: syntheticFeature.toJSON(),
                     view: getContainingView(self),
                     track: getContainingTrack(self),
@@ -65,6 +122,29 @@ function stateModelFactory(configSchema) {
         setDrawCloud(b) {
             self.drawCloud = b;
         },
+        setSelectedFeatureId(id) {
+            self.selectedFeatureId = id;
+        },
+        setHideSmallIndels(arg) {
+            self.hideSmallIndelsSetting = arg;
+        },
+        setHideMismatches(arg) {
+            self.hideMismatchesSetting = arg;
+        },
+        setHideLargeIndels(arg) {
+            self.hideLargeIndelsSetting = arg;
+        },
+        setShowLegend(s) {
+            self.showLegend = s;
+        },
+    }))
+        .views(self => ({
+        legendItems() {
+            return getReadDisplayLegendItems(self.colorBy, self.visibleModifications);
+        },
+        svgLegendWidth() {
+            return self.showLegend ? calculateSvgLegendWidth(this.legendItems()) : 0;
+        },
     }))
         .views(self => {
         const { trackMenuItems: superTrackMenuItems, renderProps: superRenderProps, } = self;
@@ -72,7 +152,22 @@ function stateModelFactory(configSchema) {
             renderProps() {
                 return {
                     ...superRenderProps(),
-                    notReady: !self.chainData,
+                    notReady: false,
+                    filterBy: self.filterBy,
+                    colorBy: self.colorBy,
+                    featureHeight: self.featureHeightSetting,
+                    noSpacing: self.noSpacing ?? false,
+                    drawCloud: self.drawCloud,
+                    drawSingletons: self.drawSingletons,
+                    drawProperPairs: self.drawProperPairs,
+                    flipStrandLongReadChains: self.flipStrandLongReadChains,
+                    trackMaxHeight: self.trackMaxHeight,
+                    hideSmallIndels: self.hideSmallIndels,
+                    hideMismatches: self.hideMismatches,
+                    hideLargeIndels: self.hideLargeIndels,
+                    showOutline: self.showOutline,
+                    cloudDomain: self.cloudDomain,
+                    visibleModifications: Object.fromEntries(self.visibleModifications.toJSON()),
                 };
             },
             trackMenuItems() {
@@ -83,6 +178,8 @@ function stateModelFactory(configSchema) {
                         subMenu: [
                             {
                                 label: 'Normal',
+                                type: 'radio',
+                                checked: self.featureHeightSetting === 7 && self.noSpacing !== true,
                                 onClick: () => {
                                     self.setFeatureHeight(7);
                                     self.setNoSpacing(false);
@@ -90,11 +187,22 @@ function stateModelFactory(configSchema) {
                             },
                             {
                                 label: 'Compact',
+                                type: 'radio',
+                                checked: self.featureHeightSetting === 3 && self.noSpacing === true,
                                 onClick: () => {
                                     self.setFeatureHeight(3);
                                     self.setNoSpacing(true);
                                 },
                             },
+                            {
+                                label: 'Super-compact',
+                                type: 'radio',
+                                checked: self.featureHeightSetting === 1 && self.noSpacing === true,
+                                onClick: () => {
+                                    self.setFeatureHeight(1);
+                                    self.setNoSpacing(true);
+                                },
+                            },
                             {
                                 label: 'Manually set height...',
                                 onClick: () => {
@@ -110,51 +218,64 @@ function stateModelFactory(configSchema) {
                         ],
                     },
                     {
-                        label: 'Toggle read cloud (y-coordinate proportional to TLEN)',
-                        type: 'checkbox',
-                        checked: self.drawCloud,
-                        onClick: () => {
-                            self.setDrawCloud(!self.drawCloud);
-                        },
-                    },
-                    {
-                        label: 'Draw singletons',
-                        type: 'checkbox',
-                        checked: self.drawSingletons,
-                        onClick: () => {
-                            self.setDrawSingletons(!self.drawSingletons);
-                        },
-                    },
-                    {
-                        label: 'Draw proper pairs',
-                        type: 'checkbox',
-                        checked: self.drawProperPairs,
-                        onClick: () => {
-                            self.setDrawProperPairs(!self.drawProperPairs);
-                        },
-                    },
-                    {
-                        label: 'Flip strand relative to primary alignment for long read chains',
-                        type: 'checkbox',
-                        checked: self.flipStrandLongReadChains,
-                        onClick: () => {
-                            self.setFlipStrandLongReadChains(!self.flipStrandLongReadChains);
-                        },
+                        label: 'Show...',
+                        icon: VisibilityIcon,
+                        type: 'subMenu',
+                        subMenu: [
+                            {
+                                label: 'Show legend',
+                                type: 'checkbox',
+                                checked: self.showLegend,
+                                onClick: () => {
+                                    self.setShowLegend(!self.showLegend);
+                                },
+                            },
+                            {
+                                label: "Show as 'read cloud' (paired-end reads)",
+                                type: 'checkbox',
+                                helpText: 'In read cloud mode, the y-coordinate of paired-end reads is proportional to insert size (TLEN). This mode is designed for paired-end short reads; long reads will appear at y=0.',
+                                checked: self.drawCloud,
+                                onClick: () => {
+                                    self.setDrawCloud(!self.drawCloud);
+                                },
+                            },
+                            {
+                                label: 'Show y-scalebar',
+                                type: 'checkbox',
+                                helpText: 'Show insert size scale on the y-axis (only visible in cloud mode)',
+                                checked: self.showYScalebar,
+                                onClick: () => {
+                                    self.setShowYScalebar(!self.showYScalebar);
+                                },
+                            },
+                            {
+                                label: 'Show read strand relative to primary',
+                                helpText: 'This makes all the reads draw their strand relative to the primary alignment, which can be helpful in seeing patterns of flipping orientation in split long-read alignments',
+                                type: 'checkbox',
+                                checked: self.flipStrandLongReadChains,
+                                onClick: () => {
+                                    self.setFlipStrandLongReadChains(!self.flipStrandLongReadChains);
+                                },
+                            },
+                            {
+                                label: 'Show outline',
+                                helpText: 'Draw an outline around each read',
+                                type: 'checkbox',
+                                checked: self.showOutline,
+                                onClick: () => {
+                                    self.setShowOutline(!self.showOutline);
+                                },
+                            },
+                            getMismatchDisplayMenuItem(self),
+                        ],
                     },
-                    getFilterByMenuItem(self),
+                    getEditFiltersMenuItem(self),
                     getColorSchemeMenuItem(self),
                 ];
             },
             async renderSvg(opts) {
-                const { renderSvg } = await import('../shared/renderSvgUtil');
-                if (self.drawCloud) {
-                    const { drawFeats } = await import('./drawFeatsCloud');
-                    return renderSvg(self, opts, drawFeats);
-                }
-                else {
-                    const { drawFeats } = await import('./drawFeatsStack');
-                    return renderSvg(self, opts, drawFeats);
-                }
+                const { renderSvg } = await import("./renderSvg.js");
+                return renderSvg(self, opts);
             },
         };
     })
@@ -163,9 +284,8 @@ function stateModelFactory(configSchema) {
             ;
             (async () => {
                 try {
-                    const { doAfterAttach } = await import('../shared/afterAttach');
-                    const { drawFeats } = await import('./drawFeatsAbstract');
-                    doAfterAttach(self, drawFeats);
+                    const { doAfterAttachRPC } = await import("./afterAttachRPC.js");
+                    doAfterAttachRPC(self);
                 }
                 catch (e) {
                     console.error(e);
@@ -173,6 +293,29 @@ function stateModelFactory(configSchema) {
                 }
             })();
         },
-    }));
+    }))
+        .postProcessSnapshot(snap => {
+        if (!snap) {
+            return snap;
+        }
+        const { drawCloud, noSpacing, trackMaxHeight, showLegend, showOutline, hideSmallIndelsSetting, hideMismatchesSetting, hideLargeIndelsSetting, ...rest } = snap;
+        return {
+            ...rest,
+            ...(drawCloud ? { drawCloud } : {}),
+            ...(noSpacing !== undefined ? { noSpacing } : {}),
+            ...(trackMaxHeight !== undefined ? { trackMaxHeight } : {}),
+            ...(showLegend !== undefined ? { showLegend } : {}),
+            ...(!showOutline ? { showOutline } : {}),
+            ...(hideSmallIndelsSetting !== undefined
+                ? { hideSmallIndelsSetting }
+                : {}),
+            ...(hideMismatchesSetting !== undefined
+                ? { hideMismatchesSetting }
+                : {}),
+            ...(hideLargeIndelsSetting !== undefined
+                ? { hideLargeIndelsSetting }
+                : {}),
+        };
+    });
 }
 export default stateModelFactory;

package/esm/LinearReadCloudDisplay/renderSvg.d.ts

@@ -0,0 +1,3 @@
+import type { LinearReadCloudDisplayModel } from './model.ts';
+import type { ExportSvgDisplayOptions } from '@jbrowse/plugin-linear-genome-view';
+export declare function renderSvg(self: LinearReadCloudDisplayModel, opts: ExportSvgDisplayOptions): Promise<import("react/jsx-runtime").JSX.Element>;

package/esm/LinearReadCloudDisplay/renderSvg.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { getContainingView, getRpcSessionId, getSession, } from '@jbrowse/core/util';
+import { ReactRendering, renderingToSvg, } from '@jbrowse/core/util/offscreenCanvasUtils';
+import { getSnapshot } from '@jbrowse/mobx-state-tree';
+import { SVGLegend } from '@jbrowse/plugin-linear-genome-view';
+import { calculateCloudTicks } from "../RenderLinearReadCloudDisplayRPC/drawFeatsCloud.js";
+import CloudYScaleBar from "./components/CloudYScaleBar.js";
+export async function renderSvg(self, opts) {
+    const view = getContainingView(self);
+    const session = getSession(self);
+    const { rpcManager, assemblyManager } = session;
+    const height = opts.overrideHeight ?? self.height;
+    const assemblyName = view.assemblyNames[0];
+    const assembly = assemblyName ? assemblyManager.get(assemblyName) : undefined;
+    const sequenceAdapterConfig = assembly?.configuration?.sequence?.adapter;
+    const sequenceAdapter = sequenceAdapterConfig
+        ? getSnapshot(sequenceAdapterConfig)
+        : undefined;
+    const viewSnapshot = structuredClone({
+        ...getSnapshot(view),
+        staticBlocks: view.staticBlocks,
+        width: view.width,
+    });
+    const rpcSessionId = getRpcSessionId(self);
+    const rendering = (await rpcManager.call(rpcSessionId, 'RenderLinearReadCloudDisplay', {
+        sessionId: rpcSessionId,
+        view: viewSnapshot,
+        adapterConfig: self.adapterConfig,
+        sequenceAdapter,
+        config: getSnapshot(self.configuration),
+        ...self.renderProps(),
+        cloudModeHeight: height,
+        exportSVG: opts,
+        theme: opts.theme,
+    }));
+    const finalRendering = await renderingToSvg(rendering, view.staticBlocks.totalWidthPx, height);
+    const visibleWidth = view.width;
+    const clipId = `clip-${self.id}-svg`;
+    const legendItems = self.showLegend ? self.legendItems() : [];
+    const cloudDomain = rendering.cloudMaxDistance !== undefined && self.drawCloud
+        ? [1, rendering.cloudMaxDistance]
+        : null;
+    const cloudTicks = cloudDomain && self.showYScalebar
+        ? calculateCloudTicks(cloudDomain, height)
+        : null;
+    return (_jsxs(_Fragment, { children: [_jsx("defs", { children: _jsx("clipPath", { id: clipId, children: _jsx("rect", { x: 0, y: 0, width: visibleWidth, height: height }) }) }), _jsx("g", { clipPath: `url(#${clipId})`, children: _jsx("g", { transform: `translate(${Math.max(0, -view.offsetPx)} 0)`, children: _jsx(ReactRendering, { rendering: finalRendering }) }) }), cloudTicks ? (_jsx("g", { transform: `translate(${Math.max(-view.offsetPx, 0)})`, children: _jsx(CloudYScaleBar, { model: { cloudTicks }, orientation: "left" }) })) : null, legendItems.length > 0 ? (_jsx(SVGLegend, { items: legendItems, width: visibleWidth, legendAreaWidth: opts.legendWidth })) : null] }));
+}

package/esm/LinearSNPCoverageDisplay/components/ArcTooltipContents.d.ts

@@ -0,0 +1,4 @@
+import type { ArcData } from './arcUtils.ts';
+export default function ArcTooltipContents({ arc }: {
+    arc: ArcData;
+}): import("react/jsx-runtime").JSX.Element;

package/esm/LinearSNPCoverageDisplay/components/ArcTooltipContents.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { toLocale } from '@jbrowse/core/util';
+import { getStrandLabel } from "./arcUtils.js";
+export default function ArcTooltipContents({ arc }) {
+    return (_jsxs("div", { children: [_jsx("div", { children: _jsx("strong", { children: "Intron/Skip" }) }), _jsxs("div", { children: ["Location: ", arc.refName, ":", toLocale(arc.start), "-", toLocale(arc.end)] }), _jsxs("div", { children: ["Length: ", toLocale(arc.end - arc.start), " bp"] }), _jsxs("div", { children: ["Reads supporting junction: ", arc.score] }), _jsxs("div", { children: ["Strand: ", getStrandLabel(arc.strand)] })] }));
+}

package/esm/LinearSNPCoverageDisplay/components/FilterArcsByScoreDialog.d.ts

@@ -0,0 +1,7 @@
+export default function FilterArcsByScoreDialog({ model, handleClose, }: {
+    model: {
+        minArcScore: number;
+        setMinArcScore: (arg: number) => void;
+    };
+    handleClose: () => void;
+}): import("react/jsx-runtime").JSX.Element;

package/esm/LinearSNPCoverageDisplay/components/FilterArcsByScoreDialog.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Dialog } from '@jbrowse/core/ui';
+import { Button, DialogActions, DialogContent, TextField, Typography, } from '@mui/material';
+export default function FilterArcsByScoreDialog({ model, handleClose, }) {
+    const [minScore, setMinScore] = useState(`${model.minArcScore}`);
+    return (_jsxs(Dialog, { open: true, maxWidth: "md", onClose: handleClose, title: "Filter arcs by score", children: [_jsxs(DialogContent, { style: { width: '40em' }, children: [_jsx(Typography, { gutterBottom: true, children: "Filter out arcs with fewer than N reads of support. Set to 0 to show all arcs." }), _jsx(TextField, { label: "Minimum read support", type: "number", value: minScore, onChange: event => {
+                            setMinScore(event.target.value);
+                        }, slotProps: {
+                            htmlInput: { min: 0 },
+                        }, fullWidth: true, margin: "normal" })] }), _jsxs(DialogActions, { children: [_jsx(Button, { onClick: handleClose, children: "Cancel" }), _jsx(Button, { variant: "contained", color: "primary", onClick: () => {
+                            const val = Number.parseInt(minScore, 10);
+                            model.setMinArcScore(Number.isNaN(val) ? 0 : Math.max(0, val));
+                            handleClose();
+                        }, children: "Apply" })] })] }));
+}

package/esm/LinearSNPCoverageDisplay/components/SNPCoverageDisplayComponent.d.ts

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

package/esm/LinearSNPCoverageDisplay/components/SNPCoverageDisplayComponent.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { LinearWiggleDisplayReactComponent } from '@jbrowse/plugin-wiggle';
+import { observer } from 'mobx-react';
+import SashimiArcs from "./SashimiArcs.js";
+const SNPCoverageDisplayComponent = observer(function SNPCoverageDisplayComponent(props) {
+    const { model } = props;
+    return (_jsxs("div", { style: { position: 'relative' }, children: [_jsx(LinearWiggleDisplayReactComponent, { ...props }), _jsx(SashimiArcs, { model: model })] }));
+});
+export default SNPCoverageDisplayComponent;

package/esm/LinearSNPCoverageDisplay/components/SashimiArcs.d.ts

@@ -0,0 +1,10 @@
+import type { Feature } from '@jbrowse/core/util';
+export interface ArcDisplayModel {
+    showArcsSetting: boolean;
+    height: number;
+    skipFeatures: Feature[];
+}
+declare const SashimiArcs: ({ model, }: {
+    model: ArcDisplayModel;
+}) => import("react/jsx-runtime").JSX.Element | null;
+export default SashimiArcs;

package/esm/LinearSNPCoverageDisplay/components/SashimiArcs.js

@@ -0,0 +1,169 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from 'react';
+import BaseTooltip from '@jbrowse/core/ui/BaseTooltip';
+import { getContainingTrack, getContainingView, getSession, isSessionModelWithWidgets, notEmpty, } from '@jbrowse/core/util';
+import { observer } from 'mobx-react';
+import ArcTooltipContents from "./ArcTooltipContents.js";
+import { featureToArcData, getArcSelectedColor } from "./arcUtils.js";
+const YSCALEBAR_LABEL_OFFSET = 5;
+const SVGNS = 'http://www.w3.org/2000/svg';
+const SashimiArcs = observer(function SashimiArcs({ model, }) {
+    const { showArcsSetting, height, skipFeatures } = model;
+    const view = getContainingView(model);
+    const { assemblyManager } = getSession(model);
+    const [hoverInfo, setHoverInfo] = useState(null);
+    const [selectedArcId, setSelectedArcId] = useState(null);
+    const svgRef = useRef(null);
+    const arcMapRef = useRef(new Map());
+    const pathMapRef = useRef(new Map());
+    const selectedArcIdRef = useRef(null);
+    selectedArcIdRef.current = selectedArcId;
+    const width = Math.round(view.dynamicBlocks.totalWidthPx);
+    const effectiveHeight = height - YSCALEBAR_LABEL_OFFSET * 2;
+    const { arcs, drawnAtBpPerPx, drawnAtOffsetPx } = useMemo(() => {
+        const currentOffsetPx = view.offsetPx;
+        const assembly = assemblyManager.get(view.assemblyNames[0]);
+        return {
+            arcs: assembly
+                ? skipFeatures
+                    .map(f => featureToArcData(f, view, effectiveHeight, currentOffsetPx, assembly))
+                    .filter(notEmpty)
+                : [],
+            drawnAtBpPerPx: view.bpPerPx,
+            drawnAtOffsetPx: currentOffsetPx,
+        };
+    }, [skipFeatures, view.bpPerPx, effectiveHeight]);
+    useEffect(() => {
+        const svg = svgRef.current;
+        if (!svg) {
+            return;
+        }
+        while (svg.firstChild) {
+            svg.firstChild.remove();
+        }
+        const arcMap = new Map();
+        const pathMap = new Map();
+        const handleMouseEnter = (event) => {
+            const target = event.currentTarget;
+            const id = target.dataset.id;
+            if (id) {
+                const arc = arcMap.get(id);
+                if (arc) {
+                    setHoverInfo({ arc, x: event.clientX, y: event.clientY });
+                    const isSelected = id === selectedArcIdRef.current;
+                    target.setAttribute('opacity', '1');
+                    target.setAttribute('stroke-width', String(arc.strokeWidth + (isSelected ? 4 : 2)));
+                }
+            }
+        };
+        const handleMouseLeave = (event) => {
+            const target = event.currentTarget;
+            const id = target.dataset.id;
+            if (id) {
+                const arc = arcMap.get(id);
+                if (arc) {
+                    const isSelected = id === selectedArcIdRef.current;
+                    target.setAttribute('opacity', '0.7');
+                    if (isSelected) {
+                        target.setAttribute('stroke', getArcSelectedColor(arc.strand));
+                        target.setAttribute('stroke-width', String(arc.strokeWidth + 3));
+                    }
+                    else {
+                        target.setAttribute('stroke', arc.stroke);
+                        target.setAttribute('stroke-width', String(arc.strokeWidth));
+                    }
+                }
+            }
+            setHoverInfo(null);
+        };
+        const handleClick = (event) => {
+            const target = event.currentTarget;
+            const id = target.dataset.id;
+            if (id) {
+                setSelectedArcId(prev => (prev === id ? null : id));
+                const arc = arcMap.get(id);
+                if (arc) {
+                    const session = getSession(model);
+                    if (isSessionModelWithWidgets(session)) {
+                        const featureWidget = session.addWidget('BaseFeatureWidget', 'baseFeature', {
+                            featureData: {
+                                uniqueId: arc.id,
+                                refName: arc.refName,
+                                start: arc.start,
+                                end: arc.end,
+                                type: 'junction',
+                                strand: arc.strand,
+                                score: arc.score,
+                                length: arc.end - arc.start,
+                            },
+                            view: getContainingView(model),
+                            track: getContainingTrack(model),
+                        });
+                        session.showWidget(featureWidget);
+                    }
+                }
+            }
+        };
+        const sortedArcs = [...arcs].sort((a, b) => a.score - b.score);
+        for (const arc of sortedArcs) {
+            arcMap.set(arc.id, arc);
+            const path = document.createElementNS(SVGNS, 'path');
+            path.setAttribute('d', arc.path);
+            path.setAttribute('stroke', arc.stroke);
+            path.setAttribute('stroke-width', String(arc.strokeWidth));
+            path.setAttribute('fill', 'none');
+            path.setAttribute('opacity', '0.7');
+            path.setAttribute('pointer-events', 'stroke');
+            path.setAttribute('cursor', 'pointer');
+            path.dataset.id = arc.id;
+            path.addEventListener('mouseenter', handleMouseEnter);
+            path.addEventListener('mouseleave', handleMouseLeave);
+            path.addEventListener('click', handleClick);
+            pathMap.set(arc.id, path);
+            svg.append(path);
+        }
+        arcMapRef.current = arcMap;
+        pathMapRef.current = pathMap;
+        return () => {
+            while (svg.firstChild) {
+                const child = svg.firstChild;
+                child.removeEventListener('mouseenter', handleMouseEnter);
+                child.removeEventListener('mouseleave', handleMouseLeave);
+                child.removeEventListener('click', handleClick);
+                child.remove();
+            }
+        };
+    }, [arcs, model]);
+    useEffect(() => {
+        const pathMap = pathMapRef.current;
+        const arcMap = arcMapRef.current;
+        for (const [id, path] of pathMap) {
+            const arc = arcMap.get(id);
+            if (arc) {
+                if (id === selectedArcId) {
+                    path.setAttribute('stroke', getArcSelectedColor(arc.strand));
+                    path.setAttribute('stroke-width', String(arc.strokeWidth + 3));
+                }
+                else {
+                    path.setAttribute('stroke', arc.stroke);
+                    path.setAttribute('stroke-width', String(arc.strokeWidth));
+                }
+            }
+        }
+    }, [selectedArcId]);
+    if (!showArcsSetting ||
+        !view.initialized ||
+        drawnAtBpPerPx !== view.bpPerPx) {
+        return null;
+    }
+    const left = drawnAtOffsetPx - view.offsetPx;
+    return (_jsxs(_Fragment, { children: [_jsx("svg", { ref: svgRef, style: {
+                    position: 'absolute',
+                    top: YSCALEBAR_LABEL_OFFSET,
+                    left,
+                    pointerEvents: 'none',
+                    height: effectiveHeight,
+                    width,
+                } }), hoverInfo ? (_jsx(BaseTooltip, { clientPoint: { x: hoverInfo.x + 5, y: hoverInfo.y }, children: _jsx(ArcTooltipContents, { arc: hoverInfo.arc }) })) : null] }));
+});
+export default SashimiArcs;