@jbrowse/plugin-data-management 2.3.2 → 2.3.4

package/src/HierarchicalTrackSelectorWidget/components/Node.tsx

@@ -1,282 +0,0 @@
-import React, { useState } from 'react'
-import {
-  Checkbox,
-  FormControlLabel,
-  IconButton,
-  Tooltip,
-  Typography,
-} from '@mui/material'
-import { makeStyles } from 'tss-react/mui'
-
-// icons
-import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown'
-import ArrowRightIcon from '@mui/icons-material/ArrowRight'
-import MoreHorizIcon from '@mui/icons-material/MoreHoriz'
-
-// other
-import { HierarchicalTrackSelectorModel, TreeNode } from '../model'
-import JBrowseMenu from '@jbrowse/core/ui/Menu'
-import { getSession } from '@jbrowse/core/util'
-
-import {
-  AnyConfigurationModel,
-  readConfObject,
-} from '@jbrowse/core/configuration'
-import { getAllChildren } from './util'
-
-const useStyles = makeStyles()(theme => ({
-  compactCheckbox: {
-    padding: 0,
-  },
-
-  checkboxLabel: {
-    marginRight: 0,
-    '&:hover': {
-      backgroundColor: '#eee',
-    },
-  },
-
-  contrastColor: {
-    color: theme.palette.secondary.contrastText,
-  },
-
-  // this accordionBase element's small padding is used to give a margin to
-  // accordionColor it a "margin" because the virtualized elements can't really
-  // use margin in a conventional way (it doesn't affect layout)
-  accordionBase: {
-    display: 'flex',
-  },
-
-  accordionCard: {
-    padding: 3,
-    cursor: 'pointer',
-    display: 'flex',
-  },
-
-  nestingLevelMarker: {
-    position: 'absolute',
-    borderLeft: '1.5px solid #555',
-  },
-  // accordionColor set's display:flex so that the child accordionText use
-  // vertically centered text
-  accordionColor: {
-    background: theme.palette.tertiary.main,
-    color: theme.palette.tertiary.contrastText,
-    width: '100%',
-    display: 'flex',
-    paddingLeft: 5,
-  },
-
-  // margin:auto 0 to center text vertically
-  accordionText: {
-    margin: 'auto 0',
-  },
-}))
-
-export interface InfoArgs {
-  target: HTMLElement
-  id: string
-  conf: AnyConfigurationModel
-}
-
-function treeToMap(tree: TreeNode, map = new Map<string, TreeNode>()) {
-  if (tree.id && tree.children.length) {
-    map.set(tree.id, tree)
-  }
-  for (let i = 0; i < tree.children.length; i++) {
-    const node = tree.children[i]
-    treeToMap(node, map)
-  }
-  return map
-}
-
-function isUnsupported(name = '') {
-  return name.endsWith('(Unsupported)') || name.endsWith('(Unknown)')
-}
-
-// An individual node in the track selector. Note: manually sets cursor:
-// pointer improves usability for what can be clicked
-export default function Node(props: {
-  data: {
-    nestingLevel: number
-    checked: boolean
-    conf: AnyConfigurationModel
-    drawerPosition: unknown
-    id: string
-    isLeaf: boolean
-    name: string
-    onChange: Function
-    toggleCollapse: (arg: string) => void
-    tree: TreeNode
-    selected: boolean
-    model: HierarchicalTrackSelectorModel
-  }
-  isOpen: boolean
-  style?: { height: number }
-  setOpen: (arg: boolean) => void
-}) {
-  const { data, isOpen, style, setOpen } = props
-  const {
-    checked,
-    conf,
-    drawerPosition,
-    id,
-    isLeaf,
-    model,
-    name,
-    nestingLevel,
-    onChange,
-    selected,
-    toggleCollapse,
-    tree,
-  } = data
-
-  const { classes } = useStyles()
-  const width = 10
-  const [menuEl, setMenuEl] = useState<HTMLElement | null>(null)
-  const [info, setInfo] = useState<InfoArgs>()
-  const marginLeft = nestingLevel * width + (isLeaf ? width : 0)
-  const description = (conf && readConfObject(conf, ['description'])) || ''
-
-  return (
-    <div style={style} className={!isLeaf ? classes.accordionBase : undefined}>
-      {new Array(nestingLevel).fill(0).map((_, idx) => (
-        <div
-          key={`mark-${idx}`}
-          style={{ left: idx * width + 4, height: style?.height }}
-          className={classes.nestingLevelMarker}
-        />
-      ))}
-      <div
-        className={!isLeaf ? classes.accordionCard : undefined}
-        onClick={() => {
-          if (!menuEl) {
-            toggleCollapse(id)
-            setOpen(!isOpen)
-          }
-        }}
-        style={{
-          marginLeft,
-          whiteSpace: 'nowrap',
-          width: '100%',
-        }}
-      >
-        <div className={!isLeaf ? classes.accordionColor : undefined}>
-          {!isLeaf ? (
-            <div className={classes.accordionText}>
-              <Typography>
-                {isOpen ? <ArrowDropDownIcon /> : <ArrowRightIcon />}
-                {name}
-                <IconButton
-                  onClick={event => {
-                    setMenuEl(event.currentTarget)
-                    event.stopPropagation()
-                  }}
-                  className={classes.contrastColor}
-                >
-                  <MoreHorizIcon />
-                </IconButton>
-              </Typography>
-            </div>
-          ) : (
-            <>
-              <Tooltip
-                title={description + (selected ? ' (in selection)' : '')}
-                placement={drawerPosition === 'left' ? 'right' : 'left'}
-              >
-                <FormControlLabel
-                  className={classes.checkboxLabel}
-                  control={
-                    <Checkbox
-                      className={classes.compactCheckbox}
-                      checked={checked}
-                      onChange={() => onChange(id)}
-                      disabled={isUnsupported(name)}
-                      inputProps={{
-                        // @ts-ignore
-                        'data-testid': `htsTrackEntry-${id}`,
-                      }}
-                    />
-                  }
-                  label={
-                    <div
-                      style={{
-                        background: selected ? '#cccc' : undefined,
-                        padding: 1,
-                      }}
-                    >
-                      {name}
-                    </div>
-                  }
-                />
-              </Tooltip>
-              <IconButton
-                onClick={e => setInfo({ target: e.currentTarget, id, conf })}
-                style={{ padding: 0 }}
-                color="secondary"
-                data-testid={`htsTrackEntryMenu-${id}`}
-              >
-                <MoreHorizIcon />
-              </IconButton>
-            </>
-          )}
-          {menuEl ? (
-            <JBrowseMenu
-              anchorEl={menuEl}
-              menuItems={[
-                {
-                  label: 'Add to selection',
-                  onClick: () =>
-                    model.addToSelection(
-                      getAllChildren(treeToMap(tree).get(id)),
-                    ),
-                },
-                {
-                  label: 'Remove from selection',
-                  onClick: () =>
-                    model.removeFromSelection(
-                      getAllChildren(treeToMap(tree).get(id)),
-                    ),
-                },
-              ]}
-              onMenuItemClick={(_event, callback) => {
-                callback()
-                setMenuEl(null)
-              }}
-              open={Boolean(menuEl)}
-              onClose={() => setMenuEl(null)}
-            />
-          ) : null}
-
-          {info ? (
-            <JBrowseMenu
-              anchorEl={info?.target}
-              menuItems={[
-                ...(getSession(model).getTrackActionMenuItems?.(info.conf) ||
-                  []),
-                {
-                  label: 'Add to selection',
-                  onClick: () => model.addToSelection([info.conf]),
-                },
-                ...(selected
-                  ? [
-                      {
-                        label: 'Remove from selection',
-                        onClick: () => model.removeFromSelection([info.conf]),
-                      },
-                    ]
-                  : []),
-              ]}
-              onMenuItemClick={(_event, callback) => {
-                callback()
-                setInfo(undefined)
-              }}
-              open={Boolean(info)}
-              onClose={() => setInfo(undefined)}
-            />
-          ) : null}
-        </div>
-      </div>
-    </div>
-  )
-}

package/src/PluginStoreWidget/components/PluginStoreWidget.test.js

@@ -1,123 +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'
-
-import PluginStoreWidget from './PluginStoreWidget'
-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',
-    },
-  ],
-}
-
-describe('<PluginStoreWidget />', () => {
-  let session
-  let model
-
-  beforeEach(() => {
-    session = createTestSession()
-    model = session.addWidget('PluginStoreWidget', 'pluginStoreWidget')
-    const { location } = window
-    delete window.location
-    window.location = {
-      ...location,
-      reload: jest.fn(),
-    }
-    fetch.resetMocks()
-    fetch.mockResponse(JSON.stringify(plugins))
-  })
-
-  afterEach(cleanup)
-
-  it('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()
-  })
-
-  it('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])
-  })
-
-  it('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',
-      },
-    ])
-  })
-
-  it('plugin store admin - removes a custom plugin correctly', async () => {
-    session = createTestSession({}, true)
-    model = session.addWidget('PluginStoreWidget', 'pluginStoreWidget')
-    const rootModel = getParent(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/__snapshots__/index.test.js.snap

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

package/src/index.test.js

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