From 3cb1cbf514169a518031f19df63483e926f78428 Mon Sep 17 00:00:00 2001 From: Colin Date: Fri, 1 Dec 2023 10:40:15 -0500 Subject: [PATCH] Small efforts to smaller bundle --- .../src/PileupRenderer/PileupRenderer.ts | 5 +- .../src/JobsListWidget/index.ts | 18 ++++- .../src/JobsListWidget/jobModel.ts | 45 ++++++++++++ .../src/JobsListWidget/model.ts | 71 +++++++++++++------ plugins/jobs-management/src/index.ts | 22 +----- .../src/LinearReadVsRef/index.ts | 3 +- .../src/LinearLollipopDisplay/configSchema.ts | 13 +++- .../src/LinearLollipopDisplay/index.ts | 22 +++++- .../src/LinearLollipopDisplay/model.ts | 23 ++++++ .../lollipop/src/LollipopRenderer/index.ts | 19 ++++- plugins/lollipop/src/index.ts | 36 ++-------- .../src/LinearWiggleDisplay/models/model.ts | 12 ++-- .../MultiLinearWiggleDisplay/models/model.ts | 48 ++++++------- .../src/MultiWiggleAddTrackWidget/index.ts | 4 +- 14 files changed, 223 insertions(+), 118 deletions(-) create mode 100644 plugins/jobs-management/src/JobsListWidget/jobModel.ts diff --git a/plugins/alignments/src/PileupRenderer/PileupRenderer.ts b/plugins/alignments/src/PileupRenderer/PileupRenderer.ts index 0128079c1a..7667f1b73f 100644 --- a/plugins/alignments/src/PileupRenderer/PileupRenderer.ts +++ b/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, diff --git a/plugins/jobs-management/src/JobsListWidget/index.ts b/plugins/jobs-management/src/JobsListWidget/index.ts index 86b29edda8..757c26821a 100644 --- a/plugins/jobs-management/src/JobsListWidget/index.ts +++ b/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')), + }) + }) +} diff --git a/plugins/jobs-management/src/JobsListWidget/jobModel.ts b/plugins/jobs-management/src/JobsListWidget/jobModel.ts new file mode 100644 index 0000000000..b756cfe737 --- /dev/null +++ b/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 + }, + })) diff --git a/plugins/jobs-management/src/JobsListWidget/model.ts b/plugins/jobs-management/src/JobsListWidget/model.ts index 72e0e18ffd..d6ef579b9f 100644 --- a/plugins/jobs-management/src/JobsListWidget/model.ts +++ b/plugins/jobs-management/src/JobsListWidget/model.ts @@ -1,44 +1,48 @@ 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 { 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) @@ -46,30 +50,48 @@ export default function f(_pluginManager: PluginManager) { 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) { @@ -77,6 +99,9 @@ export default function f(_pluginManager: PluginManager) { } 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 +export type JobsListStateModel = ReturnType export type JobsListModel = Instance diff --git a/plugins/jobs-management/src/index.ts b/plugins/jobs-management/src/index.ts index e46f86490e..e3f414069d 100644 --- a/plugins/jobs-management/src/index.ts +++ b/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)) { diff --git a/plugins/linear-comparative-view/src/LinearReadVsRef/index.ts b/plugins/linear-comparative-view/src/LinearReadVsRef/index.ts index 16aaa5b7b5..c576bdb8f3 100644 --- a/plugins/linear-comparative-view/src/LinearReadVsRef/index.ts +++ b/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' diff --git a/plugins/lollipop/src/LinearLollipopDisplay/configSchema.ts b/plugins/lollipop/src/LinearLollipopDisplay/configSchema.ts index 3550c9a72f..fda47ee36c 100644 --- a/plugins/lollipop/src/LinearLollipopDisplay/configSchema.ts +++ b/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, }, diff --git a/plugins/lollipop/src/LinearLollipopDisplay/index.ts b/plugins/lollipop/src/LinearLollipopDisplay/index.ts index bb7c3318c0..c82259cd0c 100644 --- a/plugins/lollipop/src/LinearLollipopDisplay/index.ts +++ b/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, + }) + }) +} diff --git a/plugins/lollipop/src/LinearLollipopDisplay/model.ts b/plugins/lollipop/src/LinearLollipopDisplay/model.ts index 709502ef31..d7af19a6e9 100644 --- a/plugins/lollipop/src/LinearLollipopDisplay/model.ts +++ b/plugins/lollipop/src/LinearLollipopDisplay/model.ts @@ -5,13 +5,24 @@ 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), }), ) @@ -19,12 +30,21 @@ export function stateModelFactory(configSchema: AnyConfigurationSchemaType) { .views(self => { const { renderProps: superRenderProps } = self return { + /** + * #getter + */ get blockType() { return 'dynamicBlocks' }, + /** + * #getter + */ get renderDelay() { return 500 }, + /** + * #method + */ renderProps() { return { ...superRenderProps(), @@ -32,6 +52,9 @@ export function stateModelFactory(configSchema: AnyConfigurationSchemaType) { config: self.configuration.renderer, } }, + /** + * #getter + */ get rendererTypeName() { return self.configuration.renderer.type }, diff --git a/plugins/lollipop/src/LollipopRenderer/index.ts b/plugins/lollipop/src/LollipopRenderer/index.ts index 44d2e2219b..e06d7308a1 100644 --- a/plugins/lollipop/src/LollipopRenderer/index.ts +++ b/plugins/lollipop/src/LollipopRenderer/index.ts @@ -1,3 +1,16 @@ -export { default as ReactComponent } from './components/LollipopRendering' -export { default as configSchema } from './configSchema' -export { default } from './LollipopRenderer' +import PluginManager from '@jbrowse/core/PluginManager' +import { lazy } from 'react' +import LollipopRenderer from './LollipopRenderer' +import configSchema from './configSchema' + +export default function LollipopRendererF(pluginManager: PluginManager) { + pluginManager.addRendererType( + () => + new LollipopRenderer({ + name: 'LollipopRenderer', + ReactComponent: lazy(() => import('./components/LollipopRendering')), + configSchema, + pluginManager, + }), + ) +} diff --git a/plugins/lollipop/src/index.ts b/plugins/lollipop/src/index.ts index 594368be7f..15d5b47938 100644 --- a/plugins/lollipop/src/index.ts +++ b/plugins/lollipop/src/index.ts @@ -1,41 +1,13 @@ -import DisplayType from '@jbrowse/core/pluggableElementTypes/DisplayType' import Plugin from '@jbrowse/core/Plugin' import PluginManager from '@jbrowse/core/PluginManager' -import { BaseLinearDisplayComponent } from '@jbrowse/plugin-linear-genome-view' -import { - configSchemaFactory as linearLollipopDisplayConfigSchemaFactory, - stateModelFactory as LinearLollipopDisplayStateModelFactory, -} from './LinearLollipopDisplay' -import LollipopRenderer, { - configSchema as lollipopRendererConfigSchema, - ReactComponent as LollipopRendererReactComponent, -} from './LollipopRenderer' +import LinearLollipopDisplayF from './LinearLollipopDisplay' +import LollipopRendererF from './LollipopRenderer' export default class extends Plugin { name = 'LollipopPlugin' install(pluginManager: PluginManager) { - pluginManager.addRendererType( - () => - new LollipopRenderer({ - name: 'LollipopRenderer', - ReactComponent: LollipopRendererReactComponent, - configSchema: lollipopRendererConfigSchema, - pluginManager, - }), - ) - - pluginManager.addDisplayType(() => { - const configSchema = - linearLollipopDisplayConfigSchemaFactory(pluginManager) - return new DisplayType({ - name: 'LinearLollipopDisplay', - configSchema, - stateModel: LinearLollipopDisplayStateModelFactory(configSchema), - trackType: 'LollipopTrack', - viewType: 'LinearGenomeView', - ReactComponent: BaseLinearDisplayComponent, - }) - }) + LollipopRendererF(pluginManager) + LinearLollipopDisplayF(pluginManager) } } diff --git a/plugins/wiggle/src/LinearWiggleDisplay/models/model.ts b/plugins/wiggle/src/LinearWiggleDisplay/models/model.ts index 0b5c730257..1b05a50ea2 100644 --- a/plugins/wiggle/src/LinearWiggleDisplay/models/model.ts +++ b/plugins/wiggle/src/LinearWiggleDisplay/models/model.ts @@ -10,11 +10,7 @@ import { axisPropsFromTickScale } from 'react-d3-axis-mod' import { ExportSvgDisplayOptions } from '@jbrowse/plugin-linear-genome-view' // locals -import { - getScale, - quantitativeStatsAutorun, - YSCALEBAR_LABEL_OFFSET, -} from '../../util' +import { getScale, YSCALEBAR_LABEL_OFFSET } from '../../util' import Tooltip from '../components/Tooltip' import SharedWiggleMixin from '../../shared/modelShared' @@ -214,7 +210,11 @@ function stateModelFactory( return { afterAttach() { - quantitativeStatsAutorun(self) + // eslint-disable-next-line @typescript-eslint/no-floating-promises + ;(async () => { + const { quantitativeStatsAutorun } = await import('../../util') + quantitativeStatsAutorun(self) + })() }, /** * #action diff --git a/plugins/wiggle/src/MultiLinearWiggleDisplay/models/model.ts b/plugins/wiggle/src/MultiLinearWiggleDisplay/models/model.ts index 8e10c94776..484c664d26 100644 --- a/plugins/wiggle/src/MultiLinearWiggleDisplay/models/model.ts +++ b/plugins/wiggle/src/MultiLinearWiggleDisplay/models/model.ts @@ -16,11 +16,7 @@ import PluginManager from '@jbrowse/core/PluginManager' import { ExportSvgDisplayOptions } from '@jbrowse/plugin-linear-genome-view' // locals -import { - getScale, - quantitativeStatsAutorun, - YSCALEBAR_LABEL_OFFSET, -} from '../../util' +import { getScale, YSCALEBAR_LABEL_OFFSET } from '../../util' import Tooltip from '../components/Tooltip' import SharedWiggleMixin from '../../shared/modelShared' @@ -431,26 +427,30 @@ export function stateModelFactory( const { renderSvg: superRenderSvg } = self return { afterAttach() { - quantitativeStatsAutorun(self) - addDisposer( - self, - autorun(async () => { - const { rpcManager } = getSession(self) - const { adapterConfig } = self - const sessionId = getRpcSessionId(self) - const sources = (await rpcManager.call( - sessionId, - 'MultiWiggleGetSources', - { + // eslint-disable-next-line @typescript-eslint/no-floating-promises + ;(async () => { + const { quantitativeStatsAutorun } = await import('../../util') + quantitativeStatsAutorun(self) + addDisposer( + self, + autorun(async () => { + const { rpcManager } = getSession(self) + const { adapterConfig } = self + const sessionId = getRpcSessionId(self) + const sources = (await rpcManager.call( sessionId, - adapterConfig, - }, - )) as Source[] - if (isAlive(self)) { - self.setSources(sources) - } - }), - ) + 'MultiWiggleGetSources', + { + sessionId, + adapterConfig, + }, + )) as Source[] + if (isAlive(self)) { + self.setSources(sources) + } + }), + ) + })() }, /** diff --git a/plugins/wiggle/src/MultiWiggleAddTrackWidget/index.ts b/plugins/wiggle/src/MultiWiggleAddTrackWidget/index.ts index 4b4c31052d..29425a0b5c 100644 --- a/plugins/wiggle/src/MultiWiggleAddTrackWidget/index.ts +++ b/plugins/wiggle/src/MultiWiggleAddTrackWidget/index.ts @@ -3,14 +3,14 @@ import { AddTrackWorkflowType } from '@jbrowse/core/pluggableElementTypes' import { types } from 'mobx-state-tree' // locals -import MultiWiggleWidget from './AddTrackWorkflow' +import { lazy } from 'react' export default (pm: PluginManager) => { pm.addAddTrackWorkflowType( () => new AddTrackWorkflowType({ name: 'Multi-wiggle track', - ReactComponent: MultiWiggleWidget, + ReactComponent: lazy(() => import('./AddTrackWorkflow')), stateModel: types.model({}), }), )