@jbrowse/plugin-grid-bookmark 2.4.1 → 2.5.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/AssemblySelector.d.ts +0 -1
- package/dist/GridBookmarkWidget/components/ClearBookmarks.d.ts +0 -1
- package/dist/GridBookmarkWidget/components/DeleteBookmark.d.ts +0 -1
- package/dist/GridBookmarkWidget/components/DownloadBookmarks.d.ts +0 -1
- package/dist/GridBookmarkWidget/components/GridBookmarkWidget.d.ts +0 -1
- package/dist/GridBookmarkWidget/components/GridBookmarkWidget.js +37 -49
- package/dist/GridBookmarkWidget/components/GridBookmarkWidget.js.map +1 -1
- package/dist/GridBookmarkWidget/components/ImportBookmarks.d.ts +0 -1
- package/esm/GridBookmarkWidget/components/AssemblySelector.d.ts +0 -1
- package/esm/GridBookmarkWidget/components/ClearBookmarks.d.ts +0 -1
- package/esm/GridBookmarkWidget/components/DeleteBookmark.d.ts +0 -1
- package/esm/GridBookmarkWidget/components/DownloadBookmarks.d.ts +0 -1
- package/esm/GridBookmarkWidget/components/GridBookmarkWidget.d.ts +0 -1
- package/esm/GridBookmarkWidget/components/GridBookmarkWidget.js +38 -50
- package/esm/GridBookmarkWidget/components/GridBookmarkWidget.js.map +1 -1
- package/esm/GridBookmarkWidget/components/ImportBookmarks.d.ts +0 -1
- package/package.json +3 -3
- package/src/GridBookmarkWidget/components/{GridBookmarkWidget.test.js → GridBookmarkWidget.test.tsx} +38 -5
- package/src/GridBookmarkWidget/components/GridBookmarkWidget.tsx +63 -75
|
@@ -32,6 +32,7 @@ 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
|
+
// icons
|
|
35
36
|
const Delete_1 = __importDefault(require("@mui/icons-material/Delete"));
|
|
36
37
|
// locals
|
|
37
38
|
const AssemblySelector_1 = __importDefault(require("./AssemblySelector"));
|
|
@@ -40,15 +41,14 @@ const DownloadBookmarks_1 = __importDefault(require("./DownloadBookmarks"));
|
|
|
40
41
|
const ImportBookmarks_1 = __importDefault(require("./ImportBookmarks"));
|
|
41
42
|
const ClearBookmarks_1 = __importDefault(require("./ClearBookmarks"));
|
|
42
43
|
const utils_1 = require("../utils");
|
|
43
|
-
const useStyles = (0, mui_1.makeStyles)()(
|
|
44
|
+
const useStyles = (0, mui_1.makeStyles)()(theme => ({
|
|
44
45
|
link: {
|
|
45
46
|
cursor: 'pointer',
|
|
46
47
|
},
|
|
48
|
+
margin: {
|
|
49
|
+
margin: theme.spacing(2),
|
|
50
|
+
},
|
|
47
51
|
}));
|
|
48
|
-
// creates a coarse measurement of column width, similar to code in
|
|
49
|
-
// BaseFeatureDetails
|
|
50
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
51
|
-
const measure = (row, col) => Math.min(Math.max((0, util_1.measureText)(String(row[col]), 14) + 20, 80), 1000);
|
|
52
52
|
const BookmarkGrid = (0, mobx_react_1.observer)(({ model }) => {
|
|
53
53
|
const { classes } = useStyles();
|
|
54
54
|
const [dialogRowNumber, setDialogRowNumber] = (0, react_1.useState)();
|
|
@@ -65,60 +65,48 @@ const BookmarkGrid = (0, mobx_react_1.observer)(({ model }) => {
|
|
|
65
65
|
locString: (0, util_1.assembleLocString)(selectedAssembly === 'all' ? region : rest),
|
|
66
66
|
};
|
|
67
67
|
});
|
|
68
|
-
const columns = [
|
|
69
|
-
{
|
|
70
|
-
field: 'locString',
|
|
71
|
-
headerName: 'bookmark link',
|
|
72
|
-
width: Math.max(...bookmarkRows.map(row => measure(row, 'locString'))),
|
|
73
|
-
renderCell: (params) => {
|
|
74
|
-
const { value } = params;
|
|
75
|
-
return (react_1.default.createElement(material_1.Link, { className: classes.link, onClick: async (event) => {
|
|
76
|
-
event.preventDefault();
|
|
77
|
-
// has own error handling
|
|
78
|
-
await (0, utils_1.navToBookmark)(value, views, model);
|
|
79
|
-
} }, value));
|
|
80
|
-
},
|
|
81
|
-
},
|
|
82
|
-
{
|
|
83
|
-
field: 'label',
|
|
84
|
-
width: Math.max(100, Math.max(...bookmarkRows.map(row => measure(row, 'label')))),
|
|
85
|
-
editable: true,
|
|
86
|
-
},
|
|
87
|
-
{
|
|
88
|
-
field: 'delete',
|
|
89
|
-
width: 30,
|
|
90
|
-
renderCell: (params) => {
|
|
91
|
-
const { value } = params;
|
|
92
|
-
return (react_1.default.createElement(material_1.IconButton, { "data-testid": "deleteBookmark", "aria-label": "delete", onClick: () => {
|
|
93
|
-
if (value !== null && value !== undefined) {
|
|
94
|
-
setDialogRowNumber(+value);
|
|
95
|
-
}
|
|
96
|
-
} },
|
|
97
|
-
react_1.default.createElement(Delete_1.default, null)));
|
|
98
|
-
},
|
|
99
|
-
},
|
|
100
|
-
];
|
|
101
68
|
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
102
|
-
react_1.default.createElement(x_data_grid_1.DataGrid, { density: "compact", rows: bookmarkRows, columns:
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
69
|
+
react_1.default.createElement(x_data_grid_1.DataGrid, { density: "compact", rows: bookmarkRows, columns: [
|
|
70
|
+
{
|
|
71
|
+
field: 'locString',
|
|
72
|
+
headerName: 'bookmark link',
|
|
73
|
+
width: (0, util_1.measureGridWidth)(bookmarkRows.map(row => row.locString)),
|
|
74
|
+
renderCell: params => (react_1.default.createElement(material_1.Link, { className: classes.link, href: "#", onClick: async (event) => {
|
|
75
|
+
event.preventDefault();
|
|
76
|
+
await (0, utils_1.navToBookmark)(params.value, views, model);
|
|
77
|
+
} }, params.value)),
|
|
78
|
+
},
|
|
79
|
+
{
|
|
80
|
+
field: 'label',
|
|
81
|
+
width: (0, util_1.measureGridWidth)(bookmarkRows.map(row => row.label)),
|
|
82
|
+
editable: true,
|
|
83
|
+
},
|
|
84
|
+
{
|
|
85
|
+
field: 'delete',
|
|
86
|
+
width: 100,
|
|
87
|
+
renderCell: params => (react_1.default.createElement(material_1.IconButton, { "data-testid": "deleteBookmark", "aria-label": "delete", onClick: () => {
|
|
88
|
+
if (params.value != null) {
|
|
89
|
+
setDialogRowNumber(+params.value);
|
|
90
|
+
}
|
|
91
|
+
} },
|
|
92
|
+
react_1.default.createElement(Delete_1.default, null))),
|
|
93
|
+
},
|
|
94
|
+
], onCellEditStop: ({ id, value }) => model.updateBookmarkLabel(id, value), disableRowSelectionOnClick: true }),
|
|
106
95
|
react_1.default.createElement(DeleteBookmark_1.default, { rowNumber: dialogRowNumber, model: model, onClose: () => setDialogRowNumber(undefined) })));
|
|
107
96
|
});
|
|
108
97
|
function GridBookmarkWidget({ model }) {
|
|
109
98
|
const { selectedAssembly } = model;
|
|
99
|
+
const { classes } = useStyles();
|
|
110
100
|
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
111
101
|
react_1.default.createElement(AssemblySelector_1.default, { model: model }),
|
|
112
102
|
react_1.default.createElement(DownloadBookmarks_1.default, { model: model }),
|
|
113
103
|
react_1.default.createElement(ImportBookmarks_1.default, { model: model, assemblyName: selectedAssembly }),
|
|
114
104
|
react_1.default.createElement(ClearBookmarks_1.default, { model: model }),
|
|
115
|
-
react_1.default.createElement(
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
react_1.default.createElement("div", { style: { height: 750, width: '100%' } },
|
|
121
|
-
react_1.default.createElement(BookmarkGrid, { model: model }))));
|
|
105
|
+
react_1.default.createElement(material_1.Typography, { className: classes.margin },
|
|
106
|
+
"Note: you can double click the ",
|
|
107
|
+
react_1.default.createElement("code", null, "label"),
|
|
108
|
+
" field to add your own custom notes"),
|
|
109
|
+
react_1.default.createElement(BookmarkGrid, { model: model })));
|
|
122
110
|
}
|
|
123
111
|
exports.default = (0, mobx_react_1.observer)(GridBookmarkWidget);
|
|
124
112
|
//# sourceMappingURL=GridBookmarkWidget.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GridBookmarkWidget.js","sourceRoot":"","sources":["../../../src/GridBookmarkWidget/components/GridBookmarkWidget.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAuC;AACvC,2CAAqC;AACrC,4CAA4D;AAC5D,uCAA0C;AAC1C,
|
|
1
|
+
{"version":3,"file":"GridBookmarkWidget.js","sourceRoot":"","sources":["../../../src/GridBookmarkWidget/components/GridBookmarkWidget.tsx"],"names":[],"mappings":"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"}
|
|
@@ -3,7 +3,8 @@ import { observer } from 'mobx-react';
|
|
|
3
3
|
import { Link, IconButton, Typography } from '@mui/material';
|
|
4
4
|
import { makeStyles } from 'tss-react/mui';
|
|
5
5
|
import { DataGrid } from '@mui/x-data-grid';
|
|
6
|
-
import { getSession, assembleLocString,
|
|
6
|
+
import { getSession, assembleLocString, measureGridWidth, } from '@jbrowse/core/util';
|
|
7
|
+
// icons
|
|
7
8
|
import DeleteIcon from '@mui/icons-material/Delete';
|
|
8
9
|
// locals
|
|
9
10
|
import AssemblySelector from './AssemblySelector';
|
|
@@ -12,15 +13,14 @@ import DownloadBookmarks from './DownloadBookmarks';
|
|
|
12
13
|
import ImportBookmarks from './ImportBookmarks';
|
|
13
14
|
import ClearBookmarks from './ClearBookmarks';
|
|
14
15
|
import { navToBookmark } from '../utils';
|
|
15
|
-
const useStyles = makeStyles()(
|
|
16
|
+
const useStyles = makeStyles()(theme => ({
|
|
16
17
|
link: {
|
|
17
18
|
cursor: 'pointer',
|
|
18
19
|
},
|
|
20
|
+
margin: {
|
|
21
|
+
margin: theme.spacing(2),
|
|
22
|
+
},
|
|
19
23
|
}));
|
|
20
|
-
// creates a coarse measurement of column width, similar to code in
|
|
21
|
-
// BaseFeatureDetails
|
|
22
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
23
|
-
const measure = (row, col) => Math.min(Math.max(measureText(String(row[col]), 14) + 20, 80), 1000);
|
|
24
24
|
const BookmarkGrid = observer(({ model }) => {
|
|
25
25
|
const { classes } = useStyles();
|
|
26
26
|
const [dialogRowNumber, setDialogRowNumber] = useState();
|
|
@@ -37,60 +37,48 @@ const BookmarkGrid = observer(({ model }) => {
|
|
|
37
37
|
locString: assembleLocString(selectedAssembly === 'all' ? region : rest),
|
|
38
38
|
};
|
|
39
39
|
});
|
|
40
|
-
const columns = [
|
|
41
|
-
{
|
|
42
|
-
field: 'locString',
|
|
43
|
-
headerName: 'bookmark link',
|
|
44
|
-
width: Math.max(...bookmarkRows.map(row => measure(row, 'locString'))),
|
|
45
|
-
renderCell: (params) => {
|
|
46
|
-
const { value } = params;
|
|
47
|
-
return (React.createElement(Link, { className: classes.link, onClick: async (event) => {
|
|
48
|
-
event.preventDefault();
|
|
49
|
-
// has own error handling
|
|
50
|
-
await navToBookmark(value, views, model);
|
|
51
|
-
} }, value));
|
|
52
|
-
},
|
|
53
|
-
},
|
|
54
|
-
{
|
|
55
|
-
field: 'label',
|
|
56
|
-
width: Math.max(100, Math.max(...bookmarkRows.map(row => measure(row, 'label')))),
|
|
57
|
-
editable: true,
|
|
58
|
-
},
|
|
59
|
-
{
|
|
60
|
-
field: 'delete',
|
|
61
|
-
width: 30,
|
|
62
|
-
renderCell: (params) => {
|
|
63
|
-
const { value } = params;
|
|
64
|
-
return (React.createElement(IconButton, { "data-testid": "deleteBookmark", "aria-label": "delete", onClick: () => {
|
|
65
|
-
if (value !== null && value !== undefined) {
|
|
66
|
-
setDialogRowNumber(+value);
|
|
67
|
-
}
|
|
68
|
-
} },
|
|
69
|
-
React.createElement(DeleteIcon, null)));
|
|
70
|
-
},
|
|
71
|
-
},
|
|
72
|
-
];
|
|
73
40
|
return (React.createElement(React.Fragment, null,
|
|
74
|
-
React.createElement(DataGrid, { density: "compact", rows: bookmarkRows, columns:
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
41
|
+
React.createElement(DataGrid, { density: "compact", rows: bookmarkRows, columns: [
|
|
42
|
+
{
|
|
43
|
+
field: 'locString',
|
|
44
|
+
headerName: 'bookmark link',
|
|
45
|
+
width: measureGridWidth(bookmarkRows.map(row => row.locString)),
|
|
46
|
+
renderCell: params => (React.createElement(Link, { className: classes.link, href: "#", onClick: async (event) => {
|
|
47
|
+
event.preventDefault();
|
|
48
|
+
await navToBookmark(params.value, views, model);
|
|
49
|
+
} }, params.value)),
|
|
50
|
+
},
|
|
51
|
+
{
|
|
52
|
+
field: 'label',
|
|
53
|
+
width: measureGridWidth(bookmarkRows.map(row => row.label)),
|
|
54
|
+
editable: true,
|
|
55
|
+
},
|
|
56
|
+
{
|
|
57
|
+
field: 'delete',
|
|
58
|
+
width: 100,
|
|
59
|
+
renderCell: params => (React.createElement(IconButton, { "data-testid": "deleteBookmark", "aria-label": "delete", onClick: () => {
|
|
60
|
+
if (params.value != null) {
|
|
61
|
+
setDialogRowNumber(+params.value);
|
|
62
|
+
}
|
|
63
|
+
} },
|
|
64
|
+
React.createElement(DeleteIcon, null))),
|
|
65
|
+
},
|
|
66
|
+
], onCellEditStop: ({ id, value }) => model.updateBookmarkLabel(id, value), disableRowSelectionOnClick: true }),
|
|
78
67
|
React.createElement(DeleteBookmarkDialog, { rowNumber: dialogRowNumber, model: model, onClose: () => setDialogRowNumber(undefined) })));
|
|
79
68
|
});
|
|
80
69
|
function GridBookmarkWidget({ model }) {
|
|
81
70
|
const { selectedAssembly } = model;
|
|
71
|
+
const { classes } = useStyles();
|
|
82
72
|
return (React.createElement(React.Fragment, null,
|
|
83
73
|
React.createElement(AssemblySelector, { model: model }),
|
|
84
74
|
React.createElement(DownloadBookmarks, { model: model }),
|
|
85
75
|
React.createElement(ImportBookmarks, { model: model, assemblyName: selectedAssembly }),
|
|
86
76
|
React.createElement(ClearBookmarks, { model: model }),
|
|
87
|
-
React.createElement(
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
React.createElement("div", { style: { height: 750, width: '100%' } },
|
|
93
|
-
React.createElement(BookmarkGrid, { model: model }))));
|
|
77
|
+
React.createElement(Typography, { className: classes.margin },
|
|
78
|
+
"Note: you can double click the ",
|
|
79
|
+
React.createElement("code", null, "label"),
|
|
80
|
+
" field to add your own custom notes"),
|
|
81
|
+
React.createElement(BookmarkGrid, { model: model })));
|
|
94
82
|
}
|
|
95
83
|
export default observer(GridBookmarkWidget);
|
|
96
84
|
//# sourceMappingURL=GridBookmarkWidget.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GridBookmarkWidget.js","sourceRoot":"","sources":["../../../src/GridBookmarkWidget/components/GridBookmarkWidget.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,EAAE,QAAQ,
|
|
1
|
+
{"version":3,"file":"GridBookmarkWidget.js","sourceRoot":"","sources":["../../../src/GridBookmarkWidget/components/GridBookmarkWidget.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@jbrowse/plugin-grid-bookmark",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.5.0",
|
|
4
4
|
"description": "JBrowse 2 grid bookmark widget",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"jbrowse",
|
|
@@ -46,7 +46,7 @@
|
|
|
46
46
|
"@jbrowse/plugin-config": "^2.0.0",
|
|
47
47
|
"@jbrowse/plugin-linear-genome-view": "^2.0.0",
|
|
48
48
|
"@mui/material": "^5.0.0",
|
|
49
|
-
"@mui/x-data-grid": "^
|
|
49
|
+
"@mui/x-data-grid": "^6.0.1",
|
|
50
50
|
"mobx": "^6.0.0",
|
|
51
51
|
"mobx-react": "^7.0.0",
|
|
52
52
|
"mobx-state-tree": "^5.0.0",
|
|
@@ -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": "d1ca073996d008f0fe9a52f7c1a47ae649dcfdaf"
|
|
63
63
|
}
|
package/src/GridBookmarkWidget/components/{GridBookmarkWidget.test.js → GridBookmarkWidget.test.tsx}
RENAMED
|
@@ -5,6 +5,7 @@ import { render, cleanup, fireEvent, within } from '@testing-library/react'
|
|
|
5
5
|
import { createTestSession } from '@jbrowse/web/src/rootModel'
|
|
6
6
|
|
|
7
7
|
import GridBookmarkWidget from './GridBookmarkWidget'
|
|
8
|
+
import { GridBookmarkModel } from '../model'
|
|
8
9
|
jest.mock('@jbrowse/web/src/makeWorkerInstance', () => () => {})
|
|
9
10
|
|
|
10
11
|
jest.mock('file-saver', () => {
|
|
@@ -15,24 +16,32 @@ jest.mock('file-saver', () => {
|
|
|
15
16
|
})
|
|
16
17
|
|
|
17
18
|
describe('<GridBookmarkWidget />', () => {
|
|
18
|
-
let session
|
|
19
|
-
let model
|
|
20
|
-
|
|
21
19
|
beforeEach(() => {
|
|
22
|
-
|
|
23
|
-
model = session.addWidget('GridBookmarkWidget', 'gridBookmarkWidget')
|
|
20
|
+
// @ts-expect-error
|
|
24
21
|
saveAs.mockReset()
|
|
25
22
|
})
|
|
26
23
|
|
|
27
24
|
afterEach(cleanup)
|
|
28
25
|
|
|
29
26
|
it('renders empty with no bookmarks', async () => {
|
|
27
|
+
const session = createTestSession()
|
|
28
|
+
const model = session.addWidget(
|
|
29
|
+
'GridBookmarkWidget',
|
|
30
|
+
'gridBookmarkWidget',
|
|
31
|
+
) as GridBookmarkModel
|
|
32
|
+
|
|
30
33
|
const { findByText } = render(<GridBookmarkWidget model={model} />)
|
|
31
34
|
|
|
32
35
|
expect(await findByText('No rows')).toBeTruthy()
|
|
33
36
|
})
|
|
34
37
|
|
|
35
38
|
it('renders bookmarks correctly', async () => {
|
|
39
|
+
const session = createTestSession()
|
|
40
|
+
const model = session.addWidget(
|
|
41
|
+
'GridBookmarkWidget',
|
|
42
|
+
'gridBookmarkWidget',
|
|
43
|
+
) as GridBookmarkModel
|
|
44
|
+
|
|
36
45
|
model.addBookmark({
|
|
37
46
|
refName: 'chr1',
|
|
38
47
|
start: 1,
|
|
@@ -46,6 +55,12 @@ describe('<GridBookmarkWidget />', () => {
|
|
|
46
55
|
})
|
|
47
56
|
|
|
48
57
|
it('deletes individual bookmarks correctly', async () => {
|
|
58
|
+
const session = createTestSession()
|
|
59
|
+
const model = session.addWidget(
|
|
60
|
+
'GridBookmarkWidget',
|
|
61
|
+
'gridBookmarkWidget',
|
|
62
|
+
) as GridBookmarkModel
|
|
63
|
+
|
|
49
64
|
model.addBookmark({
|
|
50
65
|
refName: 'chr1',
|
|
51
66
|
start: 1,
|
|
@@ -64,6 +79,12 @@ describe('<GridBookmarkWidget />', () => {
|
|
|
64
79
|
})
|
|
65
80
|
|
|
66
81
|
it('clears all bookmarks correctly', async () => {
|
|
82
|
+
const session = createTestSession()
|
|
83
|
+
const model = session.addWidget(
|
|
84
|
+
'GridBookmarkWidget',
|
|
85
|
+
'gridBookmarkWidget',
|
|
86
|
+
) as GridBookmarkModel
|
|
87
|
+
|
|
67
88
|
model.addBookmark({
|
|
68
89
|
refName: 'chr1',
|
|
69
90
|
start: 1,
|
|
@@ -80,6 +101,12 @@ describe('<GridBookmarkWidget />', () => {
|
|
|
80
101
|
})
|
|
81
102
|
|
|
82
103
|
it('downloads a BED file correctly', async () => {
|
|
104
|
+
const session = createTestSession()
|
|
105
|
+
const model = session.addWidget(
|
|
106
|
+
'GridBookmarkWidget',
|
|
107
|
+
'gridBookmarkWidget',
|
|
108
|
+
) as GridBookmarkModel
|
|
109
|
+
|
|
83
110
|
model.addBookmark({
|
|
84
111
|
refName: 'chr1',
|
|
85
112
|
start: 1,
|
|
@@ -102,6 +129,12 @@ describe('<GridBookmarkWidget />', () => {
|
|
|
102
129
|
})
|
|
103
130
|
|
|
104
131
|
it('downloads a TSV file correctly', async () => {
|
|
132
|
+
const session = createTestSession()
|
|
133
|
+
const model = session.addWidget(
|
|
134
|
+
'GridBookmarkWidget',
|
|
135
|
+
'gridBookmarkWidget',
|
|
136
|
+
) as GridBookmarkModel
|
|
137
|
+
|
|
105
138
|
model.addBookmark({
|
|
106
139
|
refName: 'chr1',
|
|
107
140
|
start: 1,
|
|
@@ -2,8 +2,14 @@ import React, { useState } from 'react'
|
|
|
2
2
|
import { observer } from 'mobx-react'
|
|
3
3
|
import { Link, IconButton, Typography } from '@mui/material'
|
|
4
4
|
import { makeStyles } from 'tss-react/mui'
|
|
5
|
-
import { DataGrid
|
|
6
|
-
import {
|
|
5
|
+
import { DataGrid } from '@mui/x-data-grid'
|
|
6
|
+
import {
|
|
7
|
+
getSession,
|
|
8
|
+
assembleLocString,
|
|
9
|
+
measureGridWidth,
|
|
10
|
+
} from '@jbrowse/core/util'
|
|
11
|
+
|
|
12
|
+
// icons
|
|
7
13
|
import DeleteIcon from '@mui/icons-material/Delete'
|
|
8
14
|
|
|
9
15
|
// locals
|
|
@@ -15,18 +21,15 @@ import ClearBookmarks from './ClearBookmarks'
|
|
|
15
21
|
import { GridBookmarkModel } from '../model'
|
|
16
22
|
import { navToBookmark } from '../utils'
|
|
17
23
|
|
|
18
|
-
const useStyles = makeStyles()(
|
|
24
|
+
const useStyles = makeStyles()(theme => ({
|
|
19
25
|
link: {
|
|
20
26
|
cursor: 'pointer',
|
|
21
27
|
},
|
|
28
|
+
margin: {
|
|
29
|
+
margin: theme.spacing(2),
|
|
30
|
+
},
|
|
22
31
|
}))
|
|
23
32
|
|
|
24
|
-
// creates a coarse measurement of column width, similar to code in
|
|
25
|
-
// BaseFeatureDetails
|
|
26
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
27
|
-
const measure = (row: any, col: string) =>
|
|
28
|
-
Math.min(Math.max(measureText(String(row[col]), 14) + 20, 80), 1000)
|
|
29
|
-
|
|
30
33
|
const BookmarkGrid = observer(({ model }: { model: GridBookmarkModel }) => {
|
|
31
34
|
const { classes } = useStyles()
|
|
32
35
|
const [dialogRowNumber, setDialogRowNumber] = useState<number>()
|
|
@@ -49,68 +52,56 @@ const BookmarkGrid = observer(({ model }: { model: GridBookmarkModel }) => {
|
|
|
49
52
|
}
|
|
50
53
|
})
|
|
51
54
|
|
|
52
|
-
const columns = [
|
|
53
|
-
{
|
|
54
|
-
field: 'locString',
|
|
55
|
-
headerName: 'bookmark link',
|
|
56
|
-
width: Math.max(...bookmarkRows.map(row => measure(row, 'locString'))),
|
|
57
|
-
renderCell: (params: GridCellParams) => {
|
|
58
|
-
const { value } = params
|
|
59
|
-
return (
|
|
60
|
-
<Link
|
|
61
|
-
className={classes.link}
|
|
62
|
-
onClick={async event => {
|
|
63
|
-
event.preventDefault()
|
|
64
|
-
// has own error handling
|
|
65
|
-
await navToBookmark(value as string, views, model)
|
|
66
|
-
}}
|
|
67
|
-
>
|
|
68
|
-
{value}
|
|
69
|
-
</Link>
|
|
70
|
-
)
|
|
71
|
-
},
|
|
72
|
-
},
|
|
73
|
-
{
|
|
74
|
-
field: 'label',
|
|
75
|
-
width: Math.max(
|
|
76
|
-
100,
|
|
77
|
-
Math.max(...bookmarkRows.map(row => measure(row, 'label'))),
|
|
78
|
-
),
|
|
79
|
-
editable: true,
|
|
80
|
-
},
|
|
81
|
-
{
|
|
82
|
-
field: 'delete',
|
|
83
|
-
width: 30,
|
|
84
|
-
renderCell: (params: GridCellParams) => {
|
|
85
|
-
const { value } = params
|
|
86
|
-
return (
|
|
87
|
-
<IconButton
|
|
88
|
-
data-testid="deleteBookmark"
|
|
89
|
-
aria-label="delete"
|
|
90
|
-
onClick={() => {
|
|
91
|
-
if (value !== null && value !== undefined) {
|
|
92
|
-
setDialogRowNumber(+value)
|
|
93
|
-
}
|
|
94
|
-
}}
|
|
95
|
-
>
|
|
96
|
-
<DeleteIcon />
|
|
97
|
-
</IconButton>
|
|
98
|
-
)
|
|
99
|
-
},
|
|
100
|
-
},
|
|
101
|
-
]
|
|
102
|
-
|
|
103
55
|
return (
|
|
104
56
|
<>
|
|
105
57
|
<DataGrid
|
|
106
58
|
density="compact"
|
|
107
59
|
rows={bookmarkRows}
|
|
108
|
-
columns={
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
60
|
+
columns={[
|
|
61
|
+
{
|
|
62
|
+
field: 'locString',
|
|
63
|
+
headerName: 'bookmark link',
|
|
64
|
+
width: measureGridWidth(bookmarkRows.map(row => row.locString)),
|
|
65
|
+
renderCell: params => (
|
|
66
|
+
<Link
|
|
67
|
+
className={classes.link}
|
|
68
|
+
href="#"
|
|
69
|
+
onClick={async event => {
|
|
70
|
+
event.preventDefault()
|
|
71
|
+
await navToBookmark(params.value, views, model)
|
|
72
|
+
}}
|
|
73
|
+
>
|
|
74
|
+
{params.value}
|
|
75
|
+
</Link>
|
|
76
|
+
),
|
|
77
|
+
},
|
|
78
|
+
{
|
|
79
|
+
field: 'label',
|
|
80
|
+
width: measureGridWidth(bookmarkRows.map(row => row.label)),
|
|
81
|
+
editable: true,
|
|
82
|
+
},
|
|
83
|
+
{
|
|
84
|
+
field: 'delete',
|
|
85
|
+
width: 100,
|
|
86
|
+
renderCell: params => (
|
|
87
|
+
<IconButton
|
|
88
|
+
data-testid="deleteBookmark"
|
|
89
|
+
aria-label="delete"
|
|
90
|
+
onClick={() => {
|
|
91
|
+
if (params.value != null) {
|
|
92
|
+
setDialogRowNumber(+params.value)
|
|
93
|
+
}
|
|
94
|
+
}}
|
|
95
|
+
>
|
|
96
|
+
<DeleteIcon />
|
|
97
|
+
</IconButton>
|
|
98
|
+
),
|
|
99
|
+
},
|
|
100
|
+
]}
|
|
101
|
+
onCellEditStop={({ id, value }) =>
|
|
102
|
+
model.updateBookmarkLabel(id as number, value)
|
|
103
|
+
}
|
|
104
|
+
disableRowSelectionOnClick
|
|
114
105
|
/>
|
|
115
106
|
|
|
116
107
|
<DeleteBookmarkDialog
|
|
@@ -124,6 +115,7 @@ const BookmarkGrid = observer(({ model }: { model: GridBookmarkModel }) => {
|
|
|
124
115
|
|
|
125
116
|
function GridBookmarkWidget({ model }: { model: GridBookmarkModel }) {
|
|
126
117
|
const { selectedAssembly } = model
|
|
118
|
+
const { classes } = useStyles()
|
|
127
119
|
|
|
128
120
|
return (
|
|
129
121
|
<>
|
|
@@ -132,15 +124,11 @@ function GridBookmarkWidget({ model }: { model: GridBookmarkModel }) {
|
|
|
132
124
|
<ImportBookmarks model={model} assemblyName={selectedAssembly} />
|
|
133
125
|
<ClearBookmarks model={model} />
|
|
134
126
|
|
|
135
|
-
<
|
|
136
|
-
<
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
</div>
|
|
141
|
-
<div style={{ height: 750, width: '100%' }}>
|
|
142
|
-
<BookmarkGrid model={model} />
|
|
143
|
-
</div>
|
|
127
|
+
<Typography className={classes.margin}>
|
|
128
|
+
Note: you can double click the <code>label</code> field to add your own
|
|
129
|
+
custom notes
|
|
130
|
+
</Typography>
|
|
131
|
+
<BookmarkGrid model={model} />
|
|
144
132
|
</>
|
|
145
133
|
)
|
|
146
134
|
}
|