jbrowse-plugin-msaview 2.3.5 → 2.3.8

package/dist/version.d.ts

@@ -1 +1 @@
-export declare const version = "2.3.5";
+export declare const version = "2.3.8";

package/dist/version.js

@@ -1,2 +1,2 @@
-export const version = '2.3.5';
+export const version = '2.3.8';
 //# sourceMappingURL=version.js.map

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.3.5",
+  "version": "2.3.8",
   "license": "MIT",
   "name": "jbrowse-plugin-msaview",
   "repository": {
@@ -73,8 +73,6 @@
     "test:setup:version": "node scripts/test-versions.mjs setup",
     "test:versions": "node scripts/test-versions.mjs run",
     "test:version": "node scripts/test-versions.mjs run",
-    "preversion": "pnpm lint",
-    "version": "node -e \"console.log('export const version = \\'' + require('./package.json').version + '\\'')\" > src/version.ts && git add src/version.ts",
-    "postversion": "git push --follow-tags"
+    "release": "node scripts/release.mjs"
   }
 }

package/src/AddHighlightModel/GenomeMouseoverHighlight.tsx

@@ -38,8 +38,7 @@ const GenomeMouseoverHighlightRenderer = observer(function ({
   hovered,
 }: {
   model: LinearGenomeViewModel
-
-  hovered: any
+  hovered: object & Record<'hoverPosition', unknown>
 }) {
   const { classes } = useStyles()
   const { offsetPx } = model

package/src/LaunchMsaView/components/ManualMSALoader/ManualMSALoader.tsx

@@ -35,6 +35,21 @@ const useStyles = makeStyles()({
   textAreaFont: {
     fontFamily: 'Courier New',
   },
+  inputContainer: {
+    marginBottom: 30,
+  },
+  fileContainer: {
+    maxWidth: 500,
+  },
+  msaInput: {
+    marginBottom: 20,
+  },
+  queryNameInput: {
+    marginTop: 20,
+  },
+  warningAlert: {
+    marginTop: 10,
+  },
 })
 
 const ManualMSALoader = observer(function PreLoadedMSA2({
@@ -91,9 +106,9 @@ const ManualMSALoader = observer(function PreLoadedMSA2({
           </RadioGroup>
         </FormControl>
 
-        <div style={{ marginBottom: 30 }}>
+        <div className={classes.inputContainer}>
           {inputMethod === 'file' ? (
-            <div style={{ maxWidth: 500 }}>
+            <div className={classes.fileContainer}>
               <FileSelector
                 name="MSA File .aln (Clustal), .fa/.mfa (aligned FASTA), .stock (Stockholm), etc)"
                 inline
@@ -114,7 +129,7 @@ const ManualMSALoader = observer(function PreLoadedMSA2({
                 name="MSA"
                 multiline
                 minRows={5}
-                style={{ marginBottom: '20px' }}
+                className={classes.msaInput}
                 maxRows={10}
                 fullWidth
                 placeholder="Paste MSA here"
@@ -154,7 +169,7 @@ const ManualMSALoader = observer(function PreLoadedMSA2({
           name="MSA row name"
           fullWidth
           required
-          style={{ marginTop: 20 }}
+          className={classes.queryNameInput}
           placeholder="Row name in MSA that corresponds to the selected transcript"
           helperText="Required: Specify the name of the row in your MSA that should be aligned with the selected transcript"
           value={querySeqName}
@@ -163,13 +178,13 @@ const ManualMSALoader = observer(function PreLoadedMSA2({
           }}
         />
 
-        {!querySeqName.trim() && (
-          <Alert severity="warning" style={{ marginTop: 10 }}>
+        {!querySeqName.trim() ? (
+          <Alert severity="warning" className={classes.warningAlert}>
             Without specifying the MSA row name, clicking on the MSA will not
             navigate to the corresponding genome position, and hovering
             highlights will not work.
           </Alert>
-        )}
+        ) : null}
       </DialogContent>
 
       <DialogActions>

package/src/LaunchMsaView/components/NCBIBlastQuery/CachedBlastResults.tsx

@@ -13,6 +13,7 @@ import {
   Typography,
 } from '@mui/material'
 import { observer } from 'mobx-react'
+import { makeStyles } from 'tss-react/mui'
 
 import { blastLaunchViewFromCache } from './blastLaunchView'
 import { useCachedBlastResults } from './useCachedBlastResults'
@@ -22,6 +23,19 @@ import type { CachedBlastResult } from '../../../utils/blastCache'
 import type { AbstractTrackModel, Feature } from '@jbrowse/core/util'
 import type { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
 
+const useStyles = makeStyles()({
+  header: {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: 8,
+  },
+  resultList: {
+    maxHeight: 300,
+    overflow: 'auto',
+  },
+})
+
 function getResultDisplayName(result: CachedBlastResult): string {
   const parts = []
   if (result.geneName) {
@@ -45,6 +59,7 @@ const CachedBlastResults = observer(function ({
   handleClose: () => void
   feature: Feature
 }) {
+  const { classes } = useStyles()
   const view = getContainingView(model) as LinearGenomeViewModel
   const [operationError, setOperationError] = useState<unknown>()
 
@@ -82,14 +97,7 @@ const CachedBlastResults = observer(function ({
 
   return (
     <div>
-      <div
-        style={{
-          display: 'flex',
-          justifyContent: 'space-between',
-          alignItems: 'center',
-          marginBottom: 8,
-        }}
-      >
+      <div className={classes.header}>
         <Typography variant="subtitle1">
           Cached BLAST Results ({results.length})
         </Typography>
@@ -108,7 +116,7 @@ const CachedBlastResults = observer(function ({
           Clear All
         </Button>
       </div>
-      <List dense style={{ maxHeight: 300, overflow: 'auto' }}>
+      <List dense className={classes.resultList}>
         {results.map(result => (
           <ListItem
             key={result.id}

package/src/LaunchMsaView/components/NCBIBlastQuery/NCBIBlastAutomaticPanel.tsx

@@ -229,18 +229,23 @@ const NCBIBlastAutomaticPanel = observer(function ({
                   proteinSequence,
                 },
               })
+              handleClose()
             } catch (e) {
               console.error(e)
               setLaunchViewError(e)
             }
-
-            handleClose()
           }}
           disabled={!proteinSequence}
         >
           Submit
         </Button>
-        <Button color="secondary" variant="contained" onClick={handleClose}>
+        <Button
+          color="secondary"
+          variant="contained"
+          onClick={() => {
+            handleClose()
+          }}
+        >
           Cancel
         </Button>
       </DialogActions>

package/src/LaunchMsaView/components/NCBIBlastQuery/NCBIBlastManualPanel.tsx

@@ -26,6 +26,9 @@ const useStyles = makeStyles()({
     margin: 30,
     maxWidth: 600,
   },
+  infoText: {
+    marginTop: 20,
+  },
 })
 
 const NCBIBlastManualPanel = observer(function ({
@@ -77,7 +80,7 @@ const NCBIBlastManualPanel = observer(function ({
           </div>
         ) : null}
 
-        <Typography style={{ marginTop: 20 }}>
+        <Typography className={classes.infoText}>
           Click the link above and run your BLAST query, and once you have
           results, click "Multiple Alignment" at the top of the results page to
           be redirected to COBALT, NCBI's multiple sequence aligner. Once COBALT

package/src/LaunchMsaView/components/NCBIBlastQuery/NCBIBlastPanel.tsx

@@ -3,6 +3,7 @@ import React, { useState } from 'react'
 import { useLocalStorage } from '@jbrowse/core/util'
 import SettingsIcon from '@mui/icons-material/Settings'
 import { IconButton } from '@mui/material'
+import { makeStyles } from 'tss-react/mui'
 
 import NCBIBlastAutomaticPanel from './NCBIBlastAutomaticPanel'
 import NCBIBlastManualPanel from './NCBIBlastManualPanel'
@@ -13,6 +14,12 @@ import { BASE_BLAST_URL } from './consts'
 
 import type { AbstractTrackModel, Feature } from '@jbrowse/core/util'
 
+const useStyles = makeStyles()({
+  settingsButton: {
+    float: 'right',
+  },
+})
+
 const panelMap = {
   automatic: NCBIBlastAutomaticPanel,
   rid: NCBIBlastRIDPanel,
@@ -34,13 +41,14 @@ export default function NCBIBlastPanel({
     BASE_BLAST_URL,
   )
   const [settingsOpen, setSettingsOpen] = useState(false)
+  const { classes } = useStyles()
 
   const Panel = panelMap[lookupMethod as keyof typeof panelMap]
 
   return (
     <>
       <IconButton
-        style={{ float: 'right' }}
+        className={classes.settingsButton}
         size="small"
         onClick={() => {
           setSettingsOpen(true)

package/src/LaunchMsaView/components/NCBIBlastQuery/NCBIBlastRIDPanel.tsx

@@ -28,6 +28,15 @@ const useStyles = makeStyles()({
   dialogContent: {
     width: '80em',
   },
+  marginBottom: {
+    marginBottom: 16,
+  },
+  ridField: {
+    width: 150,
+  },
+  infoText: {
+    marginTop: 20,
+  },
 })
 
 const NCBIBlastRIDPanel = observer(function ({
@@ -60,7 +69,6 @@ const NCBIBlastRIDPanel = observer(function ({
   } = useTranscriptSelection({ feature, view })
 
   const e = proteinSequenceError ?? launchViewError
-  const style = { width: 150 }
   const trimmedRid = rid.trim()
 
   return (
@@ -69,7 +77,7 @@ const NCBIBlastRIDPanel = observer(function ({
         {children}
         {e ? <ErrorMessage error={e} /> : null}
 
-        <Typography variant="body2" style={{ marginBottom: 16 }}>
+        <Typography variant="body2" className={classes.marginBottom}>
           Enter the RID (Request ID) from a previously submitted NCBI BLAST
           query. You can find the RID in the BLAST results page URL or at the
           top of the results page. RIDs are typically valid for 24-36 hours
@@ -81,7 +89,7 @@ const NCBIBlastRIDPanel = observer(function ({
           label="BLAST RID"
           placeholder="e.g., ABC12345"
           fullWidth
-          style={{ marginBottom: 16 }}
+          className={classes.marginBottom}
           value={rid}
           onChange={event => {
             setRid(event.target.value)
@@ -89,7 +97,7 @@ const NCBIBlastRIDPanel = observer(function ({
         />
 
         {trimmedRid ? (
-          <Typography variant="body2" style={{ marginBottom: 16 }}>
+          <Typography variant="body2" className={classes.marginBottom}>
             <ExternalLink href={`${baseUrl}?CMD=Get&RID=${trimmedRid}`}>
               View BLAST results on NCBI
             </ExternalLink>
@@ -99,7 +107,7 @@ const NCBIBlastRIDPanel = observer(function ({
         <TextField2
           variant="outlined"
           label="MSA Algorithm"
-          style={style}
+          className={classes.ridField}
           select
           value={selectedMsaAlgorithm}
           onChange={event => {
@@ -122,7 +130,7 @@ const NCBIBlastRIDPanel = observer(function ({
           proteinSequence={proteinSequence}
         />
 
-        <Typography style={{ marginTop: 20 }}>
+        <Typography className={classes.infoText}>
           This will fetch the BLAST results for the provided RID and run them
           through a multiple sequence alignment. The protein sequence from the
           selected transcript will be added as the query sequence in the MSA.
@@ -152,12 +160,11 @@ const NCBIBlastRIDPanel = observer(function ({
                   rid: trimmedRid,
                 },
               })
+              handleClose()
             } catch (e) {
               console.error(e)
               setLaunchViewError(e)
             }
-
-            handleClose()
           }}
           disabled={!proteinSequence || !trimmedRid}
         >

package/src/LaunchMsaView/components/NCBIBlastQuery/NCBISettingsDialog.tsx

@@ -7,10 +7,17 @@ import {
   DialogContent,
   DialogTitle,
 } from '@mui/material'
+import { makeStyles } from 'tss-react/mui'
 
 import { BASE_BLAST_URL } from './consts'
 import TextField2 from '../../../components/TextField2'
 
+const useStyles = makeStyles()({
+  urlField: {
+    minWidth: 300,
+  },
+})
+
 export default function NCBISettingsDialog({
   handleClose,
   baseUrl,
@@ -18,6 +25,7 @@ export default function NCBISettingsDialog({
   handleClose: (arg?: string) => void
   baseUrl: string
 }) {
+  const { classes } = useStyles()
   const [tempBaseUrl, setTempBaseUrl] = useState(baseUrl)
   return (
     <Dialog
@@ -36,7 +44,7 @@ export default function NCBISettingsDialog({
           fullWidth
           variant="outlined"
           value={tempBaseUrl}
-          style={{ minWidth: '300px' }}
+          className={classes.urlField}
           onChange={e => {
             setTempBaseUrl(e.target.value)
           }}

package/src/LaunchMsaView/components/NCBIBlastQuery/useCachedBlastResults.ts

@@ -10,6 +10,9 @@ const swrConfig = {
   revalidateOnFocus: false,
   revalidateOnReconnect: false,
   revalidateIfStale: false,
+  refreshWhenHidden: false,
+  refreshWhenOffline: false,
+  shouldRetryOnError: false,
 }
 
 export function useCachedBlastResults(geneIds: string[]) {

package/src/LaunchMsaView/components/PreLoadedMSA/PreLoadedMSADataPanel.tsx

@@ -24,6 +24,9 @@ const useStyles = makeStyles()({
   dialogContent: {
     width: '80em',
   },
+  selectedContainer: {
+    marginTop: 50,
+  },
 })
 
 const PreLoadedMSA = observer(function ({
@@ -120,7 +123,7 @@ const PreLoadedMSA = observer(function ({
         </TextField2>
 
         {selectedDataset ? (
-          <div style={{ marginTop: 50 }}>
+          <div className={classes.selectedContainer}>
             {!msaListLoading && msaDataLoading ? (
               <LoadingEllipses
                 variant="h6"
@@ -183,7 +186,13 @@ const PreLoadedMSA = observer(function ({
         >
           Submit
         </Button>
-        <Button color="secondary" variant="contained" onClick={handleClose}>
+        <Button
+          color="secondary"
+          variant="contained"
+          onClick={() => {
+            handleClose()
+          }}
+        >
           Cancel
         </Button>
       </DialogActions>

package/src/LaunchMsaView/components/TabPanel.tsx

@@ -13,7 +13,7 @@ export default function TabPanel({
 }) {
   return (
     <div role="tabpanel" hidden={value !== index} {...other}>
-      {value === index && <div>{children}</div>}
+      {value === index ? <div>{children}</div> : null}
     </div>
   )
 }

package/src/LaunchMsaView/components/TranscriptSelector.tsx

@@ -21,6 +21,10 @@ const useStyles = makeStyles()({
   minWidth: {
     minWidth: 300,
   },
+  centered: {
+    alignContent: 'center',
+    marginLeft: 20,
+  },
 })
 
 export default function TranscriptSelector({
@@ -70,7 +74,7 @@ export default function TranscriptSelector({
             )
           })}
         </TextField>
-        <div style={{ alignContent: 'center', marginLeft: 20 }}>
+        <div className={classes.centered}>
           <Button
             variant="contained"
             color="primary"
@@ -83,7 +87,7 @@ export default function TranscriptSelector({
         </div>
       </div>
 
-      {showSequence && (
+      {showSequence ? (
         <ReadOnlyTextField2
           value={
             proteinSequence
@@ -91,7 +95,7 @@ export default function TranscriptSelector({
               : 'Loading...'
           }
         />
-      )}
+      ) : null}
     </>
   )
 }

package/src/MsaViewPanel/afterCreateAutoruns.ts

@@ -8,27 +8,11 @@ import {
   retrieveMsaData,
   storeMsaData,
 } from './msaDataStore'
-import { gappedToUngappedPosition } from './structureConnection'
+import { gappedToUngappedPosition, isProteinView } from './structureConnection'
 import { getUniprotIdFromAlphaFoldUrl } from './util'
 
 import type { JBrowsePluginMsaViewModel } from './model'
 
-interface ProteinView {
-  type: 'ProteinView'
-  id: string
-  structures: {
-    connectedViewId?: string
-    uniprotId?: string
-    structureSequences?: unknown[]
-    hoverGenomeHighlights?: { start: number; end: number }[]
-  }[]
-}
-
-function isProteinView(view: unknown): view is ProteinView {
-  const v = view as Record<string, unknown>
-  return v.type === 'ProteinView' && Array.isArray(v.structures)
-}
-
 export function loadStoredData(self: JBrowsePluginMsaViewModel) {
   const { dataStoreId, rows } = self
   if (dataStoreId && rows.length === 0) {
@@ -179,7 +163,7 @@ export function highlightConnectedStructures(self: JBrowsePluginMsaViewModel) {
   }
 
   for (const conn of connectedProteinViews) {
-    const structure = conn.proteinView?.structures?.[conn.structureIdx]
+    const structure = conn.proteinView.structures[conn.structureIdx]
     if (!structure) {
       continue
     }
@@ -210,7 +194,7 @@ export function highlightConnectedStructures(self: JBrowsePluginMsaViewModel) {
 }
 
 export function autoConnectStructures(self: JBrowsePluginMsaViewModel) {
-  const { views } = getSession(self)
+  const views = getSession(self).views as unknown[]
   const { connectedViewId, uniprotId, rows, connectedStructures } = self
 
   if (!uniprotId || rows.length === 0) {
@@ -221,14 +205,13 @@ export function autoConnectStructures(self: JBrowsePluginMsaViewModel) {
     if (!isProteinView(view)) {
       continue
     }
-    const v = view
 
     for (
       let structureIdx = 0;
-      structureIdx < v.structures.length;
+      structureIdx < view.structures.length;
       structureIdx++
     ) {
-      const structure = v.structures[structureIdx]
+      const structure = view.structures[structureIdx]
       if (!structure) {
         continue
       }
@@ -242,7 +225,7 @@ export function autoConnectStructures(self: JBrowsePluginMsaViewModel) {
       }
 
       const alreadyConnected = connectedStructures.some(
-        c => c.proteinViewId === v.id && c.structureIdx === structureIdx,
+        c => c.proteinViewId === view.id && c.structureIdx === structureIdx,
       )
       if (alreadyConnected) {
         continue
@@ -253,7 +236,7 @@ export function autoConnectStructures(self: JBrowsePluginMsaViewModel) {
       }
 
       try {
-        self.connectToStructure(v.id, structureIdx)
+        self.connectToStructure(view.id, structureIdx)
       } catch (e) {
         console.error('Failed to auto-connect to ProteinView:', e)
       }
@@ -262,7 +245,7 @@ export function autoConnectStructures(self: JBrowsePluginMsaViewModel) {
 }
 
 export function observeProteinHighlights(self: JBrowsePluginMsaViewModel) {
-  const { views } = getSession(self)
+  const views = getSession(self).views as unknown[]
   const { connectedViewId, transcriptToMsaMap, querySeqName } = self
 
   if (!connectedViewId || !transcriptToMsaMap) {
@@ -275,9 +258,8 @@ export function observeProteinHighlights(self: JBrowsePluginMsaViewModel) {
     if (!isProteinView(view)) {
       continue
     }
-    const v = view
 
-    for (const structure of v.structures) {
+    for (const structure of view.structures) {
       if (structure.connectedViewId !== connectedViewId) {
         continue
       }

package/src/MsaViewPanel/components/ConnectStructureDialog.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
 
-import { Dialog } from '@jbrowse/core/ui'
+import { Dialog, ErrorMessage } from '@jbrowse/core/ui'
 import { getSession } from '@jbrowse/core/util'
 import {
   Button,
@@ -13,9 +13,18 @@ import {
   Typography,
 } from '@mui/material'
 import { observer } from 'mobx-react'
+import { makeStyles } from 'tss-react/mui'
+
+import { isProteinView } from '../structureConnection'
 
 import type { JBrowsePluginMsaViewModel } from '../model'
 
+const useStyles = makeStyles()(theme => ({
+  formControl: {
+    marginBottom: theme.spacing(2),
+  },
+}))
+
 const ConnectStructureDialog = observer(function ConnectStructureDialog({
   model,
   handleClose,
@@ -23,23 +32,18 @@ const ConnectStructureDialog = observer(function ConnectStructureDialog({
   model: JBrowsePluginMsaViewModel
   handleClose: () => void
 }) {
+  const { classes } = useStyles()
   const session = getSession(model)
   const [selectedViewId, setSelectedViewId] = useState('')
   const [selectedStructureIdx, setSelectedStructureIdx] = useState(0)
   const [selectedMsaRow, setSelectedMsaRow] = useState(model.querySeqName)
   const [error, setError] = useState<string>()
 
-  // Find all ProteinViews in the session
-
-  const proteinViews = session.views.filter(
-    (v: any) => v.type === 'ProteinView',
-  ) as any[]
+  const proteinViews = (session.views as unknown[]).filter(isProteinView)
 
-  // Get structures for the selected view
   const selectedView = proteinViews.find(v => v.id === selectedViewId)
   const structures = selectedView?.structures ?? []
 
-  // Get MSA row names
   const msaRowNames = model.rows.map(r => r[0])
 
   const handleConnect = () => {
@@ -75,7 +79,7 @@ const ConnectStructureDialog = observer(function ConnectStructureDialog({
           </Typography>
         ) : (
           <>
-            <FormControl fullWidth sx={{ mb: 2 }}>
+            <FormControl fullWidth className={classes.formControl}>
               <InputLabel>Protein View</InputLabel>
               <Select
                 value={selectedViewId}
@@ -93,8 +97,8 @@ const ConnectStructureDialog = observer(function ConnectStructureDialog({
               </Select>
             </FormControl>
 
-            {structures.length > 1 && (
-              <FormControl fullWidth sx={{ mb: 2 }}>
+            {structures.length > 1 ? (
+              <FormControl fullWidth className={classes.formControl}>
                 <InputLabel>Structure</InputLabel>
                 <Select
                   value={selectedStructureIdx}
@@ -103,18 +107,16 @@ const ConnectStructureDialog = observer(function ConnectStructureDialog({
                     setSelectedStructureIdx(e.target.value)
                   }}
                 >
-                  {structures.map(
-                    (structure: { url?: string }, idx: number) => (
-                      <MenuItem key={idx} value={idx}>
-                        {structure.url ?? `Structure ${idx + 1}`}
-                      </MenuItem>
-                    ),
-                  )}
+                  {structures.map((structure, idx) => (
+                    <MenuItem key={idx} value={idx}>
+                      {structure.url ?? `Structure ${idx + 1}`}
+                    </MenuItem>
+                  ))}
                 </Select>
               </FormControl>
-            )}
+            ) : null}
 
-            <FormControl fullWidth sx={{ mb: 2 }}>
+            <FormControl fullWidth className={classes.formControl}>
               <InputLabel>MSA Row</InputLabel>
               <Select
                 value={selectedMsaRow}
@@ -131,11 +133,7 @@ const ConnectStructureDialog = observer(function ConnectStructureDialog({
               </Select>
             </FormControl>
 
-            {error && (
-              <Typography color="error" sx={{ mt: 1 }}>
-                {error}
-              </Typography>
-            )}
+            {error ? <ErrorMessage error={error} /> : null}
           </>
         )}
       </DialogContent>