@jbrowse/plugin-grid-bookmark 2.17.0 → 3.0.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 +2 -3
- package/dist/GridBookmarkWidget/components/AssemblySelector.js +10 -25
- package/dist/GridBookmarkWidget/components/BookmarkGrid.d.ts +2 -3
- package/dist/GridBookmarkWidget/components/BookmarkGrid.js +52 -82
- package/dist/GridBookmarkWidget/components/GridBookmarkWidget.d.ts +2 -3
- package/dist/GridBookmarkWidget/components/GridBookmarkWidget.js +90 -93
- package/dist/GridBookmarkWidget/components/Highlight/Highlight.d.ts +2 -3
- package/dist/GridBookmarkWidget/components/Highlight/Highlight.js +34 -58
- package/dist/GridBookmarkWidget/components/Highlight/OverviewHighlight.d.ts +3 -4
- package/dist/GridBookmarkWidget/components/Highlight/OverviewHighlight.js +8 -31
- package/dist/GridBookmarkWidget/components/Highlight/index.d.ts +1 -1
- package/dist/GridBookmarkWidget/components/Highlight/index.js +5 -10
- package/dist/GridBookmarkWidget/components/dialogs/DeleteBookmarksDialog.d.ts +2 -3
- package/dist/GridBookmarkWidget/components/dialogs/DeleteBookmarksDialog.js +12 -23
- package/dist/GridBookmarkWidget/components/dialogs/EditHighlightColorDialog.d.ts +2 -3
- package/dist/GridBookmarkWidget/components/dialogs/EditHighlightColorDialog.js +12 -41
- package/dist/GridBookmarkWidget/components/dialogs/ExportBookmarksDialog.d.ts +3 -4
- package/dist/GridBookmarkWidget/components/dialogs/ExportBookmarksDialog.js +14 -47
- package/dist/GridBookmarkWidget/components/dialogs/HighlightSettingsDialog.d.ts +2 -3
- package/dist/GridBookmarkWidget/components/dialogs/HighlightSettingsDialog.js +10 -23
- package/dist/GridBookmarkWidget/components/dialogs/ImportBookmarksDialog.d.ts +2 -3
- package/dist/GridBookmarkWidget/components/dialogs/ImportBookmarksDialog.js +39 -81
- package/dist/GridBookmarkWidget/components/dialogs/ShareBookmarksDialog.d.ts +2 -3
- package/dist/GridBookmarkWidget/components/dialogs/ShareBookmarksDialog.js +19 -53
- package/dist/GridBookmarkWidget/index.d.ts +1 -1
- package/dist/GridBookmarkWidget/index.js +18 -9
- package/dist/GridBookmarkWidget/model.d.ts +10 -86
- package/dist/GridBookmarkWidget/model.js +18 -94
- package/dist/GridBookmarkWidget/sessionSharing.d.ts +1 -1
- package/dist/GridBookmarkWidget/sessionSharing.js +20 -16
- package/dist/GridBookmarkWidget/types.d.ts +1 -1
- package/dist/GridBookmarkWidget/utils.d.ts +2 -16
- package/dist/GridBookmarkWidget/utils.js +19 -30
- package/dist/index.d.ts +1 -1
- package/dist/index.js +10 -29
- package/esm/GridBookmarkWidget/components/AssemblySelector.d.ts +2 -3
- package/esm/GridBookmarkWidget/components/AssemblySelector.js +10 -22
- package/esm/GridBookmarkWidget/components/BookmarkGrid.d.ts +2 -3
- package/esm/GridBookmarkWidget/components/BookmarkGrid.js +52 -59
- package/esm/GridBookmarkWidget/components/GridBookmarkWidget.d.ts +2 -3
- package/esm/GridBookmarkWidget/components/GridBookmarkWidget.js +73 -86
- package/esm/GridBookmarkWidget/components/Highlight/Highlight.d.ts +2 -3
- package/esm/GridBookmarkWidget/components/Highlight/Highlight.js +34 -35
- package/esm/GridBookmarkWidget/components/Highlight/OverviewHighlight.d.ts +3 -4
- package/esm/GridBookmarkWidget/components/Highlight/OverviewHighlight.js +8 -8
- package/esm/GridBookmarkWidget/components/Highlight/index.d.ts +1 -1
- package/esm/GridBookmarkWidget/components/Highlight/index.js +5 -10
- package/esm/GridBookmarkWidget/components/dialogs/DeleteBookmarksDialog.d.ts +2 -3
- package/esm/GridBookmarkWidget/components/dialogs/DeleteBookmarksDialog.js +12 -20
- package/esm/GridBookmarkWidget/components/dialogs/EditHighlightColorDialog.d.ts +2 -3
- package/esm/GridBookmarkWidget/components/dialogs/EditHighlightColorDialog.js +12 -18
- package/esm/GridBookmarkWidget/components/dialogs/ExportBookmarksDialog.d.ts +3 -4
- package/esm/GridBookmarkWidget/components/dialogs/ExportBookmarksDialog.js +14 -24
- package/esm/GridBookmarkWidget/components/dialogs/HighlightSettingsDialog.d.ts +2 -3
- package/esm/GridBookmarkWidget/components/dialogs/HighlightSettingsDialog.js +10 -20
- package/esm/GridBookmarkWidget/components/dialogs/ImportBookmarksDialog.d.ts +2 -3
- package/esm/GridBookmarkWidget/components/dialogs/ImportBookmarksDialog.js +40 -59
- package/esm/GridBookmarkWidget/components/dialogs/ShareBookmarksDialog.d.ts +2 -3
- package/esm/GridBookmarkWidget/components/dialogs/ShareBookmarksDialog.js +19 -30
- package/esm/GridBookmarkWidget/index.d.ts +1 -1
- package/esm/GridBookmarkWidget/index.js +1 -2
- package/esm/GridBookmarkWidget/model.d.ts +10 -86
- package/esm/GridBookmarkWidget/model.js +18 -94
- package/esm/GridBookmarkWidget/sessionSharing.d.ts +1 -1
- package/esm/GridBookmarkWidget/sessionSharing.js +3 -9
- package/esm/GridBookmarkWidget/types.d.ts +1 -1
- package/esm/GridBookmarkWidget/utils.d.ts +2 -16
- package/esm/GridBookmarkWidget/utils.js +2 -23
- package/esm/index.d.ts +1 -1
- package/esm/index.js +10 -29
- package/package.json +2 -2
- package/dist/GridBookmarkWidget/components/dialogs/EditBookmarkLabelDialog.d.ts +0 -8
- package/dist/GridBookmarkWidget/components/dialogs/EditBookmarkLabelDialog.js +0 -54
- package/esm/GridBookmarkWidget/components/dialogs/EditBookmarkLabelDialog.d.ts +0 -8
- package/esm/GridBookmarkWidget/components/dialogs/EditBookmarkLabelDialog.js +0 -29
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
import
|
|
2
|
-
import {
|
|
3
|
-
import
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { Fragment, useEffect } from 'react';
|
|
3
|
+
import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton';
|
|
4
4
|
import { getSession, notEmpty } from '@jbrowse/core/util';
|
|
5
5
|
import { colord } from '@jbrowse/core/util/colord';
|
|
6
|
-
import { Tooltip } from '@mui/material';
|
|
7
|
-
import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton';
|
|
8
|
-
// icons
|
|
9
6
|
import BookmarkIcon from '@mui/icons-material/Bookmark';
|
|
7
|
+
import { Tooltip } from '@mui/material';
|
|
8
|
+
import { observer } from 'mobx-react';
|
|
9
|
+
import { makeStyles } from 'tss-react/mui';
|
|
10
10
|
const useStyles = makeStyles()({
|
|
11
11
|
bookmarkButton: {
|
|
12
12
|
overflow: 'hidden',
|
|
@@ -23,7 +23,7 @@ const Highlight = observer(function Highlight({ model }) {
|
|
|
23
23
|
const { classes } = useStyles();
|
|
24
24
|
const session = getSession(model);
|
|
25
25
|
const { assemblyManager } = session;
|
|
26
|
-
const {
|
|
26
|
+
const { bookmarkHighlightsVisible, bookmarkLabelsVisible } = model;
|
|
27
27
|
const bookmarkWidget = session.widgets.get('GridBookmark');
|
|
28
28
|
useEffect(() => {
|
|
29
29
|
if (!bookmarkWidget) {
|
|
@@ -31,7 +31,7 @@ const Highlight = observer(function Highlight({ model }) {
|
|
|
31
31
|
}
|
|
32
32
|
}, [session, bookmarkWidget]);
|
|
33
33
|
const set = new Set(model.assemblyNames);
|
|
34
|
-
return
|
|
34
|
+
return bookmarkHighlightsVisible && (bookmarkWidget === null || bookmarkWidget === void 0 ? void 0 : bookmarkWidget.bookmarks)
|
|
35
35
|
? bookmarkWidget.bookmarks
|
|
36
36
|
.filter(value => set.has(value.assemblyName))
|
|
37
37
|
.map(r => {
|
|
@@ -51,35 +51,34 @@ const Highlight = observer(function Highlight({ model }) {
|
|
|
51
51
|
: undefined;
|
|
52
52
|
})
|
|
53
53
|
.filter(notEmpty)
|
|
54
|
-
.map(({ left, width, highlight, label, bookmark }, idx) => (
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
left,
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
54
|
+
.map(({ left, width, highlight, label, bookmark }, idx) => (_jsxs(Fragment, { children: [_jsx("div", { className: classes.highlight, id: "highlight", style: {
|
|
55
|
+
left,
|
|
56
|
+
width,
|
|
57
|
+
background: highlight,
|
|
58
|
+
} }), bookmarkLabelsVisible && width > 20 ? (_jsx("div", { className: classes.bookmarkButton, style: { left }, children: _jsx(CascadingMenuButton, { menuItems: [
|
|
59
|
+
{
|
|
60
|
+
label: 'Open bookmark widget',
|
|
61
|
+
onClick: () => {
|
|
62
|
+
session.showWidget(bookmarkWidget);
|
|
63
|
+
},
|
|
64
|
+
},
|
|
65
|
+
{
|
|
66
|
+
label: 'Turn off highlights',
|
|
67
|
+
onClick: () => {
|
|
68
|
+
bookmarkWidget.setBookmarkHighlightsVisible(false);
|
|
69
|
+
},
|
|
68
70
|
},
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
71
|
+
{
|
|
72
|
+
label: 'Remove bookmark',
|
|
73
|
+
onClick: () => {
|
|
74
|
+
bookmarkWidget.removeBookmarkObject(bookmark);
|
|
75
|
+
},
|
|
74
76
|
},
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
? colord(highlight).alpha(0.8).toRgbString()
|
|
81
|
-
: colord(highlight).alpha(0).toRgbString(),
|
|
82
|
-
} }))))) : null)))
|
|
77
|
+
], children: _jsx(Tooltip, { title: label, arrow: true, children: _jsx(BookmarkIcon, { fontSize: "small", sx: {
|
|
78
|
+
color: colord(highlight).alpha() !== 0
|
|
79
|
+
? colord(highlight).alpha(0.8).toRgbString()
|
|
80
|
+
: colord(highlight).alpha(0).toRgbString(),
|
|
81
|
+
} }) }) }) })) : null] }, `${left}_${width}_${idx}`)))
|
|
83
82
|
: null;
|
|
84
83
|
});
|
|
85
84
|
export default Highlight;
|
|
@@ -1,9 +1,8 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { Base1DViewModel } from '@jbrowse/core/util/Base1DViewModel';
|
|
3
|
-
import { IExtendedLGV } from '../../model';
|
|
1
|
+
import type { IExtendedLGV } from '../../model';
|
|
2
|
+
import type { Base1DViewModel } from '@jbrowse/core/util/Base1DViewModel';
|
|
4
3
|
type LGV = IExtendedLGV;
|
|
5
4
|
declare const OverviewHighlight: ({ model, overview, }: {
|
|
6
5
|
model: LGV;
|
|
7
6
|
overview: Base1DViewModel;
|
|
8
|
-
}) =>
|
|
7
|
+
}) => import("react/jsx-runtime").JSX.Element[] | null;
|
|
9
8
|
export default OverviewHighlight;
|
|
@@ -1,8 +1,9 @@
|
|
|
1
|
-
import
|
|
2
|
-
import {
|
|
3
|
-
import { makeStyles } from 'tss-react/mui';
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { useEffect } from 'react';
|
|
4
3
|
import { getSession, notEmpty } from '@jbrowse/core/util';
|
|
5
4
|
import { Tooltip } from '@mui/material';
|
|
5
|
+
import { observer } from 'mobx-react';
|
|
6
|
+
import { makeStyles } from 'tss-react/mui';
|
|
6
7
|
const useStyles = makeStyles()({
|
|
7
8
|
highlight: {
|
|
8
9
|
height: '100%',
|
|
@@ -14,7 +15,7 @@ const OverviewHighlight = observer(function OverviewHighlight({ model, overview,
|
|
|
14
15
|
const session = getSession(model);
|
|
15
16
|
const { classes } = useStyles();
|
|
16
17
|
const { assemblyManager } = session;
|
|
17
|
-
const {
|
|
18
|
+
const { bookmarkHighlightsVisible, bookmarkLabelsVisible } = model;
|
|
18
19
|
const bookmarkWidget = session.widgets.get('GridBookmark');
|
|
19
20
|
useEffect(() => {
|
|
20
21
|
if (!bookmarkWidget) {
|
|
@@ -22,7 +23,7 @@ const OverviewHighlight = observer(function OverviewHighlight({ model, overview,
|
|
|
22
23
|
}
|
|
23
24
|
}, [session, bookmarkWidget]);
|
|
24
25
|
const assemblyNames = new Set(model.assemblyNames);
|
|
25
|
-
return
|
|
26
|
+
return bookmarkHighlightsVisible && (bookmarkWidget === null || bookmarkWidget === void 0 ? void 0 : bookmarkWidget.bookmarks)
|
|
26
27
|
? bookmarkWidget.bookmarks
|
|
27
28
|
.filter(r => assemblyNames.has(r.assemblyName))
|
|
28
29
|
.map(r => {
|
|
@@ -44,14 +45,13 @@ const OverviewHighlight = observer(function OverviewHighlight({ model, overview,
|
|
|
44
45
|
.filter(notEmpty)
|
|
45
46
|
.map((obj, idx) => {
|
|
46
47
|
const { left, width, highlight, label } = obj;
|
|
47
|
-
return (
|
|
48
|
-
React.createElement("div", { className: classes.highlight, style: {
|
|
48
|
+
return (_jsx(Tooltip, { title: bookmarkLabelsVisible ? label : '', arrow: true, children: _jsx("div", { className: classes.highlight, style: {
|
|
49
49
|
left,
|
|
50
50
|
width,
|
|
51
51
|
background: highlight,
|
|
52
52
|
borderLeft: `1px solid ${highlight}`,
|
|
53
53
|
borderRight: `1px solid ${highlight}`,
|
|
54
|
-
} })));
|
|
54
|
+
} }) }, `${JSON.stringify(obj)}-${idx}`));
|
|
55
55
|
})
|
|
56
56
|
: null;
|
|
57
57
|
});
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import PluginManager from '@jbrowse/core/PluginManager';
|
|
1
|
+
import type PluginManager from '@jbrowse/core/PluginManager';
|
|
2
2
|
export default function AddHighlightModelF(pluginManager: PluginManager): void;
|
|
@@ -1,22 +1,17 @@
|
|
|
1
|
-
import
|
|
2
|
-
// locals
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
2
|
import Highlight from './Highlight';
|
|
4
3
|
import OverviewHighlight from './OverviewHighlight';
|
|
5
4
|
export default function AddHighlightModelF(pluginManager) {
|
|
6
|
-
pluginManager.addToExtensionPoint('LinearGenomeView-TracksContainerComponent',
|
|
7
|
-
// @ts-expect-error
|
|
8
|
-
(rest, { model }) => {
|
|
5
|
+
pluginManager.addToExtensionPoint('LinearGenomeView-TracksContainerComponent', (rest, { model }) => {
|
|
9
6
|
return [
|
|
10
7
|
...(rest || []),
|
|
11
|
-
|
|
8
|
+
_jsx(Highlight, { model: model }, "highlight_grid_bookmark"),
|
|
12
9
|
];
|
|
13
10
|
});
|
|
14
|
-
pluginManager.addToExtensionPoint('LinearGenomeView-OverviewScalebarComponent',
|
|
15
|
-
// @ts-expect-error
|
|
16
|
-
(rest, { model, overview }) => {
|
|
11
|
+
pluginManager.addToExtensionPoint('LinearGenomeView-OverviewScalebarComponent', (rest, { model, overview }) => {
|
|
17
12
|
return [
|
|
18
13
|
...(rest || []),
|
|
19
|
-
|
|
14
|
+
_jsx(OverviewHighlight, { model: model, overview: overview }, "overview_highlight_grid_bookmark"),
|
|
20
15
|
];
|
|
21
16
|
});
|
|
22
17
|
}
|
|
@@ -1,7 +1,6 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { GridBookmarkModel } from '../../model';
|
|
1
|
+
import type { GridBookmarkModel } from '../../model';
|
|
3
2
|
declare const DeleteBookmarksDialog: ({ onClose, model, }: {
|
|
4
3
|
onClose: () => void;
|
|
5
4
|
model: GridBookmarkModel;
|
|
6
|
-
}) =>
|
|
5
|
+
}) => import("react/jsx-runtime").JSX.Element;
|
|
7
6
|
export default DeleteBookmarksDialog;
|
|
@@ -1,26 +1,18 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { observer } from 'mobx-react';
|
|
3
|
-
import { Button, DialogContent, DialogActions, Alert } from '@mui/material';
|
|
1
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
4
2
|
import { Dialog } from '@jbrowse/core/ui';
|
|
3
|
+
import { Alert, Button, DialogActions, DialogContent } from '@mui/material';
|
|
4
|
+
import { observer } from 'mobx-react';
|
|
5
5
|
const DeleteBookmarksDialog = observer(function ({ onClose, model, }) {
|
|
6
6
|
const { selectedBookmarks } = model;
|
|
7
7
|
const deleteAll = selectedBookmarks.length === 0;
|
|
8
|
-
return (
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
} }, "Cancel"),
|
|
18
|
-
React.createElement(Button, { variant: "contained", color: "primary", onClick: () => {
|
|
19
|
-
if (deleteAll) {
|
|
20
|
-
model.clearAllBookmarks();
|
|
21
|
-
}
|
|
22
|
-
model.clearSelectedBookmarks();
|
|
23
|
-
onClose();
|
|
24
|
-
} }, "Confirm"))));
|
|
8
|
+
return (_jsxs(Dialog, { open: true, onClose: onClose, title: "Delete bookmarks", children: [_jsx(DialogContent, { children: _jsx(Alert, { severity: "warning", children: deleteAll ? (_jsxs(_Fragment, { children: [_jsx("span", { children: "All bookmarks will be deleted." }), _jsx("br", {}), _jsx("span", { children: "Use the checkboxes to select individual bookmarks to delete." })] })) : ('Only selected bookmarks will be deleted.') }) }), _jsxs(DialogActions, { children: [_jsx(Button, { variant: "contained", color: "secondary", onClick: () => {
|
|
9
|
+
onClose();
|
|
10
|
+
}, children: "Cancel" }), _jsx(Button, { variant: "contained", color: "primary", onClick: () => {
|
|
11
|
+
if (deleteAll) {
|
|
12
|
+
model.clearAllBookmarks();
|
|
13
|
+
}
|
|
14
|
+
model.clearSelectedBookmarks();
|
|
15
|
+
onClose();
|
|
16
|
+
}, children: "Confirm" })] })] }));
|
|
25
17
|
});
|
|
26
18
|
export default DeleteBookmarksDialog;
|
|
@@ -1,7 +1,6 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { GridBookmarkModel } from '../../model';
|
|
1
|
+
import type { GridBookmarkModel } from '../../model';
|
|
3
2
|
declare const EditHighlightColorDialog: ({ onClose, model, }: {
|
|
4
3
|
onClose: () => void;
|
|
5
4
|
model: GridBookmarkModel;
|
|
6
|
-
}) =>
|
|
5
|
+
}) => import("react/jsx-runtime").JSX.Element;
|
|
7
6
|
export default EditHighlightColorDialog;
|
|
@@ -1,27 +1,21 @@
|
|
|
1
|
-
import
|
|
2
|
-
import {
|
|
3
|
-
import { Button, DialogContent, DialogActions, Alert, Typography, } from '@mui/material';
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useState } from 'react';
|
|
4
3
|
import { Dialog } from '@jbrowse/core/ui';
|
|
5
4
|
import { ColorPicker } from '@jbrowse/core/ui/ColorPicker';
|
|
5
|
+
import { Alert, Button, DialogActions, DialogContent, Typography, } from '@mui/material';
|
|
6
|
+
import { observer } from 'mobx-react';
|
|
6
7
|
const EditHighlightColorDialog = observer(function ({ onClose, model, }) {
|
|
7
8
|
var _a, _b;
|
|
8
9
|
const { selectedBookmarks } = model;
|
|
9
10
|
const editNone = selectedBookmarks.length === 0;
|
|
10
11
|
const [color, setColor] = useState((_b = (_a = selectedBookmarks[0]) === null || _a === void 0 ? void 0 : _a.highlight) !== null && _b !== void 0 ? _b : 'rgba(247, 129, 192, 0.35)');
|
|
11
|
-
return (
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
React.createElement(Button, { variant: "contained", color: "secondary", onClick: () => {
|
|
20
|
-
onClose();
|
|
21
|
-
} }, "Cancel"),
|
|
22
|
-
React.createElement(Button, { variant: "contained", color: "primary", onClick: () => {
|
|
23
|
-
model.updateBulkBookmarkHighlights(color);
|
|
24
|
-
onClose();
|
|
25
|
-
} }, "Confirm"))));
|
|
12
|
+
return (_jsxs(Dialog, { open: true, onClose: onClose, title: "Highlight bookmarks", children: [_jsxs(DialogContent, { children: [_jsx(Typography, { variant: "h6", children: "Bulk highlight selector" }), _jsx(Alert, { severity: "info", children: editNone ? (_jsx("span", { children: "Use the checkboxes to select individual bookmarks to edit." })) : ('Only selected bookmarks will be edited.') }), !editNone ? (_jsx(ColorPicker, { color: color, onChange: event => {
|
|
13
|
+
setColor(event);
|
|
14
|
+
} })) : null] }), _jsxs(DialogActions, { children: [_jsx(Button, { variant: "contained", color: "secondary", onClick: () => {
|
|
15
|
+
onClose();
|
|
16
|
+
}, children: "Cancel" }), _jsx(Button, { variant: "contained", color: "primary", onClick: () => {
|
|
17
|
+
model.updateBulkBookmarkHighlights(color);
|
|
18
|
+
onClose();
|
|
19
|
+
}, children: "Confirm" })] })] }));
|
|
26
20
|
});
|
|
27
21
|
export default EditHighlightColorDialog;
|
|
@@ -1,7 +1,6 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { GridBookmarkModel } from '../../model';
|
|
1
|
+
import type { GridBookmarkModel } from '../../model';
|
|
3
2
|
declare const ExportBookmarksDialog: ({ model, onClose, }: {
|
|
4
3
|
model: GridBookmarkModel;
|
|
5
|
-
onClose: (
|
|
6
|
-
}) =>
|
|
4
|
+
onClose: () => void;
|
|
5
|
+
}) => import("react/jsx-runtime").JSX.Element;
|
|
7
6
|
export default ExportBookmarksDialog;
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import
|
|
2
|
-
import {
|
|
3
|
-
import { Button, DialogContent, DialogActions, MenuItem, Select, Typography, Alert, } from '@mui/material';
|
|
4
|
-
import { makeStyles } from 'tss-react/mui';
|
|
1
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useState } from 'react';
|
|
5
3
|
import { Dialog } from '@jbrowse/core/ui';
|
|
6
|
-
// Icons
|
|
7
4
|
import GetAppIcon from '@mui/icons-material/GetApp';
|
|
5
|
+
import { Alert, Button, DialogActions, DialogContent, MenuItem, Select, Typography, } from '@mui/material';
|
|
6
|
+
import { observer } from 'mobx-react';
|
|
7
|
+
import { makeStyles } from 'tss-react/mui';
|
|
8
8
|
import { downloadBookmarkFile } from '../../utils';
|
|
9
9
|
const useStyles = makeStyles()({
|
|
10
10
|
flexItem: {
|
|
@@ -18,28 +18,18 @@ const useStyles = makeStyles()({
|
|
|
18
18
|
gap: '5px',
|
|
19
19
|
},
|
|
20
20
|
});
|
|
21
|
-
const ExportBookmarksDialog = observer(function
|
|
21
|
+
const ExportBookmarksDialog = observer(function ({ model, onClose, }) {
|
|
22
22
|
const { classes } = useStyles();
|
|
23
23
|
const [fileType, setFileType] = useState('BED');
|
|
24
24
|
const { selectedBookmarks } = model;
|
|
25
25
|
const exportAll = selectedBookmarks.length === 0;
|
|
26
|
-
return (
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
React.createElement(Select, { size: "small", value: fileType, onChange: event => {
|
|
35
|
-
setFileType(event.target.value);
|
|
36
|
-
} },
|
|
37
|
-
React.createElement(MenuItem, { value: "BED" }, "BED"),
|
|
38
|
-
React.createElement(MenuItem, { value: "TSV" }, "TSV")))),
|
|
39
|
-
React.createElement(DialogActions, null,
|
|
40
|
-
React.createElement(Button, { variant: "contained", color: "primary", startIcon: React.createElement(GetAppIcon, null), onClick: () => {
|
|
41
|
-
downloadBookmarkFile(fileType, model);
|
|
42
|
-
onClose(false);
|
|
43
|
-
} }, "Download"))));
|
|
26
|
+
return (_jsxs(Dialog, { open: true, onClose: () => {
|
|
27
|
+
onClose();
|
|
28
|
+
}, title: "Export bookmarks", children: [_jsxs(DialogContent, { className: classes.container, children: [_jsx(Alert, { severity: "info", children: exportAll ? (_jsxs(_Fragment, { children: [_jsx("span", { children: "All bookmarks will be exported." }), _jsx("br", {}), _jsx("span", { children: "Use the checkboxes to select individual bookmarks to export." })] })) : ('Only selected bookmarks will be exported.') }), _jsxs("div", { className: classes.flexItem, children: [_jsx(Typography, { children: "Format to download:" }), _jsxs(Select, { size: "small", value: fileType, onChange: event => {
|
|
29
|
+
setFileType(event.target.value);
|
|
30
|
+
}, children: [_jsx(MenuItem, { value: "BED", children: "BED" }), _jsx(MenuItem, { value: "TSV", children: "TSV" })] })] })] }), _jsx(DialogActions, { children: _jsx(Button, { variant: "contained", color: "primary", startIcon: _jsx(GetAppIcon, {}), onClick: () => {
|
|
31
|
+
downloadBookmarkFile(fileType, model);
|
|
32
|
+
onClose();
|
|
33
|
+
}, children: "Download" }) })] }));
|
|
44
34
|
});
|
|
45
35
|
export default ExportBookmarksDialog;
|
|
@@ -1,7 +1,6 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { GridBookmarkModel } from '../../model';
|
|
1
|
+
import type { GridBookmarkModel } from '../../model';
|
|
3
2
|
declare const HighlightSettingsDialog: ({ onClose, model, }: {
|
|
4
3
|
onClose: () => void;
|
|
5
4
|
model: GridBookmarkModel;
|
|
6
|
-
}) =>
|
|
5
|
+
}) => import("react/jsx-runtime").JSX.Element;
|
|
7
6
|
export default HighlightSettingsDialog;
|
|
@@ -1,24 +1,14 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { observer } from 'mobx-react';
|
|
3
|
-
import { Button, DialogContent, DialogActions, Stack, Typography, Switch, } from '@mui/material';
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
4
2
|
import { Dialog } from '@jbrowse/core/ui';
|
|
3
|
+
import { Button, DialogActions, DialogContent, Stack, Switch, Typography, } from '@mui/material';
|
|
4
|
+
import { observer } from 'mobx-react';
|
|
5
5
|
const HighlightSettingsDialog = observer(function ({ onClose, model, }) {
|
|
6
|
-
return (
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
} })
|
|
13
|
-
React.createElement(Typography, null, "Toggle bookmark highlights on all open views")),
|
|
14
|
-
React.createElement(Stack, { direction: "row", alignItems: "center" },
|
|
15
|
-
React.createElement(Switch, { "data-testid": "toggle_highlight_label_all_switch", checked: model.areBookmarksHighlightLabelsOnAllOpenViews, onChange: () => {
|
|
16
|
-
model.setLabelToggle(!model.areBookmarksHighlightLabelsOnAllOpenViews);
|
|
17
|
-
} }),
|
|
18
|
-
React.createElement(Typography, null, "Toggle 'bookmark' icon on LGV tracks"))),
|
|
19
|
-
React.createElement(DialogActions, null,
|
|
20
|
-
React.createElement(Button, { variant: "contained", color: "primary", onClick: () => {
|
|
21
|
-
onClose();
|
|
22
|
-
} }, "Close"))));
|
|
6
|
+
return (_jsxs(Dialog, { open: true, onClose: onClose, title: "Highlight bookmarks", children: [_jsxs(DialogContent, { children: [_jsx(Typography, { variant: "h6", children: "Highlight toggles" }), _jsxs(Stack, { direction: "row", alignItems: "center", children: [_jsx(Switch, { "data-testid": "toggle_highlight_all_switch", checked: model.areBookmarksHighlightedOnAllOpenViews, onChange: () => {
|
|
7
|
+
model.setBookmarkHighlightsVisible(!model.areBookmarksHighlightedOnAllOpenViews);
|
|
8
|
+
} }), _jsx(Typography, { children: "Toggle bookmark highlights on all open views" })] }), _jsxs(Stack, { direction: "row", alignItems: "center", children: [_jsx(Switch, { "data-testid": "toggle_highlight_label_all_switch", checked: model.areBookmarksHighlightLabelsOnAllOpenViews, onChange: () => {
|
|
9
|
+
model.setBookmarkLabelsVisible(!model.areBookmarksHighlightLabelsOnAllOpenViews);
|
|
10
|
+
} }), _jsx(Typography, { children: "Toggle 'bookmark' icon on LGV tracks" })] })] }), _jsx(DialogActions, { children: _jsx(Button, { variant: "contained", color: "primary", onClick: () => {
|
|
11
|
+
onClose();
|
|
12
|
+
}, children: "Close" }) })] }));
|
|
23
13
|
});
|
|
24
14
|
export default HighlightSettingsDialog;
|
|
@@ -1,7 +1,6 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { GridBookmarkModel } from '../../model';
|
|
1
|
+
import type { GridBookmarkModel } from '../../model';
|
|
3
2
|
declare const ImportBookmarksDialog: ({ onClose, model, }: {
|
|
4
3
|
onClose: () => void;
|
|
5
4
|
model: GridBookmarkModel;
|
|
6
|
-
}) =>
|
|
5
|
+
}) => import("react/jsx-runtime").JSX.Element;
|
|
7
6
|
export default ImportBookmarksDialog;
|
|
@@ -1,17 +1,16 @@
|
|
|
1
|
-
import
|
|
2
|
-
import {
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useState } from 'react';
|
|
3
|
+
import { AssemblySelector, Dialog, ErrorMessage, FileSelector, } from '@jbrowse/core/ui';
|
|
3
4
|
import { getSession } from '@jbrowse/core/util';
|
|
4
|
-
import { isSessionWithShareURL } from '@jbrowse/core/util/types';
|
|
5
|
-
import { ErrorMessage, FileSelector } from '@jbrowse/core/ui';
|
|
6
|
-
import { Accordion, AccordionSummary, AccordionDetails, Button, DialogContent, DialogActions, TextField, Typography, } from '@mui/material';
|
|
7
5
|
import { openLocation } from '@jbrowse/core/util/io';
|
|
8
|
-
import {
|
|
9
|
-
import { makeStyles } from 'tss-react/mui';
|
|
10
|
-
// icons
|
|
11
|
-
import ImportIcon from '@mui/icons-material/Publish';
|
|
6
|
+
import { isSessionWithShareURL } from '@jbrowse/core/util/types';
|
|
12
7
|
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
|
|
13
|
-
import
|
|
8
|
+
import ImportIcon from '@mui/icons-material/Publish';
|
|
9
|
+
import { Accordion, AccordionDetails, AccordionSummary, Button, DialogActions, DialogContent, TextField, Typography, } from '@mui/material';
|
|
10
|
+
import { observer } from 'mobx-react';
|
|
11
|
+
import { makeStyles } from 'tss-react/mui';
|
|
14
12
|
import { readSessionFromDynamo } from '../../sessionSharing';
|
|
13
|
+
import { fromUrlSafeB64 } from '../../utils';
|
|
15
14
|
const useStyles = makeStyles()(theme => ({
|
|
16
15
|
expandIcon: {
|
|
17
16
|
color: theme.palette.tertiary.contrastText || '#fff',
|
|
@@ -74,56 +73,38 @@ const ImportBookmarksDialog = observer(function ({ onClose, model, }) {
|
|
|
74
73
|
const { assemblyNames } = session;
|
|
75
74
|
const [selectedAsm, setSelectedAsm] = useState(assemblyNames[0]);
|
|
76
75
|
const [expanded, setExpanded] = useState('shareLinkAccordion');
|
|
77
|
-
return (
|
|
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
|
-
if (expanded === 'fileAccordion' && location) {
|
|
105
|
-
const data = await openLocation(location).readFile('utf8');
|
|
106
|
-
const lines = data.split(/\n|\r\n|\r/).filter(f => !!f.trim());
|
|
107
|
-
const fileType = guessFileType(lines[0]);
|
|
108
|
-
if (fileType === 'BED') {
|
|
109
|
-
model.importBookmarks(await getBookmarksFromBEDFile(lines, selectedAsm));
|
|
76
|
+
return (_jsxs(Dialog, { open: true, onClose: onClose, maxWidth: "xl", title: "Import bookmarks", children: [_jsxs(DialogContent, { className: classes.minWidth, children: [_jsxs(Accordion, { expanded: expanded === 'shareLinkAccordion', onChange: () => {
|
|
77
|
+
setExpanded('shareLinkAccordion');
|
|
78
|
+
}, children: [_jsx(AccordionSummary, { expandIcon: _jsx(ExpandMoreIcon, { className: classes.expandIcon }), children: _jsx(Typography, { style: { display: 'flex', alignItems: 'center', gap: '5px' }, children: "Import from share link" }) }), _jsxs(AccordionDetails, { children: [_jsx(Typography, { children: "Paste a bookmark share link generated by the 'Share' button from the bookmarks widget" }), _jsx(TextField, { label: "Enter Share URL", variant: "outlined", fullWidth: true, value: shareLink, onChange: e => {
|
|
79
|
+
setShareLink(e.target.value);
|
|
80
|
+
} })] })] }), _jsxs(Accordion, { expanded: expanded === 'fileAccordion', onChange: () => {
|
|
81
|
+
setExpanded('fileAccordion');
|
|
82
|
+
}, children: [_jsx(AccordionSummary, { expandIcon: _jsx(ExpandMoreIcon, { className: classes.expandIcon }), children: _jsx(Typography, { children: "Import from file" }) }), _jsxs(AccordionDetails, { children: [_jsx(FileSelector, { location: location, setLocation: setLocation, name: "File", description: `Choose a BED or TSV format file to import. Required TSV column headers are "chrom, start, end, label, assembly_name".` }), _jsx(AssemblySelector, { onChange: val => {
|
|
83
|
+
setSelectedAsm(val);
|
|
84
|
+
}, helperText: 'Select the assembly for BED file.', session: session, selected: selectedAsm })] })] }), error ? _jsx(ErrorMessage, { error: error }) : null] }), _jsxs(DialogActions, { children: [_jsx(Button, { variant: "contained", color: "secondary", onClick: onClose, children: "Cancel" }), _jsx(Button, { "data-testid": "dialogImport", variant: "contained", color: "primary", disabled: !location && !shareLink, startIcon: _jsx(ImportIcon, {}), onClick: async () => {
|
|
85
|
+
try {
|
|
86
|
+
if (expanded === 'fileAccordion' && location) {
|
|
87
|
+
const data = await openLocation(location).readFile('utf8');
|
|
88
|
+
const lines = data.split(/\n|\r\n|\r/).filter(f => !!f.trim());
|
|
89
|
+
const fileType = guessFileType(lines[0]);
|
|
90
|
+
if (fileType === 'BED') {
|
|
91
|
+
model.importBookmarks(await getBookmarksFromBEDFile(lines, selectedAsm));
|
|
92
|
+
}
|
|
93
|
+
else {
|
|
94
|
+
model.importBookmarks(await getBookmarksFromTSVFile(lines));
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
else if (expanded === 'shareLinkAccordion' &&
|
|
98
|
+
shareLink &&
|
|
99
|
+
isSessionWithShareURL(session)) {
|
|
100
|
+
model.importBookmarks(await getBookmarksFromShareLink(shareLink, session.shareURL));
|
|
101
|
+
}
|
|
102
|
+
onClose();
|
|
110
103
|
}
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
104
|
+
catch (e) {
|
|
105
|
+
console.error(e);
|
|
106
|
+
setError(e);
|
|
114
107
|
}
|
|
115
|
-
}
|
|
116
|
-
else if (expanded === 'shareLinkAccordion' &&
|
|
117
|
-
shareLink &&
|
|
118
|
-
isSessionWithShareURL(session)) {
|
|
119
|
-
model.importBookmarks(await getBookmarksFromShareLink(shareLink, session.shareURL));
|
|
120
|
-
}
|
|
121
|
-
onClose();
|
|
122
|
-
}
|
|
123
|
-
catch (e) {
|
|
124
|
-
console.error(e);
|
|
125
|
-
setError(e);
|
|
126
|
-
}
|
|
127
|
-
} }, "Import"))));
|
|
108
|
+
}, children: "Import" })] })] }));
|
|
128
109
|
});
|
|
129
110
|
export default ImportBookmarksDialog;
|
|
@@ -1,7 +1,6 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { GridBookmarkModel } from '../../model';
|
|
1
|
+
import type { GridBookmarkModel } from '../../model';
|
|
3
2
|
declare const ShareBookmarksDialog: ({ onClose, model, }: {
|
|
4
3
|
onClose: () => void;
|
|
5
4
|
model: GridBookmarkModel;
|
|
6
|
-
}) =>
|
|
5
|
+
}) => import("react/jsx-runtime").JSX.Element;
|
|
7
6
|
export default ShareBookmarksDialog;
|