jbrowse-plugin-protein3d 0.5.4 → 0.5.6

package/dist/ProteinView/autoScroll.d.ts

@@ -0,0 +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 declare function largeJumpScrollTarget({ x, scrollLeft, clientWidth, }: {
+    x: number;
+    scrollLeft: number;
+    clientWidth: number;
+}): number | undefined;
+/**
+ * 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 declare function offScreenCenterTarget({ start, end, scrollLeft, clientWidth, }: {
+    start: number;
+    end: number;
+    scrollLeft: number;
+    clientWidth: number;
+}): number | undefined;

package/dist/ProteinView/autoScroll.js

@@ -0,0 +1,29 @@
+/**
+ * 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;
+}
+/**
+ * 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;
+}

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

@@ -1,8 +1,9 @@
 import React from 'react';
-import type { UniProtFeature } from '../hooks/useUniProtFeatures';
+import type { FeatureLayout } from '../hooks/useProteinFeatureTrackData';
 import type { JBrowsePluginProteinStructureModel } from '../model';
-declare const FeatureBar: ({ feature, model, }: {
-    feature: UniProtFeature;
+declare const FeatureBar: ({ layout, top, model, }: {
+    layout: FeatureLayout;
+    top: number;
     model: JBrowsePluginProteinStructureModel;
-}) => React.JSX.Element | null;
+}) => React.JSX.Element;
 export default FeatureBar;

package/dist/ProteinView/components/FeatureBar.js

@@ -2,26 +2,9 @@ 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 { HOVERED_BORDER, SELECTED_BORDER } from '../constants';
 import { getFeatureColor } from '../hooks/useUniProtFeatures';
 import { clickProteinToGenome } from '../proteinToGenomeMapping';
-/**
- * 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,
         React.createElement("div", null,
@@ -33,16 +16,17 @@ function FeatureTooltipContent({ feature }) {
             feature.end),
         feature.description ? React.createElement("div", null, feature.description) : null));
 }
-const FeatureBar = observer(function FeatureBar({ feature, model, }) {
+const FeatureBar = observer(function FeatureBar({ layout, top, model, }) {
     const [isHovered, setIsHovered] = useState(false);
-    const { molstarPluginContext, selectedFeatureId, structurePositionToAlignmentMap, } = model;
+    const { molstarPluginContext, selectedFeatureId } = model;
+    const { feature, left, width } = layout;
     const isSelected = selectedFeatureId === feature.uniqueId;
-    const layout = getFeatureLayout(feature, structurePositionToAlignmentMap);
     const handleMouseEnter = () => {
         setIsHovered(true);
-        if (layout) {
-            model.setAlignmentHoverRange(layout.range);
-        }
+        model.setAlignmentHoverRange({
+            start: layout.alignmentStart,
+            end: layout.alignmentEnd,
+        });
     };
     const handleMouseLeave = () => {
         setIsHovered(false);
@@ -81,10 +65,6 @@ const FeatureBar = observer(function FeatureBar({ feature, model, }) {
             model.setClickedStructureRange(undefined);
         }
     };
-    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: () => {
@@ -96,7 +76,7 @@ const FeatureBar = observer(function FeatureBar({ feature, model, }) {
             }, style: {
                 position: 'absolute',
                 left,
-                top: 0,
+                top,
                 width,
                 height: model.trackHeight,
                 backgroundColor: color,

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

@@ -1,7 +1,9 @@
 import React from 'react';
 import type { JBrowsePluginProteinStructureModel } from '../model';
-declare const FeatureTypeLabel: ({ type, labelWidth, model, }: {
+declare const FeatureTypeLabel: ({ type, laneCount, expanded, labelWidth, model, }: {
     type: string;
+    laneCount: number;
+    expanded: boolean;
     labelWidth: number;
     model: JBrowsePluginProteinStructureModel;
 }) => React.JSX.Element;

package/dist/ProteinView/components/FeatureTypeLabel.js

@@ -1,12 +1,16 @@
 import React from 'react';
 import CloseIcon from '@mui/icons-material/Close';
+import UnfoldLessIcon from '@mui/icons-material/UnfoldLess';
+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, labelWidth, model, }) {
+const FeatureTypeLabel = observer(function FeatureTypeLabel({ type, laneCount, expanded, labelWidth, model, }) {
+    const lanes = expanded ? laneCount : 1;
+    const canExpand = laneCount > 1;
     return (React.createElement(Tooltip, { title: type, placement: "left" },
         React.createElement("div", { style: {
-                height: model.trackHeight + model.trackGap,
+                height: lanes * (model.trackHeight + model.trackGap),
                 width: labelWidth - 4,
                 fontSize: 9,
                 fontFamily: 'monospace',
@@ -16,7 +20,7 @@ const FeatureTypeLabel = observer(function FeatureTypeLabel({ type, labelWidth,
                 textOverflow: 'ellipsis',
                 whiteSpace: 'nowrap',
                 display: 'flex',
-                alignItems: 'center',
+                alignItems: expanded ? 'flex-start' : 'center',
                 justifyContent: 'flex-end',
                 gap: 2,
             } },
@@ -25,6 +29,12 @@ const FeatureTypeLabel = observer(function FeatureTypeLabel({ type, labelWidth,
                     model.hideFeatureType(type);
                 }, title: `Hide ${type} track`, sx: { p: 0, color: HIDE_BUTTON_COLOR } },
                 React.createElement(CloseIcon, { sx: { fontSize: model.trackHeight } })),
+            canExpand ? (React.createElement(IconButton, { onClick: e => {
+                    e.stopPropagation();
+                    model.toggleFeatureTypeExpanded(type);
+                }, 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))));
 });
 export default FeatureTypeLabel;

package/dist/ProteinView/components/ProteinAlignment.js

@@ -2,6 +2,7 @@ import React, { useEffect, useRef } from 'react';
 import { Tooltip, Typography } from '@mui/material';
 import { autorun } from 'mobx';
 import { observer } from 'mobx-react';
+import { largeJumpScrollTarget, offScreenCenterTarget } from '../autoScroll';
 import { CHAR_WIDTH, LABEL_WIDTH, ROW_HEIGHT } from '../constants';
 import ProteinAlignmentHelpButton from './ProteinAlignmentHelpButton';
 import { ProteinFeatureTrackContent, ProteinFeatureTrackLabels, } from './ProteinFeatureTrack';
@@ -27,31 +28,55 @@ function GutterLabel({ label, title, height, }) {
 const ProteinAlignment = observer(function ProteinAlignment({ model, }) {
     const { pairwiseAlignment, showHighlight, showProteinTracks, uniprotId, confidenceCells, hydrophobicityCells, } = model;
     const containerRef = useRef(null);
-    const scrolledToSelectionRef = useRef(false);
+    const lastScrolledSelectionRef = useRef(undefined);
     const { data: featureData, isLoading: featureLoading, error: featureError, } = useProteinFeatureTrackData(model, uniprotId);
+    // 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(() => autorun(() => {
         const container = containerRef.current;
         if (model.autoScrollAlignment &&
             !model.isMouseInAlignment &&
             model.alignmentHoverPos !== undefined &&
             container) {
-            container.scrollTo({
-                left: model.alignmentHoverPos * CHAR_WIDTH - container.clientWidth / 2,
-                behavior: 'smooth',
+            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 the persistent selection into view once it first resolves, so a
-    // declarative `initialSelection` (or any off-screen selection) shows its
-    // highlight band instead of opening scrolled to the N-terminus. Guarded to
-    // fire once, so it doesn't fight the user's own scrolling afterward.
+    // 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;
-        if (container && range && !scrolledToSelectionRef.current) {
-            scrolledToSelectionRef.current = true;
-            const mid = ((range.start + range.end) / 2) * CHAR_WIDTH;
-            container.scrollTo({ left: mid - container.clientWidth / 2 });
+        if (container) {
+            if (range) {
+                const key = `${range.start}-${range.end}`;
+                if (key !== lastScrolledSelectionRef.current) {
+                    lastScrolledSelectionRef.current = key;
+                    const target = offScreenCenterTarget({
+                        start: range.start * CHAR_WIDTH,
+                        end: (range.end + 1) * CHAR_WIDTH,
+                        scrollLeft: container.scrollLeft,
+                        clientWidth: container.clientWidth,
+                    });
+                    if (target !== undefined) {
+                        container.scrollTo({ left: target, behavior: 'smooth' });
+                    }
+                }
+            }
+            else {
+                lastScrolledSelectionRef.current = undefined;
+            }
         }
     }), [model]);
     if (!pairwiseAlignment) {

package/dist/ProteinView/components/ProteinFeatureTrack.js

@@ -4,27 +4,23 @@ import { CHAR_WIDTH } from '../constants';
 import FeatureBar from './FeatureBar';
 import FeatureTypeLabel from './FeatureTypeLabel';
 import HoverMarker from './HoverMarker';
-const FeatureTypeTrackContent = observer(function FeatureTypeTrackContent({ features, model, sequenceLength, }) {
+import useAlignmentColumnHover from '../hooks/useAlignmentColumnHover';
+const FeatureTypeTrackContent = observer(function FeatureTypeTrackContent({ group, model, sequenceLength, expanded, }) {
+    const lanes = expanded ? group.laneCount : 1;
+    const laneUnit = model.trackHeight + model.trackGap;
     return (React.createElement("div", { style: {
             position: 'relative',
-            height: model.trackHeight,
+            height: lanes * model.trackHeight + (lanes - 1) * model.trackGap,
             width: sequenceLength * CHAR_WIDTH,
             marginBottom: model.trackGap,
-        } }, features.map(feature => (React.createElement(FeatureBar, { key: feature.uniqueId, feature: feature, model: model })))));
+        } }, 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.visibleTypes.map(type => (React.createElement(FeatureTypeLabel, { key: type, type: type, labelWidth: labelWidth, model: 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 ProteinFeatureTrackContent = observer(function ProteinFeatureTrackContent({ data, model, }) {
-    return (React.createElement("div", { style: { position: 'relative' }, onMouseMove: (e) => {
-            const rect = e.currentTarget.getBoundingClientRect();
-            const alignmentPos = Math.floor((e.clientX - rect.left) / CHAR_WIDTH);
-            if (alignmentPos >= 0 && alignmentPos < data.sequenceLength) {
-                model.hoverAlignmentPosition(alignmentPos);
-            }
-        }, onMouseLeave: () => {
-            model.setHoveredPosition(undefined);
-        } },
-        data.visibleTypes.map(type => (React.createElement(FeatureTypeTrackContent, { key: type, features: data.groupedFeatures[type], model: model, sequenceLength: data.sequenceLength }))),
+    const hoverHandlers = useAlignmentColumnHover(model, data.sequenceLength);
+    return (React.createElement("div", { style: { position: 'relative' }, ...hoverHandlers },
+        data.visibleGroups.map(group => (React.createElement(FeatureTypeTrackContent, { key: group.type, group: group, model: model, sequenceLength: data.sequenceLength, expanded: model.expandedFeatureTypes.has(group.type) }))),
         React.createElement(HoverMarker, { model: model })));
 });

package/dist/ProteinView/components/ProteinViewHeader.js

@@ -47,7 +47,7 @@ function getDisplayToggles(model) {
             },
         },
         {
-            label: 'Auto-scroll features',
+            label: 'Auto-scroll alignment',
             checked: model.autoScrollAlignment,
             onToggle: () => {
                 model.setAutoScrollAlignment(!model.autoScrollAlignment);

package/dist/ProteinView/components/ResidueValueTrack.js

@@ -2,6 +2,7 @@ import React, { useMemo, useState } from 'react';
 import { Tooltip } from '@mui/material';
 import { observer } from 'mobx-react';
 import { CHAR_WIDTH } from '../constants';
+import useAlignmentColumnHover from '../hooks/useAlignmentColumnHover';
 /**
  * A per-residue scalar track (e.g. pLDDT, hydrophobicity) rendered as colored
  * cells aligned to the pairwise-alignment columns, matching the UniProt feature
@@ -17,23 +18,14 @@ const ResidueValueTrack = observer(function ResidueValueTrack({ cells, colorFor,
         return map;
     }, [cells]);
     const hoveredValue = hoveredCol === undefined ? undefined : valueByCol.get(hoveredCol);
+    const hoverHandlers = useAlignmentColumnHover(model, sequenceLength, setHoveredCol);
     return (React.createElement(Tooltip, { title: hoveredValue === undefined ? '' : formatValue(hoveredValue), followCursor: true },
         React.createElement("div", { style: {
                 position: 'relative',
                 height: model.trackHeight,
                 width: sequenceLength * CHAR_WIDTH,
                 marginBottom: model.trackGap,
-            }, onMouseMove: (e) => {
-                const rect = e.currentTarget.getBoundingClientRect();
-                const alignmentPos = Math.floor((e.clientX - rect.left) / CHAR_WIDTH);
-                setHoveredCol(alignmentPos);
-                if (alignmentPos >= 0 && alignmentPos < sequenceLength) {
-                    model.hoverAlignmentPosition(alignmentPos);
-                }
-            }, onMouseLeave: () => {
-                setHoveredCol(undefined);
-                model.setHoveredPosition(undefined);
-            } }, cells.map(cell => (React.createElement("div", { key: cell.col, style: {
+            }, ...hoverHandlers }, cells.map(cell => (React.createElement("div", { key: cell.col, style: {
                 position: 'absolute',
                 left: cell.col * CHAR_WIDTH,
                 top: 0,

package/dist/ProteinView/hooks/useAlignmentColumnHover.d.ts

@@ -0,0 +1,11 @@
+import type React from 'react';
+import type { JBrowsePluginProteinStructureModel } from '../model';
+/**
+ * Shared mouse handlers for tracks that map cursor x-position to an alignment
+ * column and drive the structure hover. Optionally reports the hovered column
+ * (used by tracks that show a per-column tooltip).
+ */
+export default function useAlignmentColumnHover(model: JBrowsePluginProteinStructureModel, sequenceLength: number, onCol?: (col: number | undefined) => void): {
+    onMouseMove: (e: React.MouseEvent<HTMLDivElement>) => void;
+    onMouseLeave: () => void;
+};

