jbrowse-plugin-protein3d 0.11.2 → 0.12.0

package/dist/LaunchProteinView/codingFeature.js

@@ -0,0 +1,33 @@
+// Copied from @jbrowse/core's featureTypes: the barrel export reads undefined
+// on a v4 host, and the deep path is not in core's exports map.
+const GENE_LIKE_TYPE = /gene(_segment)?$|rna$|transcript/;
+export function isGeneLikeType(type) {
+    return type !== undefined && GENE_LIKE_TYPE.test(type.toLowerCase());
+}
+export function isCDS(feature) {
+    return feature.get('type')?.toLowerCase() === 'cds';
+}
+function hasDirectCDS(feature) {
+    return !!feature.get('subfeatures')?.some(isCDS);
+}
+// The transcripts the translator can read: the feature itself when its CDS
+// records hang directly off it, else each gene-like child that carries them.
+// One definition serves the menu gate, the isoform picker and the translator,
+// so the menu never promises a protein the dialog cannot compute.
+export function codingTranscripts(feature) {
+    return hasDirectCDS(feature)
+        ? [feature]
+        : (feature.get('subfeatures') ?? []).filter(f => isGeneLikeType(f.get('type')) && hasDirectCDS(f));
+}
+export function isCodingFeature(feature) {
+    return codingTranscripts(feature).length > 0;
+}
+// The outermost gene-like ancestor, so a click on an isoform opens the dialog
+// on the gene with every transcript to choose from, as the canvas host does.
+export function geneLikeRoot(feature) {
+    let root = feature;
+    for (let parent = root.parent?.(); parent && isGeneLikeType(parent.get('type')); parent = parent.parent?.()) {
+        root = parent;
+    }
+    return root;
+}

package/dist/LaunchProteinView/components/AlphaFoldDBSearch.js

@@ -1,13 +1,13 @@
 import React from 'react';
 import { ErrorMessage, LoadingEllipses } from '@jbrowse/core/ui';
-import { DialogActions, DialogContent, TextField, Typography, } from '@mui/material';
+import { DialogActions, DialogContent, Typography } from '@mui/material';
 import { observer } from 'mobx-react';
 import { makeStyles } from 'tss-react/mui';
 import AlphaFoldDBSearchStatus from './AlphaFoldDBSearchStatus';
-import IdentifierSelector from './IdentifierSelector';
+import PartialFailureNotice from './PartialFailureNotice';
 import ProteinViewActions from './ProteinViewActions';
 import TranscriptSelector from './TranscriptSelector';
-import UniProtIdInput from './UniProtIdInput';
+import UniProtLookupControls from './UniProtLookupControls';
 import UniProtResultsTable from './UniProtResultsTable';
 import ExternalLink from '../../components/ExternalLink';
 import useAlphaFoldDBSearch from '../hooks/useAlphaFoldDBSearch';
@@ -27,16 +27,10 @@ const useStyles = makeStyles()({
         gap: 20,
         alignItems: 'flex-start',
     },
-    endRow: {
-        display: 'flex',
-        flexDirection: 'row',
-        gap: 12,
-        alignItems: 'flex-start',
-    },
 });
