@jbrowse/plugin-circular-view 2.2.1 → 2.3.0

package/src/BaseChordDisplay/models/BaseChordDisplayModel.ts

@@ -1,4 +1,8 @@
 import React from 'react'
+import clone from 'clone'
+import { getParent, isAlive, types } from 'mobx-state-tree'
+
+// jbrowse
 import { getConf } from '@jbrowse/core/configuration'
 import { BaseDisplay } from '@jbrowse/core/pluggableElementTypes/models'
 import CircularChordRendererType from '@jbrowse/core/pluggableElementTypes/renderers/CircularChordRendererType'
@@ -7,17 +11,17 @@ import {
   getContainingView,
   getSession,
   getEnv,
+  isFeature,
   makeAbortableReaction,
   AnyReactComponentType,
+  Feature,
+  Region,
 } from '@jbrowse/core/util'
-import { Feature, isFeature } from '@jbrowse/core/util/simpleFeature'
 import {
   getParentRenderProps,
   getRpcSessionId,
   getTrackAssemblyNames,
 } from '@jbrowse/core/util/tracks'
-import { Region } from '@jbrowse/core/util/types'
-import { getParent, isAlive, types } from 'mobx-state-tree'
 
 // locals
 import { renderReactionData, renderReactionEffect } from './renderReaction'
@@ -27,252 +31,257 @@ import { CircularViewModel } from '../../CircularView/models/CircularView'
  * #stateModel BaseChordDisplay
  * extends `BaseDisplay`
  */
