@jbrowse/plugin-grid-bookmark 2.15.3 → 2.16.0
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.
|
@@ -36,18 +36,15 @@ const CascadingMenuButton_1 = __importDefault(require("@jbrowse/core/ui/Cascadin
|
|
|
36
36
|
// icons
|
|
37
37
|
const Bookmark_1 = __importDefault(require("@mui/icons-material/Bookmark"));
|
|
38
38
|
const useStyles = (0, mui_1.makeStyles)()({
|
|
39
|
+
bookmarkButton: {
|
|
40
|
+
overflow: 'hidden',
|
|
41
|
+
position: 'absolute',
|
|
42
|
+
zIndex: 1000,
|
|
43
|
+
},
|
|
39
44
|
highlight: {
|
|
40
|
-
// when the highlight is small, overflow:hidden makes the icon/indicators
|
|
41
|
-
// invisible
|
|
42
45
|
overflow: 'hidden',
|
|
43
46
|
height: '100%',
|
|
44
47
|
position: 'absolute',
|
|
45
|
-
zIndex: 100,
|
|
46
|
-
pointerEvents: 'none',
|
|
47
|
-
},
|
|
48
|
-
highlightButton: {
|
|
49
|
-
// re-enable pointerEvents on the button
|
|
50
|
-
pointerEvents: 'auto',
|
|
51
48
|
},
|
|
52
49
|
});
|
|
53
50
|
const Highlight = (0, mobx_react_1.observer)(function Highlight({ model }) {
|
|
@@ -82,33 +79,35 @@ const Highlight = (0, mobx_react_1.observer)(function Highlight({ model }) {
|
|
|
82
79
|
: undefined;
|
|
83
80
|
})
|
|
84
81
|
.filter(util_1.notEmpty)
|
|
85
|
-
.map(({ left, width, highlight, label, bookmark }, idx) => (
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
82
|
+
.map(({ left, width, highlight, label, bookmark }, idx) => (
|
|
83
|
+
/* biome-ignore lint/suspicious/noArrayIndexKey: */
|
|
84
|
+
react_1.default.createElement(react_1.default.Fragment, { key: `${left}_${width}_${idx}` },
|
|
85
|
+
react_1.default.createElement("div", { className: classes.highlight, id: "highlight", style: {
|
|
86
|
+
left,
|
|
87
|
+
width,
|
|
88
|
+
background: highlight,
|
|
89
|
+
} }),
|
|
90
|
+
showBookmarkLabels && width > 20 ? (react_1.default.createElement("div", { className: classes.bookmarkButton, style: { left } },
|
|
91
|
+
react_1.default.createElement(CascadingMenuButton_1.default, { menuItems: [
|
|
92
|
+
{
|
|
93
|
+
label: 'Open bookmark widget',
|
|
94
|
+
onClick: () => {
|
|
95
|
+
session.showWidget(bookmarkWidget);
|
|
96
|
+
},
|
|
97
97
|
},
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
98
|
+
{
|
|
99
|
+
label: 'Remove bookmark',
|
|
100
|
+
onClick: () => {
|
|
101
|
+
bookmarkWidget.removeBookmarkObject(bookmark);
|
|
102
|
+
},
|
|
103
103
|
},
|
|
104
|
-
},
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
} }))))) : null)))
|
|
104
|
+
] },
|
|
105
|
+
react_1.default.createElement(material_1.Tooltip, { title: label, arrow: true },
|
|
106
|
+
react_1.default.createElement(Bookmark_1.default, { fontSize: "small", sx: {
|
|
107
|
+
color: (0, colord_1.colord)(highlight).alpha() !== 0
|
|
108
|
+
? (0, colord_1.colord)(highlight).alpha(0.8).toRgbString()
|
|
109
|
+
: (0, colord_1.colord)(highlight).alpha(0).toRgbString(),
|
|
110
|
+
} }))))) : null)))
|
|
112
111
|
: null;
|
|
113
112
|
});
|
|
114
113
|
exports.default = Highlight;
|
|
@@ -8,18 +8,15 @@ import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton';
|
|
|
8
8
|
// icons
|
|
9
9
|
import BookmarkIcon from '@mui/icons-material/Bookmark';
|
|
10
10
|
const useStyles = makeStyles()({
|
|
11
|
+
bookmarkButton: {
|
|
12
|
+
overflow: 'hidden',
|
|
13
|
+
position: 'absolute',
|
|
14
|
+
zIndex: 1000,
|
|
15
|
+
},
|
|
11
16
|
highlight: {
|
|
12
|
-
// when the highlight is small, overflow:hidden makes the icon/indicators
|
|
13
|
-
// invisible
|
|
14
17
|
overflow: 'hidden',
|
|
15
18
|
height: '100%',
|
|
16
19
|
position: 'absolute',
|
|
17
|
-
zIndex: 100,
|
|
18
|
-
pointerEvents: 'none',
|
|
19
|
-
},
|
|
20
|
-
highlightButton: {
|
|
21
|
-
// re-enable pointerEvents on the button
|
|
22
|
-
pointerEvents: 'auto',
|
|
23
20
|
},
|
|
24
21
|
});
|
|
25
22
|
const Highlight = observer(function Highlight({ model }) {
|
|
@@ -54,33 +51,35 @@ const Highlight = observer(function Highlight({ model }) {
|
|
|
54
51
|
: undefined;
|
|
55
52
|
})
|
|
56
53
|
.filter(notEmpty)
|
|
57
|
-
.map(({ left, width, highlight, label, bookmark }, idx) => (
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
54
|
+
.map(({ left, width, highlight, label, bookmark }, idx) => (
|
|
55
|
+
/* biome-ignore lint/suspicious/noArrayIndexKey: */
|
|
56
|
+
React.createElement(React.Fragment, { key: `${left}_${width}_${idx}` },
|
|
57
|
+
React.createElement("div", { className: classes.highlight, id: "highlight", style: {
|
|
58
|
+
left,
|
|
59
|
+
width,
|
|
60
|
+
background: highlight,
|
|
61
|
+
} }),
|
|
62
|
+
showBookmarkLabels && width > 20 ? (React.createElement("div", { className: classes.bookmarkButton, style: { left } },
|
|
63
|
+
React.createElement(CascadingMenuButton, { menuItems: [
|
|
64
|
+
{
|
|
65
|
+
label: 'Open bookmark widget',
|
|
66
|
+
onClick: () => {
|
|
67
|
+
session.showWidget(bookmarkWidget);
|
|
68
|
+
},
|
|
69
69
|
},
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
70
|
+
{
|
|
71
|
+
label: 'Remove bookmark',
|
|
72
|
+
onClick: () => {
|
|
73
|
+
bookmarkWidget.removeBookmarkObject(bookmark);
|
|
74
|
+
},
|
|
75
75
|
},
|
|
76
|
-
},
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
} }))))) : null)))
|
|
76
|
+
] },
|
|
77
|
+
React.createElement(Tooltip, { title: label, arrow: true },
|
|
78
|
+
React.createElement(BookmarkIcon, { fontSize: "small", sx: {
|
|
79
|
+
color: colord(highlight).alpha() !== 0
|
|
80
|
+
? colord(highlight).alpha(0.8).toRgbString()
|
|
81
|
+
: colord(highlight).alpha(0).toRgbString(),
|
|
82
|
+
} }))))) : null)))
|
|
84
83
|
: null;
|
|
85
84
|
});
|
|
86
85
|
export default Highlight;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@jbrowse/plugin-grid-bookmark",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.16.0",
|
|
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": "
|
|
62
|
+
"gitHead": "1e6d4fbc27ce684eed19e3c217f34bd2da24ab75"
|
|
63
63
|
}
|