@jbrowse/plugin-grid-bookmark 2.5.0 → 2.6.2

package/src/GridBookmarkWidget/components/ClearBookmarks.tsx

@@ -1,60 +0,0 @@
-import React, { useState } from 'react'
-import { observer } from 'mobx-react'
-import { Button, DialogContent, DialogActions, Typography } from '@mui/material'
-import { Dialog } from '@jbrowse/core/ui'
-
-// icons
-import ClearAllIcon from '@mui/icons-material/ClearAll'
-
-// locals
-import { GridBookmarkModel } from '../model'
-
-function ClearBookmarks({ model }: { model: GridBookmarkModel }) {
-  const [dialogOpen, setDialogOpen] = useState(false)
-  return (
-    <>
-      <Button
-        startIcon={<ClearAllIcon />}
-        aria-label="clear bookmarks"
-        onClick={() => setDialogOpen(true)}
-      >
-        Clear
-      </Button>
-      <Dialog
-        open={dialogOpen}
-        onClose={() => setDialogOpen(false)}
-        title="Clear bookmarks"
-      >
-        <DialogContent>
-          <Typography>
-            Clear all bookmarks? Note this will clear bookmarks for all
-            assemblies
-          </Typography>
-        </DialogContent>
-        <DialogActions>
-          <Button
-            variant="contained"
-            color="secondary"
-            onClick={() => {
-              setDialogOpen(false)
-            }}
-          >
-            Cancel
-          </Button>
-          <Button
-            variant="contained"
-            color="primary"
-            onClick={() => {
-              model.clearAllBookmarks()
-              setDialogOpen(false)
-            }}
-          >
-            Confirm
-          </Button>
-        </DialogActions>
-      </Dialog>
-    </>
-  )
-}
-
-export default observer(ClearBookmarks)

package/src/GridBookmarkWidget/components/DeleteBookmark.tsx

@@ -1,58 +0,0 @@
-import React from 'react'
-import { observer } from 'mobx-react'
-import { assembleLocString } from '@jbrowse/core/util'
-import { Dialog } from '@jbrowse/core/ui'
-import { Button, DialogContent, DialogActions, Typography } from '@mui/material'
-
-// locals
-import { GridBookmarkModel } from '../model'
-
-function DeleteBookmarkDialog({
-  rowNumber,
-  model,
-  onClose,
-}: {
-  rowNumber: number | undefined
-  model: GridBookmarkModel
-  onClose: () => void
-}) {
-  return (
-    <Dialog
-      open={rowNumber !== undefined}
-      onClose={onClose}
-      title="Delete bookmark"
-    >
-      <DialogContent>
-        <Typography>
-          Remove{' '}
-          <code>
-            {rowNumber !== undefined
-              ? assembleLocString(model.bookmarkedRegions[rowNumber])
-              : ''}
-          </code>{' '}
-          ?
-        </Typography>
-      </DialogContent>
-      <DialogActions>
-        <Button variant="contained" color="secondary" onClick={() => onClose()}>
-          Cancel
-        </Button>
-
-        <Button
-          variant="contained"
-          color="primary"
-          onClick={() => {
-            if (rowNumber !== undefined) {
-              model.removeBookmark(rowNumber)
-              onClose()
-            }
-          }}
-        >
-          Confirm
-        </Button>
-      </DialogActions>
-    </Dialog>
-  )
-}
-
-export default observer(DeleteBookmarkDialog)

package/src/GridBookmarkWidget/components/DownloadBookmarks.tsx

@@ -1,80 +0,0 @@
-import React, { useState } from 'react'
-import { observer } from 'mobx-react'
-
-import {
-  Button,
-  DialogContent,
-  DialogActions,
-  MenuItem,
-  Select,
-  Typography,
-} from '@mui/material'
-import { Dialog } from '@jbrowse/core/ui'
-import { makeStyles } from 'tss-react/mui'
-import GetAppIcon from '@mui/icons-material/GetApp'
-
-import { GridBookmarkModel } from '../model'
-import { downloadBookmarkFile } from '../utils'
-
-const useStyles = makeStyles()(() => ({
-  flexItem: {
-    margin: 5,
-  },
-}))
-
-function DownloadBookmarks({ model }: { model: GridBookmarkModel }) {
-  const { classes } = useStyles()
-  const [dialogOpen, setDialogOpen] = useState(false)
-  const [fileType, setFileType] = useState('BED')
-  const { bookmarkedRegions } = model
-
-  return (
-    <>
-      <Button startIcon={<GetAppIcon />} onClick={() => setDialogOpen(true)}>
-        Download
-      </Button>
-      <Dialog
-        open={dialogOpen}
-        onClose={() => setDialogOpen(false)}
-        title="Download bookmarks"
-      >
-        <DialogContent>
-          <Typography>Format to download</Typography>
-          <Select
-            className={classes.flexItem}
-            data-testid="selectFileType"
-            value={fileType}
-            onChange={event => setFileType(event.target.value)}
-          >
-            <MenuItem value="BED">BED</MenuItem>
-            <MenuItem value="TSV">TSV</MenuItem>
-          </Select>
-        </DialogContent>
-        <DialogActions>
-          <Button
-            variant="contained"
-            color="secondary"
-            onClick={() => setDialogOpen(false)}
-          >
-            Cancel
-          </Button>
-          <Button
-            className={classes.flexItem}
-            data-testid="dialogDownload"
-            variant="contained"
-            color="primary"
-            startIcon={<GetAppIcon />}
-            onClick={() => {
-              downloadBookmarkFile(bookmarkedRegions, fileType, model)
-              setDialogOpen(false)
-            }}
-          >
-            Download
-          </Button>
-        </DialogActions>
-      </Dialog>
-    </>
-  )
-}
-
-export default observer(DownloadBookmarks)

