Skip to main content

Add-track workflows

Register a React component in the "Add track" widget for tracks that need custom logic. The multi-row track does this, producing a textbox to paste a list of files.

The multi-row workflow is the whole registration:

import { lazy } from 'react'

import { AddTrackWorkflowType } from '@jbrowse/core/pluggableElementTypes'
import { types } from '@jbrowse/mobx-state-tree'

import type PluginManager from '@jbrowse/core/PluginManager'

export default function MultiWiggleAddTrackWorkflowF(pm: PluginManager) {
  pm.addAddTrackWorkflowType(
    () =>
      new AddTrackWorkflowType({
        name: 'Multi-row track',
        displayName: 'Add multi-row track',
        ReactComponent: lazy(() => import('./AddTrackWorkflow.tsx')),
        stateModel: types.model({}),
      }),
  )
}
  • ReactComponent is the form rendered inside the "Add track" widget, lazily imported so the form's code only loads when a user picks this workflow
  • stateModel is the workflow's own state; an empty types.model({}) is fine when the form holds everything it needs in React state
  • category groups the workflow in the dropdown under "General" or "Specialized track types". An omitted category means 'specialized', which fits a workflow targeting one data type, as the multi-wiggle one does; pass category: 'general' for a workflow that accepts any track

The component is rendered with two props. model is the add-track widget's model, and switchWorkflow(name) moves the user to another workflow by name — what the built-in file/URL form uses to hand off to the bulk one. A component typed for model alone still compiles, since the extra prop is assignable, so nothing points this out at the call site.

Call MultiWiggleAddTrackWorkflowF(pm) from your plugin's install(), the same as any other pluggable element.

See also