-const AlphaFoldDBSearch = observer(function AlphaFoldDBSearch({ feature, session, view, handleClose, alignmentAlgorithm, onAlignmentAlgorithmChange, }) {
+const AlphaFoldDBSearch = observer(function AlphaFoldDBSearch({ feature, session, view, handleClose, lookup, sideBySide, onSideBySideChange, }) {
     const { classes } = useStyles();
-    const state = useAlphaFoldDBSearch({ feature, view });
+    const state = useAlphaFoldDBSearch({ feature, view, lookup });
     return (React.createElement(React.Fragment, null,
         React.createElement(DialogContent, { className: classes.dialogContent },
             state.error ? React.createElement(ErrorMessage, { error: state.error }) : null,
@@ -44,12 +38,9 @@ const AlphaFoldDBSearch = observer(function AlphaFoldDBSearch({ feature, session
                 "AlphaFold DB has no model for ",
                 state.uniprotId,
                 ". The PDB and Foldseek tabs may have a structure.")) : null,
-            React.createElement(UniProtIdInput, { lookupMode: state.lookupMode, onLookupModeChange: state.setLookupMode, manualUniprotId: state.manualUniprotId, onManualUniprotIdChange: state.setManualUniprotId, featureUniprotId: state.featureUniprotId, endContent: state.showIdentifierSelector ? (React.createElement("div", { className: classes.endRow },
-                    React.createElement(IdentifierSelector, { recognizedIds: state.recognizedIds, geneName: state.geneName, selectedId: state.selectedQueryId, onSelectedIdChange: state.setSelectedQueryId }),
-                    React.createElement(TextField, { size: "small", label: "Organism (NCBI taxon)", helperText: "Scopes the gene-name search", value: state.taxonId, onChange: event => {
-                            state.setTaxonId(event.target.value);
-                        }, placeholder: String(state.effectiveTaxonId), slotProps: { inputLabel: { shrink: true } }, sx: { width: 180 } }))) : null }),
+            React.createElement(UniProtLookupControls, { lookup: lookup }),
             state.loadingStatuses.map(status => (React.createElement(LoadingEllipses, { key: status, variant: "subtitle2", message: status }))),
+            React.createElement(PartialFailureNotice, { message: state.isoformPartialFailure }),
             state.showUniprotResults && (React.createElement(React.Fragment, null,
                 React.createElement(Typography, { variant: "body2", color: "textSecondary" },
                     "Searched UniProt by ",
@@ -75,8 +66,8 @@ const AlphaFoldDBSearch = observer(function AlphaFoldDBSearch({ feature, session
                 state.uniprotId ? (React.createElement(React.Fragment, null,
                 React.createElement("div", { className: classes.selectorsRow },
                     React.createElement(TranscriptSelector, { val: state.userSelection, setVal: state.setUserSelection, structureSequence: state.structureSequence, feature: feature, isoforms: state.transcriptOptions, isoformSequences: state.isoformSequences })),
-                React.createElement(AlphaFoldDBSearchStatus, { uniprotId: state.modelAccession ?? state.uniprotId, structureSequence: state.structureSequence, isoformSequences: state.isoformSequences, url: state.url }))) : null),
+                React.createElement(AlphaFoldDBSearchStatus, { uniprotId: state.modelAccession ?? state.uniprotId, url: state.url }))) : null),
         React.createElement(DialogActions, null,
-            React.createElement(ProteinViewActions, { handleClose: handleClose, uniprotId: state.modelAccession ?? state.uniprotId, userSelectedProteinSequence: state.userSelectedProteinSequence, selectedTranscript: state.selectedTranscript, url: state.url, confidenceUrl: state.confidenceUrl, feature: feature, view: view, session: session, alignmentAlgorithm: alignmentAlgorithm, onAlignmentAlgorithmChange: onAlignmentAlgorithmChange, sequencesMatch: state.sequencesMatch, isLoading: state.isLoading, error: state.error }))));
+            React.createElement(ProteinViewActions, { handleClose: handleClose, uniprotId: state.modelAccession ?? state.uniprotId, userSelectedProteinSequence: state.userSelectedProteinSequence, selectedTranscript: state.selectedTranscript, url: state.url, confidenceUrl: state.confidenceUrl, feature: feature, view: view, session: session, sideBySide: sideBySide, onSideBySideChange: onSideBySideChange, sequencesMatch: state.sequencesMatch, isLoading: state.isLoading, error: state.error }))));
 });
 export default AlphaFoldDBSearch;

package/dist/LaunchProteinView/components/AlphaFoldDBSearchStatus.js

@@ -1,17 +1,14 @@
 import React from 'react';
 import { Typography } from '@mui/material';
-import IsoformSequencesToggle from './IsoformSequencesToggle';
+import { uniprotEntryUrl } from 'p2s_mapper';
 import ExternalLink from '../../components/ExternalLink';
-import { uniprotEntryUrl } from '../utils/structureUrls';
-export default function AlphaFoldDBSearchStatus({ uniprotId, structureSequence, isoformSequences, url, }) {
-    return (React.createElement(React.Fragment, null,
-        React.createElement("div", null,
-            React.createElement(Typography, null,
-                "UniProt link:",
-                ' ',
-                React.createElement(ExternalLink, { href: uniprotEntryUrl(uniprotId) }, uniprotId)),
-            React.createElement(Typography, null,
-                "AlphaFoldDB link: ",
-                React.createElement(ExternalLink, { href: url }, url))),
-        React.createElement(IsoformSequencesToggle, { structureSequence: structureSequence, structureName: uniprotId, isoformSequences: isoformSequences })));
+export default function AlphaFoldDBSearchStatus({ uniprotId, url, }) {
+    return (React.createElement("div", null,
+        React.createElement(Typography, null,
+            "UniProt link:",
+            ' ',
+            React.createElement(ExternalLink, { href: uniprotEntryUrl(uniprotId) }, uniprotId)),
+        React.createElement(Typography, null,
+            "AlphaFoldDB link: ",
+            React.createElement(ExternalLink, { href: url }, url))));
 }

package/dist/LaunchProteinView/components/FoldseekActionMenu.js

@@ -1,10 +1,9 @@
 import React, { useState } from 'react';
 import { ErrorMessage } from '@jbrowse/core/ui';
 import { Button, Menu, MenuItem } from '@mui/material';
+import { caCoordsToPdb, getConfidenceUrlFromTarget, getUniprotIdFromAlphaFoldTarget, hasValidCaCoords, } from 'p2s_mapper';
 import { useSafeLaunch } from '../hooks/useSafeLaunch';
-import { caCoordsToPdb, hasValidCaCoords } from '../utils/caCoordsToPdb';
 import { PROTEIN_LAUNCH_LABELS, getConditionalProteinLaunches, launch3DProteinView, } from '../utils/launchViewUtils';
-import { getConfidenceUrlFromTarget, getUniprotIdFromAlphaFoldTarget, } from '../utils/structureUrls';
 export default function FoldseekActionMenu({ hit, session, view, feature, selectedTranscript, userProvidedTranscriptSequence, onClose, }) {
     const [anchorEl, setAnchorEl] = useState(null);
     const open = Boolean(anchorEl);

package/dist/LaunchProteinView/components/FoldseekResultsTable.js

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Paper, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Typography, } from '@mui/material';
+import { Paper, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Tooltip, Typography, } from '@mui/material';
+import { getStructureUrlFromTarget } from 'p2s_mapper';
 import { makeStyles } from 'tss-react/mui';
 import FoldseekActionMenu from './FoldseekActionMenu';
-import { getStructureUrlFromTarget } from '../utils/structureUrls';
 const useStyles = makeStyles()(theme => ({
     root: {
         display: 'flex',
@@ -56,10 +56,16 @@ export default function FoldseekResultsTable({ results, session, view, feature,
                         React.createElement(TableCell, { className: classes.headerCell }, "Database"),
                         React.createElement(TableCell, { className: classes.headerCell }, "Target"),
                         React.createElement(TableCell, { className: classes.headerCell }, "Organism"),
-                        React.createElement(TableCell, { className: classes.headerCell }, "Prob"),
-                        React.createElement(TableCell, { className: classes.headerCell }, "Seq. Id."),
+                        React.createElement(TableCell, { className: classes.headerCell },
+                            React.createElement(Tooltip, { title: "Foldseek's estimated probability that the hit is a true structural homolog" },
+                                React.createElement("span", null, "Prob"))),
+                        React.createElement(TableCell, { className: classes.headerCell },
+                            React.createElement(Tooltip, { title: "Percentage of aligned residues whose amino acid is identical; structural hits are often low here" },
+                                React.createElement("span", null, "Seq. Id."))),
                         React.createElement(TableCell, { className: classes.headerCell }, "Coverage"),
-                        React.createElement(TableCell, { className: classes.headerCell }, "E-value"),
+                        React.createElement(TableCell, { className: classes.headerCell },
+                            React.createElement(Tooltip, { title: "Hits of this score expected by chance in a database this size; smaller is stronger" },
+                                React.createElement("span", null, "E-value"))),
                         React.createElement(TableCell, { className: classes.headerCell }, "Actions"))),
                 React.createElement(TableBody, null, flatHits.map((hit, idx) => (React.createElement(TableRow, { key: `${hit.db}-${hit.target}-${idx}` },
                     React.createElement(TableCell, null, hit.db),

package/dist/LaunchProteinView/components/FoldseekSearch.js

@@ -1,15 +1,16 @@
 import React, { useState } from 'react';
 import { ErrorMessage, LoadingEllipses } from '@jbrowse/core/ui';
-import { Button, DialogActions, DialogContent, TextField, Typography, } from '@mui/material';
+import { Button, DialogActions, DialogContent, Link, TextField, Typography, } from '@mui/material';
 import { observer } from 'mobx-react';
+import { stripAllStopCodons } from 'p2s_mapper';
 import { makeStyles } from 'tss-react/mui';
 import FoldseekDatabaseSelector from './FoldseekDatabaseSelector';
 import FoldseekResultsTable from './FoldseekResultsTable';
+import PartialFailureNotice from './PartialFailureNotice';
 import TranscriptSelector from './TranscriptSelector';
 import useFoldseekSearch from '../hooks/useFoldseekSearch';
 import useTranscriptIsoformSelection from '../hooks/useTranscriptIsoformSelection';
 import { DEFAULT_DATABASES } from '../services/foldseekApi';
-import { stripAllStopCodons } from '../utils/util';
 const useStyles = makeStyles()({
     dialogContent: {
         width: '80em',
@@ -24,22 +25,23 @@ const useStyles = makeStyles()({
         display: 'flex',
         flexDirection: 'column',
         gap: 8,
+        alignItems: 'flex-start',
     },
 });
 const FoldseekSearch = observer(function FoldseekSearch({ feature, session, view, handleClose, }) {
     const { classes } = useStyles();
     const [userEditedSequence, setUserEditedSequence] = useState();
     const [selectedDatabases, setSelectedDatabases] = useState(DEFAULT_DATABASES);
-    const { results, cleanedAaSequence, di3Sequence, isLoading, isPredicting, error, statusMessage, predictStructure, search, reset, } = useFoldseekSearch();
-    const { transcripts, isoformSequences, isLoading: isLoadingIsoforms, error: isoformError, selectedTranscriptId: effectiveSelectedTranscriptId, setSelectedTranscriptId: setUserSelection, selectedTranscript, selectedIsoform: selectedIsoformData, } = useTranscriptIsoformSelection({ feature, view });
+    const [show3Di, setShow3Di] = useState(false);
+    const { results, cleanedAaSequence, di3Sequence, isLoading, isPredicting, error, statusMessage, predictStructure, search, cancel, reset, } = useFoldseekSearch();
+    const { transcripts, isoformSequences, isLoading: isLoadingIsoforms, error: isoformError, partialFailure: isoformPartialFailure, selectedTranscriptId: effectiveSelectedTranscriptId, setSelectedTranscriptId: setUserSelection, selectedTranscript, selectedIsoform: selectedIsoformData, } = useTranscriptIsoformSelection({ feature, view });
     const cleanedSequence = selectedIsoformData
         ? stripAllStopCodons(selectedIsoformData.seq)
         : '';
     const sequence = userEditedSequence ?? cleanedSequence;
     // Any change to the input sequence makes an existing 3Di prediction (and any
-    // results derived from it) stale. Clearing it returns the UI to the Predict
-    // step so a search can't silently run against the previously-predicted
-    // sequence after the user switches transcript or edits the residues.
+    // results derived from it) stale, so it goes back to being predicted on the
+    // next search rather than a search running against the old residues.
     const invalidatePrediction = () => {
         if (di3Sequence !== undefined || results !== undefined) {
             reset();
@@ -50,17 +52,24 @@ const FoldseekSearch = observer(function FoldseekSearch({ feature, session, view
         setUserEditedSequence(undefined);
         invalidatePrediction();
     };
-    const canPredict = sequence.trim().length > 0 && !isPredicting && !isLoading;
-    const canSearch = !!cleanedAaSequence &&
-        !!di3Sequence &&
-        selectedDatabases.length > 0 &&
-        !isLoading;
-    const combinedError = error ?? isoformError;
     const isBusy = isLoading || isPredicting;
+    const canSearch = sequence.trim().length > 0 && selectedDatabases.length > 0 && !isBusy;
+    // One button: predicting the 3Di alphabet is a step of the search, not a
+    // decision, and making the user click twice only invited a stale prediction.
+    const runSearch = async () => {
+        const predicted = cleanedAaSequence && di3Sequence
+            ? { aaSequence: cleanedAaSequence, di3Sequence }
+            : await predictStructure(sequence.trim());
+        if (predicted) {
+            await search(predicted.aaSequence, predicted.di3Sequence, selectedDatabases);
+        }
+    };
+    const combinedError = error ?? isoformError;
     return (React.createElement(React.Fragment, null,
         React.createElement(DialogContent, { className: classes.dialogContent },
             combinedError && !isLoadingIsoforms ? (React.createElement(ErrorMessage, { error: combinedError })) : null,
             isLoadingIsoforms ? (React.createElement(LoadingEllipses, { variant: "subtitle2", message: "Loading transcript sequences" })) : null,
+            React.createElement(PartialFailureNotice, { message: isoformPartialFailure }),
             isoformSequences ? (React.createElement(React.Fragment, null,
                 React.createElement(TranscriptSelector, { val: effectiveSelectedTranscriptId, setVal: setUserSelectionWithReset, isoforms: transcripts, isoformSequences: isoformSequences, feature: feature, disabled: isBusy }),
                 React.createElement(TextField, { label: "Protein sequence (amino acids)", multiline: true, rows: 4, value: sequence, onChange: e => {
@@ -70,24 +79,32 @@ const FoldseekSearch = observer(function FoldseekSearch({ feature, session, view
                         input: { className: classes.sequenceInput },
                     } }))) : null,
             di3Sequence ? (React.createElement("div", { className: classes.di3Section },
-                React.createElement(Typography, { variant: "subtitle2" }, "3Di structural alphabet (used for searching):"),
-                React.createElement(TextField, { multiline: true, rows: 4, value: di3Sequence, slotProps: {
+                React.createElement(Link, { component: "button", type: "button", variant: "body2", onClick: () => {
+                        setShow3Di(!show3Di);
+                    } }, show3Di ? 'Hide 3Di' : 'Show 3Di'),
+                show3Di ? (React.createElement(TextField, { label: "3Di structural alphabet (what the search runs on)", multiline: true, rows: 4, fullWidth: true, value: di3Sequence, slotProps: {
                         input: { className: classes.sequenceInput, readOnly: true },
-                    } }))) : null,
+                    } })) : null)) : null,
             React.createElement(FoldseekDatabaseSelector, { selected: selectedDatabases, onChange: setSelectedDatabases, disabled: isBusy }),
             statusMessage ? (React.createElement(LoadingEllipses, { variant: "subtitle2", message: statusMessage })) : null,
-            results ? (React.createElement(FoldseekResultsTable, { results: results, session: session, view: view, feature: feature, selectedTranscript: selectedTranscript, userProvidedTranscriptSequence: selectedIsoformData?.seq, onClose: handleClose })) : null),
+            results ? (React.createElement(FoldseekResultsTable, { results: results, session: session, view: view, feature: feature, selectedTranscript: selectedTranscript, userProvidedTranscriptSequence: selectedIsoformData?.seq, onClose: handleClose })) : null,
+            React.createElement(Typography, { variant: "body2", color: "textSecondary" }, "Searching sends the protein sequence above to the foldseek.com servers, which predict its 3Di alphabet and run the structure search.")),
         React.createElement(DialogActions, null,
             React.createElement(Button, { variant: "contained", color: "secondary", onClick: () => {
                     handleClose();
-                } }, "Cancel"),
+                } }, "Close"),
+            isBusy ? (React.createElement(Button, { variant: "outlined", onClick: () => {
+                    cancel();
+                } }, "Cancel search")) : null,
             results ? (React.createElement(Button, { variant: "outlined", onClick: () => {
                     reset();
                 } }, "New search")) : null,
-            !di3Sequence ? (React.createElement(Button, { variant: "contained", color: "primary", disabled: !canPredict, onClick: () => {
-                    void predictStructure(sequence.trim());
-                } }, isPredicting ? 'Predicting...' : 'Predict 3Di structure')) : (React.createElement(Button, { variant: "contained", color: "primary", disabled: !canSearch, onClick: () => {
-                    void search(cleanedAaSequence, di3Sequence, selectedDatabases);
-                } }, isLoading ? 'Searching...' : 'Search Foldseek')))));
+            React.createElement(Button, { variant: "contained", color: "primary", disabled: !canSearch, onClick: () => {
+                    void runSearch();
+                } }, isPredicting
+                ? 'Predicting 3Di...'
+                : isLoading
+                    ? 'Searching...'
+                    : 'Search Foldseek'))));
 });
 export default FoldseekSearch;

package/dist/LaunchProteinView/components/HelpDialog.js

@@ -1,21 +1,32 @@
 import React from 'react';
 import { Dialog } from '@jbrowse/core/ui';
 import { Button, DialogActions, DialogContent, Divider, Typography, } from '@mui/material';
-function Typography2({ children }) {
-    return React.createElement(Typography, { style: { margin: 4 } }, children);
-}
+import ExternalLink from '../../components/ExternalLink';
+const ISSUES_URL = 'https://github.com/GMOD/jbrowse-plugin-protein3d/issues';
 export default function HelpDialog({ handleClose, }) {
     return (React.createElement(Dialog, { open: true, maxWidth: "lg", onClose: handleClose, title: "Help" },
         React.createElement(DialogContent, null,
-            React.createElement(Typography2, null,
-                "The procedure for the protein lookup is as follows:",
+            React.createElement(Typography, { sx: { mb: 2 } }, "Each tab finds a structure a different way. All of them end in the same place: the plugin aligns the structure's residues to the protein sequence it translates from the transcript you pick, and that alignment maps genome coordinates onto positions in the 3D view."),
+            React.createElement(Typography, { component: "div" },
                 React.createElement("ul", null,
-                    React.createElement("li", null, "(Automatic lookup) Searches UniProt for the transcript ID or gene name to retrieve the UniProt ID, which is then used to lookup the structure in AlphaFoldDB"),
-                    React.createElement("li", null, "(Manual) Allows you to choose your own structure file from your local machine (e.g. a PDB file predicted by e.g. ColabFold) or supply a specific URL"),
-                    React.createElement("li", null, "The residues from the structure are downloaded, and then you can choose the transcript isoform from the selected gene that best represents the structure. Asterisks are displayed if there is an exact sequence match"),
-                    React.createElement("li", null, "The residues from the structure are finally aligned to the to the selected transcript's protein sequence representation, and this creates a mapping from the reference genome coordinates to positions in the 3-D structure"),
-                    React.createElement("li", null, "Finally the molstar panel is opened, and this contains many specialized features features, plus additional mouseover and selection features supplied by the plugin to connect mouse click actions and mouse hover with coordinates on the linear genome view"))),
-            React.createElement(Typography2, null, "If you run into challenges with this workflow e.g. your transcripts are not being found in UniProt then you can use the Manual import form, or contact colin.diesh@gmail.com for troubleshooting")),
+                    React.createElement("li", null,
+                        React.createElement("b", null, "AlphaFoldDB search"),
+                        " resolves the feature to a UniProt accession \u2014 from its own identifiers, or one you type \u2014 and opens AlphaFold's predicted model for it."),
+                    React.createElement("li", null,
+                        React.createElement("b", null, "PDB search"),
+                        " lists the experimental structures PDBe maps to that accession, ranked on coverage and resolution. A crystal is usually one domain, often with binding partners, so the view picks the chain the transcript belongs to once the structure loads."),
+                    React.createElement("li", null,
+                        React.createElement("b", null, "Foldseek search"),
+                        " sends the protein sequence to the foldseek.com servers and lists structures similar in shape, including ones with little sequence similarity."),
+                    React.createElement("li", null,
+                        React.createElement("b", null, "File or URL"),
+                        " opens a structure you already have \u2014 the output of ColabFold or another modelling tool, or any PDB/mmCIF file reachable by URL."))),
+            React.createElement(Typography, { sx: { mb: 2 } }, "The isoform list marks which transcripts match the structure's residues exactly, and counts identical residues for the rest. You do not need an exact match; the alignment absorbs the differences between the two representations."),
+            React.createElement(Typography, null,
+                "If a gene will not resolve, or something looks wrong, please open an issue at",
+                ' ',
+                React.createElement(ExternalLink, { href: ISSUES_URL }, "github.com/GMOD/jbrowse-plugin-protein3d"),
+                ".")),
         React.createElement(Divider, null),
         React.createElement(DialogActions, null,
             React.createElement(Button, { onClick: handleClose, color: "primary" }, "Close"))));

package/dist/LaunchProteinView/components/IdentifierSelector.js

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { Button, FormControl, InputLabel, MenuItem, Select, } from '@mui/material';
-import { getDbIdLabel } from '../utils/util';
+import { getDbIdLabel } from 'p2s_mapper';
 export default function IdentifierSelector({ recognizedIds, geneName, selectedId, onSelectedIdChange, }) {
     const [expanded, setExpanded] = useState(false);
     // Build list of selectable options

package/dist/LaunchProteinView/components/LaunchOptionsMenu.js

@@ -1,6 +1,13 @@
 import React from 'react';
-import { ListItemText, Menu, MenuItem } from '@mui/material';
-export default function LaunchOptionsMenu({ anchorEl, onClose, options, }) {
-    return (React.createElement(Menu, { anchorEl: anchorEl, open: Boolean(anchorEl), onClose: onClose, "data-testid": "protein-launch-options-menu" }, options.map(opt => (React.createElement(MenuItem, { key: opt.key, "data-testid": `protein-launch-option-${opt.key}`, onClick: opt.onClick },
-        React.createElement(ListItemText, { primary: opt.title, secondary: opt.description }))))));
+import { Checkbox, Divider, ListItemText, Menu, MenuItem } from '@mui/material';
+export default function LaunchOptionsMenu({ anchorEl, onClose, options, sideBySide, onSideBySideChange, }) {
+    return (React.createElement(Menu, { anchorEl: anchorEl, open: Boolean(anchorEl), onClose: onClose, "data-testid": "protein-launch-options-menu" },
+        options.map(opt => (React.createElement(MenuItem, { key: opt.key, "data-testid": `protein-launch-option-${opt.key}`, onClick: opt.onClick },
+            React.createElement(ListItemText, { primary: opt.title, secondary: opt.description })))),
+        React.createElement(Divider, null),
+        React.createElement(MenuItem, { "data-testid": "protein-launch-side-by-side", onClick: () => {
+                onSideBySideChange(!sideBySide);
+            } },
+            React.createElement(Checkbox, { checked: sideBySide, size: "small" }),
+            React.createElement(ListItemText, { primary: "Open side by side", secondary: "Place the protein view right of the genome view instead of below it" }))));
 }

package/dist/LaunchProteinView/components/LaunchProteinViewDialog.js

@@ -8,13 +8,23 @@ import HelpButton from './HelpButton';
 import PdbSearch from './PdbSearch';
 import TabPanel from './TabPanel';
 import UserProvidedStructure from './UserProvidedStructure';
-import { DEFAULT_ALIGNMENT_ALGORITHM } from '../../ProteinView/types';
-import { useLocalStorage } from '../hooks/useLocalStorage';
+import useUniProtIdLookup from '../hooks/useUniProtIdLookup';
+import { getLaunchSideBySide, setLaunchSideBySide } from '../utils/sideBySide';
 export default function LaunchProteinViewDialog({ handleClose, feature, model, }) {
     const [choice, setChoice] = useState(0);
-    const [alignmentAlgorithm, setAlignmentAlgorithm] = useLocalStorage('jbrowse-protein3d-alignment-algorithm', DEFAULT_ALIGNMENT_ALGORITHM);
     const session = getSession(model);
     const view = getContainingView(model);
+    // One lookup for the whole dialog: the tabs stay mounted once visited, so a
+    // lookup per tab meant the same UniProt search ran twice and a row picked on
+    // one tab left the other pointing at a different gene.
+    const lookup = useUniProtIdLookup({ feature, view });
+    // Also the dialog's, for the same reason: a tab that has been mounted since
+    // before the user changed this would otherwise launch with its own stale copy.
+    const [sideBySide, setSideBySide] = useState(() => getLaunchSideBySide());
+    const changeSideBySide = (value) => {
+        setSideBySide(value);
+        setLaunchSideBySide(value);
+    };
     return (React.createElement(Dialog, { "data-testid": "launch-protein-view-dialog", maxWidth: "xl", title: "Launch protein view", titleNode: React.createElement(React.Fragment, null,
             "Launch protein view ",
             React.createElement(HelpButton, null)), open: true, onClose: handleClose },
@@ -24,13 +34,13 @@ export default function LaunchProteinViewDialog({ handleClose, feature, model, }
             React.createElement(Tab, { value: 0, label: "AlphaFoldDB search" }),
             React.createElement(Tab, { value: 1, label: "PDB search" }),
             React.createElement(Tab, { value: 2, label: "Foldseek search" }),
-            React.createElement(Tab, { value: 3, label: "Open file manually" })),
+            React.createElement(Tab, { value: 3, label: "File or URL" })),
         React.createElement(TabPanel, { value: choice, index: 0 },
-            React.createElement(AlphaFoldDBSearch, { session: session, view: view, feature: feature, handleClose: handleClose, alignmentAlgorithm: alignmentAlgorithm, onAlignmentAlgorithmChange: setAlignmentAlgorithm })),
+            React.createElement(AlphaFoldDBSearch, { session: session, view: view, feature: feature, handleClose: handleClose, lookup: lookup, sideBySide: sideBySide, onSideBySideChange: changeSideBySide })),
         React.createElement(TabPanel, { value: choice, index: 1 },
-            React.createElement(PdbSearch, { session: session, view: view, feature: feature, handleClose: handleClose, alignmentAlgorithm: alignmentAlgorithm, onAlignmentAlgorithmChange: setAlignmentAlgorithm })),
+            React.createElement(PdbSearch, { session: session, view: view, feature: feature, handleClose: handleClose, lookup: lookup, sideBySide: sideBySide, onSideBySideChange: changeSideBySide })),
         React.createElement(TabPanel, { value: choice, index: 2 },
             React.createElement(FoldseekSearch, { session: session, view: view, feature: feature, handleClose: handleClose })),
         React.createElement(TabPanel, { value: choice, index: 3 },
-            React.createElement(UserProvidedStructure, { session: session, view: view, feature: feature, handleClose: handleClose, alignmentAlgorithm: alignmentAlgorithm, onAlignmentAlgorithmChange: setAlignmentAlgorithm }))));
+            React.createElement(UserProvidedStructure, { session: session, view: view, feature: feature, handleClose: handleClose }))));
 }

package/dist/LaunchProteinView/components/PartialFailureNotice.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { Typography } from '@mui/material';
+// What came back short of what was asked for: identifiers a UniProt outage
+// swallowed, transcripts with no protein sequence. Not an error — the dialog
+// still works — but not silence either, which is what makes 18 isoforms of a
+// 20-isoform gene read as the whole gene.
+export default function PartialFailureNotice({ message, }) {
+    return message ? (React.createElement(Typography, { variant: "body2", color: "warning.main" }, message)) : null;
+}

package/dist/LaunchProteinView/components/PdbResultsTable.js

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Paper, Radio, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Typography, } from '@mui/material';
+import { Paper, Radio, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Tooltip, Typography, } from '@mui/material';
+import { rcsbEntryUrl } from 'p2s_mapper';
 import { makeStyles } from 'tss-react/mui';
 import ExternalLink from '../../components/ExternalLink';
-import { rcsbEntryUrl } from '../services/pdbeBestStructures';
 const useStyles = makeStyles()(theme => ({
     tableContainer: {
         maxHeight: 300,
@@ -42,7 +42,9 @@ export default function PdbResultsTable({ entries, selectedPdbId, onSelect, }) {
                         React.createElement(TableCell, { className: classes.headerCell }, "PDB ID"),
                         React.createElement(TableCell, { className: classes.headerCell }, "Method"),
                         React.createElement(TableCell, { className: classes.headerCell }, "Resolution"),
-                        React.createElement(TableCell, { className: classes.headerCell }, "UniProt residues"),
+                        React.createElement(TableCell, { className: classes.headerCell },
+                            React.createElement(Tooltip, { title: "The span of the UniProt sequence this entry resolves, by SIFTS. A crystal is usually one domain rather than the whole protein." },
+                                React.createElement("span", null, "UniProt residues"))),
                         React.createElement(TableCell, { className: classes.headerCell }, "Coverage"),
                         React.createElement(TableCell, { className: classes.headerCell }, "Chains"))),
                 React.createElement(TableBody, null, shown.map(entry => {

package/dist/LaunchProteinView/components/PdbSearch.js

@@ -2,18 +2,19 @@ import React, { useState } from 'react';
 import { ErrorMessage, LoadingEllipses } from '@jbrowse/core/ui';
 import { DialogActions, DialogContent, TextField, Typography, } from '@mui/material';
 import { observer } from 'mobx-react';
+import { getPdbStructureUrl, isPdbId, uniprotEntryUrl } from 'p2s_mapper';
 import { makeStyles } from 'tss-react/mui';
-import IdentifierSelector from './IdentifierSelector';
+import PartialFailureNotice from './PartialFailureNotice';
 import PdbResultsTable from './PdbResultsTable';
 import ProteinViewActions from './ProteinViewActions';
 import TranscriptSelector from './TranscriptSelector';
-import UniProtIdInput from './UniProtIdInput';
+import UniProtLookupControls from './UniProtLookupControls';
 import UniProtResultsTable from './UniProtResultsTable';
 import ExternalLink from '../../components/ExternalLink';
+import useDebouncedValue from '../hooks/useDebouncedValue';
 import usePdbBestStructures from '../hooks/usePdbBestStructures';
+import usePdbEntryMolecules from '../hooks/usePdbEntryMolecules';
 import useTranscriptIsoformSelection from '../hooks/useTranscriptIsoformSelection';
-import useUniProtIdLookup from '../hooks/useUniProtIdLookup';
-import { getPdbStructureUrl, uniprotEntryUrl } from '../utils/structureUrls';
 const useStyles = makeStyles()({
     dialogContent: {
         width: '80em',
@@ -24,12 +25,6 @@ const useStyles = makeStyles()({
             marginBottom: 0,
         },
     },
-    endRow: {
-        display: 'flex',
-        flexDirection: 'row',
-        gap: 12,
-        alignItems: 'flex-start',
-    },
 });
 // Experimental structures of the gene's protein, found through SIFTS: PDBe
 // lists every entry mapped to the UniProt accession, ranked on coverage and
@@ -37,16 +32,42 @@ const useStyles = makeStyles()({
 // A crystal is usually a fragment, often with partners, so the view aligns
 // the transcript to it after launch rather than expecting a sequence match
 // here.
-const PdbSearch = observer(function PdbSearch({ feature, session, view, handleClose, alignmentAlgorithm, onAlignmentAlgorithmChange, }) {
+const PdbSearch = observer(function PdbSearch({ feature, session, view, handleClose, lookup, sideBySide, onSideBySideChange, }) {
     const { classes } = useStyles();
-    const lookup = useUniProtIdLookup({ feature, view });
     const { uniprotId, isAutoMode, isLookupLoading } = lookup;
     const { entries, error: pdbError, isLoading: isPdbLoading, } = usePdbBestStructures(uniprotId);
     const [userPdbId, setUserPdbId] = useState();
-    const { transcripts, isoformSequences, isLoading: isIsoformLoading, error: isoformError, selectedTranscriptId, setSelectedTranscriptId, selectedTranscript, selectedIsoform, } = useTranscriptIsoformSelection({ feature, view, resetKey: uniprotId });
-    const selectedPdbId = userPdbId && entries?.some(e => e.pdbId === userPdbId)
-        ? userPdbId
-        : entries?.[0]?.pdbId;
+    // A typed id reaches entries PDBe's SIFTS listing never offers: a structure
+    // of a complex filed under a partner, anything a paper names. Debounced, so
+    // the three characters on the way to four are not three fetches.
+    const [typedPdbId, setTypedPdbId] = useState('');
+    const trimmedTypedPdbId = typedPdbId.trim();
+    const debouncedTypedPdbId = useDebouncedValue(trimmedTypedPdbId, 400);
+    const typedPdbIdInvalid = trimmedTypedPdbId !== '' && !isPdbId(trimmedTypedPdbId);
+    const selectedPdbId = isPdbId(debouncedTypedPdbId)
+        ? debouncedTypedPdbId.toLowerCase()
+        : userPdbId && entries?.some(e => e.pdbId === userPdbId)
+            ? userPdbId
+            : entries?.[0]?.pdbId;
+    const structureUrl = selectedPdbId
+        ? getPdbStructureUrl(selectedPdbId)
+        : undefined;
+    // The chosen entry's residues, so the isoform picker can say which transcript
+    // matches it — the same annotation the AlphaFold tab shows. It is a label and
+    // nothing more: Launch never waits on it, and its failure costs the label
+    // rather than the launch, which reads the structure file itself.
+    //
+    // While another entry's answer is in flight keepPreviousData still holds the
+    // last one, so isValidating withholds it rather than labelling these rows
+    // with the previous entry's chains.
+    const { sequences, isValidating: isMoleculesValidating } = usePdbEntryMolecules(selectedPdbId);
+    const structureSequences = isMoleculesValidating ? undefined : sequences;
+    const { transcripts, isoformSequences, structureSequence, isLoading: isIsoformLoading, error: isoformError, partialFailure: isoformPartialFailure, selectedTranscriptId, setSelectedTranscriptId, selectedTranscript, selectedIsoform, } = useTranscriptIsoformSelection({
+        feature,
+        view,
+        structureSequences,
+        resetKey: uniprotId,
+    });
     const loadingStatuses = [
         isLookupLoading && 'Looking up UniProt ID',
         isIsoformLoading && 'Loading protein sequences from transcript isoforms',
@@ -59,12 +80,9 @@ const PdbSearch = observer(function PdbSearch({ feature, session, view, handleCl
     return (React.createElement(React.Fragment, null,
         React.createElement(DialogContent, { className: classes.dialogContent },
             error ? React.createElement(ErrorMessage, { error: error }) : null,
-            React.createElement(UniProtIdInput, { lookupMode: lookup.lookupMode, onLookupModeChange: lookup.setLookupMode, manualUniprotId: lookup.manualUniprotId, onManualUniprotIdChange: lookup.setManualUniprotId, featureUniprotId: lookup.featureUniprotId, endContent: lookup.showIdentifierSelector ? (React.createElement("div", { className: classes.endRow },
-                    React.createElement(IdentifierSelector, { recognizedIds: lookup.recognizedIds, geneName: lookup.geneName, selectedId: lookup.selectedQueryId, onSelectedIdChange: lookup.setSelectedQueryId }),
-                    React.createElement(TextField, { size: "small", label: "Organism (NCBI taxon)", helperText: "Scopes the gene-name search", value: lookup.taxonId, onChange: event => {
-                            lookup.setTaxonId(event.target.value);
-                        }, placeholder: String(lookup.effectiveTaxonId), slotProps: { inputLabel: { shrink: true } }, sx: { width: 180 } }))) : null }),
+            React.createElement(UniProtLookupControls, { lookup: lookup }),
             loadingStatuses.map(status => (React.createElement(LoadingEllipses, { key: status, variant: "subtitle2", message: status }))),
+            React.createElement(PartialFailureNotice, { message: isoformPartialFailure }),
             isAutoMode && lookup.uniprotEntries.length > 0 ? (React.createElement(React.Fragment, null,
                 React.createElement(Typography, { variant: "body2", color: "textSecondary" },
                     "Searched UniProt by ",
@@ -80,13 +98,18 @@ const PdbSearch = observer(function PdbSearch({ feature, session, view, handleCl
                 React.createElement(ExternalLink, { href: "https://www.uniprot.org/" }, "UniProt"),
                 ' ',
                 "directly and use \"Enter manually\".")) : null,
+            React.createElement(TextField, { size: "small", label: "PDB ID", placeholder: "e.g. 1TUP", helperText: typedPdbIdInvalid
+                    ? 'A PDB ID is four characters beginning with a digit'
+                    : 'Overrides the selection below', error: typedPdbIdInvalid, value: typedPdbId, onChange: event => {
+                    setTypedPdbId(event.target.value);
+                }, slotProps: { inputLabel: { shrink: true } }, sx: { width: 240 } }),
             uniprotId && entries && !isPdbLoading ? (entries.length > 0 ? (React.createElement(PdbResultsTable, { entries: entries, selectedPdbId: selectedPdbId, onSelect: setUserPdbId })) : (React.createElement(Typography, null,
                 "PDBe lists no experimental structure for",
                 ' ',
                 React.createElement(ExternalLink, { href: uniprotEntryUrl(uniprotId) }, uniprotId),
                 ". The AlphaFoldDB tab has a predicted one."))) : null,
-            isoformSequences && selectedTranscript ? (React.createElement(TranscriptSelector, { val: selectedTranscriptId, setVal: setSelectedTranscriptId, feature: feature, isoforms: transcripts, isoformSequences: isoformSequences })) : null),
+            isoformSequences && selectedTranscript ? (React.createElement(TranscriptSelector, { val: selectedTranscriptId, setVal: setSelectedTranscriptId, structureSequence: structureSequence, feature: feature, isoforms: transcripts, isoformSequences: isoformSequences })) : null),
         React.createElement(DialogActions, null,
-            React.createElement(ProteinViewActions, { handleClose: handleClose, uniprotId: uniprotId, userSelectedProteinSequence: selectedIsoform, selectedTranscript: selectedTranscript, url: selectedPdbId ? getPdbStructureUrl(selectedPdbId) : undefined, feature: feature, view: view, session: session, alignmentAlgorithm: alignmentAlgorithm, onAlignmentAlgorithmChange: onAlignmentAlgorithmChange, isLoading: isLoading, error: error }))));
+            React.createElement(ProteinViewActions, { handleClose: handleClose, uniprotId: uniprotId, userSelectedProteinSequence: selectedIsoform, selectedTranscript: selectedTranscript, url: structureUrl, pdbId: selectedPdbId, feature: feature, view: view, session: session, sideBySide: sideBySide, onSideBySideChange: onSideBySideChange, isLoading: isLoading, error: error }))));
 });
 export default PdbSearch;