jbrowse-plugin-protein3d 0.4.13 → 0.5.0

package/dist/ProteinView/components/ProteinFeatureTrack.js

@@ -4,35 +4,27 @@ import { CHAR_WIDTH } from '../constants';
 import FeatureBar from './FeatureBar';
 import FeatureTypeLabel from './FeatureTypeLabel';
 import HoverMarker from './HoverMarker';
-function getVisibleTypes(featureTypes, hiddenFeatureTypes) {
-    return featureTypes.filter(type => !hiddenFeatureTypes.has(type));
-}
 const FeatureTypeTrackContent = observer(function FeatureTypeTrackContent({ features, model, sequenceLength, }) {
     return (React.createElement("div", { style: {
             position: 'relative',
             height: model.trackHeight,
             width: sequenceLength * CHAR_WIDTH,
             marginBottom: model.trackGap,
-        } },
-        features.map(feature => (React.createElement(FeatureBar, { key: feature.uniqueId, feature: feature, model: model }))),
-        React.createElement(HoverMarker, { model: model })));
+        } }, features.map(feature => (React.createElement(FeatureBar, { key: feature.uniqueId, feature: feature, model: model })))));
 });
 export const ProteinFeatureTrackLabels = observer(function ProteinFeatureTrackLabels({ data, labelWidth, model, }) {
-    const { hiddenFeatureTypes } = model;
-    const visibleTypes = getVisibleTypes(data.featureTypes, hiddenFeatureTypes);
-    return (React.createElement(React.Fragment, null, visibleTypes.map(type => (React.createElement(FeatureTypeLabel, { key: type, type: type, labelWidth: labelWidth, model: model })))));
+    return (React.createElement(React.Fragment, null, data.visibleTypes.map(type => (React.createElement(FeatureTypeLabel, { key: type, type: type, labelWidth: labelWidth, model: model })))));
 });
 export const ProteinFeatureTrackContent = observer(function ProteinFeatureTrackContent({ data, model, }) {
-    const { hiddenFeatureTypes } = model;
-    const visibleTypes = getVisibleTypes(data.featureTypes, hiddenFeatureTypes);
-    return (React.createElement("div", { onMouseMove: (e) => {
+    return (React.createElement("div", { style: { position: 'relative' }, onMouseMove: (e) => {
             const rect = e.currentTarget.getBoundingClientRect();
-            const x = e.clientX - rect.left;
-            const alignmentPos = Math.floor(x / CHAR_WIDTH);
+            const alignmentPos = Math.floor((e.clientX - rect.left) / CHAR_WIDTH);
             if (alignmentPos >= 0 && alignmentPos < data.sequenceLength) {
                 model.hoverAlignmentPosition(alignmentPos);
             }
         }, onMouseLeave: () => {
             model.setHoveredPosition(undefined);
-        } }, visibleTypes.map(type => (React.createElement(FeatureTypeTrackContent, { key: type, features: data.groupedFeatures[type], model: model, sequenceLength: data.sequenceLength })))));
+        } },
+        data.visibleTypes.map(type => (React.createElement(FeatureTypeTrackContent, { key: type, features: data.groupedFeatures[type], model: model, sequenceLength: data.sequenceLength }))),
+        React.createElement(HoverMarker, { model: model })));
 });

package/dist/ProteinView/components/ProteinViewHeader.js

