@jbrowse/plugin-circular-view 2.5.0 → 2.6.2

package/src/BaseChordDisplay/components/Loading.tsx

@@ -1,111 +0,0 @@
-import React, { useState, useEffect } from 'react'
-import { makeStyles } from 'tss-react/mui'
-import { observer } from 'mobx-react'
-
-const useStyles = makeStyles()(theme => {
-  const offset = 2
-  const duration = 1.4
-
-  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,
-      },
-      '25%': {
-        stroke: secondary.light,
-      },
-      '50%': {
-        stroke: tertiary.light,
-      },
-      '75%': {
-        stroke: quaternary.light,
-      },
-      '100%': {
-        stroke: primary.light,
-      },
-    },
-
-    '@keyframes dash': {
-      '0%': {
-        strokeDashoffset: offset,
-      },
-      '50%': {
-        strokeDashoffset: offset / 4,
-        transform: 'rotate(135deg)',
-      },
-      '100%': {
-        strokeDashoffset: offset,
-        transform: 'rotate(720deg)',
-      },
-    },
-  }
-})
-
-const Loading = observer(function ({
-  model: {
-    renderProps: { radius },
-  },
-}: {
-  model: { renderProps: { radius: number } }
-}) {
-  const { classes } = useStyles()
-
-  // 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"
-        >
-          <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>
-  )
-})
-
-export default Loading

package/src/BaseChordDisplay/index.ts

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

package/src/BaseChordDisplay/models/configSchema.ts

@@ -1,30 +0,0 @@
-import { ConfigurationSchema } from '@jbrowse/core/configuration'
-
-/**
- * #config BaseChordDisplay
- */
-function x() {} // eslint-disable-line @typescript-eslint/no-unused-vars
-
-const baseChordDisplayConfig = ConfigurationSchema(
-  'BaseChordDisplay',
-  {
-    /**
-     * #slot
-     */
-    onChordClick: {
-      type: 'boolean',
-      description:
-        'callback that should be run when a chord in the track is clicked',
-      defaultValue: false,
-      contextVariable: ['feature', 'track', 'pluginManager'],
-    },
-  },
-  {
-    /**
-     * #identifier
-     */
-    explicitIdentifier: 'displayId',
-  },
-)
-
-export { baseChordDisplayConfig }

package/src/BaseChordDisplay/models/model.tsx

@@ -1,314 +0,0 @@
-import React from 'react'
-import clone from 'clone'
-import { getParent, isAlive, types } from 'mobx-state-tree'
-
-// jbrowse
-import { ConfigurationReference, getConf } from '@jbrowse/core/configuration'
-import { BaseDisplay } from '@jbrowse/core/pluggableElementTypes/models'
-import CircularChordRendererType from '@jbrowse/core/pluggableElementTypes/renderers/CircularChordRendererType'
-import RendererType from '@jbrowse/core/pluggableElementTypes/renderers/RendererType'
-import {
-  getContainingView,
-  getSession,
-  getEnv,
-  isFeature,
-  makeAbortableReaction,
-  AnyReactComponentType,
-  Feature,
-  ReactRendering,
-} from '@jbrowse/core/util'
-import {
-  getParentRenderProps,
-  getRpcSessionId,
-  getTrackAssemblyNames,
-} from '@jbrowse/core/util/tracks'
-
-// locals
-import { renderReactionData, renderReactionEffect } from './renderReaction'
-import {
-  CircularViewModel,
-  ExportSvgOptions,
-} from '../../CircularView/models/CircularView'
-import { ThemeOptions } from '@mui/material'
-import { baseChordDisplayConfig } from './configSchema'
-
-/**
- * #stateModel BaseChordDisplay
- * extends `BaseDisplay`
- */
-function x() {} // eslint-disable-line @typescript-eslint/no-unused-vars
-
-export const BaseChordDisplayModel = types
-  .compose(
-    'BaseChordDisplay',
-    BaseDisplay,
-    types.model({
-      /**
-       * #property
-       */
-      bezierRadiusRatio: 0.1,
-      /**
-       * #property
-       */
-      assemblyName: types.maybe(types.string),
-      /**
-       * #property
-       */
-      configuration: ConfigurationReference(baseChordDisplayConfig),
-    }),
-  )
-  .volatile(() => ({
-    // 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 view = getContainingView(self) as CircularViewModel
-      const origSlices = view.staticSlices
-      if (!self.refNameMap) {
-        return origSlices
-      }
-
-      const slices = clone(origSlices)
-
-      slices.forEach(slice => {
-        const regions = slice.region.elided
-          ? slice.region.regions
-          : [slice.region]
-        regions.forEach(region => {
-          const renamed = self.refNameMap?.[region.refName]
-          if (renamed && region.refName !== renamed) {
-            region.refName = renamed
-          }
-        })
-      })
-      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,
-      }
-    },
-
-    /**
-     * #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`,
-        )
-      }
-      return ThisRendererType
-    },
-
-    /**
-     * #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()
-      }
-      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 = message
-        self.reactElement = undefined
-        self.data = undefined
-        self.html = undefined
-        self.error = undefined
-        self.renderingComponent = undefined
-      } else {
-        self.filled = true
-        self.message = ''
-        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,
-
-        // @ts-expect-error
-        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),
-          // 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
-        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)
-        },
-      )
-    },
-  }))
-  .views(self => ({
-    /**
-     * #method
-     */
-    async renderSvg(
-      opts: ExportSvgOptions & {
-        theme: ThemeOptions
-      },
-    ) {
-      const data = renderReactionData(self)
-      const rendering = await renderReactionEffect(
-        {
-          ...data,
-          exportSVG: opts,
-          theme: opts.theme || data.renderProps.theme,
-        },
-        undefined,
-        self,
-      )
-      return <ReactRendering rendering={rendering} />
-    },
-  }))