-function stateModelFactory() {
-  return types
-    .compose(
-      'BaseChordDisplay',
-      BaseDisplay,
-      types.model({
-        /**
-         * #property
-         */
-        bezierRadiusRatio: 0.1,
-        /**
-         * #property
-         */
-        assemblyName: types.maybe(types.string),
-      }),
-    )
-    .volatile(() => {
-      return {
-        // NOTE: all this volatile stuff has to be filled in at once
-        // so that it stays consistent
-        filled: false,
-        reactElement: undefined as React.ReactElement | undefined,
-        data: undefined,
-        message: '',
-        renderingComponent: undefined as undefined | AnyReactComponentType,
-        refNameMap: undefined as Record<string, string> | undefined,
-      }
-    })
-    .actions(self => {
-      const { pluginManager } = getEnv(self)
-      const track = self
-      return {
-        /**
-         * #action
-         */
-        onChordClick(feature: Feature) {
-          getConf(self, 'onChordClick', { feature, track, pluginManager })
-        },
-      }
-    })
-    .views(self => ({
+function x() {} // eslint-disable-line @typescript-eslint/no-unused-vars
+
+export const BaseChordDisplayModel = types
+  .compose(
+    'BaseChordDisplay',
+    BaseDisplay,
+    types.model({
       /**
-       * #getter
+       * #property
        */
-      get blockDefinitions() {
-        const origSlices = (getContainingView(self) as CircularViewModel)
-          .staticSlices
-        if (!self.refNameMap) {
-          return origSlices
-        }
+      bezierRadiusRatio: 0.1,
+      /**
+       * #property
+       */
+      assemblyName: types.maybe(types.string),
+    }),
+  )
+  .volatile(() => {
+    return {
+      // NOTE: all this volatile stuff has to be filled in at once
+      // so that it stays consistent
+      filled: false,
+      reactElement: undefined as React.ReactElement | undefined,
+      data: undefined,
+      html: undefined as string | undefined,
+      message: '',
+      renderingComponent: undefined as undefined | AnyReactComponentType,
+      refNameMap: undefined as Record<string, string> | undefined,
+    }
+  })
+  .actions(self => {
+    const { pluginManager } = getEnv(self)
+    const track = self
+    return {
+      /**
+       * #action
+       */
+      onChordClick(feature: Feature) {
+        getConf(self, 'onChordClick', { feature, track, pluginManager })
+      },
+    }
+  })
+  .views(self => ({
+    /**
+     * #getter
+     */
+    get blockDefinitions() {
+      const origSlices = (getContainingView(self) as CircularViewModel)
+        .staticSlices
+      if (!self.refNameMap) {
+        return origSlices
+      }
 
-        const slices = JSON.parse(JSON.stringify(origSlices))
+      const slices = clone(origSlices)
 
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        slices.forEach((slice: any) => {
-          const regions = slice.region.elided
-            ? slice.region.regions
-            : [slice.region]
-          regions.forEach((region: Region) => {
-            const renamed = self.refNameMap?.[region.refName]
-            if (renamed && region.refName !== renamed) {
-              region.refName = renamed
-            }
-          })
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      slices.forEach((slice: any) => {
+        const regions = slice.region.elided
+          ? slice.region.regions
+          : [slice.region]
+        regions.forEach((region: Region) => {
+          const renamed = self.refNameMap?.[region.refName]
+          if (renamed && region.refName !== renamed) {
+            region.refName = renamed
+          }
         })
-        return slices
-      },
+      })
+      return slices
+    },
 
-      /**
-       * #method
-       */
-      renderProps() {
-        const view = getContainingView(self) as CircularViewModel
-        return {
-          ...getParentRenderProps(self),
-          rpcDriverName: self.rpcDriverName,
-          displayModel: self,
-          bezierRadius: view.radiusPx * self.bezierRadiusRatio,
-          radius: view.radiusPx,
-          blockDefinitions: this.blockDefinitions,
-          onChordClick: self.onChordClick,
-        }
-      },
+    /**
+     * #method
+     */
+    renderProps() {
+      const view = getContainingView(self) as CircularViewModel
+      return {
+        ...getParentRenderProps(self),
+        rpcDriverName: self.rpcDriverName,
+        displayModel: self,
+        bezierRadius: view.radiusPx * self.bezierRadiusRatio,
+        radius: view.radiusPx,
+        blockDefinitions: this.blockDefinitions,
+        onChordClick: self.onChordClick,
+      }
+    },
 
-      /**
-       * #getter
-       * the pluggable element type object for this diplay's
-       * renderer
-       */
-      get rendererType() {
-        const display = self
-        const { pluginManager } = getEnv(self)
-        const ThisRendererType = pluginManager.getRendererType(
-          self.rendererTypeName,
+    /**
+     * #getter
+     * the pluggable element type object for this display's
+     * renderer
+     */
+    get rendererType() {
+      const display = self
+      const { pluginManager } = getEnv(self)
+      const ThisRendererType = pluginManager.getRendererType(
+        self.rendererTypeName,
+      )
+      if (!ThisRendererType) {
+        throw new Error(`renderer "${display.rendererTypeName}" not found`)
+      }
+      if (!ThisRendererType.ReactComponent) {
+        throw new Error(
+          `renderer ${display.rendererTypeName} has no ReactComponent, it may not be completely implemented yet`,
         )
-        if (!ThisRendererType) {
-          throw new Error(`renderer "${display.rendererTypeName}" not found`)
-        }
-        if (!ThisRendererType.ReactComponent) {
-          throw new Error(
-            `renderer ${display.rendererTypeName} has no ReactComponent, it may not be completely implemented yet`,
-          )
-        }
-        return ThisRendererType
-      },
+      }
+      return ThisRendererType
+    },
 
-      /**
-       * #method
-       */
-      isCompatibleWithRenderer(renderer: RendererType) {
-        return !!(renderer instanceof CircularChordRendererType)
-      },
+    /**
+     * #method
+     */
+    isCompatibleWithRenderer(renderer: RendererType) {
+      return !!(renderer instanceof CircularChordRendererType)
+    },
 
-      /**
-       * #getter
-       * returns a string feature ID if the globally-selected object
-       * is probably a feature
-       */
-      get selectedFeatureId() {
-        if (!isAlive(self)) {
-          return undefined
-        }
-        const session = getSession(self)
-        if (!session) {
-          return undefined
-        }
-        const { selection } = session
-        // does it quack like a feature?
-        if (isFeature(selection)) {
-          return selection.id()
-        }
+    /**
+     * #getter
+     * returns a string feature ID if the globally-selected object
+     * is probably a feature
+     */
+    get selectedFeatureId() {
+      if (!isAlive(self)) {
         return undefined
-      },
-    }))
-    .actions(self => ({
-      /**
-       * #action
-       */
-      renderStarted() {
+      }
+      const session = getSession(self)
+      if (!session) {
+        return undefined
+      }
+      const { selection } = session
+      // does it quack like a feature?
+      if (isFeature(selection)) {
+        return selection.id()
+      }
+      return undefined
+    },
+  }))
+  .actions(self => ({
+    /**
+     * #action
+     */
+    renderStarted() {
+      self.filled = false
+      self.message = ''
+      self.reactElement = undefined
+      self.data = undefined
+      self.html = undefined
+      self.error = undefined
+      self.renderingComponent = undefined
+    },
+    /**
+     * #action
+     */
+    renderSuccess({
+      message,
+      data,
+      reactElement,
+      html,
+      renderingComponent,
+    }: {
+      message: string
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      data: any
+      html: string
+      reactElement: React.ReactElement
+      renderingComponent: AnyReactComponentType
+    }) {
+      if (message) {
         self.filled = false
-        self.message = ''
+        self.message = message
         self.reactElement = undefined
         self.data = undefined
+        self.html = undefined
         self.error = undefined
         self.renderingComponent = undefined
-      },
-      /**
-       * #action
-       */
-      renderSuccess({
-        message,
-        data,
-        reactElement,
-        renderingComponent,
-      }: {
-        message: string
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        data: any
-        reactElement: React.ReactElement
-        renderingComponent: AnyReactComponentType
-      }) {
-        if (message) {
-          self.filled = false
-          self.message = message
-          self.reactElement = undefined
-          self.data = undefined
-          self.error = undefined
-          self.renderingComponent = undefined
-        } else {
-          self.filled = true
-          self.message = ''
-          self.reactElement = reactElement
-          self.data = data
-          self.error = undefined
-          self.renderingComponent = renderingComponent
-        }
-      },
-      /**
-       * #action
-       */
-      renderError(error: unknown) {
-        console.error(error)
-        // the rendering failed for some reason
-        self.filled = false
+      } else {
+        self.filled = true
         self.message = ''
-        self.reactElement = undefined
-        self.data = undefined
-        self.error = error
-        self.renderingComponent = undefined
-      },
+        self.reactElement = reactElement
+        self.data = data
+        self.html = html
+        self.error = undefined
+        self.renderingComponent = renderingComponent
+      }
+    },
+    /**
+     * #action
+     */
+    renderError(error: unknown) {
+      console.error(error)
+      // the rendering failed for some reason
+      self.filled = false
+      self.message = ''
+      self.reactElement = undefined
+      self.html = undefined
+      self.data = undefined
+      self.error = error
+      self.renderingComponent = undefined
+    },
 
-      /**
-       * #action
-       */
-      setRefNameMap(refNameMap: Record<string, string>) {
-        self.refNameMap = refNameMap
-      },
-    }))
-    .actions(self => ({
-      afterAttach() {
-        makeAbortableReaction(
-          self,
-          renderReactionData,
+    /**
+     * #action
+     */
+    setRefNameMap(refNameMap: Record<string, string>) {
+      self.refNameMap = refNameMap
+    },
+  }))
+  .actions(self => ({
+    afterAttach() {
+      makeAbortableReaction(
+        self,
+        renderReactionData,
 
-          // @ts-ignore
-          renderReactionEffect,
-          {
-            name: `${self.type} ${self.id} rendering`,
-            // delay: self.renderDelay || 300,
-            fireImmediately: true,
-          },
-          self.renderStarted,
-          self.renderSuccess,
-          self.renderError,
-        )
-        makeAbortableReaction(
-          self,
-          () => ({
-            assemblyNames: getTrackAssemblyNames(self.parentTrack) as string[],
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            adapter: getConf(getParent<any>(self, 2), 'adapter'),
-            assemblyManager: getSession(self).assemblyManager,
-          }),
+        // @ts-ignore
+        renderReactionEffect,
+        {
+          name: `${self.type} ${self.id} rendering`,
+          // delay: self.renderDelay || 300,
+          fireImmediately: true,
+        },
+        self.renderStarted,
+        self.renderSuccess,
+        self.renderError,
+      )
+      makeAbortableReaction(
+        self,
+        () => ({
+          assemblyNames: getTrackAssemblyNames(self.parentTrack) as string[],
           // eslint-disable-next-line @typescript-eslint/no-explicit-any
-          async ({ assemblyNames, adapter, assemblyManager }: any, signal) => {
-            return assemblyManager.getRefNameMapForAdapter(
-              adapter,
-              assemblyNames[0],
-              { signal, sessionId: getRpcSessionId(self) },
-            )
-          },
-          {
-            name: `${self.type} ${self.id} getting refNames`,
-            fireImmediately: true,
-          },
-          () => {},
-          refNameMap => {
-            self.setRefNameMap(refNameMap)
-          },
-          error => {
-            console.error(error)
-            self.setError(error)
-          },
-        )
-      },
-    }))
-}
-
-export const BaseChordDisplayModel = stateModelFactory()
+          adapter: getConf(getParent<any>(self, 2), 'adapter'),
+          assemblyManager: getSession(self).assemblyManager,
+        }),
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        async ({ assemblyNames, adapter, assemblyManager }: any, signal) => {
+          return assemblyManager.getRefNameMapForAdapter(
+            adapter,
+            assemblyNames[0],
+            { signal, sessionId: getRpcSessionId(self) },
+          )
+        },
+        {
+          name: `${self.type} ${self.id} getting refNames`,
+          fireImmediately: true,
+        },
+        () => {},
+        refNameMap => {
+          self.setRefNameMap(refNameMap)
+        },
+        error => {
+          console.error(error)
+          self.setError(error)
+        },
+      )
+    },
+  }))

package/src/BaseChordDisplay/models/renderReaction.ts

@@ -1,3 +1,4 @@
+import clone from 'clone'
 import { getRpcSessionId } from '@jbrowse/core/util/tracks'
 import { getSession, getContainingView } from '@jbrowse/core/util'
 
@@ -13,9 +14,9 @@ export function renderReactionData(self: any) {
     renderProps: self.renderProps(),
     renderArgs: {
       assemblyName: view.displayedRegions[0]?.assemblyName,
-      adapterConfig: JSON.parse(JSON.stringify(self.adapterConfig)),
+      adapterConfig: clone(self.adapterConfig),
       rendererType: rendererType.name,
-      regions: JSON.parse(JSON.stringify(view.displayedRegions)),
+      regions: clone(view.displayedRegions),
       blockDefinitions: self.blockDefinitions,
       sessionId: getRpcSessionId(self),
       timeout: 1000000,
@@ -68,5 +69,10 @@ export async function renderReactionEffect(
     signal,
   })
 
-  return { html, data, renderingComponent: rendererType.ReactComponent }
+  return {
+    html,
+    data,
+    reactElement: data.reactElement,
+    renderingComponent: rendererType.ReactComponent,
+  }
 }