@@ -64,6 +64,7 @@ function getDisplayToggles(model) {
 }
 const DisplaySettingsMenu = observer(function DisplaySettingsMenu({ model, }) {
     const [anchorEl, setAnchorEl] = useState(null);
+    const hasHiddenTracks = model.structures.some(s => s.hiddenFeatureTypes.size > 0);
     return (React.createElement(React.Fragment, null,
         React.createElement(Tooltip, { title: "Display settings" },
             React.createElement(IconButton, { size: "small", onClick: event => {
@@ -72,7 +73,14 @@ const DisplaySettingsMenu = observer(function DisplaySettingsMenu({ model, }) {
                 React.createElement(TuneIcon, { fontSize: "small" }))),
         React.createElement(Menu, { anchorEl: anchorEl, open: Boolean(anchorEl), onClose: () => {
                 setAnchorEl(null);
-            } }, getDisplayToggles(model).map(toggle => (React.createElement(ToggleMenuItem, { key: toggle.label, checked: toggle.checked, label: toggle.label, onToggle: toggle.onToggle }))))));
+            } },
+            getDisplayToggles(model).map(toggle => (React.createElement(ToggleMenuItem, { key: toggle.label, checked: toggle.checked, label: toggle.label, onToggle: toggle.onToggle }))),
+            hasHiddenTracks ? (React.createElement(MenuItem, { dense: true, onClick: () => {
+                    for (const structure of model.structures) {
+                        structure.showAllFeatureTypes();
+                    }
+                } },
+                React.createElement(ListItemText, { inset: true }, "Restore hidden feature tracks"))) : null)));
 });
 const ProteinViewHeader = observer(function ProteinViewHeader({ model, }) {
     const { structures, showAlignment } = model;

package/dist/ProteinView/components/ResidueValueTrack.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo, useState } from 'react';
 import { Tooltip } from '@mui/material';
 import { observer } from 'mobx-react';
 import { CHAR_WIDTH } from '../constants';
@@ -8,21 +8,32 @@ import { CHAR_WIDTH } from '../constants';
  * tracks. Hovering drives the same structure hover as the feature tracks.
  */
 const ResidueValueTrack = observer(function ResidueValueTrack({ cells, colorFor, formatValue, sequenceLength, model, }) {
-    return (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);
-            if (alignmentPos >= 0 && alignmentPos < sequenceLength) {
-                model.hoverAlignmentPosition(alignmentPos);
-            }
-        }, onMouseLeave: () => {
-            model.setHoveredPosition(undefined);
-        } }, cells.map(cell => (React.createElement(Tooltip, { key: cell.col, title: formatValue(cell.value), followCursor: true },
+    const [hoveredCol, setHoveredCol] = useState(undefined);
+    const valueByCol = useMemo(() => {
+        const map = new Map();
+        for (const cell of cells) {
+            map.set(cell.col, cell.value);
+        }
+        return map;
+    }, [cells]);
+    const hoveredValue = hoveredCol === undefined ? undefined : valueByCol.get(hoveredCol);
+    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: {
                 position: 'absolute',
                 left: cell.col * CHAR_WIDTH,
                 top: 0,

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

@@ -3,6 +3,7 @@ import type { JBrowsePluginProteinStructureModel } from '../model';
 type FeaturesByType = Record<string, UniProtFeature[]>;
 export interface FeatureTrackData {
     featureTypes: string[];
+    visibleTypes: string[];
     groupedFeatures: FeaturesByType;
     sequenceLength: number;
 }

package/dist/ProteinView/hooks/useProteinFeatureTrackData.js

@@ -9,15 +9,16 @@ function groupFeaturesByType(features) {
 }
 export default function useProteinFeatureTrackData(model, uniprotId) {
     const { features, isLoading, error } = useUniProtFeatures(uniprotId);
-    const { pairwiseAlignment } = model;
+    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, groupedFeatures, sequenceLength },
+        data: { featureTypes, visibleTypes, groupedFeatures, sequenceLength },
         isLoading: false,
         error: undefined,
     };

package/dist/ProteinView/model.d.ts

@@ -603,6 +603,10 @@ declare function stateModelFactory(): import("@jbrowse/mobx-state-tree").IModelT
             start: number;
             end: number;
         } | undefined;
+        readonly hoverHighlightRange: {
+            start: number;
+            end: number;
+        } | undefined;
         readonly clickAlignmentRange: {
             start: number;
             end: number;
@@ -1337,6 +1341,10 @@ declare function stateModelFactory(): import("@jbrowse/mobx-state-tree").IModelT
             start: number;
             end: number;
         } | undefined;
+        readonly hoverHighlightRange: {
+            start: number;
+            end: number;
+        } | undefined;
         readonly clickAlignmentRange: {
             start: number;
             end: number;
@@ -1950,6 +1958,10 @@ declare function stateModelFactory(): import("@jbrowse/mobx-state-tree").IModelT
             start: number;
             end: number;
         } | undefined;
+        readonly hoverHighlightRange: {
+            start: number;
+            end: number;
+        } | undefined;
         readonly clickAlignmentRange: {
             start: number;
             end: number;

package/dist/ProteinView/structureModel.d.ts

@@ -262,6 +262,17 @@ declare const Structure: import("@jbrowse/mobx-state-tree").IModelType<{
         start: number;
         end: number;
     } | undefined;
+    /**
+     * #getter
+     * The current hover as a 0-based half-open structure range. A feature-range
+     * hover (hoverStructureRange) takes priority over a single-residue hover
+     * (structureSeqHoverPos). Drives both the molstar 3D highlight and the
+     * genome highlight.
+     */
+    readonly hoverHighlightRange: {
+        start: number;
+        end: number;
+    } | undefined;
     /**
      * #getter
      * Persistent click selection in alignment coordinates, derived from
@@ -282,11 +293,9 @@ declare const Structure: import("@jbrowse/mobx-state-tree").IModelType<{
     } | undefined): IRegion[];
     /**
      * #getter
-     * Genome regions to highlight in the LGV based on the current hover.
-     * A feature-range hover (hoverStructureRange) takes priority over a
-     * single-residue hover (structureSeqHoverPos). Excludes hovers that
-     * originated from the genome view itself, so hovering the LGV doesn't
-     * echo a codon-width highlight back onto that same view.
+     * Genome regions to highlight in the LGV from the current hover. Excludes
+     * hovers that originated from the genome view itself, so hovering the LGV
+     * doesn't echo a codon-width highlight back onto that same view.
      */
     readonly hoverGenomeHighlights: IRegion[];
     /**

package/dist/ProteinView/structureModel.js

@@ -1,11 +1,10 @@
 import { SimpleFeature, getSession } from '@jbrowse/core/util';
 import { addDisposer, getParent, types, } from '@jbrowse/mobx-state-tree';
 import { autorun } from 'mobx';
-import { applyLociInteractivityMultiple, applyLociInteractivitySingle, } from './applyLociInteractivity';
+import { setMolstarLoci } from './applyLociInteractivity';
 import { COMPACT_TRACK_GAP, COMPACT_TRACK_HEIGHT, NORMAL_TRACK_GAP, NORMAL_TRACK_HEIGHT, } from './constants';
 import { alignmentCol, makeCoordinateMapper, structurePos, } from './coordinates';
 import { looksLikePlddt } from './extractPerResidueConfidence';
-import highlightResidueRange from './highlightResidueRange';
 import { runLocalAlignment } from './pairwiseAlignment';
 import { proteinAbbreviationMapping } from './proteinAbbreviationMapping';
 import { clickProteinToGenome, proteinRangeToGenomeMapping, proteinToGenomeMapping, } from './proteinToGenomeMapping';
@@ -330,6 +329,18 @@ const Structure = types
             ? undefined
             : { start, end: end + 1 };
     },
+    /**
+     * #getter
+     * The current hover as a 0-based half-open structure range. A feature-range
+     * hover (hoverStructureRange) takes priority over a single-residue hover
+     * (structureSeqHoverPos). Drives both the molstar 3D highlight and the
+     * genome highlight.
+     */
+    get hoverHighlightRange() {
+        const pos = this.structureSeqHoverPos;
+        return (this.hoverStructureRange ??
+            (pos === undefined ? undefined : { start: pos, end: pos + 1 }));
+    },
     /**
      * #getter
      * Persistent click selection in alignment coordinates, derived from
@@ -378,27 +389,14 @@ const Structure = types
     },
     /**
      * #getter
-     * Genome regions to highlight in the LGV based on the current hover.
-     * A feature-range hover (hoverStructureRange) takes priority over a
-     * single-residue hover (structureSeqHoverPos). Excludes hovers that
-     * originated from the genome view itself, so hovering the LGV doesn't
-     * echo a codon-width highlight back onto that same view.
+     * Genome regions to highlight in the LGV from the current hover. Excludes
+     * hovers that originated from the genome view itself, so hovering the LGV
+     * doesn't echo a codon-width highlight back onto that same view.
      */
     get hoverGenomeHighlights() {
-        if (self.hoverPosition?.source === 'genome') {
-            return [];
-        }
-        const range = this.hoverStructureRange;
-        if (range) {
-            return this.structureRangeToGenomeHighlight(range);
-        }
-        const structureSeqPos = this.structureSeqHoverPos;
-        return structureSeqPos === undefined
+        return self.hoverPosition?.source === 'genome'
             ? []
-            : this.structureRangeToGenomeHighlight({
-                start: structureSeqPos,
-                end: structureSeqPos + 1,
-            });
+            : this.structureRangeToGenomeHighlight(this.hoverHighlightRange);
     },
     /**
      * #getter
@@ -564,6 +562,20 @@ const Structure = types
 }))
     .actions(self => ({
     afterAttach() {
+        // Re-subscribe to a molstar click/hover behavior whenever the plugin
+        // becomes available; the subscription is disposed with the model.
+        const addInteractionListener = (kind, onUpdate) => {
+            addDisposer(self, autorun(async () => {
+                const { molstarPluginContext } = self;
+                if (molstarPluginContext) {
+                    addDisposer(self, await subscribeMolstarInteraction({
+                        plugin: molstarPluginContext,
+                        kind,
+                        onUpdate,
+                    }));
+                }
+            }));
+        };
         addDisposer(self, autorun(async () => {
             try {
                 const { userProvidedTranscriptSequence, structureSequences, exactMatch, alignmentAlgorithm, } = self;
@@ -611,89 +623,54 @@ const Structure = types
                 self.setGenomeHoveredPosition(undefined);
             }
         }));
-        addDisposer(self, autorun(async () => {
-            const { molstarPluginContext } = self;
-            if (molstarPluginContext) {
-                const dispose = await subscribeMolstarInteraction({
-                    plugin: molstarPluginContext,
-                    kind: 'click',
-                    onUpdate: info => {
-                        // Click only acts on positive matches; ignore clicks that
-                        // didn't land on a structure element.
-                        if (!info) {
-                            return;
-                        }
-                        self.setHoveredPosition(info);
-                        self.setSelectedFeatureId(undefined);
-                        clickProteinToGenome({
-                            model: self,
-                            structureSeqPos: info.structureSeqPos,
-                        }).catch((e) => {
-                            console.error(e);
-                            self.parentView.setError(e);
-                        });
-                    },
+        // Click only acts on positive matches; clicks that didn't land on a
+        // structure element are ignored.
+        addInteractionListener('click', info => {
+            if (info) {
+                self.setHoveredPosition(info);
+                self.setSelectedFeatureId(undefined);
+                clickProteinToGenome({
+                    model: self,
+                    structureSeqPos: info.structureSeqPos,
+                }).catch((e) => {
+                    console.error(e);
+                    self.parentView.setError(e);
                 });
-                addDisposer(self, dispose);
             }
-        }));
-        addDisposer(self, autorun(async () => {
-            const { molstarPluginContext } = self;
-            if (molstarPluginContext) {
-                const dispose = await subscribeMolstarInteraction({
-                    plugin: molstarPluginContext,
-                    kind: 'hover',
-                    onUpdate: info => {
-                        self.setHoveredPosition(info);
-                    },
-                });
-                addDisposer(self, dispose);
-            }
-        }));
+        });
+        addInteractionListener('hover', info => {
+            self.setHoveredPosition(info);
+        });
         addDisposer(self, autorun(async () => {
             const { showHighlight, structureSeqToTranscriptSeqPosition, molstarPluginContext, molstarStructure, } = self;
             if (molstarStructure &&
                 molstarPluginContext &&
                 structureSeqToTranscriptSeqPosition) {
-                if (showHighlight) {
-                    const residues = Object.keys(structureSeqToTranscriptSeqPosition).map(coord => +coord + 1);
-                    await applyLociInteractivityMultiple({
-                        structure: molstarStructure,
-                        residues,
-                        plugin: molstarPluginContext,
-                        mode: 'select',
-                    });
-                }
-                else {
-                    molstarPluginContext.managers.interactivity.lociSelects.deselectAll();
-                }
+                await setMolstarLoci({
+                    structure: molstarStructure,
+                    plugin: molstarPluginContext,
+                    channel: 'select',
+                    spec: showHighlight
+                        ? {
+                            kind: 'list',
+                            residues: Object.keys(structureSeqToTranscriptSeqPosition).map(coord => +coord),
+                        }
+                        : undefined,
+                });
             }
         }));
-        // Drive molstar hover-highlight state from the model. A feature-range
-        // hover (hoverStructureRange) takes priority over a single-residue
-        // hover (structureSeqHoverPos); otherwise clear.
+        // Drive molstar hover-highlight from the model's hoverHighlightRange.
         addDisposer(self, autorun(async () => {
-            const { molstarStructure, molstarPluginContext, hoverStructureRange, structureSeqHoverPos, } = self;
+            const { molstarStructure, molstarPluginContext, hoverHighlightRange } = self;
             if (molstarStructure && molstarPluginContext) {
-                if (hoverStructureRange) {
-                    await highlightResidueRange({
-                        structure: molstarStructure,
-                        plugin: molstarPluginContext,
-                        startResidue: hoverStructureRange.start + 1,
-                        endResidue: hoverStructureRange.end,
-                    });
-                }
-                else if (structureSeqHoverPos !== undefined) {
-                    await applyLociInteractivitySingle({
-                        structure: molstarStructure,
-                        plugin: molstarPluginContext,
-                        selectedResidue: structureSeqHoverPos,
-                        mode: 'highlight',
-                    });
-                }
-                else {
-                    molstarPluginContext.managers.interactivity.lociHighlights.clearHighlights();
-                }
+                await setMolstarLoci({
+                    structure: molstarStructure,
+                    plugin: molstarPluginContext,
+                    channel: 'highlight',
+                    spec: hoverHighlightRange
+                        ? { kind: 'range', ...hoverHighlightRange }
+                        : undefined,
+                });
             }
         }));
     },

package/dist/ProteinView/subscribeMolstarInteraction.d.ts

@@ -1,5 +1,13 @@
 import type { PluginContext } from 'molstar/lib/mol-plugin/context';
 export interface MolstarLocationInfo {
+    /**
+     * 0-based label position (label_seq_id - 1). This is the plugin's canonical
+     * structure coordinate: structureSequences, the coordinate maps, and the
+     * outbound highlight in setMolstarLoci are all label-based, so the inbound
+     * read must be too. For AlphaFold structures label_seq_id == auth_seq_id, but
+     * for PDB structures whose author numbering is offset or gapped they diverge,
+     * and reading auth_seq_id here would mis-map every hover/click.
+     */
     structureSeqPos: number;
     code: string;
     chain: string;

package/dist/ProteinView/subscribeMolstarInteraction.js

@@ -1,7 +1,7 @@
 import loadMolstar from './loadMolstar';
 function extractLocationInfo(molstar, location) {
     return {
-        structureSeqPos: molstar.StructureProperties.residue.auth_seq_id(location) - 1,
+        structureSeqPos: molstar.StructureProperties.residue.label_seq_id(location) - 1,
         code: molstar.StructureProperties.atom.label_comp_id(location),
         chain: molstar.StructureProperties.chain.auth_asym_id(location),
     };

package/dist/ProteinView/util.d.ts

@@ -1,4 +1,3 @@
-import type { Structure } from 'molstar/lib/mol-model/structure';
 interface HoveredState {
     hoverPosition: {
         coord: number;
@@ -6,9 +5,5 @@ interface HoveredState {
     };
 }
 export declare function checkHovered(hovered: unknown): hovered is HoveredState;
-export declare function getMolstarStructureSelection({ structure, selectedResidue, }: {
-    structure: Structure;
-    selectedResidue: number;
-}): Promise<import("molstar/lib/mol-model/structure").StructureSelection>;
 export declare function invertMap(arg: Record<number, number>): Record<number, number>;
 export {};

package/dist/ProteinView/util.js

@@ -1,4 +1,3 @@
-import loadMolstar from './loadMolstar';
 export function checkHovered(hovered) {
     return (!!hovered &&
         typeof hovered === 'object' &&
@@ -8,16 +7,6 @@ export function checkHovered(hovered) {
         'coord' in hovered.hoverPosition &&
         'refName' in hovered.hoverPosition);
 }
-export async function getMolstarStructureSelection({ structure, selectedResidue, }) {
-    const { Script } = await loadMolstar();
-    return Script.getStructureSelection(Q => Q.struct.generator.atomGroups({
-        'residue-test': Q.core.rel.eq([
-            Q.struct.atomProperty.macromolecular.label_seq_id(),
-            selectedResidue,
-        ]),
-        'group-by': Q.struct.atomProperty.macromolecular.residueKey(),
-    }), structure);
-}
 export function invertMap(arg) {
     return Object.fromEntries(Object.entries(arg).map(([a, b]) => [b, +a]));
 }