@jbrowse/plugin-data-management 2.3.1 → 2.3.3

package/src/PluginStoreWidget/components/PluginStoreWidget.test.tsx

@@ -0,0 +1,132 @@
+import React from 'react'
+import { getSnapshot, getParent } from 'mobx-state-tree'
+import { ThemeProvider } from '@mui/material/styles'
+import { render, cleanup, fireEvent, waitFor } from '@testing-library/react'
+import { createJBrowseTheme } from '@jbrowse/core/ui'
+import { createTestSession } from '@jbrowse/web/src/rootModel'
+
+// locals
+import PluginStoreWidget from './PluginStoreWidget'
+import { PluginStoreModel } from '../model'
+
+jest.mock('@jbrowse/web/src/makeWorkerInstance', () => () => {})
+
+const plugins = {
+  plugins: [
+    {
+      name: 'MsaView',
+      authors: ['Colin Diesh'],
+      description: 'multiple sequence alignment browser plugin for JBrowse 2',
+      location: 'https://github.com/GMOD/jbrowse-plugin-msaview',
+      url: 'https://unpkg.com/jbrowse-plugin-msaview/dist/jbrowse-plugin-msaview.umd.production.min.js',
+      license: 'Apache License 2.0',
+      image:
+        'https://raw.githubusercontent.com/GMOD/jbrowse-plugin-list/main/img/msaview-screenshot-fs8.png',
+    },
+  ],
+}
+
+let session: ReturnType<typeof createTestSession>
+let model: PluginStoreModel
+
+beforeEach(() => {
+  session = createTestSession()
+  model = session.addWidget('PluginStoreWidget', 'pluginStoreWidget')
+  const { location } = window
+
+  // @ts-ignore
+  delete window.location
+  window.location = {
+    ...location,
+    reload: jest.fn(),
+  }
+
+  // @ts-ignore
+  fetch.resetMocks()
+
+  // @ts-ignore
+  fetch.mockResponse(JSON.stringify(plugins))
+})
+
+afterEach(cleanup)
+
+test('renders with the available plugins', async () => {
+  const { container, findByText } = render(
+    <ThemeProvider theme={createJBrowseTheme()}>
+      <PluginStoreWidget model={model} />
+    </ThemeProvider>,
+  )
+  await findByText('multiple sequence alignment browser plugin for JBrowse 2')
+  expect(container.firstChild).toMatchSnapshot()
+})
+
+test('Installs a session plugin', async () => {
+  const { findByText } = render(
+    <ThemeProvider theme={createJBrowseTheme()}>
+      <PluginStoreWidget model={model} />
+    </ThemeProvider>,
+  )
+  await findByText('multiple sequence alignment browser plugin for JBrowse 2')
+  fireEvent.click(await findByText('Install'))
+  await waitFor(() => {
+    expect(window.location.reload).toHaveBeenCalled()
+  })
+  expect(getSnapshot(session.sessionPlugins)[0]).toEqual(plugins.plugins[0])
+})
+
+test('plugin store admin - adds a custom plugin correctly', async () => {
+  session = createTestSession({}, true)
+  model = session.addWidget('PluginStoreWidget', 'pluginStoreWidget')
+  const { findByText, getByText, getByLabelText } = render(
+    <ThemeProvider theme={createJBrowseTheme()}>
+      <PluginStoreWidget model={model} />
+    </ThemeProvider>,
+  )
+  await findByText('multiple sequence alignment browser plugin for JBrowse 2')
+  fireEvent.click(getByText('Add custom plugin'))
+  fireEvent.change(getByLabelText('Plugin URL'), {
+    target: {
+      value:
+        'https://unpkg.com/jbrowse-plugin-msaview/dist/jbrowse-plugin-msaview.esm.js',
+    },
+  })
+  fireEvent.change(getByLabelText('Plugin name'), {
+    target: {
+      value: 'MsaView',
+    },
+  })
+  fireEvent.click(getByText('Submit'))
+
+  await waitFor(() => {
+    expect(window.location.reload).toHaveBeenCalled()
+  })
+
+  expect(getSnapshot(getParent(session)).jbrowse.plugins).toEqual([
+    {
+      name: 'MsaView',
+      umdUrl:
+        'https://unpkg.com/jbrowse-plugin-msaview/dist/jbrowse-plugin-msaview.esm.js',
+    },
+  ])
+})
+
+test('plugin store admin - removes a custom plugin correctly', async () => {
+  session = createTestSession({}, true)
+  model = session.addWidget('PluginStoreWidget', 'pluginStoreWidget')
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const rootModel = getParent<any>(session)
+  const { jbrowse } = rootModel
+  jbrowse.addPlugin(plugins.plugins[0])
+  const { findByText, getByText, getByTestId } = render(
+    <ThemeProvider theme={createJBrowseTheme()}>
+      <PluginStoreWidget model={model} />
+    </ThemeProvider>,
+  )
+  await findByText('multiple sequence alignment browser plugin for JBrowse 2')
+  fireEvent.click(getByTestId('removePlugin-SVGPlugin'))
+  fireEvent.click(getByText('Confirm'))
+  await waitFor(() => {
+    expect(window.location.reload).toHaveBeenCalled()
+  })
+})

