@apollo-annotation/jbrowse-plugin-apollo 0.1.20 → 0.2.0

package/src/components/DeleteFeature.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/unbound-method */
 /* eslint-disable @typescript-eslint/no-misused-promises */
 import { AnnotationFeature } from '@apollo-annotation/mst'
 import { DeleteFeatureChange } from '@apollo-annotation/shared'

package/src/components/LogOut.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/unbound-method */
 import {
   Button,
   DialogActions,
@@ -49,7 +50,7 @@ export function LogOut({ handleClose, session }: DeleteAssemblyProps) {
     event.preventDefault()
     setErrorMessage('')
     selectedInternetAccount.removeToken()
-    window.location.reload()
+    globalThis.location.reload()
   }
 
   return (

package/src/components/ManageChecks.tsx

@@ -182,7 +182,7 @@ export function ManageChecks({ handleClose, session }: ManageChecksProps) {
       }
     } else {
       const index = checks.indexOf(_id, 0)
-      if (index > -1) {
+      if (index !== -1) {
         checks.splice(index, 1)
       }
       setSelectedChecks(checks)

package/src/components/ManageUsers.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/unbound-method */
 /* eslint-disable @typescript-eslint/use-unknown-in-catch-callback-variable */
 /* eslint-disable @typescript-eslint/no-unnecessary-condition */
 /* eslint-disable @typescript-eslint/no-misused-promises */
@@ -154,7 +155,7 @@ export function ManageUsers({
           key={`delete-${params.id}`}
           icon={<DeleteIcon />}
           onClick={async () => {
-            if (window.confirm('Delete this user?')) {
+            if (globalThis.confirm('Delete this user?')) {
               await deleteUser(params.id)
             }
           }}

package/src/components/OntologyTermAutocomplete.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-unnecessary-condition */
-/* eslint-disable @typescript-eslint/no-unsafe-argument */
-/* eslint-disable @typescript-eslint/no-unsafe-member-access */
-import { AbstractSessionModel, isAbortException } from '@jbrowse/core/util'
+
+import { AbstractSessionModel } from '@jbrowse/core/util'
+import { isAbortException } from '@jbrowse/core/util/aborting'
 import {
   Autocomplete,
   AutocompleteRenderInputParams,
@@ -76,7 +76,6 @@ export function OntologyTermAutocomplete({
   // effect for clearing choices when not open
   useEffect(() => {
     if (!open) {
-      // eslint-disable-next-line unicorn/no-useless-undefined
       setTermChoices(undefined)
     }
   }, [open])
@@ -93,7 +92,7 @@ export function OntologyTermAutocomplete({
             setCurrentOntologyTerm(term)
           }
         },
-        (error) => {
+        (error: unknown) => {
           if (!signal.aborted && !isAbortException(error)) {
             setCurrentOntologyTermInvalid(String(error))
           }
@@ -116,10 +115,10 @@ export function OntologyTermAutocomplete({
             setTermChoices(soTerms)
           }
         },
-        (error) => {
+        (error: unknown) => {
           if (!signal.aborted && !isAbortException(error)) {
             ;(session as unknown as AbstractSessionModel).notify(
-              error.message,
+              error instanceof Error ? error.message : String(error),
               'error',
             )
           }
@@ -145,7 +144,6 @@ export function OntologyTermAutocomplete({
       return
     }
     if (typeof newValue === 'string') {
-      // eslint-disable-next-line unicorn/no-useless-undefined
       setCurrentOntologyTerm(undefined)
       onChange(valueString, newValue)
     } else if (newValue.lbl !== valueString) {
@@ -212,7 +210,7 @@ async function getCurrentTerm(
     currentTermLabel,
     { includeSubclasses: false },
   )
-  const term = terms.find(filterTerms ?? (() => true))
+  const term = terms.find((term) => (filterTerms ?? (() => true))(term))
   if (!term) {
     throw new Error(`not a valid ${ontologyStore.ontologyName} term`)
   }

package/src/components/OntologyTermMultiSelect.tsx

@@ -1,6 +1,7 @@
+/* eslint-disable @typescript-eslint/unbound-method */
 /* eslint-disable @typescript-eslint/use-unknown-in-catch-callback-variable */
 /* eslint-disable @typescript-eslint/no-unnecessary-condition */
-import { isAbortException } from '@jbrowse/core/util'
+import { isAbortException } from '@jbrowse/core/util/aborting'
 import {
   Autocomplete,
   AutocompleteRenderGetTagProps,

package/src/components/OpenLocalFile.tsx

@@ -1,3 +1,5 @@
+/* eslint-disable @typescript-eslint/no-unsafe-call */
+/* 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'
@@ -35,7 +37,7 @@ export function OpenLocalFile({ handleClose, session }: OpenLocalFileProps) {
   const { apolloDataStore } = session
   const { addAssembly, addSessionAssembly, assemblyManager, notify } =
     session as unknown as AbstractSessionModel & {
-      // eslint-disable-next-line @typescript-eslint/ban-types
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
       addSessionAssembly: Function
     }
 

package/src/components/ViewChangeLog.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/unbound-method */
 /* eslint-disable @typescript-eslint/use-unknown-in-catch-callback-variable */
 /* eslint-disable @typescript-eslint/no-unnecessary-condition */
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */

package/src/components/ViewCheckResults.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/unbound-method */
 /* eslint-disable @typescript-eslint/use-unknown-in-catch-callback-variable */
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
 /* eslint-disable @typescript-eslint/no-unsafe-argument */

package/src/config.ts

@@ -5,6 +5,11 @@ import { OntologyRecordConfiguration } from './OntologyManager'
 
 const ApolloPluginConfigurationSchema = ConfigurationSchema('ApolloPlugin', {
   ontologies: types.array(OntologyRecordConfiguration),
+  featureTypeOntologyName: {
+    description: 'Name of the feature type ontology',
+    type: 'string',
+    defaultValue: 'Sequence Ontology',
+  },
 })
 
 export default ApolloPluginConfigurationSchema

package/src/extensions/annotationFromPileup.ts

@@ -17,7 +17,7 @@ import { ApolloSessionModel } from '../session'
 
 function parseCigar(cigar: string): [string | undefined, number][] {
   return (cigar.toUpperCase().match(/\d+\D/g) ?? []).map((op) => {
-    return [(op.match(/\D/) ?? [])[0], Number.parseInt(op, 10)]
+    return [(/\D/.exec(op) ?? [])[0], Number.parseInt(op, 10)]
   })
 }
 

package/src/index.ts

@@ -64,7 +64,7 @@ import {
 } from './FeatureDetailsWidget'
 import {
   stateModelFactory as LinearApolloDisplayStateModelFactory,
-  configSchemaFactory as linearApolloDisplayConfigSchemaFactory,
+  configSchema as linearApolloDisplayConfigSchema,
 } from './LinearApolloDisplay'
 import {
   DisplayComponent,
@@ -174,7 +174,7 @@ export default class ApolloPlugin extends Plugin {
     })
 
     pluginManager.addDisplayType(() => {
-      const configSchema = linearApolloDisplayConfigSchemaFactory(pluginManager)
+      const configSchema = linearApolloDisplayConfigSchema
       return new DisplayType({
         name: 'LinearApolloDisplay',
         configSchema,

package/src/makeDisplayComponent.tsx

@@ -3,7 +3,7 @@ import PluginManager from '@jbrowse/core/PluginManager'
 import type LinearGenomeViewPlugin from '@jbrowse/plugin-linear-genome-view'
 import ExpandLessIcon from '@mui/icons-material/ExpandLess'
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
-import { Typography, alpha } from '@mui/material'
+import { Alert, Typography, alpha } from '@mui/material'
 import { observer } from 'mobx-react'
 import React, { useCallback, useEffect, useRef } from 'react'
 import { makeStyles } from 'tss-react/mui'
@@ -14,6 +14,9 @@ import { TrackLines } from './SixFrameFeatureDisplay/components'
 import { SixFrameFeatureDisplay } from './SixFrameFeatureDisplay/stateModel'
 import { TabularEditorPane } from './TabularEditor'
 
+import { getSession } from '@jbrowse/core/util'
+import { ApolloSessionModel } from './session'
+
 const accordionControlHeight = 12
 
 const useStyles = makeStyles()((theme) => ({
@@ -52,6 +55,11 @@ const useStyles = makeStyles()((theme) => ({
     // position: 'relative',
     userSelect: 'none',
   },
+  alertContainer: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
 }))
 
 function scrollSelectedFeatureIntoView(
@@ -87,9 +95,9 @@ const ResizeHandle = ({
     (event: MouseEvent) => {
       event.stopPropagation()
       event.preventDefault()
-      window.removeEventListener('mousemove', mouseMove)
-      window.removeEventListener('mouseup', cancelDrag)
-      window.removeEventListener('mouseleave', cancelDrag)
+      globalThis.removeEventListener('mousemove', mouseMove)
+      globalThis.removeEventListener('mouseup', cancelDrag)
+      globalThis.removeEventListener('mouseleave', cancelDrag)
     },
     [mouseMove],
   )
@@ -99,9 +107,9 @@ const ResizeHandle = ({
     <div
       onMouseDown={(event: React.MouseEvent) => {
         event.stopPropagation()
-        window.addEventListener('mousemove', mouseMove)
-        window.addEventListener('mouseup', cancelDrag)
-        window.addEventListener('mouseleave', cancelDrag)
+        globalThis.addEventListener('mousemove', mouseMove)
+        globalThis.addEventListener('mouseup', cancelDrag)
+        globalThis.addEventListener('mouseleave', cancelDrag)
       }}
       onClick={(e) => {
         e.stopPropagation()
@@ -155,51 +163,88 @@ export const DisplayComponent = observer(function DisplayComponent({
 }: {
   model: LinearApolloDisplayI
 }) {
+  const session = getSession(model) as unknown as ApolloSessionModel
+  const { ontologyManager } = session.apolloDataStore
+  const { featureTypeOntology } = ontologyManager
+  const ontologyStore = featureTypeOntology?.dataStore
+
   const { classes } = useStyles()
 
   const {
+    detailsHeight,
+    graphical,
     height: overallHeight,
     isShown,
     selectedFeature,
+    table,
     tabularEditor,
     toggleShown,
   } = model
-  const detailsHeight = tabularEditor.isShown ? model.detailsHeight : 0
-  const featureAreaHeight = isShown
-    ? overallHeight - detailsHeight - accordionControlHeight * 2
-    : 0
-
-  const onDetailsResize = (delta: number) => {
-    model.setDetailsHeight(model.detailsHeight - delta)
-  }
 
   const canvasScrollContainerRef = useRef<HTMLDivElement>(null)
   useEffect(() => {
     scrollSelectedFeatureIntoView(model, canvasScrollContainerRef)
   }, [model, selectedFeature])
-  return (
-    <div className={classes.details} style={{ height: overallHeight }}>
-      <AccordionControl
-        open={isShown}
-        title="Graphical"
-        onClick={toggleShown}
-      />
+
+  const onDetailsResize = (delta: number) => {
+    model.setDetailsHeight(detailsHeight - delta)
+  }
+
+  if (!ontologyStore) {
+    return (
+      <div className={classes.alertContainer}>
+        <Alert severity="error">Could not load feature type ontology.</Alert>
+      </div>
+    )
+  }
+
+  if (graphical && table) {
+    const tabularHeight = tabularEditor.isShown ? detailsHeight : 0
+    const featureAreaHeight = isShown
+      ? overallHeight - detailsHeight - accordionControlHeight * 2
+      : 0
+    return (
+      <div style={{ height: overallHeight }}>
+        <AccordionControl
+          open={isShown}
+          title="Graphical"
+          onClick={toggleShown}
+        />
+        <div
+          className={classes.shading}
+          ref={canvasScrollContainerRef}
+          style={{ height: featureAreaHeight }}
+        >
+          <LinearApolloDisplay model={model} {...other} />
+        </div>
+        <AccordionControl
+          title="Table"
+          open={tabularEditor.isShown}
+          onClick={tabularEditor.togglePane}
+          onResize={onDetailsResize}
+        />
+        <div className={classes.details} style={{ height: tabularHeight }}>
+          <TabularEditorPane model={model} />
+        </div>
+      </div>
+    )
+  }
+
+  if (graphical) {
+    return (
       <div
         className={classes.shading}
         ref={canvasScrollContainerRef}
-        style={{ height: featureAreaHeight }}
+        style={{ height: overallHeight }}
       >
         <LinearApolloDisplay model={model} {...other} />
       </div>
-      <AccordionControl
-        title="Table"
-        open={tabularEditor.isShown}
-        onClick={tabularEditor.togglePane}
-        onResize={onDetailsResize}
-      />
-      <div style={{ height: detailsHeight }}>
-        <TabularEditorPane model={model} />
-      </div>
+    )
+  }
+
+  return (
+    <div className={classes.details} style={{ height: overallHeight }}>
+      <TabularEditorPane model={model} />
     </div>
   )
 })

package/src/session/ClientDataStore.ts

@@ -51,6 +51,7 @@ export function clientDataStoreFactory(
       typeName: types.optional(types.literal('Client'), 'Client'),
       assemblies: types.map(ApolloAssembly),
       checkResults: types.map(CheckResult),
+      ontologyManager: types.optional(OntologyManagerType, {}),
     })
     .views((self) => ({
       get internetAccounts() {
@@ -136,7 +137,6 @@ export function clientDataStoreFactory(
       desktopFileDriver: isElectron
         ? new DesktopFileDriver(self as unknown as ClientDataStoreType)
         : undefined,
-      ontologyManager: OntologyManagerType.create(),
     }))
     .actions((self) => ({
       afterCreate() {

package/src/session/session.ts

@@ -419,6 +419,7 @@ export function extendSession(
           ([, assembly]) => assembly.backendDriverType === 'InMemoryFileDriver',
         ),
       )
+      // @ts-expect-error ontologyManager isn't actually required
       snap.apolloDataStore = {
         typeName: 'Client',
         assemblies,
@@ -433,5 +434,5 @@ export type ApolloSessionStateModel = ReturnType<typeof extendSession>
 // @ts-expect-error Snapshots seem to mess up types here
 // eslint disable because of
 // https://mobx-state-tree.js.org/tips/typescript#using-a-mst-type-at-design-time
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
 export interface ApolloSessionModel extends Instance<ApolloSessionStateModel> {}

package/src/LinearApolloDisplay/stateModel/trackHeightMixin.ts

@@ -1,43 +0,0 @@
-// TODO: get this added to LGV runtime exports so we don't have to duplicate it
-import { getConf } from '@jbrowse/core/configuration'
-import { types } from 'mobx-state-tree'
-
-const minDisplayHeight = 20
-
-/**
- * #stateModel TrackHeightMixin
- * #category display
- */
-export const TrackHeightMixin = types
-  .model({
-    heightPreConfig: types.maybe(
-      types.refinement(
-        'displayHeight',
-        types.number,
-        (n) => n >= minDisplayHeight,
-      ),
-    ),
-  })
-  .volatile(() => ({
-    scrollTop: 0,
-  }))
-  .views((self) => ({
-    get height() {
-      // @ts-expect-error getConf needs self.configuration
-      return self.heightPreConfig ?? (getConf(self, 'height') as number)
-    },
-  }))
-  .actions((self) => ({
-    setScrollTop(scrollTop: number) {
-      self.scrollTop = scrollTop
-    },
-    setHeight(displayHeight: number) {
-      self.heightPreConfig = Math.max(displayHeight, minDisplayHeight)
-      return self.height
-    },
-    resizeHeight(distance: number) {
-      const oldHeight = self.height
-      const newHeight = this.setHeight(self.height + distance)
-      return newHeight - oldHeight
-    },
-  }))