Refactors and bundle size improvements

plugins/alignments/src/PileupRenderer/PileupRenderer.ts

@@ -7,6 +7,7 @@ import {
   notEmpty,
   renderToAbstractCanvas,
 } from '@jbrowse/core/util'
+import { readConfObject } from '@jbrowse/core/configuration'
 import { BaseLayout } from '@jbrowse/core/util/layouts/BaseLayout'
 import { getAdapter } from '@jbrowse/core/data_adapters/dataAdapterCache'
 import {
@@ -18,8 +19,6 @@ import { BaseFeatureDataAdapter } from '@jbrowse/core/data_adapters/BaseAdapter'
 // locals
 import { fetchSequence, shouldFetchReferenceSequence } from '../util'
 import { layoutFeats } from './layoutFeatures'
-import { makeImageData } from './makeImageData'
-import { readConfObject } from '@jbrowse/core/configuration'
 
 export interface RenderArgsDeserialized extends BoxRenderArgsDeserialized {
   colorBy?: { type: string; tag?: string }
@@ -92,6 +91,8 @@ export default class PileupRenderer extends BoxRendererType {
         : undefined
     const width = (region.end - region.start) / bpPerPx
     const height = Math.max(layout.getTotalHeight(), 1)
+
+    const { makeImageData } = await import('./makeImageData')
     const res = await renderToAbstractCanvas(width, height, renderProps, ctx =>
       makeImageData({
         ctx,

plugins/jobs-management/src/JobsListWidget/index.ts

@@ -1,5 +1,19 @@
+import PluginManager from '@jbrowse/core/PluginManager'
 import { ConfigurationSchema } from '@jbrowse/core/configuration'
+import { WidgetType } from '@jbrowse/core/pluggableElementTypes'
+import { lazy } from 'react'
 
-export { default as ReactComponent } from './components/JobsListWidget'
-export { default as stateModelFactory } from './model'
+import { stateModelFactory } from './model'
 export const configSchema = ConfigurationSchema('JobsListWidget', {})
+
+export default function JobsListWidgetF(pluginManager: PluginManager) {
+  pluginManager.addWidgetType(() => {
+    return new WidgetType({
+      name: 'JobsListWidget',
+      heading: 'Jobs list',
+      configSchema,
+      stateModel: stateModelFactory(pluginManager),
+      ReactComponent: lazy(() => import('./components/JobsListWidget')),
+    })
+  })
+}

plugins/jobs-management/src/JobsListWidget/jobModel.ts

@@ -0,0 +1,45 @@
+import { types } from 'mobx-state-tree'
+
+/**
+ * #stateModel
+ */
+export const Job = types
+  .model('Job', {
+    /**
+     * #property
+     */
+    name: types.string,
+    /**
+     * #property
+     */
+    statusMessage: types.maybe(types.string),
+    /**
+     * #property
+     */
+    progressPct: types.number,
+  })
+  .volatile(() => ({
+    cancelCallback() {},
+  }))
+  .actions(self => ({
+    /**
+     * #action
+     */
+    setCancelCallback(cancelCallback: () => void) {
+      self.cancelCallback = cancelCallback
+    },
+
+    /**
+     * #action
+     */
+    setStatusMessage(message?: string) {
+      self.statusMessage = message
+    },
+
+    /**
+     * #action
+     */
+    setProgressPct(pct: number) {
+      self.progressPct = pct
+    },
+  }))

plugins/jobs-management/src/JobsListWidget/model.ts

@@ -1,82 +1,107 @@
 import { types, Instance, SnapshotIn } from 'mobx-state-tree'
 import PluginManager from '@jbrowse/core/PluginManager'
 import { ElementId } from '@jbrowse/core/util/types/mst'
-
-export const Job = types
-  .model('Job', {
-    name: types.string,
-    statusMessage: types.maybe(types.string),
-    progressPct: types.number,
-  })
-  .volatile(() => ({
-    cancelCallback() {},
-  }))
-  .actions(self => ({
-    setCancelCallback(cancelCallback: () => void) {
-      self.cancelCallback = cancelCallback
-    },
-    setStatusMessage(message?: string) {
-      self.statusMessage = message
-    },
-    setProgressPct(pct: number) {
-      self.progressPct = pct
-    },
-  }))
+import { Job } from './jobModel'
 
 export interface NewJob extends SnapshotIn<typeof Job> {
   cancelCallback(): void
   setStatusMessage(msg?: string): void
 }
 
-export default function f(_pluginManager: PluginManager) {
+/**
+ * #stateModel JobsListModel
+ */
+export function stateModelFactory(_pluginManager: PluginManager) {
   return types
     .model('JobsListModel', {
+      /**
+       * #property
+       */
       id: ElementId,
+      /**
+       * #property
+       */
       type: types.literal('JobsListWidget'),
+      /**
+       * #property
+       */
       jobs: types.array(Job),
+      /**
+       * #property
+       */
       finished: types.array(Job),
+      /**
+       * #property
+       */
       queued: types.array(Job),
+      /**
+       * #property
+       */
       aborted: types.array(Job),
     })
     .actions(self => ({
+      /**
+       * #action
+       */
       addJob(job: NewJob) {
         const { cancelCallback } = job
         const length = self.jobs.push(job)
         const addedJob = self.jobs[length - 1]
         addedJob.setCancelCallback(cancelCallback)
         return addedJob
       },
+      /**
+       * #action
+       */
       removeJob(jobName: string) {
         const indx = self.jobs.findIndex(job => job.name === jobName)
         const removed = self.jobs[indx]
         self.jobs.splice(indx, 1)
         return removed
       },
+      /**
+       * #action
+       */
       addFinishedJob(job: NewJob) {
         self.finished.push(job)
         return self.finished
       },
+      /**
+       * #action
+       */
       addQueuedJob(job: NewJob) {
         self.queued.push(job)
         return self.finished
       },
+      /**
+       * #action
+       */
       addAbortedJob(job: NewJob) {
         self.aborted.push(job)
         return self.aborted
       },
+      /**
+       * #action
+       */
       removeQueuedJob(jobName: string) {
         const indx = self.queued.findIndex(job => job.name === jobName)
         const removed = self.queued[indx]
         self.queued.splice(indx, 1)
         return removed
       },
+      /**
+       * #action
+       */
       updateJobStatusMessage(jobName: string, message?: string) {
         const job = self.jobs.find(job => job.name === jobName)
         if (!job) {
           throw new Error(`No job found with name ${jobName}`)
         }
         job.setStatusMessage(message)
       },
+      /**
+       * #action
+       */
       updateJobProgressPct(jobName: string, pct: number) {
         const job = self.jobs.find(job => job.name === jobName)
         if (!job) {
@@ -87,5 +112,5 @@ export default function f(_pluginManager: PluginManager) {
     }))
 }
 
-export type JobsListStateModel = ReturnType<typeof f>
+export type JobsListStateModel = ReturnType<typeof stateModelFactory>
 export type JobsListModel = Instance<JobsListStateModel>

plugins/jobs-management/src/index.ts

@@ -1,33 +1,15 @@
-import { lazy } from 'react'
 import Plugin from '@jbrowse/core/Plugin'
 import PluginManager from '@jbrowse/core/PluginManager'
 import { SessionWithWidgets, isAbstractMenuManager } from '@jbrowse/core/util'
 import { Indexing } from '@jbrowse/core/ui/Icons'
-import WidgetType from '@jbrowse/core/pluggableElementTypes/WidgetType'
-import {
-  stateModelFactory as JobsListStateModelFactory,
-  configSchema as JobsListConfigSchema,
-} from '../../jobs-management/src/JobsListWidget'
 import { isSessionModelWithWidgets } from '@jbrowse/core/util'
+import JobsListWidgetF from './JobsListWidget'
 
 export default class extends Plugin {
   name = 'JobsManagementPlugin'
 
   install(pluginManager: PluginManager) {
-    pluginManager.addWidgetType(() => {
-      return new WidgetType({
-        name: 'JobsListWidget',
-        heading: 'Jobs list',
-        configSchema: JobsListConfigSchema,
-        stateModel: JobsListStateModelFactory(pluginManager),
-        ReactComponent: lazy(
-          () =>
-            import(
-              '../../jobs-management/src/JobsListWidget/components/JobsListWidget'
-            ),
-        ),
-      })
-    })
+    JobsListWidgetF(pluginManager)
   }
   configure(pluginManager: PluginManager) {
     if (isAbstractMenuManager(pluginManager.rootModel)) {

plugins/linear-comparative-view/src/LinearReadVsRef/index.ts

@@ -1,3 +1,4 @@
+import { lazy } from 'react'
 import PluginManager from '@jbrowse/core/PluginManager'
 import DisplayType from '@jbrowse/core/pluggableElementTypes/DisplayType'
 import { PluggableElementType } from '@jbrowse/core/pluggableElementTypes'
@@ -7,7 +8,7 @@ import { getSession, getContainingTrack } from '@jbrowse/core/util'
 import AddIcon from '@mui/icons-material/Add'
 
 // locals
-import ReadVsRefDialog from './LinearReadVsRef'
+const ReadVsRefDialog = lazy(() => import('./LinearReadVsRef'))
 
 function isDisplay(elt: { name: string }): elt is DisplayType {
   return elt.name === 'LinearPileupDisplay'

plugins/lollipop/src/LinearLollipopDisplay/configSchema.ts

@@ -2,11 +2,22 @@ import PluginManager from '@jbrowse/core/PluginManager'
 import { ConfigurationSchema } from '@jbrowse/core/configuration'
 import { baseLinearDisplayConfigSchema } from '@jbrowse/plugin-linear-genome-view'
 
+/**
+ * #config LinearLollipopDisplay
+ */
 export function configSchemaFactory(pluginManager: PluginManager) {
   return ConfigurationSchema(
     'LinearLollipopDisplay',
-    { renderer: pluginManager.pluggableConfigSchemaType('renderer') },
     {
+      /**
+       * #slot
+       */
+      renderer: pluginManager.pluggableConfigSchemaType('renderer'),
+    },
+    {
+      /**
+       * #baseConfiguration
+       */
       baseConfiguration: baseLinearDisplayConfigSchema,
       explicitlyTyped: true,
     },

plugins/lollipop/src/LinearLollipopDisplay/index.ts

@@ -1,2 +1,20 @@
-export { configSchemaFactory } from './configSchema'
-export { stateModelFactory } from './model'
+import PluginManager from '@jbrowse/core/PluginManager'
+import { DisplayType } from '@jbrowse/core/pluggableElementTypes'
+import { BaseLinearDisplayComponent } from '@jbrowse/plugin-linear-genome-view'
+
+import { stateModelFactory } from './model'
+import { configSchemaFactory } from './configSchema'
+
+export default function LinearLollipopDisplayF(pluginManager: PluginManager) {
+  pluginManager.addDisplayType(() => {
+    const configSchema = configSchemaFactory(pluginManager)
+    return new DisplayType({
+      name: 'LinearLollipopDisplay',
+      configSchema,
+      stateModel: stateModelFactory(configSchema),
+      trackType: 'LollipopTrack',
+      viewType: 'LinearGenomeView',
+      ReactComponent: BaseLinearDisplayComponent,
+    })
+  })
+}

plugins/lollipop/src/LinearLollipopDisplay/model.ts

@@ -5,33 +5,56 @@ import {
 import { types } from 'mobx-state-tree'
 import { BaseLinearDisplay } from '@jbrowse/plugin-linear-genome-view'
 
+/**
+ * #stateModel LinearLollipopDisplay
+ * extends
+ * - [BaseLinearDisplay](../baselineardisplay)
+ */
 export function stateModelFactory(configSchema: AnyConfigurationSchemaType) {
   return types
     .compose(
       'LinearLollipopDisplay',
       BaseLinearDisplay,
       types.model({
+        /**
+         * #property
+         */
         type: types.literal('LinearLollipopDisplay'),
+        /**
+         * #property
+         */
         configuration: ConfigurationReference(configSchema),
       }),
     )
 
     .views(self => {
       const { renderProps: superRenderProps } = self
       return {
+        /**
+         * #getter
+         */
         get blockType() {
           return 'dynamicBlocks'
         },
+        /**
+         * #getter
+         */
         get renderDelay() {
           return 500
         },
+        /**
+         * #method
+         */
         renderProps() {
           return {
             ...superRenderProps(),
             rpcDriverName: self.rpcDriverName,
             config: self.configuration.renderer,
           }
         },
+        /**
+         * #getter
+         */
         get rendererTypeName() {
           return self.configuration.renderer.type
         },