package/src/GridBookmarkWidget/components/GridBookmarkWidget.test.tsx

@@ -1,161 +0,0 @@
-import React from 'react'
-import { saveAs } from 'file-saver'
-import { render, cleanup, fireEvent, within } from '@testing-library/react'
-
-import { createTestSession } from '@jbrowse/web/src/rootModel'
-
-import GridBookmarkWidget from './GridBookmarkWidget'
-import { GridBookmarkModel } from '../model'
-jest.mock('@jbrowse/web/src/makeWorkerInstance', () => () => {})
-
-jest.mock('file-saver', () => {
-  return {
-    ...jest.requireActual('file-saver'),
-    saveAs: jest.fn(),
-  }
-})
-
-describe('<GridBookmarkWidget />', () => {
-  beforeEach(() => {
-    // @ts-expect-error
-    saveAs.mockReset()
-  })
-
-  afterEach(cleanup)
-
-  it('renders empty with no bookmarks', async () => {
-    const session = createTestSession()
-    const model = session.addWidget(
-      'GridBookmarkWidget',
-      'gridBookmarkWidget',
-    ) as GridBookmarkModel
-
-    const { findByText } = render(<GridBookmarkWidget model={model} />)
-
-    expect(await findByText('No rows')).toBeTruthy()
-  })
-
-  it('renders bookmarks correctly', async () => {
-    const session = createTestSession()
-    const model = session.addWidget(
-      'GridBookmarkWidget',
-      'gridBookmarkWidget',
-    ) as GridBookmarkModel
-
-    model.addBookmark({
-      refName: 'chr1',
-      start: 1,
-      end: 12,
-      assemblyName: 'hg19',
-    })
-
-    const { findByText } = render(<GridBookmarkWidget model={model} />)
-
-    expect(await findByText('chr1:2..12')).toBeTruthy()
-  })
-
-  it('deletes individual bookmarks correctly', async () => {
-    const session = createTestSession()
-    const model = session.addWidget(
-      'GridBookmarkWidget',
-      'gridBookmarkWidget',
-    ) as GridBookmarkModel
-
-    model.addBookmark({
-      refName: 'chr1',
-      start: 1,
-      end: 12,
-      assemblyName: 'hg19',
-    })
-
-    const { findByText, findByTestId } = render(
-      <GridBookmarkWidget model={model} />,
-    )
-
-    fireEvent.click(await findByTestId('deleteBookmark'))
-    fireEvent.click(await findByText('Confirm'))
-
-    expect(await findByText('No rows')).toBeTruthy()
-  })
-
-  it('clears all bookmarks correctly', async () => {
-    const session = createTestSession()
-    const model = session.addWidget(
-      'GridBookmarkWidget',
-      'gridBookmarkWidget',
-    ) as GridBookmarkModel
-
-    model.addBookmark({
-      refName: 'chr1',
-      start: 1,
-      end: 12,
-      assemblyName: 'hg19',
-    })
-
-    const { findByText } = render(<GridBookmarkWidget model={model} />)
-
-    fireEvent.click(await findByText('Clear'))
-    fireEvent.click(await findByText('Confirm'))
-
-    expect(await findByText('No rows')).toBeTruthy()
-  })
-
-  it('downloads a BED file correctly', async () => {
-    const session = createTestSession()
-    const model = session.addWidget(
-      'GridBookmarkWidget',
-      'gridBookmarkWidget',
-    ) as GridBookmarkModel
-
-    model.addBookmark({
-      refName: 'chr1',
-      start: 1,
-      end: 12,
-      assemblyName: 'hg19',
-    })
-
-    const { findByText, findByTestId } = render(
-      <GridBookmarkWidget model={model} />,
-    )
-
-    fireEvent.click(await findByText('Download'))
-    fireEvent.click(await findByTestId('dialogDownload'))
-
-    const blob = new Blob([''], {
-      type: 'text/x-bed;charset=utf-8',
-    })
-
-    expect(saveAs).toHaveBeenCalledWith(blob, 'jbrowse_bookmarks_hg19.bed')
-  })
-
-  it('downloads a TSV file correctly', async () => {
-    const session = createTestSession()
-    const model = session.addWidget(
-      'GridBookmarkWidget',
-      'gridBookmarkWidget',
-    ) as GridBookmarkModel
-
-    model.addBookmark({
-      refName: 'chr1',
-      start: 1,
-      end: 12,
-      assemblyName: 'hg19',
-    })
-
-    const { findByText, findByTestId, getByRole } = render(
-      <GridBookmarkWidget model={model} />,
-    )
-
-    fireEvent.click(await findByText('Download'))
-    fireEvent.mouseDown(await findByText('BED'))
-    const listbox = within(getByRole('listbox'))
-    fireEvent.click(listbox.getByText('TSV'))
-    fireEvent.click(await findByTestId('dialogDownload'))
-
-    const blob = new Blob([''], {
-      type: 'text/tab-separated-values;charset=utf-8',
-    })
-
-    expect(saveAs).toHaveBeenCalledWith(blob, 'jbrowse_bookmarks.tsv')
-  })
-})

