@apollo-annotation/jbrowse-plugin-apollo 0.3.4 → 0.3.6

package/src/components/CreateApolloAnnotation.tsx

@@ -1,8 +1,11 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 /* eslint-disable @typescript-eslint/no-misused-promises */
 /* eslint-disable @typescript-eslint/unbound-method */
-import React, { useEffect, useMemo, useState } from 'react'
 
+import { type AnnotationFeatureSnapshot } from '@apollo-annotation/mst'
+import { AddFeatureChange } from '@apollo-annotation/shared'
+import { type Assembly } from '@jbrowse/core/assemblyManager/assembly'
+import { type AbstractSessionModel } from '@jbrowse/core/util'
 import {
   Box,
   Button,
@@ -14,17 +17,15 @@ import {
   FormControlLabel,
   MenuItem,
   Select,
-  SelectChangeEvent,
+  type SelectChangeEvent,
   Typography,
 } from '@mui/material'
+import { getSnapshot } from 'mobx-state-tree'
+import React, { useEffect, useMemo, useState } from 'react'
+
+import { type ApolloSessionModel } from '../session'
 
 import { Dialog } from './Dialog'
-import { ApolloSessionModel } from '../session'
-import { AnnotationFeatureSnapshot } from '@apollo-annotation/mst'
-import { getSnapshot } from 'mobx-state-tree'
-import { AddFeatureChange } from '@apollo-annotation/shared'
-import { Assembly } from '@jbrowse/core/assemblyManager/assembly'
-import { AbstractSessionModel } from '@jbrowse/core/util'
 
 interface CreateApolloAnnotationProps {
   session: AbstractSessionModel
@@ -45,8 +46,27 @@ const isGeneOrTranscript = (
   }
   return (
     featureTypeOntology.isTypeOf(annotationFeature.type, 'gene') ||
-    featureTypeOntology.isTypeOf(annotationFeature.type, 'mRNA') ||
-    featureTypeOntology.isTypeOf(annotationFeature.type, 'transcript')
+    featureTypeOntology.isTypeOf(annotationFeature.type, 'transcript') ||
+    featureTypeOntology.isTypeOf(annotationFeature.type, 'pseudogene') ||
+    featureTypeOntology.isTypeOf(
+      annotationFeature.type,
+      'pseudogenic_transcript',
+    )
+  )
+}
+
+const isGene = (
+  annotationFeature: AnnotationFeatureSnapshot,
+  apolloSessionModel: ApolloSessionModel,
+) => {
+  const { featureTypeOntology } =
+    apolloSessionModel.apolloDataStore.ontologyManager
+  if (!featureTypeOntology) {
+    throw new Error('featureTypeOntology is undefined')
+  }
+  return (
+    featureTypeOntology.isTypeOf(annotationFeature.type, 'gene') ||
+    featureTypeOntology.isTypeOf(annotationFeature.type, 'pseudogene')
   )
 }
 
@@ -60,11 +80,51 @@ const isTranscript = (
     throw new Error('featureTypeOntology is undefined')
   }
   return (
-    featureTypeOntology.isTypeOf(annotationFeature.type, 'mRNA') ||
-    featureTypeOntology.isTypeOf(annotationFeature.type, 'transcript')
+    featureTypeOntology.isTypeOf(annotationFeature.type, 'transcript') ||
+    featureTypeOntology.isTypeOf(
+      annotationFeature.type,
+      'pseudogenic_transcript',
+    )
   )
 }
 
