jbrowse-plugin-protein3d 0.13.0 → 0.13.1

package/dist/ProteinView/components/HeaderStructureRow.js

@@ -1,5 +1,7 @@
 import React from 'react';
+import ChevronRightIcon from '@mui/icons-material/ChevronRight';
 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 Tooltip from '@mui/material/Tooltip';
@@ -10,7 +12,14 @@ const LOW_SIMILARITY_EXPLANATION = `Under ${Math.round(LOW_IDENTITY_OVER_SHORTER
 const StructureRow = observer(function StructureRow({ model, structure, }) {
     const { label, alignmentQuality: quality, statusMessage } = structure;
     const coveredRange = quality ? describeCoveredRange(quality) : undefined;
-    return (React.createElement("div", { "data-testid": "structure-row", "data-label": label, style: { display: 'flex', alignItems: 'center', gap: 8, minHeight: 24 } },
+    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 } },
+        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),
         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" },

package/dist/ProteinView/components/PlddtLegend.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import Typography from '@mui/material/Typography';
+import { PLDDT_BINS, plddtColor } from '../residueTracks';
+export default function PlddtLegend() {
+    return (React.createElement(Typography, { variant: "caption", color: "textSecondary", component: "div", "data-testid": "track-legend", style: {
+            display: 'flex',
+            flexWrap: 'wrap',
+            gap: 6,
+            fontSize: 9,
+            paddingLeft: 8,
+        } },
+        "pLDDT:",
+        PLDDT_BINS.map(bin => (React.createElement("span", { key: bin.label, style: { display: 'inline-flex', alignItems: 'center', gap: 3 } },
+            React.createElement("span", { style: {
+                    width: 8,
+                    height: 8,
+                    background: plddtColor(bin.score),
+                    border: '1px solid rgba(0,0,0,0.3)',
+                } }),
+            bin.label)))));
+}

package/dist/ProteinView/components/ProteinAlignment.js

@@ -7,11 +7,11 @@ import { makeStyles } from 'tss-react/mui';
 import AlignmentRuler from './AlignmentRuler';
 import ChainSelect from './ChainSelect';
 import HoverMarker from './HoverMarker';
+import PlddtLegend from './PlddtLegend';
 import ProteinAlignmentHelpButton from './ProteinAlignmentHelpButton';
 import { ProteinFeatureTrackContent, ProteinFeatureTrackLabels, } from './ProteinFeatureTrack';
 import ResidueValueTrack from './ResidueValueTrack';
 import SplitString, { AlignmentHighlights } from './SplitString';
-import TrackLegend from './TrackLegend';
 import ExternalLink from '../../components/ExternalLink';
 import { largeJumpScrollTarget, offScreenCenterTarget } from '../autoScroll';
 import { CHAR_WIDTH, LABEL_WIDTH, ROW_HEIGHT } from '../constants';
@@ -66,7 +66,10 @@ function GutterLabel({ label, title, height, }) {
             } }, label)));
 }
 const ProteinAlignment = observer(function ProteinAlignment({ model, }) {
-    const { alignment: pairwiseAlignment, alignmentQuality: quality, showHighlight, showProteinTracks, label, confidenceCells, hydrophobicityCells, } = model;
+    const { alignment: pairwiseAlignment, alignmentQuality: quality, showHighlight, showProteinTracks, showAllFeatureTracks, label, confidenceCells, } = model;
+    const hydrophobicityCells = showAllFeatureTracks
+        ? model.hydrophobicityCells
+        : [];
     const { classes } = useStyles();
     const containerRef = useRef(null);
     const lastScrolledSelectionRef = useRef(undefined);
@@ -206,6 +209,6 @@ const ProteinAlignment = observer(function ProteinAlignment({ model, }) {
                     confidenceCells.length > 0 ? (React.createElement(ResidueValueTrack, { cells: confidenceCells, colorFor: plddtColor, formatValue: v => `pLDDT ${v.toFixed(0)}`, sequenceLength: a0.length, model: model })) : null,
                     hydrophobicityCells.length > 0 ? (React.createElement(ResidueValueTrack, { cells: hydrophobicityCells, colorFor: hydrophobicityColor, formatValue: v => `Kyte-Doolittle ${v.toFixed(1)}`, sequenceLength: a0.length, model: model })) : null,
                     React.createElement(HoverMarker, { model: model }))) : null)),
-        showProteinTracks ? (React.createElement(TrackLegend, { featureTypes: featureData?.visibleGroups.map(group => group.type) ?? [], showConfidence: confidenceCells.length > 0 })) : null));
+        showProteinTracks && confidenceCells.length > 0 ? React.createElement(PlddtLegend, null) : null));
 });
 export default ProteinAlignment;

package/dist/ProteinView/components/ProteinViewHeader.js

@@ -51,7 +51,7 @@ const DisplaySettingsMenu = observer(function DisplaySettingsMenu({ model, }) {
             model.behaviorToggles.map(toggle => (React.createElement(ToggleMenuItem, { key: toggle.label, checked: toggle.checked, label: toggle.label, onToggle: toggle.toggle }))))));
 });
 const ProteinViewHeader = observer(function ProteinViewHeader({ model, }) {
-    const { structures, showAlignment } = model;
+    const { alignmentStructure, showAlignment } = model;
     return (React.createElement("div", null,
         React.createElement("div", { style: {
                 display: 'flex',
@@ -68,11 +68,7 @@ const ProteinViewHeader = observer(function ProteinViewHeader({ model, }) {
                 React.createElement(ColorSchemeSelect, { model: model }),
                 React.createElement(DisplaySettingsMenu, { model: model }))),
         React.createElement(HeaderStructureRows, { model: model }),
-        showAlignment
-            ? structures
-                .filter(s => s.pairwiseAlignment || s.alignmentPending)
-                .map((structure, idx) => (React.createElement("div", { key: idx }, structure.pairwiseAlignment ? (React.createElement(ProteinAlignment, { model: structure })) : (React.createElement(LoadingEllipses, { message: "Loading pairwise alignment" })))))
-            : null,
+        showAlignment && alignmentStructure?.pairwiseAlignment ? (React.createElement(ProteinAlignment, { model: alignmentStructure })) : showAlignment && alignmentStructure?.alignmentPending ? (React.createElement(LoadingEllipses, { message: "Loading pairwise alignment" })) : null,
         React.createElement(AddStructureDialog, { model: model })));
 });
 export default ProteinViewHeader;

package/dist/ProteinView/constants.js

@@ -4,7 +4,21 @@ export const COMPACT_TRACK_HEIGHT = 8;
 export const COMPACT_TRACK_GAP = 1;
 export const NORMAL_TRACK_HEIGHT = 12;
 export const NORMAL_TRACK_GAP = 2;
-export const LABEL_WIDTH = 50;
+export const LABEL_WIDTH = 124;
+export const MINOR_FEATURE_TYPES = new Set([
+    'Chain',
+    'Helix',
+    'Turn',
+    'Beta strand',
+    'Compositional bias',
+    'Modified residue',
+    'Glycosylation',
+    'Lipidation',
+    'Cross-link',
+    'Alternative sequence',
+    'Sequence conflict',
+    'Initiator methionine',
+]);
 export const HOVER_MARKER_COLOR = 'rgba(255, 105, 180, 0.5)';
 export const SELECTED_BORDER = '2px solid #333';
 export const HOVERED_BORDER = '1px solid black';

package/dist/ProteinView/hooks/useProteinFeatureTrackData.js

@@ -58,14 +58,14 @@ export function packLanes(layouts) {
 }
 export default function useProteinFeatureTrackData(model, uniprotId, mapUniProtPosition) {
     const { features, isLoading, error } = useUniProtFeatures(uniprotId);
-    const { alignment: pairwiseAlignment, hiddenFeatureTypes, structurePositionToAlignmentMap, } = model;
+    const { alignment: pairwiseAlignment, omittedFeatureTypes, 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)) {
+            if (!omittedFeatureTypes.has(feature.type)) {
                 const layout = layoutFeature(feature, structurePositionToAlignmentMap, mapUniProtPosition);
                 if (layout) {
                     const list = groups.get(feature.type);
@@ -90,7 +90,7 @@ export default function useProteinFeatureTrackData(model, uniprotId, mapUniProtP
     }, [
         features,
         pairwiseAlignment,
-        hiddenFeatureTypes,
+        omittedFeatureTypes,
         structurePositionToAlignmentMap,
         mapUniProtPosition,
     ]);

package/dist/ProteinView/model.js

@@ -79,6 +79,18 @@ function stateModelFactory() {
          * render the feature/residue tracks at reduced height
          */
         compactTracks: true,
+        /**
+         * #property
+         * also draw the feature types in MINOR_FEATURE_TYPES and the
+         * hydrophobicity track
+         */
+        showAllFeatureTracks: false,
+        /**
+         * #property
+         * which structure's alignment panel is open; unset opens the seeded
+         * structure, else the first
+         */
+        alignmentStructureIndex: types.maybe(types.number),
         /**
          * #property
          */
@@ -199,6 +211,12 @@ function stateModelFactory() {
                 structure.setSelectedFeatureId(undefined);
             }
         },
+        /**
+         * #action
+         */
+        openAlignmentOf(structure) {
+            self.alignmentStructureIndex = self.structures.indexOf(structure);
+        },
     }))
         .actions(self => ({
         /**
@@ -215,6 +233,12 @@ function stateModelFactory() {
         removeStructure(structure) {
             const plugin = self.molstarPluginContext;
             const molstarStructure = structure.molstarStructure;
+            const removed = self.structures.indexOf(structure);
+            const open = self.alignmentStructureIndex;
+            if (open !== undefined) {
+                self.alignmentStructureIndex =
+                    removed === open ? undefined : removed < open ? open - 1 : open;
+            }
             self.structures.remove(structure);
             self.setSuperposedCount(0);
             if (plugin) {
@@ -311,6 +335,18 @@ function stateModelFactory() {
                 ? []
                 : [{ id: getPath(s), message: s.loadingMessage }]);
         },
+        /**
+         * #getter
+         * The one structure whose alignment panel is open.
+         */
+        get alignmentStructure() {
+            const { structures, alignmentStructureIndex } = self;
+            return ((alignmentStructureIndex === undefined
+                ? undefined
+                : structures[alignmentStructureIndex]) ??
+                structures.find(s => s.seededSelection) ??
+                structures[0]);
+        },
         /**
          * #getter
          * What the header's Tune menu offers: the layout choices, remembered for
@@ -321,6 +357,7 @@ function stateModelFactory() {
             return [
                 ['showAlignment', 'Show alignment'],
                 ['showProteinTracks', 'Show feature tracks'],
+                ['showAllFeatureTracks', 'Show all feature tracks'],
                 ['compactTracks', 'Compact tracks'],
                 [
                     'autoScrollAlignment',

package/dist/ProteinView/storedSettings.js

@@ -13,6 +13,7 @@ export const PERSISTED_SETTINGS = [
     'showControls',
     'autoScrollAlignment',
     'compactTracks',
+    'showAllFeatureTracks',
 ];
 /**
  * A stored preference fills in only what the snapshot leaves unsaid. Comparing

package/dist/ProteinView/structureModel.js

@@ -4,7 +4,7 @@ import { autorun, when } from 'mobx';
 import { alignTranscriptToEntity, alignmentCol, alignmentQuality, chooseMappedEntity, codonGenomeSpan, entityLabel, fetchUniProtStructureMappings, fusionPartnerPositions, getPdbIdFromUrl, getUniprotIdFromAlphaFoldTarget, interactionMatchesMappedEntity, looksLikePlddt, makeCoordinateMapper, makeLabelSeqIdIndex, mappedStructureIdentity, rangeToLabelSeqIds, residueNumber, residueRangeToPositions, resolveStructureUrl, stripStopCodon, structureDisplayLabel, structurePos, toLabelSeqIds, transcriptRangeToStructureRange, unmapStructurePositions, } from 'p2s_mapper';
 import { attachStructureInteractions } from './attachStructureInteractions';
 import { connectedHoverTranscriptPos } from './connectedHover';
-import { COMPACT_TRACK_GAP, COMPACT_TRACK_HEIGHT, NORMAL_TRACK_GAP, NORMAL_TRACK_HEIGHT, } from './constants';
+import { COMPACT_TRACK_GAP, COMPACT_TRACK_HEIGHT, MINOR_FEATURE_TYPES, NORMAL_TRACK_GAP, NORMAL_TRACK_HEIGHT, } from './constants';
 import { proteinAbbreviationMapping } from './proteinAbbreviationMapping';
 import { clickProteinToGenome, structureRangeToGenomeRegions, } from './proteinToGenomeMapping';
 import { kyteDoolittleScores, mapResidueValuesToColumns } from './residueTracks';
@@ -870,6 +870,19 @@ const Structure = types
     get showProteinTracks() {
         return this.parentView.showProteinTracks;
     },
+    get showAllFeatureTracks() {
+        return this.parentView.showAllFeatureTracks;
+    },
+    /**
+     * #getter
+     * The feature types left undrawn: the ones hidden by hand, and the minor
+     * ones unless every track is shown.
+     */
+    get omittedFeatureTypes() {
+        return this.showAllFeatureTracks
+            ? self.hiddenFeatureTypes
+            : new Set([...MINOR_FEATURE_TYPES, ...self.hiddenFeatureTypes]);
+    },
     get trackHeight() {
         return this.parentView.compactTracks
             ? COMPACT_TRACK_HEIGHT