package/src/GridBookmarkWidget/components/GridBookmarkWidget.tsx

@@ -1,136 +0,0 @@
-import React, { useState } from 'react'
-import { observer } from 'mobx-react'
-import { Link, IconButton, Typography } from '@mui/material'
-import { makeStyles } from 'tss-react/mui'
-import { DataGrid } from '@mui/x-data-grid'
-import {
-  getSession,
-  assembleLocString,
-  measureGridWidth,
-} from '@jbrowse/core/util'
-
-// icons
-import DeleteIcon from '@mui/icons-material/Delete'
-
-// locals
-import AssemblySelector from './AssemblySelector'
-import DeleteBookmarkDialog from './DeleteBookmark'
-import DownloadBookmarks from './DownloadBookmarks'
-import ImportBookmarks from './ImportBookmarks'
-import ClearBookmarks from './ClearBookmarks'
-import { GridBookmarkModel } from '../model'
-import { navToBookmark } from '../utils'
-
-const useStyles = makeStyles()(theme => ({
-  link: {
-    cursor: 'pointer',
-  },
-  margin: {
-    margin: theme.spacing(2),
-  },
-}))
-
-const BookmarkGrid = observer(({ model }: { model: GridBookmarkModel }) => {
-  const { classes } = useStyles()
-  const [dialogRowNumber, setDialogRowNumber] = useState<number>()
-  const { bookmarkedRegions, selectedAssembly } = model
-  const { views } = getSession(model)
-
-  const bookmarkRows = bookmarkedRegions
-    .filter(
-      r => selectedAssembly === 'all' || r.assemblyName === selectedAssembly,
-    )
-    .map((region, index) => {
-      const { assemblyName, ...rest } = region
-      return {
-        ...region,
-        id: index,
-        delete: index,
-        locString: assembleLocString(
-          selectedAssembly === 'all' ? region : rest,
-        ),
-      }
-    })
-
-  return (
-    <>
-      <DataGrid
-        density="compact"
-        rows={bookmarkRows}
-        columns={[
-          {
-            field: 'locString',
-            headerName: 'bookmark link',
-            width: measureGridWidth(bookmarkRows.map(row => row.locString)),
-            renderCell: params => (
-              <Link
-                className={classes.link}
-                href="#"
-                onClick={async event => {
-                  event.preventDefault()
-                  await navToBookmark(params.value, views, model)
-                }}
-              >
-                {params.value}
-              </Link>
-            ),
-          },
-          {
-            field: 'label',
-            width: measureGridWidth(bookmarkRows.map(row => row.label)),
-            editable: true,
-          },
-          {
-            field: 'delete',
-            width: 100,
-            renderCell: params => (
-              <IconButton
-                data-testid="deleteBookmark"
-                aria-label="delete"
-                onClick={() => {
-                  if (params.value != null) {
-                    setDialogRowNumber(+params.value)
-                  }
-                }}
-              >
-                <DeleteIcon />
-              </IconButton>
-            ),
-          },
-        ]}
-        onCellEditStop={({ id, value }) =>
-          model.updateBookmarkLabel(id as number, value)
-        }
-        disableRowSelectionOnClick
-      />
-
-      <DeleteBookmarkDialog
-        rowNumber={dialogRowNumber}
-        model={model}
-        onClose={() => setDialogRowNumber(undefined)}
-      />
-    </>
-  )
-})
-
-function GridBookmarkWidget({ model }: { model: GridBookmarkModel }) {
-  const { selectedAssembly } = model
-  const { classes } = useStyles()
-
-  return (
-    <>
-      <AssemblySelector model={model} />
-      <DownloadBookmarks model={model} />
-      <ImportBookmarks model={model} assemblyName={selectedAssembly} />
-      <ClearBookmarks model={model} />
-
-      <Typography className={classes.margin}>
-        Note: you can double click the <code>label</code> field to add your own
-        custom notes
-      </Typography>
-      <BookmarkGrid model={model} />
-    </>
-  )
-}
-
-export default observer(GridBookmarkWidget)

