jbrowse-plugin-protein3d 0.5.0 → 0.5.2

package/dist/LaunchProteinViewExtensionPoint/index.js

@@ -7,7 +7,7 @@ export default function LaunchProteinViewExtensionPointF(pluginManager) {
     // handlers and ignores the return value. Casting away the signature
     // mismatch rather than fabricating a fake return.
     // @ts-expect-error
-    async ({ session, url, uniprotId, transcriptId, userProvidedTranscriptSequence, feature, connectedViewId, connectedView, alignmentAlgorithm, displayName, height, showControls, showHighlight, zoomToBaseLevel, sideBySide, }) => {
+    async ({ session, url, uniprotId, transcriptId, userProvidedTranscriptSequence, feature, connectedViewId, connectedView, alignmentAlgorithm, displayName, height, showControls, showHighlight, zoomToBaseLevel, sideBySide, initialSelection, }) => {
         // Short-URL form: `uniprotId` + `transcriptId` + `connectedView` (no
         // explicit `url`/`feature`/sequence). Derive the structure URL, the
         // transcript feature, and the translated sequence from the connected
@@ -67,6 +67,7 @@ export default function LaunchProteinViewExtensionPointF(pluginManager) {
                         '',
                     feature: resolved?.feature ?? feature,
                     connectedViewId: resolvedConnectedViewId,
+                    initialSelection,
                 },
             ],
         });

package/dist/ProteinView/components/ProteinAlignment.js

@@ -27,6 +27,7 @@ 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 { data: featureData, isLoading: featureLoading, error: featureError, } = useProteinFeatureTrackData(model, uniprotId);
     useEffect(() => autorun(() => {
         const container = containerRef.current;
@@ -40,6 +41,19 @@ const ProteinAlignment = observer(function ProteinAlignment({ model, }) {
             });
         }
     }), [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.
+    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 });
+        }
+    }), [model]);
     if (!pairwiseAlignment) {
         return React.createElement("div", null, "No pairwiseAlignment");
     }

package/dist/ProteinView/model.d.ts

@@ -29,6 +29,16 @@ declare function stateModelFactory(): import("@jbrowse/mobx-state-tree").IModelT
         pairwiseAlignment: import("@jbrowse/mobx-state-tree").IType<import("../mappings").PairwiseAlignment | undefined, import("../mappings").PairwiseAlignment | undefined, import("../mappings").PairwiseAlignment | undefined>;
         feature: import("@jbrowse/mobx-state-tree").IType<import("@jbrowse/core/util").SimpleFeatureSerialized | undefined, import("@jbrowse/core/util").SimpleFeatureSerialized | undefined, import("@jbrowse/core/util").SimpleFeatureSerialized | undefined>;
         userProvidedTranscriptSequence: import("@jbrowse/mobx-state-tree").ISimpleType<string>;
