@jbrowse/plugin-grid-bookmark 2.15.0 → 2.15.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/GridBookmarkWidget/components/Highlight/Highlight.js +33 -8
  2. package/dist/GridBookmarkWidget/components/dialogs/ShareBookmarksDialog.js +11 -2
  3. package/dist/GridBookmarkWidget/model.d.ts +1 -0
  4. package/dist/GridBookmarkWidget/model.js +3 -0
  5. package/esm/GridBookmarkWidget/components/Highlight/Highlight.js +33 -8
  6. package/esm/GridBookmarkWidget/components/dialogs/ShareBookmarksDialog.js +11 -2
  7. package/esm/GridBookmarkWidget/model.d.ts +1 -0
  8. package/esm/GridBookmarkWidget/model.js +3 -0
  9. package/package.json +2 -2
package/dist/GridBookmarkWidget/components/Highlight/Highlight.js CHANGED
@@ -32,13 +32,22 @@ const mui_1 = require("tss-react/mui");
32
32
  const util_1 = require("@jbrowse/core/util");
33
33
  const colord_1 = require("@jbrowse/core/util/colord");
34
34
  const material_1 = require("@mui/material");
35
+ const CascadingMenuButton_1 = __importDefault(require("@jbrowse/core/ui/CascadingMenuButton"));
35
36
  // icons
36
37
  const Bookmark_1 = __importDefault(require("@mui/icons-material/Bookmark"));
37
38
  const useStyles = (0, mui_1.makeStyles)()({
38
39
  highlight: {
40
+ // when the highlight is small, overflow:hidden makes the icon/indicators
41
+ // invisible
42
+ overflow: 'hidden',
39
43
  height: '100%',
40
44
  position: 'absolute',
41
- overflow: 'hidden',
45
+ zIndex: 100,
46
+ pointerEvents: 'none',
47
+ },
48
+ highlightButton: {
49
+ // re-enable pointerEvents on the button
50
+ pointerEvents: 'auto',
42
51
  },
43
52
  });
44
53
  const Highlight = (0, mobx_react_1.observer)(function Highlight({ model }) {
@@ -68,22 +77,38 @@ const Highlight = (0, mobx_react_1.observer)(function Highlight({ model }) {
68
77
  left: Math.min(s.offsetPx, e.offsetPx) - model.offsetPx,
69
78
  highlight: r.highlight,
70
79
  label: r.label,
80
+ bookmark: r,
71
81
  }
72
82
  : undefined;
73
83
  })
74
84
  .filter(util_1.notEmpty)
75
- .map(({ left, width, highlight, label }, idx) => (react_1.default.createElement("div", {
85
+ .map(({ left, width, highlight, label, bookmark }, idx) => (react_1.default.createElement("div", {
76
86
  /* biome-ignore lint/suspicious/noArrayIndexKey: */
77
87
  key: `${left}_${width}_${idx}`, className: classes.highlight, style: {
78
88
  left,
79
89
  width,
80
90
  background: highlight,
81
- } }, showBookmarkLabels ? (react_1.default.createElement(material_1.Tooltip, { title: label, arrow: true },
82
- react_1.default.createElement(Bookmark_1.default, { fontSize: "small", sx: {
83
- color: (0, colord_1.colord)(highlight).alpha() !== 0
84
- ? (0, colord_1.colord)(highlight).alpha(0.8).toRgbString()
85
- : (0, colord_1.colord)(highlight).alpha(0).toRgbString(),
86
- } }))) : null)))
91
+ } }, showBookmarkLabels ? (react_1.default.createElement("div", { className: classes.highlightButton },
92
+ react_1.default.createElement(CascadingMenuButton_1.default, { menuItems: [
93
+ {
94
+ label: 'Open bookmark widget',
95
+ onClick: () => {
96
+ session.showWidget(bookmarkWidget);
97
+ },
98
+ },
99
+ {
100
+ label: 'Remove bookmark',
101
+ onClick: () => {
102
+ bookmarkWidget.removeBookmarkObject(bookmark);
103
+ },
104
+ },
105
+ ] },
106
+ react_1.default.createElement(material_1.Tooltip, { title: label, arrow: true },
107
+ react_1.default.createElement(Bookmark_1.default, { fontSize: "small", sx: {
108
+ color: (0, colord_1.colord)(highlight).alpha() !== 0
109
+ ? (0, colord_1.colord)(highlight).alpha(0.8).toRgbString()
110
+ : (0, colord_1.colord)(highlight).alpha(0).toRgbString(),
111
+ } }))))) : null)))
87
112
  : null;
88
113
  });
89
114
  exports.default = Highlight;
package/dist/GridBookmarkWidget/components/dialogs/ShareBookmarksDialog.js CHANGED
@@ -41,6 +41,11 @@ const useStyles = (0, mui_1.makeStyles)()(() => ({
41
41
  flexItem: {
42
42
  margin: 5,
43
43
  },
44
+ content: {
45
+ display: 'flex',
46
+ flexFlow: 'column',
47
+ gap: '5px',
48
+ },
44
49
  }));
