jbrowse-plugin-protein3d 0.14.0 → 0.15.0

package/dist/LaunchProteinView/components/FoldseekSearch.js

@@ -10,7 +10,7 @@ import PartialFailureNotice from './PartialFailureNotice';
 import TranscriptSelector from './TranscriptSelector';
 import useFoldseekSearch from '../hooks/useFoldseekSearch';
 import useTranscriptIsoformSelection from '../hooks/useTranscriptIsoformSelection';
-import { DEFAULT_DATABASES } from '../services/foldseekApi';
+import { DEFAULT_DATABASES, foldseekLengthProblem, } from '../services/foldseekApi';
 const useStyles = makeStyles()({
     dialogContent: {
         width: '80em',
@@ -57,7 +57,11 @@ const FoldseekSearch = observer(function FoldseekSearch({ feature, preferredTran
         invalidatePrediction();
     };
     const isBusy = isLoading || isPredicting;
-    const canSearch = sequence.trim().length > 0 && selectedDatabases.length > 0 && !isBusy;
+    const lengthProblem = foldseekLengthProblem(sequence);
+    const canSearch = sequence.trim().length > 0 &&
+        !lengthProblem &&
+        selectedDatabases.length > 0 &&
+        !isBusy;
     // One button: predicting the 3Di alphabet is a step of the search, not a
     // decision, and making the user click twice only invited a stale prediction.
     const runSearch = async () => {
@@ -79,7 +83,7 @@ const FoldseekSearch = observer(function FoldseekSearch({ feature, preferredTran
                 React.createElement(TextField, { label: "Protein sequence (amino acids)", multiline: true, rows: 4, value: sequence, onChange: e => {
                         setUserEditedSequence(e.target.value);
                         invalidatePrediction();
-                    }, placeholder: `MKTVRQERLKSIVRILERSKEPVSGAQLAEEL...`, disabled: isBusy, slotProps: {
+                    }, placeholder: `MKTVRQERLKSIVRILERSKEPVSGAQLAEEL...`, disabled: isBusy, error: !!lengthProblem, helperText: lengthProblem, slotProps: {
                         input: { className: classes.sequenceInput },
                     } }))) : null,
             di3Sequence ? (React.createElement("div", { className: classes.di3Section },

package/dist/LaunchProteinView/services/foldseekApi.js

@@ -13,16 +13,27 @@ export const DEFAULT_DATABASES = [
     'pdb100',
     'afdb-swissprot',
 ];
-export async function predict3Di({ aaSequence, signal, }) {
-    // Clean the sequence - remove FASTA header, whitespace, stop codons, and non-AA chars
-    const cleanSequence = aaSequence
+export const FOLDSEEK_MAX_RESIDUES = 1200;
+export function cleanFoldseekSequence(aaSequence) {
+    return aaSequence
         .split('\n')
         .filter(line => !line.startsWith('>'))
         .join('')
-        .replace(/\s/g, '')
-        .replace(/\*/g, '') // Remove stop codons before querying 3Di
         .toUpperCase()
-        .replace(/[^ACDEFGHIKLMNPQRSTVWY]/g, ''); // Keep only valid amino acids
+        .replace(/[^ACDEFGHIKLMNPQRSTVWY]/g, '');
+}
+export function foldseekLengthProblem(aaSequence) {
+    const { length } = cleanFoldseekSequence(aaSequence);
+    return length > FOLDSEEK_MAX_RESIDUES
+        ? `Foldseek's 3Di predictor takes at most ${FOLDSEEK_MAX_RESIDUES.toLocaleString('en-US')} residues and this sequence has ${length.toLocaleString('en-US')}. Trim it to the region you want to search.`
+        : undefined;
+}
+export async function predict3Di({ aaSequence, signal, }) {
+    const problem = foldseekLengthProblem(aaSequence);
+    if (problem) {
+        throw new Error(problem);
+    }
+    const cleanSequence = cleanFoldseekSequence(aaSequence);
     const url = `https://3di.foldseek.com/predict/${encodeURIComponent(cleanSequence)}`;
     const response = await rawfetch(url, { signal });
     if (!response.ok) {

package/dist/ProteinView/autoScroll.js

@@ -1,29 +1,30 @@
-/**
- * Pure geometry for the alignment panel's auto-scrolling, extracted so it can be
- * unit-tested independently of the DOM/mobx effects that drive it. All values
- * are in pixels within the horizontally-scrolling alignment container.
- */
-/**
- * Target scrollLeft for following a hovered column, but only on a *large jump* —
- * a column that lands more than a full viewport outside the view (e.g. hovering
- * a distant residue in the 3D structure). A column that has merely edged just
- * off-screen during a continuous hover sweep returns undefined, so the panel
- * doesn't feel like it's constantly re-centering. Centers the column when it
- * does jump.
- */
-export function largeJumpScrollTarget({ x, scrollLeft, clientWidth, }) {
-    const viewEnd = scrollLeft + clientWidth;
-    const gap = Math.max(scrollLeft - x, x - viewEnd);
-    return gap > clientWidth ? x - clientWidth / 2 : undefined;
+import { reaction } from 'mobx';
+import { CHAR_WIDTH } from './constants';
+export function followHoverTarget({ x, width, scrollLeft, clientWidth, }) {
+    const visible = x >= scrollLeft && x + width <= scrollLeft + clientWidth;
+    return visible ? undefined : x + width / 2 - clientWidth / 2;
 }
-/**
- * Target scrollLeft to bring a selected [start, end) pixel range into view,
- * centering it, but only when it currently lies entirely off-screen. Returns
- * undefined when any part of the range is already visible, so a selection the
- * user can already see is left where it is.
- */
 export function offScreenCenterTarget({ start, end, scrollLeft, clientWidth, }) {
     const viewEnd = scrollLeft + clientWidth;
     const visible = end >= scrollLeft && start <= viewEnd;
     return visible ? undefined : (start + end) / 2 - clientWidth / 2;
 }
+export function followHover(model, getContainer) {
+    return reaction(() => model.alignmentHoverPos, pos => {
+        const container = getContainer();
+        if (pos !== undefined &&
+            container &&
+            model.autoScrollAlignment &&
+            !model.isMouseInAlignment) {
+            const target = followHoverTarget({
+                x: pos * CHAR_WIDTH,
+                width: CHAR_WIDTH,
+                scrollLeft: container.scrollLeft,
+                clientWidth: container.clientWidth,
+            });
+            if (target !== undefined) {
+                container.scrollLeft = target;
+            }
+        }
+    });
+}

package/dist/ProteinView/components/FeatureBar.js

@@ -42,15 +42,10 @@ const FeatureBar = observer(function FeatureBar({ layout, top, model, }) {
         setIsHovered(false);
         model.setAlignmentHoverRange(undefined);
     };
-    // The model's `select` autorun owns the magenta molstar selection, deriving
-    // it from clickedStructureRange. Setting/clearing that range here (rather than
-    // also driving molstar imperatively) keeps a single source of truth: on
-    // deselect the autorun correctly falls back to the whole-alignment highlight
-    // when showHighlight is on, instead of blanking the selection.
     const handleClick = () => {
         if (isSelected) {
             model.setSelectedFeatureId(undefined);
-            model.setClickedStructureRange(undefined);
+            model.setClickedStructureRanges([]);
         }
         else {
             model.setSelectedFeatureId(feature.uniqueId);

package/dist/ProteinView/components/FeatureTypeLabel.js

@@ -5,19 +5,16 @@ import UnfoldMoreIcon from '@mui/icons-material/UnfoldMore';
 import { IconButton, Tooltip } from '@mui/material';
 import { observer } from 'mobx-react';
 import { HIDE_BUTTON_COLOR } from '../constants';
-const FeatureTypeLabel = observer(function FeatureTypeLabel({ type, laneCount, expanded, labelWidth, model, }) {
+const FeatureTypeLabel = observer(function FeatureTypeLabel({ type, laneCount, expanded, model, }) {
     const lanes = expanded ? laneCount : 1;
     const canExpand = laneCount > 1;
     return (React.createElement(Tooltip, { title: type, placement: "left" },
         React.createElement("div", { style: {
                 height: lanes * (model.trackHeight + model.trackGap),
-                width: labelWidth - 4,
                 fontSize: 9,
                 fontFamily: 'monospace',
                 textAlign: 'right',
                 paddingRight: 4,
-                overflow: 'hidden',
-                textOverflow: 'ellipsis',
                 whiteSpace: 'nowrap',
                 display: 'flex',
                 alignItems: expanded ? 'flex-start' : 'center',
@@ -35,6 +32,6 @@ const FeatureTypeLabel = observer(function FeatureTypeLabel({ type, laneCount, e
                 }, title: expanded
                     ? `Collapse ${type} track`
                     : `Expand ${type} track (${laneCount} overlapping rows)`, sx: { p: 0, color: HIDE_BUTTON_COLOR } }, expanded ? (React.createElement(UnfoldLessIcon, { sx: { fontSize: model.trackHeight } })) : (React.createElement(UnfoldMoreIcon, { sx: { fontSize: model.trackHeight } })))) : null,
-            React.createElement("span", { style: { overflow: 'hidden', textOverflow: 'ellipsis' } }, type))));
+            React.createElement("span", null, type))));
 });
 export default FeatureTypeLabel;

package/dist/ProteinView/components/ProteinAlignment.js

@@ -13,7 +13,7 @@ import { ProteinFeatureTrackContent, ProteinFeatureTrackLabels, } from './Protei
 import ResidueValueTrack from './ResidueValueTrack';
 import SplitString, { AlignmentHighlights } from './SplitString';
 import ExternalLink from '../../components/ExternalLink';
-import { largeJumpScrollTarget, offScreenCenterTarget } from '../autoScroll';
+import { followHover, offScreenCenterTarget } from '../autoScroll';
 import { CHAR_WIDTH, LABEL_WIDTH, ROW_HEIGHT } from '../constants';
 import useProteinFeatureTrackData from '../hooks/useProteinFeatureTrackData';
 import useStructureUniProt from '../hooks/useStructureUniProt';
@@ -93,37 +93,19 @@ const ProteinAlignment = observer(function ProteinAlignment({ model, }) {
             ? `Could not map ${label} to a UniProt entry through SIFTS`
             : `Could not load UniProt features for ${uniprotId ?? label}`}: ${errorMessage(featureError)}`
         : undefined;
-    // Recenter only on a large jump — when the hovered column lands well outside
-    // the viewport (e.g. hovering a distant residue in the 3D structure). A column
-    // that has merely edged just off-screen during a continuous hover sweep is
-    // left alone, so the panel doesn't feel like it's constantly re-centering.
+    useEffect(() => followHover(model, () => containerRef.current), [model]);
+    // Scroll a selection into view when it changes to an off-screen one — both
+    // a declared seed on open and a later click on a distant feature bar, which
+    // would otherwise select something the user can't see. Several ranges scroll
+    // to their first. Keyed on the ranges so it fires once per distinct
+    // selection and doesn't fight the user's own scrolling afterward.
     useEffect(() => autorun(() => {
         const container = containerRef.current;
-        if (model.autoScrollAlignment &&
-            !model.isMouseInAlignment &&
-            model.alignmentHoverPos !== undefined &&
-            container) {
-            const target = largeJumpScrollTarget({
-                x: model.alignmentHoverPos * CHAR_WIDTH,
-                scrollLeft: container.scrollLeft,
-                clientWidth: container.clientWidth,
-            });
-            if (target !== undefined) {
-                container.scrollTo({ left: target, behavior: 'smooth' });
-            }
-        }
-    }), [model]);
-    // Scroll a selection into view when it changes to an off-screen range — both
-    // the declarative `initialSelection` on open and a later click on a distant
-    // feature bar, which would otherwise select something the user can't see.
-    // Keyed on the range so it fires once per distinct selection and doesn't fight
-    // the user's own scrolling afterward.
-    useEffect(() => autorun(() => {
-        const container = containerRef.current;
-        const range = model.clickAlignmentRange;
+        const ranges = model.clickAlignmentRanges;
+        const range = ranges[0];
         if (container) {
             if (range) {
-                const key = `${range.start}-${range.end}`;
+                const key = ranges.map(r => `${r.start}-${r.end}`).join(',');
                 if (key !== lastScrolledSelectionRef.current) {
                     lastScrolledSelectionRef.current = key;
                     const target = offScreenCenterTarget({
@@ -133,7 +115,7 @@ const ProteinAlignment = observer(function ProteinAlignment({ model, }) {
                         clientWidth: container.clientWidth,
                     });
                     if (target !== undefined) {
-                        container.scrollTo({ left: target, behavior: 'smooth' });
+                        container.scrollLeft = target;
                     }
                 }
             }
@@ -173,12 +155,11 @@ const ProteinAlignment = observer(function ProteinAlignment({ model, }) {
             }, onMouseEnter: () => {
                 model.setIsMouseInAlignment(true);
             }, onMouseLeave: () => {
-                model.setIsMouseInAlignment(false);
-                model.setHoveredPosition(undefined);
+                model.leaveAlignment();
             } },
             React.createElement("div", { style: {
                     flexShrink: 0,
-                    width: LABEL_WIDTH,
+                    minWidth: LABEL_WIDTH,
                     textAlign: 'right',
                     paddingRight: 4,
                 } },
@@ -191,7 +172,7 @@ const ProteinAlignment = observer(function ProteinAlignment({ model, }) {
                         React.createElement("span", null, "STRUCT"))),
                 React.createElement(GutterLabel, { label: "residue", title: "Residue numbers as the structure's authors assigned them, the numbering papers and the 3D view's hover label use", height: ROW_HEIGHT }),
                 showProteinTracks ? (featureLoading ? (React.createElement("div", { className: classes.gutterStatus }, "Loading...")) : featureErrorMessage ? (React.createElement(Tooltip, { title: featureErrorMessage },
-                    React.createElement("div", { className: classes.gutterError }, "Error"))) : featureData ? (React.createElement(ProteinFeatureTrackLabels, { data: featureData, labelWidth: LABEL_WIDTH, model: model })) : null) : null,
+                    React.createElement("div", { className: classes.gutterError }, "Error"))) : featureData ? (React.createElement(ProteinFeatureTrackLabels, { data: featureData, model: model })) : null) : null,
                 showProteinTracks && confidenceCells.length > 0 ? (React.createElement(GutterLabel, { label: "pLDDT", title: "AlphaFold per-residue confidence (pLDDT)", height: model.trackHeight + model.trackGap })) : null,
                 showProteinTracks && hydrophobicityCells.length > 0 ? (React.createElement(GutterLabel, { label: "hydro", title: "Kyte-Doolittle hydrophobicity (orange hydrophobic, blue hydrophilic)", height: model.trackHeight + model.trackGap })) : null),
             React.createElement("div", { ref: containerRef, className: classes.scroll },

package/dist/ProteinView/components/ProteinFeatureTrack.js

@@ -14,8 +14,8 @@ const FeatureTypeTrackContent = observer(function FeatureTypeTrackContent({ grou
             marginBottom: model.trackGap,
         } }, group.layouts.map(layout => (React.createElement(FeatureBar, { key: layout.feature.uniqueId, layout: layout, top: (expanded ? layout.lane : 0) * laneUnit, model: model })))));
 });
-export const ProteinFeatureTrackLabels = observer(function ProteinFeatureTrackLabels({ data, labelWidth, model, }) {
-    return (React.createElement(React.Fragment, null, data.visibleGroups.map(group => (React.createElement(FeatureTypeLabel, { key: group.type, type: group.type, laneCount: group.laneCount, expanded: model.expandedFeatureTypes.has(group.type), labelWidth: labelWidth, model: model })))));
+export const ProteinFeatureTrackLabels = observer(function ProteinFeatureTrackLabels({ data, model, }) {
+    return (React.createElement(React.Fragment, null, data.visibleGroups.map(group => (React.createElement(FeatureTypeLabel, { key: group.type, type: group.type, laneCount: group.laneCount, expanded: model.expandedFeatureTypes.has(group.type), model: model })))));
 });
 export const ProteinFeatureTrackContent = observer(function ProteinFeatureTrackContent({ data, model, }) {
     const hoverHandlers = useAlignmentColumnHover(model, data.sequenceLength);

package/dist/ProteinView/components/ProteinViewHeader.js

@@ -43,7 +43,7 @@ const DisplaySettingsMenu = observer(function DisplaySettingsMenu({ model, }) {
                     setAnchorEl(event.currentTarget);
                 } },
                 React.createElement(TuneIcon, { fontSize: "small" }))),
-        React.createElement(Menu, { anchorEl: anchorEl, open: Boolean(anchorEl), onClose: () => {
+        React.createElement(Menu, { keepMounted: true, anchorEl: anchorEl, open: Boolean(anchorEl), onClose: () => {
                 setAnchorEl(null);
             } },
             model.displayToggles.map(toggle => (React.createElement(ToggleMenuItem, { key: toggle.label, checked: toggle.checked, label: toggle.label, onToggle: toggle.toggle }))),

package/dist/ProteinView/components/SplitString.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { observer } from 'mobx-react';
 import { CHAR_WIDTH } from '../constants';
+import { positionRuns } from '../residueRanges';
 const CharacterSpans = observer(function CharacterSpans({ str, }) {
     return str.split('').map((char, i) => (React.createElement("span", { key: i, style: {
             position: 'absolute',
@@ -8,30 +9,11 @@ const CharacterSpans = observer(function CharacterSpans({ str, }) {
             width: CHAR_WIDTH,
         } }, char === ' ' ? '\u00A0' : char)));
 });
-/**
- * Collapse a set of matching columns into contiguous [start, end) runs. A
- * well-matched alignment is nearly all one run, so this turns one DOM node per
- * residue into a handful for the whole overlay.
- */
-export function matchRuns(columns) {
-    const sorted = [...columns].sort((a, b) => a - b);
-    const runs = [];
-    for (const col of sorted) {
-        const last = runs.at(-1);
-        if (last?.end === col) {
-            last.end = col + 1;
-        }
-        else {
-            runs.push({ start: col, end: col + 1 });
-        }
-    }
-    return runs;
-}
 const MatchOverlays = observer(function MatchOverlays({ model, height, }) {
     const { showHighlight, alignmentMatchSet } = model;
     return !showHighlight || !alignmentMatchSet
         ? null
-        : matchRuns(alignmentMatchSet).map(run => (React.createElement("span", { key: run.start, style: {
+        : positionRuns(alignmentMatchSet).map(run => (React.createElement("span", { key: run.start, style: {
                 position: 'absolute',
                 left: run.start * CHAR_WIDTH,
                 top: 0,
@@ -89,7 +71,7 @@ export const AlignmentHighlights = observer(function AlignmentHighlights({ model
             pointerEvents: 'none',
         } },
         React.createElement(MatchOverlays, { model: model, height: height }),
-        React.createElement(RangeHighlight, { range: model.clickAlignmentRange, strLength: strLength, background: "rgba(0, 120, 255, 0.3)", border: "1px solid rgba(0, 120, 255, 0.6)", height: height }),
+        model.clickAlignmentRanges.map(range => (React.createElement(RangeHighlight, { key: range.start, range: range, strLength: strLength, background: "rgba(0, 120, 255, 0.3)", border: "1px solid rgba(0, 120, 255, 0.6)", height: height }))),
         React.createElement(RangeHighlight, { range: model.alignmentHoverRange, strLength: strLength, background: "rgba(255, 165, 0, 0.4)", height: height }),
         React.createElement(HoverHighlight, { model: model, strLength: strLength, height: height })));
 });

package/dist/ProteinView/entityAlignedTo.js

@@ -0,0 +1,37 @@
+import { pairwiseAlignmentProblem, pairwiseAlignmentSequenceProblem, stripStopCodon, structureAlignedSeq, transcriptAlignedSeq, } from 'p2s_mapper';
+function withoutStopColumn(alignment) {
+    const t = transcriptAlignedSeq(alignment);
+    const s = structureAlignedSeq(alignment);
+    const [a, b] = alignment.alns;
+    return t.endsWith('*') && s.endsWith('-')
+        ? {
+            consensus: alignment.consensus.slice(0, -1),
+            alns: [
+                { ...a, seq: t.slice(0, -1) },
+                { ...b, seq: s.slice(0, -1) },
+            ],
+        }
+        : alignment;
+}
+export function entityAlignedTo(supplied, transcript, entities, preferredId) {
+    const alignment = withoutStopColumn(supplied);
+    const t = stripStopCodon(transcript);
+    const shape = pairwiseAlignmentProblem(alignment);
+    if (shape) {
+        return { problem: shape };
+    }
+    const ownRow = structureAlignedSeq(alignment).replaceAll('-', '');
+    const transcriptProblem = pairwiseAlignmentSequenceProblem(alignment, t, ownRow);
+    if (transcriptProblem) {
+        return { problem: transcriptProblem };
+    }
+    const rank = (e) => (e.entityId === preferredId ? 0 : 2) + (e.nucleicAcid ? 1 : 0);
+    const match = [...entities]
+        .sort((a, b) => rank(a) - rank(b))
+        .find(e => !pairwiseAlignmentSequenceProblem(alignment, t, stripStopCodon(e.seq)));
+    return match
+        ? { entityId: match.entityId }
+        : {
+            problem: `The second sequence (${ownRow.length} residues) is not the sequence of any chain in this structure`,
+        };
+}

package/dist/ProteinView/frameSelection.js

@@ -1,34 +1,56 @@
 import { residueLoci } from './applyLociInteractivity';
 import loadMolstar from './loadMolstar';
+/**
+ * Every structure loaded and aligned and, with several, superposed: the
+ * reset that ends a superposition would undo any framing done before it.
+ */
+export function structuresSettled(host) {
+    const { structures, superposedCount } = host;
+    return (structures.length > 0 &&
+        structures.every(s => !s.loading) &&
+        (structures.length < 2 || superposedCount === structures.length));
+}
+/**
+ * Moves the camera to the residues. A single residue is also focused, which
+ * draws it, its neighbours and their contacts as sticks, as clicking it in 3D
+ * does; Mol* focuses one structure at a time, so that is the first target's.
+ * `stillCurrent` is asked after Mol* loads, so a plugin replaced meanwhile is
+ * left alone.
+ */
+export async function frameResidues(plugin, targets, stillCurrent = () => true) {
+    const molstar = await loadMolstar();
+    if (stillCurrent()) {
+        const loci = targets.map(t => residueLoci(molstar, t));
+        plugin.managers.camera.focusLoci(loci);
+        if (loci[0] && targets[0]?.labelSeqIds.length === 1) {
+            plugin.managers.structure.focus.setFromLoci(loci[0]);
+        }
+    }
+}
 /**
  * Builds the body of the autorun that moves the camera to a declared
  * selection. A session "opened on R248" used to show the whole fold with R248
  * out of sight. It waits until every structure has settled and, with several,
  * until they are superposed, because the reset that ends a superposition would
  * undo it; then it frames the seeded residues once per plugin. Only a spec's
- * seed moves the camera: a click is the user's, and the view they chose stays.
- * A one-residue seed is also focused, which draws it, its neighbours and their
- * contacts as sticks, as clicking it in 3D does. Mol* focuses one structure at
- * a time, so that is the first seeded one.
+ * seed or focusResidues moves the camera: a click is the user's, and the view
+ * they chose stays.
  */
 export function makeSelectionFramer(host) {
     let framedPlugin;
     return function frameSeededSelection() {
-        const { molstarPluginContext: plugin, structures, superposedCount } = host;
-        const settled = structures.length > 0 &&
-            structures.every(s => !s.loading) &&
-            (structures.length < 2 || superposedCount === structures.length);
-        if (!plugin || plugin === framedPlugin || !settled) {
+        const { molstarPluginContext: plugin, structures } = host;
+        if (!plugin || plugin === framedPlugin || !structuresSettled(host)) {
             return;
         }
         // a seed resolved by the same change that settles the structure may land
         // after this run, so the plugin counts as framed only once it has targets
-        const targets = structures.flatMap(s => s.seededSelection && s.molstarStructure && s.selectLabelSeqIds.length
+        const targets = structures.flatMap(s => s.seedLit && s.molstarStructure && s.clickedLabelSeqIds.length
             ? [
                 {
                     structure: s.molstarStructure,
                     entityId: s.mappedEntity?.entityId,
-                    labelSeqIds: s.selectLabelSeqIds,
+                    labelSeqIds: s.clickedLabelSeqIds,
                 },
             ]
             : []);
@@ -36,17 +58,7 @@ export function makeSelectionFramer(host) {
             return;
         }
         framedPlugin = plugin;
-        loadMolstar()
-            .then(molstar => {
-            if (host.molstarPluginContext === plugin) {
-                const loci = targets.map(t => residueLoci(molstar, t));
-                plugin.managers.camera.focusLoci(loci);
-                if (loci[0] && targets[0]?.labelSeqIds.length === 1) {
-                    plugin.managers.structure.focus.setFromLoci(loci[0]);
-                }
-            }
-        })
-            .catch((e) => {
+        frameResidues(plugin, targets, () => host.molstarPluginContext === plugin).catch((e) => {
             console.error(e);
         });
     };

package/dist/ProteinView/model.js

@@ -4,7 +4,7 @@ import { addDisposer, getPath, types } from '@jbrowse/mobx-state-tree';
 import { autorun } from 'mobx';
 import { ALIGNMENT_ALGORITHM_VALUES, DEFAULT_ALIGNMENT_ALGORITHM, } from 'p2s_mapper';
 import { COLOR_SCHEME_VALUES, applyColorTheme, } from './applyColorTheme';
-import { makeSelectionFramer } from './frameSelection';
+import { makeSelectionFramer, structuresSettled } from './frameSelection';
 import { makeLociChannel } from './lociChannel';
 import { defaultDisplayName } from './proteinViewSpec';
 import { removeMolstarStructure } from './removeStructure';
@@ -190,7 +190,7 @@ function stateModelFactory() {
          */
         clearSelection() {
             for (const structure of self.structures) {
-                structure.setClickedStructureRange(undefined);
+                structure.setClickedStructureRanges([]);
                 structure.setSelectedFeatureId(undefined);
             }
         },
@@ -305,6 +305,13 @@ function stateModelFactory() {
         get showLoading() {
             return showLoading(self);
         },
+        /**
+         * #getter
+         * Every structure loaded, aligned and, with several, superposed.
+         */
+        get settled() {
+            return structuresSettled(self);
+        },
         /**
          * #getter
          * What each still-settling structure is doing, for the canvas overlay.

package/dist/ProteinView/proteinToGenomeMapping.js

@@ -1,32 +1,34 @@
 import { getSession } from '@jbrowse/core/util';
 import { codingSpans } from '../mappings';
-// The coding spans under a structure-residue range, through the residues the
+// The coding spans under structure-residue ranges, through the residues the
 // alignment pairs with the transcript
-function structureRangeSpans(model, range) {
+function structureRangeSpans(model, ranges) {
     const mapping = model.genomeToTranscriptSeqMapping;
     if (!mapping || !model.pairwiseAlignment) {
         return [];
     }
     const transcriptPositions = [];
-    for (let pos = range.start; pos < range.end; pos++) {
-        const transcriptPos = model.structureSeqToTranscriptSeqPosition?.[pos];
-        if (transcriptPos !== undefined) {
-            transcriptPositions.push(transcriptPos);
+    for (const range of ranges) {
+        for (let pos = range.start; pos < range.end; pos++) {
+            const transcriptPos = model.structureSeqToTranscriptSeqPosition?.[pos];
+            if (transcriptPos !== undefined) {
+                transcriptPositions.push(transcriptPos);
+            }
         }
     }
     return codingSpans(mapping.p2gCodon, transcriptPositions);
 }
 /**
- * The genome a structure-residue range covers, one region per stretch of
+ * The genome structure-residue ranges cover, one region per stretch of
  * contiguous coding bases, as a JBrowse highlight takes them. Pure: the caller
  * supplies the assembly and the mapping, so the same conversion serves the
  * hover band, the click band and a test with neither a session nor a connected
  * view.
  */
-export function structureRangeToGenomeRegions({ range, assemblyName, model, }) {
+export function structureRangesToGenomeRegions({ ranges, assemblyName, model, }) {
     const refName = model.genomeToTranscriptSeqMapping?.refName;
-    return range && assemblyName && refName
-        ? structureRangeSpans(model, range).map(([start, end]) => ({
+    return assemblyName && refName
+        ? structureRangeSpans(model, ranges).map(([start, end]) => ({
             assemblyName,
             refName,
             start,
@@ -45,10 +47,9 @@ export async function navigateToProteinPosition({ model, structureSeqPos, struct
     if (!assemblyName) {
         return;
     }
-    const spans = structureRangeSpans(model, {
-        start: structureSeqPos,
-        end: structureSeqEndPos ?? structureSeqPos + 1,
-    });
+    const spans = structureRangeSpans(model, [
+        { start: structureSeqPos, end: structureSeqEndPos ?? structureSeqPos + 1 },
+    ]);
     const start = spans[0]?.[0];
     const end = spans.at(-1)?.[1];
     if (start === undefined || end === undefined) {
@@ -69,10 +70,9 @@ export async function navigateToProteinPosition({ model, structureSeqPos, struct
     }
 }
 export async function clickProteinToGenome({ model, structureSeqPos, structureSeqEndPos, }) {
-    model.setClickedStructureRange({
-        start: structureSeqPos,
-        end: structureSeqEndPos ?? structureSeqPos + 1,
-    });
+    model.setClickedStructureRanges([
+        { start: structureSeqPos, end: structureSeqEndPos ?? structureSeqPos + 1 },
+    ]);
     await navigateToProteinPosition({
         model,
         structureSeqPos,

package/dist/ProteinView/residueRanges.js

@@ -0,0 +1,69 @@
+import { residueNumber, transcriptPos } from 'p2s_mapper';
+export function rangeList(ranges) {
+    return ranges === undefined ? [] : 'start' in ranges ? [ranges] : ranges;
+}
+/**
+ * Collapse a set of positions into sorted, contiguous [start, end) runs.
+ */
+export function positionRuns(positions) {
+    const sorted = [...new Set(positions)].sort((a, b) => a - b);
+    const runs = [];
+    for (const pos of sorted) {
+        const last = runs.at(-1);
+        if (last?.end === pos) {
+            last.end = pos + 1;
+        }
+        else {
+            runs.push({ start: pos, end: pos + 1 });
+        }
+    }
+    return runs;
+}
+function* inclusive({ start, end }) {
+    for (let n = start; n <= end; n++) {
+        yield n;
+    }
+}
+/**
+ * The runs of positions whose author number falls in any of the ranges. A
+ * fusion numbers its partner apart (2RH1's lysozyme is 1002–1161), so a range
+ * across the fusion site selects the receptor on both sides and not the
+ * partner between.
+ */
+export function residueRuns(entity, ranges) {
+    const list = rangeList(ranges);
+    const positions = [];
+    for (let pos = 0; pos < (entity?.seq.length ?? 0); pos++) {
+        const n = residueNumber(entity, pos);
+        if (list.some(r => n >= r.start && n <= r.end)) {
+            positions.push(pos);
+        }
+    }
+    return positionRuns(positions);
+}
+/**
+ * The runs of structure positions the alignment pairs with any of the
+ * transcript ranges. A structure residue the transcript lacks, an inserted tag
+ * or a fusion partner SIFTS unmaps, splits the run rather than being selected.
+ */
+export function transcriptRuns(mapper, ranges) {
+    const positions = [];
+    for (const range of rangeList(ranges)) {
+        for (const residue of inclusive(range)) {
+            const pos = mapper.transcriptToStructure(transcriptPos(residue - 1));
+            if (pos !== undefined) {
+                positions.push(pos);
+            }
+        }
+    }
+    return positionRuns(positions);
+}
+export function positionRangeRuns(ranges) {
+    const positions = [];
+    for (const { start, end } of rangeList(ranges)) {
+        for (let pos = start; pos < end; pos++) {
+            positions.push(pos);
+        }
+    }
+    return positionRuns(positions);
+}