@jbrowse/plugin-data-management 2.6.1 → 2.6.2

package/src/PluginStoreWidget/components/InstalledPlugin.tsx

@@ -1,167 +0,0 @@
-import React, { useState } from 'react'
-import { observer } from 'mobx-react'
-import { getParent } from 'mobx-state-tree'
-import {
-  Button,
-  Dialog,
-  DialogTitle,
-  DialogActions,
-  DialogContent,
-  IconButton,
-  ListItem,
-  Tooltip,
-  Typography,
-} from '@mui/material'
-import { makeStyles } from 'tss-react/mui'
-
-import CloseIcon from '@mui/icons-material/Close'
-import LockIcon from '@mui/icons-material/Lock'
-
-import PluginManager from '@jbrowse/core/PluginManager'
-import { getSession } from '@jbrowse/core/util'
-import {
-  BasePlugin,
-  isSessionWithSessionPlugins,
-} from '@jbrowse/core/util/types'
-import { PluginStoreModel } from '../model'
-
-const useStyles = makeStyles()(() => ({
-  closeDialog: {
-    position: 'absolute',
-    right: 0,
-    top: 0,
-  },
-  dialogContainer: {
-    margin: 15,
-  },
-  lockedPluginTooltip: {
-    marginRight: '0.5rem',
-  },
-}))
-
-function LockedPlugin() {
-  const { classes } = useStyles()
-  return (
-    <Tooltip
-      className={classes.lockedPluginTooltip}
-      title="This plugin was installed by an administrator, you cannot remove it."
-    >
-      <LockIcon />
-    </Tooltip>
-  )
-}
-
-function PluginDialog({
-  onClose,
-  plugin,
-}: {
-  plugin: string
-  onClose: (s?: string) => void
-}) {
-  const { classes } = useStyles()
-  return (
-    <Dialog open onClose={() => onClose()}>
-      <DialogTitle>
-        <IconButton
-          className={classes.closeDialog}
-          aria-label="close-dialog"
-          onClick={() => onClose()}
-        >
-          <CloseIcon />
-        </IconButton>
-      </DialogTitle>
-      <DialogContent>
-        <Typography>
-          Please confirm that you want to remove {plugin}. Note: if any
-          resources in this session still use this plugin, it may cause your
-          session to crash
-        </Typography>
-        <DialogActions>
-          <Button
-            variant="contained"
-            color="primary"
-            onClick={() => {
-              // avoid showing runtime plugin warning
-              window.setTimeout(() => {
-                onClose(plugin)
-              }, 500)
-            }}
-          >
-            Confirm
-          </Button>
-          <Button
-            variant="contained"
-            color="secondary"
-            onClick={() => {
-              onClose()
-            }}
-          >
-            Cancel
-          </Button>
-        </DialogActions>
-      </DialogContent>
-    </Dialog>
-  )
-}
-
-function InstalledPlugin({
-  plugin,
-  model,
-  pluginManager,
-}: {
-  plugin: BasePlugin
-  model: PluginStoreModel
-  pluginManager: PluginManager
-}) {
-  const [dialogPlugin, setDialogPlugin] = useState<string>()
-
-  const session = getSession(model)
-  const { sessionPlugins } = session as unknown as {
-    sessionPlugins: BasePlugin[]
-  }
-  const isSessionPlugin = sessionPlugins?.some(
-    p => pluginManager.pluginMetadata[plugin.name].url === p.url,
-  )
-
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const rootModel = getParent<any>(model, 3)
-  const { jbrowse, adminMode } = rootModel
-
-  return (
-    <>
-      {dialogPlugin ? (
-        <PluginDialog
-          plugin={dialogPlugin}
-          onClose={name => {
-            if (name) {
-              const pluginMetadata = pluginManager.pluginMetadata[plugin.name]
-
-              if (adminMode) {
-                jbrowse.removePlugin(pluginMetadata)
-              } else if (isSessionWithSessionPlugins(session)) {
-                session.removeSessionPlugin(pluginMetadata)
-              }
-            }
-            setDialogPlugin(undefined)
-          }}
-        />
-      ) : null}
-      <ListItem key={plugin.name}>
-        {adminMode || isSessionPlugin ? (
-          <IconButton
-            aria-label="removePlugin"
-            data-testid={`removePlugin-${plugin.name}`}
-            onClick={() => setDialogPlugin(plugin.name)}
-          >
-            <CloseIcon />
-          </IconButton>
-        ) : (
-          <LockedPlugin />
-        )}
-        <Typography>{plugin.name}</Typography>
-      </ListItem>
-    </>
-  )
-}
-
-export default observer(InstalledPlugin)

package/src/PluginStoreWidget/components/InstalledPluginsList.tsx

