@jbrowse/plugin-grid-bookmark 2.11.1 → 2.11.2
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 +52 -57
- package/dist/GridBookmarkWidget/components/Highlight/Highlight.js +7 -4
- package/dist/GridBookmarkWidget/components/Highlight/OverviewHighlight.js +7 -3
- package/esm/GridBookmarkWidget/components/BookmarkGrid.js +53 -58
- package/esm/GridBookmarkWidget/components/Highlight/Highlight.js +7 -4
- package/esm/GridBookmarkWidget/components/Highlight/OverviewHighlight.js +7 -3
- package/package.json +2 -2
|
@@ -32,8 +32,6 @@ 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");
|
|
@@ -50,7 +48,6 @@ const useStyles = (0, mui_1.makeStyles)()(() => ({
|
|
|
50
48
|
}));
|
|
51
49
|
const BookmarkGrid = (0, mobx_react_1.observer)(function ({ model, }) {
|
|
52
50
|
const { classes, cx } = useStyles();
|
|
53
|
-
const { ref, scrollLeft } = (0, useResizeBar_1.useResizeBar)();
|
|
54
51
|
const { bookmarks, bookmarksWithValidAssemblies, selectedAssemblies, selectedBookmarks, } = model;
|
|
55
52
|
const session = (0, util_1.getSession)(model);
|
|
56
53
|
const selectedSet = new Set(selectedAssemblies);
|
|
@@ -66,64 +63,62 @@ const BookmarkGrid = (0, mobx_react_1.observer)(function ({ model, }) {
|
|
|
66
63
|
correspondingObj: region,
|
|
67
64
|
};
|
|
68
65
|
});
|
|
69
|
-
const
|
|
66
|
+
const widths = [
|
|
70
67
|
50,
|
|
71
68
|
Math.max((0, util_1.measureText)('Bookmark link', 12) + 30, (0, util_1.measureGridWidth)(rows.map(row => row.locString))),
|
|
72
69
|
Math.max((0, util_1.measureText)('Label', 12) + 30, (0, util_1.measureGridWidth)(rows.map(row => row.label))),
|
|
73
70
|
Math.max((0, util_1.measureText)('Assembly', 12) + 30, (0, util_1.measureGridWidth)(rows.map(row => row.assemblyName))),
|
|
74
71
|
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 })));
|
|
72
|
+
];
|
|
73
|
+
return (react_1.default.createElement(x_data_grid_1.DataGrid, { autoHeight: true, density: "compact", rows: rows, columns: [
|
|
74
|
+
{
|
|
75
|
+
...x_data_grid_1.GRID_CHECKBOX_SELECTION_COL_DEF,
|
|
76
|
+
width: widths[0],
|
|
77
|
+
},
|
|
78
|
+
{
|
|
79
|
+
field: 'locString',
|
|
80
|
+
headerName: 'Bookmark link',
|
|
81
|
+
width: widths[1],
|
|
82
|
+
renderCell: ({ value, row }) => (react_1.default.createElement(material_1.Link, { className: cx(classes.link, classes.cell), href: "#", onClick: async (event) => {
|
|
83
|
+
event.preventDefault();
|
|
84
|
+
const { views } = session;
|
|
85
|
+
await (0, utils_1.navToBookmark)(value, row.assemblyName, views, model);
|
|
86
|
+
} }, value)),
|
|
87
|
+
},
|
|
88
|
+
{
|
|
89
|
+
field: 'label',
|
|
90
|
+
headerName: 'Label',
|
|
91
|
+
width: widths[2],
|
|
92
|
+
editable: true,
|
|
93
|
+
},
|
|
94
|
+
{
|
|
95
|
+
field: 'assemblyName',
|
|
96
|
+
headerName: 'Assembly',
|
|
97
|
+
width: widths[3],
|
|
98
|
+
},
|
|
99
|
+
{
|
|
100
|
+
field: 'highlight',
|
|
101
|
+
headerName: 'Highlight',
|
|
102
|
+
width: widths[4],
|
|
103
|
+
renderCell: ({ value, row }) => (react_1.default.createElement(ColorPicker_1.default, { color: value || 'black', onChange: event => {
|
|
104
|
+
model.updateBookmarkHighlight(row, event);
|
|
105
|
+
} })),
|
|
106
|
+
},
|
|
107
|
+
], onCellDoubleClick: ({ row }) => {
|
|
108
|
+
(0, util_1.getSession)(model).queueDialog(onClose => [
|
|
109
|
+
EditBookmarkLabelDialog,
|
|
110
|
+
{ onClose, model, dialogRow: row },
|
|
111
|
+
]);
|
|
112
|
+
}, processRowUpdate: row => {
|
|
113
|
+
const target = rows[row.id];
|
|
114
|
+
model.updateBookmarkLabel(target, row.label);
|
|
115
|
+
return row;
|
|
116
|
+
}, onProcessRowUpdateError: e => session.notifyError(`${e}`, e), checkboxSelection: true, onRowSelectionModelChange: newRowSelectionModel => {
|
|
117
|
+
if (bookmarksWithValidAssemblies.length > 0) {
|
|
118
|
+
model.setSelectedBookmarks(newRowSelectionModel.map(value => ({
|
|
119
|
+
...rows[value],
|
|
120
|
+
})));
|
|
121
|
+
}
|
|
122
|
+
}, rowSelectionModel: selectedBookmarks.map(r => r.id), disableRowSelectionOnClick: true }));
|
|
128
123
|
});
|
|
129
124
|
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,11 +1,9 @@
|
|
|
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';
|
|
@@ -22,7 +20,6 @@ const useStyles = makeStyles()(() => ({
|
|
|
22
20
|
}));
|
|
23
21
|
const BookmarkGrid = observer(function ({ model, }) {
|
|
24
22
|
const { classes, cx } = useStyles();
|
|
25
|
-
const { ref, scrollLeft } = useResizeBar();
|
|
26
23
|
const { bookmarks, bookmarksWithValidAssemblies, selectedAssemblies, selectedBookmarks, } = model;
|
|
27
24
|
const session = getSession(model);
|
|
28
25
|
const selectedSet = new Set(selectedAssemblies);
|
|
@@ -38,64 +35,62 @@ const BookmarkGrid = observer(function ({ model, }) {
|
|
|
38
35
|
correspondingObj: region,
|
|
39
36
|
};
|
|
40
37
|
});
|
|
41
|
-
const
|
|
38
|
+
const widths = [
|
|
42
39
|
50,
|
|
43
40
|
Math.max(measureText('Bookmark link', 12) + 30, measureGridWidth(rows.map(row => row.locString))),
|
|
44
41
|
Math.max(measureText('Label', 12) + 30, measureGridWidth(rows.map(row => row.label))),
|
|
45
42
|
Math.max(measureText('Assembly', 12) + 30, measureGridWidth(rows.map(row => row.assemblyName))),
|
|
46
43
|
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 })));
|
|
44
|
+
];
|
|
45
|
+
return (React.createElement(DataGrid, { autoHeight: true, density: "compact", rows: rows, columns: [
|
|
46
|
+
{
|
|
47
|
+
...GRID_CHECKBOX_SELECTION_COL_DEF,
|
|
48
|
+
width: widths[0],
|
|
49
|
+
},
|
|
50
|
+
{
|
|
51
|
+
field: 'locString',
|
|
52
|
+
headerName: 'Bookmark link',
|
|
53
|
+
width: widths[1],
|
|
54
|
+
renderCell: ({ value, row }) => (React.createElement(Link, { className: cx(classes.link, classes.cell), href: "#", onClick: async (event) => {
|
|
55
|
+
event.preventDefault();
|
|
56
|
+
const { views } = session;
|
|
57
|
+
await navToBookmark(value, row.assemblyName, views, model);
|
|
58
|
+
} }, value)),
|
|
59
|
+
},
|
|
60
|
+
{
|
|
61
|
+
field: 'label',
|
|
62
|
+
headerName: 'Label',
|
|
63
|
+
width: widths[2],
|
|
64
|
+
editable: true,
|
|
65
|
+
},
|
|
66
|
+
{
|
|
67
|
+
field: 'assemblyName',
|
|
68
|
+
headerName: 'Assembly',
|
|
69
|
+
width: widths[3],
|
|
70
|
+
},
|
|
71
|
+
{
|
|
72
|
+
field: 'highlight',
|
|
73
|
+
headerName: 'Highlight',
|
|
74
|
+
width: widths[4],
|
|
75
|
+
renderCell: ({ value, row }) => (React.createElement(ColorPicker, { color: value || 'black', onChange: event => {
|
|
76
|
+
model.updateBookmarkHighlight(row, event);
|
|
77
|
+
} })),
|
|
78
|
+
},
|
|
79
|
+
], onCellDoubleClick: ({ row }) => {
|
|
80
|
+
getSession(model).queueDialog(onClose => [
|
|
81
|
+
EditBookmarkLabelDialog,
|
|
82
|
+
{ onClose, model, dialogRow: row },
|
|
83
|
+
]);
|
|
84
|
+
}, processRowUpdate: row => {
|
|
85
|
+
const target = rows[row.id];
|
|
86
|
+
model.updateBookmarkLabel(target, row.label);
|
|
87
|
+
return row;
|
|
88
|
+
}, onProcessRowUpdateError: e => session.notifyError(`${e}`, e), checkboxSelection: true, onRowSelectionModelChange: newRowSelectionModel => {
|
|
89
|
+
if (bookmarksWithValidAssemblies.length > 0) {
|
|
90
|
+
model.setSelectedBookmarks(newRowSelectionModel.map(value => ({
|
|
91
|
+
...rows[value],
|
|
92
|
+
})));
|
|
93
|
+
}
|
|
94
|
+
}, rowSelectionModel: selectedBookmarks.map(r => r.id), disableRowSelectionOnClick: true }));
|
|
100
95
|
});
|
|
101
96
|
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.11.
|
|
3
|
+
"version": "2.11.2",
|
|
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": "511048cb6965f0bf624c96de244e7fd47fce17d6"
|
|
63
63
|
}
|