@jbrowse/plugin-grid-bookmark 1.7.11 → 2.1.0

package/src/GridBookmarkWidget/components/GridBookmarkWidget.tsx

@@ -1,17 +1,12 @@
 import React, { useState } from 'react'
 import { observer } from 'mobx-react'
-import {
-  Link,
-  IconButton,
-  Typography,
-  Button,
-  makeStyles,
-} from '@material-ui/core'
+import { Link, IconButton, Typography } from '@mui/material'
+import { makeStyles } from 'tss-react/mui'
 import { DataGrid, GridCellParams } from '@mui/x-data-grid'
 import { getSession, assembleLocString, measureText } from '@jbrowse/core/util'
-import DeleteIcon from '@material-ui/icons/Delete'
-import ViewCompactIcon from '@material-ui/icons/ViewCompact'
+import DeleteIcon from '@mui/icons-material/Delete'
 
+// locals
 import AssemblySelector from './AssemblySelector'
 import DeleteBookmarkDialog from './DeleteBookmark'
 import DownloadBookmarks from './DownloadBookmarks'
@@ -20,7 +15,7 @@ import ClearBookmarks from './ClearBookmarks'
 import { GridBookmarkModel } from '../model'
 import { navToBookmark } from '../utils'
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles()(() => ({
   link: {
     cursor: 'pointer',
   },
@@ -32,109 +27,102 @@ const useStyles = makeStyles(() => ({
 const measure = (row: any, col: string) =>
   Math.min(Math.max(measureText(String(row[col]), 14) + 20, 80), 1000)
 
-const BookmarkGrid = observer(
-  ({ compact, model }: { model: GridBookmarkModel; compact: boolean }) => {
-    const classes = useStyles()
-    const [dialogRowNumber, setDialogRowNumber] = useState<number>()
-    const { bookmarkedRegions, selectedAssembly } = model
-    const { views } = getSession(model)
+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
-      .toJS()
-      .filter(
-        region =>
-          selectedAssembly === 'all' ||
-          region.assemblyName === selectedAssembly,
-      )
-      .map((region, index) => {
-        const { assemblyName, ...rest } = region
-        return {
-          ...region,
-          id: index,
-          delete: index,
-          locString: assembleLocString(
-            selectedAssembly === 'all' ? region : rest,
-          ),
-        }
-      })
-
-    const columns = [
-      {
-        field: 'locString',
-        headerName: 'bookmark link',
-        width: Math.max(...bookmarkRows.map(row => measure(row, 'locString'))),
-        renderCell: (params: GridCellParams) => {
-          const { value } = params
-          return (
-            <Link
-              className={classes.link}
-              onClick={(event: React.MouseEvent) => {
-                navToBookmark(value as string, views, model)
-                event.preventDefault()
-              }}
-            >
-              {value}
-            </Link>
-          )
-        },
-      },
-      {
-        field: 'label',
-        width: Math.max(
-          100,
-          Math.max(...bookmarkRows.map(row => measure(row, 'label'))),
+  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,
         ),
-        editable: true,
+      }
+    })
+
+  const columns = [
+    {
+      field: 'locString',
+      headerName: 'bookmark link',
+      width: Math.max(...bookmarkRows.map(row => measure(row, 'locString'))),
+      renderCell: (params: GridCellParams) => {
+        const { value } = params
+        return (
+          <Link
+            className={classes.link}
+            onClick={(event: React.MouseEvent) => {
+              navToBookmark(value as string, views, model)
+              event.preventDefault()
+            }}
+          >
+            {value}
+          </Link>
+        )
       },
-      {
-        field: 'delete',
-        width: 30,
-        renderCell: (params: GridCellParams) => {
-          const { value } = params
-          return (
-            <IconButton
-              data-testid="deleteBookmark"
-              aria-label="delete"
-              onClick={() => {
-                if (value !== null && value !== undefined) {
-                  setDialogRowNumber(+value)
-                }
-              }}
-            >
-              <DeleteIcon />
-            </IconButton>
-          )
-        },
+    },
+    {
+      field: 'label',
+      width: Math.max(
+        100,
+        Math.max(...bookmarkRows.map(row => measure(row, 'label'))),
+      ),
+      editable: true,
+    },
+    {
+      field: 'delete',
+      width: 30,
+      renderCell: (params: GridCellParams) => {
+        const { value } = params
+        return (
+          <IconButton
+            data-testid="deleteBookmark"
+            aria-label="delete"
+            onClick={() => {
+              if (value !== null && value !== undefined) {
+                setDialogRowNumber(+value)
+              }
+            }}
+          >
+            <DeleteIcon />
+          </IconButton>
+        )
       },
-    ]
+    },
+  ]
 
-    return (
-      <>
-        <DataGrid
-          rows={bookmarkRows}
-          rowHeight={compact ? 25 : undefined}
-          headerHeight={compact ? 25 : undefined}
-          columns={columns}
-          onCellEditCommit={args => {
-            const { value, id } = args
-            model.updateBookmarkLabel(id as number, value as string)
-          }}
-          disableSelectionOnClick
-        />
+  return (
+    <>
+      <DataGrid
+        density="compact"
+        rows={bookmarkRows}
+        columns={columns}
+        onCellEditCommit={args => {
+          const { value, id } = args
+          model.updateBookmarkLabel(id as number, value as string)
+        }}
+        disableSelectionOnClick
+      />
 
-        <DeleteBookmarkDialog
-          rowNumber={dialogRowNumber}
-          model={model}
-          onClose={() => setDialogRowNumber(undefined)}
-        />
-      </>
-    )
-  },
-)
+      <DeleteBookmarkDialog
+        rowNumber={dialogRowNumber}
+        model={model}
+        onClose={() => setDialogRowNumber(undefined)}
+      />
+    </>
+  )
+})
 
 function GridBookmarkWidget({ model }: { model: GridBookmarkModel }) {
   const { selectedAssembly } = model
-  const [compact, setCompact] = useState(false)
 
   return (
     <>
@@ -142,12 +130,7 @@ function GridBookmarkWidget({ model }: { model: GridBookmarkModel }) {
       <DownloadBookmarks model={model} />
       <ImportBookmarks model={model} assemblyName={selectedAssembly} />
       <ClearBookmarks model={model} />
-      <Button
-        startIcon={<ViewCompactIcon />}
-        onClick={() => setCompact(!compact)}
-      >
-        Compact
-      </Button>
+
       <div style={{ margin: 12 }}>
         <Typography>
           Note: you can double click the <code>label</code> field to add your
@@ -155,7 +138,7 @@ function GridBookmarkWidget({ model }: { model: GridBookmarkModel }) {
         </Typography>
       </div>
       <div style={{ height: 750, width: '100%' }}>
-        <BookmarkGrid model={model} compact={compact} />
+        <BookmarkGrid model={model} />
       </div>
     </>
   )

package/src/GridBookmarkWidget/components/ImportBookmarks.tsx

@@ -12,14 +12,14 @@ import {
   DialogTitle,
   DialogContent,
   DialogActions,
-  makeStyles,
   Typography,
-} from '@material-ui/core'
-import CloseIcon from '@material-ui/icons/Close'
-import ImportIcon from '@material-ui/icons/Publish'
+} from '@mui/material'
+import { makeStyles } from 'tss-react/mui'
+import CloseIcon from '@mui/icons-material/Close'
+import ImportIcon from '@mui/icons-material/Publish'
 import { GridBookmarkModel } from '../model'
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles()(() => ({
   closeDialog: {
     position: 'absolute',
     right: 0,
@@ -40,7 +40,7 @@ function ImportBookmarks({
   model: GridBookmarkModel
   assemblyName: string
 }) {
-  const classes = useStyles()
+  const { classes } = useStyles()
   const session = getSession(model)
   const { assemblyNames } = session
   const [dialogOpen, setDialogOpen] = useState(false)

package/src/GridBookmarkWidget/index.js

@@ -1,5 +1,3 @@
 import { ConfigurationSchema } from '@jbrowse/core/configuration'
-
-export { default as ReactComponent } from './components/GridBookmarkWidget'
 export { default as stateModelFactory } from './model'
 export const configSchema = ConfigurationSchema('GridBookmarkWidget', {})

package/src/index.ts

@@ -1,7 +1,7 @@
 import { lazy } from 'react'
 
-import BookmarkIcon from '@material-ui/icons/Bookmark'
-import BookmarksIcon from '@material-ui/icons/Bookmarks'
+import BookmarkIcon from '@mui/icons-material/Bookmark'
+import BookmarksIcon from '@mui/icons-material/Bookmarks'
 
 import WidgetType from '@jbrowse/core/pluggableElementTypes/WidgetType'
 import Plugin from '@jbrowse/core/Plugin'

package/dist/GridBookmarkWidget/components/GridBookmarkWidget.test.js

@@ -1,302 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
-
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _fileSaver = require("file-saver");
-
-var _react2 = require("@testing-library/react");
-
-var _rootModel = require("@jbrowse/web/src/rootModel");
-
-var _GridBookmarkWidget = _interopRequireDefault(require("./GridBookmarkWidget"));
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-jest.mock('@jbrowse/web/src/makeWorkerInstance', function () {
-  return function () {};
-});
-jest.mock('file-saver', function () {
-  return _objectSpread(_objectSpread({}, jest.requireActual('file-saver')), {}, {
-    saveAs: jest.fn()
-  });
-});
-describe('<GridBookmarkWidget />', function () {
-  var session;
-  var model;
-  beforeEach(function () {
-    session = (0, _rootModel.createTestSession)();
-    model = session.addWidget('GridBookmarkWidget', 'gridBookmarkWidget');
-
-    _fileSaver.saveAs.mockReset();
-  });
-  afterEach(_react2.cleanup);
-  it('renders empty with no bookmarks', /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
-    var _render, findByText;
-
-    return _regenerator.default.wrap(function _callee$(_context) {
-      while (1) {
-        switch (_context.prev = _context.next) {
-          case 0:
-            _render = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_GridBookmarkWidget.default, {
-              model: model
-            })), findByText = _render.findByText;
-            _context.t0 = expect;
-            _context.next = 4;
-            return findByText('No rows');
-
-          case 4:
-            _context.t1 = _context.sent;
-            (0, _context.t0)(_context.t1).toBeTruthy();
-
-          case 6:
-          case "end":
-            return _context.stop();
-        }
-      }
-    }, _callee);
-  })));
-  it('renders bookmarks correctly', /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
-    var _render2, findByText;
-
-    return _regenerator.default.wrap(function _callee2$(_context2) {
-      while (1) {
-        switch (_context2.prev = _context2.next) {
-          case 0:
-            model.addBookmark({
-              refName: 'chr1',
-              start: 1,
-              end: 12,
-              assemblyName: 'hg19'
-            });
-            _render2 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_GridBookmarkWidget.default, {
-              model: model
-            })), findByText = _render2.findByText;
-            _context2.t0 = expect;
-            _context2.next = 5;
-            return findByText('chr1:2..12');
-
-          case 5:
-            _context2.t1 = _context2.sent;
-            (0, _context2.t0)(_context2.t1).toBeTruthy();
-
-          case 7:
-          case "end":
-            return _context2.stop();
-        }
-      }
-    }, _callee2);
-  })));
-  it('deletes individual bookmarks correctly', /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3() {
-    var _render3, findByText, findByTestId;
-
-    return _regenerator.default.wrap(function _callee3$(_context3) {
-      while (1) {
-        switch (_context3.prev = _context3.next) {
-          case 0:
-            model.addBookmark({
-              refName: 'chr1',
-              start: 1,
-              end: 12,
-              assemblyName: 'hg19'
-            });
-            _render3 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_GridBookmarkWidget.default, {
-              model: model
-            })), findByText = _render3.findByText, findByTestId = _render3.findByTestId;
-            _context3.t0 = _react2.fireEvent;
-            _context3.next = 5;
-            return findByTestId('deleteBookmark');
-
-          case 5:
-            _context3.t1 = _context3.sent;
-
-            _context3.t0.click.call(_context3.t0, _context3.t1);
-
-            _context3.t2 = _react2.fireEvent;
-            _context3.next = 10;
-            return findByText('Confirm');
-
-          case 10:
-            _context3.t3 = _context3.sent;
-
-            _context3.t2.click.call(_context3.t2, _context3.t3);
-
-            _context3.t4 = expect;
-            _context3.next = 15;
-            return findByText('No rows');
-
-          case 15:
-            _context3.t5 = _context3.sent;
-            (0, _context3.t4)(_context3.t5).toBeTruthy();
-
-          case 17:
-          case "end":
-            return _context3.stop();
-        }
-      }
-    }, _callee3);
-  })));
-  it('clears all bookmarks correctly', /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee4() {
-    var _render4, findByText;
-
-    return _regenerator.default.wrap(function _callee4$(_context4) {
-      while (1) {
-        switch (_context4.prev = _context4.next) {
-          case 0:
-            model.addBookmark({
-              refName: 'chr1',
-              start: 1,
-              end: 12,
-              assemblyName: 'hg19'
-            });
-            _render4 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_GridBookmarkWidget.default, {
-              model: model
-            })), findByText = _render4.findByText;
-            _context4.t0 = _react2.fireEvent;
-            _context4.next = 5;
-            return findByText('Clear');
-
-          case 5:
-            _context4.t1 = _context4.sent;
-
-            _context4.t0.click.call(_context4.t0, _context4.t1);
-
-            _context4.t2 = _react2.fireEvent;
-            _context4.next = 10;
-            return findByText('Confirm');
-
-          case 10:
-            _context4.t3 = _context4.sent;
-
-            _context4.t2.click.call(_context4.t2, _context4.t3);
-
-            _context4.t4 = expect;
-            _context4.next = 15;
-            return findByText('No rows');
-
-          case 15:
-            _context4.t5 = _context4.sent;
-            (0, _context4.t4)(_context4.t5).toBeTruthy();
-
-          case 17:
-          case "end":
-            return _context4.stop();
-        }
-      }
-    }, _callee4);
-  })));
-  it('downloads a BED file correctly', /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee5() {
-    var _render5, findByText, findByTestId, blob;
-
-    return _regenerator.default.wrap(function _callee5$(_context5) {
-      while (1) {
-        switch (_context5.prev = _context5.next) {
-          case 0:
-            model.addBookmark({
-              refName: 'chr1',
-              start: 1,
-              end: 12,
-              assemblyName: 'hg19'
-            });
-            _render5 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_GridBookmarkWidget.default, {
-              model: model
-            })), findByText = _render5.findByText, findByTestId = _render5.findByTestId;
-            _context5.t0 = _react2.fireEvent;
-            _context5.next = 5;
-            return findByText('Download');
-
-          case 5:
-            _context5.t1 = _context5.sent;
-
-            _context5.t0.click.call(_context5.t0, _context5.t1);
-
-            _context5.t2 = _react2.fireEvent;
-            _context5.next = 10;
-            return findByTestId('dialogDownload');
-
-          case 10:
-            _context5.t3 = _context5.sent;
-
-            _context5.t2.click.call(_context5.t2, _context5.t3);
-
-            blob = new Blob([''], {
-              type: 'text/x-bed;charset=utf-8'
-            });
-            expect(_fileSaver.saveAs).toHaveBeenCalledWith(blob, 'jbrowse_bookmarks_hg19.bed');
-
-          case 14:
-          case "end":
-            return _context5.stop();
-        }
-      }
-    }, _callee5);
-  })));
-  it('downloads a TSV file correctly', /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee6() {
-    var _render6, findByText, findByTestId, getByRole, listbox, blob;
-
-    return _regenerator.default.wrap(function _callee6$(_context6) {
-      while (1) {
-        switch (_context6.prev = _context6.next) {
-          case 0:
-            model.addBookmark({
-              refName: 'chr1',
-              start: 1,
-              end: 12,
-              assemblyName: 'hg19'
-            });
-            _render6 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_GridBookmarkWidget.default, {
-              model: model
-            })), findByText = _render6.findByText, findByTestId = _render6.findByTestId, getByRole = _render6.getByRole;
-            _context6.t0 = _react2.fireEvent;
-            _context6.next = 5;
-            return findByText('Download');
-
-          case 5:
-            _context6.t1 = _context6.sent;
-
-            _context6.t0.click.call(_context6.t0, _context6.t1);
-
-            _context6.t2 = _react2.fireEvent;
-            _context6.next = 10;
-            return findByText('BED');
-
-          case 10:
-            _context6.t3 = _context6.sent;
-
-            _context6.t2.mouseDown.call(_context6.t2, _context6.t3);
-
-            listbox = (0, _react2.within)(getByRole('listbox'));
-
-            _react2.fireEvent.click(listbox.getByText('TSV'));
-
-            _context6.t4 = _react2.fireEvent;
-            _context6.next = 17;
-            return findByTestId('dialogDownload');
-
-          case 17:
-            _context6.t5 = _context6.sent;
-
-            _context6.t4.click.call(_context6.t4, _context6.t5);
-
-            blob = new Blob([''], {
-              type: 'text/tab-separated-values;charset=utf-8'
-            });
-            expect(_fileSaver.saveAs).toHaveBeenCalledWith(blob, 'jbrowse_bookmarks.tsv');
-
-          case 21:
-          case "end":
-            return _context6.stop();
-        }
-      }
-    }, _callee6);
-  })));
-});