+const getFeatureId = (feature: AnnotationFeatureSnapshot) => {
+  const { attributes } = feature
+  const id = attributes?.id
+  if (id) {
+    return id[0]
+  }
+  return feature.type
+}
+
+const getFeatureNameOrId = (
+  feature: AnnotationFeatureSnapshot,
+  apolloSessionModel: ApolloSessionModel,
+) => {
+  const { featureTypeOntology } =
+    apolloSessionModel.apolloDataStore.ontologyManager
+  if (!featureTypeOntology) {
+    return getFeatureId(feature)
+  }
+
+  let attrName = ''
+
+  if (featureTypeOntology.isTypeOf(feature.type, 'gene')) {
+    attrName = 'gene_name'
+  }
+
+  if (featureTypeOntology.isTypeOf(feature.type, 'transcript')) {
+    attrName = 'transcript_name'
+  }
+
+  const { attributes } = feature
+  const name = attributes?.[attrName]
+  if (name) {
+    return name[0]
+  }
+  return getFeatureId(feature)
+}
+
 export function CreateApolloAnnotation({
   annotationFeature,
   assembly,
@@ -104,6 +164,9 @@ export function CreateApolloAnnotation({
     const filteredFeatures: AnnotationFeatureSnapshot[] = []
 
     for (const [, f] of features) {
+      if (f.type === 'chromosome') {
+        continue
+      }
       const featureSnapshot = getSnapshot(f)
       if (min >= featureSnapshot.min && max <= featureSnapshot.max) {
         filteredFeatures.push(featureSnapshot)
@@ -115,33 +178,34 @@ export function CreateApolloAnnotation({
 
   useEffect(() => {
     setErrorMessage('')
-    if (checkedChildrens.length === 0) {
-      setParentFeatureChecked(false)
-      return
-    }
-
+    let mins: number[] = []
+    let maxes: number[] = []
     if (annotationFeature.children) {
       const checkedAnnotationFeatureChildren = Object.values(
         annotationFeature.children,
       )
         .filter((child) => isTranscript(child, apolloSessionModel))
         .filter((child) => checkedChildrens.includes(child._id))
-      const mins = checkedAnnotationFeatureChildren.map((f) => f.min)
-      const maxes = checkedAnnotationFeatureChildren.map((f) => f.max)
-      const min = Math.min(...mins)
-      const max = Math.max(...maxes)
-      const filteredFeatures = getFeatures(min, max)
-      setDestinationFeatures(filteredFeatures)
-
-      if (
-        filteredFeatures.length === 0 &&
-        checkedChildrens.length > 0 &&
-        !parentFeatureChecked
-      ) {
-        setErrorMessage('No destination features found')
-      }
+      mins = checkedAnnotationFeatureChildren.map((f) => f.min)
+      maxes = checkedAnnotationFeatureChildren.map((f) => f.max)
     }
-  }, [checkedChildrens])
+
+    const { featureTypeOntology } =
+      apolloSessionModel.apolloDataStore.ontologyManager
+    if (
+      featureTypeOntology &&
+      featureTypeOntology.isTypeOf(annotationFeature.type, 'transcript')
+    ) {
+      mins = [annotationFeature.min, ...mins]
+      maxes = [annotationFeature.max, ...maxes]
+    }
+
+    const min = Math.min(...mins)
+    const max = Math.max(...maxes)
+    const filteredFeatures = getFeatures(min, max)
+    setDestinationFeatures(filteredFeatures)
+    setSelectedDestinationFeature(filteredFeatures[0])
+  }, [checkedChildrens, parentFeatureChecked])
 
   const handleParentFeatureCheck = (
     event: React.ChangeEvent<HTMLInputElement>,
@@ -171,12 +235,55 @@ export function CreateApolloAnnotation({
 
   const handleCreateApolloAnnotation = async () => {
     if (parentFeatureChecked) {
-      const change = new AddFeatureChange({
-        changedIds: [annotationFeature._id],
-        typeName: 'AddFeatureChange',
-        assembly: assembly.name,
-        addedFeature: annotationFeature,
-      })
+      let change
+      if (isGene(annotationFeature, apolloSessionModel)) {
+        if (
+          annotationFeature.children &&
+          checkedChildrens.length !==
+            Object.values(annotationFeature.children).length
+        ) {
+          const childrens: Record<string, AnnotationFeatureSnapshot> = {}
+          for (const childId of checkedChildrens) {
+            childrens[childId] = annotationFeature.children[childId]
+          }
+          change = new AddFeatureChange({
+            changedIds: [annotationFeature._id],
+            typeName: 'AddFeatureChange',
+            assembly: assembly.name,
+            addedFeature: {
+              ...annotationFeature,
+              children: childrens,
+            },
+          })
+        } else {
+          change = new AddFeatureChange({
+            changedIds: [annotationFeature._id],
+            typeName: 'AddFeatureChange',
+            assembly: assembly.name,
+            addedFeature: annotationFeature,
+          })
+        }
+      }
+
+      if (isTranscript(annotationFeature, apolloSessionModel)) {
+        if (selectedDestinationFeature) {
+          change = new AddFeatureChange({
+            parentFeatureId: selectedDestinationFeature._id,
+            changedIds: [selectedDestinationFeature._id],
+            typeName: 'AddFeatureChange',
+            assembly: assembly.name,
+            addedFeature: annotationFeature,
+          })
+        } else {
+          setErrorMessage('There is no destination gene for this transcript')
+          return
+        }
+      }
+
+      if (!change) {
+        return
+      }
+
       await apolloSessionModel.apolloDataStore.changeManager.submit(change)
       session.notify('Annotation added successfully', 'success')
       handleClose()
@@ -198,9 +305,9 @@ export function CreateApolloAnnotation({
           addedFeature: child,
         })
         await apolloSessionModel.apolloDataStore.changeManager.submit(change)
-        session.notify('Annotation added successfully', 'success')
-        handleClose()
       }
+      session.notify('Annotation added successfully', 'success')
+      handleClose()
     }
   }
 
@@ -226,7 +333,7 @@ export function CreateApolloAnnotation({
                   onChange={handleParentFeatureCheck}
                 />
               }
-              label={`${annotationFeature.type}:${annotationFeature.min}..${annotationFeature.max}`}
+              label={`${getFeatureNameOrId(annotationFeature, apolloSessionModel)} (${annotationFeature.min + 1}..${annotationFeature.max})`}
             />
           )}
           {annotationFeature.children && (
@@ -245,15 +352,16 @@ export function CreateApolloAnnotation({
                         }}
                       />
                     }
-                    label={`${child.type}:${child.min}..${child.max}`}
+                    label={`${getFeatureNameOrId(child, apolloSessionModel)} (${child.min + 1}..${child.max})`}
                   />
                 ))}
             </Box>
           )}
         </Box>
-        {!parentFeatureChecked &&
-          checkedChildrens.length > 0 &&
-          destinationFeatures.length > 0 && (
+        {destinationFeatures.length > 0 &&
+          ((!parentFeatureChecked && checkedChildrens.length > 0) ||
+            (parentFeatureChecked &&
+              isTranscript(annotationFeature, apolloSessionModel))) && (
             <Box sx={{ ml: 3 }}>
               <Typography variant="caption" fontSize={12}>
                 Select the destination feature to copy the selected features
@@ -268,7 +376,7 @@ export function CreateApolloAnnotation({
                 >
                   {destinationFeatures.map((f) => (
                     <MenuItem key={f._id} value={f._id}>
-                      {`${f.type}:${f.min}..${f.max}`}
+                      {`${getFeatureNameOrId(f, apolloSessionModel)} (${f.min}..${f.max})`}
                     </MenuItem>
                   ))}
                 </Select>

package/src/components/DeleteAssembly.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/unbound-method */
 /* eslint-disable @typescript-eslint/no-misused-promises */
 import { DeleteAssemblyChange } from '@apollo-annotation/shared'
-import { Assembly } from '@jbrowse/core/assemblyManager/assembly'
+import { type Assembly } from '@jbrowse/core/assemblyManager/assembly'
 import {
   Button,
   Checkbox,
@@ -12,19 +12,20 @@ import {
   FormGroup,
   MenuItem,
   Select,
-  SelectChangeEvent,
+  type SelectChangeEvent,
 } from '@mui/material'
 import { getRoot } from 'mobx-state-tree'
 import React, { useEffect, useState } from 'react'
 
-import { ApolloInternetAccountModel } from '../ApolloInternetAccount/model'
+import { type ApolloInternetAccountModel } from '../ApolloInternetAccount/model'
 import {
-  ApolloInternetAccount,
-  CollaborationServerDriver,
+  type ApolloInternetAccount,
+  type CollaborationServerDriver,
 } from '../BackendDrivers'
-import { ChangeManager } from '../ChangeManager'
-import { ApolloSessionModel } from '../session'
-import { ApolloRootModel } from '../types'
+import { type ChangeManager } from '../ChangeManager'
+import { type ApolloSessionModel } from '../session'
+import { type ApolloRootModel } from '../types'
+
 import { Dialog } from './Dialog'
 
 interface DeleteAssemblyProps {

package/src/components/DeleteFeature.tsx

@@ -1,8 +1,8 @@
 /* eslint-disable @typescript-eslint/unbound-method */
 /* eslint-disable @typescript-eslint/no-misused-promises */
-import { AnnotationFeature } from '@apollo-annotation/mst'
+import { type AnnotationFeature } from '@apollo-annotation/mst'
 import { DeleteFeatureChange } from '@apollo-annotation/shared'
-import { AbstractSessionModel } from '@jbrowse/core/util'
+import { type AbstractSessionModel } from '@jbrowse/core/util'
 import {
   Button,
   DialogActions,
@@ -12,8 +12,9 @@ import {
 import { getSnapshot } from 'mobx-state-tree'
 import React, { useState } from 'react'
 
-import { ChangeManager } from '../ChangeManager'
-import { ApolloSessionModel } from '../session'
+import { type ChangeManager } from '../ChangeManager'
+import { type ApolloSessionModel } from '../session'
+
 import { Dialog } from './Dialog'
 
 interface DeleteFeatureProps {

package/src/components/Dialog.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/unbound-method */
 import { Dialog as JBDialog } from '@jbrowse/core/ui'
 import CloseIcon from '@mui/icons-material/Close'
-import { DialogProps, DialogTitle, IconButton } from '@mui/material'
+import { type DialogProps, DialogTitle, IconButton } from '@mui/material'
 import { observer } from 'mobx-react'
 import React from 'react'
 import { makeStyles } from 'tss-react/mui'

package/src/components/DownloadGFF3.tsx

@@ -3,9 +3,10 @@
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 /* eslint-disable @typescript-eslint/no-unnecessary-condition */
 /* eslint-disable @typescript-eslint/no-misused-promises */
-import { ApolloAssembly } from '@apollo-annotation/mst'
-import gff, { GFF3Item } from '@gmod/gff'
-import { Assembly } from '@jbrowse/core/assemblyManager/assembly'
+import { type ApolloAssembly } from '@apollo-annotation/mst'
+import { annotationFeatureToGFF3 } from '@apollo-annotation/shared'
+import gff, { type GFF3Item } from '@gmod/gff'
+import { type Assembly } from '@jbrowse/core/assemblyManager/assembly'
 import { getConf } from '@jbrowse/core/configuration'
 import {
   Button,
@@ -14,21 +15,21 @@ import {
   DialogContentText,
   MenuItem,
   Select,
-  SelectChangeEvent,
+  type SelectChangeEvent,
 } from '@mui/material'
 import { saveAs } from 'file-saver'
-import { IMSTMap, getSnapshot } from 'mobx-state-tree'
+import { type IMSTMap, getSnapshot } from 'mobx-state-tree'
 import React, { useState } from 'react'
 
 import {
-  ApolloInternetAccount,
-  CollaborationServerDriver,
-  InMemoryFileDriver,
+  type ApolloInternetAccount,
+  type CollaborationServerDriver,
+  type InMemoryFileDriver,
 } from '../BackendDrivers'
-import { ApolloSessionModel } from '../session'
+import { type ApolloSessionModel } from '../session'
 import { createFetchErrorMessage } from '../util'
+
 import { Dialog } from './Dialog'
-import { annotationFeatureToGFF3 } from '@apollo-annotation/shared'
 
 interface DownloadGFF3Props {
   session: ApolloSessionModel

package/src/components/FilterFeatures.tsx

@@ -1,6 +1,3 @@
-import React, { useState } from 'react'
-import { ApolloSessionModel } from '../session'
-import { Dialog } from './Dialog'
 import {
   Box,
   Button,
@@ -10,9 +7,14 @@ import {
   Grid2,
   TextField,
 } from '@mui/material'
+import { observer } from 'mobx-react'
+import React, { useState } from 'react'
+
 import { isOntologyClass } from '../OntologyManager'
+import { type ApolloSessionModel } from '../session'
+
+import { Dialog } from './Dialog'
 import { OntologyTermAutocomplete } from './OntologyTermAutocomplete'
-import { observer } from 'mobx-react'
 
 interface FilterFeaturesProps {
   onUpdate: (types: string[]) => void

package/src/components/ImportFeatures.tsx

@@ -6,7 +6,7 @@
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
 /* eslint-disable @typescript-eslint/no-misused-promises */
 import { AddFeaturesFromFileChange } from '@apollo-annotation/shared'
-import { Assembly } from '@jbrowse/core/assemblyManager/assembly'
+import { type Assembly } from '@jbrowse/core/assemblyManager/assembly'
 import { getConf } from '@jbrowse/core/configuration'
 import {
   Button,
@@ -15,7 +15,7 @@ import {
   DialogContentText,
   MenuItem,
   Select,
-  SelectChangeEvent,
+  type SelectChangeEvent,
 } from '@mui/material'
 import Checkbox from '@mui/material/Checkbox'
 import FormControlLabel from '@mui/material/FormControlLabel'
@@ -23,12 +23,13 @@ import LinearProgress from '@mui/material/LinearProgress'
 import React, { useEffect, useState } from 'react'
 
 import {
-  ApolloInternetAccount,
-  CollaborationServerDriver,
+  type ApolloInternetAccount,
+  type CollaborationServerDriver,
 } from '../BackendDrivers'
-import { ChangeManager } from '../ChangeManager'
-import { ApolloSessionModel } from '../session'
+import { type ChangeManager } from '../ChangeManager'
+import { type ApolloSessionModel } from '../session'
 import { createFetchErrorMessage } from '../util'
+
 import { Dialog } from './Dialog'
 
 interface ImportFeaturesProps {

package/src/components/LogOut.tsx

@@ -6,14 +6,15 @@ import {
   DialogContentText,
   MenuItem,
   Select,
-  SelectChangeEvent,
+  type SelectChangeEvent,
 } from '@mui/material'
 import { getRoot } from 'mobx-state-tree'
 import React, { useState } from 'react'
 
-import { ApolloInternetAccountModel } from '../ApolloInternetAccount/model'
-import { ApolloSessionModel } from '../session'
-import { ApolloRootModel } from '../types'
+import { type ApolloInternetAccountModel } from '../ApolloInternetAccount/model'
+import { type ApolloSessionModel } from '../session'
+import { type ApolloRootModel } from '../types'
+
 import { Dialog } from './Dialog'
 
 interface DeleteAssemblyProps {

package/src/components/ManageChecks.tsx

@@ -1,8 +1,8 @@
 /* eslint-disable @typescript-eslint/use-unknown-in-catch-callback-variable */
 /* eslint-disable @typescript-eslint/unbound-method */
 /* eslint-disable @typescript-eslint/no-misused-promises */
-import { Assembly } from '@jbrowse/core/assemblyManager/assembly'
-import { AbstractSessionModel } from '@jbrowse/core/util'
+import { type Assembly } from '@jbrowse/core/assemblyManager/assembly'
+import { type AbstractSessionModel } from '@jbrowse/core/util'
 import {
   Button,
   Checkbox,
@@ -12,7 +12,7 @@ import {
   MenuItem,
   Paper,
   Select,
-  SelectChangeEvent,
+  type SelectChangeEvent,
   Table,
   TableBody,
   TableCell,
@@ -23,14 +23,15 @@ import {
 import { getRoot } from 'mobx-state-tree'
 import React, { useEffect, useState } from 'react'
 
-import { ApolloInternetAccountModel } from '../ApolloInternetAccount/model'
+import { type ApolloInternetAccountModel } from '../ApolloInternetAccount/model'
 import {
-  ApolloInternetAccount,
-  CollaborationServerDriver,
+  type ApolloInternetAccount,
+  type CollaborationServerDriver,
 } from '../BackendDrivers'
-import { ApolloSessionModel } from '../session'
-import { ApolloRootModel } from '../types'
+import { type ApolloSessionModel } from '../session'
+import { type ApolloRootModel } from '../types'
 import { createFetchErrorMessage } from '../util'
+
 import { Dialog } from './Dialog'
 
 interface ManageChecksProps {

package/src/components/ManageUsers.tsx

@@ -6,7 +6,7 @@
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 /* eslint-disable @typescript-eslint/no-unsafe-return */
 import { DeleteUserChange, UserChange } from '@apollo-annotation/shared'
-import { AbstractRootModel } from '@jbrowse/core/util'
+import { type AbstractRootModel } from '@jbrowse/core/util'
 import DeleteIcon from '@mui/icons-material/Delete'
 import {
   Button,
@@ -15,25 +15,26 @@ import {
   DialogContentText,
   MenuItem,
   Select,
-  SelectChangeEvent,
+  type SelectChangeEvent,
 } from '@mui/material'
 import {
   DataGrid,
   GridActionsCellItem,
-  GridCellParams,
-  GridColDef,
-  GridRowId,
-  GridRowModel,
-  GridRowParams,
+  type GridCellParams,
+  type GridColDef,
+  type GridRowId,
+  type GridRowModel,
+  type GridRowParams,
   GridToolbar,
 } from '@mui/x-data-grid'
 import { getRoot } from 'mobx-state-tree'
 import React, { useCallback, useEffect, useState } from 'react'
 
-import { ApolloInternetAccountModel } from '../ApolloInternetAccount/model'
-import { ChangeManager } from '../ChangeManager'
-import { ApolloSessionModel } from '../session'
+import { type ApolloInternetAccountModel } from '../ApolloInternetAccount/model'
+import { type ChangeManager } from '../ChangeManager'
+import { type ApolloSessionModel } from '../session'
 import { createFetchErrorMessage } from '../util'
+
 import { Dialog } from './Dialog'
 
 interface UserResponse {

package/src/components/OntologyTermAutocomplete.tsx

@@ -1,17 +1,17 @@
 /* eslint-disable @typescript-eslint/no-unnecessary-condition */
 
-import { AbstractSessionModel } from '@jbrowse/core/util'
+import { type AbstractSessionModel } from '@jbrowse/core/util'
 import { isAbortException } from '@jbrowse/core/util/aborting'
 import {
   Autocomplete,
-  AutocompleteRenderInputParams,
+  type AutocompleteRenderInputParams,
   TextField,
 } from '@mui/material'
 import React, { useCallback, useEffect, useState } from 'react'
 
-import { OntologyTerm, isDeprecated } from '../OntologyManager'
-import OntologyStore from '../OntologyManager/OntologyStore'
-import { ApolloSessionModel } from '../session'
+import { type OntologyTerm, isDeprecated } from '../OntologyManager'
+import type OntologyStore from '../OntologyManager/OntologyStore'
+import { type ApolloSessionModel } from '../session'
 
 interface OntologyTermAutocompleteProps {
   session: ApolloSessionModel

package/src/components/OntologyTermMultiSelect.tsx

@@ -4,7 +4,7 @@
 import { isAbortException } from '@jbrowse/core/util/aborting'
 import {
   Autocomplete,
-  AutocompleteRenderGetTagProps,
+  type AutocompleteRenderGetTagProps,
   Chip,
   Grid2,
   TextField,
@@ -18,14 +18,14 @@ import { getParent } from 'mobx-state-tree'
 import * as React from 'react'
 
 import {
-  OntologyManager,
-  OntologyRecord,
-  OntologyTerm,
+  type OntologyManager,
+  type OntologyRecord,
+  type OntologyTerm,
   isOntologyClass,
 } from '../OntologyManager'
-import { Match } from '../OntologyManager/OntologyStore/fulltext'
+import { type Match } from '../OntologyManager/OntologyStore/fulltext'
 import { isDeprecated } from '../OntologyManager/OntologyStore/indexeddb-schema'
-import { ApolloSessionModel } from '../session'
+import { type ApolloSessionModel } from '../session'
 
 interface TermValue {
   term: OntologyTerm
@@ -114,6 +114,7 @@ export function OntologyTermMultiSelect({
   ontologyVersion,
   session,
   value: initialValue,
+  label,
 }: {
   session: ApolloSessionModel
   value: string[]
@@ -122,6 +123,7 @@ export function OntologyTermMultiSelect({
   /** if true, include deprecated/obsolete terms */
   includeDeprecated?: boolean
   onChange(newValue: string[]): void
+  label?: string
 }) {
   const { ontologyManager } = session.apolloDataStore
   const ontology = ontologyManager.findOntology(ontologyName, ontologyVersion)
@@ -256,6 +258,7 @@ export function OntologyTermMultiSelect({
           {...params}
           {...extraTextFieldParams}
           variant="outlined"
+          label={label}
           fullWidth
         />
       )}

package/src/components/OpenLocalFile.tsx

@@ -2,7 +2,7 @@
 /* eslint-disable @typescript-eslint/unbound-method */
 /* eslint-disable @typescript-eslint/no-unnecessary-condition */
 /* eslint-disable @typescript-eslint/no-misused-promises */
-import { AbstractSessionModel, isElectron } from '@jbrowse/core/util'
+import { type AbstractSessionModel, isElectron } from '@jbrowse/core/util'
 import {
   Button,
   DialogActions,
@@ -16,9 +16,10 @@ import {
 import { nanoid } from 'nanoid'
 import React, { useState } from 'react'
 
-import { InMemoryFileDriver } from '../BackendDrivers'
-import { ApolloSessionModel } from '../session'
+import { type InMemoryFileDriver } from '../BackendDrivers'
+import { type ApolloSessionModel } from '../session'
 import { loadAssemblyIntoClient } from '../util'
+
 import { Dialog } from './Dialog'
 
 interface OpenLocalFileProps {