@jbrowse/plugin-circular-view 1.7.11 → 2.1.0

package/src/BaseChordDisplay/components/Loading.tsx

@@ -1,117 +1,114 @@
-import PluginManager from '@jbrowse/core/PluginManager'
+import React, { useState, useEffect } from 'react'
+import { makeStyles } from 'tss-react/mui'
+import { observer } from 'mobx-react'
 
-export default (pluginManager: PluginManager) => {
-  const { lib } = pluginManager
-  const React = lib.react
-  const { useState, useEffect } = React
-  const { makeStyles } = lib['@material-ui/core/styles']
-  const { observer } = lib['mobx-react']
+const useStyles = makeStyles()(theme => {
+  const offset = 2
+  const duration = 1.4
 
-  const useStyles = makeStyles(theme => {
-    const offset = 2
-    const duration = 1.4
-    return {
-      path: {
-        strokeDasharray: 187,
-        strokeDashoffset: 50,
-        animation: `$dash ${duration}s ease-in-out infinite, $colors ${
-          duration * 4
-        }s ease-in-out infinite`,
+  // @ts-ignore
+  const { primary, secondary, tertiary, quaternary } = theme.palette
+  return {
+    path: {
+      strokeDasharray: 187,
+      strokeDashoffset: 50,
+      animation: `$dash ${duration}s ease-in-out infinite, $colors ${
+        duration * 4
+      }s ease-in-out infinite`,
+    },
+    '@keyframes colors': {
+      '0%': {
+        stroke: primary.light,
       },
-      '@keyframes colors': {
-        '0%': {
-          stroke: theme.palette.primary.light,
-        },
-        '25%': {
-          stroke: theme.palette.secondary.light,
-        },
-        '50%': {
-          stroke: theme.palette.tertiary.light,
-        },
-        '75%': {
-          stroke: theme.palette.quaternary.light,
-        },
-        '100%': {
-          stroke: theme.palette.primary.light,
-        },
+      '25%': {
+        stroke: secondary.light,
       },
-      '@keyframes dash': {
-        '0%': {
-          strokeDashoffset: offset,
-        },
-        '50%': {
-          strokeDashoffset: offset / 4,
-          transform: 'rotate(135deg)',
-        },
-        '100%': {
-          strokeDashoffset: offset,
-          transform: 'rotate(720deg)',
-        },
+      '50%': {
+        stroke: tertiary.light,
       },
-    }
-  })
-
-  // 'repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(255,255,255,.5) 5px, rgba(255,255,255,.5) 10px)',
-  const Loading = observer(
-    ({
-      model: {
-        renderProps: { radius },
+      '75%': {
+        stroke: quaternary.light,
+      },
+      '100%': {
+        stroke: primary.light,
+      },
+    },
+    '@keyframes dash': {
+      '0%': {
+        strokeDashoffset: offset,
+      },
+      '50%': {
+        strokeDashoffset: offset / 4,
+        transform: 'rotate(135deg)',
       },
-    }: {
-      model: { renderProps: { radius: number } }
-    }) => {
-      const classes = useStyles()
+      '100%': {
+        strokeDashoffset: offset,
+        transform: 'rotate(720deg)',
+      },
+    },
+  }
+})
 
-      // only show the loading message after 400ms to prevent excessive flickering
-      const [shown, setShown] = useState(false)
-      useEffect(() => {
-        const timeout = setTimeout(() => setShown(true), 400)
-        return () => clearTimeout(timeout)
-      })
+// 'repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(255,255,255,.5) 5px, rgba(255,255,255,.5) 10px)',
+const Loading = observer(
+  ({
+    model: {
+      renderProps: { radius },
+    },
+  }: {
+    model: { renderProps: { radius: number } }
+  }) => {
+    const { classes } = useStyles()
 
-      return !shown ? null : (
-        <g>
-          <defs>
-            <pattern
-              id="diagonalHatch"
-              width="10"
-              height="10"
-              patternTransform="rotate(45 0 0)"
-              patternUnits="userSpaceOnUse"
-            >
-              <line
-                x1="0"
-                y1="0"
-                x2="0"
-                y2="10"
-                style={{ stroke: 'rgba(255,255,255,0.5)', strokeWidth: 10 }}
-              />
-            </pattern>
-          </defs>
-          <circle cx="0" cy="0" r={radius} fill="#f1f1f1" />
-          <circle cx="0" cy="0" r={radius} fill="url(#diagonalHatch)" />
-          <text
-            x="0"
-            y="0"
-            transform="rotate(90 0 0)"
-            dominantBaseline="middle"
-            textAnchor="middle"
+    // only show the loading message after 400ms to prevent excessive flickering
+    const [shown, setShown] = useState(false)
+    useEffect(() => {
+      const timeout = setTimeout(() => setShown(true), 400)
+      return () => clearTimeout(timeout)
+    })
+
+    return !shown ? null : (
+      <g>
+        <defs>
+          <pattern
+            id="diagonalHatch"
+            width="10"
+            height="10"
+            patternTransform="rotate(45 0 0)"
+            patternUnits="userSpaceOnUse"
           >
-            Loading&hellip;
-          </text>
-          <circle
-            className={classes.path}
-            fill="none"
-            strokeWidth="4"
-            strokeLinecap="round"
-            cx="0"
-            cy="0"
-            r="60"
-          />
-        </g>
-      )
-    },
-  )
+            <line
+              x1="0"
+              y1="0"
+              x2="0"
+              y2="10"
+              style={{ stroke: 'rgba(255,255,255,0.5)', strokeWidth: 10 }}
+            />
+          </pattern>
+        </defs>
+        <circle cx="0" cy="0" r={radius} fill="#f1f1f1" />
+        <circle cx="0" cy="0" r={radius} fill="url(#diagonalHatch)" />
+        <text
+          x="0"
+          y="0"
+          transform="rotate(90 0 0)"
+          dominantBaseline="middle"
+          textAnchor="middle"
+        >
+          Loading&hellip;
+        </text>
+        <circle
+          className={classes.path}
+          fill="none"
+          strokeWidth="4"
+          strokeLinecap="round"
+          cx="0"
+          cy="0"
+          r="60"
+        />
+      </g>
+    )
+  },
+)
 
-  return Loading
-}
+export default Loading

package/src/BaseChordDisplay/components/RpcRenderedSvgGroup.js

@@ -1,64 +1,57 @@
-export default ({ jbrequire }) => {
-  const React = jbrequire('react')
-  const { isAlive } = jbrequire('mobx-state-tree')
-  const { useEffect, useRef } = React
-  const { observer, PropTypes: MobxPropTypes } = jbrequire('mobx-react')
-  const { unmountComponentAtNode, hydrate } = jbrequire('react-dom')
-  const { rIC } = jbrequire('@jbrowse/core/util')
+import React, { useEffect, useRef } from 'react'
+import { isAlive } from 'mobx-state-tree'
+import { observer } from 'mobx-react'
+import { hydrate, unmountComponentAtNode } from 'react-dom'
+import { rIC } from '@jbrowse/core/util'
 
-  function RpcRenderedSvgGroup({ model }) {
-    const { data, html, filled, renderingComponent } = model
+function RpcRenderedSvgGroup({ model }) {
+  const { data, html, filled, renderingComponent } = model
 
-    const ssrContainerNode = useRef(null)
+  const ssrContainerNode = useRef(null)
 
-    useEffect(() => {
-      const domNode = ssrContainerNode.current
-      function doHydrate() {
-        if (domNode && filled) {
-          if (domNode && domNode.innerHTML) {
-            domNode.style.display = 'none'
-            unmountComponentAtNode(domNode)
-          }
+  useEffect(() => {
+    const domNode = ssrContainerNode.current
+    function doHydrate() {
+      if (domNode && filled) {
+        if (domNode.innerHTML) {
+          domNode.style.display = 'none'
+          unmountComponentAtNode(domNode)
+        }
 
-          // setting outline:none fixes react "focusable" element issue. see
-          // https://github.com/GMOD/jbrowse-components/issues/2160
-          domNode.style.outline = 'none'
-          domNode.innerHTML = html
-          // use requestIdleCallback to defer main-thread rendering
-          // and hydration for when we have some free time. helps
-          // keep the framerate up.
+        // setting outline:none fixes react "focusable" element issue. see
+        // https://github.com/GMOD/jbrowse-components/issues/2160
+        domNode.style.outline = 'none'
+        domNode.innerHTML = html
+        // use requestIdleCallback to defer main-thread rendering
+        // and hydration for when we have some free time. helps
+        // keep the framerate up.
+        rIC(() => {
+          if (!isAlive(model)) {
+            return
+          }
+          const mainThreadRendering = React.createElement(
+            renderingComponent,
+            { ...data, ...model.renderProps() },
+            null,
+          )
           rIC(() => {
             if (!isAlive(model)) {
               return
             }
-            const mainThreadRendering = React.createElement(
-              renderingComponent,
-              { ...data, ...model.renderProps() },
-              null,
-            )
-            rIC(() => {
-              if (!isAlive(model)) {
-                return
-              }
-              hydrate(mainThreadRendering, domNode)
-            })
+            hydrate(mainThreadRendering, domNode)
           })
-        }
+        })
       }
-      doHydrate()
-      return () => {
-        if (domNode) {
-          unmountComponentAtNode(domNode)
-        }
+    }
+    doHydrate()
+    return () => {
+      if (domNode) {
+        unmountComponentAtNode(domNode)
       }
-    })
-
-    return <g ref={ssrContainerNode} />
-  }
+    }
+  })
 
-  RpcRenderedSvgGroup.propTypes = {
-    model: MobxPropTypes.observableObject.isRequired,
-  }
-
-  return observer(RpcRenderedSvgGroup)
+  return <g ref={ssrContainerNode} />
 }
+
+export default observer(RpcRenderedSvgGroup)

package/src/BaseChordDisplay/index.ts

@@ -1,3 +1,3 @@
-export { default as BaseChordDisplayComponentFactory } from './components/BaseChordDisplay'
+export { default as BaseChordDisplayComponent } from './components/BaseChordDisplay'
 export { BaseChordDisplayModel } from './models/BaseChordDisplayModel'
 export { baseChordDisplayConfig } from './models/baseChordDisplayConfig'

package/src/BaseChordDisplay/models/BaseChordDisplayModel.ts

@@ -208,7 +208,8 @@ export const BaseChordDisplayModel = types
           self,
           () => ({
             assemblyNames: getTrackAssemblyNames(self.parentTrack) as string[],
-            adapter: getConf(getParent(self, 2), 'adapter'),
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            adapter: getConf(getParent<any>(self, 2), 'adapter'),
             assemblyManager: getSession(self).assemblyManager,
           }),
           // eslint-disable-next-line @typescript-eslint/no-explicit-any

package/src/CircularView/components/CircularView.js

@@ -2,16 +2,17 @@ import React from 'react'
 import { observer } from 'mobx-react'
 import { ResizeHandle, ErrorMessage } from '@jbrowse/core/ui'
 import { assembleLocString } from '@jbrowse/core/util'
-import { IconButton, makeStyles } from '@material-ui/core'
-import { grey } from '@material-ui/core/colors'
+import { IconButton } from '@mui/material'
+import { makeStyles } from 'tss-react/mui'
+import { grey } from '@mui/material/colors'
 
 // icons
-import ZoomOut from '@material-ui/icons/ZoomOut'
-import ZoomIn from '@material-ui/icons/ZoomIn'
-import RotateLeft from '@material-ui/icons/RotateLeft'
-import RotateRight from '@material-ui/icons/RotateRight'
-import LockOutline from '@material-ui/icons/LockOutlined'
-import LockOpen from '@material-ui/icons/LockOpen'
+import ZoomOutIcon from '@mui/icons-material/ZoomOut'
+import ZoomInIcon from '@mui/icons-material/ZoomIn'
+import RotateLeftIcon from '@mui/icons-material/RotateLeft'
+import RotateRightIcon from '@mui/icons-material/RotateRight'
+import LockOpenIcon from '@mui/icons-material/LockOpen'
+import LockIcon from '@mui/icons-material/Lock'
 import { TrackSelector as TrackSelectorIcon } from '@jbrowse/core/ui/Icons'
 
 // locals
@@ -20,7 +21,7 @@ import ImportForm from './ImportForm'
 
 const dragHandleHeight = 3
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles()(theme => ({
   root: {
     position: 'relative',
     marginBottom: theme.spacing(1),
@@ -83,7 +84,7 @@ const Slices = observer(({ model }) => {
 })
 
 const Controls = observer(({ model, showingFigure }) => {
-  const classes = useStyles()
+  const { classes } = useStyles()
   return (
     <div className={classes.controls}>
       <IconButton
@@ -95,7 +96,7 @@ const Controls = observer(({ model, showingFigure }) => {
         }
         color="secondary"
       >
-        <ZoomOut />
+        <ZoomOutIcon />
       </IconButton>
 
       <IconButton
@@ -105,7 +106,7 @@ const Controls = observer(({ model, showingFigure }) => {
         disabled={!showingFigure || model.atMinBpPerPx}
         color="secondary"
       >
-        <ZoomIn />
+        <ZoomInIcon />
       </IconButton>
 
       <IconButton
@@ -115,7 +116,7 @@ const Controls = observer(({ model, showingFigure }) => {
         disabled={!showingFigure}
         color="secondary"
       >
-        <RotateLeft />
+        <RotateLeftIcon />
       </IconButton>
 
       <IconButton
@@ -125,7 +126,7 @@ const Controls = observer(({ model, showingFigure }) => {
         disabled={!showingFigure}
         color="secondary"
       >
-        <RotateRight />
+        <RotateRightIcon />
       </IconButton>
 
       <IconButton
@@ -139,7 +140,7 @@ const Controls = observer(({ model, showingFigure }) => {
         disabled={model.tooSmallToLock}
         color="secondary"
       >
-        {model.lockedFitToWindow ? <LockOutline /> : <LockOpen />}
+        {model.lockedFitToWindow ? <LockIcon /> : <LockOpenIcon />}
       </IconButton>
 
       {model.hideTrackSelectorButton ? null : (
@@ -157,7 +158,7 @@ const Controls = observer(({ model, showingFigure }) => {
 })
 
 const CircularView = observer(({ model }) => {
-  const classes = useStyles()
+  const { classes } = useStyles()
   const initialized =
     !!model.displayedRegions.length && model.figureWidth && model.figureHeight
 

package/src/CircularView/components/ImportForm.tsx

@@ -1,11 +1,11 @@
 import React, { useState } from 'react'
-import { Button, Container, Grid, makeStyles } from '@material-ui/core'
+import { Button, Container, Grid } from '@mui/material'
+import { makeStyles } from 'tss-react/mui'
 import { observer } from 'mobx-react'
 import { getSession } from '@jbrowse/core/util'
-import ErrorMessage from '@jbrowse/core/ui/ErrorMessage'
-import AssemblySelector from '@jbrowse/core/ui/AssemblySelector'
+import { ErrorMessage, AssemblySelector } from '@jbrowse/core/ui'
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles()(theme => ({
   importFormContainer: {
     marginBottom: theme.spacing(4),
   },
@@ -13,7 +13,7 @@ const useStyles = makeStyles(theme => ({
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const ImportForm = observer(({ model }: { model: any }) => {
-  const classes = useStyles()
+  const { classes } = useStyles()
   const session = getSession(model)
   const { error: modelError } = model
   const { assemblyNames, assemblyManager } = session

package/src/CircularView/components/Ruler.js

@@ -7,9 +7,10 @@ import {
   assembleLocString,
 } from '@jbrowse/core/util'
 import { makeContrasting } from '@jbrowse/core/util/color'
-import { makeStyles, useTheme } from '@material-ui/core/styles'
+import { useTheme } from '@mui/material/styles'
+import { makeStyles } from 'tss-react/mui'
 
-const useStyles = makeStyles({
+const useStyles = makeStyles()({
   rulerLabel: {
     fontSize: '0.8rem',
     fontWeight: 500,
@@ -89,7 +90,7 @@ const ElisionRulerArc = observer(({ model, slice }) => {
 
 const RulerLabel = observer(
   ({ view, text, maxWidthPx, radians, radiusPx, title, color }) => {
-    const classes = useStyles()
+    const { classes } = useStyles()
     const textXY = polarToCartesian(radiusPx + 5, radians)
     if (!text) {
       return null

package/src/CircularView/models/CircularView.ts

@@ -1,17 +1,20 @@
-import { AnyConfigurationModel } from '@jbrowse/core/configuration/configurationSchema'
 import PluginManager from '@jbrowse/core/PluginManager'
 import {
-  SnapshotOrInstance,
-  Instance,
-  types,
+  cast,
   getParent,
-  resolveIdentifier,
   getRoot,
-  cast,
+  resolveIdentifier,
+  types,
+  SnapshotOrInstance,
+  Instance,
 } from 'mobx-state-tree'
 import { Region } from '@jbrowse/core/util/types/mst'
 import { transaction } from 'mobx'
-import { readConfObject } from '@jbrowse/core/configuration'
+import {
+  AnyConfigurationModel,
+  readConfObject,
+} from '@jbrowse/core/configuration'
+
 import {
   getSession,
   clamp,
@@ -204,7 +207,7 @@ export default function CircularView(pluginManager: PluginManager) {
         },
       }))
       .volatile(() => ({
-        error: undefined as Error | undefined,
+        error: undefined as unknown,
       }))
       .actions(self => ({
         // toggle action with a flag stating which mode it's in
@@ -263,7 +266,8 @@ export default function CircularView(pluginManager: PluginManager) {
         },
 
         closeView() {
-          getParent(self, 2).removeView(self)
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          getParent<any>(self, 2).removeView(self)
         },
 
         setDisplayedRegions(regions: SnapshotOrInstance<typeof Region>[]) {
@@ -304,34 +308,27 @@ export default function CircularView(pluginManager: PluginManager) {
           }
         },
 
-        setError(error: Error) {
+        setError(error: unknown) {
           console.error(error)
           self.error = error
         },
 
         showTrack(trackId: string, initialSnapshot = {}) {
-          const trackConfigSchema =
-            pluginManager.pluggableConfigSchemaType('track')
-          const configuration = resolveIdentifier(
-            trackConfigSchema,
-            getRoot(self),
-            trackId,
-          )
-          const trackType = pluginManager.getTrackType(configuration.type)
+          const schema = pluginManager.pluggableConfigSchemaType('track')
+          const conf = resolveIdentifier(schema, getRoot(self), trackId)
+          const trackType = pluginManager.getTrackType(conf.type)
           if (!trackType) {
-            throw new Error(`unknown track type ${configuration.type}`)
+            throw new Error(`unknown track type ${conf.type}`)
           }
           const viewType = pluginManager.getViewType(self.type)
-          const supportedDisplays = viewType.displayTypes.map(
-            displayType => displayType.name,
-          )
-          const displayConf = configuration.displays.find(
-            (d: AnyConfigurationModel) => supportedDisplays.includes(d.type),
+          const supportedDisplays = viewType.displayTypes.map(d => d.name)
+          const displayConf = conf.displays.find((d: AnyConfigurationModel) =>
+            supportedDisplays.includes(d.type),
           )
           const track = trackType.stateModel.create({
             ...initialSnapshot,
-            type: configuration.type,
-            configuration,
+            type: conf.type,
+            configuration: conf,
             displays: [{ type: displayConf.type, configuration: displayConf }],
           })
           self.tracks.push(track)
@@ -348,9 +345,7 @@ export default function CircularView(pluginManager: PluginManager) {
             throw new Error(`unknown track type ${configuration.type}`)
           }
           const viewType = pluginManager.getViewType(self.type)
-          const supportedDisplays = viewType.displayTypes.map(
-            displayType => displayType.name,
-          )
+          const supportedDisplays = viewType.displayTypes.map(d => d.name)
           const displayConf = configuration.displays.find(
             (d: AnyConfigurationModel) => supportedDisplays.includes(d.type),
           )
@@ -365,19 +360,11 @@ export default function CircularView(pluginManager: PluginManager) {
         },
 
         hideTrack(trackId: string) {
-          const trackConfigSchema =
-            pluginManager.pluggableConfigSchemaType('track')
-          const configuration = resolveIdentifier(
-            trackConfigSchema,
-            getRoot(self),
-            trackId,
-          )
-          // if we have any tracks with that configuration, turn them off
-          const shownTracks = self.tracks.filter(
-            t => t.configuration === configuration,
-          )
-          transaction(() => shownTracks.forEach(t => self.tracks.remove(t)))
-          return shownTracks.length
+          const schema = pluginManager.pluggableConfigSchemaType('track')
+          const conf = resolveIdentifier(schema, getRoot(self), trackId)
+          const t = self.tracks.filter(t => t.configuration === conf)
+          transaction(() => t.forEach(t => self.tracks.remove(t)))
+          return t.length
         },
 
         toggleFitToWindowLock() {

package/src/CircularView/models/slices.ts

@@ -1,9 +1,4 @@
-import {
-  polarToCartesian,
-  assembleLocString,
-  objectFromEntries,
-  Region,
-} from '@jbrowse/core/util'
+import { polarToCartesian, assembleLocString, Region } from '@jbrowse/core/util'
 import { thetaRangesOverlap } from './viewportVisibleRegion'
 
 export class Slice {
@@ -50,7 +45,7 @@ export class Slice {
   }
 
   toJSON() {
-    return objectFromEntries(Object.entries(this))
+    return Object.fromEntries(Object.entries(this))
   }
 }
 

package/src/index.ts

@@ -4,9 +4,10 @@ import { AbstractSessionModel, isAbstractMenuManager } from '@jbrowse/core/util'
 import PluginManager from '@jbrowse/core/PluginManager'
 import Plugin from '@jbrowse/core/Plugin'
 import ViewType from '@jbrowse/core/pluggableElementTypes/ViewType'
-import DataUsageIcon from '@material-ui/icons/DataUsage'
+import DataUsageIcon from '@mui/icons-material/DataUsage'
 import stateModelFactory, {
   CircularViewModel,
+  CircularViewStateModel,
 } from './CircularView/models/CircularView'
 
 type CGV = CircularViewModel
@@ -81,5 +82,7 @@ export default class CircularViewPlugin extends Plugin {
 export {
   BaseChordDisplayModel,
   baseChordDisplayConfig,
-  BaseChordDisplayComponentFactory,
+  BaseChordDisplayComponent,
 } from './BaseChordDisplay'
+
+export type { CircularViewModel, CircularViewStateModel }