package/src/PluginStoreWidget/components/__snapshots__/{PluginStoreWidget.test.js.snap → PluginStoreWidget.test.tsx.snap}

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<PluginStoreWidget /> renders with the available plugins 1`] = `
+exports[`renders with the available plugins 1`] = `
 <div
   class="css-1kq0gb6-root"
 >
@@ -16,7 +16,7 @@ exports[`<PluginStoreWidget /> renders with the available plugins 1`] = `
       Filter plugins
     </label>
     <div
-      class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-sizeSmall MuiInputBase-adornedEnd css-1wz39fi-MuiInputBase-root-MuiInput-root"
+      class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-sizeSmall MuiInputBase-adornedEnd css-1blad95-MuiInputBase-root-MuiInput-root"
     >
       <input
         aria-invalid="false"

package/src/PluginStoreWidget/index.ts

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

package/src/__snapshots__/index.test.ts.snap

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`adds config editor widget 1`] = `{}`;
+
+exports[`adds connection add widget 1`] = `{}`;
+
+exports[`adds hierarchical track selector 1`] = `{}`;
+
+exports[`adds track add widget 1`] = `{}`;

package/src/index.test.ts

@@ -0,0 +1,54 @@
+import PluginManager from '@jbrowse/core/PluginManager'
+import Config from '@jbrowse/plugin-config'
+import { getSnapshot } from 'mobx-state-tree'
+import ThisPlugin from '.'
+
+let pluginManager: PluginManager
+
+beforeAll(() => {
+  pluginManager = new PluginManager([new ThisPlugin(), new Config()])
+  pluginManager.createPluggableElements()
+  pluginManager.configure()
+})
+
+test("won't add if already added", () => {
+  expect(() => pluginManager.addPlugin(new ThisPlugin())).toThrow(
+    /JBrowse already configured, cannot add plugins/,
+  )
+})
+
+test('adds track add widget', () => {
+  const AddTrackWidget = pluginManager.getWidgetType('AddTrackWidget')
+  const config = AddTrackWidget.configSchema.create({
+    type: 'AddTrackWidget',
+  })
+  expect(getSnapshot(config)).toMatchSnapshot()
+})
+
+test('adds config editor widget', () => {
+  const ConfigurationEditorWidget = pluginManager.getWidgetType(
+    'ConfigurationEditorWidget',
+  )
+  const config = ConfigurationEditorWidget.configSchema.create({
+    type: 'ConfigurationEditorWidget',
+  })
+  expect(getSnapshot(config)).toMatchSnapshot()
+})
+
+test('adds connection add widget', () => {
+  const AddConnectionWidget = pluginManager.getWidgetType('AddConnectionWidget')
+  const config = AddConnectionWidget.configSchema.create({
+    type: 'AddConnectionWidget',
+  })
+  expect(getSnapshot(config)).toMatchSnapshot()
+})
+
+test('adds hierarchical track selector', () => {
+  const HierarchicalTrackSelectorWidget = pluginManager.getWidgetType(
+    'HierarchicalTrackSelectorWidget',
+  )
+  const config = HierarchicalTrackSelectorWidget.configSchema.create({
+    type: 'HierarchicalTrackSelectorWidget',
+  })
+  expect(getSnapshot(config)).toMatchSnapshot()
+})