45
50
  const ShareBookmarksDialog = (0, mobx_react_1.observer)(function ({ onClose, model, }) {
46
51
  const { classes } = useStyles();
@@ -81,13 +86,17 @@ const ShareBookmarksDialog = (0, mobx_react_1.observer)(function ({ onClose, mod
81
86
  })();
82
87
  }, [bookmarksToShare, session]);
83
88
  return (react_1.default.createElement(ui_1.Dialog, { open: true, onClose: onClose, title: "Share bookmarks" },
84
- react_1.default.createElement(material_1.DialogContent, { style: { display: 'flex', flexFlow: 'column', gap: '5px' } },
89
+ react_1.default.createElement(material_1.DialogContent, { className: classes.content },
85
90
  react_1.default.createElement(material_1.Alert, { severity: "info" }, shareAll ? (react_1.default.createElement(react_1.default.Fragment, null,
86
91
  react_1.default.createElement("span", null, "All bookmarks will be shared."),
87
92
  react_1.default.createElement("br", null),
88
93
  react_1.default.createElement("span", null, "Use the checkboxes to select individual bookmarks to share."))) : ('Only selected bookmarks will be shared.')),
89
94
  react_1.default.createElement(material_1.DialogContentText, null, "Copy the URL below to share your bookmarks."),
90
- error ? (react_1.default.createElement(ui_1.ErrorMessage, { error: error })) : loading ? (react_1.default.createElement(material_1.Typography, null, "Generating short URL...")) : (react_1.default.createElement(material_1.TextField, { label: "URL", value: url, InputProps: { readOnly: true }, variant: "filled", fullWidth: true, onClick: event => {
95
+ error ? (react_1.default.createElement(ui_1.ErrorMessage, { error: error })) : loading ? (react_1.default.createElement(material_1.Typography, null, "Generating short URL...")) : (react_1.default.createElement(material_1.TextField, { label: "URL", value: url, slotProps: {
96
+ input: {
97
+ readOnly: true,
98
+ },
99
+ }, variant: "filled", fullWidth: true, onClick: event => {
91
100
  const target = event.target;
92
101
  target.select();
93
102
  } })),
package/dist/GridBookmarkWidget/model.d.ts CHANGED
@@ -292,6 +292,7 @@ export default function f(_pluginManager: PluginManager): import("mobx-state-tre
292
292
  * #action
293
293
  */
294
294
  clearSelectedBookmarks(): void;
295
+ removeBookmarkObject(arg: Instance<typeof LabeledRegionModel>): void;
295
296
  } & {
296
297
  afterAttach(): void;
297
298
  }, import("mobx-state-tree")._NotCustomized, {
package/dist/GridBookmarkWidget/model.js CHANGED
@@ -216,6 +216,9 @@ function f(_pluginManager) {
216
216
  }
217
217
  self.selectedBookmarks = [];
218
218
  },
219
+ removeBookmarkObject(arg) {
220
+ self.bookmarks.remove(arg);
221
+ },
219
222
  }))
220
223
  .actions(self => ({
221
224
  afterAttach() {
package/esm/GridBookmarkWidget/components/Highlight/Highlight.js CHANGED
@@ -4,13 +4,22 @@ import { makeStyles } from 'tss-react/mui';
4
4
  import { getSession, notEmpty } from '@jbrowse/core/util';
5
5
  import { colord } from '@jbrowse/core/util/colord';
6
6
  import { Tooltip } from '@mui/material';
7
+ import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton';
7
8
  // icons
8
9
  import BookmarkIcon from '@mui/icons-material/Bookmark';
9
10
  const useStyles = makeStyles()({
10
11
  highlight: {
12
+ // when the highlight is small, overflow:hidden makes the icon/indicators
13
+ // invisible
14
+ overflow: 'hidden',
11
15
  height: '100%',
12
16
  position: 'absolute',
13
- overflow: 'hidden',
17
+ zIndex: 100,
18
+ pointerEvents: 'none',
19
+ },
20
+ highlightButton: {
21
+ // re-enable pointerEvents on the button
22
+ pointerEvents: 'auto',
14
23
  },
15
24
  });
16
25
  const Highlight = observer(function Highlight({ model }) {
@@ -40,22 +49,38 @@ const Highlight = observer(function Highlight({ model }) {
40
49
  left: Math.min(s.offsetPx, e.offsetPx) - model.offsetPx,
41
50
  highlight: r.highlight,
42
51
  label: r.label,
52
+ bookmark: r,
43
53
  }
44
54
  : undefined;
45
55
  })
46
56
  .filter(notEmpty)
47
- .map(({ left, width, highlight, label }, idx) => (React.createElement("div", {
57
+ .map(({ left, width, highlight, label, bookmark }, idx) => (React.createElement("div", {
48
58
  /* biome-ignore lint/suspicious/noArrayIndexKey: */
49
59
  key: `${left}_${width}_${idx}`, className: classes.highlight, style: {
50
60
  left,
51
61
  width,
52
62
  background: highlight,
53
- } }, showBookmarkLabels ? (React.createElement(Tooltip, { title: label, arrow: true },
54
- React.createElement(BookmarkIcon, { fontSize: "small", sx: {
55
- color: colord(highlight).alpha() !== 0
56
- ? colord(highlight).alpha(0.8).toRgbString()
57
- : colord(highlight).alpha(0).toRgbString(),
58
- } }))) : null)))
63
+ } }, showBookmarkLabels ? (React.createElement("div", { className: classes.highlightButton },
64
+ React.createElement(CascadingMenuButton, { menuItems: [
65
+ {
66
+ label: 'Open bookmark widget',
67
+ onClick: () => {
68
+ session.showWidget(bookmarkWidget);
69
+ },
70
+ },
71
+ {
72
+ label: 'Remove bookmark',
73
+ onClick: () => {
74
+ bookmarkWidget.removeBookmarkObject(bookmark);
75
+ },
76
+ },
77
+ ] },
78
+ React.createElement(Tooltip, { title: label, arrow: true },
79
+ React.createElement(BookmarkIcon, { fontSize: "small", sx: {
80
+ color: colord(highlight).alpha() !== 0
81
+ ? colord(highlight).alpha(0.8).toRgbString()
82
+ : colord(highlight).alpha(0).toRgbString(),
83
+ } }))))) : null)))
59
84
  : null;
60
85
  });
61
86
  export default Highlight;
package/esm/GridBookmarkWidget/components/dialogs/ShareBookmarksDialog.js CHANGED
@@ -13,6 +13,11 @@ const useStyles = makeStyles()(() => ({
13
13
  flexItem: {
14
14
  margin: 5,
15
15
  },
16
+ content: {
17
+ display: 'flex',
18
+ flexFlow: 'column',
19
+ gap: '5px',
20
+ },
16
21
  }));
17
22
  const ShareBookmarksDialog = observer(function ({ onClose, model, }) {
18
23
  const { classes } = useStyles();
@@ -53,13 +58,17 @@ const ShareBookmarksDialog = observer(function ({ onClose, model, }) {
53
58
  })();
54
59
  }, [bookmarksToShare, session]);
55
60
  return (React.createElement(Dialog, { open: true, onClose: onClose, title: "Share bookmarks" },
56
- React.createElement(DialogContent, { style: { display: 'flex', flexFlow: 'column', gap: '5px' } },
61
+ React.createElement(DialogContent, { className: classes.content },
57
62
  React.createElement(Alert, { severity: "info" }, shareAll ? (React.createElement(React.Fragment, null,
58
63
  React.createElement("span", null, "All bookmarks will be shared."),
59
64
  React.createElement("br", null),
60
65
  React.createElement("span", null, "Use the checkboxes to select individual bookmarks to share."))) : ('Only selected bookmarks will be shared.')),
61
66
  React.createElement(DialogContentText, null, "Copy the URL below to share your bookmarks."),
62
- error ? (React.createElement(ErrorMessage, { error: error })) : loading ? (React.createElement(Typography, null, "Generating short URL...")) : (React.createElement(TextField, { label: "URL", value: url, InputProps: { readOnly: true }, variant: "filled", fullWidth: true, onClick: event => {
67
+ error ? (React.createElement(ErrorMessage, { error: error })) : loading ? (React.createElement(Typography, null, "Generating short URL...")) : (React.createElement(TextField, { label: "URL", value: url, slotProps: {
68
+ input: {
69
+ readOnly: true,
70
+ },
71
+ }, variant: "filled", fullWidth: true, onClick: event => {
63
72
  const target = event.target;
64
73
  target.select();
65
74
  } })),
package/esm/GridBookmarkWidget/model.d.ts CHANGED
@@ -292,6 +292,7 @@ export default function f(_pluginManager: PluginManager): import("mobx-state-tre
292
292
  * #action
293
293
  */
294
294
  clearSelectedBookmarks(): void;
295
+ removeBookmarkObject(arg: Instance<typeof LabeledRegionModel>): void;
295
296
  } & {
296
297
  afterAttach(): void;
297
298
  }, import("mobx-state-tree")._NotCustomized, {
package/esm/GridBookmarkWidget/model.js CHANGED
@@ -213,6 +213,9 @@ export default function f(_pluginManager) {
213
213
  }
214
214
  self.selectedBookmarks = [];
215
215
  },
216
+ removeBookmarkObject(arg) {
217
+ self.bookmarks.remove(arg);
218
+ },
216
219
  }))
217
220
  .actions(self => ({
218
221
  afterAttach() {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jbrowse/plugin-grid-bookmark",
3
- "version": "2.15.0",
3
+ "version": "2.15.1",
4
4
  "description": "JBrowse 2 grid bookmark widget",
5
5
  "keywords": [
6
6
  "jbrowse",
@@ -59,5 +59,5 @@
59
59
  "distModule": "esm/index.js",
60
60
  "srcModule": "src/index.ts",
61
61
  "module": "esm/index.js",
62
- "gitHead": "87eeb1fbf8311dbf88d5e75b5a265f03beffdda8"
62
+ "gitHead": "86ed70124fc5a0b1161266659d1ca9f8796bf3fe"
63
63
  }