jbrowse-plugin-protein3d 0.0.4 → 0.0.5

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.0.4",
+  "version": "0.0.5",
   "name": "jbrowse-plugin-protein3d",
   "keywords": [
     "jbrowse",
@@ -22,7 +22,7 @@
     "postversion": "git push --follow-tags"
   },
   "dependencies": {
-    "@mui/icons-material": "^5.15.10",
+    "@mui/icons-material": "^6.1.5",
     "clustal-js": "^2.0.1",
     "g2p_mapper": "^1.0.3",
     "molstar": "^4.0.0",
@@ -34,22 +34,22 @@
     "@fal-works/esbuild-plugin-global-externals": "^2.1.2",
     "@jbrowse/core": "^2.0.0",
     "@jbrowse/plugin-linear-genome-view": "^2.4.2",
-    "@mui/material": "^5.12.0",
-    "@mui/system": "^5.12.0",
+    "@mui/material": "^6.1.5",
+    "@mui/system": "^6.1.5",
     "@mui/x-data-grid": "^7.3.0",
     "@types/node": "^22.5.0",
     "@types/pako": "^2.0.0",
     "@types/react": "^18.2.54",
     "@typescript-eslint/eslint-plugin": "^8.1.0",
     "@typescript-eslint/parser": "^8.1.0",
-    "esbuild": "^0.23.0",
+    "esbuild": "^0.24.0",
     "eslint": "^9.0.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-prettier": "^5.0.0",
     "eslint-plugin-react": "^7.20.3",
     "eslint-plugin-react-hooks": "^5.1.0-rc-eb3ad065-20240822",
     "eslint-plugin-react-refresh": "^0.4.11",
-    "eslint-plugin-unicorn": "^55.0.0",
+    "eslint-plugin-unicorn": "^56.0.0",
     "fp-ts": "^2.16.9",
     "mobx": "^6.0.0",
     "mobx-react": "^9.0.1",

package/src/AddHighlightModel/HighlightComponents.tsx

@@ -7,12 +7,10 @@ import ProteinToGenomeClickHighlight from './ProteinToGenomeClickHighlight'
 import ProteinToGenomeHoverHighlight from './ProteinToGenomeHoverHighlight'
 import GenomeMouseoverHighlight from './GenomeMouseoverHighlight'
 
-type LGV = LinearGenomeViewModel
-
 const HighlightComponents = observer(function Highlight({
   model,
 }: {
-  model: LGV
+  model: LinearGenomeViewModel
 }) {
   return (
     <>

package/src/LaunchProteinView/components/AlphaFoldDBSearch.tsx

@@ -104,8 +104,8 @@ const AlphaFoldDBSearch = observer(function ({
       <DialogContent className={classes.dialogContent}>
         {e ? <ErrorMessage error={e} /> : null}
         <Typography>
-          Automatically find AlphaFoldDB entry for given transcript{' '}
-          <HelpButton />
+          Automatically find AlphaFoldDB entry for given transcript via gene ID
+          lookup <HelpButton />
         </Typography>
         {isRemoteStructureSequenceLoading ? (
           <LoadingEllipses
@@ -256,7 +256,7 @@ const AlphaFoldDBSearch = observer(function ({
                       assemblyNames: [uniprotId],
                       displays: [
                         {
-                          displayId: `${type}-LinearBasicDisplay`,
+                          displayId: `${s}-LinearBasicDisplay`,
                           type: 'LinearBasicDisplay',
                           jexlFilters: [`get(feature,'type')=='${type}'`],
                         },
@@ -265,7 +265,7 @@ const AlphaFoldDBSearch = observer(function ({
                   })
                   session.addTrackConf({
                     type: 'FeatureTrack',
-                    trackId: 'Antigen',
+                    trackId: `${uniprotId}-Antigen`,
                     name: 'Antigen',
                     adapter: {
                       type: 'Gff3Adapter',
@@ -277,7 +277,7 @@ const AlphaFoldDBSearch = observer(function ({
                   })
                   session.addTrackConf({
                     type: 'FeatureTrack',
-                    trackId: 'Variation',
+                    trackId: `${uniprotId}-Variation`,
                     name: 'Variation',
                     adapter: {
                       type: 'UniProtVariationAdapter',
@@ -289,7 +289,7 @@ const AlphaFoldDBSearch = observer(function ({
                   })
                   session.addTrackConf({
                     type: 'QuantitativeTrack',
-                    trackId: 'AlphaFold confidence',
+                    trackId: `${uniprotId}-AlphaFold-confidence`,
                     name: 'AlphaFold confidence',
                     adapter: {
                       type: 'AlphaFoldConfidenceAdapter',
@@ -301,7 +301,7 @@ const AlphaFoldDBSearch = observer(function ({
                   })
                   session.addTrackConf({
                     type: 'MultiQuantitativeTrack',
-                    trackId: 'AlphaMissense scores',
+                    trackId: `${uniprotId}-AlphaMissense-scores`,
                     name: 'AlphaMissense scores',
                     assemblyNames: [uniprotId],
                     adapter: {
@@ -313,8 +313,7 @@ const AlphaFoldDBSearch = observer(function ({
                     displays: [
                       {
                         type: 'MultiLinearWiggleDisplay',
-                        displayId:
-                          'AlphaMissense scores-MultiLinearWiggleDisplay',
+                        displayId: `${uniprotId}-AlphaMissense-scores-MultiLinearWiggleDisplay`,
                         defaultRendering: 'multirowdensity',
                         renderers: {
                           MultiDensityRenderer: {

package/src/LaunchProteinView/components/LaunchProteinViewDialog.tsx

@@ -6,6 +6,7 @@ import { AbstractTrackModel, Feature } from '@jbrowse/core/util'
 // locals
 import AlphaFoldDBSearch from './AlphaFoldDBSearch'
 import UserProvidedStructure from './UserProvidedStructure'
+import ManualUniProtIDEntry from './ManualUniProtIDEntry'
 import TabPanel from './TabPanel'
 
 export default function LaunchProteinViewDialog({
@@ -22,10 +23,10 @@ export default function LaunchProteinViewDialog({
     <Dialog
       maxWidth="xl"
       title="Launch protein view"
+      open
       onClose={() => {
         handleClose()
       }}
-      open
     >
       <Tabs
         value={choice}
@@ -33,8 +34,9 @@ export default function LaunchProteinViewDialog({
           setChoice(val)
         }}
       >
-        <Tab value={0} label="Automatic lookup" />
-        <Tab value={1} label="Manual" />
+        <Tab value={0} label="Automatic UniProt lookup" />
+        <Tab value={1} label="Manual UniProt entry" />
+        <Tab value={2} label="Open file manually" />
       </Tabs>
       <TabPanel value={choice} index={0}>
         <AlphaFoldDBSearch
@@ -44,6 +46,13 @@ export default function LaunchProteinViewDialog({
         />
       </TabPanel>
       <TabPanel value={choice} index={1}>
+        <ManualUniProtIDEntry
+          model={model}
+          feature={feature}
+          handleClose={handleClose}
+        />
+      </TabPanel>
+      <TabPanel value={choice} index={2}>
         <UserProvidedStructure
           model={model}
           feature={feature}

package/src/LaunchProteinView/components/ManualUniProtIDEntry.tsx

@@ -0,0 +1,332 @@
+import React, { useEffect, useState } from 'react'
+import { observer } from 'mobx-react'
+import {
+  Button,
+  DialogActions,
+  DialogContent,
+  TextField,
+  Typography,
+} from '@mui/material'
+import { makeStyles } from 'tss-react/mui'
+import {
+  AbstractTrackModel,
+  Feature,
+  getContainingView,
+  getSession,
+  isSessionWithAddTracks,
+} from '@jbrowse/core/util'
+import { ErrorMessage, LoadingEllipses } from '@jbrowse/core/ui'
+import { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
+
+// locals
+import {
+  getId,
+  getGeneDisplayName,
+  getTranscriptDisplayName,
+  getTranscriptFeatures,
+} from './util'
+
+// components
+import TranscriptSelector from './TranscriptSelector'
+import AlphaFoldDBSearchStatus from './AlphaFoldDBSearchStatus'
+
+// hooks
+import useRemoteStructureFileSequence from './useRemoteStructureFileSequence'
+import useIsoformProteinSequences from './useIsoformProteinSequences'
+
+const useStyles = makeStyles()(theme => ({
+  dialogContent: {
+    marginTop: theme.spacing(6),
+    width: '80em',
+  },
+}))
+
+const ManualUniProtIDEntry = observer(function ({
+  feature,
+  model,
+  handleClose,
+}: {
+  feature: Feature
+  model: AbstractTrackModel
+  handleClose: () => void
+}) {
+  const { classes } = useStyles()
+  const session = getSession(model)
+
+  // check if we are looking at a 'two-level' or 'three-level' feature by
+  // finding exon/CDS subfeatures. we want to select from transcript names
+  const options = getTranscriptFeatures(feature)
+  const [userSelection, setUserSelection] = useState<string>()
+  const view = getContainingView(model) as LinearGenomeViewModel
+  const selectedTranscript = options.find(val => getId(val) === userSelection)
+  const {
+    isoformSequences,
+    isLoading: isIsoformProteinSequencesLoading,
+    error: isoformProteinSequencesError,
+  } = useIsoformProteinSequences({
+    feature,
+    view,
+  })
+  const userSelectedProteinSequence = isoformSequences?.[userSelection ?? '']
+  const [uniprotId, setUniprotId] = useState('')
+  const url = uniprotId
+    ? `https://alphafold.ebi.ac.uk/files/AF-${uniprotId}-F1-model_v4.cif`
+    : undefined
+  const {
+    sequences: structureSequences,
+    isLoading: isRemoteStructureSequenceLoading,
+    error: remoteStructureSequenceError,
+  } = useRemoteStructureFileSequence({ url })
+  const e = isoformProteinSequencesError || remoteStructureSequenceError
+
+  const structureSequence = structureSequences?.[0]
+  useEffect(() => {
+    if (isoformSequences !== undefined) {
+      const ret =
+        options.find(
+          f =>
+            isoformSequences[f.id()]?.seq.replaceAll('*', '') ==
+            structureSequence,
+        ) ?? options.find(f => !!isoformSequences[f.id()])
+      setUserSelection(ret?.id())
+    }
+  }, [options, structureSequence, isoformSequences])
+
+  return (
+    <>
+      <DialogContent className={classes.dialogContent}>
+        {e ? <ErrorMessage error={e} /> : null}
+        <Typography>Manually enter a UniProt ID</Typography>
+        {isRemoteStructureSequenceLoading ? (
+          <LoadingEllipses
+            variant="h6"
+            message="Loading sequence from remote structure file"
+          />
+        ) : null}
+
+        <TextField
+          label="UniProt ID"
+          value={uniprotId}
+          onChange={event => {
+            setUniprotId(event.target.value)
+          }}
+        />
+        {isIsoformProteinSequencesLoading ? (
+          <LoadingEllipses
+            variant="h6"
+            message="Loading protein sequences from transcript isoforms"
+          />
+        ) : null}
+        {isoformSequences && structureSequence && selectedTranscript ? (
+          <>
+            <TranscriptSelector
+              val={userSelection ?? ''}
+              setVal={setUserSelection}
+              structureSequence={structureSequence}
+              feature={feature}
+              isoforms={options}
+              isoformSequences={isoformSequences}
+            />
+            <AlphaFoldDBSearchStatus
+              uniprotId={uniprotId}
+              selectedTranscript={selectedTranscript}
+              structureSequence={structureSequence}
+              isoformSequences={isoformSequences}
+            />
+          </>
+        ) : null}
+      </DialogContent>
+      <DialogActions>
+        <Button
+          variant="contained"
+          color="secondary"
+          onClick={() => {
+            handleClose()
+          }}
+        >
+          Cancel
+        </Button>
+        <Button
+          variant="contained"
+          color="primary"
+          disabled={
+            !uniprotId || !userSelectedProteinSequence || !selectedTranscript
+          }
+          onClick={() => {
+            session.addView('ProteinView', {
+              type: 'ProteinView',
+              isFloating: true,
+              structures: [
+                {
+                  url,
+                  userProvidedTranscriptSequence:
+                    userSelectedProteinSequence?.seq,
+                  feature: selectedTranscript?.toJSON(),
+                  connectedViewId: view.id,
+                },
+              ],
+              displayName: [
+                'Protein view',
+                uniprotId,
+                getGeneDisplayName(feature),
+                getTranscriptDisplayName(selectedTranscript),
+              ].join(' - '),
+            })
+            handleClose()
+          }}
+        >
+          Launch 3-D protein structure view
+        </Button>
+        <Button
+          variant="contained"
+          disabled={
+            !uniprotId || !userSelectedProteinSequence || !selectedTranscript
+          }
+          onClick={() => {
+            if (uniprotId && isSessionWithAddTracks(session)) {
+              // eslint-disable-next-line @typescript-eslint/no-floating-promises
+              ;(async () => {
+                try {
+                  session.addTemporaryAssembly?.({
+                    name: uniprotId,
+                    sequence: {
+                      type: 'ReferenceSequenceTrack',
+                      trackId: `${uniprotId}-ReferenceSequenceTrack`,
+                      sequenceType: 'pep',
+                      adapter: {
+                        type: 'UnindexedFastaAdapter',
+                        rewriteRefNames: "jexl:split(refName,'|')[1]",
+                        fastaLocation: {
+                          uri: `https://rest.uniprot.org/uniprotkb/${uniprotId}.fasta`,
+                        },
+                      },
+                    },
+                  })
+                  const url = `https://rest.uniprot.org/uniprotkb/${uniprotId}.gff`
+                  const res = await fetch(url)
+                  if (!res.ok) {
+                    throw new Error(`HTTP ${res.status} fetching ${url}`)
+                  }
+                  const data = await res.text()
+
+                  const types = [
+                    ...new Set(
+                      data
+                        .split('\n')
+                        .filter(f => !f.startsWith('#'))
+                        .map(f => f.trim())
+                        .filter(f => !!f)
+                        .map(f => f.split('\t')[2]),
+                    ),
+                  ]
+                  types.forEach(type => {
+                    const s = `${uniprotId}-${type}`
+                    session.addTrackConf({
+                      type: 'FeatureTrack',
+                      trackId: s,
+                      name: type,
+                      adapter: {
+                        type: 'Gff3Adapter',
+                        gffLocation: {
+                          uri: `https://rest.uniprot.org/uniprotkb/${uniprotId}.gff`,
+                        },
+                      },
+                      assemblyNames: [uniprotId],
+                      displays: [
+                        {
+                          displayId: `${type}-LinearBasicDisplay`,
+                          type: 'LinearBasicDisplay',
+                          jexlFilters: [`get(feature,'type')=='${type}'`],
+                        },
+                      ],
+                    })
+                  })
+                  session.addTrackConf({
+                    type: 'FeatureTrack',
+                    trackId: 'Antigen',
+                    name: 'Antigen',
+                    adapter: {
+                      type: 'Gff3Adapter',
+                      gffLocation: {
+                        uri: `https://www.ebi.ac.uk/proteins/api/antigen/${uniprotId}?format=gff`,
+                      },
+                    },
+                    assemblyNames: [uniprotId],
+                  })
+                  session.addTrackConf({
+                    type: 'FeatureTrack',
+                    trackId: 'Variation',
+                    name: 'Variation',
+                    adapter: {
+                      type: 'UniProtVariationAdapter',
+                      location: {
+                        uri: `https://www.ebi.ac.uk/proteins/api/variation/${uniprotId}.json`,
+                      },
+                    },
+                    assemblyNames: [uniprotId],
+                  })
+                  session.addTrackConf({
+                    type: 'QuantitativeTrack',
+                    trackId: 'AlphaFold confidence',
+                    name: 'AlphaFold confidence',
+                    adapter: {
+                      type: 'AlphaFoldConfidenceAdapter',
+                      location: {
+                        uri: `https://alphafold.ebi.ac.uk/files/AF-${uniprotId}-F1-confidence_v4.json`,
+                      },
+                    },
+                    assemblyNames: [uniprotId],
+                  })
+                  session.addTrackConf({
+                    type: 'MultiQuantitativeTrack',
+                    trackId: 'AlphaMissense scores',
+                    name: 'AlphaMissense scores',
+                    assemblyNames: [uniprotId],
+                    adapter: {
+                      type: 'AlphaMissensePathogenicityAdapter',
+                      location: {
+                        uri: `https://alphafold.ebi.ac.uk/files/AF-${uniprotId}-F1-aa-substitutions.csv`,
+                      },
+                    },
+                    displays: [
+                      {
+                        type: 'MultiLinearWiggleDisplay',
+                        displayId:
+                          'AlphaMissense scores-MultiLinearWiggleDisplay',
+                        defaultRendering: 'multirowdensity',
+                        renderers: {
+                          MultiDensityRenderer: {
+                            type: 'MultiDensityRenderer',
+                            bicolorPivotValue: 0.5,
+                          },
+                        },
+                      },
+                    ],
+                  })
+                  const view = session.addView('LinearGenomeView', {
+                    type: 'LinearGenomeView',
+                    displayName: [
+                      'Protein view',
+                      uniprotId,
+                      getGeneDisplayName(feature),
+                      getTranscriptDisplayName(selectedTranscript),
+                    ].join(' - '),
+                  }) as LinearGenomeViewModel
+                  await view.navToLocString(uniprotId, uniprotId)
+                } catch (e) {
+                  console.error(e)
+                  session.notifyError(`${e}`, e)
+                }
+              })()
+            }
+            handleClose()
+          }}
+        >
+          Launch linear protein annotation view
+        </Button>
+      </DialogActions>
+    </>
+  )
+})
+
+export default ManualUniProtIDEntry

package/src/LaunchProteinView/components/UserProvidedStructure.tsx

@@ -267,7 +267,7 @@ const UserProvidedStructure = observer(function ({
             })()
           }}
         >
-          Submit
+          Launch 3-D protein structure view
         </Button>
       </DialogActions>
     </>

package/src/ProteinView/components/ProteinView.tsx

@@ -61,7 +61,7 @@ const ProteinViewContainer = observer(function ({
       <ResizeHandle
         style={{ height: 4, background: 'grey' }}
         onDrag={delta => {
-          model.setHeight(model.height + delta)
+          return model.setHeight(model.height + delta)
         }}
       />
     </div>

package/src/ProteinView/model.ts

@@ -78,6 +78,7 @@ function stateModelFactory() {
        */
       setHeight(n: number) {
         self.height = n
+        return n
       },
       /**
        * #action