jbrowse-plugin-protein3d 0.15.1 → 0.15.2

package/dist/LaunchProteinViewExtensionPoint/index.js

@@ -3,6 +3,16 @@ import { resolveShortLaunch, } from './resolveShortLaunch';
 import { maybeLaunchSideBySide } from '../LaunchProteinView/utils/sideBySide';
 import { coerceColorScheme } from '../ProteinView/applyColorTheme';
 import { proteinViewSnapshot } from '../ProteinView/proteinViewSpec';
+export function launchViewSnapshot({ alignmentAlgorithm, colorScheme, ...settings }, structures) {
+    return proteinViewSnapshot({
+        ...settings,
+        alignmentAlgorithm: alignmentAlgorithm === undefined
+            ? undefined
+            : coerceAlignmentAlgorithm(alignmentAlgorithm),
+        colorScheme: colorScheme === undefined ? undefined : coerceColorScheme(colorScheme),
+        structures,
+    });
+}
 export default function LaunchProteinViewExtensionPointF(pluginManager) {
     // v4 hosts declare `init`; v5 reads the settings off the view object and
     // warns about the nesting
@@ -17,9 +27,9 @@ export default function LaunchProteinViewExtensionPointF(pluginManager) {
     // its extendee at each exit now, like jbrowse-components' own
     // LaunchDotplotView does.
     async (args) => {
-        const { session, url, uniprotId, pdbId, transcriptId, userProvidedTranscriptSequence, feature, connectedViewId, connectedView, alignmentAlgorithm, colorScheme, displayName, height, showControls, showHighlight, showAlignment, showProteinTracks, compactTracks, autoScrollAlignment, zoomToBaseLevel, sideBySide, initialSelection, initialResidues, initialTranscriptResidues, } = args;
-        const requested = args.structures?.length
-            ? args.structures
+        const { session, url, uniprotId, pdbId, structures: requestedStructures, transcriptId, userProvidedTranscriptSequence, feature, connectedViewId, connectedView, sideBySide, initialSelection, initialResidues, initialTranscriptResidues, ...settings } = args;
+        const requested = requestedStructures?.length
+            ? requestedStructures
             : [
                 {
                     url,
@@ -89,25 +99,7 @@ export default function LaunchProteinViewExtensionPointF(pluginManager) {
             feature: s.feature ?? resolved?.feature ?? feature,
             connectedViewId: s.connectedViewId ?? resolvedConnectedViewId,
         }));
-        const proteinView = session.addView('ProteinView', proteinViewSnapshot({
-            // a URL param is untrusted text; the model properties are enumerations
-            alignmentAlgorithm: alignmentAlgorithm === undefined
-                ? undefined
-                : coerceAlignmentAlgorithm(alignmentAlgorithm),
-            colorScheme: colorScheme === undefined
-                ? undefined
-                : coerceColorScheme(colorScheme),
-            displayName,
-            height,
-            showControls,
-            showHighlight,
-            showAlignment,
-            showProteinTracks,
-            compactTracks,
-            autoScrollAlignment,
-            zoomToBaseLevel,
-            structures,
-        }));
+        const proteinView = session.addView('ProteinView', launchViewSnapshot(settings, structures));
         if (ownsConnectedView) {
             maybeLaunchSideBySide(session, proteinView.id, sideBySide);
         }

package/dist/ProteinView/autoScroll.js

@@ -1,5 +1,4 @@
 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;
@@ -17,8 +16,8 @@ export function followHover(model, getContainer) {
             model.autoScrollAlignment &&
             !model.isMouseInAlignment) {
             const target = followHoverTarget({
-                x: pos * CHAR_WIDTH,
-                width: CHAR_WIDTH,
+                x: pos * model.columnWidth,
+                width: model.columnWidth,
                 scrollLeft: container.scrollLeft,
                 clientWidth: container.clientWidth,
             });

package/dist/ProteinView/components/AlignmentRuler.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { observer } from 'mobx-react';
-import { CHAR_WIDTH, ROW_HEIGHT } from '../constants';
+import { ROW_HEIGHT } from '../constants';
 /** Which alignment columns get a tick, and which of those a label, in the
  * structure's author residue numbering (see residueNumber), so the ruler reads
  * like the paper and Mol*'s hover label. Pure so it can be tested without the
@@ -26,18 +26,18 @@ export function rulerTicks(alignmentToStructure, columns, residueNumber) {
     return ticks;
 }
 const AlignmentRuler = observer(function AlignmentRuler({ model, columns, }) {
+    const { columnWidth } = model;
     const ticks = rulerTicks(model.pairwiseAlignmentToStructurePosition, columns, pos => model.residueNumber(pos));
     return (React.createElement("div", { style: {
             position: 'relative',
-            height: ROW_HEIGHT,
-            width: columns * CHAR_WIDTH,
+            height: '100%',
             color: '#888',
             fontSize: 8,
         } }, ticks.map(({ col, label }) => (React.createElement("span", { key: col, style: {
             position: 'absolute',
-            left: col * CHAR_WIDTH,
+            left: col * columnWidth,
             top: 0,
-            height: ROW_HEIGHT,
+            bottom: 0,
             borderLeft: '1px solid #aaa',
             paddingLeft: 2,
             lineHeight: `${ROW_HEIGHT}px`,

package/dist/ProteinView/components/ChainSelect.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { MenuItem, TextField } from '@mui/material';
+import { MenuItem, TextField, Tooltip } from '@mui/material';
 import { observer } from 'mobx-react';
 import { entityLabel } from 'p2s_mapper';
 // Which chain the transcript maps to. The structure picks the protein chain
@@ -11,8 +11,12 @@ const ChainSelect = observer(function ChainSelect({ model, }) {
     if (!entities || entities.length < 2 || !userProvidedTranscriptSequence) {
         return null;
     }
-    return (React.createElement(TextField, { select: true, size: "small", label: "Mapped chain", "data-testid": "protein-mapped-chain", value: model.pendingEntityId ?? mappedEntity?.entityId ?? '', onChange: event => {
-            model.chooseEntity(event.target.value);
-        }, sx: { minWidth: 200, mr: 1 } }, entities.map(entity => (React.createElement(MenuItem, { key: entity.entityId, value: entity.entityId }, entityLabel(entity))))));
+    return (React.createElement(Tooltip, { title: "Mapped chain: the one the transcript maps to", placement: "left" },
+        React.createElement(TextField, { select: true, size: "small", variant: "standard", "data-testid": "protein-mapped-chain", value: model.pendingEntityId ?? mappedEntity?.entityId ?? '', onChange: event => {
+                model.chooseEntity(event.target.value);
+            }, slotProps: {
+                input: { disableUnderline: true, sx: { fontSize: 12 } },
+                htmlInput: { 'aria-label': 'Mapped chain' },
+            }, sx: { minWidth: 60 } }, entities.map(entity => (React.createElement(MenuItem, { key: entity.entityId, value: entity.entityId, dense: true }, entityLabel(entity)))))));
 });
 export default ChainSelect;

package/dist/ProteinView/components/ColorKey.js

@@ -5,8 +5,8 @@ const swatch = {
     height: 8,
     border: '1px solid rgba(0,0,0,0.3)',
 };
-function KeyRow({ title, testId, children, }) {
-    return (React.createElement(Typography, { variant: "caption", color: "textSecondary", component: "div", "data-testid": testId, style: {
+function KeyRow({ title, testId, color, children, }) {
+    return (React.createElement(Typography, { variant: "caption", color: color, component: "div", "data-testid": testId, style: {
             display: 'flex',
             flexWrap: 'wrap',
             alignItems: 'center',
@@ -19,13 +19,13 @@ function KeyRow({ title, testId, children, }) {
             ":"),
         children));
 }
-export function ColorKey({ title, entries, testId = 'track-legend', }) {
-    return (React.createElement(KeyRow, { title: title, testId: testId }, entries.map(({ label, color }, i) => (React.createElement("span", { key: `${i}-${label}`, style: { display: 'inline-flex', alignItems: 'center', gap: 3 } },
+export function ColorKey({ title, entries, testId = 'track-legend', color = 'textSecondary', }) {
+    return (React.createElement(KeyRow, { title: title, testId: testId, color: color }, entries.map(({ label, color }, i) => (React.createElement("span", { key: `${i}-${label}`, style: { display: 'inline-flex', alignItems: 'center', gap: 3 } },
         React.createElement("span", { style: { ...swatch, background: color } }),
         label)))));
 }
-export function GradientKey({ title, minLabel, maxLabel, colors, testId = 'track-legend', }) {
-    return (React.createElement(KeyRow, { title: title, testId: testId },
+export function GradientKey({ title, minLabel, maxLabel, colors, testId = 'track-legend', color = 'textSecondary', }) {
+    return (React.createElement(KeyRow, { title: title, testId: testId, color: color },
         minLabel,
         React.createElement("span", { style: {
                 ...swatch,

package/dist/ProteinView/components/ColumnOverlays.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import { observer } from 'mobx-react';
+import { HOVER_COLOR, HOVER_RANGE_COLOR, MATCH_COLOR, SELECTION_COLOR, SELECTION_OUTLINE, } from '../constants';
+import { positionRuns } from '../residueRanges';
+function Band({ start, end, columnWidth, background, border, }) {
+    return (React.createElement("div", { style: {
+            position: 'absolute',
+            top: 0,
+            bottom: 0,
+            left: start * columnWidth,
+            width: (end - start + 1) * columnWidth,
+            background,
+            border,
+            boxSizing: 'border-box',
+            pointerEvents: 'none',
+        } }));
+}
+function Layer({ zIndex, children, }) {
+    return (React.createElement("div", { style: { position: 'absolute', inset: 0, pointerEvents: 'none', zIndex } }, children));
+}
+/**
+ * The persistent state, drawn beneath every row: a band on top would tint the
+ * pLDDT cells and feature bars inside it, and those colours are data. The
+ * aligned portion (`showHighlight`) lights the sequence rows, `matchHeight`
+ * tall, and the selection's fill goes over it; ColumnOverlays draws the
+ * selection's outline over the rows.
+ */
+export const SelectionBackdrop = observer(function SelectionBackdrop({ model, matchHeight, }) {
+    const { clickAlignmentRanges, columnWidth, showHighlight, alignmentMatchSet, } = model;
+    return (React.createElement(Layer, { zIndex: 0 },
+        showHighlight && alignmentMatchSet ? (React.createElement("div", { style: { position: 'relative', height: matchHeight } }, positionRuns(alignmentMatchSet).map(run => (React.createElement(Band, { key: run.start, start: run.start, end: run.end - 1, columnWidth: columnWidth, background: MATCH_COLOR }))))) : null,
+        clickAlignmentRanges.map(range => (React.createElement(Band, { key: range.start, start: range.start, end: range.end, columnWidth: columnWidth, background: SELECTION_COLOR })))));
+});
+/**
+ * The interaction state, drawn once over every row of the panel so the
+ * sequence, the ruler and the tracks all agree on which columns are hovered
+ * and selected. Columns are inclusive.
+ */
+const ColumnOverlays = observer(function ColumnOverlays({ model, }) {
+    const { clickAlignmentRanges, alignmentHoverRange, alignmentHoverPos, columnWidth, } = model;
+    return (React.createElement(Layer, { zIndex: 1 },
+        clickAlignmentRanges.map(range => (React.createElement(Band, { key: range.start, start: range.start, end: range.end, columnWidth: columnWidth, background: "transparent", border: SELECTION_OUTLINE }))),
+        alignmentHoverRange ? (React.createElement(Band, { start: alignmentHoverRange.start, end: alignmentHoverRange.end, columnWidth: columnWidth, background: HOVER_RANGE_COLOR })) : null,
+        alignmentHoverPos === undefined ? null : (React.createElement(Band, { start: alignmentHoverPos, end: alignmentHoverPos, columnWidth: columnWidth, background: HOVER_COLOR }))));
+});
+export default ColumnOverlays;

package/dist/ProteinView/components/FeatureBar.js

@@ -26,58 +26,50 @@ function FeatureTooltipContent({ feature, layout, model, }) {
             last)) : null,
         feature.description ? React.createElement("div", null, feature.description) : null));
 }