+        initialSelection: import("@jbrowse/mobx-state-tree").IType<{
+            start: number;
+            end: number;
+        } | undefined, {
+            start: number;
+            end: number;
+        } | undefined, {
+            start: number;
+            end: number;
+        } | undefined>;
     }, {
         clickedStructureRange: {
             start: number;
@@ -767,6 +777,16 @@ declare function stateModelFactory(): import("@jbrowse/mobx-state-tree").IModelT
         pairwiseAlignment: import("@jbrowse/mobx-state-tree").IType<import("../mappings").PairwiseAlignment | undefined, import("../mappings").PairwiseAlignment | undefined, import("../mappings").PairwiseAlignment | undefined>;
         feature: import("@jbrowse/mobx-state-tree").IType<import("@jbrowse/core/util").SimpleFeatureSerialized | undefined, import("@jbrowse/core/util").SimpleFeatureSerialized | undefined, import("@jbrowse/core/util").SimpleFeatureSerialized | undefined>;
         userProvidedTranscriptSequence: import("@jbrowse/mobx-state-tree").ISimpleType<string>;
+        initialSelection: import("@jbrowse/mobx-state-tree").IType<{
+            start: number;
+            end: number;
+        } | undefined, {
+            start: number;
+            end: number;
+        } | undefined, {
+            start: number;
+            end: number;
+        } | undefined>;
     }> & {
         clickedStructureRange: {
             start: number;
@@ -1384,6 +1404,16 @@ declare function stateModelFactory(): import("@jbrowse/mobx-state-tree").IModelT
         pairwiseAlignment: import("@jbrowse/mobx-state-tree").IType<import("../mappings").PairwiseAlignment | undefined, import("../mappings").PairwiseAlignment | undefined, import("../mappings").PairwiseAlignment | undefined>;
         feature: import("@jbrowse/mobx-state-tree").IType<import("@jbrowse/core/util").SimpleFeatureSerialized | undefined, import("@jbrowse/core/util").SimpleFeatureSerialized | undefined, import("@jbrowse/core/util").SimpleFeatureSerialized | undefined>;
         userProvidedTranscriptSequence: import("@jbrowse/mobx-state-tree").ISimpleType<string>;
+        initialSelection: import("@jbrowse/mobx-state-tree").IType<{
+            start: number;
+            end: number;
+        } | undefined, {
+            start: number;
+            end: number;
+        } | undefined, {
+            start: number;
+            end: number;
+        } | undefined>;
     }, {
         clickedStructureRange: {
             start: number;

package/dist/ProteinView/structureModel.d.ts

@@ -48,6 +48,24 @@ declare const Structure: import("@jbrowse/mobx-state-tree").IModelType<{
      * #property
      */
     userProvidedTranscriptSequence: import("@jbrowse/mobx-state-tree").ISimpleType<string>;
+    /**
+     * #property
+     * Declarative seed for the persistent domain selection: a 0-based,
+     * half-open structure-residue range `{ start, end }` lit on load exactly as
+     * if the user had clicked that domain — magenta in the 3D structure, a band
+     * on the connected genome view, and the range in the alignment. Lets a
+     * session spec open with a domain pre-highlighted, with no click.
+     */
+    initialSelection: import("@jbrowse/mobx-state-tree").IType<{
+        start: number;
+        end: number;
+    } | undefined, {
+        start: number;
+        end: number;
+    } | undefined, {
+        start: number;
+        end: number;
+    } | undefined>;
 }, {
     /**
      * #volatile

package/dist/ProteinView/structureModel.js

@@ -41,6 +41,15 @@ const Structure = types
      * #property
      */
     userProvidedTranscriptSequence: types.string,
+    /**
+     * #property
+     * Declarative seed for the persistent domain selection: a 0-based,
+     * half-open structure-residue range `{ start, end }` lit on load exactly as
+     * if the user had clicked that domain — magenta in the 3D structure, a band
+     * on the connected genome view, and the range in the alignment. Lets a
+     * session spec open with a domain pre-highlighted, with no click.
+     */
+    initialSelection: types.frozen(),
 })
     .volatile(() => ({
     /**
@@ -562,6 +571,16 @@ const Structure = types
 }))
     .actions(self => ({
     afterAttach() {
+        // Seed the persistent selection from a declarative `initialSelection`, so
+        // a session spec can open with a domain pre-lit. clickedStructureRange is
+        // the single source of truth the 3D/genome/alignment highlights derive
+        // from; the genome-band and alignment getters recompute reactively once
+        // the connected view + mapping resolve, and the molstar select autorun
+        // below lights it once the structure loads. A later user click overwrites
+        // it normally.
+        if (self.initialSelection) {
+            self.setClickedStructureRange(self.initialSelection);
+        }
         // Re-subscribe to a molstar click/hover behavior whenever the plugin
         // becomes available; the subscription is disposed with the model.
         const addInteractionListener = (kind, onUpdate) => {
@@ -641,8 +660,15 @@ const Structure = types
         addInteractionListener('hover', info => {
             self.setHoveredPosition(info);
         });
+        // Drive the molstar 'select' channel (the persistent magenta selection)
+        // reactively from a single source of truth: a clicked/declarative domain
+        // range takes priority, else the whole alignment-covered set when
+        // showHighlight is on, else nothing. Centralizing it here (rather than
+        // only applying the clicked range imperatively from the feature bar) lets
+        // a declarative `initialSelection` seed light the 3D structure the same
+        // way a click does, with no race against this autorun.
         addDisposer(self, autorun(async () => {
-            const { showHighlight, structureSeqToTranscriptSeqPosition, molstarPluginContext, molstarStructure, } = self;
+            const { showHighlight, clickedStructureRange, structureSeqToTranscriptSeqPosition, molstarPluginContext, molstarStructure, } = self;
             if (molstarStructure &&
                 molstarPluginContext &&
                 structureSeqToTranscriptSeqPosition) {
@@ -650,12 +676,14 @@ const Structure = types
                     structure: molstarStructure,
                     plugin: molstarPluginContext,
                     channel: 'select',
-                    spec: showHighlight
-                        ? {
-                            kind: 'list',
-                            residues: Object.keys(structureSeqToTranscriptSeqPosition).map(coord => +coord),
-                        }
-                        : undefined,
+                    spec: clickedStructureRange
+                        ? { kind: 'range', ...clickedStructureRange }
+                        : showHighlight
+                            ? {
+                                kind: 'list',
+                                residues: Object.keys(structureSeqToTranscriptSeqPosition).map(coord => +coord),
+                            }
+                            : undefined,
                 });
             }
         }));

package/dist/ProteinView/useProteinView.js

@@ -17,7 +17,7 @@ export default function useProteinView({ showControls, model, }) {
                 if (!parentRef.current) {
                     return;
                 }
-                const { GeometryExport, MAQualityAssessment, PluginConfig, PluginSpec, DefaultPluginUISpec, createPluginUI, renderReact18, } = await loadMolstar();
+                const { Color, GeometryExport, MAQualityAssessment, PluginConfig, PluginSpec, DefaultPluginUISpec, createPluginUI, renderReact18, } = await loadMolstar();
                 const host = document.createElement('div');
                 parentRef.current.append(host);
                 state.host = host;
@@ -44,6 +44,14 @@ export default function useProteinView({ showControls, model, }) {
                     },
                 });
                 await created.initialized;
+                // Make the persistent selection marking clearly visible (a domain
+                // click, or a declarative initialSelection): molstar's default select
+                // color is a subtle teal that blends into a green/pLDDT cartoon, so a
+                // highlighted domain reads as no highlight at all. Magenta contrasts
+                // against every built-in color scheme.
+                created.canvas3d?.setProps({
+                    renderer: { selectColor: Color(0xff00ff) },
+                });
                 if (state.cancelled) {
                     created.dispose();
                     host.remove();