package/dist/ProteinView/hooks/useAlignmentColumnHover.js

@@ -0,0 +1,23 @@
+import { CHAR_WIDTH } from '../constants';
+/**
+ * Shared mouse handlers for tracks that map cursor x-position to an alignment
+ * column and drive the structure hover. Optionally reports the hovered column
+ * (used by tracks that show a per-column tooltip).
+ */
+export default function useAlignmentColumnHover(model, sequenceLength, onCol) {
+    return {
+        onMouseMove: (e) => {
+            const rect = e.currentTarget.getBoundingClientRect();
+            const col = Math.floor((e.clientX - rect.left) / CHAR_WIDTH);
+            const inRange = col >= 0 && col < sequenceLength;
+            onCol?.(inRange ? col : undefined);
+            if (inRange) {
+                model.hoverAlignmentPosition(col);
+            }
+        },
+        onMouseLeave: () => {
+            onCol?.(undefined);
+            model.setHoveredPosition(undefined);
+        },
+    };
+}

package/dist/ProteinView/hooks/useProteinFeatureTrackData.d.ts

@@ -1,15 +1,31 @@
 import type { UniProtFeature } from './useUniProtFeatures';
 import type { JBrowsePluginProteinStructureModel } from '../model';
-type FeaturesByType = Record<string, UniProtFeature[]>;
+export interface FeatureLayout {
+    feature: UniProtFeature;
+    alignmentStart: number;
+    alignmentEnd: number;
+    left: number;
+    width: number;
+    lane: number;
+}
+export interface FeatureGroup {
+    type: string;
+    layouts: FeatureLayout[];
+    laneCount: number;
+}
 export interface FeatureTrackData {
-    featureTypes: string[];
-    visibleTypes: string[];
-    groupedFeatures: FeaturesByType;
+    visibleGroups: FeatureGroup[];
     sequenceLength: number;
 }