@@ -1,49 +0,0 @@
-import React from 'react'
-import { observer } from 'mobx-react'
-import { List, Typography } from '@mui/material'
-import PluginManager from '@jbrowse/core/PluginManager'
-import { PluginStoreModel } from '../model'
-import InstalledPlugin from './InstalledPlugin'
-
-function InstalledPluginsList({
-  pluginManager,
-  model,
-}: {
-  pluginManager: PluginManager
-  model: PluginStoreModel
-}) {
-  const { plugins } = pluginManager
-
-  const corePlugins = new Set(
-    plugins
-      .filter(p => pluginManager.pluginMetadata[p.name]?.isCore)
-      .map(p => p.name),
-  )
-
-  const externalPlugins = plugins.filter(
-    plugin => !corePlugins.has(plugin.name),
-  )
-
-  return (
-    <List>
-      {externalPlugins.length > 0 ? (
-        externalPlugins
-          .filter(plugin =>
-            plugin.name.toLowerCase().includes(model.filterText.toLowerCase()),
-          )
-          .map(plugin => (
-            <InstalledPlugin
-              key={plugin.name}
-              plugin={plugin}
-              model={model}
-              pluginManager={pluginManager}
-            />
-          ))
-      ) : (
-        <Typography>No plugins currently installed</Typography>
-      )}
-    </List>
-  )
-}
-
-export default observer(InstalledPluginsList)

package/src/PluginStoreWidget/components/PluginCard.tsx

@@ -1,106 +0,0 @@
-import React, { useState } from 'react'
-import { observer } from 'mobx-react'
-import { getParent } from 'mobx-state-tree'
-import { getSession, getEnv } from '@jbrowse/core/util'
-import {
-  JBrowsePlugin,
-  isSessionWithSessionPlugins,
-} from '@jbrowse/core/util/types'
-import {
-  Card,
-  CardActions,
-  CardContent,
-  Button,
-  Link,
-  Typography,
-} from '@mui/material'
-import { makeStyles } from 'tss-react/mui'
-
-// icons
-import PersonIcon from '@mui/icons-material/Person'
-import AddIcon from '@mui/icons-material/Add'
-import CheckIcon from '@mui/icons-material/Check'
-
-// locals
-import { PluginStoreModel } from '../model'
-
-const useStyles = makeStyles()({
-  card: {
-    margin: '1em',
-  },
-  icon: {
-    marginLeft: '0.5em',
-    marginRight: '0.5em',
-  },
-  bold: {
-    fontWeight: 600,
-  },
-  dataField: {
-    display: 'flex',
-    alignItems: 'center',
-    margin: '0.4em 0em',
-  },
-})
-
-export default observer(function PluginCard({
-  plugin,
-  model,
-  adminMode,
-}: {
-  plugin: JBrowsePlugin
-  model: PluginStoreModel
-  adminMode: boolean
-}) {
-  const { classes } = useStyles()
-  const session = getSession(model)
-  const { pluginManager } = getEnv(model)
-  const { runtimePluginDefinitions } = pluginManager
-  const isInstalled = runtimePluginDefinitions.some(d => d.url === plugin.url)
-  const [tempDisabled, setTempDisabled] = useState(false)
-  const disableButton = isInstalled || tempDisabled
-
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const rootModel = getParent<any>(model, 3)
-  const { jbrowse } = rootModel
-
-  return (
-    <Card variant="outlined" key={plugin.name} className={classes.card}>
-      <CardContent>
-        <div className={classes.dataField}>
-          <Typography variant="h5">
-            <Link
-              href={`${plugin.location}#readme`}
-              target="_blank"
-              rel="noopener"
-            >
-              {plugin.name}
-            </Link>
-          </Typography>
-        </div>
-        <div className={classes.dataField}>
-          <PersonIcon style={{ marginRight: '0.5em' }} />
-          <Typography>{plugin.authors.join(', ')}</Typography>
-        </div>
-        <Typography className={classes.bold}>Description:</Typography>
-        <Typography>{plugin.description}</Typography>
-      </CardContent>
-      <CardActions>
-        <Button
-          variant="contained"
-          disabled={disableButton}
-          startIcon={isInstalled ? <CheckIcon /> : <AddIcon />}
-          onClick={() => {
-            if (adminMode) {
-              jbrowse.addPlugin({ name: plugin.name, url: plugin.url })
-            } else if (isSessionWithSessionPlugins(session)) {
-              session.addSessionPlugin(plugin)
-            }
-            setTempDisabled(true)
-          }}
-        >
-          {isInstalled ? 'Installed' : 'Install'}
-        </Button>
-      </CardActions>
-    </Card>
-  )
-})

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

@@ -1,132 +0,0 @@
-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-expect-error
-  delete window.location
-  window.location = {
-    ...location,
-    reload: jest.fn(),
-  }
-
-  // @ts-expect-error
-  fetch.resetMocks()
-
-  // @ts-expect-error
-  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/PluginStoreWidget.tsx

