@apollo-annotation/jbrowse-plugin-apollo 0.3.5 → 0.3.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apollo-annotation/jbrowse-plugin-apollo",
-  "version": "0.3.5",
+  "version": "0.3.7",
   "description": "Apollo plugin for JBrowse 2",
   "keywords": [
     "jbrowse",
@@ -48,9 +48,9 @@
     }
   },
   "dependencies": {
-    "@apollo-annotation/common": "^0.3.5",
-    "@apollo-annotation/mst": "^0.3.5",
-    "@apollo-annotation/shared": "^0.3.5",
+    "@apollo-annotation/common": "^0.3.7",
+    "@apollo-annotation/mst": "^0.3.7",
+    "@apollo-annotation/shared": "^0.3.7",
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.6",
     "@gmod/gff": "1.2.0",

package/src/ApolloInternetAccount/addMenuItems.ts

@@ -1,4 +1,7 @@
-import { AbstractMenuManager, AbstractSessionModel } from '@jbrowse/core/util'
+import {
+  type AbstractMenuManager,
+  type AbstractSessionModel,
+} from '@jbrowse/core/util'
 
 import {
   AddAssembly,
@@ -7,7 +10,8 @@ import {
   ImportFeatures,
   ManageUsers,
 } from '../components'
-import { ApolloSessionModel } from '../session'
+import { AddAssemblyAliases } from '../components/AddAssemblyAliases'
+import { type ApolloSessionModel } from '../session'
 
 export function addMenuItems(rootModel: AbstractMenuManager) {
   rootModel.appendToMenu('Apollo', {
@@ -78,6 +82,23 @@ export function addMenuItems(rootModel: AbstractMenuManager) {
       )
     },
   })
+  rootModel.appendToMenu('Apollo', {
+    label: 'Add Assembly aliases',
+    onClick: (session: ApolloSessionModel) => {
+      ;(session as unknown as AbstractSessionModel).queueDialog(
+        (doneCallback) => [
+          AddAssemblyAliases,
+          {
+            session,
+            handleClose: () => {
+              doneCallback()
+            },
+            changeManager: session.apolloDataStore.changeManager,
+          },
+        ],
+      )
+    },
+  })
   rootModel.appendToMenu('Apollo', {
     label: 'Manage Users',
     onClick: (session: ApolloSessionModel) => {

package/src/ApolloInternetAccount/components/AuthTypeSelector.tsx

@@ -12,6 +12,7 @@ import { makeStyles } from 'tss-react/mui'
 
 import { Dialog } from '../../components/Dialog'
 import { createFetchErrorMessage } from '../../util'
+
 import { GoogleButton, GuestButton, MicrosoftButton } from './LoginButtons'
 
 const useStyles = makeStyles()((theme) => ({

package/src/ApolloInternetAccount/components/LoginButtons.tsx

@@ -1,5 +1,5 @@
 import AccountCircleIcon from '@mui/icons-material/AccountCircle'
-import { Button, ButtonProps } from '@mui/material'
+import { Button, type ButtonProps } from '@mui/material'
 import React from 'react'
 import { makeStyles } from 'tss-react/mui'
 

package/src/ApolloInternetAccount/components/LoginIcons.tsx

@@ -1,4 +1,4 @@
-import { SvgIcon, SvgIconProps } from '@mui/material'
+import { SvgIcon, type SvgIconProps } from '@mui/material'
 import React from 'react'
 
 // Icon source: https://developers.google.com/identity/branding-guidelines

package/src/ApolloInternetAccount/configSchema.ts

@@ -1,6 +1,6 @@
 import { ConfigurationSchema } from '@jbrowse/core/configuration'
 import { BaseInternetAccountConfig } from '@jbrowse/core/pluggableElementTypes'
-import { Instance } from 'mobx-state-tree'
+import { type Instance } from 'mobx-state-tree'
 
 const ApolloConfigSchema = ConfigurationSchema(
   'ApolloInternetAccount',

package/src/ApolloInternetAccount/model.ts

@@ -7,31 +7,32 @@
 /* eslint-disable @typescript-eslint/no-misused-promises */
 import { Change } from '@apollo-annotation/common'
 import {
-  ChangeMessage,
-  CheckResultUpdate,
-  RequestUserInformationMessage,
-  UserLocation,
-  UserLocationMessage,
+  type ChangeMessage,
+  type CheckResultUpdate,
+  type RequestUserInformationMessage,
+  type UserLocation,
+  type UserLocationMessage,
   getDecodedToken,
   makeUserSessionId,
 } from '@apollo-annotation/shared'
 import { ConfigurationReference, getConf } from '@jbrowse/core/configuration'
 import { InternetAccount } from '@jbrowse/core/pluggableElementTypes'
 import {
-  AbstractSessionModel,
+  type AbstractSessionModel,
   isAbstractMenuManager,
   isElectron,
 } from '@jbrowse/core/util'
 import { autorun } from 'mobx'
-import { Instance, flow, getRoot, types } from 'mobx-state-tree'
+import { type Instance, flow, getRoot, types } from 'mobx-state-tree'
 import { io } from 'socket.io-client'
 
-import { Collaborator } from '../session'
-import { ApolloRootModel } from '../types'
+import { type Collaborator } from '../session'
+import { type ApolloRootModel } from '../types'
 import { createFetchErrorMessage } from '../util'
+
 import { addMenuItems } from './addMenuItems'
 import { AuthTypeSelector } from './components/AuthTypeSelector'
-import { ApolloInternetAccountConfigModel } from './configSchema'
+import { type ApolloInternetAccountConfigModel } from './configSchema'
 
 type AuthType = 'google' | 'microsoft' | 'guest'
 

package/src/ApolloJobModel.ts

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
 /* eslint-disable @typescript-eslint/no-confusing-void-expression */
 import {
-  SessionWithWidgets,
+  type SessionWithWidgets,
   getSession,
   isSessionModelWithWidgets,
 } from '@jbrowse/core/util'

package/src/ApolloRefNameAliasAdapter/ApolloRefNameAliasAdapter.ts

@@ -1,13 +1,15 @@
-import { RefNameAliases } from './../BackendDrivers/BackendDriver'
+import { readConfObject } from '@jbrowse/core/configuration'
 import {
-  BaseRefNameAliasAdapter,
   BaseAdapter,
+  type BaseRefNameAliasAdapter,
 } from '@jbrowse/core/data_adapters/BaseAdapter'
-import { readConfObject } from '@jbrowse/core/configuration'
-import { ApolloSessionModel } from '../session'
-import { BackendDriver } from '../BackendDrivers'
+import type RpcServer from 'librpc-web-mod/dist/server'
 import { nanoid } from 'nanoid'
-import RpcServer from 'librpc-web-mod/dist/server'
+
+import { type BackendDriver } from '../BackendDrivers'
+import { type ApolloSessionModel } from '../session'
+
+import { type RefNameAliases } from './../BackendDrivers/BackendDriver'
 
 declare global {
   const rpcServer: RpcServer

package/src/ApolloRefNameAliasAdapter/index.ts

@@ -1,8 +1,8 @@
+import type PluginManager from '@jbrowse/core/PluginManager'
 import AdapterType from '@jbrowse/core/pluggableElementTypes/AdapterType'
-import PluginManager from '@jbrowse/core/PluginManager'
 
-import configSchema from './configSchema'
 import ApolloRefNameAliasAdapter from './ApolloRefNameAliasAdapter'
+import configSchema from './configSchema'
 
 export function installApolloRefNameAliasAdapter(pluginManager: PluginManager) {
   pluginManager.addAdapterType(

package/src/ApolloSequenceAdapter/ApolloSequenceAdapter.ts

@@ -6,12 +6,12 @@
 import { readConfObject } from '@jbrowse/core/configuration'
 import { BaseSequenceAdapter } from '@jbrowse/core/data_adapters/BaseAdapter'
 import { ObservableCreate } from '@jbrowse/core/util/rxjs'
-import SimpleFeature, { Feature } from '@jbrowse/core/util/simpleFeature'
-import { NoAssemblyRegion, Region } from '@jbrowse/core/util/types'
+import SimpleFeature, { type Feature } from '@jbrowse/core/util/simpleFeature'
+import { type NoAssemblyRegion, type Region } from '@jbrowse/core/util/types'
 import { nanoid } from 'nanoid'
 
-import { BackendDriver } from '../BackendDrivers'
-import { ApolloSessionModel } from '../session'
+import { type BackendDriver } from '../BackendDrivers'
+import { type ApolloSessionModel } from '../session'
 
 // declare global {
 //   var rpcServer: import('librpc-web-mod').RpcServer

package/src/ApolloSequenceAdapter/index.ts

@@ -1,5 +1,5 @@
+import type PluginManager from '@jbrowse/core/PluginManager'
 import AdapterType from '@jbrowse/core/pluggableElementTypes/AdapterType'
-import PluginManager from '@jbrowse/core/PluginManager'
 
 import { ApolloSequenceAdapter } from './ApolloSequenceAdapter'
 import configSchema from './configSchema'

package/src/ApolloTextSearchAdapter/ApolloTextSearchAdapter.ts

@@ -1,14 +1,15 @@
-import { AnnotationFeatureSnapshot } from '@apollo-annotation/mst'
+import { type AnnotationFeatureSnapshot } from '@apollo-annotation/mst'
+import BaseResult from '@jbrowse/core/TextSearch/BaseResults'
+import { type Assembly } from '@jbrowse/core/assemblyManager/assembly'
 import { readConfObject } from '@jbrowse/core/configuration'
 import {
   BaseAdapter,
-  BaseTextSearchAdapter,
-  BaseTextSearchArgs,
+  type BaseTextSearchAdapter,
+  type BaseTextSearchArgs,
 } from '@jbrowse/core/data_adapters/BaseAdapter'
-import BaseResult from '@jbrowse/core/TextSearch/BaseResults'
-import { AbstractSessionModel, UriLocation } from '@jbrowse/core/util'
-import { ApolloSessionModel } from '../session'
-import { Assembly } from '@jbrowse/core/assemblyManager/assembly'
+import { type AbstractSessionModel, type UriLocation } from '@jbrowse/core/util'
+
+import { type ApolloSessionModel } from '../session'
 
 export class ApolloTextSearchAdapter
   extends BaseAdapter

package/src/ApolloTextSearchAdapter/index.ts

@@ -1,5 +1,5 @@
+import type PluginManager from '@jbrowse/core/PluginManager'
 import { TextSearchAdapterType } from '@jbrowse/core/pluggableElementTypes'
-import PluginManager from '@jbrowse/core/PluginManager'
 
 import { ApolloTextSearchAdapter } from './ApolloTextSearchAdapter'
 import configSchema from './configSchema'

package/src/BackendDrivers/BackendDriver.ts

@@ -1,13 +1,13 @@
-import { Change, ClientDataStore } from '@apollo-annotation/common'
+import { type Change, type ClientDataStore } from '@apollo-annotation/common'
 import {
-  AnnotationFeatureSnapshot,
-  CheckResultSnapshot,
+  type AnnotationFeatureSnapshot,
+  type CheckResultSnapshot,
 } from '@apollo-annotation/mst'
-import { ValidationResultSet } from '@apollo-annotation/shared'
-import { Assembly } from '@jbrowse/core/assemblyManager/assembly'
-import { Region } from '@jbrowse/core/util'
+import { type ValidationResultSet } from '@apollo-annotation/shared'
+import { type Assembly } from '@jbrowse/core/assemblyManager/assembly'
+import { type Region } from '@jbrowse/core/util'
 
-import { SubmitOpts } from '../ChangeManager'
+import { type SubmitOpts } from '../ChangeManager'
 
 export interface RefNameAliases {
   refName: string

package/src/BackendDrivers/CollaborationServerDriver.ts

@@ -4,21 +4,25 @@
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 /* eslint-disable @typescript-eslint/no-unsafe-call */
 /* eslint-disable @typescript-eslint/no-unnecessary-condition */
-import { AssemblySpecificChange, Change } from '@apollo-annotation/common'
+import { type AssemblySpecificChange, Change } from '@apollo-annotation/common'
 import {
-  AnnotationFeatureSnapshot,
-  ApolloRefSeqI,
-  CheckResultSnapshot,
+  type AnnotationFeatureSnapshot,
+  type ApolloRefSeqI,
+  type CheckResultSnapshot,
 } from '@apollo-annotation/mst'
-import { ChangeMessage, ValidationResultSet } from '@apollo-annotation/shared'
+import {
+  type ChangeMessage,
+  ValidationResultSet,
+} from '@apollo-annotation/shared'
 import { getConf } from '@jbrowse/core/configuration'
-import { BaseInternetAccountModel } from '@jbrowse/core/pluggableElementTypes'
-import { Region, getSession } from '@jbrowse/core/util'
-import { Socket } from 'socket.io-client'
+import { type BaseInternetAccountModel } from '@jbrowse/core/pluggableElementTypes'
+import { type Region, getSession } from '@jbrowse/core/util'
+import { type Socket } from 'socket.io-client'
 
-import { ChangeManager, SubmitOpts } from '../ChangeManager'
+import { ChangeManager, type SubmitOpts } from '../ChangeManager'
 import { createFetchErrorMessage } from '../util'
-import { BackendDriver, RefNameAliases } from './BackendDriver'
+
+import { BackendDriver, type RefNameAliases } from './BackendDriver'
 
 export interface ApolloRefSeqResponse {
   _id: string

package/src/BackendDrivers/DesktopFileDriver.ts

@@ -1,25 +1,26 @@
 /* eslint-disable @typescript-eslint/require-await */
 import {
-  AssemblySpecificChange,
-  Change,
+  type AssemblySpecificChange,
+  type Change,
   isAssemblySpecificChange,
 } from '@apollo-annotation/common'
 import {
-  AnnotationFeatureSnapshot,
-  CheckResultSnapshot,
+  type AnnotationFeatureSnapshot,
+  type CheckResultSnapshot,
 } from '@apollo-annotation/mst'
 import {
-  annotationFeatureToGFF3,
   ValidationResultSet,
+  annotationFeatureToGFF3,
   splitStringIntoChunks,
 } from '@apollo-annotation/shared'
-import gff, { GFF3Item } from '@gmod/gff'
+import gff, { type GFF3Item } from '@gmod/gff'
 import { getConf } from '@jbrowse/core/configuration'
-import { Region, getSession } from '@jbrowse/core/util'
+import { type Region, getSession } from '@jbrowse/core/util'
 import { getSnapshot } from 'mobx-state-tree'
 
 import { checkFeatures, loadAssemblyIntoClient } from '../util'
-import { BackendDriver, RefNameAliases } from './BackendDriver'
+
+import { BackendDriver, type RefNameAliases } from './BackendDriver'
 
 export class DesktopFileDriver extends BackendDriver {
   async loadAssembly(assemblyName: string) {
@@ -32,7 +33,7 @@ export class DesktopFileDriver extends BackendDriver {
       file: string
     }
 
-    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    // eslint-disable-next-line @typescript-eslint/no-require-imports, @typescript-eslint/consistent-type-imports
     const fs = require('node:fs') as typeof import('fs')
     const fileContents = await fs.promises.readFile(file, 'utf8')
     return loadAssemblyIntoClient(assemblyName, fileContents, this.clientStore)
@@ -166,7 +167,7 @@ export class DesktopFileDriver extends BackendDriver {
 
     const gff3Contents = gff.formatSync(gff3Items)
 
-    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    // eslint-disable-next-line @typescript-eslint/no-require-imports, @typescript-eslint/consistent-type-imports
     const fs = require('node:fs') as typeof import('fs')
     await fs.promises.writeFile(file, gff3Contents, 'utf8')
 

package/src/BackendDrivers/InMemoryFileDriver.ts

@@ -1,17 +1,21 @@
 /* eslint-disable @typescript-eslint/require-await */
-import { AssemblySpecificChange, Change } from '@apollo-annotation/common'
 import {
-  AnnotationFeatureSnapshot,
-  CheckResultSnapshot,
+  type AssemblySpecificChange,
+  type Change,
+} from '@apollo-annotation/common'
+import {
+  type AnnotationFeatureSnapshot,
+  type CheckResultSnapshot,
 } from '@apollo-annotation/mst'
 import { ValidationResultSet } from '@apollo-annotation/shared'
 import { getConf } from '@jbrowse/core/configuration'
-import { Region, getSession } from '@jbrowse/core/util'
+import { type Region, getSession } from '@jbrowse/core/util'
 
-import { SubmitOpts } from '../ChangeManager'
-import { BackendDriver, RefNameAliases } from './BackendDriver'
+import { type SubmitOpts } from '../ChangeManager'
 import { checkFeatures } from '../util'
 
+import { BackendDriver, type RefNameAliases } from './BackendDriver'
+
 export class InMemoryFileDriver extends BackendDriver {
   async getFeatures(): Promise<
     [AnnotationFeatureSnapshot[], CheckResultSnapshot[]]

package/src/ChangeManager.ts

@@ -2,18 +2,18 @@
 /* eslint-disable @typescript-eslint/no-unsafe-call */
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 import {
-  Change,
-  ClientDataStore,
+  type Change,
+  type ClientDataStore,
   isAssemblySpecificChange,
 } from '@apollo-annotation/common'
 import {
-  ValidationResultSet,
+  type ValidationResultSet,
   validationRegistry,
 } from '@apollo-annotation/shared'
 import { getSession } from '@jbrowse/core/util'
-import { IAnyStateTreeNode } from 'mobx-state-tree'
+import { type IAnyStateTreeNode } from 'mobx-state-tree'
 
-import { ApolloSessionModel } from './session'
+import { type ApolloSessionModel } from './session'
 
 export interface SubmitOpts {
   /** defaults to true */
@@ -76,7 +76,10 @@ export class ChangeManager {
         jobsManager.abortJob(job.name, String(error))
       }
       console.error(error)
-      session.notify(String(error), 'error')
+      session.notify(
+        `Error encountered in client: ${String(error)}. Data may be out of sync, please refresh the page`,
+        'error',
+      )
       return
     }
 
@@ -123,10 +126,10 @@ export class ChangeManager {
       if (change.notification) {
         session.notify(change.notification, 'success')
       }
-    }
-    if (addToRecents) {
-      // Push the change into array
-      this.recentChanges.push(change)
+      if (addToRecents) {
+        // Push the change into array
+        this.recentChanges.push(change)
+      }
     }
 
     if (updateJobsManager) {
@@ -136,7 +139,8 @@ export class ChangeManager {
 
   async revert(change: Change, submitToBackend = true) {
     const inverseChange = change.getInverse()
-    return this.submit(inverseChange, { submitToBackend, addToRecents: false })
+    const opts = { submitToBackend, addToRecents: false }
+    return this.submit(inverseChange, opts)
   }
 
   /**

package/src/FeatureDetailsWidget/ApolloFeatureDetailsWidget.tsx

@@ -1,21 +1,22 @@
 import { getSession } from '@jbrowse/core/util'
-import { observer } from 'mobx-react'
-import React, { useEffect, useState } from 'react'
-import { makeStyles } from 'tss-react/mui'
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
 import {
   Accordion,
   AccordionDetails,
   AccordionSummary,
   Typography,
 } from '@mui/material'
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
+import { observer } from 'mobx-react'
+import React, { useEffect, useState } from 'react'
+import { makeStyles } from 'tss-react/mui'
+
+import { type ApolloSessionModel } from '../session'
 
-import { ApolloSessionModel } from '../session'
 import { Attributes } from './Attributes'
 import { BasicInformation } from './BasicInformation'
-import { ApolloFeatureDetailsWidget as ApolloFeatureDetails } from './model'
-import { Sequence } from './Sequence'
 import { FeatureDetailsNavigation } from './FeatureDetailsNavigation'
+import { Sequence } from './Sequence'
+import { type ApolloFeatureDetailsWidget as ApolloFeatureDetails } from './model'
 
 const useStyles = makeStyles()((theme) => ({
   root: {

package/src/FeatureDetailsWidget/ApolloTranscriptDetailsWidget.tsx

@@ -1,8 +1,12 @@
-import { AbstractSessionModel, getSession } from '@jbrowse/core/util'
-import { observer } from 'mobx-react'
-import { getRoot } from 'mobx-state-tree'
-import React, { useEffect, useState } from 'react'
-import { makeStyles } from 'tss-react/mui'
+import { type AnnotationFeature } from '@apollo-annotation/mst'
+import styled from '@emotion/styled'
+import {
+  type AbstractSessionModel,
+  getEnv,
+  getSession,
+} from '@jbrowse/core/util'
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
+import InfoIcon from '@mui/icons-material/Info'
 import {
   Accordion,
   AccordionDetails,
@@ -10,20 +14,25 @@ import {
   Tooltip,
   Typography,
 } from '@mui/material'
+import { observer } from 'mobx-react'
+import { getRoot } from 'mobx-state-tree'
+import React, { useEffect, useState } from 'react'
+import { makeStyles } from 'tss-react/mui'
 
-import styled from '@emotion/styled'
-
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
-import InfoIcon from '@mui/icons-material/Info'
+import { type ApolloInternetAccountModel } from '../ApolloInternetAccount/model'
+import { type ApolloSessionModel } from '../session'
+import { type ApolloRootModel } from '../types'
 
-import { ApolloInternetAccountModel } from '../ApolloInternetAccount/model'
-import { ApolloSessionModel } from '../session'
-import { ApolloRootModel } from '../types'
 import { Attributes } from './Attributes'
 import { TranscriptSequence } from './TranscriptSequence'
-import { ApolloTranscriptDetailsWidget as ApolloTranscriptDetailsWidgetState } from './model'
-import { TranscriptWidgetSummary } from './TranscriptWidgetSummary'
 import { TranscriptWidgetEditLocation } from './TranscriptWidgetEditLocation'
+import { TranscriptWidgetSummary } from './TranscriptWidgetSummary'
+import { type ApolloTranscriptDetailsWidget as ApolloTranscriptDetailsWidgetState } from './model'
+
+interface CustomComponentProps {
+  session: AbstractSessionModel
+  feature: AnnotationFeature
+}
 
 const useStyles = makeStyles()((theme) => ({
   root: {
@@ -40,6 +49,10 @@ export const StyledAccordionSummary = styled(AccordionSummary)(() => ({
   },
 }))
 
+function NoOpCustomComponent(_props: CustomComponentProps) {
+  return null
+}
+
 export const ApolloTranscriptDetailsWidget = observer(
   function ApolloTranscriptDetails(props: {
     model: ApolloTranscriptDetailsWidgetState
@@ -57,6 +70,7 @@ export const ApolloTranscriptDetailsWidget = observer(
     }, [feature])
 
     const session = getSession(model) as unknown as AbstractSessionModel
+    const { pluginManager } = getEnv(session)
     const apolloSession = getSession(model) as unknown as ApolloSessionModel
     const currentAssembly =
       apolloSession.apolloDataStore.assemblies.get(assembly)
@@ -92,6 +106,12 @@ export const ApolloTranscriptDetailsWidget = observer(
       }
     }
 
+    const CustomComponent = pluginManager.evaluateExtensionPoint(
+      'Apollo-TranscriptDetailsCustomComponent',
+      NoOpCustomComponent,
+      props,
+    ) as React.ElementType<CustomComponentProps>
+
     return (
       <div className={classes.root}>
         <Accordion
@@ -113,6 +133,7 @@ export const ApolloTranscriptDetailsWidget = observer(
             <TranscriptWidgetSummary feature={feature} refName={refName} />
           </AccordionDetails>
         </Accordion>
+        <CustomComponent session={session} feature={feature} />
         <Accordion
           style={{ marginTop: 5 }}
           expanded={panelState.includes('location')}

package/src/FeatureDetailsWidget/AttributeKey.tsx

@@ -0,0 +1,50 @@
+import {
+  gffInternalToColumn,
+  internalToGFF,
+  isGFFColumnInternal,
+  isGFFInternalAttribute,
+} from '@apollo-annotation/shared'
+import InfoIcon from '@mui/icons-material/Info'
+import { Chip, Tooltip, Typography } from '@mui/material'
+import React from 'react'
+import { makeStyles } from 'tss-react/mui'
+
+const useStyles = makeStyles()((theme) => ({
+  attributeKey: {
+    fontWeight: 'bold',
+    marginRight: theme.spacing(2),
+  },
+}))
+
+export function AttributeKey({ attributeKey: key }: { attributeKey: string }) {
+  const { classes } = useStyles()
+
+  const startsWithCapital = /^[A-Z]/.test(key)
+  let displayKey = key
+  let titleText: string | undefined
+  if (isGFFInternalAttribute(key)) {
+    displayKey = internalToGFF[key]
+    titleText = `On GFF3 export, this will be assigned to the GFF3's reserved "${displayKey}" attribute`
+  } else if (isGFFColumnInternal(key)) {
+    displayKey = gffInternalToColumn[key]
+    titleText = `On GFF3 export, this will be placed in the GFF3's "${displayKey}" column`
+  } else if (startsWithCapital) {
+    titleText =
+      'On GFF3 export, this attribute will be changed to start with a lower-case letter because attributes starting with an upper-case letter are reserved in GFF3'
+  }
+  return (
+    <div style={{ display: 'flex' }}>
+      <Typography className={classes.attributeKey}>{displayKey}</Typography>
+      {titleText ? (
+        <Tooltip title={titleText}>
+          <Chip
+            icon={<InfoIcon />}
+            label="GFF3"
+            size="small"
+            variant="outlined"
+          />
+        </Tooltip>
+      ) : null}
+    </div>
+  )
+}