jbrowse-plugin-protein3d 0.4.11 → 0.4.12

package/dist/LaunchProteinView/hooks/useAlphaFoldDBSearch.js

@@ -35,7 +35,7 @@ export default function useAlphaFoldDBSearch({ feature, view, }) {
             : effectiveLookupMode === 'manual'
                 ? debouncedManualUniprotId
                 : undefined;
-    const { isLoading: isAlphaFoldLoading, error: alphaFoldError, url: alphaFoldUrl, confidenceUrl: alphaFoldConfidenceUrl, structureSequence: alphaFoldStructureSequence, } = useAlphaFoldData({
+    const { isLoading: isAlphaFoldLoading, isValidating: isAlphaFoldValidating, error: alphaFoldError, url: alphaFoldUrl, confidenceUrl: alphaFoldConfidenceUrl, structureSequence: alphaFoldStructureSequence, } = useAlphaFoldData({
         uniprotId: isSequenceMode ? undefined : uniprotId,
     });
     const { transcripts: transcriptOptions, isoformSequences, isLoading: isIsoformLoading, error: isoformError, selectedTranscriptId: effectiveTranscriptId, setSelectedTranscriptId: setUserSelection, selectedTranscript, selectedIsoform: userSelectedProteinSequence, } = useTranscriptIsoformSelection({
@@ -44,7 +44,7 @@ export default function useAlphaFoldDBSearch({ feature, view, }) {
         structureSequence: alphaFoldStructureSequence,
         resetKey: uniprotId,
     });
-    const { uniprotId: seqSearchUniprotId, cifUrl: seqSearchUrl, plddtDocUrl: seqSearchConfidenceUrl, structureSequence: seqSearchStructureSequence, isLoading: isSequenceSearchLoading, error: sequenceSearchError, } = useAlphaFoldSequenceSearch({
+    const { uniprotId: seqSearchUniprotId, cifUrl: seqSearchUrl, plddtDocUrl: seqSearchConfidenceUrl, structureSequence: seqSearchStructureSequence, isLoading: isSequenceSearchLoading, isValidating: isSequenceSearchValidating, error: sequenceSearchError, } = useAlphaFoldSequenceSearch({
         sequence: userSelectedProteinSequence?.seq,
         searchType: sequenceSearchType,
         enabled: isSequenceMode,
@@ -58,6 +58,13 @@ export default function useAlphaFoldDBSearch({ feature, view, }) {
         ? seqSearchStructureSequence
         : alphaFoldStructureSequence;
     const finalUniprotId = isSequenceMode ? seqSearchUniprotId : uniprotId;
+    // While a structure fetch is in flight, finalStructureSequence may still be
+    // the previous selection's sequence (keepPreviousData). Comparing that stale
+    // sequence to the freshly-selected transcript would give a wrong match, so
+    // the match is treated as unknown until the fetch settles.
+    const isStructureValidating = isSequenceMode
+        ? isSequenceSearchValidating
+        : isAlphaFoldValidating;
     const loadingStatuses = [
         isLookupLoading && 'Looking up UniProt ID',
         isIsoformLoading && 'Loading protein sequences from transcript isoforms',
@@ -104,7 +111,9 @@ export default function useAlphaFoldDBSearch({ feature, view, }) {
         showStructureSelectors: !!isoformSequences &&
             !!selectedTranscript &&
             (isSequenceMode || !!(finalStructureSequence && finalUniprotId)),
-        sequencesMatch: userSelectedProteinSequence?.seq && finalStructureSequence
+        sequencesMatch: !isStructureValidating &&
+            userSelectedProteinSequence?.seq &&
+            finalStructureSequence
             ? stripStopCodon(userSelectedProteinSequence.seq) ===
                 finalStructureSequence
             : undefined,

package/dist/LaunchProteinView/hooks/useAlphaFoldData.d.ts

@@ -2,6 +2,7 @@ export default function useAlphaFoldData({ uniprotId, }: {
     uniprotId?: string;
 }): {
     isLoading: boolean;
+    isValidating: boolean;
     error: any;
     url: string | undefined;
     confidenceUrl: string | undefined;

package/dist/LaunchProteinView/hooks/useAlphaFoldData.js

@@ -5,9 +5,10 @@ export default function useAlphaFoldData({ uniprotId, }) {
     const confidenceUrl = uniprotId
         ? getAlphaFoldConfidenceUrl(uniprotId)
         : undefined;
-    const { sequences, isLoading, error } = useStructureFileSequence({ url });
+    const { sequences, isLoading, isValidating, error } = useStructureFileSequence({ url });
     return {
         isLoading,
+        isValidating,
         error,
         url,
         confidenceUrl,

package/dist/LaunchProteinView/hooks/useAlphaFoldSequenceSearch.d.ts

@@ -19,6 +19,7 @@ export default function useAlphaFoldSequenceSearch({ sequence, searchType, enabl
     enabled?: boolean;
 }): {
     isLoading: boolean;
+    isValidating: boolean;
     result: SequenceSummaryResponse | undefined;
     uniprotId: string | undefined;
     cifUrl: string | undefined;

package/dist/LaunchProteinView/hooks/useAlphaFoldSequenceSearch.js

@@ -12,7 +12,7 @@ export default function useAlphaFoldSequenceSearch({ sequence, searchType, enabl
         const cleanSeq = stripStopCodon(sequence.toUpperCase());
         return searchType === 'md5' ? md5(cleanSeq) : cleanSeq;
     }, [sequence, searchType]);
-    const { data, error, isLoading } = useSWR(enabled && searchValue
+    const { data, error, isLoading, isValidating } = useSWR(enabled && searchValue
         ? `https://alphafold.ebi.ac.uk/api/sequence/summary?id=${encodeURIComponent(searchValue)}&type=${searchType}`
         : null, jsonfetch, {
         ...STATIC_SWR_OPTIONS,
@@ -20,6 +20,7 @@ export default function useAlphaFoldSequenceSearch({ sequence, searchType, enabl
     });
     return {
         isLoading,
+        isValidating,
         result: data,
         uniprotId: data?.uniprotAccession,
         cifUrl: data?.cifUrl,

package/dist/LaunchProteinView/hooks/useFoldseekSearch.js

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { DEFAULT_DATABASES, predict3Di, submitFoldseekSearch, waitForFoldseekResults, } from '../services/foldseekApi';
 export default function useFoldseekSearch() {
     const [results, setResults] = useState();
@@ -7,46 +7,81 @@ export default function useFoldseekSearch() {
     const [isPredicting, setIsPredicting] = useState(false);
     const [error, setError] = useState();
     const [statusMessage, setStatusMessage] = useState('');
+    // Aborts the in-flight request (3Di prediction or the up-to-3-minute Foldseek
+    // poll) when the dialog closes/unmounts, so it stops hitting the external API
+    // and stops updating dead state.
+    const abortRef = useRef(null);
+    useEffect(() => {
+        return () => {
+            abortRef.current?.abort();
+        };
+    }, []);
+    const startOperation = () => {
+        abortRef.current?.abort();
+        const controller = new AbortController();
+        abortRef.current = controller;
+        return controller.signal;
+    };
     const predictStructure = async (aaSequence) => {
+        const signal = startOperation();
         setIsPredicting(true);
         setError(undefined);
         setStatusMessage('Predicting 3Di structure...');
         try {
-            const result = await predict3Di(aaSequence);
+            const result = await predict3Di({ aaSequence, signal });
             setPredictData(result);
             return result;
         }
         catch (e) {
-            console.error(e);
-            setError(e);
+            if (!signal.aborted) {
+                console.error(e);
+                setError(e);
+            }
             return undefined;
         }
         finally {
-            setIsPredicting(false);
-            setStatusMessage('');
+            if (!signal.aborted) {
+                setIsPredicting(false);
+                setStatusMessage('');
+            }
         }
     };
     const search = async (aaSeq, di3Seq, databases = DEFAULT_DATABASES) => {
+        const signal = startOperation();
         setIsLoading(true);
         setError(undefined);
         setStatusMessage('Submitting search...');
         try {
-            const ticket = await submitFoldseekSearch(aaSeq, di3Seq, databases);
-            const result = await waitForFoldseekResults(ticket.id, setStatusMessage);
+            const ticket = await submitFoldseekSearch({
+                aaSequence: aaSeq,
+                di3Sequence: di3Seq,
+                databases,
+                signal,
+            });
+            const result = await waitForFoldseekResults({
+                ticketId: ticket.id,
+                onStatusChange: setStatusMessage,
+                signal,
+            });
             setResults(result);
             return result;
         }
         catch (e) {
-            console.error(e);
-            setError(e);
+            if (!signal.aborted) {
+                console.error(e);
+                setError(e);
+            }
             return undefined;
         }
         finally {
-            setIsLoading(false);
-            setStatusMessage('');
+            if (!signal.aborted) {
+                setIsLoading(false);
+                setStatusMessage('');
+            }
         }
     };
     const reset = () => {
+        abortRef.current?.abort();
         setResults(undefined);
         setPredictData(undefined);
         setError(undefined);

package/dist/LaunchProteinView/hooks/useStructureFileSequence.d.ts

@@ -4,5 +4,6 @@ export default function useStructureFileSequence({ file, url, }: {
 }): {
     error: any;
     isLoading: boolean;
+    isValidating: boolean;
     sequences: string[] | undefined;
 };

package/dist/LaunchProteinView/hooks/useStructureFileSequence.js

@@ -33,7 +33,7 @@ export default function useStructureFileSequence({ file, url, }) {
         : url
             ? ['structure-url', url]
             : null;
-    const { data, error, isLoading } = useSWR(key, async () => {
+    const { data, error, isLoading, isValidating } = useSWR(key, async () => {
         const seq = await fetchSequences({ file, url });
         if (!seq) {
             throw new Error('no sequences detected in file');
@@ -43,5 +43,8 @@ export default function useStructureFileSequence({ file, url, }) {
         ...STATIC_SWR_OPTIONS,
         keepPreviousData: true,
     });
-    return { error, isLoading, sequences: data };
+    // isValidating distinguishes "fetching for the current key" from the stale
+    // data keepPreviousData keeps around during a key change. Consumers comparing
+    // this sequence against another need it to avoid matching against stale data.
+    return { error, isLoading, isValidating, sequences: data };
 }

package/dist/LaunchProteinView/services/foldseekApi.d.ts

@@ -64,12 +64,23 @@ export interface FoldseekResult {
     };
     results: FoldseekDatabaseResult[];
 }
-export declare function predict3Di(aaSequence: string): Promise<{
+export declare function predict3Di({ aaSequence, signal, }: {
+    aaSequence: string;
+    signal?: AbortSignal;
+}): Promise<{
     aaSequence: string;
     di3Sequence: string;
 }>;
-export declare function submitFoldseekSearch(aaSequence: string, di3Sequence: string, databases: FoldseekDatabaseId[]): Promise<FoldseekTicketResponse>;
-export declare function pollFoldseekStatus(ticketId: string): Promise<FoldseekTicketResponse>;
+export declare function submitFoldseekSearch({ aaSequence, di3Sequence, databases, signal, }: {
+    aaSequence: string;
+    di3Sequence: string;
+    databases: FoldseekDatabaseId[];
+    signal?: AbortSignal;
+}): Promise<FoldseekTicketResponse>;
+export declare function pollFoldseekStatus({ ticketId, signal, }: {
+    ticketId: string;
+    signal?: AbortSignal;
+}): Promise<FoldseekTicketResponse>;
 interface FoldseekApiResponse {
     mode: string;
     queries: {
@@ -82,6 +93,13 @@ interface FoldseekApiResponse {
         taxonomyreports: unknown[];
     }[];
 }
-export declare function getFoldseekResults(ticketId: string): Promise<FoldseekApiResponse>;
-export declare function waitForFoldseekResults(ticketId: string, onStatusChange?: (status: string) => void): Promise<FoldseekResult>;
+export declare function getFoldseekResults({ ticketId, signal, }: {
+    ticketId: string;
+    signal?: AbortSignal;
+}): Promise<FoldseekApiResponse>;
+export declare function waitForFoldseekResults({ ticketId, onStatusChange, signal, }: {
+    ticketId: string;
+    onStatusChange?: (status: string) => void;
+    signal?: AbortSignal;
+}): Promise<FoldseekResult>;
 export {};

package/dist/LaunchProteinView/services/foldseekApi.js

@@ -13,7 +13,7 @@ export const DEFAULT_DATABASES = [
     'pdb100',
     'afdb-swissprot',
 ];
-export async function predict3Di(aaSequence) {
+export async function predict3Di({ aaSequence, signal, }) {
     // Clean the sequence - remove FASTA header, whitespace, stop codons, and non-AA chars
     const cleanSequence = aaSequence
         .split('\n')
@@ -23,7 +23,7 @@ export async function predict3Di(aaSequence) {
         .replace(/\*/g, '') // Remove stop codons before querying 3Di
         .toUpperCase()
         .replace(/[^ACDEFGHIKLMNPQRSTVWY]/g, ''); // Keep only valid amino acids
-    const response = await fetch(`https://3di.foldseek.com/predict/${encodeURIComponent(cleanSequence)}`);
+    const response = await fetch(`https://3di.foldseek.com/predict/${encodeURIComponent(cleanSequence)}`, { signal });
     if (!response.ok) {
         throw new Error(`3Di prediction failed: ${response.status} ${await response.text()}`);
     }
@@ -35,7 +35,7 @@ export async function predict3Di(aaSequence) {
         .trim();
     return { aaSequence: cleanSequence, di3Sequence: cleanDi3 };
 }
-export async function submitFoldseekSearch(aaSequence, di3Sequence, databases) {
+export async function submitFoldseekSearch({ aaSequence, di3Sequence, databases, signal, }) {
     // Submit both AA and 3Di sequences (with trailing newline like working example)
     const fastaContent = `>query\n${aaSequence}\n>3DI\n${di3Sequence}\n`;
     const params = new URLSearchParams();
@@ -51,14 +51,18 @@ export async function submitFoldseekSearch(aaSequence, di3Sequence, databases) {
             'Content-Type': 'application/x-www-form-urlencoded',
         },
         body: params,
+        signal,
     });
-    const responseData = await response.json();
+    // Read the body as text first so a non-JSON error page (e.g. a gateway/500
+    // HTML response) surfaces the real status instead of an opaque JSON
+    // SyntaxError that hides it.
+    const text = await response.text();
     if (!response.ok) {
-        throw new Error(`Foldseek submission failed: ${response.status} ${JSON.stringify(responseData)}`);
+        throw new Error(`Foldseek submission failed: ${response.status} ${text}`);
     }
-    return responseData;
+    return JSON.parse(text);
 }
-export async function pollFoldseekStatus(ticketId) {
+export async function pollFoldseekStatus({ ticketId, signal, }) {
     // Use the /tickets endpoint (plural) with POST
     const params = new URLSearchParams();
     params.append('tickets[]', ticketId);
@@ -68,6 +72,7 @@ export async function pollFoldseekStatus(ticketId) {
             'Content-Type': 'application/x-www-form-urlencoded',
         },
         body: params,
+        signal,
     });
     if (!response.ok) {
         throw new Error(`Failed to poll ticket status: ${response.status}`);
@@ -80,21 +85,24 @@ export async function pollFoldseekStatus(ticketId) {
     }
     return result;
 }
-export async function getFoldseekResults(ticketId) {
-    return jsonfetch(`https://search.foldseek.com/api/result/${ticketId}/0`);
+export async function getFoldseekResults({ ticketId, signal, }) {
+    return jsonfetch(`https://search.foldseek.com/api/result/${ticketId}/0`, { signal });
 }
-export async function waitForFoldseekResults(ticketId, onStatusChange) {
+export async function waitForFoldseekResults({ ticketId, onStatusChange, signal, }) {
     const maxAttempts = 180;
     let attempts = 0;
     while (attempts < maxAttempts) {
-        const status = await pollFoldseekStatus(ticketId);
+        if (signal?.aborted) {
+            throw signal.reason;
+        }
+        const status = await pollFoldseekStatus({ ticketId, signal });
         if (status.status === 'ERROR') {
             console.error('[Foldseek] Search error:', status);
             throw new Error(`Foldseek search failed: ${status.error ?? 'Unknown error'}`);
         }
         if (status.status === 'COMPLETE') {
             onStatusChange?.('Fetching results...');
-            const apiResponse = await getFoldseekResults(ticketId);
+            const apiResponse = await getFoldseekResults({ ticketId, signal });
             // Transform API response to our format
             const results = {
                 query: apiResponse.queries[0] ?? { header: '', sequence: '' },
@@ -106,7 +114,7 @@ export async function waitForFoldseekResults(ticketId, onStatusChange) {
             return results;
         }
         onStatusChange?.(`Search ${status.status.toLowerCase()}... (${attempts + 1}s)`);
-        await timeout(1000);
+        await timeout(1000, signal);
         attempts++;
     }
     throw new Error('Foldseek search timed out');

package/dist/ProteinView/applyColorTheme.d.ts

@@ -31,7 +31,7 @@ export declare const COLOR_SCHEMES: readonly [{
     readonly label: "Molecule type";
 }];
 export type ProteinColorScheme = (typeof COLOR_SCHEMES)[number]['value'];
-export declare const COLOR_SCHEME_VALUES: ("uncertainty" | "hydrophobicity" | "chain-id" | "molecule-type" | "residue-name" | "secondary-structure" | "default" | "plddt-confidence")[];
+export declare const COLOR_SCHEME_VALUES: ("default" | "plddt-confidence" | "chain-id" | "secondary-structure" | "hydrophobicity" | "residue-name" | "uncertainty" | "molecule-type")[];
 export declare function applyColorTheme({ plugin, colorScheme, }: {
     plugin: PluginContext;
     colorScheme: ProteinColorScheme;

package/dist/ProteinView/loadStructureData.d.ts

@@ -0,0 +1,18 @@
+import type { PluginContext } from 'molstar/lib/mol-plugin/context';
+export interface StructureData {
+    sequences?: string[];
+    confidence?: number[];
+}
+/**
+ * Loads a structure (from inline data or a URL) into the given Molstar plugin
+ * and pulls out its per-chain sequences and per-residue confidence. Pure with
+ * respect to the model — it only touches the plugin and returns plain data, so
+ * callers own the decision of whether/where to store the result.
+ */
+export declare function loadStructureData({ structure, plugin, }: {
+    structure: {
+        data?: string;
+        url?: string;
+    };
+    plugin: PluginContext;
+}): Promise<StructureData>;

package/dist/ProteinView/loadStructureData.js

@@ -0,0 +1,22 @@
+import { addStructureFromData } from './addStructureFromData';
+import { addStructureFromURL } from './addStructureFromURL';
+import { extractPerResidueConfidence } from './extractPerResidueConfidence';
+import { extractStructureSequences } from './extractStructureSequences';
+/**
+ * Loads a structure (from inline data or a URL) into the given Molstar plugin
+ * and pulls out its per-chain sequences and per-residue confidence. Pure with
+ * respect to the model — it only touches the plugin and returns plain data, so
+ * callers own the decision of whether/where to store the result.
+ */
+export async function loadStructureData({ structure, plugin, }) {
+    const { model } = structure.data
+        ? await addStructureFromData({ data: structure.data, plugin })
+        : structure.url
+            ? await addStructureFromURL({ url: structure.url, plugin })
+            : { model: undefined };
+    const sequences = model ? extractStructureSequences(model) : undefined;
+    const confidence = model
+        ? extractPerResidueConfidence(model, sequences?.[0]?.length)
+        : undefined;
+    return { sequences, confidence };
+}

package/dist/ProteinView/model.d.ts

@@ -19,7 +19,7 @@ declare function stateModelFactory(): import("@jbrowse/mobx-state-tree").IModelT
     id: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").ISimpleType<string>, [undefined]>;
     displayName: import("@jbrowse/mobx-state-tree").IMaybe<import("@jbrowse/mobx-state-tree").ISimpleType<string>>;
     minimized: import("@jbrowse/mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
-}, "colorScheme" | "structures" | "type" | "id" | "init" | "zoomToBaseLevel" | "alignmentAlgorithm" | "connectedMsaViewId" | "showHighlight" | "showAlignment" | "showProteinTracks" | "autoScrollAlignment" | "compactTracks" | "showControls" | "height"> & {
+}, "colorScheme" | "structures" | "id" | "type" | "init" | "zoomToBaseLevel" | "alignmentAlgorithm" | "connectedMsaViewId" | "showHighlight" | "showAlignment" | "showProteinTracks" | "autoScrollAlignment" | "compactTracks" | "showControls" | "height"> & {
     id: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").ISimpleType<string>, [undefined]>;
     type: import("@jbrowse/mobx-state-tree").ISimpleType<"ProteinView">;
     structures: import("@jbrowse/mobx-state-tree").IArrayType<import("@jbrowse/mobx-state-tree").IModelType<{
@@ -641,7 +641,7 @@ declare function stateModelFactory(): import("@jbrowse/mobx-state-tree").IModelT
     showHighlight: import("@jbrowse/mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
     zoomToBaseLevel: import("@jbrowse/mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
     autoScrollAlignment: import("@jbrowse/mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
-    colorScheme: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").ISimpleType<"uncertainty" | "hydrophobicity" | "chain-id" | "molecule-type" | "residue-name" | "secondary-structure" | "default" | "plddt-confidence">, [undefined]>;
+    colorScheme: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").ISimpleType<"default" | "plddt-confidence" | "chain-id" | "secondary-structure" | "hydrophobicity" | "residue-name" | "uncertainty" | "molecule-type">, [undefined]>;
     showAlignment: import("@jbrowse/mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
     showProteinTracks: import("@jbrowse/mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
     compactTracks: import("@jbrowse/mobx-state-tree").IType<boolean | undefined, boolean, boolean>;

package/dist/ProteinView/model.js

@@ -4,11 +4,9 @@ import { addDisposer, types } from '@jbrowse/mobx-state-tree';
 import SettingsIcon from '@mui/icons-material/Settings';
 import Visibility from '@mui/icons-material/Visibility';
 import { autorun } from 'mobx';
-import { addStructureFromData } from './addStructureFromData';
-import { addStructureFromURL } from './addStructureFromURL';
 import { COLOR_SCHEMES, COLOR_SCHEME_VALUES, applyColorTheme, } from './applyColorTheme';
-import { extractPerResidueConfidence } from './extractPerResidueConfidence';
-import { extractStructureSequences } from './extractStructureSequences';
+import { loadStructureData } from './loadStructureData';
+import { makeStructureLoader } from './structureLoader';
 import Structure from './structureModel';
 import { superposeStructures } from './superposeStructures';
 import { DEFAULT_ALIGNMENT_ALGORITHM } from './types';
@@ -21,18 +19,6 @@ const PERSISTED_SETTINGS = [
     'autoScrollAlignment',
     'compactTracks',
 ];
-async function loadStructureData({ structure, plugin, }) {
-    const { model } = structure.data
-        ? await addStructureFromData({ data: structure.data, plugin })
-        : structure.url
-            ? await addStructureFromURL({ url: structure.url, plugin })
-            : { model: undefined };
-    const sequences = model ? extractStructureSequences(model) : undefined;
-    const confidence = model
-        ? extractPerResidueConfidence(model, sequences?.[0]?.length)
-        : undefined;
-    return { sequences, confidence };
-}
 /**
  * #stateModel Protein3dViewPlugin
  * extends
@@ -347,26 +333,10 @@ function stateModelFactory() {
                     });
                 }
             }));
-            addDisposer(self, autorun(async () => {
-                const { structures, molstarPluginContext } = self;
-                if (molstarPluginContext) {
-                    for (const structure of structures) {
-                        if (!structure.loadedToMolstar) {
-                            try {
-                                structure.setStructureData(await loadStructureData({
-                                    structure,
-                                    plugin: molstarPluginContext,
-                                }));
-                                structure.setLoadedToMolstar(true);
-                            }
-                            catch (e) {
-                                self.setError(e);
-                                console.error(e);
-                            }
-                        }
-                    }
-                }
-            }));
+            // Load structures into Molstar as they appear or whenever the plugin
+            // context changes. See makeStructureLoader for why the autorun body is
+            // synchronous and how it guards against duplicate/stale loads.
+            addDisposer(self, autorun(makeStructureLoader(self)));
         },
     }))
         .views(self => ({

package/dist/ProteinView/structureLoader.d.ts

@@ -0,0 +1,30 @@
+import type StructureModel from './structureModel';
+import type { IAnyStateTreeNode, Instance } from '@jbrowse/mobx-state-tree';
+import type { PluginContext } from 'molstar/lib/mol-plugin/context';
+type StructureInstance = Instance<typeof StructureModel>;
+export type StructureLoaderHost = IAnyStateTreeNode & {
+    readonly molstarPluginContext: PluginContext | undefined;
+    readonly structures: StructureInstance[];
+    setError: (error: unknown) => void;
+};
+/**
+ * Builds the body of the autorun that loads structures into Molstar.
+ *
+ * The returned callback is synchronous on purpose: MobX only tracks
+ * observables read before the first `await`, so an async autorun body would
+ * stop reacting to later structures/plugin changes. Instead it reads its
+ * dependencies synchronously and dispatches a guarded fire-and-forget load for
+ * each structure that is neither loaded nor already loading. The guards handle
+ * the lifecycle hazards of an external GPU resource:
+ *
+ *   - a non-observable in-flight Set stops a re-entrant run (a new structure
+ *     pushed, or the plugin swapped mid-load) from starting a duplicate load of
+ *     the same structure;
+ *   - a load whose plugin was replaced or whose model was destroyed while
+ *     awaiting has its result discarded rather than written into a torn-down
+ *     plugin;
+ *   - if the plugin was merely swapped (e.g. a view remount), the structure is
+ *     reloaded into the current plugin so it isn't left stranded unloaded.
+ */
+export declare function makeStructureLoader(host: StructureLoaderHost): () => void;
+export {};

package/dist/ProteinView/structureLoader.js

@@ -0,0 +1,58 @@
+import { isAlive } from '@jbrowse/mobx-state-tree';
+import { loadStructureData } from './loadStructureData';
+/**
+ * Builds the body of the autorun that loads structures into Molstar.
+ *
+ * The returned callback is synchronous on purpose: MobX only tracks
+ * observables read before the first `await`, so an async autorun body would
+ * stop reacting to later structures/plugin changes. Instead it reads its
+ * dependencies synchronously and dispatches a guarded fire-and-forget load for
+ * each structure that is neither loaded nor already loading. The guards handle
+ * the lifecycle hazards of an external GPU resource:
+ *
+ *   - a non-observable in-flight Set stops a re-entrant run (a new structure
+ *     pushed, or the plugin swapped mid-load) from starting a duplicate load of
+ *     the same structure;
+ *   - a load whose plugin was replaced or whose model was destroyed while
+ *     awaiting has its result discarded rather than written into a torn-down
+ *     plugin;
+ *   - if the plugin was merely swapped (e.g. a view remount), the structure is
+ *     reloaded into the current plugin so it isn't left stranded unloaded.
+ */
+export function makeStructureLoader(host) {
+    const loadingStructures = new Set();
+    function loadInto(structure, plugin) {
+        loadingStructures.add(structure);
+        loadStructureData({ structure, plugin })
+            .then(data => {
+            const current = isAlive(structure)
+                ? host.molstarPluginContext
+                : undefined;
+            if (current === plugin) {
+                structure.setStructureData(data);
+                structure.setLoadedToMolstar(true);
+            }
+            loadingStructures.delete(structure);
+            if (current && current !== plugin && !structure.loadedToMolstar) {
+                loadInto(structure, current);
+            }
+        })
+            .catch((e) => {
+            loadingStructures.delete(structure);
+            if (isAlive(host)) {
+                host.setError(e);
+                console.error(e);
+            }
+        });
+    }
+    return function loadPendingStructures() {
+        const { structures, molstarPluginContext } = host;
+        if (molstarPluginContext) {
+            for (const structure of structures) {
+                if (!structure.loadedToMolstar && !loadingStructures.has(structure)) {
+                    loadInto(structure, molstarPluginContext);
+                }
+            }
+        }
+    };
+}

package/dist/config.json

@@ -2,7 +2,7 @@
   "plugins": [
     {
       "name": "Protein3d",
-      "url": "https://unpkg.com/jbrowse-plugin-protein3d/dist/jbrowse-plugin-protein3d.umd.production.min.js"
+      "url": "https://jbrowse.org/plugins/jbrowse-plugin-protein3d/0.4.12/dist/jbrowse-plugin-protein3d.umd.production.min.js"
     }
   ],
   "assemblies": [

package/dist/fetchUtils.d.ts

@@ -1,3 +1,3 @@
 export declare function myfetch(url: string, args?: RequestInit): Promise<Response>;
 export declare function jsonfetch<T = unknown>(url: string, args?: RequestInit): Promise<T>;
-export declare function timeout(time: number): Promise<unknown>;
+export declare function timeout(time: number, signal?: AbortSignal): Promise<void>;

package/dist/fetchUtils.js

@@ -9,6 +9,22 @@ export async function jsonfetch(url, args) {
     const response = await myfetch(url, args);
     return response.json();
 }
-export function timeout(time) {
-    return new Promise(res => setTimeout(res, time));
+function abortError(signal) {
+    return signal.reason instanceof Error
+        ? signal.reason
+        : new Error('Aborted', { cause: signal.reason });
+}
+export function timeout(time, signal) {
+    return new Promise((resolve, reject) => {
+        if (signal?.aborted) {
+            reject(abortError(signal));
+        }
+        else {
+            const id = setTimeout(resolve, time);
+            signal?.addEventListener('abort', () => {
+                clearTimeout(id);
+                reject(abortError(signal));
+            }, { once: true });
+        }
+    });
 }