package/src/GridBookmarkWidget/components/ImportBookmarks.tsx

@@ -1,131 +0,0 @@
-import React, { useState } from 'react'
-import { observer } from 'mobx-react'
-import { getSession } from '@jbrowse/core/util'
-import AssemblySelector from '@jbrowse/core/ui/AssemblySelector'
-import { FileLocation } from '@jbrowse/core/util/types'
-import { FileSelector } from '@jbrowse/core/ui'
-import { openLocation } from '@jbrowse/core/util/io'
-import { Button, DialogContent, DialogActions, Typography } from '@mui/material'
-import { Dialog } from '@jbrowse/core/ui'
-import { makeStyles } from 'tss-react/mui'
-
-// icons
-import ImportIcon from '@mui/icons-material/Publish'
-
-// locals
-import { GridBookmarkModel } from '../model'
-
-const useStyles = makeStyles()(() => ({
-  dialogContainer: {
-    margin: 15,
-  },
-  flexItem: {
-    margin: 5,
-  },
-}))
-
-function ImportBookmarks({
-  model,
-  assemblyName,
-}: {
-  model: GridBookmarkModel
-  assemblyName: string
-}) {
-  const { classes } = useStyles()
-  const session = getSession(model)
-  const { assemblyNames } = session
-  const [dialogOpen, setDialogOpen] = useState(false)
-  const [location, setLocation] = useState<FileLocation>()
-  const [error, setError] = useState<unknown>()
-  const [selectedAsm, setSelectedAsm] = useState(
-    assemblyName || assemblyNames[0],
-  )
-
-  return (
-    <>
-      <Button startIcon={<ImportIcon />} onClick={() => setDialogOpen(true)}>
-        Import
-      </Button>
-      <Dialog
-        open={dialogOpen}
-        onClose={() => setDialogOpen(false)}
-        maxWidth="xl"
-        title="Import bookmarks"
-      >
-        <DialogContent>
-          <Typography>
-            Choose a BED format file to import. The first 4 columns will be used
-          </Typography>
-
-          <FileSelector
-            location={location}
-            setLocation={setLocation}
-            name="File"
-          />
-          <Typography>Select assembly that your data belongs to</Typography>
-          <AssemblySelector
-            onChange={val => setSelectedAsm(val)}
-            session={session}
-            selected={selectedAsm}
-          />
-          {error ? (
-            <Typography color="error" variant="h6">{`${error}`}</Typography>
-          ) : null}
-        </DialogContent>
-        <DialogActions>
-          <Button
-            variant="contained"
-            color="secondary"
-            onClick={() => setDialogOpen(false)}
-          >
-            Cancel
-          </Button>
-          <Button
-            className={classes.flexItem}
-            data-testid="dialogImport"
-            variant="contained"
-            color="primary"
-            disabled={!location}
-            startIcon={<ImportIcon />}
-            onClick={async () => {
-              try {
-                if (!location) {
-                  return
-                }
-                const data = await openLocation(location).readFile('utf8')
-                const regions = data
-                  .split(/\n|\r\n|\r/)
-                  .filter(f => !!f.trim())
-                  .filter(
-                    f =>
-                      !f.startsWith('#') &&
-                      !f.startsWith('track') &&
-                      !f.startsWith('browser'),
-                  )
-                  .map(line => {
-                    const [refName, start, end, name] = line.split('\t')
-                    return {
-                      assemblyName: selectedAsm,
-                      refName,
-                      start: +start,
-                      end: +end,
-                      label: name === '.' ? undefined : name,
-                    }
-                  })
-                model.importBookmarks(regions)
-                setDialogOpen(false)
-              } catch (e) {
-                console.error(e)
-                setError(e)
-              }
-            }}
-          >
-            Import
-          </Button>
-        </DialogActions>
-      </Dialog>
-    </>
-  )
-}
-
-export default observer(ImportBookmarks)

package/src/GridBookmarkWidget/index.ts

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