package/dist/index.test.js

@@ -1,35 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _PluginManager = _interopRequireDefault(require("@jbrowse/core/PluginManager"));
-
-var _pluginConfig = _interopRequireDefault(require("@jbrowse/plugin-config"));
-
-var _mobxStateTree = require("mobx-state-tree");
-
-var _ = _interopRequireDefault(require("."));
-
-describe('Grid bookmark', function () {
-  var pluginManager;
-  beforeAll(function () {
-    var originalConsoleWarn = console.warn;
-    console.warn = jest.fn();
-    pluginManager = new _PluginManager.default([new _.default(), new _pluginConfig.default()]);
-    pluginManager.createPluggableElements();
-    pluginManager.configure();
-    console.warn = originalConsoleWarn;
-  });
-  it("won't add if already added", function () {
-    expect(function () {
-      return pluginManager.addPlugin(new _.default());
-    }).toThrow(/JBrowse already configured, cannot add plugins/);
-  });
-  it('adds grid bookmark widget', function () {
-    var GridBookmarkWidget = pluginManager.getWidgetType('GridBookmarkWidget');
-    var config = GridBookmarkWidget.configSchema.create({
-      type: 'GridBookmarkWidget'
-    });
-    expect((0, _mobxStateTree.getSnapshot)(config)).toMatchSnapshot();
-  });
-});