jbrowse-plugin-protein3d 0.4.14 → 0.5.0

package/dist/LaunchProteinView/components/FoldseekActionMenu.js

@@ -1,12 +1,12 @@
 import React, { useState } from 'react';
 import { ErrorMessage } from '@jbrowse/core/ui';
+import { isSessionWithAddTracks } from '@jbrowse/core/util';
 import { Button, Menu, MenuItem } from '@mui/material';
+import { useSafeLaunch } from '../hooks/useSafeLaunch';
 import { caCoordsToPdb, hasValidCaCoords } from '../utils/caCoordsToPdb';
-import { safeLaunch } from '../utils/launchHelpers';
 import { getConfidenceUrlFromTarget, getUniprotIdFromAlphaFoldTarget, hasMsaViewPlugin, launch1DProteinView, launch3DProteinView, launchMsaView, } from '../utils/launchViewUtils';
 export default function FoldseekActionMenu({ hit, session, view, feature, selectedTranscript, userProvidedTranscriptSequence, onClose, }) {
     const [anchorEl, setAnchorEl] = useState(null);
-    const [launchError, setLaunchError] = useState();
     const open = Boolean(anchorEl);
     const uniprotId = getUniprotIdFromAlphaFoldTarget(hit.target);
     const handleClick = (event) => {
@@ -15,11 +15,8 @@ export default function FoldseekActionMenu({ hit, session, view, feature, select
     const handleMenuClose = () => {
         setAnchorEl(null);
     };
+    const { runLaunch, launchError } = useSafeLaunch(onClose, handleMenuClose);
     const baseParams = { session, view, feature, selectedTranscript, uniprotId };
-    const runLaunch = (fn) => () => {
-        handleMenuClose();
-        void safeLaunch(fn, onClose, setLaunchError);
-    };
     const handleLaunch3D = runLaunch(() => {
         // Use tCa coordinates to generate PDB data if no URL is available
         const pdbData = !hit.structureUrl && hasValidCaCoords(hit.tCa, hit.tSeq)
@@ -32,24 +29,28 @@ export default function FoldseekActionMenu({ hit, session, view, feature, select
             userProvidedTranscriptSequence,
         });
     });
-    const handleLaunch1D = runLaunch(async () => {
-        await launch1DProteinView({
-            ...baseParams,
-            confidenceUrl: getConfidenceUrlFromTarget(hit.target),
-        });
-    });
     const handleLaunchMSA = runLaunch(() => {
         launchMsaView(baseParams);
     });
-    const canLoad = hit.structureUrl ?? hasValidCaCoords(hit.tCa, hit.tSeq);
+    const canLoad = !!hit.structureUrl || hasValidCaCoords(hit.tCa, hit.tSeq);
     if (!canLoad) {
         return React.createElement("span", null, "-");
     }
+    // 1D launch needs an add-tracks session and a uniprotId; narrowing both here
+    // gates the menu item and types its handler from a single condition.
+    const addTracksSession = isSessionWithAddTracks(session) ? session : undefined;
     return (React.createElement(React.Fragment, null,
         launchError ? React.createElement(ErrorMessage, { error: launchError }) : null,
         React.createElement(Button, { size: "small", variant: "outlined", onClick: handleClick }, "Load"),
         React.createElement(Menu, { anchorEl: anchorEl, open: open, onClose: handleMenuClose },
             React.createElement(MenuItem, { onClick: handleLaunch3D }, "Launch 3D protein view"),
-            uniprotId ? (React.createElement(MenuItem, { onClick: handleLaunch1D }, "Launch 1D protein annotation view")) : null,
+            addTracksSession && uniprotId ? (React.createElement(MenuItem, { onClick: runLaunch(() => launch1DProteinView({
+                    session: addTracksSession,
+                    view,
+                    feature,
+                    selectedTranscript,
+                    uniprotId,
+                    confidenceUrl: getConfidenceUrlFromTarget(hit.target),
+                })) }, "Launch 1D protein annotation view")) : null,
             uniprotId && hasMsaViewPlugin() ? (React.createElement(MenuItem, { onClick: handleLaunchMSA }, "Launch MSA view (AlphaFoldDB a3m)")) : null)));
 }

package/dist/LaunchProteinView/components/ProteinViewActions.js

@@ -1,17 +1,18 @@
 import React, { useState } from 'react';
 import { ErrorMessage } from '@jbrowse/core/ui';
+import { isSessionWithAddTracks } from '@jbrowse/core/util';
 import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
 import SettingsIcon from '@mui/icons-material/Settings';
 import { Button, ButtonGroup, IconButton, Tooltip, Typography } from '@mui/material';
 import LaunchOptionsDialog from './LaunchOptionsDialog';
 import LaunchSettingsDialog from './LaunchSettingsDialog';
 import SequenceMismatchNotice from './SequenceMismatchNotice';
-import { getLaunchMissingReasons, safeLaunch } from '../utils/launchHelpers';
+import { useSafeLaunch } from '../hooks/useSafeLaunch';
+import { getLaunchMissingReasons } from '../utils/launchHelpers';
 import { hasMsaViewPlugin, launch1DProteinView, launch3DProteinView, launch3DProteinViewWithMsa, launchMsaView, } from '../utils/launchViewUtils';
 export default function ProteinViewActions({ handleClose, uniprotId, userSelectedProteinSequence, selectedTranscript, url, confidenceUrl, feature, view, session, alignmentAlgorithm, onAlignmentAlgorithmChange, sequencesMatch, isLoading, error, }) {
     const [dialogOpen, setDialogOpen] = useState(false);
     const [settingsOpen, setSettingsOpen] = useState(false);
-    const [launchError, setLaunchError] = useState();
     // Disable launch while loading — SWR's keepPreviousData would otherwise let
     // a user click Launch on stale results (wrong UniProt ID) during a refetch.
     const canLaunch = !isLoading &&
@@ -28,6 +29,7 @@ export default function ProteinViewActions({ handleClose, uniprotId, userSelecte
     const closeMenu = () => {
         setDialogOpen(false);
     };
+    const { runLaunch, launchError } = useSafeLaunch(handleClose, closeMenu);
     const baseParams = {
         session,
         view,
@@ -41,22 +43,21 @@ export default function ProteinViewActions({ handleClose, uniprotId, userSelecte
         userProvidedTranscriptSequence: userSelectedProteinSequence?.seq,
         alignmentAlgorithm,
     };
-    const runLaunch = (fn) => () => {
-        closeMenu();
-        void safeLaunch(fn, handleClose, setLaunchError);
-    };
     const handleLaunch3DView = runLaunch(() => {
         launch3DProteinView(launch3DParams);
     });
-    const handleLaunch1DView = runLaunch(async () => {
-        await launch1DProteinView({ ...baseParams, confidenceUrl });
-    });
     const handleLaunchMsa = runLaunch(() => {
         launchMsaView(baseParams);
     });
     const handleLaunch3DWithMsa = runLaunch(() => {
         launch3DProteinViewWithMsa(launch3DParams);
     });
+    // The 1D annotation view needs an add-tracks session and a known uniprotId.
+    // Narrowing here is the single source of truth: the option only exists when
+    // both hold, and its handler is type-checked against those narrowed values —
+    // so a 1D launch that can't work is unrepresentable rather than a silent
+    // no-op.
+    const addTracksSession = isSessionWithAddTracks(session) ? session : undefined;
     const launchOptions = [
         {
             key: '3d',
@@ -64,12 +65,23 @@ export default function ProteinViewActions({ handleClose, uniprotId, userSelecte
             description: 'View protein structure with genome-to-structure coordinate mapping',
             onClick: handleLaunch3DView,
         },
-        {
-            key: '1d',
-            title: 'Launch 1D protein annotation view',
-            description: 'View protein features and annotations as a linear track',
-            onClick: handleLaunch1DView,
-        },
+        ...(addTracksSession && uniprotId
+            ? [
+                {
+                    key: '1d',
+                    title: 'Launch 1D protein annotation view',
+                    description: 'View protein features and annotations as a linear track',
+                    onClick: runLaunch(() => launch1DProteinView({
+                        session: addTracksSession,
+                        view,
+                        feature,
+                        selectedTranscript,
+                        uniprotId,
+                        confidenceUrl,
+                    })),
+                },
+            ]
+            : []),
         ...(hasMsaViewPlugin()
             ? [
                 {

package/dist/LaunchProteinView/components/UserProvidedStructure.js

@@ -11,7 +11,7 @@ import ExternalLink from '../../components/ExternalLink';
 import useStructureFileSequence from '../hooks/useStructureFileSequence';
 import useTranscriptIsoformSelection from '../hooks/useTranscriptIsoformSelection';
 import { launch3DProteinView } from '../utils/launchViewUtils';
-import { getGeneDisplayName, getTranscriptDisplayName, stripStopCodon, } from '../utils/util';
+import { stripStopCodon } from '../utils/util';
 const useStyles = makeStyles()(theme => ({
     dialogContent: {
         marginTop: theme.spacing(6),
@@ -62,7 +62,6 @@ const UserProvidedStructure = observer(function UserProvidedStructure({ feature,
                 data: structureData,
                 userProvidedTranscriptSequence: protein.seq,
                 alignmentAlgorithm,
-                displayName: `Protein view ${getGeneDisplayName(feature)} - ${getTranscriptDisplayName(selectedTranscript)}`,
             });
             handleClose();
         }

package/dist/LaunchProteinView/hooks/useSafeLaunch.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Shared launch-button wiring for the action components: holds the launch
+ * error state and returns a `runLaunch` factory that closes any open menu,
+ * runs the launch via safeLaunch, and surfaces failures inline.
+ */
+export declare function useSafeLaunch(onSuccess: () => void, onBeforeLaunch?: () => void): {
+    runLaunch: (fn: () => void | Promise<void>) => () => void;
+    launchError: unknown;
+};

package/dist/LaunchProteinView/hooks/useSafeLaunch.js

@@ -0,0 +1,15 @@
+import { useState } from 'react';
+import { safeLaunch } from '../utils/launchHelpers';
+/**
+ * Shared launch-button wiring for the action components: holds the launch
+ * error state and returns a `runLaunch` factory that closes any open menu,
+ * runs the launch via safeLaunch, and surfaces failures inline.
+ */
+export function useSafeLaunch(onSuccess, onBeforeLaunch) {
+    const [launchError, setLaunchError] = useState();
+    const runLaunch = (fn) => () => {
+        onBeforeLaunch?.();
+        void safeLaunch(fn, onSuccess, setLaunchError);
+    };
+    return { runLaunch, launchError };
+}

package/dist/LaunchProteinView/utils/launchViewUtils.d.ts

@@ -3,7 +3,7 @@ declare global {
         JBrowsePluginMsaView?: unknown;
     }
 }
-import type { AbstractSessionModel, Feature } from '@jbrowse/core/util';
+import type { AbstractSessionModel, Feature, SessionWithAddTracks } from '@jbrowse/core/util';
 import type { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view';
 export declare const ALPHAFOLD_VERSION = "v6";
 export declare function getAlphaFoldStructureUrl(uniprotId: string, version?: string): string;
@@ -20,28 +20,26 @@ interface LaunchViewParams {
     selectedTranscript?: Feature;
     uniprotId?: string;
 }
-export declare function formatViewName(prefix: string, feature: Feature, selectedTranscript?: Feature, uniprotId?: string): string;
-export declare function launch3DProteinView({ session, view, feature, selectedTranscript, uniprotId, url, data, userProvidedTranscriptSequence, alignmentAlgorithm, displayName, connectedMsaViewId, sideBySide, }: LaunchViewParams & {
+interface Launch3DExtraParams {
     url?: string;
     data?: string;
     userProvidedTranscriptSequence?: string;
     alignmentAlgorithm?: string;
     displayName?: string;
+}
+export declare function formatViewName(prefix: string, feature: Feature, selectedTranscript?: Feature, uniprotId?: string): string;
+export declare function launch3DProteinView({ session, view, feature, selectedTranscript, uniprotId, url, data, userProvidedTranscriptSequence, alignmentAlgorithm, displayName, connectedMsaViewId, sideBySide, }: LaunchViewParams & Launch3DExtraParams & {
     connectedMsaViewId?: string;
     sideBySide?: boolean;
 }): import("@jbrowse/core/util").AbstractViewModel;
-export declare function launch1DProteinView({ session, view, feature, selectedTranscript, uniprotId, confidenceUrl, }: LaunchViewParams & {
+export declare function launch1DProteinView({ session, view, feature, selectedTranscript, uniprotId, confidenceUrl, }: Omit<LaunchViewParams, 'session' | 'uniprotId'> & {
+    session: SessionWithAddTracks;
+    uniprotId: string;
     confidenceUrl?: string;
 }): Promise<void>;
 export declare function launchMsaView({ session, view, feature, selectedTranscript, uniprotId, displayName, }: LaunchViewParams & {
     displayName?: string;
 }): import("@jbrowse/core/util").AbstractViewModel | undefined;
 export declare function hasMsaViewPlugin(): boolean;
-export declare function launch3DProteinViewWithMsa(params: LaunchViewParams & {
-    url?: string;
-    data?: string;
-    userProvidedTranscriptSequence?: string;
-    alignmentAlgorithm?: string;
-    displayName?: string;
-}): import("@jbrowse/core/util").AbstractViewModel | undefined;
+export declare function launch3DProteinViewWithMsa(params: LaunchViewParams & Launch3DExtraParams): import("@jbrowse/core/util").AbstractViewModel | undefined;
 export {};

package/dist/LaunchProteinView/utils/launchViewUtils.js

@@ -1,5 +1,4 @@
-import { isSessionWithAddTracks } from '@jbrowse/core/util';
-import { getLaunchSideBySide, launchViewSideBySide } from './sideBySide';
+import { maybeLaunchSideBySide } from './sideBySide';
 import { getGeneDisplayName, getTranscriptDisplayName } from './util';
 import { launchProteinAnnotationView } from '../components/launchProteinAnnotationView';
 export const ALPHAFOLD_VERSION = 'v6';
@@ -77,15 +76,14 @@ export function launch3DProteinView({ session, view, feature, selectedTranscript
             formatViewName('Protein view', feature, selectedTranscript, uniprotId),
     };
     const proteinView = session.addView('ProteinView', snap);
-    if (sideBySide ?? getLaunchSideBySide()) {
-        launchViewSideBySide(session, proteinView.id);
-    }
+    maybeLaunchSideBySide(session, proteinView.id, sideBySide);
     return proteinView;
 }
+// The 1D annotation view adds temporary tracks/assemblies, so it requires a
+// SessionWithAddTracks and a known uniprotId. Demanding both in the signature
+// forces callers to narrow up front — there's no silent no-op when a wide
+// session or missing id slips through.
 export async function launch1DProteinView({ session, view, feature, selectedTranscript, uniprotId, confidenceUrl, }) {
-    if (!uniprotId || !isSessionWithAddTracks(session)) {
-        return;
-    }
     await launchProteinAnnotationView({
         session,
         selectedTranscript,

package/dist/LaunchProteinView/utils/sideBySide.d.ts

@@ -9,3 +9,8 @@ export declare function setLaunchSideBySide(value: boolean): void;
  * new right panel). No-op on sessions without workspaces support.
  */
 export declare function launchViewSideBySide(session: AbstractSessionModel, viewId: string): void;
+/**
+ * Apply the side-by-side split honoring an explicit override, falling back to
+ * the launch-dialog localStorage preference when undefined.
+ */
+export declare function maybeLaunchSideBySide(session: AbstractSessionModel, viewId: string, sideBySide?: boolean): void;

package/dist/LaunchProteinView/utils/sideBySide.js

@@ -31,3 +31,12 @@ export function launchViewSideBySide(session, viewId) {
         session.setUseWorkspaces(true);
     }
 }
+/**
+ * Apply the side-by-side split honoring an explicit override, falling back to
+ * the launch-dialog localStorage preference when undefined.
+ */
+export function maybeLaunchSideBySide(session, viewId, sideBySide) {
+    if (sideBySide ?? getLaunchSideBySide()) {
+        launchViewSideBySide(session, viewId);
+    }
+}

package/dist/LaunchProteinViewExtensionPoint/index.js

@@ -1,5 +1,5 @@
 import { resolveShortLaunch } from './resolveShortLaunch';
-import { getLaunchSideBySide, launchViewSideBySide, } from '../LaunchProteinView/utils/sideBySide';
+import { maybeLaunchSideBySide } from '../LaunchProteinView/utils/sideBySide';
 export default function LaunchProteinViewExtensionPointF(pluginManager) {
     pluginManager.addToExtensionPoint('LaunchView-ProteinView', 
     // LaunchView extension points are typed as transformers `(extendee, props)
@@ -31,7 +31,10 @@ export default function LaunchProteinViewExtensionPointF(pluginManager) {
         }
         const finalUrl = url ?? resolved?.url;
         if (!finalUrl) {
-            throw new Error('No url or uniprotId provided when launching protein view');
+            const message = 'No url or uniprotId provided when launching protein view';
+            console.error(message);
+            session.notify(`Could not launch protein view: ${message}`, 'error');
+            return;
         }
         // A session spec launches each view independently with an auto-generated
         // id, so it cannot pre-compute a connectedViewId to cross-reference. When
@@ -67,8 +70,8 @@ export default function LaunchProteinViewExtensionPointF(pluginManager) {
                 },
             ],
         });
-        if (ownsConnectedView && (sideBySide ?? getLaunchSideBySide())) {
-            launchViewSideBySide(session, proteinView.id);
+        if (ownsConnectedView) {
+            maybeLaunchSideBySide(session, proteinView.id, sideBySide);
         }
     });
 }

package/dist/ProteinView/applyLociInteractivity.d.ts

@@ -1,23 +1,29 @@
 import type { Structure } from 'molstar/lib/mol-model/structure';
 import type { PluginContext } from 'molstar/lib/mol-plugin/context';
-type InteractivityMode = 'highlight' | 'select' | 'clear';
-export declare function applyLociInteractivityMultiple({ structure, residues, plugin, mode, }: {
-    structure: Structure;
+/**
+ * Which residues a highlight/selection should cover, in the plugin's native
+ * 0-based structure-sequence coordinates (see coordinates.ts). `range` is the
+ * half-open span [start, end); `list` is an explicit set of positions. The one
+ * conversion to molstar's 1-based inclusive label_seq_id happens in specToTest
+ * below — the single boundary where structure positions cross into molstar.
+ */
+export type ResidueSpec = {
+    kind: 'range';
+    start: number;
+    end: number;
+} | {
+    kind: 'list';
     residues: number[];
-    plugin: PluginContext;
-    mode: InteractivityMode;
-}): Promise<void>;
-export declare function applyLociInteractivity({ structure, startResidue, endResidue, plugin, mode, }: {
-    structure: Structure;
-    startResidue: number;
-    endResidue: number;
-    plugin: PluginContext;
-    mode: InteractivityMode;
-}): Promise<void>;
-export declare function applyLociInteractivitySingle({ structure, selectedResidue, plugin, mode, }: {
+};
+/**
+ * Reconcile one interactivity channel (hover-`highlight` or click-`select`) to
+ * the desired residue spec. Passing `undefined` (or an empty `list`) clears the
+ * channel, so callers describe the target state declaratively rather than
+ * juggling clear/apply calls.
+ */
+export declare function setMolstarLoci({ structure, plugin, channel, spec, }: {
     structure: Structure;
-    selectedResidue: number;
     plugin: PluginContext;
-    mode: InteractivityMode;
+    channel: 'highlight' | 'select';
+    spec: ResidueSpec | undefined;
 }): Promise<void>;
-export {};

package/dist/ProteinView/applyLociInteractivity.js

@@ -1,67 +1,39 @@
 import loadMolstar from './loadMolstar';
-import { getMolstarStructureSelection } from './util';
-function clearLoci(plugin) {
-    plugin.managers.interactivity.lociHighlights.clearHighlights();
-    plugin.managers.interactivity.lociSelects.deselectAll();
-}
-function applyLoci(plugin, loci, mode) {
-    if (mode === 'highlight') {
-        plugin.managers.interactivity.lociHighlights.clearHighlights();
-        plugin.managers.interactivity.lociHighlights.highlight({ loci });
+const seqId = (Q) => Q.struct.atomProperty.macromolecular.label_seq_id();
+const specToTest = (spec) => spec.kind === 'range'
+    ? Q => Q.core.logic.and([
+        Q.core.rel.gre([seqId(Q), spec.start + 1]),
+        Q.core.rel.lte([seqId(Q), spec.end]),
+    ])
+    : Q => Q.core.logic.or(spec.residues.map(pos => Q.core.rel.eq([seqId(Q), pos + 1])));
+const isActive = (spec) => spec !== undefined &&
+    (spec.kind === 'range' ? spec.end > spec.start : spec.residues.length > 0);
+/**
+ * Reconcile one interactivity channel (hover-`highlight` or click-`select`) to
+ * the desired residue spec. Passing `undefined` (or an empty `list`) clears the
+ * channel, so callers describe the target state declaratively rather than
+ * juggling clear/apply calls.
+ */
+export async function setMolstarLoci({ structure, plugin, channel, spec, }) {
+    const { lociHighlights, lociSelects } = plugin.managers.interactivity;
+    if (channel === 'highlight') {
+        lociHighlights.clearHighlights();
     }
     else {
-        plugin.managers.interactivity.lociSelects.deselectAll();
-        plugin.managers.interactivity.lociSelects.select({ loci });
-    }
-}
-export async function applyLociInteractivityMultiple({ structure, residues, plugin, mode, }) {
-    if (mode === 'clear' || residues.length === 0) {
-        clearLoci(plugin);
-        return;
+        lociSelects.deselectAll();
     }
-    const { StructureSelection, Script } = await loadMolstar();
-    const sel = Script.getStructureSelection(Q => Q.struct.generator.atomGroups({
-        'residue-test': Q.core.logic.or(residues.map(residue => Q.core.rel.eq([
-            Q.struct.atomProperty.macromolecular.label_seq_id(),
-            residue,
-        ]))),
-        'group-by': Q.struct.atomProperty.macromolecular.residueKey(),
-    }), structure);
-    const loci = StructureSelection.toLociWithSourceUnits(sel);
-    applyLoci(plugin, loci, mode);
-}
-export async function applyLociInteractivity({ structure, startResidue, endResidue, plugin, mode, }) {
-    if (mode === 'clear') {
-        clearLoci(plugin);
-        return;
-    }
-    const { StructureSelection, Script } = await loadMolstar();
-    const sel = Script.getStructureSelection(Q => Q.struct.generator.atomGroups({
-        'residue-test': Q.core.logic.and([
-            Q.core.rel.gre([
-                Q.struct.atomProperty.macromolecular.label_seq_id(),
-                startResidue,
-            ]),
-            Q.core.rel.lte([
-                Q.struct.atomProperty.macromolecular.label_seq_id(),
-                endResidue,
-            ]),
-        ]),
-        'group-by': Q.struct.atomProperty.macromolecular.residueKey(),
-    }), structure);
-    const loci = StructureSelection.toLociWithSourceUnits(sel);
-    applyLoci(plugin, loci, mode);
-}
-export async function applyLociInteractivitySingle({ structure, selectedResidue, plugin, mode, }) {
-    if (mode === 'clear') {
-        clearLoci(plugin);
-        return;
+    if (isActive(spec)) {
+        const { StructureSelection, Script } = await loadMolstar();
+        const sel = Script.getStructureSelection(Q => Q.struct.generator.atomGroups({
+            'residue-test': specToTest(spec)(Q),
+            'group-by': Q.struct.atomProperty.macromolecular.residueKey(),
+        }), structure);
+        const loci = StructureSelection.toLociWithSourceUnits(sel);
+        if (channel === 'highlight') {
+            lociHighlights.highlight({ loci });
+        }
+        else {
+            lociSelects.select({ loci });
+        }
     }
-    const { StructureSelection } = await loadMolstar();
-    const sel = await getMolstarStructureSelection({
-        structure,
-        selectedResidue: selectedResidue + 1,
-    });
-    const loci = StructureSelection.toLociWithSourceUnits(sel);
-    applyLoci(plugin, loci, mode);
 }

package/dist/ProteinView/components/FeatureBar.d.ts

@@ -4,5 +4,5 @@ import type { JBrowsePluginProteinStructureModel } from '../model';
 declare const FeatureBar: ({ feature, model, }: {
     feature: UniProtFeature;
     model: JBrowsePluginProteinStructureModel;
-}) => React.JSX.Element;
+}) => React.JSX.Element | null;
 export default FeatureBar;

package/dist/ProteinView/components/FeatureBar.js

@@ -1,24 +1,26 @@
 import React, { useState } from 'react';
 import { Tooltip } from '@mui/material';
 import { observer } from 'mobx-react';
+import { setMolstarLoci } from '../applyLociInteractivity';
 import { CHAR_WIDTH, HOVERED_BORDER, SELECTED_BORDER } from '../constants';
-import { selectResidueRange } from '../highlightResidueRange';
 import { getFeatureColor } from '../hooks/useUniProtFeatures';
 import { clickProteinToGenome } from '../proteinToGenomeMapping';
-function getFeatureAlignmentRange(feature, structurePositionToAlignmentMap) {
-    const startAlignmentPos = structurePositionToAlignmentMap?.[feature.start - 1];
-    const endAlignmentPos = structurePositionToAlignmentMap?.[feature.end - 1];
-    return startAlignmentPos !== undefined && endAlignmentPos !== undefined
-        ? { start: startAlignmentPos, end: endAlignmentPos }
-        : undefined;
-}
-function getFeatureGeometry(feature, structurePositionToAlignmentMap) {
-    const startAlnPos = structurePositionToAlignmentMap?.[feature.start - 1] ?? feature.start - 1;
-    const endAlnPos = structurePositionToAlignmentMap?.[feature.end - 1] ?? feature.end - 1;
-    return {
-        left: startAlnPos * CHAR_WIDTH,
-        width: Math.max((endAlnPos - startAlnPos + 1) * CHAR_WIDTH, 3),
-    };
+/**
+ * Maps a feature's structure range onto alignment columns, returning both the
+ * alignment range (for hover) and pixel geometry. Returns undefined when either
+ * endpoint has no alignment column, so unmappable features aren't drawn at a
+ * misleading position.
+ */
+function getFeatureLayout(feature, structurePositionToAlignmentMap) {
+    const start = structurePositionToAlignmentMap?.[feature.start - 1];
+    const end = structurePositionToAlignmentMap?.[feature.end - 1];
+    return start === undefined || end === undefined
+        ? undefined
+        : {
+            range: { start, end },
+            left: start * CHAR_WIDTH,
+            width: Math.max((end - start + 1) * CHAR_WIDTH, 3),
+        };
 }
 function FeatureTooltipContent({ feature }) {
     return (React.createElement("div", null,
@@ -35,11 +37,11 @@ const FeatureBar = observer(function FeatureBar({ feature, model, }) {
     const [isHovered, setIsHovered] = useState(false);
     const { molstarPluginContext, selectedFeatureId, structurePositionToAlignmentMap, } = model;
     const isSelected = selectedFeatureId === feature.uniqueId;
+    const layout = getFeatureLayout(feature, structurePositionToAlignmentMap);
     const handleMouseEnter = () => {
         setIsHovered(true);
-        const range = getFeatureAlignmentRange(feature, structurePositionToAlignmentMap);
-        if (range) {
-            model.setAlignmentHoverRange(range);
+        if (layout) {
+            model.setAlignmentHoverRange(layout.range);
         }
     };
     const handleMouseLeave = () => {
@@ -50,20 +52,17 @@ const FeatureBar = observer(function FeatureBar({ feature, model, }) {
         const structure = model.molstarStructure;
         const newSelected = !isSelected;
         if (structure && molstarPluginContext) {
-            if (newSelected) {
-                selectResidueRange({
-                    structure,
-                    startResidue: feature.start,
-                    endResidue: feature.end,
-                    plugin: molstarPluginContext,
-                }).catch((e) => {
-                    console.error(e);
-                    model.setError(e);
-                });
-            }
-            else {
-                molstarPluginContext.managers.interactivity.lociSelects.deselectAll();
-            }
+            setMolstarLoci({
+                structure,
+                plugin: molstarPluginContext,
+                channel: 'select',
+                spec: newSelected
+                    ? { kind: 'range', start: feature.start - 1, end: feature.end }
+                    : undefined,
+            }).catch((e) => {
+                console.error(e);
+                model.setError(e);
+            });
         }
         if (newSelected) {
             model.setSelectedFeatureId(feature.uniqueId);
@@ -81,7 +80,10 @@ const FeatureBar = observer(function FeatureBar({ feature, model, }) {
             model.setClickedStructureRange(undefined);
         }
     };
-    const { left, width } = getFeatureGeometry(feature, structurePositionToAlignmentMap);
+    if (!layout) {
+        return null;
+    }
+    const { left, width } = layout;
     const color = getFeatureColor(feature.type);
     return (React.createElement(Tooltip, { title: React.createElement(FeatureTooltipContent, { feature: feature }), followCursor: true },
         React.createElement("div", { "data-testid": `protein-feature-${feature.type}`, "data-feature-id": feature.uniqueId, "data-feature-start": feature.start, "data-feature-end": feature.end, onClick: () => {

package/dist/ProteinView/components/FeatureTypeLabel.js

@@ -1,5 +1,6 @@
 import React from 'react';
-import { Tooltip } from '@mui/material';
+import CloseIcon from '@mui/icons-material/Close';
+import { IconButton, Tooltip } from '@mui/material';
 import { observer } from 'mobx-react';
 import { HIDE_BUTTON_COLOR } from '../constants';
 const FeatureTypeLabel = observer(function FeatureTypeLabel({ type, labelWidth, model, }) {
@@ -19,16 +20,11 @@ const FeatureTypeLabel = observer(function FeatureTypeLabel({ type, labelWidth,
                 justifyContent: 'flex-end',
                 gap: 2,
             } },
-            React.createElement("span", { onClick: e => {
+            React.createElement(IconButton, { onClick: e => {
                     e.stopPropagation();
                     model.hideFeatureType(type);
-                }, style: {
-                    cursor: 'pointer',
-                    color: HIDE_BUTTON_COLOR,
-                    fontWeight: 'bold',
-                    fontSize: 8,
-                    lineHeight: 1,
-                }, title: `Hide ${type} track` }, "x"),
+                }, title: `Hide ${type} track`, sx: { p: 0, color: HIDE_BUTTON_COLOR } },
+                React.createElement(CloseIcon, { sx: { fontSize: model.trackHeight } })),
             React.createElement("span", { style: { overflow: 'hidden', textOverflow: 'ellipsis' } }, type))));
 });
 export default FeatureTypeLabel;