@@ -1,181 +0,0 @@
-import React, { useState, useEffect } from 'react'
-
-import {
-  Accordion,
-  AccordionSummary,
-  Button,
-  IconButton,
-  InputAdornment,
-  TextField,
-  Typography,
-} from '@mui/material'
-import { makeStyles } from 'tss-react/mui'
-import { observer } from 'mobx-react'
-import { getEnv } from 'mobx-state-tree'
-import { JBrowsePlugin } from '@jbrowse/core/util/types'
-import { LoadingEllipses } from '@jbrowse/core/ui'
-import { getSession, isElectron } from '@jbrowse/core/util'
-
-// icons
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
-import ClearIcon from '@mui/icons-material/Clear'
-import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined'
-
-// locals
-import InstalledPluginsList from './InstalledPluginsList'
-import PluginCard from './PluginCard'
-import CustomPluginForm from './CustomPluginForm'
-import { PluginStoreModel } from '../model'
-
-const useStyles = makeStyles()(theme => ({
-  root: {
-    margin: theme.spacing(1),
-  },
-  expandIcon: {
-    color: theme.palette.tertiary.contrastText,
-  },
-  adminBadge: {
-    margin: '0.5em',
-    borderRadius: 3,
-    backgroundColor: theme.palette.quaternary.main,
-    padding: '1em',
-    display: 'flex',
-    alignContent: 'center',
-  },
-  customPluginButton: {
-    margin: '0.5em',
-    display: 'flex',
-    justifyContent: 'center',
-  },
-}))
-
-function PluginStoreWidget({ model }: { model: PluginStoreModel }) {
-  const { classes } = useStyles()
-  const [pluginArray, setPluginArray] = useState<JBrowsePlugin[]>()
-  const [error, setError] = useState<unknown>()
-  const [customPluginFormOpen, setCustomPluginFormOpen] = useState(false)
-  const { adminMode } = getSession(model)
-  const { pluginManager } = getEnv(model)
-
-  useEffect(() => {
-    const controller = new AbortController()
-    const { signal } = controller
-
-    // eslint-disable-next-line @typescript-eslint/no-floating-promises
-    ;(async () => {
-      try {
-        const response = await fetch(
-          'https://jbrowse.org/plugin-store/plugins.json',
-          { signal },
-        )
-        if (!response.ok) {
-          const err = await response.text()
-          throw new Error(
-            `Failed to fetch plugin data: ${response.status} ${response.statusText} ${err}`,
-          )
-        }
-        const array = await response.json()
-        if (!signal.aborted) {
-          setPluginArray(array.plugins)
-        }
-      } catch (e) {
-        console.error(e)
-        setError(e)
-      }
-    })()
-
-    return () => {
-      controller.abort()
-    }
-  }, [])
-
-  return (
-    <div className={classes.root}>
-      {adminMode && (
-        <>
-          {!isElectron && (
-            <div className={classes.adminBadge}>
-              <InfoOutlinedIcon style={{ marginRight: '0.3em' }} />
-              <Typography>
-                You are using the <code>admin-server</code>. Any changes you
-                make will be saved to your configuration file. You also have the
-                ability to add custom plugins that are not in the store.
-              </Typography>
-            </div>
-          )}
-          <div className={classes.customPluginButton}>
-            <Button
-              variant="contained"
-              onClick={() => setCustomPluginFormOpen(true)}
-            >
-              Add custom plugin
-            </Button>
-          </div>
-          <CustomPluginForm
-            open={customPluginFormOpen}
-            onClose={() => setCustomPluginFormOpen(false)}
-            model={model}
-          />
-        </>
-      )}
-      <TextField
-        label="Filter plugins"
-        value={model.filterText}
-        onChange={event => model.setFilterText(event.target.value)}
-        fullWidth
-        InputProps={{
-          endAdornment: (
-            <InputAdornment position="end">
-              <IconButton onClick={() => model.clearFilterText()}>
-                <ClearIcon />
-              </IconButton>
-            </InputAdornment>
-          ),
-        }}
-      />
-      <Accordion defaultExpanded>
-        <AccordionSummary
-          expandIcon={<ExpandMoreIcon className={classes.expandIcon} />}
-        >
-          <Typography variant="h5">Installed plugins</Typography>
-        </AccordionSummary>
-        <div style={{ margin: '1em' }}>
-          <InstalledPluginsList pluginManager={pluginManager} model={model} />
-        </div>
-      </Accordion>
-      <Accordion defaultExpanded>
-        <AccordionSummary
-          expandIcon={<ExpandMoreIcon className={classes.expandIcon} />}
-        >
-          <Typography variant="h5">Available plugins</Typography>
-        </AccordionSummary>
-        {error ? (
-          <Typography color="error">{`${error}`}</Typography>
-        ) : pluginArray ? (
-          pluginArray
-            .filter(plugin => {
-              // If plugin only has cjsUrl, don't display outside desktop
-              return (
-                !(isElectron && plugin.cjsUrl) &&
-                plugin.name
-                  .toLowerCase()
-                  .includes(model.filterText.toLowerCase())
-              )
-            })
-            .map(plugin => (
-              <PluginCard
-                key={plugin.name}
-                plugin={plugin}
-                model={model}
-                adminMode={!!adminMode}
-              />
-            ))
-        ) : (
-          <LoadingEllipses />
-        )}
-      </Accordion>
-    </div>
-  )
-}
-
-export default observer(PluginStoreWidget)