package/src/index.ts

@@ -1,30 +1,14 @@
 import { lazy } from 'react'
-import ConnectionType from '@jbrowse/core/pluggableElementTypes/ConnectionType'
-import WidgetType from '@jbrowse/core/pluggableElementTypes/WidgetType'
 import Plugin from '@jbrowse/core/Plugin'
 import PluginManager from '@jbrowse/core/PluginManager'
-import {
-  configSchema as ucscConfigSchema,
-  modelFactory as ucscModelFactory,
-} from './ucsc-trackhub'
-import {
-  stateModelFactory as AddTrackStateModelFactory,
-  configSchema as AddTrackConfigSchema,
-} from './AddTrackWidget'
+import UCSCTrackHubConnectionF from './ucsc-trackhub'
+import AddTrackWidgetF from './AddTrackWidget'
 import { AddTrackModel } from './AddTrackWidget/model'
-import {
-  stateModel as AddConnectionStateModel,
-  configSchema as AddConnectionConfigSchema,
-} from './AddConnectionWidget'
-import {
-  stateModelFactory as HierarchicalTrackSelectorStateModelFactory,
-  configSchema as HierarchicalTrackSelectorConfigSchema,
+import AddConnectionWidgetF from './AddConnectionWidget'
+import PluginStoreWidgetF from './PluginStoreWidget'
+import HierarchicalTrackSelectorWidgetF, {
   HierarchicalTrackSelectorModel,
 } from './HierarchicalTrackSelectorWidget'
-import {
-  stateModelFactory as PluginStoreStateModelFactory,
-  configSchema as PluginStoreConfigSchema,
-} from './PluginStoreWidget'
 
 const SetDefaultSession = lazy(() => import('./SetDefaultSession'))
 
@@ -39,68 +23,11 @@ export default class extends Plugin {
   }
 
   install(pluginManager: PluginManager) {
-    pluginManager.addConnectionType(
-      () =>
-        new ConnectionType({
-          name: 'UCSCTrackHubConnection',
-          configSchema: ucscConfigSchema,
-          stateModel: ucscModelFactory(pluginManager),
-          displayName: 'UCSC Track Hub',
-          description: 'A track or assembly hub in the Track Hub format',
-          url: '//genome.ucsc.edu/goldenPath/help/hgTrackHubHelp.html#Intro',
-        }),
-    )
-
-    pluginManager.addWidgetType(() => {
-      return new WidgetType({
-        name: 'HierarchicalTrackSelectorWidget',
-        heading: 'Available tracks',
-        configSchema: HierarchicalTrackSelectorConfigSchema,
-        stateModel: HierarchicalTrackSelectorStateModelFactory(pluginManager),
-        ReactComponent: lazy(
-          () =>
-            import(
-              './HierarchicalTrackSelectorWidget/components/HierarchicalTrackSelector'
-            ),
-        ),
-      })
-    })
-
-    pluginManager.addWidgetType(() => {
-      return new WidgetType({
-        name: 'AddTrackWidget',
-        heading: 'Add a track',
-        configSchema: AddTrackConfigSchema,
-        stateModel: AddTrackStateModelFactory(pluginManager),
-        ReactComponent: lazy(
-          () => import('./AddTrackWidget/components/AddTrackWidget'),
-        ),
-      })
-    })
-
-    pluginManager.addWidgetType(() => {
-      return new WidgetType({
-        name: 'AddConnectionWidget',
-        heading: 'Add a connection',
-        configSchema: AddConnectionConfigSchema,
-        stateModel: AddConnectionStateModel,
-        ReactComponent: lazy(
-          () => import('./AddConnectionWidget/components/AddConnectionWidget'),
-        ),
-      })
-    })
-
-    pluginManager.addWidgetType(() => {
-      return new WidgetType({
-        name: 'PluginStoreWidget',
-        heading: 'Plugin store',
-        configSchema: PluginStoreConfigSchema,
-        stateModel: PluginStoreStateModelFactory(pluginManager),
-        ReactComponent: lazy(
-          () => import('./PluginStoreWidget/components/PluginStoreWidget'),
-        ),
-      })
-    })
+    UCSCTrackHubConnectionF(pluginManager)
+    AddTrackWidgetF(pluginManager)
+    HierarchicalTrackSelectorWidgetF(pluginManager)
+    AddConnectionWidgetF(pluginManager)
+    PluginStoreWidgetF(pluginManager)
   }
 
   configure(_pluginManager: PluginManager) {}

package/src/ucsc-trackhub/index.ts

@@ -1,2 +1,19 @@
-export { default as modelFactory } from './model'
-export { default as configSchema } from './configSchema'
+import { ConnectionType } from '@jbrowse/core/pluggableElementTypes'
+import PluginManager from '@jbrowse/core/PluginManager'
+
+import stateModelFactory from './model'
+import configSchema from './configSchema'
+
+export default (pluginManager: PluginManager) => {
+  pluginManager.addConnectionType(
+    () =>
+      new ConnectionType({
+        name: 'UCSCTrackHubConnection',
+        configSchema,
+        stateModel: stateModelFactory(pluginManager),
+        displayName: 'UCSC Track Hub',
+        description: 'A track or assembly hub in the Track Hub format',
+        url: '//genome.ucsc.edu/goldenPath/help/hgTrackHubHelp.html#Intro',
+      }),
+  )
+}

package/src/ucsc-trackhub/model.ts

@@ -43,11 +43,11 @@ export default function UCSCTrackHubConnection(pluginManager: PluginManager) {
           const genomesFileLocation = hubUri
             ? {
                 uri: new URL(genomeFile, hubUri).href,
-                locationType: 'UriLocation',
+                locationType: 'UriLocation' as const,
               }
             : {
                 localPath: genomeFile,
-                locationType: 'LocalPathLocation',
+                locationType: 'LocalPathLocation' as const,
               }
           const genomesFile = await fetchGenomesFile(genomesFileLocation)
           const trackDbData = []
@@ -67,43 +67,32 @@ export default function UCSCTrackHubConnection(pluginManager: PluginManager) {
                 `Cannot find assembly for "${genomeName}" from the genomes file for connection "${connectionName}"`,
               )
             }
-            const trackDb = genome.get('trackDb')
-            if (!trackDb) {
+            const db = genome.get('trackDb')
+            if (!db) {
               throw new Error('genomesFile not found on hub')
             }
-            const trackDbFileLocation = hubUri
+            const base = new URL(genomeFile, hubUri)
+            const trackDbLoc = hubUri
               ? {
-                  uri: new URL(trackDb, new URL(genomeFile, hubUri)).href,
-                  locationType: 'UriLocation',
+                  uri: new URL(db, base).href,
+                  locationType: 'UriLocation' as const,
                 }
               : {
-                  localPath: trackDb,
-                  locationType: 'LocalPathLocation',
+                  localPath: db,
+                  locationType: 'LocalPathLocation' as const,
                 }
-            trackDbData.push([
-              trackDbFileLocation,
-              await fetchTrackDbFile(trackDbFileLocation),
-              genomeName,
-              conf,
-            ] as const)
+            const trackDb = await fetchTrackDbFile(trackDbLoc)
+            trackDbData.push([trackDbLoc, trackDb, genomeName, conf] as const)
           }
           for (const [
-            trackDbFileLocation,
+            trackDbLoc,
             trackDbFile,
             genomeName,
             conf,
           ] of trackDbData) {
-            const sequenceAdapter = readConfObject(conf, [
-              'sequence',
-              'adapter',
-            ])
+            const seqAdapter = readConfObject(conf, ['sequence', 'adapter'])
             self.addTrackConfs(
-              generateTracks(
-                trackDbFile,
-                trackDbFileLocation,
-                genomeName,
-                sequenceAdapter,
-              ),
+              generateTracks(trackDbFile, trackDbLoc, genomeName, seqAdapter),
             )
           }
         } catch (e) {