Add getEnv helper that resolves to proper PluginManager typescripting

packages/core/configuration/configurationSlot.ts

@@ -1,7 +1,8 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { types, IAnyModelType, IAnyComplexType, getEnv } from 'mobx-state-tree'
+import { types, IAnyModelType, IAnyComplexType } from 'mobx-state-tree'
 import { stringToJexlExpression } from '../util/jexlStrings'
 import { FileLocation } from '../util/types/mst'
+import { getEnv } from '../util'
 
 function isValidColorString(/* str */) {
   // TODO: check all the crazy cases for whether it's a valid HTML/CSS color string

packages/core/pluggableElementTypes/models/BaseDisplayModel.tsx

@@ -1,9 +1,10 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { getParent, Instance, types, isRoot, getEnv } from 'mobx-state-tree'
+import { getParent, Instance, types, isRoot } from 'mobx-state-tree'
 import React from 'react'
 import { getConf } from '../../configuration'
 import { MenuItem } from '../../ui'
 import { getParentRenderProps } from '../../util/tracks'
+import { getEnv } from '../../util'
 import { ElementId } from '../../util/types/mst'
 
 export const BaseDisplay = types

packages/core/pluggableElementTypes/models/BaseTrackModel.ts

@@ -1,11 +1,5 @@
 import { transaction } from 'mobx'
-import {
-  getEnv,
-  getRoot,
-  resolveIdentifier,
-  types,
-  Instance,
-} from 'mobx-state-tree'
+import { getRoot, resolveIdentifier, types, Instance } from 'mobx-state-tree'
 import {
   getConf,
   AnyConfigurationModel,
@@ -14,7 +8,7 @@ import {
 } from '../../configuration'
 import PluginManager from '../../PluginManager'
 import { MenuItem } from '../../ui'
-import { getContainingView, getSession } from '../../util'
+import { getContainingView, getSession, getEnv } from '../../util'
 import { isSessionModelWithConfigEditing } from '../../util/types'
 import { ElementId } from '../../util/types/mst'
 

packages/core/ui/AboutDialog.tsx

@@ -1,5 +1,4 @@
 import React, { useState, useEffect } from 'react'
-import { getEnv } from 'mobx-state-tree'
 import copy from 'copy-to-clipboard'
 import {
   Button,
@@ -16,7 +15,7 @@ import {
   readConfObject,
   AnyConfigurationModel,
 } from '../configuration'
-import { getSession } from '../util'
+import { getSession, getEnv } from '../util'
 import { getTrackName } from '../util/tracks'
 import { BaseCard, Attributes } from '../BaseFeatureWidget/BaseFeatureDetail'
 
@@ -59,9 +58,11 @@ export default function AboutDialog({
   }
 
   const { pluginManager } = getEnv(session)
-  pluginManager.evaluateExtensionPoist('Core-customizeAbout', confPost, {
-    session,
-  })
+  const confPostExt = pluginManager.evaluateExtensionPoint(
+    'Core-customizeAbout',
+    { conf: confPost },
+    { session },
+  ) as Record<string, unknown>
 
   useEffect(() => {
     const aborter = new AbortController()
@@ -121,7 +122,7 @@ export default function AboutDialog({
               variant="contained"
               style={{ float: 'right' }}
               onClick={() => {
-                copy(JSON.stringify(confPost, null, 2))
+                copy(JSON.stringify(conf, null, 2))
                 setCopied(true)
                 setTimeout(() => setCopied(false), 1000)
               }}
@@ -130,7 +131,7 @@ export default function AboutDialog({
             </Button>
           ) : null}
           <Attributes
-            attributes={confPost}
+            attributes={confPostExt}
             omit={['displays', 'baseUri', 'refNames', 'formatAbout']}
             hideUris={hideUris}
           />

packages/core/ui/DrawerWidget.tsx

@@ -13,7 +13,7 @@ import {
 } from '@mui/material'
 import { makeStyles } from 'tss-react/mui'
 import { observer } from 'mobx-react'
-import { getEnv } from 'mobx-state-tree'
+import { getEnv } from '../util'
 import { SessionWithDrawerWidgets } from '../util/types'
 
 // icons
@@ -58,7 +58,7 @@ const DrawerHeader = observer(
     const { visibleWidget, activeWidgets, drawerPosition } = session
     const { classes } = useStyles()
 
-    const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null)
+    const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)
 
     return (
       <AppBar
@@ -211,11 +211,13 @@ const DrawerWidget = observer(
           <ErrorBoundary
             FallbackComponent={({ error }) => <ErrorMessage error={error} />}
           >
-            <DrawerComponent
-              model={visibleWidget}
-              session={session}
-              toolbarHeight={toolbarHeight}
-            />
+            {DrawerComponent ? (
+              <DrawerComponent
+                model={visibleWidget}
+                session={session}
+                toolbarHeight={toolbarHeight}
+              />
+            ) : null}
           </ErrorBoundary>
         </Suspense>
       </Drawer>

packages/core/util/index.ts

@@ -1,10 +1,12 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { useEffect, useRef, useState } from 'react'
 import isObject from 'is-object'
+import PluginManager from '../PluginManager'
 import {
   addDisposer,
   getParent,
   getSnapshot,
+  getEnv as getEnvMST,
   isAlive,
   isStateTreeNode,
   hasParent,
@@ -1173,3 +1175,7 @@ export function measureGridWidth(elements: string[]) {
     ),
   )
 }
+
+export function getEnv(obj: any) {
+  return getEnvMST<{ pluginManager: PluginManager }>(obj)
+}

packages/core/util/tracks.ts

@@ -1,8 +1,11 @@
-import { getParent, isRoot, IAnyStateTreeNode, getEnv } from 'mobx-state-tree'
-import { getSession, objectHash } from './index'
+import { getParent, isRoot, IAnyStateTreeNode } from 'mobx-state-tree'
+import { getSession, objectHash, getEnv } from './index'
 import { PreFileLocation, FileLocation } from './types'
-import { AnyConfigurationModel } from '../configuration/configurationSchema'
-import { getConf, readConfObject } from '../configuration'
+import {
+  getConf,
+  readConfObject,
+  AnyConfigurationModel,
+} from '../configuration'
 
 /* utility functions for use by track models and so forth */
 

plugins/alignments/src/LinearPileupDisplay/components/LinearPileupDisplayBlurb.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { observer } from 'mobx-react'
-import Typography from '@mui/material/Typography'
+import { Typography } from '@mui/material'
 
 export interface LinearPileupDisplayBlurbProps {
   model: {

plugins/alignments/src/LinearPileupDisplay/model.ts

@@ -1,6 +1,6 @@
 import { lazy } from 'react'
 import { autorun, observable } from 'mobx'
-import { cast, types, addDisposer, getEnv, Instance } from 'mobx-state-tree'
+import { cast, types, addDisposer, Instance } from 'mobx-state-tree'
 import copy from 'copy-to-clipboard'
 import {
   AnyConfigurationModel,
@@ -10,6 +10,7 @@ import {
 } from '@jbrowse/core/configuration'
 import { getRpcSessionId } from '@jbrowse/core/util/tracks'
 import {
+  getEnv,
   getSession,
   isSessionModelWithWidgets,
   getContainingView,
@@ -213,6 +214,7 @@ const stateModelFactory = (configSchema: LinearPileupDisplayConfigModel) =>
                   const { pos, refName, assemblyName } = sortedBy
 
                   // render just the sorted region first
+                  // @ts-ignore
                   await self.rendererType.renderInClient(rpcManager, {
                     assemblyName,
                     regions: [

plugins/circular-view/src/BaseChordDisplay/models/BaseChordDisplayModel.ts

@@ -6,6 +6,7 @@ import RendererType from '@jbrowse/core/pluggableElementTypes/renderers/Renderer
 import {
   getContainingView,
   getSession,
+  getEnv,
   makeAbortableReaction,
   AnyReactComponentType,
 } from '@jbrowse/core/util'
@@ -16,7 +17,7 @@ import {
   getTrackAssemblyNames,
 } from '@jbrowse/core/util/tracks'
 import { Region } from '@jbrowse/core/util/types'
-import { getParent, isAlive, types, getEnv } from 'mobx-state-tree'
+import { getParent, isAlive, types } from 'mobx-state-tree'
 import { renderReactionData, renderReactionEffect } from './renderReaction'
 import { CircularViewModel } from '../../CircularView/models/CircularView'
 

plugins/config/src/ConfigurationEditorWidget/components/SlotEditor.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react'
 import { observer } from 'mobx-react'
-import { getPropertyMembers, getEnv, IAnyType } from 'mobx-state-tree'
+import { getPropertyMembers, IAnyType } from 'mobx-state-tree'
+import { getEnv, FileLocation } from '@jbrowse/core/util'
 import { FileSelector, SanitizedHTML } from '@jbrowse/core/ui'
 import {
   getPropertyType,
@@ -36,7 +37,6 @@ import StringArrayEditor from './StringArrayEditor'
 import CallbackEditor from './CallbackEditor'
 import ColorEditor from './ColorEditor'
 import JsonEditor from './JsonEditor'
-import { FileLocation } from '@jbrowse/core/util'
 
 // adds ability to have html in helperText. note that FormHelperTextProps is
 // div because the default is p which does not like div children

plugins/data-management/src/AddConnectionWidget/components/AddConnectionWidget.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { getSession } from '@jbrowse/core/util'
+import { getSession, getEnv } from '@jbrowse/core/util'
 import {
   Button,
   Step,
@@ -10,7 +10,6 @@ import {
 } from '@mui/material'
 import { makeStyles } from 'tss-react/mui'
 import { observer } from 'mobx-react'
-import { getEnv } from 'mobx-state-tree'
 import { ConnectionType } from '@jbrowse/core/pluggableElementTypes'
 
 // locals
@@ -51,9 +50,11 @@ function AddConnectionWidget({ model }: { model: unknown }) {
       case 0:
         return (
           <ConnectionTypeSelect
-            connectionTypeChoices={pluginManager.getElementTypesInGroup(
-              'connection',
-            )}
+            connectionTypeChoices={
+              pluginManager.getElementTypesInGroup(
+                'connection',
+              ) as ConnectionType[]
+            }
             connectionType={connectionType}
             setConnectionType={c => {
               setConnectionType(c)

plugins/data-management/src/AddTrackWidget/components/AddTrackWidget.tsx

@@ -2,8 +2,7 @@ import React from 'react'
 import { observer } from 'mobx-react'
 import { FormControl, FormHelperText, Select, MenuItem } from '@mui/material'
 import { AddTrackWorkflowType } from '@jbrowse/core/pluggableElementTypes'
-import { useLocalStorage } from '@jbrowse/core/util'
-import { getEnv } from 'mobx-state-tree'
+import { getEnv, useLocalStorage } from '@jbrowse/core/util'
 
 // locals
 import { AddTrackModel } from '../model'

plugins/data-management/src/AddTrackWidget/components/ConfirmTrack.tsx

@@ -1,10 +1,4 @@
 import React, { useEffect, useState } from 'react'
-import { readConfObject } from '@jbrowse/core/configuration'
-import {
-  supportedIndexingAdapters,
-  getSession,
-  isElectron,
-} from '@jbrowse/core/util'
 import {
   Card,
   CardContent,
@@ -24,19 +18,23 @@ import {
   Typography,
 } from '@mui/material'
 import { makeStyles } from 'tss-react/mui'
-
-// icons
-import DeleteIcon from '@mui/icons-material/Delete'
-import AddIcon from '@mui/icons-material//Add'
-// other
+import { readConfObject } from '@jbrowse/core/configuration'
+import {
+  supportedIndexingAdapters,
+  getSession,
+  getEnv,
+  isElectron,
+} from '@jbrowse/core/util'
 import PluginManager from '@jbrowse/core/PluginManager'
 import { observer } from 'mobx-react'
-import { getEnv } from 'mobx-state-tree'
 import { UNKNOWN } from '@jbrowse/core/util/tracks'
+import { AdapterMetadata } from '@jbrowse/core/pluggableElementTypes/AdapterType'
 
+// icons
+import DeleteIcon from '@mui/icons-material/Delete'
+import AddIcon from '@mui/icons-material//Add'
 // locals
 import { AddTrackModel } from '../model'
-import { AdapterMetadata } from '@jbrowse/core/pluggableElementTypes/AdapterType'
 
 const useStyles = makeStyles()(theme => ({
   spacing: {

plugins/data-management/src/AddTrackWidget/components/DefaultAddTrackWorkflow.tsx

@@ -9,6 +9,7 @@ import {
   Typography,
 } from '@mui/material'
 import { makeStyles } from 'tss-react/mui'
+import { getRoot } from 'mobx-state-tree'
 
 import {
   getSession,
@@ -17,7 +18,6 @@ import {
 } from '@jbrowse/core/util'
 import { getConf } from '@jbrowse/core/configuration'
 import { observer } from 'mobx-react'
-import { getEnv } from 'mobx-state-tree'
 
 // locals
 import ConfirmTrack from './ConfirmTrack'
@@ -52,9 +52,9 @@ const steps = ['Enter track data', 'Confirm track type']
 function AddTrackWorkflow({ model }: { model: AddTrackModel }) {
   const [activeStep, setActiveStep] = useState(0)
   const { classes } = useStyles()
-  const { pluginManager } = getEnv(model)
-  const { rootModel } = pluginManager
-  const { jobsManager } = rootModel
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const { jobsManager } = getRoot<any>(model)
   const session = getSession(model)
   const {
     assembly,

plugins/data-management/src/HierarchicalTrackSelectorWidget/components/Header.tsx

@@ -1,16 +1,11 @@
 import React, { Suspense, lazy, useState } from 'react'
-import { makeStyles } from 'tss-react/mui'
 import { Badge, IconButton, InputAdornment, TextField } from '@mui/material'
-// icons
-import ClearIcon from '@mui/icons-material/Clear'
-import MenuIcon from '@mui/icons-material/Menu'
-import ShoppingCartIcon from '@mui/icons-material/ShoppingCart'
-import { Cable } from '@jbrowse/core/ui/Icons'
-
-// other
+import { makeStyles } from 'tss-react/mui'
+import { observer } from 'mobx-react'
 import JBrowseMenu, { MenuItem } from '@jbrowse/core/ui/Menu'
 import {
   getSession,
+  getEnv,
   isSessionModelWithWidgets,
   isSessionModelWithConnections,
   isSessionWithAddTracks,
@@ -19,8 +14,12 @@ import {
   AnyConfigurationModel,
   readConfObject,
 } from '@jbrowse/core/configuration'
-import { observer } from 'mobx-react'
-import { getEnv } from 'mobx-state-tree'
+
+// icons
+import ClearIcon from '@mui/icons-material/Clear'
+import MenuIcon from '@mui/icons-material/Menu'
+import ShoppingCartIcon from '@mui/icons-material/ShoppingCart'
+import { Cable } from '@jbrowse/core/ui/Icons'
 
 // locals
 import { HierarchicalTrackSelectorModel } from '../model'

plugins/data-management/src/HierarchicalTrackSelectorWidget/model.ts

@@ -1,10 +1,10 @@
-import { types, getEnv, getSnapshot, Instance } from 'mobx-state-tree'
+import { types, getSnapshot, Instance } from 'mobx-state-tree'
 import {
   getConf,
   readConfObject,
   AnyConfigurationModel,
 } from '@jbrowse/core/configuration'
-import { AbstractSessionModel, getSession } from '@jbrowse/core/util'
+import { AbstractSessionModel, getSession, getEnv } from '@jbrowse/core/util'
 import { getTrackName } from '@jbrowse/core/util/tracks'
 import { ElementId } from '@jbrowse/core/util/types/mst'
 import PluginManager from '@jbrowse/core/PluginManager'