@jbrowse/plugin-grid-bookmark 2.11.1 → 2.12.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.
- package/dist/GridBookmarkWidget/components/BookmarkGrid.js +53 -61
- package/dist/GridBookmarkWidget/components/Highlight/Highlight.js +7 -4
- package/dist/GridBookmarkWidget/components/Highlight/OverviewHighlight.js +7 -3
- package/esm/GridBookmarkWidget/components/BookmarkGrid.js +54 -62
- package/esm/GridBookmarkWidget/components/Highlight/Highlight.js +7 -4
- package/esm/GridBookmarkWidget/components/Highlight/OverviewHighlight.js +7 -3
- package/package.json +2 -2
|
@@ -32,16 +32,11 @@ const material_1 = require("@mui/material");
|
|
|
32
32
|
const mui_1 = require("tss-react/mui");
|
|
33
33
|
const x_data_grid_1 = require("@mui/x-data-grid");
|
|
34
34
|
const util_1 = require("@jbrowse/core/util");
|
|
35
|
-
const useResizeBar_1 = require("@jbrowse/core/ui/useResizeBar");
|
|
36
|
-
const ResizeBar_1 = __importDefault(require("@jbrowse/core/ui/ResizeBar"));
|
|
37
35
|
const ColorPicker_1 = __importDefault(require("@jbrowse/core/ui/ColorPicker"));
|
|
38
36
|
// locals
|
|
39
37
|
const utils_1 = require("../utils");
|
|
40
38
|
const EditBookmarkLabelDialog = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./dialogs/EditBookmarkLabelDialog'))));
|
|
41
39
|
const useStyles = (0, mui_1.makeStyles)()(() => ({
|
|
42
|
-
link: {
|
|
43
|
-
cursor: 'pointer',
|
|
44
|
-
},
|
|
45
40
|
cell: {
|
|
46
41
|
whiteSpace: 'nowrap',
|
|
47
42
|
overflow: 'hidden',
|
|
@@ -49,8 +44,7 @@ const useStyles = (0, mui_1.makeStyles)()(() => ({
|
|
|
49
44
|
},
|
|
50
45
|
}));
|
|
51
46
|
const BookmarkGrid = (0, mobx_react_1.observer)(function ({ model, }) {
|
|
52
|
-
const { classes
|
|
53
|
-
const { ref, scrollLeft } = (0, useResizeBar_1.useResizeBar)();
|
|
47
|
+
const { classes } = useStyles();
|
|
54
48
|
const { bookmarks, bookmarksWithValidAssemblies, selectedAssemblies, selectedBookmarks, } = model;
|
|
55
49
|
const session = (0, util_1.getSession)(model);
|
|
56
50
|
const selectedSet = new Set(selectedAssemblies);
|
|
@@ -66,64 +60,62 @@ const BookmarkGrid = (0, mobx_react_1.observer)(function ({ model, }) {
|
|
|
66
60
|
correspondingObj: region,
|
|
67
61
|
};
|
|
68
62
|
});
|
|
69
|
-
const
|
|
63
|
+
const widths = [
|
|
70
64
|
50,
|
|
71
65
|
Math.max((0, util_1.measureText)('Bookmark link', 12) + 30, (0, util_1.measureGridWidth)(rows.map(row => row.locString))),
|
|
72
66
|
Math.max((0, util_1.measureText)('Label', 12) + 30, (0, util_1.measureGridWidth)(rows.map(row => row.label))),
|
|
73
67
|
Math.max((0, util_1.measureText)('Assembly', 12) + 30, (0, util_1.measureGridWidth)(rows.map(row => row.assemblyName))),
|
|
74
68
|
100,
|
|
75
|
-
]
|
|
76
|
-
return (react_1.default.createElement(
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
}
|
|
127
|
-
}, rowSelectionModel: selectedBookmarks.map(r => r.id), disableRowSelectionOnClick: true })));
|
|
69
|
+
];
|
|
70
|
+
return (react_1.default.createElement(x_data_grid_1.DataGrid, { autoHeight: true, density: "compact", rows: rows, columns: [
|
|
71
|
+
{
|
|
72
|
+
...x_data_grid_1.GRID_CHECKBOX_SELECTION_COL_DEF,
|
|
73
|
+
width: widths[0],
|
|
74
|
+
},
|
|
75
|
+
{
|
|
76
|
+
field: 'locString',
|
|
77
|
+
headerName: 'Bookmark link',
|
|
78
|
+
width: widths[1],
|
|
79
|
+
renderCell: ({ value, row }) => (react_1.default.createElement(material_1.Link, { className: classes.cell, href: "#", onClick: async (event) => {
|
|
80
|
+
event.preventDefault();
|
|
81
|
+
const { views } = session;
|
|
82
|
+
await (0, utils_1.navToBookmark)(value, row.assemblyName, views, model);
|
|
83
|
+
} }, value)),
|
|
84
|
+
},
|
|
85
|
+
{
|
|
86
|
+
field: 'label',
|
|
87
|
+
headerName: 'Label',
|
|
88
|
+
width: widths[2],
|
|
89
|
+
editable: true,
|
|
90
|
+
},
|
|
91
|
+
{
|
|
92
|
+
field: 'assemblyName',
|
|
93
|
+
headerName: 'Assembly',
|
|
94
|
+
width: widths[3],
|
|
95
|
+
},
|
|
96
|
+
{
|
|
97
|
+
field: 'highlight',
|
|
98
|
+
headerName: 'Highlight',
|
|
99
|
+
width: widths[4],
|
|
100
|
+
renderCell: ({ value, row }) => (react_1.default.createElement(ColorPicker_1.default, { color: value || 'black', onChange: event => {
|
|
101
|
+
model.updateBookmarkHighlight(row, event);
|
|
102
|
+
} })),
|
|
103
|
+
},
|
|
104
|
+
], onCellDoubleClick: ({ row }) => {
|
|
105
|
+
(0, util_1.getSession)(model).queueDialog(onClose => [
|
|
106
|
+
EditBookmarkLabelDialog,
|
|
107
|
+
{ onClose, model, dialogRow: row },
|
|
108
|
+
]);
|
|
109
|
+
}, processRowUpdate: row => {
|
|
110
|
+
const target = rows[row.id];
|
|
111
|
+
model.updateBookmarkLabel(target, row.label);
|
|
112
|
+
return row;
|
|
113
|
+
}, onProcessRowUpdateError: e => session.notifyError(`${e}`, e), checkboxSelection: true, onRowSelectionModelChange: newRowSelectionModel => {
|
|
114
|
+
if (bookmarksWithValidAssemblies.length > 0) {
|
|
115
|
+
model.setSelectedBookmarks(newRowSelectionModel.map(value => ({
|
|
116
|
+
...rows[value],
|
|
117
|
+
})));
|
|
118
|
+
}
|
|
119
|
+
}, rowSelectionModel: selectedBookmarks.map(r => r.id), disableRowSelectionOnClick: true }));
|
|
128
120
|
});
|
|
129
121
|
exports.default = BookmarkGrid;
|
|
@@ -42,7 +42,6 @@ const useStyles = (0, mui_1.makeStyles)()({
|
|
|
42
42
|
},
|
|
43
43
|
});
|
|
44
44
|
const Highlight = (0, mobx_react_1.observer)(function Highlight({ model }) {
|
|
45
|
-
var _a;
|
|
46
45
|
const { classes } = useStyles();
|
|
47
46
|
const session = (0, util_1.getSession)(model);
|
|
48
47
|
const { assemblyManager } = session;
|
|
@@ -54,8 +53,10 @@ const Highlight = (0, mobx_react_1.observer)(function Highlight({ model }) {
|
|
|
54
53
|
}
|
|
55
54
|
}, [session, bookmarkWidget]);
|
|
56
55
|
const set = new Set(model.assemblyNames);
|
|
57
|
-
return showBookmarkHighlights
|
|
58
|
-
?
|
|
56
|
+
return showBookmarkHighlights && (bookmarkWidget === null || bookmarkWidget === void 0 ? void 0 : bookmarkWidget.bookmarks)
|
|
57
|
+
? bookmarkWidget.bookmarks
|
|
58
|
+
.filter(value => set.has(value.assemblyName))
|
|
59
|
+
.map(r => {
|
|
59
60
|
var _a;
|
|
60
61
|
const asm = assemblyManager.get(r.assemblyName);
|
|
61
62
|
const refName = (_a = asm === null || asm === void 0 ? void 0 : asm.getCanonicalRefName(r.refName)) !== null && _a !== void 0 ? _a : r.refName;
|
|
@@ -69,7 +70,9 @@ const Highlight = (0, mobx_react_1.observer)(function Highlight({ model }) {
|
|
|
69
70
|
label: r.label,
|
|
70
71
|
}
|
|
71
72
|
: undefined;
|
|
72
|
-
})
|
|
73
|
+
})
|
|
74
|
+
.filter(util_1.notEmpty)
|
|
75
|
+
.map(({ left, width, highlight, label }, idx) => (react_1.default.createElement("div", { key: `${left}_${width}_${idx}`, className: classes.highlight, style: {
|
|
73
76
|
left,
|
|
74
77
|
width,
|
|
75
78
|
background: highlight,
|
|
@@ -47,8 +47,10 @@ const OverviewHighlight = (0, mobx_react_1.observer)(function OverviewHighlight(
|
|
|
47
47
|
}
|
|
48
48
|
}, [session, bookmarkWidget]);
|
|
49
49
|
const assemblyNames = new Set(model.assemblyNames);
|
|
50
|
-
return showBookmarkHighlights
|
|
51
|
-
? bookmarkWidget
|
|
50
|
+
return showBookmarkHighlights && (bookmarkWidget === null || bookmarkWidget === void 0 ? void 0 : bookmarkWidget.bookmarks)
|
|
51
|
+
? bookmarkWidget.bookmarks
|
|
52
|
+
.filter(r => assemblyNames.has(r.assemblyName))
|
|
53
|
+
.map(r => {
|
|
52
54
|
var _a;
|
|
53
55
|
const asm = assemblyManager.get(r.assemblyName);
|
|
54
56
|
const refName = (_a = asm === null || asm === void 0 ? void 0 : asm.getCanonicalRefName(r.refName)) !== null && _a !== void 0 ? _a : r.refName;
|
|
@@ -63,7 +65,9 @@ const OverviewHighlight = (0, mobx_react_1.observer)(function OverviewHighlight(
|
|
|
63
65
|
label: r.label,
|
|
64
66
|
}
|
|
65
67
|
: undefined;
|
|
66
|
-
})
|
|
68
|
+
})
|
|
69
|
+
.filter(util_1.notEmpty)
|
|
70
|
+
.map((obj, idx) => {
|
|
67
71
|
const { left, width, highlight, label } = obj;
|
|
68
72
|
return (react_1.default.createElement(material_1.Tooltip, { key: JSON.stringify(obj) + '-' + idx, title: showBookmarkLabels ? label : '', arrow: true },
|
|
69
73
|
react_1.default.createElement("div", { className: classes.highlight, style: {
|
|
@@ -1,19 +1,14 @@
|
|
|
1
|
-
import React, { lazy
|
|
1
|
+
import React, { lazy } from 'react';
|
|
2
2
|
import { observer } from 'mobx-react';
|
|
3
3
|
import { Link } from '@mui/material';
|
|
4
4
|
import { makeStyles } from 'tss-react/mui';
|
|
5
5
|
import { DataGrid, GRID_CHECKBOX_SELECTION_COL_DEF } from '@mui/x-data-grid';
|
|
6
6
|
import { getSession, assembleLocString, measureGridWidth, measureText, } from '@jbrowse/core/util';
|
|
7
|
-
import { useResizeBar } from '@jbrowse/core/ui/useResizeBar';
|
|
8
|
-
import ResizeBar from '@jbrowse/core/ui/ResizeBar';
|
|
9
7
|
import ColorPicker from '@jbrowse/core/ui/ColorPicker';
|
|
10
8
|
// locals
|
|
11
9
|
import { navToBookmark } from '../utils';
|
|
12
10
|
const EditBookmarkLabelDialog = lazy(() => import('./dialogs/EditBookmarkLabelDialog'));
|
|
13
11
|
const useStyles = makeStyles()(() => ({
|
|
14
|
-
link: {
|
|
15
|
-
cursor: 'pointer',
|
|
16
|
-
},
|
|
17
12
|
cell: {
|
|
18
13
|
whiteSpace: 'nowrap',
|
|
19
14
|
overflow: 'hidden',
|
|
@@ -21,8 +16,7 @@ const useStyles = makeStyles()(() => ({
|
|
|
21
16
|
},
|
|
22
17
|
}));
|
|
23
18
|
const BookmarkGrid = observer(function ({ model, }) {
|
|
24
|
-
const { classes
|
|
25
|
-
const { ref, scrollLeft } = useResizeBar();
|
|
19
|
+
const { classes } = useStyles();
|
|
26
20
|
const { bookmarks, bookmarksWithValidAssemblies, selectedAssemblies, selectedBookmarks, } = model;
|
|
27
21
|
const session = getSession(model);
|
|
28
22
|
const selectedSet = new Set(selectedAssemblies);
|
|
@@ -38,64 +32,62 @@ const BookmarkGrid = observer(function ({ model, }) {
|
|
|
38
32
|
correspondingObj: region,
|
|
39
33
|
};
|
|
40
34
|
});
|
|
41
|
-
const
|
|
35
|
+
const widths = [
|
|
42
36
|
50,
|
|
43
37
|
Math.max(measureText('Bookmark link', 12) + 30, measureGridWidth(rows.map(row => row.locString))),
|
|
44
38
|
Math.max(measureText('Label', 12) + 30, measureGridWidth(rows.map(row => row.label))),
|
|
45
39
|
Math.max(measureText('Assembly', 12) + 30, measureGridWidth(rows.map(row => row.assemblyName))),
|
|
46
40
|
100,
|
|
47
|
-
]
|
|
48
|
-
return (React.createElement(
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
}
|
|
99
|
-
}, rowSelectionModel: selectedBookmarks.map(r => r.id), disableRowSelectionOnClick: true })));
|
|
41
|
+
];
|
|
42
|
+
return (React.createElement(DataGrid, { autoHeight: true, density: "compact", rows: rows, columns: [
|
|
43
|
+
{
|
|
44
|
+
...GRID_CHECKBOX_SELECTION_COL_DEF,
|
|
45
|
+
width: widths[0],
|
|
46
|
+
},
|
|
47
|
+
{
|
|
48
|
+
field: 'locString',
|
|
49
|
+
headerName: 'Bookmark link',
|
|
50
|
+
width: widths[1],
|
|
51
|
+
renderCell: ({ value, row }) => (React.createElement(Link, { className: classes.cell, href: "#", onClick: async (event) => {
|
|
52
|
+
event.preventDefault();
|
|
53
|
+
const { views } = session;
|
|
54
|
+
await navToBookmark(value, row.assemblyName, views, model);
|
|
55
|
+
} }, value)),
|
|
56
|
+
},
|
|
57
|
+
{
|
|
58
|
+
field: 'label',
|
|
59
|
+
headerName: 'Label',
|
|
60
|
+
width: widths[2],
|
|
61
|
+
editable: true,
|
|
62
|
+
},
|
|
63
|
+
{
|
|
64
|
+
field: 'assemblyName',
|
|
65
|
+
headerName: 'Assembly',
|
|
66
|
+
width: widths[3],
|
|
67
|
+
},
|
|
68
|
+
{
|
|
69
|
+
field: 'highlight',
|
|
70
|
+
headerName: 'Highlight',
|
|
71
|
+
width: widths[4],
|
|
72
|
+
renderCell: ({ value, row }) => (React.createElement(ColorPicker, { color: value || 'black', onChange: event => {
|
|
73
|
+
model.updateBookmarkHighlight(row, event);
|
|
74
|
+
} })),
|
|
75
|
+
},
|
|
76
|
+
], onCellDoubleClick: ({ row }) => {
|
|
77
|
+
getSession(model).queueDialog(onClose => [
|
|
78
|
+
EditBookmarkLabelDialog,
|
|
79
|
+
{ onClose, model, dialogRow: row },
|
|
80
|
+
]);
|
|
81
|
+
}, processRowUpdate: row => {
|
|
82
|
+
const target = rows[row.id];
|
|
83
|
+
model.updateBookmarkLabel(target, row.label);
|
|
84
|
+
return row;
|
|
85
|
+
}, onProcessRowUpdateError: e => session.notifyError(`${e}`, e), checkboxSelection: true, onRowSelectionModelChange: newRowSelectionModel => {
|
|
86
|
+
if (bookmarksWithValidAssemblies.length > 0) {
|
|
87
|
+
model.setSelectedBookmarks(newRowSelectionModel.map(value => ({
|
|
88
|
+
...rows[value],
|
|
89
|
+
})));
|
|
90
|
+
}
|
|
91
|
+
}, rowSelectionModel: selectedBookmarks.map(r => r.id), disableRowSelectionOnClick: true }));
|
|
100
92
|
});
|
|
101
93
|
export default BookmarkGrid;
|
|
@@ -14,7 +14,6 @@ const useStyles = makeStyles()({
|
|
|
14
14
|
},
|
|
15
15
|
});
|
|
16
16
|
const Highlight = observer(function Highlight({ model }) {
|
|
17
|
-
var _a;
|
|
18
17
|
const { classes } = useStyles();
|
|
19
18
|
const session = getSession(model);
|
|
20
19
|
const { assemblyManager } = session;
|
|
@@ -26,8 +25,10 @@ const Highlight = observer(function Highlight({ model }) {
|
|
|
26
25
|
}
|
|
27
26
|
}, [session, bookmarkWidget]);
|
|
28
27
|
const set = new Set(model.assemblyNames);
|
|
29
|
-
return showBookmarkHighlights
|
|
30
|
-
?
|
|
28
|
+
return showBookmarkHighlights && (bookmarkWidget === null || bookmarkWidget === void 0 ? void 0 : bookmarkWidget.bookmarks)
|
|
29
|
+
? bookmarkWidget.bookmarks
|
|
30
|
+
.filter(value => set.has(value.assemblyName))
|
|
31
|
+
.map(r => {
|
|
31
32
|
var _a;
|
|
32
33
|
const asm = assemblyManager.get(r.assemblyName);
|
|
33
34
|
const refName = (_a = asm === null || asm === void 0 ? void 0 : asm.getCanonicalRefName(r.refName)) !== null && _a !== void 0 ? _a : r.refName;
|
|
@@ -41,7 +42,9 @@ const Highlight = observer(function Highlight({ model }) {
|
|
|
41
42
|
label: r.label,
|
|
42
43
|
}
|
|
43
44
|
: undefined;
|
|
44
|
-
})
|
|
45
|
+
})
|
|
46
|
+
.filter(notEmpty)
|
|
47
|
+
.map(({ left, width, highlight, label }, idx) => (React.createElement("div", { key: `${left}_${width}_${idx}`, className: classes.highlight, style: {
|
|
45
48
|
left,
|
|
46
49
|
width,
|
|
47
50
|
background: highlight,
|
|
@@ -22,8 +22,10 @@ const OverviewHighlight = observer(function OverviewHighlight({ model, overview,
|
|
|
22
22
|
}
|
|
23
23
|
}, [session, bookmarkWidget]);
|
|
24
24
|
const assemblyNames = new Set(model.assemblyNames);
|
|
25
|
-
return showBookmarkHighlights
|
|
26
|
-
? bookmarkWidget
|
|
25
|
+
return showBookmarkHighlights && (bookmarkWidget === null || bookmarkWidget === void 0 ? void 0 : bookmarkWidget.bookmarks)
|
|
26
|
+
? bookmarkWidget.bookmarks
|
|
27
|
+
.filter(r => assemblyNames.has(r.assemblyName))
|
|
28
|
+
.map(r => {
|
|
27
29
|
var _a;
|
|
28
30
|
const asm = assemblyManager.get(r.assemblyName);
|
|
29
31
|
const refName = (_a = asm === null || asm === void 0 ? void 0 : asm.getCanonicalRefName(r.refName)) !== null && _a !== void 0 ? _a : r.refName;
|
|
@@ -38,7 +40,9 @@ const OverviewHighlight = observer(function OverviewHighlight({ model, overview,
|
|
|
38
40
|
label: r.label,
|
|
39
41
|
}
|
|
40
42
|
: undefined;
|
|
41
|
-
})
|
|
43
|
+
})
|
|
44
|
+
.filter(notEmpty)
|
|
45
|
+
.map((obj, idx) => {
|
|
42
46
|
const { left, width, highlight, label } = obj;
|
|
43
47
|
return (React.createElement(Tooltip, { key: JSON.stringify(obj) + '-' + idx, title: showBookmarkLabels ? label : '', arrow: true },
|
|
44
48
|
React.createElement("div", { className: classes.highlight, style: {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@jbrowse/plugin-grid-bookmark",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.12.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": "935f2602d29abc737bb1f493a922b6218d023ae2"
|
|
63
63
|
}
|