package/src/BaseChordDisplay/models/renderReaction.ts

@@ -1,75 +0,0 @@
-import clone from 'clone'
-import { getRpcSessionId } from '@jbrowse/core/util/tracks'
-import { getSession, getContainingView } from '@jbrowse/core/util'
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export function renderReactionData(self: any) {
-  const view = getContainingView(self)
-  const { rendererType } = self
-  const { rpcManager } = getSession(view)
-
-  return {
-    rendererType,
-    rpcManager,
-    renderProps: self.renderProps(),
-    renderArgs: {
-      assemblyName: view.displayedRegions[0]?.assemblyName,
-      adapterConfig: clone(self.adapterConfig),
-      rendererType: rendererType.name,
-      regions: clone(view.displayedRegions),
-      blockDefinitions: self.blockDefinitions,
-      sessionId: getRpcSessionId(self),
-      timeout: 1000000,
-    },
-  }
-}
-
-export async function renderReactionEffect(
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  props: any,
-  signal: AbortSignal | undefined,
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  self: any,
-) {
-  if (!props) {
-    throw new Error('cannot render with no props')
-  }
-
-  const {
-    rendererType,
-    rpcManager,
-    cannotBeRenderedReason,
-    renderArgs,
-    renderProps,
-    exportSVG,
-  } = props
-
-  if (cannotBeRenderedReason) {
-    return { message: cannotBeRenderedReason }
-  }
-
-  // don't try to render 0 or NaN radius or no regions
-  if (!renderProps.radius || !renderArgs.regions?.length) {
-    return { message: 'Skipping render' }
-  }
-
-  // check renderertype compatibility
-  if (!self.isCompatibleWithRenderer(rendererType)) {
-    throw new Error(
-      `renderer ${rendererType.name} is not compatible with this display type`,
-    )
-  }
-
-  const { html, ...data } = await rendererType.renderInClient(rpcManager, {
-    ...renderArgs,
-    ...renderProps,
-    exportSVG,
-  })
-
-  return {
-    html,
-    data,
-    reactElement: data.reactElement,
-    renderingComponent: rendererType.ReactComponent,
-  }
-}

package/src/CircularView/components/CircularView.tsx

@@ -1,128 +0,0 @@
-import React from 'react'
-import { observer } from 'mobx-react'
-import { ResizeHandle } from '@jbrowse/core/ui'
-import { assembleLocString } from '@jbrowse/core/util'
-import { makeStyles } from 'tss-react/mui'
-
-// locals
-import Ruler from './Ruler'
-import Controls from './Controls'
-import ImportForm from './ImportForm'
-import { CircularViewModel } from '../models/CircularView'
-
-const dragHandleHeight = 3
-
-const useStyles = makeStyles()(theme => ({
-  root: {
-    position: 'relative',
-    marginBottom: theme.spacing(1),
-    overflow: 'hidden',
-  },
-  scroller: {
-    overflow: 'auto',
-  },
-}))
-
-const Slices = observer(({ model }: { model: CircularViewModel }) => {
-  return (
-    <>
-      {model.staticSlices.map(slice => (
-        <Ruler
-          key={assembleLocString(
-            slice.region.elided ? slice.region.regions[0] : slice.region,
-          )}
-          model={model}
-          slice={slice}
-        />
-      ))}
-      {model.tracks.map(track => {
-        const display = track.displays[0]
-        return (
-          <display.RenderingComponent
-            key={display.id}
-            display={display}
-            view={model}
-          />
-        )
-      })}
-    </>
-  )
-})
-
-const CircularView = observer(({ model }: { model: CircularViewModel }) => {
-  const initialized =
-    !!model.displayedRegions.length &&
-    !!model.figureWidth &&
-    !!model.figureHeight &&
-    model.initialized
-
-  const showImportForm = !initialized && !model.disableImportForm
-  const showFigure = initialized && !showImportForm
-
-  return (
-    <>
-      {showImportForm || model.error ? (
-        <ImportForm model={model} />
-      ) : showFigure ? (
-        <CircularViewLoaded model={model} />
-      ) : null}
-    </>
-  )
-})
-
-const CircularViewLoaded = observer(function ({
-  model,
-}: {
-  model: CircularViewModel
-}) {
-  const {
-    width,
-    height,
-    id,
-    offsetRadians,
-    centerXY,
-    figureWidth,
-    figureHeight,
-    hideVerticalResizeHandle,
-  } = model
-  const { classes } = useStyles()
-  return (
-    <div className={classes.root} style={{ width, height }} data-testid={id}>
-      <div className={classes.scroller} style={{ width, height }}>
-        <svg
-          style={{
-            transform: `rotate(${offsetRadians}rad)`,
-            transition: 'transform 0.5s',
-            transformOrigin: centerXY.map(x => `${x}px`).join(' '),
-            position: 'absolute',
-            left: 0,
-            top: 0,
-          }}
-          width={figureWidth}
-          height={figureHeight}
-        >
-          <g transform={`translate(${centerXY})`}>
-            <Slices model={model} />
-          </g>
-        </svg>
-      </div>
-      <Controls model={model} />
-      {hideVerticalResizeHandle ? null : (
-        <ResizeHandle
-          onDrag={model.resizeHeight}
-          style={{
-            height: dragHandleHeight,
-            position: 'absolute',
-            bottom: 0,
-            left: 0,
-            background: '#ccc',
-            boxSizing: 'border-box',
-            borderTop: '1px solid #fafafa',
-          }}
-        />
-      )}
-    </div>
-  )
-})
-
-export default CircularView