@jbrowse/plugin-grid-bookmark 2.6.1 → 2.6.2

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')),
-    })
-  })
-}

package/src/GridBookmarkWidget/model.ts

@@ -1,66 +0,0 @@
-import { types, cast, Instance } from 'mobx-state-tree'
-import PluginManager from '@jbrowse/core/PluginManager'
-import { Region } from '@jbrowse/core/util/types'
-import { Region as RegionModel, ElementId } from '@jbrowse/core/util/types/mst'
-
-const LabeledRegionModel = types
-  .compose(
-    RegionModel,
-    types.model('Label', { label: types.optional(types.string, '') }),
-  )
-  .actions(self => ({
-    setLabel(label: string) {
-      self.label = label
-    },
-  }))
-
-export default function f(pluginManager: PluginManager) {
-  return types
-    .model('GridBookmarkModel', {
-      id: ElementId,
-      type: types.literal('GridBookmarkWidget'),
-      view: types.safeReference(
-        pluginManager.pluggableMstType('view', 'stateModel'),
-      ),
-      bookmarkedRegions: types.array(LabeledRegionModel),
-      modelSelectedAssembly: '',
-    })
-    .actions(self => ({
-      importBookmarks(regions: Region[]) {
-        self.bookmarkedRegions = cast([...self.bookmarkedRegions, ...regions])
-      },
-      addBookmark(region: Region) {
-        self.bookmarkedRegions.push(region)
-      },
-      removeBookmark(index: number) {
-        self.bookmarkedRegions.splice(index, 1)
-      },
-      clearAllBookmarks() {
-        self.bookmarkedRegions.clear()
-      },
-      updateBookmarkLabel(index: number, label: string) {
-        self.bookmarkedRegions[index]?.setLabel(label)
-      },
-      setSelectedAssembly(assembly: string) {
-        self.modelSelectedAssembly = assembly
-      },
-    }))
-    .views(self => ({
-      get selectedAssembly() {
-        return (
-          self.modelSelectedAssembly ||
-          (self.bookmarkedRegions.length
-            ? self.bookmarkedRegions[0].assemblyName
-            : '')
-        )
-      },
-      get assemblies() {
-        return [
-          ...new Set(self.bookmarkedRegions.map(region => region.assemblyName)),
-        ]
-      },
-    }))
-}
-
-export type GridBookmarkStateModel = ReturnType<typeof f>
-export type GridBookmarkModel = Instance<GridBookmarkStateModel>

package/src/GridBookmarkWidget/types.ts

@@ -1,5 +0,0 @@
-import { Region } from '@jbrowse/core/util/types'
-
-export interface LabeledRegion extends Region {
-  label: string
-}

package/src/GridBookmarkWidget/utils.ts

@@ -1,90 +0,0 @@
-import { saveAs } from 'file-saver'
-import { getSession, assembleLocString } from '@jbrowse/core/util'
-import { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
-import { AbstractViewModel } from '@jbrowse/core/util/types'
-
-// locals
-import { GridBookmarkModel } from './model'
-import { LabeledRegion } from './types'
-
-type LGV = LinearGenomeViewModel
-
-type MaybeLGV = LGV | undefined
-
-export async function navToBookmark(
-  locString: string,
-  views: AbstractViewModel[],
-  model: GridBookmarkModel,
-) {
-  const session = getSession(model)
-  try {
-    // search for exact match to an lgv that this bookmark widget launched, or
-    // any lgv that looks like it is relevant to what we are browsing
-    const { selectedAssembly } = model
-    const newViewId = `${model.id}_${selectedAssembly}`
-    let view = (views.find(
-      v => v.type === 'LinearGenomeView' && v.id === newViewId,
-    ) ||
-      views.find(
-        v =>
-          v.type === 'LinearGenomeView' &&
-          // @ts-expect-error
-          v.assemblyNames[0] === selectedAssembly,
-      )) as MaybeLGV
-
-    if (!view) {
-      view = session.addView('LinearGenomeView', {
-        id: newViewId,
-      }) as LGV
-    }
-    await view.navToLocString(locString, selectedAssembly)
-  } catch (e) {
-    console.error(e)
-    session.notify(`${e}`, 'error')
-  }
-}
-
-export function downloadBookmarkFile(
-  bookmarkedRegions: LabeledRegion[],
-  fileFormat: string,
-  model: GridBookmarkModel,
-) {
-  const { selectedAssembly } = model
-  const fileHeader =
-    fileFormat === 'TSV'
-      ? 'chrom\tstart\tend\tlabel\tassembly_name\tcoord_range\n'
-      : ''
-
-  const fileContents = bookmarkedRegions
-    .map(b => {
-      const { label } = b
-      const labelVal = label === '' ? '.' : label
-      const locString = assembleLocString(b)
-
-      if (fileFormat === 'BED') {
-        if (b.assemblyName === selectedAssembly || selectedAssembly === 'all') {
-          return `${b.refName}\t${b.start}\t${b.end}\t${labelVal}\n`
-        }
-        return ''
-      } else {
-        return `${b.refName}\t${b.start + 1}\t${b.end}\t${labelVal}\t${
-          b.assemblyName
-        }\t${locString}\n`
-      }
-    })
-    .reduce((a, b) => a + b, fileHeader)
-
-  const blob = new Blob([fileContents || ''], {
-    type:
-      fileFormat === 'BED'
-        ? 'text/x-bed;charset=utf-8'
-        : 'text/tab-separated-values;charset=utf-8',
-  })
-
-  const fileName =
-    fileFormat === 'BED'
-      ? `jbrowse_bookmarks_${selectedAssembly}.bed`
-      : 'jbrowse_bookmarks.tsv'
-
-  saveAs(blob, fileName)
-}

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

@@ -1,3 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`adds grid bookmark widget 1`] = `{}`;

package/src/index.test.ts

@@ -1,26 +0,0 @@
-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 grid bookmark widget', () => {
-  const GridBookmarkWidget = pluginManager.getWidgetType('GridBookmarkWidget')
-  const config = GridBookmarkWidget.configSchema.create({
-    type: 'GridBookmarkWidget',
-  })
-  expect(getSnapshot(config)).toMatchSnapshot()
-})