-const FeatureBar = observer(function FeatureBar({ layout, top, model, }) {
+// `selected` comes from the track rather than each bar reading the model's
+// selection itself, so a click re-renders the two bars it changes instead of
+// every bar of every track (p53 has 1,363 natural variants).
+const FeatureBar = observer(function FeatureBar({ layout, top, selected, model, }) {
     const [isHovered, setIsHovered] = useState(false);
-    const { selectedFeatureId } = model;
-    const { feature, left, width } = layout;
-    const isSelected = selectedFeatureId === feature.uniqueId;
-    const handleMouseEnter = () => {
-        setIsHovered(true);
-        model.setAlignmentHoverRange({
-            start: layout.alignmentStart,
-            end: layout.alignmentEnd,
-        });
-    };
-    const handleMouseLeave = () => {
-        setIsHovered(false);
-        model.setAlignmentHoverRange(undefined);
-    };
-    const handleClick = () => {
-        if (isSelected) {
-            model.setSelectedFeatureId(undefined);
-            model.setClickedStructureRanges([]);
-        }
-        else {
-            model.setSelectedFeatureId(feature.uniqueId);
-            clickProteinToGenome({
-                model,
-                structureSeqPos: layout.structureStart,
-                structureSeqEndPos: layout.structureEnd,
-            }).catch((e) => {
-                console.error(e);
-                model.setError(e);
-            });
-        }
-    };
-    const color = getFeatureColor(feature.type);
+    const { feature, alignmentStart, alignmentEnd } = layout;
+    const { columnWidth, trackHeight } = model;
     return (React.createElement(Tooltip, { title: React.createElement(FeatureTooltipContent, { feature: feature, layout: layout, model: model }), 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: () => {
-                handleClick();
+                if (selected) {
+                    model.setSelectedFeatureId(undefined);
+                    model.setClickedStructureRanges([]);
+                }
+                else {
+                    model.setSelectedFeatureId(feature.uniqueId);
+                    clickProteinToGenome({
+                        model,
+                        structureSeqPos: layout.structureStart,
+                        structureSeqEndPos: layout.structureEnd,
+                    }).catch((e) => {
+                        console.error(e);
+                        model.setError(e);
+                    });
+                }
             }, onMouseEnter: () => {
-                handleMouseEnter();
+                setIsHovered(true);
+                model.setAlignmentHoverRange({
+                    start: alignmentStart,
+                    end: alignmentEnd,
+                });
             }, onMouseLeave: () => {
-                handleMouseLeave();
+                setIsHovered(false);
+                model.setAlignmentHoverRange(undefined);
             }, style: {
                 position: 'absolute',
-                left,
+                left: alignmentStart * columnWidth,
                 top,
-                width,
-                height: model.trackHeight,
-                backgroundColor: color,
-                opacity: isHovered || isSelected ? 0.9 : 0.6,
+                width: (alignmentEnd - alignmentStart + 1) * columnWidth,
+                height: trackHeight,
+                backgroundColor: getFeatureColor(feature.type),
+                opacity: isHovered || selected ? 0.9 : 0.6,
                 cursor: 'pointer',
                 borderRadius: 2,
-                border: isSelected
+                border: selected
                     ? SELECTED_BORDER
                     : isHovered
                         ? HOVERED_BORDER

package/dist/ProteinView/components/FeatureTypeLabel.js

@@ -5,33 +5,27 @@ 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, model, }) {
-    const lanes = expanded ? laneCount : 1;
-    const canExpand = laneCount > 1;
+const FeatureTypeLabel = observer(function FeatureTypeLabel({ type, laneCount, model, }) {
+    const expanded = model.expandedFeatureTypes.has(type);
+    const iconSize = model.trackHeight;
     return (React.createElement(Tooltip, { title: type, placement: "left" },
         React.createElement("div", { style: {
-                height: lanes * (model.trackHeight + model.trackGap),
-                fontSize: 9,
-                fontFamily: 'monospace',
-                textAlign: 'right',
-                paddingRight: 4,
+                height: '100%',
                 whiteSpace: 'nowrap',
                 display: 'flex',
                 alignItems: expanded ? 'flex-start' : 'center',
                 justifyContent: 'flex-end',
                 gap: 2,
             } },
-            React.createElement(IconButton, { onClick: e => {
-                    e.stopPropagation();
+            React.createElement(IconButton, { onClick: () => {
                     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();
+                React.createElement(CloseIcon, { sx: { fontSize: iconSize } })),
+            laneCount > 1 ? (React.createElement(IconButton, { onClick: () => {
                     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,
+                    : `Expand ${type} track (${laneCount} overlapping rows)`, sx: { p: 0, color: HIDE_BUTTON_COLOR } }, expanded ? (React.createElement(UnfoldLessIcon, { sx: { fontSize: iconSize } })) : (React.createElement(UnfoldMoreIcon, { sx: { fontSize: iconSize } })))) : null,
             React.createElement("span", null, type))));
 });
 export default FeatureTypeLabel;

package/dist/ProteinView/components/HeaderStructureRow.js

@@ -4,43 +4,77 @@ import CloseIcon from '@mui/icons-material/Close';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import Chip from '@mui/material/Chip';
 import IconButton from '@mui/material/IconButton';
+import Link from '@mui/material/Link';
 import Tooltip from '@mui/material/Tooltip';
 import Typography from '@mui/material/Typography';
 import { observer } from 'mobx-react';
-import { LOW_IDENTITY_OVER_SHORTER, SHORT_ALIGNMENT_IDENTITY, SHORT_ALIGNMENT_RESIDUES, describeCoveredRange, describeTranscriptCoverage, isLowSimilarity, } from 'p2s_mapper';
+import { LOW_IDENTITY_OVER_SHORTER, SHORT_ALIGNMENT_IDENTITY, SHORT_ALIGNMENT_RESIDUES, describeAlignmentQuality, describeCoveredRange, describeTranscriptCoverage, isLowSimilarity, uniprotEntryUrl, } from 'p2s_mapper';
+import ChainSelect from './ChainSelect';
+import { describeCoverage } from '../describeCoverage';
 const LOW_SIMILARITY_EXPLANATION = `Under ${Math.round(LOW_IDENTITY_OVER_SHORTER * 100)}% of the shorter sequence is identical (${Math.round(SHORT_ALIGNMENT_IDENTITY * 100)}% for an alignment of fewer than ${SHORT_ALIGNMENT_RESIDUES} residues): an alignment this weak is what two unrelated proteins produce, so the positions it maps may be unrelated. Check the mapped chain, the transcript isoform, or import a curated alignment.`;
-const StructureRow = observer(function StructureRow({ model, structure, }) {
+// Which UniProt entry the structure's mapped chain is, and so which one its
+// feature tracks annotate. For an AlphaFold model that is in the filename, but
+// for a PDB entry it is resolved via SIFTS and is otherwise invisible.
+const UniProtLink = observer(function UniProtLink({ structure, }) {
+    const { uniprotId, uniprotName } = structure.uniProtEntry;
+    return uniprotId ? (React.createElement(Tooltip, { title: `The mapped chain is UniProt ${uniprotId}${uniprotName ? ` (${uniprotName})` : ''}, which its feature tracks annotate` },
+        React.createElement(Link, { variant: "caption", href: uniprotEntryUrl(uniprotId), target: "_blank", rel: "noreferrer", noWrap: true, sx: { minWidth: 40 } },
+            "UniProt ",
+            uniprotId))) : null;
+});
+const StructureRow = observer(function StructureRow({ model, structure, readout, }) {
     const { label, alignmentQuality: quality, statusMessage } = structure;
-    const coveredRange = quality ? describeCoveredRange(quality) : undefined;
     const switchable = model.showAlignment && model.structures.length > 1;
     const open = model.alignmentStructure === structure;
-    return (React.createElement("div", { "data-testid": "structure-row", "data-label": label, "data-open": switchable ? open : undefined, style: { display: 'flex', alignItems: 'center', gap: 8, minHeight: 24 } },
+    const coveredRange = quality ? describeCoveredRange(quality) : undefined;
+    return (React.createElement("div", { "data-testid": "structure-row", "data-label": label, "data-open": switchable ? open : undefined, style: {
+            display: 'flex',
+            alignItems: 'center',
+            gap: 8,
+            minHeight: 24,
+            minWidth: 0,
+        } },
         switchable ? (React.createElement(Tooltip, { title: open ? 'Alignment shown below' : 'Show alignment' },
             React.createElement("span", null,
                 React.createElement(IconButton, { size: "small", "aria-label": `Show ${label} alignment`, "aria-expanded": open, disabled: open, onClick: () => {
                         model.openAlignmentOf(structure);
                     }, sx: { p: 0 } }, open ? (React.createElement(ExpandMoreIcon, { fontSize: "small" })) : (React.createElement(ChevronRightIcon, { fontSize: "small" })))))) : null,
-        React.createElement(Typography, { variant: "caption", sx: { fontWeight: 'bold' } }, label),
+        React.createElement(Typography, { variant: "caption", sx: { fontWeight: 'bold', flexShrink: 0 } }, label),
         statusMessage ? (React.createElement(Typography, { variant: "caption", color: "error", "data-testid": "structure-status" }, statusMessage)) : null,
-        quality ? (React.createElement(Typography, { variant: "caption", color: "textSecondary", "data-testid": "header-alignment-quality" },
-            describeTranscriptCoverage(quality),
-            coveredRange ? `, ${coveredRange}` : '')) : null,
+        readout ? (React.createElement(Typography, { variant: "caption", noWrap: true, title: readout, "data-testid": "structure-hover" }, readout)) : quality ? (React.createElement(Tooltip, { title: quality.aligned === 0
+                ? ''
+                : `${describeTranscriptCoverage(quality)}${coveredRange ? `, ${coveredRange}` : ''}; ${describeAlignmentQuality(quality)}` },
+            React.createElement(Typography, { variant: "caption", color: "textSecondary", noWrap: true, "data-testid": "header-alignment-quality" }, describeCoverage(quality)))) : null,
+        React.createElement(UniProtLink, { structure: structure }),
         React.createElement("div", { style: { flex: 1 } }),
+        open && model.showAlignment ? React.createElement(ChainSelect, { model: structure }) : null,
         quality && isLowSimilarity(quality) ? (React.createElement(Tooltip, { title: LOW_SIMILARITY_EXPLANATION },
             React.createElement(Chip, { size: "small", color: "warning", variant: "outlined", label: "low similarity", "data-testid": "header-low-similarity" }))) : null,
         React.createElement(Tooltip, { title: `Remove ${label}` },
             React.createElement(IconButton, { size: "small", "aria-label": `Remove ${label}`, onClick: () => {
                     model.removeStructure(structure);
-                } },
+                }, sx: { p: 0.25 } },
                 React.createElement(CloseIcon, { fontSize: "small" })))));
 });
 /**
  * One line per structure, in the header the reader always sees. The identity
  * and coverage readout used to live only inside the pairwise panel, which the
  * same reader can hide — so how much of the transcript a structure speaks for,
- * and whether the mapping is chance, were one click away from invisible.
+ * and whether the mapping is chance, were one click away from invisible. The
+ * open structure's row also carries what used to head its alignment panel:
+ * the mapped-chain picker.
+ *
+ * A hovered residue is read out on its structure's row, in place of the
+ * coverage line until the pointer leaves. A genome or MSA hover that reaches
+ * one mapped structure but not another says so, since a crystal that lacks
+ * the residue is the point of showing several.
  */
 const HeaderStructureRows = observer(function HeaderStructureRows({ model, }) {
-    return (React.createElement("div", null, model.structures.map((structure, idx) => (React.createElement(StructureRow, { key: idx, model: model, structure: structure })))));
+    const { structures } = model;
+    const connectedHover = structures.some(s => s.hoverPosition && s.hoverPosition.source !== 'structure');
+    return (React.createElement("div", { style: { flex: 1, minWidth: 0 } }, structures.map((structure, idx) => (React.createElement(StructureRow, { key: idx, model: model, structure: structure, readout: structure.hoverString ||
+            (connectedHover && structure.genomeToTranscriptSeqMapping
+                ? 'not in structure'
+                : '') })))));
 });
 export default HeaderStructureRows;

package/dist/ProteinView/components/MismatchShading.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { observer } from 'mobx-react';
+import { DIFFERENT_RESIDUE_COLOR, SIMILAR_RESIDUE_COLOR } from '../constants';
+import { mismatchRuns } from '../mismatchRuns';
+const MismatchShading = observer(function MismatchShading({ model, }) {
+    const { alignment, columnWidth } = model;
+    return alignment
+        ? mismatchRuns(alignment).map(run => (React.createElement("div", { key: run.start, style: {
+                position: 'absolute',
+                top: 0,
+                bottom: 0,
+                left: run.start * columnWidth,
+                width: (run.end - run.start) * columnWidth,
+                background: run.kind === 'similar'
+                    ? SIMILAR_RESIDUE_COLOR
+                    : DIFFERENT_RESIDUE_COLOR,
+            } })))
+        : null;
+});
+export default MismatchShading;