Typescripting

plugins/breakpoint-split-view/src/BreakpointAlignmentsFeatureDetail/index.js → plugins/breakpoint-split-view/src/BreakpointAlignmentsFeatureDetail/index.ts

@@ -11,7 +11,7 @@ const stateModel = types
     featureData: types.frozen(),
   })
   .actions(self => ({
-    setFeatureData(data) {
+    setFeatureData(data: unknown) {
       self.featureData = data
     },
     clearFeatureData() {

plugins/dotplot-view/src/ServerSideSyntenyRendering.js → plugins/dotplot-view/src/ServerSideSyntenyRendering.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
 import React, { useRef, useState, useEffect } from 'react'
 import { observer, PropTypes } from 'mobx-react'
 import { drawImageOntoCanvasContext } from '@jbrowse/core/util/offscreenCanvasPonyfill'
@@ -6,20 +7,31 @@ import { drawImageOntoCanvasContext } from '@jbrowse/core/util/offscreenCanvasPo
  * A block whose content is rendered outside of the main thread and hydrated by this
  * component.
  */
-function ServerSideSyntenyRendering(props) {
-  const { model } = props
+function ServerSideSyntenyRendering({
+  model,
+}: {
+  model: {
+    imageData: string
+    style: Record<string, string>
+    renderProps: {
+      width: number
+      height: number
+      highResolutionScaling?: number
+    }
+  }
+}) {
   const { imageData, style, renderProps } = model
   const { width, height, highResolutionScaling = 1 } = renderProps
 
-  const featureCanvas = useRef()
+  const featureCanvas = useRef<HTMLCanvasElement>(null)
   const [done, setDone] = useState(false)
 
   useEffect(() => {
     if (!imageData) {
       return
     }
-    const canvas = featureCanvas.current
-    const context = canvas.getContext('2d')
+    const canvas = featureCanvas.current!
+    const context = canvas.getContext('2d')!
     drawImageOntoCanvasContext(imageData, context)
     setDone(true)
   }, [height, imageData, width])

plugins/legacy-jbrowse/src/JBrowse1Connection/model.tsx

@@ -0,0 +1,77 @@
+import {
+  ConfigurationReference,
+  readConfObject,
+} from '@jbrowse/core/configuration'
+import { getSession } from '@jbrowse/core/util'
+import { BaseConnectionModelFactory } from '@jbrowse/core/pluggableElementTypes/models'
+import { types } from 'mobx-state-tree'
+import configSchema from './configSchema'
+
+import { fetchJb1 } from './jb1ConfigLoad'
+import { convertTrackConfig } from './jb1ToJb2'
+import PluginManager from '@jbrowse/core/PluginManager'
+
+export default function (pluginManager: PluginManager) {
+  return types
+    .compose(
+      'JBrowse1Connection',
+      BaseConnectionModelFactory(pluginManager),
+      types.model({
+        configuration: ConfigurationReference(configSchema),
+        type: types.literal('JBrowse1Connection'),
+      }),
+    )
+
+    .actions(self => ({
+      connect() {
+        const dataDirLocation = readConfObject(
+          self.configuration,
+          'dataDirLocation',
+        )
+        const session = getSession(self)
+        fetchJb1(dataDirLocation)
+          .then(config => {
+            const assemblyName = readConfObject(
+              self.configuration,
+              'assemblyNames',
+            )[0]
+            if (!assemblyName) {
+              throw new Error('assembly name required for JBrowse 1 connection')
+            }
+            const assemblyConf = session.assemblies.find(
+              assembly => readConfObject(assembly, 'name') === assemblyName,
+            )
+            if (!assemblyConf) {
+              throw new Error(`Assembly "${assemblyName}" not found`)
+            }
+            const sequenceAdapter = readConfObject(assemblyConf, [
+              'sequence',
+              'adapter',
+            ])
+
+            // @ts-ignore
+            const jb2Tracks = config.tracks?.map(jb1Track => {
+              const jb2Track = convertTrackConfig(
+                jb1Track,
+                config.dataRoot || '',
+                sequenceAdapter,
+              )
+
+              // @ts-ignore
+              jb2Track.assemblyNames = [assemblyName]
+              return jb2Track
+            })
+
+            self.setTrackConfs(jb2Tracks)
+          })
+          .catch(error => {
+            console.error(error)
+            session.notify(
+              `There was a problem connecting to the JBrowse 1 data directory "${self.name}". Please make sure you have entered a valid location. The error that was thrown is: "${error}"`,
+              'error',
+            )
+            session.breakConnection(self.configuration)
+          })
+      },
+    }))
+}

plugins/linear-comparative-view/src/BlockError.js → plugins/linear-comparative-view/src/BlockError.tsx

@@ -11,7 +11,7 @@ const useStyles = makeStyles()({
   },
 })
 
-function BlockError({ error, reload }) {
+function BlockError({ error, reload }: { error: unknown; reload: () => void }) {
   // reload function gets passed here
   const { classes } = useStyles()
   return (
@@ -26,7 +26,7 @@ function BlockError({ error, reload }) {
         </Button>
       ) : null}
       <Typography color="error" variant="body2">
-        {error.message}
+        {`${error}`}
       </Typography>
     </div>
   )

plugins/linear-comparative-view/src/ServerSideRenderedContent.js → plugins/linear-comparative-view/src/ServerSideRenderedContent.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
 import { observer } from 'mobx-react'
 
-function ServerSideRenderedContent(props) {
-  const { model } = props
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function ServerSideRenderedContent({ model }: { model: any }) {
   const { data, renderProps, renderingComponent: RenderingComponent } = model
 
   return model.filled ? (

plugins/trackhub-registry/src/trackhub-registry/SelectBox.js → plugins/trackhub-registry/src/trackhub-registry/SelectBox.tsx

@@ -1,11 +1,14 @@
-import FormControl from '@mui/material/FormControl'
-import FormHelperText from '@mui/material/FormHelperText'
-import InputLabel from '@mui/material/InputLabel'
-import MenuItem from '@mui/material/MenuItem'
-import Select from '@mui/material/Select'
-import { makeStyles } from 'tss-react/mui'
-import PropTypes from 'prop-types'
 import React from 'react'
+import {
+  FormControl,
+  InputLabel,
+  FormHelperText,
+  MenuItem,
+  Select,
+  SelectChangeEvent,
+} from '@mui/material'
+
+import { makeStyles } from 'tss-react/mui'
 
 const useStyles = makeStyles()(theme => ({
   formControl: {
@@ -21,12 +24,20 @@ function SelectBox({
   handleSelect,
   label,
   helpText,
+}: {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  selectList: any[]
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  selectedItem: any
+  label: string
+  helpText: string
+  handleSelect: (evt: SelectChangeEvent) => void
 }) {
   const { classes } = useStyles()
   return (
     <FormControl className={classes.formControl}>
       <InputLabel>{label}</InputLabel>
-      <Select value={selectedItem} onChange={handleSelect}>
+      <Select value={selectedItem} onChange={handleSelect} label={helpText}>
         {selectList.map(item => {
           let value
           let description
@@ -41,19 +52,10 @@ function SelectBox({
           )
         })}
       </Select>
-      <FormHelperText>{selectedItem ? '' : helpText}</FormHelperText>
+
+      <FormHelperText>{helpText}</FormHelperText>
     </FormControl>
   )
 }
 
-SelectBox.propTypes = {
-  selectList: PropTypes.arrayOf(
-    PropTypes.oneOfType([PropTypes.string, PropTypes.shape()]),
-  ).isRequired,
-  selectedItem: PropTypes.string.isRequired,
-  handleSelect: PropTypes.func.isRequired,
-  label: PropTypes.string.isRequired,
-  helpText: PropTypes.string.isRequired,
-}
-
 export default SelectBox

plugins/variants/src/ChordVariantDisplay/models/ChordVariantDisplay.js → plugins/variants/src/ChordVariantDisplay/models/ChordVariantDisplay.ts

@@ -9,8 +9,9 @@ import {
 import { types } from 'mobx-state-tree'
 import { getContainingView } from '@jbrowse/core/util'
 import { getParentRenderProps } from '@jbrowse/core/util/tracks'
+import PluginManager from '@jbrowse/core/PluginManager'
 
-const ChordVariantDisplayF = pluginManager => {
+const ChordVariantDisplayF = (pluginManager: PluginManager) => {
   const configSchema = ConfigurationSchema(
     'ChordVariantDisplay',
     {
@@ -36,14 +37,16 @@ const ChordVariantDisplayF = pluginManager => {
         return self.configuration.renderer.type
       },
 
-      renderProps() {
+      renderProps(): Record<string, unknown> {
         const view = getContainingView(self)
         return {
           ...getParentRenderProps(self),
           rpcDriverName: self.rpcDriverName,
           displayModel: self,
           bezierRadius: view.radiusPx * self.bezierRadiusRatio,
           radius: view.radiusPx,
+
+          // @ts-ignore
           blockDefinitions: this.blockDefinitions,
           config: self.configuration.renderer,
           onChordClick: self.onChordClick,