+/**
+ * Greedy interval packing: assigns each feature the first lane whose last
+ * feature ends before this one starts, so overlapping features of the same type
+ * stack instead of hiding each other. Mutates each layout's lane and returns the
+ * lane count (at least 1).
+ */
+export declare function packLanes(layouts: FeatureLayout[]): number;
 export default function useProteinFeatureTrackData(model: JBrowsePluginProteinStructureModel, uniprotId: string | undefined): {
     data: FeatureTrackData | undefined;
     isLoading: boolean;
     error: unknown;
 };
-export {};

package/dist/ProteinView/hooks/useProteinFeatureTrackData.js

@@ -1,25 +1,83 @@
+import { useMemo } from 'react';
+import { CHAR_WIDTH } from '../constants';
 import useUniProtFeatures from './useUniProtFeatures';
-function groupFeaturesByType(features) {
-    const grouped = {};
-    for (const feature of features) {
-        grouped[feature.type] ??= [];
-        grouped[feature.type].push(feature);
+/**
+ * Maps a feature's structure range onto alignment columns and pixel geometry.
+ * Returns undefined when either endpoint has no alignment column, so unmappable
+ * features aren't drawn at a misleading position.
+ */
+function layoutFeature(feature, structurePositionToAlignmentMap) {
+    const alignmentStart = structurePositionToAlignmentMap[feature.start - 1];
+    const alignmentEnd = structurePositionToAlignmentMap[feature.end - 1];
+    return alignmentStart === undefined || alignmentEnd === undefined
+        ? undefined
+        : {
+            feature,
+            alignmentStart,
+            alignmentEnd,
+            left: alignmentStart * CHAR_WIDTH,
+            width: Math.max((alignmentEnd - alignmentStart + 1) * CHAR_WIDTH, 3),
+            lane: 0,
+        };
+}
+/**
+ * Greedy interval packing: assigns each feature the first lane whose last
+ * feature ends before this one starts, so overlapping features of the same type
+ * stack instead of hiding each other. Mutates each layout's lane and returns the
+ * lane count (at least 1).
+ */
+export function packLanes(layouts) {
+    const laneEnds = [];
+    const sorted = [...layouts].sort((a, b) => a.alignmentStart - b.alignmentStart);
+    for (const layout of sorted) {
+        const free = laneEnds.findIndex(end => end < layout.alignmentStart);
+        if (free === -1) {
+            layout.lane = laneEnds.length;
+            laneEnds.push(layout.alignmentEnd);
+        }
+        else {
+            layout.lane = free;
+            laneEnds[free] = layout.alignmentEnd;
+        }
     }
-    return grouped;
+    return Math.max(laneEnds.length, 1);
 }
 export default function useProteinFeatureTrackData(model, uniprotId) {
     const { features, isLoading, error } = useUniProtFeatures(uniprotId);
-    const { pairwiseAlignment, hiddenFeatureTypes } = model;
-    if (!uniprotId || isLoading || error || !features || !pairwiseAlignment) {
-        return { data: undefined, isLoading, error };
-    }
-    const sequenceLength = pairwiseAlignment.alns[0].seq.length;
-    const groupedFeatures = groupFeaturesByType(features);
-    const featureTypes = Object.keys(groupedFeatures);
-    const visibleTypes = featureTypes.filter(type => !hiddenFeatureTypes.has(type));
-    return {
-        data: { featureTypes, visibleTypes, groupedFeatures, sequenceLength },
-        isLoading: false,
-        error: undefined,
-    };
+    const { pairwiseAlignment, hiddenFeatureTypes, structurePositionToAlignmentMap } = model;
+    const data = useMemo(() => {
+        if (!features || !pairwiseAlignment || !structurePositionToAlignmentMap) {
+            return undefined;
+        }
+        const groups = new Map();
+        for (const feature of features) {
+            if (!hiddenFeatureTypes.has(feature.type)) {
+                const layout = layoutFeature(feature, structurePositionToAlignmentMap);
+                if (layout) {
+                    const list = groups.get(feature.type);
+                    if (list) {
+                        list.push(layout);
+                    }
+                    else {
+                        groups.set(feature.type, [layout]);
+                    }
+                }
+            }
+        }
+        const visibleGroups = [...groups].map(([type, layouts]) => ({
+            type,
+            layouts,
+            laneCount: packLanes(layouts),
+        }));
+        return {
+            visibleGroups,
+            sequenceLength: pairwiseAlignment.alns[0].seq.length,
+        };
+    }, [
+        features,
+        pairwiseAlignment,
+        hiddenFeatureTypes,
+        structurePositionToAlignmentMap,
+    ]);
+    return { data, isLoading, error };
 }

package/dist/ProteinView/hooks/useUniProtFeatures.js

@@ -55,8 +55,8 @@ async function fetchUniProtFeatures(url) {
             continue;
         }
         const type = parts[2];
-        const start = Number.parseInt(parts[3] ?? '0', 10);
-        const end = Number.parseInt(parts[4] ?? '0', 10);
+        const start = Number.parseInt(parts[3] ?? '', 10);
+        const end = Number.parseInt(parts[4] ?? '', 10);
         const attributes = parts[8] ?? '';
         let description = '';
         let id;
@@ -69,7 +69,7 @@ async function fetchUniProtFeatures(url) {
                 id = value;
             }
         }
-        if (type) {
+        if (type && start >= 1 && end >= start) {
             const uniqueId = `${type}-${start}-${end}-${features.length}`;
             features.push({
                 type,

package/dist/ProteinView/model.d.ts

@@ -63,6 +63,7 @@ declare function stateModelFactory(): import("@jbrowse/mobx-state-tree").IModelT
         } | undefined;
         selectedFeatureId: string | undefined;
         hiddenFeatureTypes: Set<string>;
+        expandedFeatureTypes: Set<string>;
     } & {
         setStructureData(data: {
             entities?: import("./extractStructureSequences").Entity[];
@@ -71,6 +72,7 @@ declare function stateModelFactory(): import("@jbrowse/mobx-state-tree").IModelT
         hideFeatureType(type: string): void;
         showFeatureType(type: string): void;
         showAllFeatureTypes(): void;
+        toggleFeatureTypeExpanded(type: string): void;
         setLoadedToMolstar(val: boolean): void;
     } & {
         readonly connectedView: (import("@jbrowse/mobx-state-tree").ModelInstanceTypeProps<{
@@ -819,6 +821,7 @@ declare function stateModelFactory(): import("@jbrowse/mobx-state-tree").IModelT
         } | undefined;
         selectedFeatureId: string | undefined;
         hiddenFeatureTypes: Set<string>;
+        expandedFeatureTypes: Set<string>;
     } & {
         setStructureData(data: {
             entities?: import("./extractStructureSequences").Entity[];
@@ -827,6 +830,7 @@ declare function stateModelFactory(): import("@jbrowse/mobx-state-tree").IModelT
         hideFeatureType(type: string): void;
         showFeatureType(type: string): void;
         showAllFeatureTypes(): void;
+        toggleFeatureTypeExpanded(type: string): void;
         setLoadedToMolstar(val: boolean): void;
     } & {
         readonly connectedView: (import("@jbrowse/mobx-state-tree").ModelInstanceTypeProps<{
@@ -1454,6 +1458,7 @@ declare function stateModelFactory(): import("@jbrowse/mobx-state-tree").IModelT
         } | undefined;
         selectedFeatureId: string | undefined;
         hiddenFeatureTypes: Set<string>;
+        expandedFeatureTypes: Set<string>;
     } & {
         setStructureData(data: {
             entities?: import("./extractStructureSequences").Entity[];
@@ -1462,6 +1467,7 @@ declare function stateModelFactory(): import("@jbrowse/mobx-state-tree").IModelT
         hideFeatureType(type: string): void;
         showFeatureType(type: string): void;
         showAllFeatureTypes(): void;
+        toggleFeatureTypeExpanded(type: string): void;
         setLoadedToMolstar(val: boolean): void;
     } & {
         readonly connectedView: (import("@jbrowse/mobx-state-tree").ModelInstanceTypeProps<{

package/dist/ProteinView/model.js

@@ -426,7 +426,7 @@ function stateModelFactory() {
                             },
                         },
                         {
-                            label: 'Auto-scroll protein feature view on hover',
+                            label: 'Auto-scroll alignment to hovered position',
                             type: 'checkbox',
                             checked: self.autoScrollAlignment,
                             onClick: () => {

package/dist/ProteinView/structureModel.d.ts

@@ -134,6 +134,12 @@ declare const Structure: import("@jbrowse/mobx-state-tree").IModelType<{
      * Set of feature track types that are hidden
      */
     hiddenFeatureTypes: Set<string>;
+    /**
+     * #volatile
+     * Set of feature track types expanded to show every overlapping feature on
+     * its own lane (collapsed types draw all features on a single row)
+     */
+    expandedFeatureTypes: Set<string>;
 } & {
     setStructureData(data: {
         entities?: Entity[];
@@ -151,6 +157,10 @@ declare const Structure: import("@jbrowse/mobx-state-tree").IModelType<{
      * #action
      */
     showAllFeatureTypes(): void;
+    /**
+     * #action
+     */
+    toggleFeatureTypeExpanded(type: string): void;
     /**
      * #action
      */